@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/calendar.js

@@ -0,0 +1,163 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button, buttonVariants } from "./button.js";
+import * as React from "react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+//#region src/components/ui/calendar.tsx
+/**
+* Calendar — inline calendar grid for date selection.
+*
+* MMDS supplies classNames, a custom day button (CalendarDayButton), and
+* chevron icons over the react-day-picker date-grid engine.
+*/
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: cn("group/calendar bg-card p-2 [--cell-radius:var(--radius-md,0.375rem)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+		captionLayout,
+		locale,
+		formatters: {
+			formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+			nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+			button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+			button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+			month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+			dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+			dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+			dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+			caption_label: cn("font-medium select-none", captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+			month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+			weekdays: cn("flex", defaultClassNames.weekdays),
+			weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+			week: cn("mt-2 flex w-full", defaultClassNames.week),
+			week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+			week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+			day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
+			range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
+			range_middle: cn("rounded-none", defaultClassNames.range_middle),
+			range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
+			today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+			outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className, rootRef, ...props }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(className),
+					...props
+				});
+			},
+			Chevron: ({ className, orientation, ...props }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+				return /* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+			},
+			DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
+				locale,
+				...props
+			}),
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex size-(--cell-size) items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+}
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		variant: "ghost",
+		iconOnly: true,
+		"aria-label": day.date.toLocaleDateString(locale?.code, {
+			weekday: "long",
+			year: "numeric",
+			month: "long",
+			day: "numeric"
+		}),
+		"data-day": day.date.toLocaleDateString(locale?.code),
+		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+		"data-range-start": modifiers.range_start,
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - A persistent, always-visible calendar view for picking dates.
+* - Inside a Popover behind a trigger button, to form a date-picker field.
+*
+* NOT WHEN
+* - Displaying a fixed, non-editable date — just render text.
+* - Only month/year granularity is needed, not full day selection.
+*
+* KEY RULES
+* - `mode` is a required discriminator: "single" | "multiple" | "range" — it determines the type of `selected`/`onSelect` (Date, Date[], or DateRange).
+* - `numberOfMonths` renders more than one month side by side, commonly paired with mode="range".
+* - `disabled` accepts matchers, e.g. `{ dayOfWeek: [0, 6] }` to block weekends.
+* - `defaultMonth` sets the initially visible month without controlling selection.
+* - `captionLayout="dropdown"` swaps the month/year label for jump-to dropdowns (defaults to a
+*   100-year range with no extra props) — the fast-navigation pattern for something like a date
+*   of birth; override the range via `startMonth`/`endMonth` (plain `Date`s) if a form needs one.
+* - There is no dedicated DatePicker component — it's always this Calendar composed inside a
+*   Popover, with the trigger's label built from whatever's selected, per the USAGE example below.
+*
+* USAGE
+* // Single date
+* <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-xl border" />
+*
+* // Range across two months
+* <Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} className="rounded-xl border" />
+*
+* // Month/year dropdown captions instead of a plain label — fast navigation to a far month
+* <Calendar mode="single" selected={date} onSelect={setDate} captionLayout="dropdown" className="rounded-xl border" />
+*
+* // Inside a Popover, as a date-picker field
+* <Popover>
+*   <PopoverTrigger asChild>
+*     <Button variant="outline">{date ? date.toLocaleDateString() : "Pick a date"}</Button>
+*   </PopoverTrigger>
+*   <PopoverContent className="w-auto p-0">
+*     <Calendar mode="single" selected={date} onSelect={setDate} />
+*   </PopoverContent>
+* </Popover>
+*/
+//#endregion
+export { Calendar, CalendarDayButton };
+
+//# sourceMappingURL=calendar.js.map

package/dist/components/ui/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":[],"sources":["../../../src/components/ui/calendar.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Calendar — inline calendar grid for date selection.\n *\n * MMDS supplies classNames, a custom day button (CalendarDayButton), and\n * chevron icons over the react-day-picker date-grid engine.\n */\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronDownIcon,\n} from \"lucide-react\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-card p-2 [--cell-radius:var(--radius-md,0.375rem)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        month_grid: cn(\"w-full border-collapse\", defaultClassNames.month_grid),\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      iconOnly\n      aria-label={day.date.toLocaleDateString(locale?.code, {\n        weekday: \"long\",\n        year: \"numeric\",\n        month: \"long\",\n        day: \"numeric\",\n      })}\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n\n/**\n * WHEN TO USE\n * - A persistent, always-visible calendar view for picking dates.\n * - Inside a Popover behind a trigger button, to form a date-picker field.\n *\n * NOT WHEN\n * - Displaying a fixed, non-editable date — just render text.\n * - Only month/year granularity is needed, not full day selection.\n *\n * KEY RULES\n * - `mode` is a required discriminator: \"single\" | \"multiple\" | \"range\" — it determines the type of `selected`/`onSelect` (Date, Date[], or DateRange).\n * - `numberOfMonths` renders more than one month side by side, commonly paired with mode=\"range\".\n * - `disabled` accepts matchers, e.g. `{ dayOfWeek: [0, 6] }` to block weekends.\n * - `defaultMonth` sets the initially visible month without controlling selection.\n * - `captionLayout=\"dropdown\"` swaps the month/year label for jump-to dropdowns (defaults to a\n *   100-year range with no extra props) — the fast-navigation pattern for something like a date\n *   of birth; override the range via `startMonth`/`endMonth` (plain `Date`s) if a form needs one.\n * - There is no dedicated DatePicker component — it's always this Calendar composed inside a\n *   Popover, with the trigger's label built from whatever's selected, per the USAGE example below.\n *\n * USAGE\n * // Single date\n * <Calendar mode=\"single\" selected={date} onSelect={setDate} className=\"rounded-xl border\" />\n *\n * // Range across two months\n * <Calendar mode=\"range\" selected={range} onSelect={setRange} numberOfMonths={2} className=\"rounded-xl border\" />\n *\n * // Month/year dropdown captions instead of a plain label — fast navigation to a far month\n * <Calendar mode=\"single\" selected={date} onSelect={setDate} captionLayout=\"dropdown\" className=\"rounded-xl border\" />\n *\n * // Inside a Popover, as a date-picker field\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button variant=\"outline\">{date ? date.toLocaleDateString() : \"Pick a date\"}</Button>\n *   </PopoverTrigger>\n *   <PopoverContent className=\"w-auto p-0\">\n *     <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n *   </PopoverContent>\n * </Popover>\n */\n"],"mappings":"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"}

package/dist/components/ui/card.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Card — bounded surface for grouping related content.
+ *
+ * Plain `div`s with layout classes (grid header, flex footer) — no external
+ * primitive. A `size` prop ("default" | "sm" | "xs") scales the internal
+ * spacing token instead of
+ * requiring className overrides, plus a `variant="dashed"` placeholder look
+ * (transparent fill, dashed border instead of the default ring) for an
+ * empty/add-new slot — the same dashed-border convention Attachment's
+ * `idle` state and Empty already use.
+ */
+import * as React from "react";
+declare function Card({ className, size, variant, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm" | "xs";
+    variant?: "default" | "dashed";
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+/**
+ * WHEN TO USE
+ * - Grouping related content behind one visual boundary — dashboard panels,
+ *   settings sections, forms, pricing/summary blocks.
+ * - CardAction for a single header-aligned action (e.g. a "Manage" link) —
+ *   it sits in the header grid's second column, aligned to the inline end.
+ *
+ * NOT WHEN
+ * - A row inside a dense list — use Item instead.
+ * - The page background itself — use `bg-background` directly, not a Card.
+ *
+ * KEY RULES
+ * - size: default | sm | xs — every one of CardHeader/CardTitle/
+ *   CardDescription/CardContent/CardFooter reacts. CardHeader/CardContent/
+ *   CardFooter's own padding/gap track the shared `--card-spacing` custom
+ *   property directly (no per-component variant needed — it inherits
+ *   down); CardTitle drops to text-sm at sm and xs alike, CardDescription
+ *   only at xs (already text-sm by default, same as sm). Not a separate
+ *   visual style, just tighter padding and, at xs, smaller text. Reach for
+ *   xs on a narrower surface — a Sidecar panel, a nested card — where even
+ *   sm's padding is more than the available width can spare.
+ * - CardFooter automatically gets a top border and a muted background — no
+ *   className needed for the visual separation from CardContent.
+ * - An `<img>` as the first or last child gets its corners auto-rounded to
+ *   match the card — no manual `rounded-t-xl`/`rounded-b-xl` needed on it.
+ * - `variant="dashed"` swaps the filled `bg-card`/ring look for a transparent,
+ *   dashed-border placeholder — an empty slot or "add new" tile in a grid of
+ *   real Cards, not a second visual style for real content.
+ * - An "AI Card" (an AI-generated summary) wraps a plain `Card` in a
+ *   gradient div (`bg-gradient-to-r from-ai-wash to-ai-grad-from p-px`,
+ *   the AI Identity gradient as a token-driven outline instead of an
+ *   arbitrary `border-image` value) and puts `AILabel` in `CardAction` as
+ *   the AI marker — no `AISparkle` next to `CardTitle`'s text, that would
+ *   be redundant with `AILabel`'s own visible "AI" text. A `CardFooter`
+ *   below the body/`CardContent` can optionally carry an AI Chip follow-up
+ *   action (`variant="ai" size="xs" rounded-full`, `AISparkle` +
+ *   `data-icon="inline-start"`) alongside a plain pill secondary action
+ *   (`variant="ghost" size="xs" rounded-full` — same pill shape/size, no
+ *   AI accent) — one AI-styled action per row, same logic as the AI Icon
+ *   Button recipe. Add
+ *   `border-t-0 bg-transparent` to drop CardFooter's default
+ *   gray strip (plain className overrides, no dedicated prop) so the
+ *   actions sit on the card's own surface instead, plus `pt-0` since the
+ *   strip's own top padding otherwise doubles up with Card's own
+ *   `gap-(--card-spacing)` between CardContent and CardFooter once that
+ *   strip's background/border stop visually justifying the extra room.
+ *   See AI/Card's "BoundaryTreatments" story for all three side by side. `shadow-ai-glow` (a
+ *   real registered token, not an arbitrary value) is a soft alternative
+ *   to the hard gradient outline — just a plain Card className, no wrapper
+ *   div — a lighter treatment where a crisp outline would compete with
+ *   neighbouring cards (the middle card in "BoundaryTreatments"). A third option keeps the gradient outline and puts
+ *   the glow INSIDE instead: `bg-ai-glow-bottom` as a plain Card className
+ *   (a background-image, layering over Card's own `bg-card` — `cn`
+ *   registers the glow classes as background-image utilities so
+ *   tailwind-merge keeps both), a soft glow rising from the Card's own
+ *   bottom edge — the same recipe an AI-marked DataTable's wrapping Card
+ *   uses, so both read alike (the third card in "BoundaryTreatments").
+ *
+ * USAGE
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Create project</CardTitle>
+ *     <CardDescription>Deploy your new project in one click.</CardDescription>
+ *     <CardAction><Button variant="ghost" size="sm">Manage</Button></CardAction>
+ *   </CardHeader>
+ *   <CardContent>...</CardContent>
+ *   <CardFooter className="gap-2">
+ *     <Button variant="outline" className="flex-1">Cancel</Button>
+ *     <Button className="flex-1">Deploy</Button>
+ *   </CardFooter>
+ * </Card>
+ */
+//# sourceMappingURL=card.d.ts.map

package/dist/components/ui/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAgB,EAChB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B,qBAmBA;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAgBxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAavE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG"}

package/dist/components/ui/card.js

@@ -0,0 +1,131 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/card.tsx
+function Card({ className, size = "default", variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm text-card-foreground [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=xs]:[--card-spacing:--spacing(2)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", variant === "dashed" ? "border border-dashed border-border bg-transparent" : "bg-card ring-1 ring-foreground/10", className),
+		...props
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) group-data-[size=xs]/card:gap-0.5 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 }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm group-data-[size=xs]/card:text-sm", className),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-description",
+		className: cn("text-sm text-muted-foreground group-data-[size=xs]/card:text-xs", className),
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("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 }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cn("flex-1 px-(--card-spacing)", className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Grouping related content behind one visual boundary — dashboard panels,
+*   settings sections, forms, pricing/summary blocks.
+* - CardAction for a single header-aligned action (e.g. a "Manage" link) —
+*   it sits in the header grid's second column, aligned to the inline end.
+*
+* NOT WHEN
+* - A row inside a dense list — use Item instead.
+* - The page background itself — use `bg-background` directly, not a Card.
+*
+* KEY RULES
+* - size: default | sm | xs — every one of CardHeader/CardTitle/
+*   CardDescription/CardContent/CardFooter reacts. CardHeader/CardContent/
+*   CardFooter's own padding/gap track the shared `--card-spacing` custom
+*   property directly (no per-component variant needed — it inherits
+*   down); CardTitle drops to text-sm at sm and xs alike, CardDescription
+*   only at xs (already text-sm by default, same as sm). Not a separate
+*   visual style, just tighter padding and, at xs, smaller text. Reach for
+*   xs on a narrower surface — a Sidecar panel, a nested card — where even
+*   sm's padding is more than the available width can spare.
+* - CardFooter automatically gets a top border and a muted background — no
+*   className needed for the visual separation from CardContent.
+* - An `<img>` as the first or last child gets its corners auto-rounded to
+*   match the card — no manual `rounded-t-xl`/`rounded-b-xl` needed on it.
+* - `variant="dashed"` swaps the filled `bg-card`/ring look for a transparent,
+*   dashed-border placeholder — an empty slot or "add new" tile in a grid of
+*   real Cards, not a second visual style for real content.
+* - An "AI Card" (an AI-generated summary) wraps a plain `Card` in a
+*   gradient div (`bg-gradient-to-r from-ai-wash to-ai-grad-from p-px`,
+*   the AI Identity gradient as a token-driven outline instead of an
+*   arbitrary `border-image` value) and puts `AILabel` in `CardAction` as
+*   the AI marker — no `AISparkle` next to `CardTitle`'s text, that would
+*   be redundant with `AILabel`'s own visible "AI" text. A `CardFooter`
+*   below the body/`CardContent` can optionally carry an AI Chip follow-up
+*   action (`variant="ai" size="xs" rounded-full`, `AISparkle` +
+*   `data-icon="inline-start"`) alongside a plain pill secondary action
+*   (`variant="ghost" size="xs" rounded-full` — same pill shape/size, no
+*   AI accent) — one AI-styled action per row, same logic as the AI Icon
+*   Button recipe. Add
+*   `border-t-0 bg-transparent` to drop CardFooter's default
+*   gray strip (plain className overrides, no dedicated prop) so the
+*   actions sit on the card's own surface instead, plus `pt-0` since the
+*   strip's own top padding otherwise doubles up with Card's own
+*   `gap-(--card-spacing)` between CardContent and CardFooter once that
+*   strip's background/border stop visually justifying the extra room.
+*   See AI/Card's "BoundaryTreatments" story for all three side by side. `shadow-ai-glow` (a
+*   real registered token, not an arbitrary value) is a soft alternative
+*   to the hard gradient outline — just a plain Card className, no wrapper
+*   div — a lighter treatment where a crisp outline would compete with
+*   neighbouring cards (the middle card in "BoundaryTreatments"). A third option keeps the gradient outline and puts
+*   the glow INSIDE instead: `bg-ai-glow-bottom` as a plain Card className
+*   (a background-image, layering over Card's own `bg-card` — `cn`
+*   registers the glow classes as background-image utilities so
+*   tailwind-merge keeps both), a soft glow rising from the Card's own
+*   bottom edge — the same recipe an AI-marked DataTable's wrapping Card
+*   uses, so both read alike (the third card in "BoundaryTreatments").
+*
+* USAGE
+* <Card>
+*   <CardHeader>
+*     <CardTitle>Create project</CardTitle>
+*     <CardDescription>Deploy your new project in one click.</CardDescription>
+*     <CardAction><Button variant="ghost" size="sm">Manage</Button></CardAction>
+*   </CardHeader>
+*   <CardContent>...</CardContent>
+*   <CardFooter className="gap-2">
+*     <Button variant="outline" className="flex-1">Cancel</Button>
+*     <Button className="flex-1">Deploy</Button>
+*   </CardFooter>
+* </Card>
+*/
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+
+//# sourceMappingURL=card.js.map

package/dist/components/ui/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["/**\n * Card — bounded surface for grouping related content.\n *\n * Plain `div`s with layout classes (grid header, flex footer) — no external\n * primitive. A `size` prop (\"default\" | \"sm\" | \"xs\") scales the internal\n * spacing token instead of\n * requiring className overrides, plus a `variant=\"dashed\"` placeholder look\n * (transparent fill, dashed border instead of the default ring) for an\n * empty/add-new slot — the same dashed-border convention Attachment's\n * `idle` state and Empty already use.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  size?: \"default\" | \"sm\" | \"xs\"\n  variant?: \"default\" | \"dashed\"\n}) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      data-variant={variant}\n      className={cn(\n        // Same default/sm/xs vocabulary as Item/Table/Button/KeyValuePair —\n        // xs is the extra step for a narrower surface like Sidecar, where\n        // even sm's padding is more than the available width can spare.\n        \"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm text-card-foreground [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=xs]:[--card-spacing:--spacing(2)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        variant === \"dashed\"\n          ? \"border border-dashed border-border bg-transparent\"\n          : \"bg-card ring-1 ring-foreground/10\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) group-data-[size=xs]/card:gap-0.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm group-data-[size=xs]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\n        \"text-sm text-muted-foreground group-data-[size=xs]/card:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      // flex-1: a no-op while Card sizes to its own content (no free space\n      // to distribute), but when something outside stretches Card taller\n      // than its content (a grid row, an explicit height), this is what\n      // claims the leftover space instead of leaving it as dead air below\n      // the content — e.g. what lets DataTable's footer sit flush at the\n      // card's true bottom edge instead of floating above blank space.\n      // px-(--card-spacing) already tracks Card's own size on its own —\n      // no size variant needed here, the custom property inherits down.\n      className={cn(\"flex-1 px-(--card-spacing)\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      // p-(--card-spacing) already tracks Card's own size on its own — no\n      // size variant needed here, the custom property inherits down.\n      className={cn(\n        \"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n\n/**\n * WHEN TO USE\n * - Grouping related content behind one visual boundary — dashboard panels,\n *   settings sections, forms, pricing/summary blocks.\n * - CardAction for a single header-aligned action (e.g. a \"Manage\" link) —\n *   it sits in the header grid's second column, aligned to the inline end.\n *\n * NOT WHEN\n * - A row inside a dense list — use Item instead.\n * - The page background itself — use `bg-background` directly, not a Card.\n *\n * KEY RULES\n * - size: default | sm | xs — every one of CardHeader/CardTitle/\n *   CardDescription/CardContent/CardFooter reacts. CardHeader/CardContent/\n *   CardFooter's own padding/gap track the shared `--card-spacing` custom\n *   property directly (no per-component variant needed — it inherits\n *   down); CardTitle drops to text-sm at sm and xs alike, CardDescription\n *   only at xs (already text-sm by default, same as sm). Not a separate\n *   visual style, just tighter padding and, at xs, smaller text. Reach for\n *   xs on a narrower surface — a Sidecar panel, a nested card — where even\n *   sm's padding is more than the available width can spare.\n * - CardFooter automatically gets a top border and a muted background — no\n *   className needed for the visual separation from CardContent.\n * - An `<img>` as the first or last child gets its corners auto-rounded to\n *   match the card — no manual `rounded-t-xl`/`rounded-b-xl` needed on it.\n * - `variant=\"dashed\"` swaps the filled `bg-card`/ring look for a transparent,\n *   dashed-border placeholder — an empty slot or \"add new\" tile in a grid of\n *   real Cards, not a second visual style for real content.\n * - An \"AI Card\" (an AI-generated summary) wraps a plain `Card` in a\n *   gradient div (`bg-gradient-to-r from-ai-wash to-ai-grad-from p-px`,\n *   the AI Identity gradient as a token-driven outline instead of an\n *   arbitrary `border-image` value) and puts `AILabel` in `CardAction` as\n *   the AI marker — no `AISparkle` next to `CardTitle`'s text, that would\n *   be redundant with `AILabel`'s own visible \"AI\" text. A `CardFooter`\n *   below the body/`CardContent` can optionally carry an AI Chip follow-up\n *   action (`variant=\"ai\" size=\"xs\" rounded-full`, `AISparkle` +\n *   `data-icon=\"inline-start\"`) alongside a plain pill secondary action\n *   (`variant=\"ghost\" size=\"xs\" rounded-full` — same pill shape/size, no\n *   AI accent) — one AI-styled action per row, same logic as the AI Icon\n *   Button recipe. Add\n *   `border-t-0 bg-transparent` to drop CardFooter's default\n *   gray strip (plain className overrides, no dedicated prop) so the\n *   actions sit on the card's own surface instead, plus `pt-0` since the\n *   strip's own top padding otherwise doubles up with Card's own\n *   `gap-(--card-spacing)` between CardContent and CardFooter once that\n *   strip's background/border stop visually justifying the extra room.\n *   See AI/Card's \"BoundaryTreatments\" story for all three side by side. `shadow-ai-glow` (a\n *   real registered token, not an arbitrary value) is a soft alternative\n *   to the hard gradient outline — just a plain Card className, no wrapper\n *   div — a lighter treatment where a crisp outline would compete with\n *   neighbouring cards (the middle card in \"BoundaryTreatments\"). A third option keeps the gradient outline and puts\n *   the glow INSIDE instead: `bg-ai-glow-bottom` as a plain Card className\n *   (a background-image, layering over Card's own `bg-card` — `cn`\n *   registers the glow classes as background-image utilities so\n *   tailwind-merge keeps both), a soft glow rising from the Card's own\n *   bottom edge — the same recipe an AI-marked DataTable's wrapping Card\n *   uses, so both read alike (the third card in \"BoundaryTreatments\").\n *\n * USAGE\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Create project</CardTitle>\n *     <CardDescription>Deploy your new project in one click.</CardDescription>\n *     <CardAction><Button variant=\"ghost\" size=\"sm\">Manage</Button></CardAction>\n *   </CardHeader>\n *   <CardContent>...</CardContent>\n *   <CardFooter className=\"gap-2\">\n *     <Button variant=\"outline\" className=\"flex-1\">Cancel</Button>\n *     <Button className=\"flex-1\">Deploy</Button>\n *   </CardFooter>\n * </Card>\n */\n"],"mappings":";;;;AAgBA,SAAS,KAAK,EACZ,WACA,OAAO,WACP,UAAU,WACV,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,gBAAc;EACd,WAAW,GAIT,mXACA,YAAY,WACR,sDACA,qCACJ,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4RACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,mEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EASV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EAGV,WAAW,GACT,0EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/carousel.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Carousel — slide container with prev/next controls.
+ *
+ * Built on embla-carousel; opts/plugins/setApi pass straight through to the
+ * underlying embla instance.
+ * Arrow-key navigation is wired in via `onKeyDownCapture` on the root, on
+ * top of embla's own drag/swipe handling.
+ */
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { Button, type TextButtonSize } from "../../components/ui/button";
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+    /** Indices embla currently considers in view — CarouselItem uses this to `inert` itself while scrolled off-screen, since embla only ever transforms slide position, never removes/hides one from the tab order or accessibility tree on its own. */
+    slidesInView: number[];
+} & CarouselProps;
+declare function useCarousel(): CarouselContextProps;
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
+declare function CarouselContent({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CarouselItem({ className, "data-slide-index": slideIndex, ...props }: React.ComponentProps<"div"> & {
+    "data-slide-index"?: number;
+}): React.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "iconOnly" | "asChild" | "aria-label"> & {
+    /** Height step of the round icon-only control; it is always square (`iconOnly`). */
+    size?: TextButtonSize;
+    "aria-label"?: string;
+}): React.JSX.Element;
+declare function CarouselNext({ className, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "iconOnly" | "asChild" | "aria-label"> & {
+    /** Height step of the round icon-only control; it is always square (`iconOnly`). */
+    size?: TextButtonSize;
+    "aria-label"?: string;
+}): React.JSX.Element;
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };
+/**
+ * WHEN TO USE
+ * - Paging horizontally (or vertically) through cards or media where
+ *   showing everything at once is impractical — featured items, testimonials,
+ *   image galleries.
+ *
+ * NOT WHEN
+ * - Content users need to scan or compare side by side — use a grid; a
+ *   carousel hides everything but the current slide(s).
+ * - Essential content that must never be missed — carousels are easy to
+ *   stop paging through.
+ * - Paged tabular/list data — use Pagination, not slide-based paging.
+ *
+ * KEY RULES
+ * - `orientation="vertical"` flips both the embla axis and the previous/next
+ *   button placement (rotated 90°, stacked above/below instead of beside).
+ * - Number of visible slides is controlled entirely by `basis-*` on
+ *   CarouselItem (e.g. `basis-1/3` shows three) — there's no `slidesToShow` prop.
+ * - `useCarousel()` throws outside a `<Carousel>` — only call it from a
+ *   descendant of Carousel (as CarouselContent/Item/Previous/Next do).
+ * - `setApi` is how you get imperative control (`api.scrollTo(i)`, listen to
+ *   `"select"`) — pass a state setter and read the api once it's set.
+ *
+ * USAGE
+ *   <Carousel className="w-64">
+ *     <CarouselContent>
+ *       {slides.map((s) => (
+ *         <CarouselItem key={s}><Card>...</Card></CarouselItem>
+ *       ))}
+ *     </CarouselContent>
+ *     <CarouselPrevious />
+ *     <CarouselNext />
+ *   </Carousel>
+ *
+ *   // Three slides visible at once
+ *   <CarouselItem className="basis-1/3">...</CarouselItem>
+ */
+//# sourceMappingURL=carousel.d.ts.map

package/dist/components/ui/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/components/ui/carousel.tsx"],"names":[],"mappings":"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"}