wip: desktop work

packages/ui/src/components/collapsible.css

@@ -0,0 +1,46 @@
+[data-component="collapsible"] {
+  display: flex;
+  flex-direction: column;
+
+  [data-slot="trigger"] {
+    cursor: pointer;
+    user-select: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--border-focus);
+      outline-offset: 2px;
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  [data-slot="content"] {
+    overflow: hidden;
+    /* animation: slideUp 250ms ease-out; */
+
+    /* &[data-expanded] { */
+    /*   animation: slideDown 250ms ease-out; */
+    /* } */
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

packages/ui/src/components/collapsible.tsx

@@ -0,0 +1,35 @@
+import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
+import { ComponentProps, ParentProps, splitProps } from "solid-js"
+
+export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
+  class?: string
+  classList?: ComponentProps<"div">["classList"]
+}
+
+function CollapsibleRoot(props: CollapsibleProps) {
+  const [local, others] = splitProps(props, ["class", "classList"])
+
+  return (
+    <Kobalte
+      data-component="collapsible"
+      classList={{
+        ...(local.classList ?? {}),
+        [local.class ?? ""]: !!local.class,
+      }}
+      {...others}
+    />
+  )
+}
+
+function CollapsibleTrigger(props: ComponentProps<typeof Kobalte.Trigger>) {
+  return <Kobalte.Trigger data-slot="trigger" {...props} />
+}
+
+function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
+  return <Kobalte.Content data-slot="content" {...props} />
+}
+
+export const Collapsible = Object.assign(CollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent,
+})

packages/ui/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./button"
+export * from "./collapsible"
 export * from "./dialog"
 export * from "./icon"
 export * from "./icon-button"

packages/ui/src/demo.tsx

@@ -1,6 +1,19 @@
 import type { Component } from "solid-js"
 import { createSignal } from "solid-js"
-import { Button, Select, Tabs, Tooltip, Fonts, List, Dialog, Icon, IconButton, Input, SelectDialog } from "./components"
+import {
+  Button,
+  Select,
+  Tabs,
+  Tooltip,
+  Fonts,
+  List,
+  Dialog,
+  Icon,
+  IconButton,
+  Input,
+  SelectDialog,
+  Collapsible,
+} from "./components"
 import "./index.css"
 
 const Demo: Component = () => {
@@ -180,6 +193,27 @@ const Demo: Component = () => {
           {(item) => <div>{item}</div>}
         </SelectDialog>
       </section>
+      <h3>Collapsible</h3>
+      <section>
+        <Collapsible>
+          <Collapsible.Trigger>
+            <Button variant="secondary">Toggle Content</Button>
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <div
+              style={{
+                padding: "16px",
+                "background-color": "var(--surface-base)",
+                "border-radius": "8px",
+                "margin-top": "8px",
+              }}
+            >
+              <p>This is collapsible content that can be toggled open and closed.</p>
+              <p>It animates smoothly using CSS animations.</p>
+            </div>
+          </Collapsible.Content>
+        </Collapsible>
+      </section>
     </div>
   )