From 1c6f588a7ed5787c5bb438885b74c380394fce26 Mon Sep 17 00:00:00 2001 From: Kevin Abatan Date: Thu, 25 Dec 2025 22:12:17 +0100 Subject: [PATCH 1/3] chore: add FRONTEND_PORT env var to allow worktrees --- apps/docs/app.config.ts | 5 ++++- apps/docs/tsconfig.json | 2 -- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/docs/app.config.ts b/apps/docs/app.config.ts index b836b7e6..fa4254d6 100644 --- a/apps/docs/app.config.ts +++ b/apps/docs/app.config.ts @@ -20,7 +20,10 @@ export default defineConfig( } }, vite: { - plugins: [tailwindcss()] + plugins: [tailwindcss()], + server: { + port: parseInt(process.env.FRONTEND_PORT || "5173", 10) + } } }, { diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json index 047b6294..cbd39639 100644 --- a/apps/docs/tsconfig.json +++ b/apps/docs/tsconfig.json @@ -22,10 +22,8 @@ "noFallthroughCasesInSwitch": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, - // Some stricter flags (disabled by default) "noUnusedLocals": true, "noUnusedParameters": true, - "noPropertyAccessFromIndexSignature": true, "baseUrl": ".", "paths": { "~/*": ["./src/*"] From 395c6ea4988546b6ee6f22457443184d450948ab Mon Sep 17 00:00:00 2001 From: Kevin Abatan Date: Fri, 26 Dec 2025 04:19:30 +0100 Subject: [PATCH 2/3] chore: adding trees to gitignore --- .gitignore | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.gitignore b/.gitignore index dc1b5dd4..ad08f192 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,10 @@ Thumbs.db # Claude .claude logs +trees/ + +# Worktree environment configs +**/.ports.env app.config.timestamp* From 4576f93b38ee724156dc638d44aa42ad87b50663 Mon Sep 17 00:00:00 2001 From: Kevin Abatan Date: Sat, 27 Dec 2025 00:45:19 +0100 Subject: [PATCH 3/3] feat(collapsible): add Collapsible component synced from shadcn MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add Collapsible, CollapsibleTrigger, CollapsibleContent components using @kobalte/core/collapsible - Add collapsible-demo example with starred repositories demo - Add documentation at /docs/components/collapsible - Update UI registry and examples registry - Add collapsible styles to all theme style files (nova, lyra, maia, mira, vega) - Update sidebar navigation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- apps/docs/src/config/docs.ts | 4 ++ apps/docs/src/registry/__index__.tsx | 28 ++++++++ apps/docs/src/registry/examples/_registry.ts | 11 ++++ .../registry/examples/collapsible-demo.tsx | 40 ++++++++++++ apps/docs/src/registry/styles/style-lyra.css | 5 ++ apps/docs/src/registry/styles/style-maia.css | 5 ++ apps/docs/src/registry/styles/style-mira.css | 5 ++ apps/docs/src/registry/styles/style-nova.css | 5 ++ apps/docs/src/registry/styles/style-vega.css | 5 ++ apps/docs/src/registry/ui/_registry.ts | 11 ++++ apps/docs/src/registry/ui/collapsible.tsx | 63 ++++++++++++++++++ .../routes/docs/components/collapsible.mdx | 64 +++++++++++++++++++ 12 files changed, 246 insertions(+) create mode 100644 apps/docs/src/registry/examples/collapsible-demo.tsx create mode 100644 apps/docs/src/registry/ui/collapsible.tsx create mode 100644 apps/docs/src/routes/docs/components/collapsible.mdx diff --git a/apps/docs/src/config/docs.ts b/apps/docs/src/config/docs.ts index a893e129..d320fe9c 100644 --- a/apps/docs/src/config/docs.ts +++ b/apps/docs/src/config/docs.ts @@ -51,6 +51,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" diff --git a/apps/docs/src/registry/__index__.tsx b/apps/docs/src/registry/__index__.tsx index 7eddc1d9..d684c170 100644 --- a/apps/docs/src/registry/__index__.tsx +++ b/apps/docs/src/registry/__index__.tsx @@ -88,6 +88,20 @@ export const Index: Record = { 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: "", @@ -452,6 +466,20 @@ export const Index: Record = { 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: "", diff --git a/apps/docs/src/registry/examples/_registry.ts b/apps/docs/src/registry/examples/_registry.ts index 6cd90966..20723682 100644 --- a/apps/docs/src/registry/examples/_registry.ts +++ b/apps/docs/src/registry/examples/_registry.ts @@ -188,6 +188,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", diff --git a/apps/docs/src/registry/examples/collapsible-demo.tsx b/apps/docs/src/registry/examples/collapsible-demo.tsx new file mode 100644 index 00000000..7aca04fa --- /dev/null +++ b/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 ( + +
+

@peduarte starred 3 repositories

+ + + Toggle + +
+
+ @radix-ui/primitives +
+ +
+ @radix-ui/colors +
+
+ @stitches/react +
+ + + ) +} diff --git a/apps/docs/src/registry/styles/style-lyra.css b/apps/docs/src/registry/styles/style-lyra.css index 47ca492d..37760afb 100644 --- a/apps/docs/src/registry/styles/style-lyra.css +++ b/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; diff --git a/apps/docs/src/registry/styles/style-maia.css b/apps/docs/src/registry/styles/style-maia.css index 63ff199a..8f399321 100644 --- a/apps/docs/src/registry/styles/style-maia.css +++ b/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; diff --git a/apps/docs/src/registry/styles/style-mira.css b/apps/docs/src/registry/styles/style-mira.css index 41b0418d..00d8b6ec 100644 --- a/apps/docs/src/registry/styles/style-mira.css +++ b/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; diff --git a/apps/docs/src/registry/styles/style-nova.css b/apps/docs/src/registry/styles/style-nova.css index 5aa1d70b..d983b501 100644 --- a/apps/docs/src/registry/styles/style-nova.css +++ b/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; diff --git a/apps/docs/src/registry/styles/style-vega.css b/apps/docs/src/registry/styles/style-vega.css index 76d971bf..852e9fbe 100644 --- a/apps/docs/src/registry/styles/style-vega.css +++ b/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; diff --git a/apps/docs/src/registry/ui/_registry.ts b/apps/docs/src/registry/ui/_registry.ts index d4758d03..7198cded 100644 --- a/apps/docs/src/registry/ui/_registry.ts +++ b/apps/docs/src/registry/ui/_registry.ts @@ -57,6 +57,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", diff --git a/apps/docs/src/registry/ui/collapsible.tsx b/apps/docs/src/registry/ui/collapsible.tsx new file mode 100644 index 00000000..dbf923e9 --- /dev/null +++ b/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 = + CollapsiblePrimitive.CollapsibleRootProps & { + class?: string | undefined + } + +const Collapsible = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as CollapsibleProps, ["class"]) + return ( + + ) +} + +type CollapsibleTriggerProps = + CollapsiblePrimitive.CollapsibleTriggerProps & { + class?: string | undefined + } + +const CollapsibleTrigger = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as CollapsibleTriggerProps, ["class"]) + return ( + + ) +} + +type CollapsibleContentProps = + CollapsiblePrimitive.CollapsibleContentProps & { + class?: string | undefined + } + +const CollapsibleContent = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as CollapsibleContentProps, ["class"]) + return ( + + ) +} + +export { Collapsible, CollapsibleTrigger, CollapsibleContent } diff --git a/apps/docs/src/routes/docs/components/collapsible.mdx b/apps/docs/src/routes/docs/components/collapsible.mdx new file mode 100644 index 00000000..5a2fa0dd --- /dev/null +++ b/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] + + + +::: +:::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 + + Can I use this in my project? + + Yes. Free to use for personal and commercial projects. No attribution + required. + + +```