@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/label.js

@@ -0,0 +1,85 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { Label as Label$1 } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/label.tsx
+var labelVariants = cva("flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:text-disabled-foreground peer-disabled:cursor-not-allowed peer-disabled:text-disabled-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:text-disabled-foreground", {
+	variants: { size: {
+		default: "text-sm",
+		sm: "text-xs"
+	} },
+	defaultVariants: { size: "default" }
+});
+function Label({ className, size = "default", required = false, optional = false, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Label$1.Root, {
+		"data-slot": "label",
+		"data-size": size,
+		"data-required": required || void 0,
+		"data-optional": optional && !required || void 0,
+		className: cn(labelVariants({ size }), className),
+		...props,
+		children: [children, required ? /* @__PURE__ */ jsx(RequiredDot, {}) : optional ? /* @__PURE__ */ jsx(OptionalHint, {}) : null]
+	});
+}
+/** The required mark — a 6px destructive dot. Decorative: the control's own `required`/`aria-required` is what assistive tech reads. */
+function RequiredDot({ className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "required-dot",
+		className: cn("-ml-1 inline-block size-1.5 shrink-0 self-start rounded-full bg-destructive", className)
+	});
+}
+/** The optional mark — a muted "(optional)" after the label text. */
+function OptionalHint({ className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "optional-hint",
+		className: cn("-ml-1 font-normal text-muted-foreground", className),
+		children: "(optional)"
+	});
+}
+/**
+* WHEN TO USE
+* - Labelling any form control (Input, Checkbox, RadioGroupItem, Switch, ...)
+* - Pair via `htmlFor`/`id`, or wrap the control so the whole row becomes a click target
+*   (dims automatically either way when the control is disabled)
+*
+* NOT WHEN
+* - The field also needs description or error text — use Field instead, which renders its own label internally
+*
+* KEY RULES
+* - `select-none` — label text is not selectable, matching native label behavior
+* - Dims when: its own peer control is disabled (`peer-disabled:*`, sibling usage), it wraps a disabled
+*   control (`has-disabled:*`, wrapping usage), or a parent group is disabled (`group-data-[disabled=true]:*`)
+* - `size`: "default" (text-sm) | "sm" (text-xs) — match it to the control it
+*   labels, e.g. "sm" next to a `size="sm"` Select in a dense form row.
+* - Three states, all marked on the Label itself (never on the control or elsewhere): plain
+*   `<Label>` for an ordinary field; `<Label optional>` adds a muted "(optional)" hint, for forms
+*   where most fields are required and the exceptions need calling out; `<Label required>` adds a
+*   small red dot, for a mandatory field. Pick one convention per form — mark the required ones OR
+*   the optional ones, not both. Both marks are decorative: the control must still carry
+*   `required`/`aria-required`, which is what assistive tech announces.
+*
+* USAGE
+* <Label htmlFor="email">Email</Label>
+* <Input id="email" />
+*
+* <Label className="flex items-center gap-2">
+*   <Checkbox /> Accept terms
+* </Label>
+*
+* <Label size="sm" htmlFor="team">Team</Label>
+* <Select size="sm">...</Select>
+*
+* // Mandatory field: red dot on the label, `required` on the control
+* <Label htmlFor="email" required>Email</Label>
+* <Input id="email" required />
+*
+* // Optional field called out explicitly
+* <Label htmlFor="nickname" optional>Nickname</Label>
+* <Input id="nickname" />
+*/
+//#endregion
+export { Label, OptionalHint, RequiredDot };
+
+//# sourceMappingURL=label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":[],"sources":["../../../src/components/ui/label.tsx"],"sourcesContent":["/**\n * Label — accessible form control label.\n *\n * Dims via `group-data-[disabled=true]` when a parent group (not just its\n * own peer control) is disabled, and via `has-disabled` when WRAPPING a\n * disabled control —\n * `peer-disabled` only ever matches a disabled control that's a following\n * sibling, never one nested inside the label, which is the more common of\n * the two documented usages below.\n *\n * Dims to `text-disabled-foreground`, not `opacity-50` — an opacity\n * approach blends the label's dark text down to ~3.3:1 against a\n * light background, failing WCAG 1.4.3's 4.5:1 text minimum (a disabled\n * *control* is exempt from contrast rules, but this label is a separate\n * element describing it, not the control itself, so it still needs to pass).\n * Not `text-muted-foreground` either — that step alone doesn't read as\n * clearly faded next to normal (near-black) label text; disabled-foreground\n * is a dedicated, deliberately lighter token for exactly this case (see\n * theme-tokens.css).\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n  \"flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:text-disabled-foreground peer-disabled:cursor-not-allowed peer-disabled:text-disabled-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:text-disabled-foreground\",\n  {\n    variants: {\n      size: {\n        default: \"text-sm\",\n        sm: \"text-xs\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\n// Three states a label can be in, and the label is the only place they're\n// marked: plain (nothing shown), optional (a muted \"(optional)\" hint), and\n// required (a 6px destructive dot). Both marks are decorative — the control\n// itself must still carry `required`/`aria-required`, which is what\n// assistive tech announces. Shared with FieldLegend via the two helpers.\nfunction Label({\n  className,\n  size = \"default\",\n  required = false,\n  optional = false,\n  children,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root> &\n  VariantProps<typeof labelVariants> & {\n    /** Marks the field as mandatory with a red dot after the text. Visual only — also put `required`/`aria-required` on the control. */\n    required?: boolean\n    /** Shows a muted \"(optional)\" hint after the text, for forms where most fields are required and the exceptions need calling out. Mutually exclusive with `required`. */\n    optional?: boolean\n  }) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      data-size={size}\n      data-required={required || undefined}\n      data-optional={(optional && !required) || undefined}\n      className={cn(labelVariants({ size }), className)}\n      {...props}\n    >\n      {children}\n      {required ? <RequiredDot /> : optional ? <OptionalHint /> : null}\n    </LabelPrimitive.Root>\n  )\n}\n\n/** The required mark — a 6px destructive dot. Decorative: the control's own `required`/`aria-required` is what assistive tech reads. */\nfunction RequiredDot({ className }: { className?: string }) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"required-dot\"\n      // `self-start`: sits at the top of the label text like a superscript\n      // marker, not centred on the line.\n      className={cn(\n        \"-ml-1 inline-block size-1.5 shrink-0 self-start rounded-full bg-destructive\",\n        className\n      )}\n    />\n  )\n}\n\n/** The optional mark — a muted \"(optional)\" after the label text. */\nfunction OptionalHint({ className }: { className?: string }) {\n  return (\n    <span\n      data-slot=\"optional-hint\"\n      className={cn(\"-ml-1 font-normal text-muted-foreground\", className)}\n    >\n      (optional)\n    </span>\n  )\n}\n\nexport { Label, RequiredDot, OptionalHint }\n\n/**\n * WHEN TO USE\n * - Labelling any form control (Input, Checkbox, RadioGroupItem, Switch, ...)\n * - Pair via `htmlFor`/`id`, or wrap the control so the whole row becomes a click target\n *   (dims automatically either way when the control is disabled)\n *\n * NOT WHEN\n * - The field also needs description or error text — use Field instead, which renders its own label internally\n *\n * KEY RULES\n * - `select-none` — label text is not selectable, matching native label behavior\n * - Dims when: its own peer control is disabled (`peer-disabled:*`, sibling usage), it wraps a disabled\n *   control (`has-disabled:*`, wrapping usage), or a parent group is disabled (`group-data-[disabled=true]:*`)\n * - `size`: \"default\" (text-sm) | \"sm\" (text-xs) — match it to the control it\n *   labels, e.g. \"sm\" next to a `size=\"sm\"` Select in a dense form row.\n * - Three states, all marked on the Label itself (never on the control or elsewhere): plain\n *   `<Label>` for an ordinary field; `<Label optional>` adds a muted \"(optional)\" hint, for forms\n *   where most fields are required and the exceptions need calling out; `<Label required>` adds a\n *   small red dot, for a mandatory field. Pick one convention per form — mark the required ones OR\n *   the optional ones, not both. Both marks are decorative: the control must still carry\n *   `required`/`aria-required`, which is what assistive tech announces.\n *\n * USAGE\n * <Label htmlFor=\"email\">Email</Label>\n * <Input id=\"email\" />\n *\n * <Label className=\"flex items-center gap-2\">\n *   <Checkbox /> Accept terms\n * </Label>\n *\n * <Label size=\"sm\" htmlFor=\"team\">Team</Label>\n * <Select size=\"sm\">...</Select>\n *\n * // Mandatory field: red dot on the label, `required` on the control\n * <Label htmlFor=\"email\" required>Email</Label>\n * <Input id=\"email\" required />\n *\n * // Optional field called out explicitly\n * <Label htmlFor=\"nickname\" optional>Nickname</Label>\n * <Input id=\"nickname\" />\n */\n"],"mappings":";;;;;;AA2BA,IAAM,gBAAgB,IACpB,kVACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAOA,SAAS,MAAM,EACb,WACA,OAAO,WACP,WAAW,OACX,WAAW,OACX,UACA,GAAG,SAOA;CACH,OACE,qBAAC,QAAe,MAAhB;EACE,aAAU;EACV,aAAW;EACX,iBAAe,YAAY,KAAA;EAC3B,iBAAgB,YAAY,CAAC,YAAa,KAAA;EAC1C,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;EAChD,GAAI;EANN,UAAA,CAQG,UACA,WAAW,oBAAC,aAAD,CAAc,CAAA,IAAI,WAAW,oBAAC,cAAD,CAAe,CAAA,IAAI,IACzC;;AAEzB;;AAGA,SAAS,YAAY,EAAE,aAAqC;CAC1D,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,aAAU;EAGV,WAAW,GACT,+EACA,SACF;CACD,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,aAAqC;CAC3D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EACnE,UAAA;CAEK,CAAA;AAEV"}

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

@@ -0,0 +1,54 @@
+/**
+ * Marker — small annotation with an optional leading icon.
+ *
+ * cva-driven `div` (or `Slot` via `asChild`), no external primitive.
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const markerVariants: (props?: ({
+    variant?: "separator" | "default" | "border" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Marker({ className, variant, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof markerVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function MarkerIcon({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function MarkerContent({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Marker, MarkerIcon, MarkerContent, markerVariants };
+/**
+ * WHEN TO USE
+ * - Timeline entries, activity-log rows, or an inline annotation between
+ *   blocks of content — e.g. "Deployed 2 minutes ago", "Build started".
+ * - `MarkerIcon` for a small leading glyph (e.g. a status dot) before the
+ *   text — it's `aria-hidden`, so pair it with real text in
+ *   `MarkerContent`, not an icon alone.
+ *
+ * NOT WHEN
+ * - A categorical tag, or an operational-status label — use Badge (with a
+ *   colored icon for status; see Badge's docs for the convention).
+ * - A section heading.
+ * - A list row with media and actions — use Item.
+ *
+ * KEY RULES
+ * - Three variants: `default` (plain), `separator` (draws a horizontal
+ *   rule on both sides of the content — a standalone divider-style
+ *   annotation), `border` (a bottom border under the whole marker — for
+ *   stacking timeline entries). Omit `variant` for `default`.
+ * - `asChild` renders Marker as its child (e.g. an `<a>`) instead of a
+ *   `div`.
+ * - Links inside MarkerContent get underlined automatically.
+ *
+ * USAGE
+ * <Marker>
+ *   <MarkerContent>Deployed 2 minutes ago</MarkerContent>
+ * </Marker>
+ *
+ * <Marker>
+ *   <MarkerIcon><CircleDotIcon /></MarkerIcon>
+ *   <MarkerContent>Build started</MarkerContent>
+ * </Marker>
+ *
+ * <Marker variant="separator">
+ *   <MarkerContent>Today</MarkerContent>
+ * </Marker>
+ */
+//# sourceMappingURL=marker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marker.d.ts","sourceRoot":"","sources":["../../../src/components/ui/marker.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;8EAYnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAC5B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBAWF;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAYxE;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW3E;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAE,CAAA;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG"}

package/dist/components/ui/marker.js

@@ -0,0 +1,79 @@
+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/marker.tsx
+var markerVariants = cva("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground", { variants: { variant: {
+	default: "",
+	separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+	border: "border-b border-border pb-2"
+} } });
+function Marker({ className, variant = "default", asChild = false, ...props }) {
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "marker",
+		"data-variant": variant,
+		className: cn(markerVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function MarkerIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-icon",
+		"aria-hidden": "true",
+		className: cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function MarkerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-content",
+		className: cn("min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Timeline entries, activity-log rows, or an inline annotation between
+*   blocks of content — e.g. "Deployed 2 minutes ago", "Build started".
+* - `MarkerIcon` for a small leading glyph (e.g. a status dot) before the
+*   text — it's `aria-hidden`, so pair it with real text in
+*   `MarkerContent`, not an icon alone.
+*
+* NOT WHEN
+* - A categorical tag, or an operational-status label — use Badge (with a
+*   colored icon for status; see Badge's docs for the convention).
+* - A section heading.
+* - A list row with media and actions — use Item.
+*
+* KEY RULES
+* - Three variants: `default` (plain), `separator` (draws a horizontal
+*   rule on both sides of the content — a standalone divider-style
+*   annotation), `border` (a bottom border under the whole marker — for
+*   stacking timeline entries). Omit `variant` for `default`.
+* - `asChild` renders Marker as its child (e.g. an `<a>`) instead of a
+*   `div`.
+* - Links inside MarkerContent get underlined automatically.
+*
+* USAGE
+* <Marker>
+*   <MarkerContent>Deployed 2 minutes ago</MarkerContent>
+* </Marker>
+*
+* <Marker>
+*   <MarkerIcon><CircleDotIcon /></MarkerIcon>
+*   <MarkerContent>Build started</MarkerContent>
+* </Marker>
+*
+* <Marker variant="separator">
+*   <MarkerContent>Today</MarkerContent>
+* </Marker>
+*/
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };
+
+//# sourceMappingURL=marker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marker.js","names":[],"sources":["../../../src/components/ui/marker.tsx"],"sourcesContent":["/**\n * Marker — small annotation with an optional leading icon.\n *\n * cva-driven `div` (or `Slot` via `asChild`), no external primitive.\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 markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        separator:\n          \"before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border\",\n        border: \"border-b border-border pb-2\",\n      },\n    },\n  }\n)\n\nfunction Marker({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof markerVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"marker\"\n      data-variant={variant}\n      className={cn(markerVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        \"min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerIcon, MarkerContent, markerVariants }\n\n/**\n * WHEN TO USE\n * - Timeline entries, activity-log rows, or an inline annotation between\n *   blocks of content — e.g. \"Deployed 2 minutes ago\", \"Build started\".\n * - `MarkerIcon` for a small leading glyph (e.g. a status dot) before the\n *   text — it's `aria-hidden`, so pair it with real text in\n *   `MarkerContent`, not an icon alone.\n *\n * NOT WHEN\n * - A categorical tag, or an operational-status label — use Badge (with a\n *   colored icon for status; see Badge's docs for the convention).\n * - A section heading.\n * - A list row with media and actions — use Item.\n *\n * KEY RULES\n * - Three variants: `default` (plain), `separator` (draws a horizontal\n *   rule on both sides of the content — a standalone divider-style\n *   annotation), `border` (a bottom border under the whole marker — for\n *   stacking timeline entries). Omit `variant` for `default`.\n * - `asChild` renders Marker as its child (e.g. an `<a>`) instead of a\n *   `div`.\n * - Links inside MarkerContent get underlined automatically.\n *\n * USAGE\n * <Marker>\n *   <MarkerContent>Deployed 2 minutes ago</MarkerContent>\n * </Marker>\n *\n * <Marker>\n *   <MarkerIcon><CircleDotIcon /></MarkerIcon>\n *   <MarkerContent>Build started</MarkerContent>\n * </Marker>\n *\n * <Marker variant=\"separator\">\n *   <MarkerContent>Today</MarkerContent>\n * </Marker>\n */\n"],"mappings":";;;;;;AAYA,IAAM,iBAAiB,IACrB,4MACA,EACE,UAAU,EACR,SAAS;CACP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAEA,SAAS,OAAO,EACd,WACA,UAAU,WACV,UAAU,OACV,GAAG,SAIA;CACH,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,eAAe;GAAE;GAAS;EAAU,CAAC,CAAC;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,wDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAuC;CAC5E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,kMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,72 @@
+/**
+ * Menubar — persistent desktop-style app menu bar (File / Edit / View).
+ *
+ * Built on the Radix Menubar primitive: supports submenus, checkbox items,
+ * radio groups, and shortcut hints.
+ */
+import * as React from "react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
+declare function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>): React.JSX.Element;
+declare function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>): React.JSX.Element;
+declare function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>): React.JSX.Element;
+declare function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>): React.JSX.Element;
+declare function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>): React.JSX.Element;
+declare function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>): React.JSX.Element;
+declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>): React.JSX.Element;
+declare function MenubarItem({ className, inset, variant, ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>): React.JSX.Element;
+declare function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>): React.JSX.Element;
+declare function MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>): React.JSX.Element;
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };
+/**
+ * WHEN TO USE
+ * - Desktop-style app chrome with several always-visible menus that share
+ *   hover-to-open behavior (opening one, then hovering the next, switches
+ *   without a click)
+ *
+ * NOT WHEN
+ * - A single action menu on one trigger — use DropdownMenu
+ * - A right-click context menu — use ContextMenu
+ * - Site/section navigation — use NavigationMenu
+ *
+ * KEY RULES
+ * - MenubarItem variant="destructive" tints text/focus red for delete-style actions
+ * - MenubarCheckboxItem and MenubarRadioItem behave like their DropdownMenu
+ *   counterparts — checked state is controlled by the caller
+ * - MenubarShortcut is a plain right-aligned hint, not a working keybinding —
+ *   wire the actual shortcut yourself
+ *
+ * USAGE
+ * <Menubar>
+ *   <MenubarMenu>
+ *     <MenubarTrigger>File</MenubarTrigger>
+ *     <MenubarContent>
+ *       <MenubarItem>New tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
+ *       <MenubarSeparator />
+ *       <MenubarSub>
+ *         <MenubarSubTrigger>Share</MenubarSubTrigger>
+ *         <MenubarSubContent>
+ *           <MenubarItem>Copy link</MenubarItem>
+ *         </MenubarSubContent>
+ *       </MenubarSub>
+ *     </MenubarContent>
+ *   </MenubarMenu>
+ * </Menubar>
+ */
+//# sourceMappingURL=menubar.d.ts.map

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

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

package/dist/components/ui/menubar.js

@@ -0,0 +1,174 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { getPortalContainer } from "../../lib/scope.js";
+import "react";
+import { Menubar as Menubar$1 } from "radix-ui";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/menubar.tsx
+function Menubar({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.Root, {
+		"data-slot": "menubar",
+		className: cn("flex h-8 items-center gap-0.5 rounded-lg border p-[3px]", className),
+		...props
+	});
+}
+function MenubarMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.Menu, {
+		"data-slot": "menubar-menu",
+		...props
+	});
+}
+function MenubarGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.Group, {
+		"data-slot": "menubar-group",
+		...props
+	});
+}
+function MenubarPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.Portal, {
+		"data-slot": "menubar-portal",
+		container: getPortalContainer(),
+		...props
+	});
+}
+function MenubarRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.RadioGroup, {
+		"data-slot": "menubar-radio-group",
+		...props
+	});
+}
+function MenubarTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.Trigger, {
+		"data-slot": "menubar-trigger",
+		className: cn("flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 aria-expanded:bg-muted", className),
+		...props
+	});
+}
+function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
+	return /* @__PURE__ */ jsx(MenubarPortal, { children: /* @__PURE__ */ jsx(Menubar$1.Content, {
+		"data-slot": "menubar-content",
+		align,
+		alignOffset,
+		sideOffset,
+		className: cn("z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+		...props
+	}) });
+}
+function MenubarItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.Item, {
+		"data-slot": "menubar-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		...props
+	});
+}
+function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar$1.CheckboxItem, {
+		"data-slot": "menubar-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function MenubarRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar$1.RadioItem, {
+		"data-slot": "menubar-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function MenubarLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.Label, {
+		"data-slot": "menubar-label",
+		"data-inset": inset,
+		className: cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className),
+		...props
+	});
+}
+function MenubarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.Separator, {
+		"data-slot": "menubar-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function MenubarShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menubar-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground", className),
+		...props
+	});
+}
+function MenubarSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.Sub, {
+		"data-slot": "menubar-sub",
+		...props
+	});
+}
+function MenubarSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar$1.SubTrigger, {
+		"data-slot": "menubar-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+	});
+}
+function MenubarSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1.SubContent, {
+		"data-slot": "menubar-sub-content",
+		className: cn("z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Desktop-style app chrome with several always-visible menus that share
+*   hover-to-open behavior (opening one, then hovering the next, switches
+*   without a click)
+*
+* NOT WHEN
+* - A single action menu on one trigger — use DropdownMenu
+* - A right-click context menu — use ContextMenu
+* - Site/section navigation — use NavigationMenu
+*
+* KEY RULES
+* - MenubarItem variant="destructive" tints text/focus red for delete-style actions
+* - MenubarCheckboxItem and MenubarRadioItem behave like their DropdownMenu
+*   counterparts — checked state is controlled by the caller
+* - MenubarShortcut is a plain right-aligned hint, not a working keybinding —
+*   wire the actual shortcut yourself
+*
+* USAGE
+* <Menubar>
+*   <MenubarMenu>
+*     <MenubarTrigger>File</MenubarTrigger>
+*     <MenubarContent>
+*       <MenubarItem>New tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
+*       <MenubarSeparator />
+*       <MenubarSub>
+*         <MenubarSubTrigger>Share</MenubarSubTrigger>
+*         <MenubarSubContent>
+*           <MenubarItem>Copy link</MenubarItem>
+*         </MenubarSubContent>
+*       </MenubarSub>
+*     </MenubarContent>
+*   </MenubarMenu>
+* </Menubar>
+*/
+//#endregion
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };
+
+//# sourceMappingURL=menubar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":[],"sources":["../../../src/components/ui/menubar.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Menubar — persistent desktop-style app menu bar (File / Edit / View).\n *\n * Built on the Radix Menubar primitive: supports submenus, checkbox items,\n * radio groups, and shortcut hints.\n */\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { getPortalContainer } from \"@/lib/scope\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-8 items-center gap-0.5 rounded-lg border p-[3px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return (\n    <MenubarPrimitive.Portal\n      data-slot=\"menubar-portal\"\n      container={getPortalContainer()}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 aria-expanded:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          // Exit triplet added alongside the entrance fix below — every\n        // sibling menu (DropdownMenu/ContextMenu SubContent) animates both\n        // ways; this one only ever had the entrance rule, dead or not.\n        \"z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-1.5 py-1 text-sm font-medium data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n\n/**\n * WHEN TO USE\n * - Desktop-style app chrome with several always-visible menus that share\n *   hover-to-open behavior (opening one, then hovering the next, switches\n *   without a click)\n *\n * NOT WHEN\n * - A single action menu on one trigger — use DropdownMenu\n * - A right-click context menu — use ContextMenu\n * - Site/section navigation — use NavigationMenu\n *\n * KEY RULES\n * - MenubarItem variant=\"destructive\" tints text/focus red for delete-style actions\n * - MenubarCheckboxItem and MenubarRadioItem behave like their DropdownMenu\n *   counterparts — checked state is controlled by the caller\n * - MenubarShortcut is a plain right-aligned hint, not a working keybinding —\n *   wire the actual shortcut yourself\n *\n * USAGE\n * <Menubar>\n *   <MenubarMenu>\n *     <MenubarTrigger>File</MenubarTrigger>\n *     <MenubarContent>\n *       <MenubarItem>New tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>\n *       <MenubarSeparator />\n *       <MenubarSub>\n *         <MenubarSubTrigger>Share</MenubarSubTrigger>\n *         <MenubarSubContent>\n *           <MenubarItem>Copy link</MenubarItem>\n *         </MenubarSubContent>\n *       </MenubarSub>\n *     </MenubarContent>\n *   </MenubarMenu>\n * </Menubar>\n */\n"],"mappings":"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"}

package/dist/components/ui/message-scroller.d.ts

@@ -0,0 +1,53 @@
+/**
+ * MessageScroller — auto-sticking scroll container for chat transcripts and log streams.
+ *
+ * Pins to the newest item by default and reveals a jump-to-latest
+ * MessageScrollerButton once the user scrolls away from it. Wraps the
+ * `@shadcn/react` message-scroller primitive. Render Message or Bubble
+ * items inside MessageScrollerItem; mark the item the viewport should pin
+ * to with `scrollAnchor` (typically the last item).
+ */
+import * as React from "react";
+import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+import { Button, type TextButtonSize } from "../../components/ui/button";
+declare function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>): React.JSX.Element;
+declare function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Root>): React.JSX.Element;
+declare function MessageScrollerViewport({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>): React.JSX.Element;
+declare function MessageScrollerContent({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Content>): React.JSX.Element;
+declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Item>): React.JSX.Element;
+declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Button> & Pick<React.ComponentProps<typeof Button>, "variant"> & {
+    size?: TextButtonSize;
+}): React.JSX.Element;
+export { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, };
+/**
+ * WHEN TO USE
+ * - Chat transcripts, live logs, or any list where new content should keep the newest item in view
+ * - Streaming or incrementally-appended content
+ *
+ * NOT WHEN
+ * - Static, non-growing lists — use ScrollArea
+ * - Feeds anchored to the top (e.g. paginated results) — this only pins to one end anchor
+ *
+ * KEY RULES
+ * - Requires MessageScrollerProvider as an ancestor — MessageScroller does nothing useful without it
+ * - Exactly one MessageScrollerItem should carry `scrollAnchor` (usually the last rendered item) — that's what the viewport pins to and what the jump button targets
+ * - MessageScrollerButton `direction`: "end" (default, jump to newest) or "start"
+ * - useMessageScroller / useMessageScrollerScrollable / useMessageScrollerVisibility expose scroll state for custom UI — reach for these before wiring a manual scroll listener
+ *
+ * USAGE
+ * <MessageScrollerProvider>
+ *   <MessageScroller className="h-80 rounded-xl border">
+ *     <MessageScrollerViewport>
+ *       <MessageScrollerContent>
+ *         {messages.map((m, i) => (
+ *           <MessageScrollerItem key={m.id} scrollAnchor={i === messages.length - 1}>
+ *             <Message align={m.align}>{m.body}</Message>
+ *           </MessageScrollerItem>
+ *         ))}
+ *       </MessageScrollerContent>
+ *     </MessageScrollerViewport>
+ *     <MessageScrollerButton direction="end" />
+ *   </MessageScroller>
+ * </MessageScrollerProvider>
+ */
+//# sourceMappingURL=message-scroller.d.ts.map

package/dist/components/ui/message-scroller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller.d.ts","sourceRoot":"","sources":["../../../src/components/ui/message-scroller.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,eAAe,IAAI,wBAAwB,EAC3C,kBAAkB,EAClB,4BAA4B,EAC5B,4BAA4B,EAC7B,MAAM,gCAAgC,CAAA;AAGvC,OAAO,EAAE,MAAM,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAGpE,iBAAS,uBAAuB,CAC9B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,QAAQ,CAAC,qBAGtE;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,IAAI,CAAC,qBAW5D;AAED,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,QAAQ,CAAC,qBAWhE;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,OAAO,CAAC,qBAQ/D;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,YAAoB,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,IAAI,CAAC,qBAY5D;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAiB,EACjB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAqB,EACrB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,MAAM,CAAC,GAC7D,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB,qBAoCF;AAED,OAAO,EACL,uBAAuB,EACvB,eAAe,EACf,uBAAuB,EACvB,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,4BAA4B,EAC5B,4BAA4B,GAC7B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG"}