feat: sync collapsible component

apps/docs/src/config/docs.ts

@@ -84,6 +84,10 @@ export const docsConfig: Config = {
           title: "Checkbox",
           href: "/docs/components/checkbox"
         },
+        {
+          title: "Collapsible",
+          href: "/docs/components/collapsible"
+        },
         {
           title: "Dropdown Menu",
           href: "/docs/components/dropdown-menu"

apps/docs/src/registry/__index__.tsx

@@ -212,6 +212,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined
   },
+  "collapsible": {
+    name: "collapsible",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    component: lazy(() => import("~/registry/ui/collapsible.tsx")),
+    files: [{
+      path: "registry/ui/collapsible.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "dropdown-menu": {
     name: "dropdown-menu",
     description: "",
@@ -1028,6 +1042,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined
   },
+  "collapsible-demo": {
+    name: "collapsible-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["collapsible","button"],
+    component: lazy(() => import("~/registry/examples/collapsible-demo.tsx")),
+    files: [{
+      path: "registry/examples/collapsible-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "dropdown-menu-demo": {
     name: "dropdown-menu-demo",
     description: "",

apps/docs/src/registry/examples/_registry.ts

@@ -464,6 +464,17 @@ export const examples: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "collapsible-demo",
+    type: "registry:example",
+    registryDependencies: ["collapsible", "button"],
+    files: [
+      {
+        path: "examples/collapsible-demo.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
   {
     name: "dropdown-menu-demo",
     type: "registry:example",

apps/docs/src/registry/examples/collapsible-demo.tsx

@@ -0,0 +1,40 @@
+import { createSignal } from "solid-js"
+import { ChevronsUpDown } from "lucide-solid"
+
+import { Button } from "~/registry/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "~/registry/ui/collapsible"
+
+export default function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = createSignal(false)
+
+  return (
+    <Collapsible
+      open={isOpen()}
+      onOpenChange={setIsOpen}
+      class="flex w-[350px] flex-col gap-2"
+    >
+      <div class="flex items-center justify-between gap-4 px-4">
+        <h4 class="text-sm font-semibold">@peduarte starred 3 repositories</h4>
+        <CollapsibleTrigger as={Button} variant="ghost" size="icon" class="size-8">
+          <ChevronsUpDown class="size-4" />
+          <span class="sr-only">Toggle</span>
+        </CollapsibleTrigger>
+      </div>
+      <div class="rounded-md border px-4 py-2 font-mono text-sm">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent class="flex flex-col gap-2">
+        <div class="rounded-md border px-4 py-2 font-mono text-sm">
+          @radix-ui/colors
+        </div>
+        <div class="rounded-md border px-4 py-2 font-mono text-sm">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}

apps/docs/src/registry/styles/style-lyra.css

@@ -254,6 +254,11 @@
     @apply rounded-none border-t p-4 group-data-[size=sm]/card:p-3;
   }
 
+  /* MARK: Collapsible */
+  .cn-collapsible-content {
+    @apply data-expanded:animate-accordion-down data-closed:animate-accordion-up overflow-hidden;
+  }
+
   /* MARK: Chart */
   .cn-chart-tooltip {
     @apply border-border/50 bg-background gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl;

apps/docs/src/registry/styles/style-maia.css

@@ -275,6 +275,11 @@
     @apply rounded-full;
   }
 
+  /* MARK: Collapsible */
+  .cn-collapsible-content {
+    @apply data-expanded:animate-accordion-down data-closed:animate-accordion-up overflow-hidden;
+  }
+
   /* MARK: Chart */
   .cn-chart-tooltip {
     @apply border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;

apps/docs/src/registry/styles/style-mira.css

@@ -275,6 +275,11 @@
     @apply rounded-full;
   }
 
+  /* MARK: Collapsible */
+  .cn-collapsible-content {
+    @apply data-expanded:animate-accordion-down data-closed:animate-accordion-up overflow-hidden;
+  }
+
   /* MARK: Chart */
   .cn-chart-tooltip {
     @apply border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs/relaxed shadow-xl;

apps/docs/src/registry/styles/style-nova.css

@@ -275,6 +275,11 @@
     @apply rounded-full;
   }
 
+  /* MARK: Collapsible */
+  .cn-collapsible-content {
+    @apply data-expanded:animate-accordion-down data-closed:animate-accordion-up overflow-hidden;
+  }
+
   /* MARK: Chart */
   .cn-chart-tooltip {
     @apply border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;

apps/docs/src/registry/styles/style-vega.css

@@ -271,6 +271,11 @@
     @apply rounded-full;
   }
 
+  /* MARK: Collapsible */
+  .cn-collapsible-content {
+    @apply data-expanded:animate-accordion-down data-closed:animate-accordion-up overflow-hidden;
+  }
+
   /* MARK: Chart */
   .cn-chart-tooltip {
     @apply border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;

apps/docs/src/registry/ui/_registry.ts

@@ -134,6 +134,17 @@ export const ui: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "collapsible",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/collapsible.tsx",
+        type: "registry:ui"
+      }
+    ]
+  },
   {
     name: "dropdown-menu",
     type: "registry:ui",

apps/docs/src/registry/ui/collapsible.tsx

@@ -0,0 +1,63 @@
+import type { ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import * as CollapsiblePrimitive from "@kobalte/core/collapsible"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "~/lib/utils"
+
+type CollapsibleProps<T extends ValidComponent = "div"> =
+  CollapsiblePrimitive.CollapsibleRootProps<T> & {
+    class?: string | undefined
+  }
+
+const Collapsible = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, CollapsibleProps<T>>
+) => {
+  const [local, others] = splitProps(props as CollapsibleProps, ["class"])
+  return (
+    <CollapsiblePrimitive.Root
+      class={cn("cn-collapsible", local.class)}
+      data-slot="collapsible"
+      {...others}
+    />
+  )
+}
+
+type CollapsibleTriggerProps<T extends ValidComponent = "button"> =
+  CollapsiblePrimitive.CollapsibleTriggerProps<T> & {
+    class?: string | undefined
+  }
+
+const CollapsibleTrigger = <T extends ValidComponent = "button">(
+  props: PolymorphicProps<T, CollapsibleTriggerProps<T>>
+) => {
+  const [local, others] = splitProps(props as CollapsibleTriggerProps, ["class"])
+  return (
+    <CollapsiblePrimitive.Trigger
+      class={cn("cn-collapsible-trigger", local.class)}
+      data-slot="collapsible-trigger"
+      {...others}
+    />
+  )
+}
+
+type CollapsibleContentProps<T extends ValidComponent = "div"> =
+  CollapsiblePrimitive.CollapsibleContentProps<T> & {
+    class?: string | undefined
+  }
+
+const CollapsibleContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, CollapsibleContentProps<T>>
+) => {
+  const [local, others] = splitProps(props as CollapsibleContentProps, ["class"])
+  return (
+    <CollapsiblePrimitive.Content
+      class={cn("cn-collapsible-content", local.class)}
+      data-slot="collapsible-content"
+      {...others}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

apps/docs/src/routes/docs/components/collapsible.mdx

@@ -0,0 +1,64 @@
+---
+title: Collapsible
+description: An interactive component which expands/collapses a panel.
+links:
+  doc: https://kobalte.dev/docs/core/components/collapsible
+  api: https://kobalte.dev/docs/core/components/collapsible#api-reference
+---
+
+::::tab-group[preview]
+:::tab[Preview]
+
+<ComponentPreview name="collapsible-demo" />
+
+:::
+:::tab[Code]
+
+```file="~/registry/examples/collapsible-demo" frame=none showLineNumbers
+
+```
+
+:::
+::::
+
+## Installation
+
+### CLI
+
+```package-exec
+solidui-cli@latest add collapsible
+```
+
+### Manual
+
+Install the following dependencies:
+
+```package-install
+@kobalte/core
+```
+
+Copy and paste the following code into your project.
+
+```file="~/registry/ui/collapsible.tsx" showLineNumbers
+
+```
+
+## Usage
+
+```tsx
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "~/components/ui/collapsible";
+```
+
+```tsx
+<Collapsible>
+  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
+  <CollapsibleContent>
+    Yes. Free to use for personal and commercial projects. No attribution
+    required.
+  </CollapsibleContent>
+</Collapsible>
+```