@glyphui/ui 0.2.0 → 0.3.0

package/dist/{states-Rp8wZ_jH.js → states-DR-OoDT-.js}

@@ -1,5 +1,6 @@
 "use client";
-import { O as useComponentConfig, S as InboxIcon, _ as CheckIcon, c as tv, f as themedBorder, m as AlertIcon, n as useFieldControl, o as Spinner, p as transition, r as Button, u as focusRing, w as MinusIcon } from "./field-context-B6WOcK5m.js";
+import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
+import { c as AlertIcon, d as CheckIcon, g as InboxIcon, n as useFieldControl, o as Spinner, r as Button, v as MinusIcon } from "./field-context-anGPYXbW.js";
 import { Checkbox } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox/checkbox.tsx

package/dist/tv-DBAGlgXJ.js

@@ -0,0 +1,58 @@
+"use client";
+import { textTokens } from "@glyphui/tokens";
+import { createContext, useContext } from "react";
+import { createTV } from "tailwind-variants";
+//#region src/provider/glyph-context.ts
+const GlyphContext = createContext(null);
+/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
+function useGlyph() {
+	const value = useContext(GlyphContext);
+	if (!value) throw new Error("useGlyph must be used inside <GlyphProvider>.");
+	return value;
+}
+/** The router-aware link component configured on `GlyphProvider`. */
+function useLinkComponent() {
+	return useContext(GlyphContext)?.linkComponent ?? "a";
+}
+//#endregion
+//#region src/hooks/use-component-config.ts
+/**
+* Applies the theme's per-component settings (`theme.components[name]`):
+* fills unset variant props from `defaultVariants` and returns the extra slot classes.
+* Every styled component calls this first.
+*/
+function useComponentConfig(name, props) {
+	const override = (useContext(GlyphContext)?.theme)?.components[name];
+	if (!override) return [props, {}];
+	let merged = props;
+	const defaults = override.defaultVariants;
+	if (defaults) {
+		merged = { ...props };
+		for (const [key, value] of Object.entries(defaults)) if (merged[key] === void 0) merged[key] = value;
+	}
+	return [merged, override.className ?? {}];
+}
+//#endregion
+//#region src/utils/styles.ts
+/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
+const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+const themedBorder = "border-(length:--glyph-border-width)";
+const transition = "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard";
+/** Popover surfaces: Select, Tooltip-like menus. */
+const popover = "z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in";
+//#endregion
+//#region src/utils/tw-merge-config.ts
+/**
+* Teaches tailwind-merge about Glyph's custom utilities so `cn('text-h1', 'text-small')`
+* keeps only the last size instead of treating `text-h1` as a color.
+*/
+const twMergeConfig = { extend: { theme: {
+	text: [...textTokens],
+	radius: ["pill"]
+} } };
+//#endregion
+//#region src/utils/tv.ts
+/** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
+const tv = createTV({ twMergeConfig });
+//#endregion
+export { themedBorder as a, GlyphContext as c, popover as i, useGlyph as l, twMergeConfig as n, transition as o, focusRing as r, useComponentConfig as s, tv as t, useLinkComponent as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glyphui/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React components on Tailwind CSS v4 that take their entire look from one theme file. Forms, data tables, app layouts and async states included.",
   "license": "MIT",
   "author": "Mohak Gupta (https://github.com/khalmohak)",
@@ -46,6 +46,11 @@
       "types": "./dist/data-table.d.ts",
       "default": "./dist/data-table.js"
     },
+    "./chart": {
+      "@glyphui/source": "./src/patterns/chart/index.ts",
+      "types": "./dist/chart.d.ts",
+      "default": "./dist/chart.js"
+    },
     "./styles.css": "./styles.css",
     "./package.json": "./package.json"
   },
@@ -58,11 +63,16 @@
     "!src/test"
   ],
   "dependencies": {
-    "@glyphui/tokens": "^0.2.0",
+    "@glyphui/tokens": "^0.3.0",
     "@standard-schema/spec": "^1.1.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
     "radix-ui": "^1.6.7",
+    "react-day-picker": "^9.14.0",
+    "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1"
@@ -73,6 +83,7 @@
     "react": ">=19",
     "react-dom": ">=19",
     "react-hook-form": "^7.55.0",
+    "recharts": "^3.0.0",
     "tailwindcss": ">=4.1"
   },
   "peerDependenciesMeta": {
@@ -84,6 +95,9 @@
     },
     "react-hook-form": {
       "optional": true
+    },
+    "recharts": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -100,6 +114,7 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-hook-form": "^7.89.0",
+    "recharts": "^3.10.1",
     "tsdown": "^0.23.0",
     "typescript": "~5.9.3",
     "vitest": "^3.2.7",

package/src/components/accordion/accordion.styles.ts

@@ -15,10 +15,10 @@ export const accordionStyles = tv({
     ],
     chevron:
       'size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-base) ease-standard group-data-[state=open]:rotate-180',
-    content: 'overflow-hidden text-small text-muted-foreground',
-    // Opening fades and slides in (via @starting-style); closing is instant.
-    contentInner:
-      'pb-4 transition-[opacity,translate] duration-(--glyph-duration-base) ease-standard starting:-translate-y-1 starting:opacity-0',
+    content:
+      'overflow-hidden text-small text-muted-foreground data-[state=open]:animate-collapse-down data-[state=closed]:animate-collapse-up',
+    // Height animates open and closed using Radix's measured content height.
+    contentInner: 'pb-4',
   },
   variants: {
     variant: {

package/src/components/calendar/calendar.styles.ts

@@ -0,0 +1,50 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, transition } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const calendarStyles = tv({
+  slots: {
+    root: 'relative w-fit p-3 text-small text-foreground',
+    months: 'relative flex flex-col gap-6 sm:flex-row',
+    month: 'grid content-start gap-3',
+    monthCaption: 'flex h-8 items-center justify-center px-9',
+    captionLabel: 'font-medium text-foreground',
+    nav: 'pointer-events-none absolute inset-x-3 top-3 z-10 flex items-center justify-between',
+    navButton: [
+      'pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground',
+      'hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40',
+      transition,
+      focusRing,
+    ],
+    chevron: 'size-4',
+    monthGrid: 'border-collapse',
+    weekdays: '',
+    weekday: 'size-9 p-0 text-caption font-normal text-faint-foreground',
+    weeks: '',
+    week: '',
+    day: 'size-9 p-0 text-center align-middle',
+    dayButton: [
+      'inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-small tabular-nums text-foreground',
+      'hover:bg-muted',
+      transition,
+      focusRing,
+    ],
+    today: '[&>button]:font-semibold [&>button]:text-primary',
+    selected:
+      '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary/90',
+    outside: '[&>button]:text-faint-foreground [&>button]:opacity-60',
+    disabled: '[&>button]:pointer-events-none [&>button]:opacity-35 [&>button]:line-through',
+    rangeStart: 'rounded-l-md bg-primary/14',
+    rangeMiddle:
+      'bg-primary/14 [&>button]:rounded-none [&>button]:bg-transparent! [&>button]:text-foreground! [&>button]:hover:bg-primary/10!',
+    rangeEnd: 'rounded-r-md bg-primary/14',
+    hidden: 'invisible',
+    footer: 'pt-2 text-small text-muted-foreground',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Calendar: StylesEntry<typeof calendarStyles>
+  }
+}

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,84 @@
+import { DayPicker, type DayPickerProps } from 'react-day-picker'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { calendarStyles } from './calendar.styles'
+
+export type CalendarProps = DayPickerProps
+
+function ChevronIcon({
+  className,
+  orientation = 'left',
+}: {
+  className?: string
+  orientation?: 'up' | 'down' | 'left' | 'right'
+}) {
+  const d = {
+    left: 'm15 18-6-6 6-6',
+    right: 'm9 18 6-6-6-6',
+    up: 'm18 15-6-6-6 6',
+    down: 'm6 9 6 6 6-6',
+  }[orientation]
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d={d} />
+    </svg>
+  )
+}
+
+/**
+ * A month grid for picking dates, built on react-day-picker and styled by the theme.
+ * Supports `mode="single" | "multiple" | "range"`, disabled dates and several months.
+ */
+export function Calendar(inProps: CalendarProps) {
+  const [props, slots] = useComponentConfig('Calendar', inProps)
+  const { className, classNames, components, showOutsideDays = true, ...rest } = props
+  const s = calendarStyles()
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={s.root({ class: [slots.root, className] })}
+      classNames={{
+        months: s.months({ class: slots.months }),
+        month: s.month({ class: slots.month }),
+        month_caption: s.monthCaption({ class: slots.monthCaption }),
+        caption_label: s.captionLabel({ class: slots.captionLabel }),
+        nav: s.nav({ class: slots.nav }),
+        button_previous: s.navButton({ class: slots.navButton }),
+        button_next: s.navButton({ class: slots.navButton }),
+        chevron: s.chevron({ class: slots.chevron }),
+        month_grid: s.monthGrid({ class: slots.monthGrid }),
+        weekdays: s.weekdays({ class: slots.weekdays }),
+        weekday: s.weekday({ class: slots.weekday }),
+        weeks: s.weeks({ class: slots.weeks }),
+        week: s.week({ class: slots.week }),
+        day: s.day({ class: slots.day }),
+        day_button: s.dayButton({ class: slots.dayButton }),
+        today: s.today({ class: slots.today }),
+        selected: s.selected({ class: slots.selected }),
+        outside: s.outside({ class: slots.outside }),
+        disabled: s.disabled({ class: slots.disabled }),
+        range_start: s.rangeStart({ class: slots.rangeStart }),
+        range_middle: s.rangeMiddle({ class: slots.rangeMiddle }),
+        range_end: s.rangeEnd({ class: slots.rangeEnd }),
+        hidden: s.hidden({ class: slots.hidden }),
+        footer: s.footer({ class: slots.footer }),
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ className: chevronClass, orientation }) => (
+          <ChevronIcon className={chevronClass} orientation={orientation} />
+        ),
+        ...components,
+      }}
+      {...(rest as DayPickerProps)}
+    />
+  )
+}

package/src/components/calendar/index.ts

@@ -0,0 +1,3 @@
+export type { DateRange, Matcher } from 'react-day-picker'
+export { Calendar, type CalendarProps } from './calendar'
+export { calendarStyles } from './calendar.styles'

package/src/components/carousel/carousel.styles.ts

@@ -0,0 +1,43 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const carouselStyles = tv({
+  slots: {
+    root: 'relative',
+    viewport: 'overflow-hidden rounded-lg',
+    container: 'flex',
+    item: 'min-w-0 shrink-0 grow-0 basis-full',
+    control: 'absolute z-10 border-border bg-surface/85 shadow-sm backdrop-blur disabled:opacity-0',
+    dots: 'mt-3 flex items-center justify-center gap-1.5',
+    dot: [
+      'h-2 w-2 cursor-pointer rounded-pill bg-border-strong',
+      transition,
+      focusRing,
+      'hover:bg-muted-foreground aria-[current=true]:w-5 aria-[current=true]:bg-primary',
+    ],
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        container: '-ml-4',
+        item: 'pl-4',
+        control: 'top-1/2 -translate-y-1/2',
+      },
+      vertical: {
+        container: '-mt-4 h-full flex-col',
+        item: 'pt-4',
+        control: 'left-1/2 -translate-x-1/2 [&_svg]:rotate-90',
+      },
+    },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+})
+
+export type CarouselVariants = VariantProps<typeof carouselStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Carousel: StylesEntry<typeof carouselStyles>
+  }
+}

package/src/components/carousel/carousel.tsx

@@ -0,0 +1,278 @@
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
+import {
+  Children,
+  type ComponentProps,
+  createContext,
+  type KeyboardEvent,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { cn } from '../../utils/cn'
+import { IconButton, type IconButtonProps } from '../button'
+import { type CarouselVariants, carouselStyles } from './carousel.styles'
+
+export type CarouselApi = UseEmblaCarouselType[1]
+type EmblaArgs = Parameters<typeof useEmblaCarousel>
+export type CarouselOptions = EmblaArgs[0]
+export type CarouselPlugin = NonNullable<EmblaArgs[1]>[number]
+
+type Orientation = NonNullable<CarouselVariants['orientation']>
+
+interface CarouselContextValue {
+  viewportRef: UseEmblaCarouselType[0]
+  api: CarouselApi
+  orientation: Orientation
+  selectedIndex: number
+  snapCount: number
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  scrollPrev: () => void
+  scrollNext: () => void
+  scrollTo: (index: number) => void
+  s: ReturnType<typeof carouselStyles>
+  slots: SlotClasses<'Carousel'>
+}
+
+const CarouselContext = createContext<CarouselContextValue | null>(null)
+
+function useCarousel(): CarouselContextValue {
+  const value = useContext(CarouselContext)
+  if (!value) throw new Error('Carousel parts must be used inside <Carousel>.')
+  return value
+}
+
+export interface CarouselProps
+  extends Omit<ComponentProps<'section'>, 'aria-label'>,
+    CarouselVariants {
+  /** Embla options, e.g. `{ align: 'start', loop: true }`. */
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin[]
+  /** Shortcut for `opts.loop`. */
+  loop?: boolean
+  /** Receives the Embla API for custom controls. */
+  setApi?: (api: CarouselApi) => void
+  /** Required: describes the content, e.g. "Customer stories". */
+  'aria-label': string
+}
+
+/**
+ * Swipeable, keyboard-accessible slides. Compose with CarouselContent, CarouselItem,
+ * CarouselPrevious, CarouselNext and CarouselDots.
+ */
+export function Carousel(inProps: CarouselProps) {
+  const [props, slots] = useComponentConfig('Carousel', inProps)
+  const {
+    opts,
+    plugins,
+    loop,
+    setApi,
+    orientation = 'horizontal',
+    className,
+    children,
+    ...rest
+  } = props
+  const [viewportRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      ...(loop !== undefined && { loop }),
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins,
+  )
+  const [state, setState] = useState({
+    selectedIndex: 0,
+    snapCount: 0,
+    canScrollPrev: false,
+    canScrollNext: false,
+  })
+
+  const sync = useCallback((embla: NonNullable<CarouselApi>) => {
+    setState({
+      selectedIndex: embla.selectedScrollSnap(),
+      snapCount: embla.scrollSnapList().length,
+      canScrollPrev: embla.canScrollPrev(),
+      canScrollNext: embla.canScrollNext(),
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!api) return
+    setApi?.(api)
+    sync(api)
+    api.on('select', sync).on('reInit', sync)
+    return () => {
+      api.off('select', sync).off('reInit', sync)
+    }
+  }, [api, setApi, sync])
+
+  const scrollPrev = useCallback(() => api?.scrollPrev(), [api])
+  const scrollNext = useCallback(() => api?.scrollNext(), [api])
+  const scrollTo = useCallback((index: number) => api?.scrollTo(index), [api])
+
+  const onKeyDownCapture = (event: KeyboardEvent<HTMLElement>) => {
+    const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+    const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+    if (event.key === prevKey) {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === nextKey) {
+      event.preventDefault()
+      scrollNext()
+    }
+  }
+
+  const s = carouselStyles({ orientation })
+  return (
+    <CarouselContext.Provider
+      value={{
+        viewportRef,
+        api,
+        orientation,
+        ...state,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        s,
+        slots,
+      }}
+    >
+      {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: a labelled section is a region, which supports aria-roledescription */}
+      <section
+        data-slot="carousel"
+        aria-roledescription="carousel"
+        onKeyDownCapture={onKeyDownCapture}
+        className={s.root({ class: [slots.root, className] })}
+        {...rest}
+      >
+        {children}
+      </section>
+    </CarouselContext.Provider>
+  )
+}
+
+const SlideContext = createContext<{ index: number; total: number } | null>(null)
+
+export function CarouselContent({ className, children, ...props }: ComponentProps<'div'>) {
+  const { viewportRef, s, slots } = useCarousel()
+  const items = Children.toArray(children)
+  return (
+    <div
+      ref={viewportRef}
+      data-slot="carousel-viewport"
+      className={s.viewport({ class: slots.viewport })}
+    >
+      <div
+        data-slot="carousel-content"
+        className={s.container({ class: [slots.container, className] })}
+        {...props}
+      >
+        {items.map((child, index) => (
+          <SlideContext.Provider key={index} value={{ index, total: items.length }}>
+            {child}
+          </SlideContext.Provider>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function CarouselItem({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useCarousel()
+  const slide = useContext(SlideContext)
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="group" + aria-roledescription is the WAI-ARIA carousel slide pattern
+    <div
+      role="group"
+      aria-roledescription="slide"
+      aria-label={slide ? `${slide.index + 1} of ${slide.total}` : undefined}
+      data-slot="carousel-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    />
+  )
+}
+
+function Chevron({ direction }: { direction: 'left' | 'right' }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={direction === 'left' ? 'm15 18-6-6 6-6' : 'm9 18 6-6-6-6'} />
+    </svg>
+  )
+}
+
+type ControlProps = Omit<IconButtonProps, 'icon' | 'aria-label'> & {
+  'aria-label'?: string
+  icon?: ReactNode
+}
+
+export function CarouselPrevious({ className, icon, ...props }: ControlProps) {
+  const { scrollPrev, canScrollPrev, orientation, s, slots } = useCarousel()
+  return (
+    <IconButton
+      variant="outline"
+      size="sm"
+      aria-label="Previous slide"
+      icon={icon ?? <Chevron direction="left" />}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      className={s.control({
+        class: [slots.control, orientation === 'horizontal' ? 'left-3' : 'top-3', className],
+      })}
+      {...props}
+    />
+  )
+}
+
+export function CarouselNext({ className, icon, ...props }: ControlProps) {
+  const { scrollNext, canScrollNext, orientation, s, slots } = useCarousel()
+  return (
+    <IconButton
+      variant="outline"
+      size="sm"
+      aria-label="Next slide"
+      icon={icon ?? <Chevron direction="right" />}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      className={s.control({
+        class: [slots.control, orientation === 'horizontal' ? 'right-3' : 'bottom-3', className],
+      })}
+      {...props}
+    />
+  )
+}
+
+/** One button per snap point; the current one is highlighted. */
+export function CarouselDots({ className, ...props }: ComponentProps<'div'>) {
+  const { snapCount, selectedIndex, scrollTo, s, slots } = useCarousel()
+  if (snapCount < 2) return null
+  return (
+    <div
+      data-slot="carousel-dots"
+      className={s.dots({ class: [slots.dots, className] })}
+      {...props}
+    >
+      {Array.from({ length: snapCount }, (_, index) => (
+        <button
+          key={index}
+          type="button"
+          aria-label={`Go to slide ${index + 1}`}
+          aria-current={index === selectedIndex}
+          onClick={() => scrollTo(index)}
+          className={cn(s.dot({ class: slots.dot }))}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/carousel/index.ts

@@ -0,0 +1,13 @@
+export {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  type CarouselOptions,
+  type CarouselPlugin,
+  CarouselPrevious,
+  type CarouselProps,
+} from './carousel'
+export { type CarouselVariants, carouselStyles } from './carousel.styles'

package/src/components/collapsible/collapsible.tsx

@@ -0,0 +1,66 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { tv } from '../../utils/tv'
+
+export const collapsibleStyles = tv({
+  slots: {
+    root: '',
+    trigger: '',
+    content:
+      'overflow-hidden data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Collapsible: StylesEntry<typeof collapsibleStyles>
+  }
+}
+
+const s = collapsibleStyles()
+
+/**
+ * Shows and hides one region, e.g. "Show advanced options". For a list of expandable
+ * sections use Accordion.
+ */
+export function Collapsible(inProps: ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Collapsible', inProps)
+  return (
+    <CollapsiblePrimitive.Root
+      data-slot="collapsible"
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    />
+  )
+}
+
+export function CollapsibleTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
+  const [, slots] = useComponentConfig('Collapsible', {})
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="collapsible-trigger"
+      className={s.trigger({ class: [slots.trigger, className] })}
+      {...props}
+    />
+  )
+}
+
+/** Animates its height open and closed; stays mounted until the closing animation ends. */
+export function CollapsibleContent({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.Content>) {
+  const [, slots] = useComponentConfig('Collapsible', {})
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-content"
+      className={s.content({ class: [slots.content, className] })}
+      {...props}
+    />
+  )
+}