@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/button-group.js

@@ -0,0 +1,89 @@
+import { cn } from "../../lib/utils.js";
+import { Separator as Separator$1 } from "./separator.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/button-group.tsx
+/**
+* ButtonGroup — joins adjacent buttons into one segmented control.
+*
+* A plain flex container (`role="group"`) that strips inner borders/radii so
+* a row (or column) of Buttons reads as a single control. ButtonGroupText
+* and ButtonGroupSeparator are the non-interactive-affix and divider
+* sub-parts.
+*/
+var buttonGroupVariants = cva("group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+	variants: { orientation: {
+		horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!",
+		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+function ButtonGroup({ className, orientation, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "button-group",
+		"data-orientation": orientation,
+		className: cn(buttonGroupVariants({ orientation }), className),
+		...props
+	});
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		className: cn("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		"data-slot": "button-group-separator",
+		orientation,
+		className: cn("relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Segmented view switchers (Day / Week / Month) rendered as adjacent Buttons
+* - Split buttons: a primary action followed by a menu-trigger button, separated by ButtonGroupSeparator
+* - An input with an attached prefix/suffix action (e.g. a URL scheme label + input + copy button)
+*
+* NOT WHEN
+* - Actions that aren't visually or functionally related — use separate Buttons with normal spacing
+* - A single action — use Button directly
+* - Exclusive selection of one value from a set — use ToggleGroup type="single"
+*
+* KEY RULES
+* - orientation: horizontal (default) | vertical — controls which edges collapse
+* - Children must be direct DOM siblings (Button, Input, ButtonGroupText, ButtonGroupSeparator, a nested
+*   ButtonGroup, or a Select) — the border/radius-collapsing CSS only targets immediate children
+* - ButtonGroupText renders a static, non-interactive affix — it isn't a button and takes no onClick
+* - ButtonGroupSeparator defaults to a vertical divider — pass orientation="horizontal" inside a
+*   vertical ButtonGroup
+* - role="group" is applied automatically; add aria-label when the group's purpose isn't clear from
+*   its visible content
+*
+* USAGE
+* <ButtonGroup>
+*   <Button variant="outline">Day</Button>
+*   <Button variant="outline">Week</Button>
+*   <Button variant="outline">Month</Button>
+* </ButtonGroup>
+*
+* <ButtonGroup>
+*   <Button><ShareIcon />Share</Button>
+*   <ButtonGroupSeparator />
+*   <Button iconOnly aria-label="More share options"><ChevronDownIcon /></Button>
+* </ButtonGroup>
+*
+* <ButtonGroup>
+*   <ButtonGroupText>https://</ButtonGroupText>
+*   <Input placeholder="example.com" />
+*   <Button variant="outline" iconOnly aria-label="Copy URL"><CopyIcon /></Button>
+* </ButtonGroup>
+*/
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+
+//# sourceMappingURL=button-group.js.map

package/dist/components/ui/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../../../src/components/ui/button-group.tsx"],"sourcesContent":["/**\n * ButtonGroup — joins adjacent buttons into one segmented control.\n *\n * A plain flex container (`role=\"group\"`) that strips inner borders/radii so\n * a row (or column) of Buttons reads as a single control. ButtonGroupText\n * and ButtonGroupSeparator are the non-interactive-affix and divider\n * sub-parts.\n */\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n\n/**\n * WHEN TO USE\n * - Segmented view switchers (Day / Week / Month) rendered as adjacent Buttons\n * - Split buttons: a primary action followed by a menu-trigger button, separated by ButtonGroupSeparator\n * - An input with an attached prefix/suffix action (e.g. a URL scheme label + input + copy button)\n *\n * NOT WHEN\n * - Actions that aren't visually or functionally related — use separate Buttons with normal spacing\n * - A single action — use Button directly\n * - Exclusive selection of one value from a set — use ToggleGroup type=\"single\"\n *\n * KEY RULES\n * - orientation: horizontal (default) | vertical — controls which edges collapse\n * - Children must be direct DOM siblings (Button, Input, ButtonGroupText, ButtonGroupSeparator, a nested\n *   ButtonGroup, or a Select) — the border/radius-collapsing CSS only targets immediate children\n * - ButtonGroupText renders a static, non-interactive affix — it isn't a button and takes no onClick\n * - ButtonGroupSeparator defaults to a vertical divider — pass orientation=\"horizontal\" inside a\n *   vertical ButtonGroup\n * - role=\"group\" is applied automatically; add aria-label when the group's purpose isn't clear from\n *   its visible content\n *\n * USAGE\n * <ButtonGroup>\n *   <Button variant=\"outline\">Day</Button>\n *   <Button variant=\"outline\">Week</Button>\n *   <Button variant=\"outline\">Month</Button>\n * </ButtonGroup>\n *\n * <ButtonGroup>\n *   <Button><ShareIcon />Share</Button>\n *   <ButtonGroupSeparator />\n *   <Button iconOnly aria-label=\"More share options\"><ChevronDownIcon /></Button>\n * </ButtonGroup>\n *\n * <ButtonGroup>\n *   <ButtonGroupText>https://</ButtonGroupText>\n *   <Input placeholder=\"example.com\" />\n *   <Button variant=\"outline\" iconOnly aria-label=\"Copy URL\"><CopyIcon /></Button>\n * </ButtonGroup>\n */\n"],"mappings":";;;;;;;;;;;;;;AAeA,IAAM,sBAAsB,IAC1B,+SACA;CACE,UAAU,EACR,aAAa;EACX,YACE;EACF,UACE;CACJ,EACF;CACA,iBAAiB,EACf,aAAa,aACf;AACF,CACF;AAEA,SAAS,YAAY,EACnB,WACA,aACA,GAAG,SACsE;CACzE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,oBAAkB;EAClB,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EACvB,WACA,UAAU,OACV,GAAG,SAGF;CACD,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,WAAW,GACT,kJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,qBAAqB,EAC5B,WACA,cAAc,YACd,GAAG,SACsC;CACzC,OACE,oBAAC,aAAD;EACE,aAAU;EACG;EACb,WAAW,GACT,gLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,157 @@
+/**
+ * Button — action trigger.
+ *
+ * A cva-driven `<button>` (or the child element, via `asChild`/Slot) with
+ * seven color variants and eight sizes, four of them icon-only squares.
+ * Includes xs and sm size steps plus `iconOnly`,
+ * an `ai` variant for AI-powered actions, plus a
+ * `data-icon="inline-start"|"inline-end"` attribute consumers put on a child
+ * icon so the size's padding self-adjusts on that side instead of needing a
+ * manual gap/margin per usage.
+ *
+ * `variant="ai"` marks genuine AI involvement only, never decoration or
+ * emphasis — see manifest.json's `ai_presence` convention for the full rule
+ * and every current AI-treatment recipe (this variant, the AI Icon Button
+ * and AI Chip recipes below, the AI Card recipe, DataTable's row tint, and
+ * AILabel for the accessible explainability entry point specifically).
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "ai" | null | undefined;
+    size?: "sm" | "lg" | "default" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextButtonSize = "default" | "xs" | "sm" | "lg";
+/**
+ * @deprecated Icon-only is not a size — it's a shape. Use `iconOnly` with a
+ * plain size instead (`size="xs" iconOnly` in place of `size="icon-xs"`).
+ * These values still render identically so existing consumers keep working.
+ */
+type IconOnlyButtonSize = "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+/**
+ * `aria-label` is required whenever the button is icon-only (`iconOnly`, or
+ * one of the deprecated icon-* sizes) — there's no visible text for a screen
+ * reader to fall back on. Enforced as a type, not just documented, so
+ * omitting it is a build error instead of a silent accessibility gap. If a
+ * consumer already gives the button its name another way (e.g. a
+ * visually-hidden text child), pass `aria-label` too — redundant with that,
+ * but harmless, and it's what satisfies the type.
+ *
+ * Exempted when `asChild` is true: Slot renders the child element in the
+ * button's place, so the accessible name (visible text, its own aria-label,
+ * whatever) comes from that child, not from anything passed to `Button` here.
+ */
+type ButtonProps = Omit<React.ComponentProps<"button">, "aria-label"> & {
+    variant?: VariantProps<typeof buttonVariants>["variant"];
+} & ({
+    asChild: true;
+    size?: TextButtonSize | IconOnlyButtonSize;
+    iconOnly?: boolean;
+    "aria-label"?: string;
+} | {
+    asChild?: false;
+    /** Square, icon-only button at the given `size` step — no text, so `aria-label` is required. */
+    iconOnly: true;
+    size?: TextButtonSize;
+    "aria-label": string;
+} | {
+    asChild?: false;
+    iconOnly?: false;
+    /** @deprecated use `iconOnly` with a text size */
+    size: IconOnlyButtonSize;
+    "aria-label": string;
+} | {
+    asChild?: false;
+    iconOnly?: false;
+    size?: TextButtonSize;
+    "aria-label"?: string;
+});
+declare function Button({ className, variant, size, iconOnly, asChild, ...props }: ButtonProps): React.JSX.Element;
+export { Button, buttonVariants };
+export type { IconOnlyButtonSize, TextButtonSize };
+/**
+ * WHEN TO USE
+ * - Form submission, navigation, state changes, primary/secondary CTAs
+ * - Icon-only actions — `iconOnly` at the matching size, not a text size with a bare icon
+ *
+ * NOT WHEN
+ * - An inline text hyperlink — use an anchor, or variant="link"
+ * - Icon-only without an aria-label — screen readers get nothing to announce
+ * - A non-interactive status indicator — use Badge
+ *
+ * KEY RULES
+ * - variant: default | outline | secondary | ghost | destructive | link | ai (default "default")
+ * - size: default | xs | sm | lg (default "default") — how tall the button is
+ * - iconOnly: a square, text-less button at that same size step (h-8 -> 8x8 at default, and so on).
+ *   Two separate axes on purpose: icon-only is a shape, not a size, so `size="sm" iconOnly` and
+ *   `size="sm"` line up in the same row. `aria-label` is required whenever `iconOnly` is set —
+ *   enforced at the type level. The old `size="icon" | "icon-xs" | "icon-sm" | "icon-lg"` values
+ *   still render identically but are deprecated aliases; don't write new code with them.
+ * - asChild renders the child element via Slot instead of a <button> — for wrapping an <a> or router Link
+ * - A leading/trailing icon needs data-icon="inline-start" / "inline-end" on the icon element so the
+ *   size's built-in padding collapses correctly on that side
+ * - Only one destructive-intent button per confirming action — don't pair with a second destructive button
+ * - variant="ai" marks an action as AI-powered with the AI Gradient — a gold-to-pink wash
+ *   (--color-ai-wash / --color-ai-grad-from) that deepens on hover/active.
+ *   Add `AISparkle` (from ai-sparkle.tsx) as a leading icon via data-icon="inline-start" for the
+ *   "with sparkle" emphasis — there's no separate prop for it, it's the same icon-slot convention
+ *   as any other button
+ * - An icon-only "AI Icon Button" is variant="ai" with `iconOnly`, same persistent gradient and
+ *   hover/active states as the text "AI Button" — not variant="ghost" with the gradient added
+ *   only on hover. The AI Gradient background is what signals "AI" here, so the icon itself is
+ *   free: AISparkle alone (a pure "Ask AI" trigger with no other icon), or any domain icon
+ *   (BotIcon, SendIcon, whatever fits the action) plus a small AISparkle corner accent for
+ *   emphasis — same background either way. For the corner-accent version, put it INSIDE the
+ *   button itself (className="relative" on the Button, AISparkle absolutely placed at
+ *   top-1 right-1, size-3) — not a sibling overhanging the outer edge, which risks getting
+ *   clipped by a cramped ancestor's overflow-hidden (e.g. a Sidecar panel). top-1/right-1 lands
+ *   it overlapping the centered icon's own corner by about 4px at a default icon-size button.
+ * - An "AI Chip" is variant="ai" at a small size with a rounded-full override — Badge can't be used
+ *   here because it's non-interactive and this needs to stay clickable
+ * - A plain "Chip" (e.g. a removable applied-filter pill) is variant="outline" at size="sm" with
+ *   the same rounded-full override, plus a trailing remove icon via data-icon="inline-end" —
+ *   again Button, not Badge, because the whole pill is clickable (e.g. to remove itself)
+ * - An "Expanded Button" (full width) is `className="w-full"` — Button never adds its own margin
+ *   or width logic, so the gutter around it always comes from whatever surface it's on (a Card's
+ *   own padding, a Dialog/Sheet footer's own inset), never from the button itself
+ *
+ * USAGE
+ * <Button variant="destructive" onClick={handleDelete}>Delete</Button>
+ * <Button iconOnly aria-label="Add"><PlusIcon /></Button>
+ * <Button size="sm" iconOnly aria-label="Add"><PlusIcon /></Button>
+ * <Button variant="outline">
+ *   Continue
+ *   <ArrowRightIcon data-icon="inline-end" />
+ * </Button>
+ *
+ * // AI Button — default and "with sparkle"
+ * <Button variant="ai">Summarize</Button>
+ * <Button variant="ai">
+ *   <AISparkle data-icon="inline-start" />
+ *   Summarize
+ * </Button>
+ *
+ * // AI Icon Button — AISparkle alone, a pure "Ask AI" trigger
+ * <Button variant="ai" iconOnly aria-label="Ask AI">
+ *   <AISparkle />
+ * </Button>
+ *
+ * // AI Icon Button — a domain icon instead, same AI Gradient background, corner sparkle inside the button
+ * <Button variant="ai" iconOnly aria-label="Ask AI" className="relative">
+ *   <BotIcon />
+ *   <AISparkle className="absolute top-1 right-1 size-3" />
+ * </Button>
+ *
+ * // AI Chip — a small rounded-full action chip, not a Badge (needs to stay clickable)
+ * <Button variant="ai" size="xs" className="rounded-full">
+ *   <AISparkle data-icon="inline-start" />
+ *   Ask Sara
+ * </Button>
+ *
+ * // Chip — a removable pill (e.g. an applied filter), icon trails the label
+ * <Button variant="outline" size="sm" className="rounded-full" onClick={handleRemove}>
+ *   Status: Paid
+ *   <XIcon data-icon="inline-end" />
+ * </Button>
+ */
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;;8EAkDnB,CAAA;AAED,KAAK,cAAc,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACpD;;;;GAIG;AACH,KAAK,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAYpE;;;;;;;;;;;;GAYG;AACH,KAAK,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,GAAG;IACtE,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAA;CACzD,GAAG,CACE;IACE,OAAO,EAAE,IAAI,CAAA;IACb,IAAI,CAAC,EAAE,cAAc,GAAG,kBAAkB,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,gGAAgG;IAChG,QAAQ,EAAE,IAAI,CAAA;IACd,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;CACrB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,kDAAkD;IAClD,IAAI,EAAE,kBAAkB,CAAA;IACxB,YAAY,EAAE,MAAM,CAAA;CACrB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CACJ,CAAA;AAEH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,qBAiBb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA;AACjC,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,CAAA;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG"}

package/dist/components/ui/button.js

@@ -0,0 +1,144 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/button.tsx
+var buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] 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: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active focus-visible:border-primary-foreground",
+			outline: "border-border hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline",
+			ai: "bg-gradient-to-r from-ai-wash/20 to-ai-grad-from/20 text-foreground hover:from-ai-wash/28 hover:to-ai-grad-from/28 active:from-ai-wash/36 active:to-ai-grad-from/36 aria-expanded:from-ai-wash/28 aria-expanded:to-ai-grad-from/28"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md,0.375rem),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md,0.375rem),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md,0.375rem),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md,0.375rem),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var ICON_ONLY_SIZE = {
+	default: "icon",
+	xs: "icon-xs",
+	sm: "icon-sm",
+	lg: "icon-lg"
+};
+function Button({ className, variant = "default", size = "default", iconOnly = false, asChild = false, ...props }) {
+	const Comp = asChild ? Slot.Root : "button";
+	const resolvedSize = iconOnly && size in ICON_ONLY_SIZE ? ICON_ONLY_SIZE[size] : size;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": resolvedSize,
+		"data-icon-only": iconOnly || resolvedSize !== size ? true : void 0,
+		className: cn(buttonVariants({
+			variant,
+			size: resolvedSize,
+			className
+		})),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Form submission, navigation, state changes, primary/secondary CTAs
+* - Icon-only actions — `iconOnly` at the matching size, not a text size with a bare icon
+*
+* NOT WHEN
+* - An inline text hyperlink — use an anchor, or variant="link"
+* - Icon-only without an aria-label — screen readers get nothing to announce
+* - A non-interactive status indicator — use Badge
+*
+* KEY RULES
+* - variant: default | outline | secondary | ghost | destructive | link | ai (default "default")
+* - size: default | xs | sm | lg (default "default") — how tall the button is
+* - iconOnly: a square, text-less button at that same size step (h-8 -> 8x8 at default, and so on).
+*   Two separate axes on purpose: icon-only is a shape, not a size, so `size="sm" iconOnly` and
+*   `size="sm"` line up in the same row. `aria-label` is required whenever `iconOnly` is set —
+*   enforced at the type level. The old `size="icon" | "icon-xs" | "icon-sm" | "icon-lg"` values
+*   still render identically but are deprecated aliases; don't write new code with them.
+* - asChild renders the child element via Slot instead of a <button> — for wrapping an <a> or router Link
+* - A leading/trailing icon needs data-icon="inline-start" / "inline-end" on the icon element so the
+*   size's built-in padding collapses correctly on that side
+* - Only one destructive-intent button per confirming action — don't pair with a second destructive button
+* - variant="ai" marks an action as AI-powered with the AI Gradient — a gold-to-pink wash
+*   (--color-ai-wash / --color-ai-grad-from) that deepens on hover/active.
+*   Add `AISparkle` (from ai-sparkle.tsx) as a leading icon via data-icon="inline-start" for the
+*   "with sparkle" emphasis — there's no separate prop for it, it's the same icon-slot convention
+*   as any other button
+* - An icon-only "AI Icon Button" is variant="ai" with `iconOnly`, same persistent gradient and
+*   hover/active states as the text "AI Button" — not variant="ghost" with the gradient added
+*   only on hover. The AI Gradient background is what signals "AI" here, so the icon itself is
+*   free: AISparkle alone (a pure "Ask AI" trigger with no other icon), or any domain icon
+*   (BotIcon, SendIcon, whatever fits the action) plus a small AISparkle corner accent for
+*   emphasis — same background either way. For the corner-accent version, put it INSIDE the
+*   button itself (className="relative" on the Button, AISparkle absolutely placed at
+*   top-1 right-1, size-3) — not a sibling overhanging the outer edge, which risks getting
+*   clipped by a cramped ancestor's overflow-hidden (e.g. a Sidecar panel). top-1/right-1 lands
+*   it overlapping the centered icon's own corner by about 4px at a default icon-size button.
+* - An "AI Chip" is variant="ai" at a small size with a rounded-full override — Badge can't be used
+*   here because it's non-interactive and this needs to stay clickable
+* - A plain "Chip" (e.g. a removable applied-filter pill) is variant="outline" at size="sm" with
+*   the same rounded-full override, plus a trailing remove icon via data-icon="inline-end" —
+*   again Button, not Badge, because the whole pill is clickable (e.g. to remove itself)
+* - An "Expanded Button" (full width) is `className="w-full"` — Button never adds its own margin
+*   or width logic, so the gutter around it always comes from whatever surface it's on (a Card's
+*   own padding, a Dialog/Sheet footer's own inset), never from the button itself
+*
+* USAGE
+* <Button variant="destructive" onClick={handleDelete}>Delete</Button>
+* <Button iconOnly aria-label="Add"><PlusIcon /></Button>
+* <Button size="sm" iconOnly aria-label="Add"><PlusIcon /></Button>
+* <Button variant="outline">
+*   Continue
+*   <ArrowRightIcon data-icon="inline-end" />
+* </Button>
+*
+* // AI Button — default and "with sparkle"
+* <Button variant="ai">Summarize</Button>
+* <Button variant="ai">
+*   <AISparkle data-icon="inline-start" />
+*   Summarize
+* </Button>
+*
+* // AI Icon Button — AISparkle alone, a pure "Ask AI" trigger
+* <Button variant="ai" iconOnly aria-label="Ask AI">
+*   <AISparkle />
+* </Button>
+*
+* // AI Icon Button — a domain icon instead, same AI Gradient background, corner sparkle inside the button
+* <Button variant="ai" iconOnly aria-label="Ask AI" className="relative">
+*   <BotIcon />
+*   <AISparkle className="absolute top-1 right-1 size-3" />
+* </Button>
+*
+* // AI Chip — a small rounded-full action chip, not a Badge (needs to stay clickable)
+* <Button variant="ai" size="xs" className="rounded-full">
+*   <AISparkle data-icon="inline-start" />
+*   Ask Sara
+* </Button>
+*
+* // Chip — a removable pill (e.g. an applied filter), icon trails the label
+* <Button variant="outline" size="sm" className="rounded-full" onClick={handleRemove}>
+*   Status: Paid
+*   <XIcon data-icon="inline-end" />
+* </Button>
+*/
+//#endregion
+export { Button, buttonVariants };
+
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["/**\n * Button — action trigger.\n *\n * A cva-driven `<button>` (or the child element, via `asChild`/Slot) with\n * seven color variants and eight sizes, four of them icon-only squares.\n * Includes xs and sm size steps plus `iconOnly`,\n * an `ai` variant for AI-powered actions, plus a\n * `data-icon=\"inline-start\"|\"inline-end\"` attribute consumers put on a child\n * icon so the size's padding self-adjusts on that side instead of needing a\n * manual gap/margin per usage.\n *\n * `variant=\"ai\"` marks genuine AI involvement only, never decoration or\n * emphasis — see manifest.json's `ai_presence` convention for the full rule\n * and every current AI-treatment recipe (this variant, the AI Icon Button\n * and AI Chip recipes below, the AI Card recipe, DataTable's row tint, and\n * AILabel for the accessible explainability entry point specifically).\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] 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\",\n  {\n    variants: {\n      variant: {\n        // focus-visible:border-primary-foreground overrides the base\n        // recipe's border-ring specifically for this variant: ring-ring is\n        // a deeper step of primary by design (blue-950 next to blue-900),\n        // so on this variant alone the focus border sits directly against\n        // a fill just one step away from its own color — computed contrast\n        // is ~1.3:1 light / ~1.06:1 dark, far under 1.4.11's 3:1 floor.\n        // primary-foreground is already contrast-verified against bg-primary\n        // itself (the same pairing text sits on, checked at build time by\n        // scripts/check-foreground-contrast.mjs), so reusing it here is a\n        // real fix, not a new unverified color. The outward ring-3\n        // ring-ring/50 box-shadow is untouched — it lands on whatever\n        // surface surrounds the button, not on the button's own fill, and\n        // that comparison already clears 3:1.\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active focus-visible:border-primary-foreground\",\n        outline:\n          \"border-border hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        ai: \"bg-gradient-to-r from-ai-wash/20 to-ai-grad-from/20 text-foreground hover:from-ai-wash/28 hover:to-ai-grad-from/28 active:from-ai-wash/36 active:to-ai-grad-from/36 aria-expanded:from-ai-wash/28 aria-expanded:to-ai-grad-from/28\",\n      },\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md,0.375rem),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md,0.375rem),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md,0.375rem),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md,0.375rem),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\ntype TextButtonSize = \"default\" | \"xs\" | \"sm\" | \"lg\"\n/**\n * @deprecated Icon-only is not a size — it's a shape. Use `iconOnly` with a\n * plain size instead (`size=\"xs\" iconOnly` in place of `size=\"icon-xs\"`).\n * These values still render identically so existing consumers keep working.\n */\ntype IconOnlyButtonSize = \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\"\n\n// `iconOnly` + a text size resolves to the square cva size of the same\n// step. The cva keeps the icon-* keys as its implementation detail; the\n// public vocabulary is size (how tall) x iconOnly (square, no text).\nconst ICON_ONLY_SIZE: Record<TextButtonSize, IconOnlyButtonSize> = {\n  default: \"icon\",\n  xs: \"icon-xs\",\n  sm: \"icon-sm\",\n  lg: \"icon-lg\",\n}\n\n/**\n * `aria-label` is required whenever the button is icon-only (`iconOnly`, or\n * one of the deprecated icon-* sizes) — there's no visible text for a screen\n * reader to fall back on. Enforced as a type, not just documented, so\n * omitting it is a build error instead of a silent accessibility gap. If a\n * consumer already gives the button its name another way (e.g. a\n * visually-hidden text child), pass `aria-label` too — redundant with that,\n * but harmless, and it's what satisfies the type.\n *\n * Exempted when `asChild` is true: Slot renders the child element in the\n * button's place, so the accessible name (visible text, its own aria-label,\n * whatever) comes from that child, not from anything passed to `Button` here.\n */\ntype ButtonProps = Omit<React.ComponentProps<\"button\">, \"aria-label\"> & {\n  variant?: VariantProps<typeof buttonVariants>[\"variant\"]\n} & (\n    | {\n        asChild: true\n        size?: TextButtonSize | IconOnlyButtonSize\n        iconOnly?: boolean\n        \"aria-label\"?: string\n      }\n    | {\n        asChild?: false\n        /** Square, icon-only button at the given `size` step — no text, so `aria-label` is required. */\n        iconOnly: true\n        size?: TextButtonSize\n        \"aria-label\": string\n      }\n    | {\n        asChild?: false\n        iconOnly?: false\n        /** @deprecated use `iconOnly` with a text size */\n        size: IconOnlyButtonSize\n        \"aria-label\": string\n      }\n    | {\n        asChild?: false\n        iconOnly?: false\n        size?: TextButtonSize\n        \"aria-label\"?: string\n      }\n  )\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  iconOnly = false,\n  asChild = false,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const resolvedSize =\n    iconOnly && size in ICON_ONLY_SIZE\n      ? ICON_ONLY_SIZE[size as TextButtonSize]\n      : size\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={resolvedSize}\n      data-icon-only={iconOnly || resolvedSize !== size ? true : undefined}\n      className={cn(buttonVariants({ variant, size: resolvedSize, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\nexport type { IconOnlyButtonSize, TextButtonSize }\n\n/**\n * WHEN TO USE\n * - Form submission, navigation, state changes, primary/secondary CTAs\n * - Icon-only actions — `iconOnly` at the matching size, not a text size with a bare icon\n *\n * NOT WHEN\n * - An inline text hyperlink — use an anchor, or variant=\"link\"\n * - Icon-only without an aria-label — screen readers get nothing to announce\n * - A non-interactive status indicator — use Badge\n *\n * KEY RULES\n * - variant: default | outline | secondary | ghost | destructive | link | ai (default \"default\")\n * - size: default | xs | sm | lg (default \"default\") — how tall the button is\n * - iconOnly: a square, text-less button at that same size step (h-8 -> 8x8 at default, and so on).\n *   Two separate axes on purpose: icon-only is a shape, not a size, so `size=\"sm\" iconOnly` and\n *   `size=\"sm\"` line up in the same row. `aria-label` is required whenever `iconOnly` is set —\n *   enforced at the type level. The old `size=\"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\"` values\n *   still render identically but are deprecated aliases; don't write new code with them.\n * - asChild renders the child element via Slot instead of a <button> — for wrapping an <a> or router Link\n * - A leading/trailing icon needs data-icon=\"inline-start\" / \"inline-end\" on the icon element so the\n *   size's built-in padding collapses correctly on that side\n * - Only one destructive-intent button per confirming action — don't pair with a second destructive button\n * - variant=\"ai\" marks an action as AI-powered with the AI Gradient — a gold-to-pink wash\n *   (--color-ai-wash / --color-ai-grad-from) that deepens on hover/active.\n *   Add `AISparkle` (from ai-sparkle.tsx) as a leading icon via data-icon=\"inline-start\" for the\n *   \"with sparkle\" emphasis — there's no separate prop for it, it's the same icon-slot convention\n *   as any other button\n * - An icon-only \"AI Icon Button\" is variant=\"ai\" with `iconOnly`, same persistent gradient and\n *   hover/active states as the text \"AI Button\" — not variant=\"ghost\" with the gradient added\n *   only on hover. The AI Gradient background is what signals \"AI\" here, so the icon itself is\n *   free: AISparkle alone (a pure \"Ask AI\" trigger with no other icon), or any domain icon\n *   (BotIcon, SendIcon, whatever fits the action) plus a small AISparkle corner accent for\n *   emphasis — same background either way. For the corner-accent version, put it INSIDE the\n *   button itself (className=\"relative\" on the Button, AISparkle absolutely placed at\n *   top-1 right-1, size-3) — not a sibling overhanging the outer edge, which risks getting\n *   clipped by a cramped ancestor's overflow-hidden (e.g. a Sidecar panel). top-1/right-1 lands\n *   it overlapping the centered icon's own corner by about 4px at a default icon-size button.\n * - An \"AI Chip\" is variant=\"ai\" at a small size with a rounded-full override — Badge can't be used\n *   here because it's non-interactive and this needs to stay clickable\n * - A plain \"Chip\" (e.g. a removable applied-filter pill) is variant=\"outline\" at size=\"sm\" with\n *   the same rounded-full override, plus a trailing remove icon via data-icon=\"inline-end\" —\n *   again Button, not Badge, because the whole pill is clickable (e.g. to remove itself)\n * - An \"Expanded Button\" (full width) is `className=\"w-full\"` — Button never adds its own margin\n *   or width logic, so the gutter around it always comes from whatever surface it's on (a Card's\n *   own padding, a Dialog/Sheet footer's own inset), never from the button itself\n *\n * USAGE\n * <Button variant=\"destructive\" onClick={handleDelete}>Delete</Button>\n * <Button iconOnly aria-label=\"Add\"><PlusIcon /></Button>\n * <Button size=\"sm\" iconOnly aria-label=\"Add\"><PlusIcon /></Button>\n * <Button variant=\"outline\">\n *   Continue\n *   <ArrowRightIcon data-icon=\"inline-end\" />\n * </Button>\n *\n * // AI Button — default and \"with sparkle\"\n * <Button variant=\"ai\">Summarize</Button>\n * <Button variant=\"ai\">\n *   <AISparkle data-icon=\"inline-start\" />\n *   Summarize\n * </Button>\n *\n * // AI Icon Button — AISparkle alone, a pure \"Ask AI\" trigger\n * <Button variant=\"ai\" iconOnly aria-label=\"Ask AI\">\n *   <AISparkle />\n * </Button>\n *\n * // AI Icon Button — a domain icon instead, same AI Gradient background, corner sparkle inside the button\n * <Button variant=\"ai\" iconOnly aria-label=\"Ask AI\" className=\"relative\">\n *   <BotIcon />\n *   <AISparkle className=\"absolute top-1 right-1 size-3\" />\n * </Button>\n *\n * // AI Chip — a small rounded-full action chip, not a Badge (needs to stay clickable)\n * <Button variant=\"ai\" size=\"xs\" className=\"rounded-full\">\n *   <AISparkle data-icon=\"inline-start\" />\n *   Ask Sara\n * </Button>\n *\n * // Chip — a removable pill (e.g. an applied filter), icon trails the label\n * <Button variant=\"outline\" size=\"sm\" className=\"rounded-full\" onClick={handleRemove}>\n *   Status: Paid\n *   <XIcon data-icon=\"inline-end\" />\n * </Button>\n */\n"],"mappings":";;;;;;AAwBA,IAAM,iBAAiB,IACrB,qpBACA;CACE,UAAU;EACR,SAAS;GAcP,SACE;GACF,SACE;GACF,WACE;GACF,OACE;GACF,aACE;GACF,MAAM;GACN,IAAI;EACN;EACA,MAAM;GACJ,SACE;GACF,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WACE;GACF,WACE;GACF,WAAW;EACb;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAaA,IAAM,iBAA6D;CACjE,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AA8CA,SAAS,OAAO,EACd,WACA,UAAU,WACV,OAAO,WACP,WAAW,OACX,UAAU,OACV,GAAG,SACW;CACd,MAAM,OAAO,UAAU,KAAK,OAAO;CACnC,MAAM,eACJ,YAAY,QAAQ,iBAChB,eAAe,QACf;CAEN,OACE,oBAAC,MAAD;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,kBAAgB,YAAY,iBAAiB,OAAO,OAAO,KAAA;EAC3D,WAAW,GAAG,eAAe;GAAE;GAAS,MAAM;GAAc;EAAU,CAAC,CAAC;EACxE,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,57 @@
+/**
+ * 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.
+ */
+import * as React from "react";
+import { DayPicker, type DayButton, type Locale } from "react-day-picker";
+import { Button } from "../../components/ui/button";
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
+    locale?: Partial<Locale>;
+}): React.JSX.Element;
+export { Calendar, CalendarDayButton };
+/**
+ * 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>
+ */
+//# sourceMappingURL=calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/calendar.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACd,KAAK,MAAM,EACZ,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,MAAM,EACN,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,qBA6JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,qBAqCvE;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG"}