azamat-ui-kit-cli 0.2.2

package/vendor/src/components/patterns/resource-system.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { DataView, type DataViewProps } from "@/components/patterns/data-view"
+import { EntityDetails, type EntityDetailsProps } from "@/components/patterns/entity-details"
+import { cn } from "@/lib/utils"
+
+export type ResourceSystemMode = "list" | "detail" | "split"
+
+export type ResourceSystemProps<TItem = unknown> = React.ComponentProps<"div"> & {
+  mode?: ResourceSystemMode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  list: DataViewProps<TItem>
+  detail?: React.ReactNode | EntityDetailsProps
+  aside?: React.ReactNode
+  splitSize?: "sm" | "md" | "lg"
+  renderHeader?: () => React.ReactNode
+  listClassName?: string
+  detailClassName?: string
+}
+
+const splitClassName = {
+  sm: "lg:grid-cols-[minmax(0,1fr)_320px]",
+  md: "lg:grid-cols-[minmax(0,1fr)_420px]",
+  lg: "lg:grid-cols-[minmax(0,1fr)_520px]",
+}
+
+function ResourceSystem<TItem = unknown>({ mode = "list", title, description, actions, list, detail, aside, splitSize = "md", renderHeader, listClassName, detailClassName, className, ...props }: ResourceSystemProps<TItem>) {
+  const detailNode = isEntityDetailsProps(detail) ? <EntityDetails {...detail} /> : detail
+
+  return (
+    <div data-slot="resource-system" data-mode={mode} className={cn("grid gap-4", className)} {...props}>
+      {renderHeader?.() ?? ((title || description || actions) && (
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="grid gap-1">
+            {title && <h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>}
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+          </div>
+          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+        </div>
+      ))}
+      {mode === "split" ? (
+        <div className={cn("grid gap-4", splitClassName[splitSize])}>
+          <DataView {...list} className={cn(list.className, listClassName)} />
+          <div className={cn("min-w-0", detailClassName)}>{detailNode ?? aside}</div>
+        </div>
+      ) : mode === "detail" ? (
+        <div className={detailClassName}>{detailNode ?? aside}</div>
+      ) : (
+        <DataView {...list} className={cn(list.className, listClassName)} />
+      )}
+    </div>
+  )
+}
+
+function isEntityDetailsProps(value: unknown): value is EntityDetailsProps {
+  return Boolean(value && typeof value === "object" && "title" in value)
+}
+
+export { ResourceSystem }

package/vendor/src/components/patterns/settings-section.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type SettingsSectionProps = React.ComponentProps<"section"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+}
+
+function SettingsSection({ title, description, actions, className, children, ...props }: SettingsSectionProps) {
+  return (
+    <section data-slot="settings-section" className={cn("grid gap-4 rounded-lg border bg-card p-4", className)} {...props}>
+      {(title || description || actions) && (
+        <div className="flex items-start justify-between gap-3">
+          <div className="grid gap-1">
+            {title && <h3 className="text-base font-semibold text-foreground">{title}</h3>}
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+          </div>
+          {actions}
+        </div>
+      )}
+      <div className="grid divide-y">{children}</div>
+    </section>
+  )
+}
+
+export type SettingsRowProps = React.ComponentProps<"div"> & {
+  label: React.ReactNode
+  description?: React.ReactNode
+  control?: React.ReactNode
+}
+
+function SettingsRow({ label, description, control, className, children, ...props }: SettingsRowProps) {
+  return (
+    <div data-slot="settings-row" className={cn("flex flex-wrap items-center justify-between gap-3 py-3 first:pt-0 last:pb-0", className)} {...props}>
+      <div className="grid min-w-0 gap-1">
+        <div className="text-sm font-medium text-foreground">{label}</div>
+        {description && <div className="text-sm text-muted-foreground">{description}</div>}
+      </div>
+      <div className="shrink-0">{control ?? children}</div>
+    </div>
+  )
+}
+
+export { SettingsRow, SettingsSection }

package/vendor/src/components/patterns/status-system.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type StatusTone = "neutral" | "success" | "warning" | "danger" | "info"
+
+export type StatusState<TValue extends string = string> = {
+  value: TValue
+  label: React.ReactNode
+  icon?: React.ReactNode
+  tone?: StatusTone
+  next?: TValue[]
+  disabled?: boolean
+}
+
+export type StatusSystemProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+  value: TValue
+  states: StatusState<TValue>[]
+  mode?: "badge" | "select" | "steps"
+  allowAllTransitions?: boolean
+  onValueChange?: (value: TValue, state: StatusState<TValue>) => void
+  renderState?: (state: StatusState<TValue>, meta: { active: boolean; passed: boolean; disabled: boolean }) => React.ReactNode
+}
+
+const toneClassName: Record<StatusTone, string> = {
+  neutral: "border-border bg-muted text-muted-foreground",
+  success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
+  warning: "border-amber-500/20 bg-amber-500/10 text-amber-700 dark:text-amber-400",
+  danger: "border-destructive/20 bg-destructive/10 text-destructive",
+  info: "border-primary/20 bg-primary/10 text-primary",
+}
+
+function StatusSystem<TValue extends string = string>({ value, states, mode = "badge", allowAllTransitions = false, onValueChange, renderState, className, ...props }: StatusSystemProps<TValue>) {
+  const activeIndex = states.findIndex((state) => state.value === value)
+  const activeState = states[activeIndex]
+  const nextValues = new Set(allowAllTransitions ? states.map((state) => state.value) : activeState?.next ?? [])
+
+  if (!activeState) return null
+
+  if (mode === "select") {
+    return (
+      <div data-slot="status-system" className={cn("inline-flex", className)} {...props}>
+        <select
+          value={value}
+          className="h-8 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onChange={(event) => {
+            const state = states.find((item) => item.value === event.currentTarget.value)
+            if (state) onValueChange?.(state.value, state)
+          }}
+        >
+          {states.map((state) => {
+            const active = state.value === value
+            const disabled = state.disabled || (!active && !nextValues.has(state.value))
+            return <option key={state.value} value={state.value} disabled={disabled}>{typeof state.label === "string" ? state.label : state.value}</option>
+          })}
+        </select>
+      </div>
+    )
+  }
+
+  if (mode === "steps") {
+    return (
+      <div data-slot="status-system" className={cn("flex flex-wrap items-center gap-3", className)} {...props}>
+        {states.map((state, index) => {
+          const active = state.value === value
+          const passed = activeIndex >= index
+          const disabled = state.disabled || (!active && !nextValues.has(state.value))
+          return renderState?.(state, { active, passed, disabled }) ?? (
+            <button key={state.value} type="button" disabled={disabled} className="flex items-center gap-2 disabled:opacity-50" onClick={() => onValueChange?.(state.value, state)}>
+              <span className={cn("flex size-6 items-center justify-center rounded-full border text-xs", passed ? "border-primary bg-primary text-primary-foreground" : "bg-muted text-muted-foreground")}>{index + 1}</span>
+              <span className={cn("text-sm", active ? "font-medium text-foreground" : "text-muted-foreground")}>{state.label}</span>
+            </button>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <div data-slot="status-system" className={className} {...props}>
+      {renderState?.(activeState, { active: true, passed: true, disabled: Boolean(activeState.disabled) }) ?? (
+        <Badge variant="outline" className={cn("gap-1", toneClassName[activeState.tone ?? "neutral"])}>{activeState.icon}{activeState.label}</Badge>
+      )}
+    </div>
+  )
+}
+
+export { StatusSystem }

package/vendor/src/components/theme-provider.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+
+type ThemeMode = "light" | "dark"
+
+type ThemeContextValue = {
+  theme: ThemeMode
+  setTheme: (theme: ThemeMode) => void
+  toggleTheme: () => void
+}
+
+const THEME_STORAGE_KEY = "azamat-ui-theme"
+
+const ThemeContext = React.createContext<ThemeContextValue | null>(null)
+
+function resolveInitialTheme(): ThemeMode {
+  if (typeof window === "undefined") return "light"
+
+  const stored = window.localStorage.getItem(THEME_STORAGE_KEY)
+  if (stored === "light" || stored === "dark") return stored
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = React.useState<ThemeMode>(resolveInitialTheme)
+
+  React.useEffect(() => {
+    const root = window.document.documentElement
+    root.classList.toggle("dark", theme === "dark")
+    root.style.colorScheme = theme
+    window.localStorage.setItem(THEME_STORAGE_KEY, theme)
+  }, [theme])
+
+  const setTheme = React.useCallback((nextTheme: ThemeMode) => {
+    setThemeState(nextTheme)
+  }, [])
+
+  const toggleTheme = React.useCallback(() => {
+    setThemeState((current) => (current === "dark" ? "light" : "dark"))
+  }, [])
+
+  const value = React.useMemo(() => ({ theme, setTheme, toggleTheme }), [theme, setTheme, toggleTheme])
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export function useTheme() {
+  const context = React.useContext(ThemeContext)
+  if (!context) throw new Error("useTheme must be used within ThemeProvider")
+  return context
+}

package/vendor/src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/vendor/src/components/ui/button.tsx

@@ -0,0 +1,61 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[transform,background-color,border-color,color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-primary/90 bg-primary text-primary-foreground shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-[color-mix(in_oklch,var(--primary),white_8%)] hover:shadow-[0_14px_30px_color-mix(in_oklch,var(--primary),transparent_72%)]",
+        outline:
+          "border-border/80 bg-background/92 text-foreground shadow-sm hover:border-border hover:bg-accent/70 hover:text-foreground aria-expanded:bg-accent/70 aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/55",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground shadow-sm hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_4%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "border-transparent bg-transparent hover:bg-accent/70 hover:text-foreground aria-expanded:bg-accent/70 aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "border-destructive/15 bg-destructive text-white shadow-[0_10px_24px_color-mix(in_oklch,var(--destructive),transparent_78%)] hover:bg-[color-mix(in_oklch,var(--destructive),black_6%)] focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-7 gap-1 rounded-[min(var(--radius-lg),12px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-lg),14px)] px-3 text-[0.82rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs":
+          "size-7 rounded-[min(var(--radius-lg),12px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-8 rounded-[min(var(--radius-lg),14px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants>
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonProps) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/vendor/src/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-[var(--radius-2xl)] border border-border/75 bg-card/98 py-(--card-spacing) text-sm text-card-foreground shadow-sm [--card-spacing:--spacing(5)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-[var(--radius-2xl)] *:[img:last-child]:rounded-b-[var(--radius-2xl)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-[var(--radius-2xl)] px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-[1.05rem] leading-snug font-semibold tracking-tight group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm leading-6 text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-[var(--radius-2xl)] border-t border-border/70 bg-muted/45 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/vendor/src/components/ui/checkbox.tsx

@@ -0,0 +1,82 @@
+import * as React from "react"
+import { CheckIcon, MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type CheckboxCheckedState = boolean | "indeterminate"
+
+export type CheckboxProps = Omit<
+  React.ComponentPropsWithoutRef<"button">,
+  "checked" | "defaultChecked" | "onChange" | "value"
+> & {
+  checked?: CheckboxCheckedState
+  defaultChecked?: CheckboxCheckedState
+  onCheckedChange?: (checked: boolean) => void
+}
+
+function getNextCheckedState(checked: CheckboxCheckedState) {
+  return checked === true ? false : true
+}
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  (
+    {
+      className,
+      checked,
+      defaultChecked = false,
+      onCheckedChange,
+      disabled,
+      onClick,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = checked !== undefined
+    const [internalChecked, setInternalChecked] = React.useState<CheckboxCheckedState>(defaultChecked)
+    const currentChecked = isControlled ? checked : internalChecked
+    const dataState = currentChecked === "indeterminate" ? "indeterminate" : currentChecked ? "checked" : "unchecked"
+
+    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      const nextChecked = getNextCheckedState(currentChecked)
+
+      if (!isControlled) {
+        setInternalChecked(nextChecked)
+      }
+
+      onCheckedChange?.(nextChecked)
+      onClick?.(event)
+    }
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="checkbox"
+        aria-checked={currentChecked === "indeterminate" ? "mixed" : currentChecked}
+        data-state={dataState}
+        data-slot="checkbox"
+        disabled={disabled}
+        className={cn(
+          "peer flex size-5 shrink-0 items-center justify-center rounded-[min(var(--radius-lg),8px)] border border-input/90 bg-background/92 text-primary-foreground shadow-sm outline-none transition-[background-color,border-color,box-shadow,color] hover:border-border focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_80%)] data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_80%)]",
+          className
+        )}
+        onClick={handleClick}
+        {...props}
+      >
+        {children ?? (
+          <span className="flex items-center justify-center">
+            {currentChecked === "indeterminate" ? (
+              <MinusIcon className="size-3.5" />
+            ) : currentChecked ? (
+              <CheckIcon className="size-3.5" />
+            ) : null}
+          </span>
+        )}
+      </button>
+    )
+  }
+)
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

package/vendor/src/components/ui/collapse.tsx

@@ -0,0 +1,126 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type CollapseProps = React.ComponentProps<"details"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, children, ...props }: CollapseProps) {
+  const controlledProps = open === undefined ? { defaultOpen } : { open }
+
+  return (
+    <details
+      data-slot="collapse"
+      className={cn("group rounded-lg border bg-card text-card-foreground", className)}
+      onToggle={(event) => {
+        onToggle?.(event)
+        onOpenChange?.(event.currentTarget.open)
+      }}
+      {...controlledProps}
+      {...props}
+    >
+      {children}
+    </details>
+  )
+}
+
+export type CollapseTriggerProps = React.ComponentProps<"summary"> & {
+  icon?: React.ReactNode
+  hideIcon?: boolean
+}
+
+function CollapseTrigger({ icon, hideIcon = false, className, children, ...props }: CollapseTriggerProps) {
+  return (
+    <summary
+      data-slot="collapse-trigger"
+      className={cn(
+        "flex cursor-pointer list-none items-center justify-between gap-3 rounded-lg px-4 py-3 text-sm font-medium outline-none transition-colors hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-details-marker]:hidden",
+        className
+      )}
+      {...props}
+    >
+      <span className="min-w-0 flex-1">{children}</span>
+      {!hideIcon && (
+        <span className="shrink-0 text-muted-foreground transition-transform group-open:rotate-180">
+          {icon ?? <ChevronDownIcon className="size-4" />}
+        </span>
+      )}
+    </summary>
+  )
+}
+
+function CollapseContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="collapse-content"
+      className={cn("border-t px-4 py-3 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export type CollapseItem = {
+  key: string
+  title: React.ReactNode
+  content: React.ReactNode
+  description?: React.ReactNode
+  disabled?: boolean
+}
+
+export type CollapseGroupProps = React.ComponentProps<"div"> & {
+  items: CollapseItem[]
+  type?: "single" | "multiple"
+  value?: string | string[]
+  defaultValue?: string | string[]
+  onValueChange?: (value: string | string[]) => void
+}
+
+function CollapseGroup({ items, type = "multiple", value, defaultValue, onValueChange, className, ...props }: CollapseGroupProps) {
+  const initialValue = React.useMemo(() => {
+    if (value !== undefined) return value
+    if (defaultValue !== undefined) return defaultValue
+    return type === "single" ? "" : []
+  }, [defaultValue, type, value])
+  const [internalValue, setInternalValue] = React.useState<string | string[]>(initialValue)
+  const currentValue = value ?? internalValue
+
+  const isOpen = (key: string) => Array.isArray(currentValue) ? currentValue.includes(key) : currentValue === key
+
+  const updateValue = (key: string, nextOpen: boolean) => {
+    const nextValue = type === "single"
+      ? nextOpen ? key : ""
+      : nextOpen
+        ? Array.from(new Set([...(Array.isArray(currentValue) ? currentValue : []), key]))
+        : (Array.isArray(currentValue) ? currentValue.filter((item) => item !== key) : [])
+
+    if (value === undefined) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div data-slot="collapse-group" className={cn("grid gap-2", className)} {...props}>
+      {items.map((item) => (
+        <Collapse
+          key={item.key}
+          open={isOpen(item.key)}
+          onOpenChange={(open) => updateValue(item.key, open)}
+          className={cn(item.disabled && "pointer-events-none opacity-60")}
+        >
+          <CollapseTrigger>
+            <span className="grid gap-0.5">
+              <span>{item.title}</span>
+              {item.description && <span className="text-xs font-normal text-muted-foreground">{item.description}</span>}
+            </span>
+          </CollapseTrigger>
+          <CollapseContent>{item.content}</CollapseContent>
+        </Collapse>
+      ))}
+    </div>
+  )
+}
+
+export { Collapse, CollapseContent, CollapseGroup, CollapseTrigger }