@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/message-scroller.js

@@ -0,0 +1,95 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import "react";
+import { ArrowDownIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+//#region src/components/ui/message-scroller.tsx
+function MessageScrollerProvider(props) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Provider, { ...props });
+}
+function MessageScroller({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Root, {
+		"data-slot": "message-scroller",
+		className: cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className),
+		...props
+	});
+}
+function MessageScrollerViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Viewport, {
+		"data-slot": "message-scroller-viewport",
+		className: cn("size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent", className),
+		...props
+	});
+}
+function MessageScrollerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Content, {
+		"data-slot": "message-scroller-content",
+		className: cn("flex h-max min-h-full flex-col gap-6", className),
+		...props
+	});
+}
+function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Item, {
+		"data-slot": "message-scroller-item",
+		scrollAnchor,
+		className: cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
+		...props
+	});
+}
+function MessageScrollerButton({ direction = "end", className, children, render, variant = "secondary", size = "sm", ...props }) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Button, {
+		"data-slot": "message-scroller-button",
+		"data-direction": direction,
+		"data-variant": variant,
+		"data-size": size,
+		direction,
+		className: cn("absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground in-data-[slot=card-content]:bg-card in-data-[slot=dialog-content]:bg-popover in-data-[slot=popover-content]:bg-popover in-data-[slot=sheet-content]:bg-popover data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180", className),
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			variant,
+			size,
+			iconOnly: true,
+			"aria-label": direction === "end" ? "Scroll to end" : "Scroll to start"
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: direction === "end" ? "Scroll to end" : "Scroll to start"
+		})] })
+	});
+}
+/**
+* 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>
+*/
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };
+
+//# sourceMappingURL=message-scroller.js.map

package/dist/components/ui/message-scroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller.js","names":[],"sources":["../../../src/components/ui/message-scroller.tsx"],"sourcesContent":["/**\n * MessageScroller — auto-sticking scroll container for chat transcripts and log streams.\n *\n * Pins to the newest item by default and reveals a jump-to-latest\n * MessageScrollerButton once the user scrolls away from it. Wraps the\n * `@shadcn/react` message-scroller primitive. Render Message or Bubble\n * items inside MessageScrollerItem; mark the item the viewport should pin\n * to with `scrollAnchor` (typically the last item).\n */\n\nimport * as React from \"react\"\nimport {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from \"@shadcn/react/message-scroller\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, type TextButtonSize } from \"@/components/ui/button\"\nimport { ArrowDownIcon } from \"lucide-react\"\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>\n) {\n  return <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        \"group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      className={cn(\n        \"size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn(\"flex h-max min-h-full flex-col gap-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n  return (\n    <MessageScrollerPrimitive.Item\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        \"min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerButton({\n  direction = \"end\",\n  className,\n  children,\n  render,\n  variant = \"secondary\",\n  size = \"sm\",\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\"> & {\n    size?: TextButtonSize\n  }) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      data-variant={variant}\n      data-size={size}\n      direction={direction}\n      className={cn(\n        \"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground in-data-[slot=card-content]:bg-card in-data-[slot=dialog-content]:bg-popover in-data-[slot=popover-content]:bg-popover in-data-[slot=sheet-content]:bg-popover data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180\",\n        className\n      )}\n      render={\n        render ?? (\n          <Button\n            variant={variant}\n            size={size}\n            iconOnly\n            aria-label={\n              direction === \"end\" ? \"Scroll to end\" : \"Scroll to start\"\n            }\n          />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <ArrowDownIcon />\n          <span className=\"sr-only\">\n            {direction === \"end\" ? \"Scroll to end\" : \"Scroll to start\"}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScrollerProvider,\n  MessageScroller,\n  MessageScrollerViewport,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerButton,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n\n/**\n * WHEN TO USE\n * - Chat transcripts, live logs, or any list where new content should keep the newest item in view\n * - Streaming or incrementally-appended content\n *\n * NOT WHEN\n * - Static, non-growing lists — use ScrollArea\n * - Feeds anchored to the top (e.g. paginated results) — this only pins to one end anchor\n *\n * KEY RULES\n * - Requires MessageScrollerProvider as an ancestor — MessageScroller does nothing useful without it\n * - Exactly one MessageScrollerItem should carry `scrollAnchor` (usually the last rendered item) — that's what the viewport pins to and what the jump button targets\n * - MessageScrollerButton `direction`: \"end\" (default, jump to newest) or \"start\"\n * - useMessageScroller / useMessageScrollerScrollable / useMessageScrollerVisibility expose scroll state for custom UI — reach for these before wiring a manual scroll listener\n *\n * USAGE\n * <MessageScrollerProvider>\n *   <MessageScroller className=\"h-80 rounded-xl border\">\n *     <MessageScrollerViewport>\n *       <MessageScrollerContent>\n *         {messages.map((m, i) => (\n *           <MessageScrollerItem key={m.id} scrollAnchor={i === messages.length - 1}>\n *             <Message align={m.align}>{m.body}</Message>\n *           </MessageScrollerItem>\n *         ))}\n *       </MessageScrollerContent>\n *     </MessageScrollerViewport>\n *     <MessageScrollerButton direction=\"end\" />\n *   </MessageScroller>\n * </MessageScrollerProvider>\n */\n"],"mappings":";;;;;;;AAsBA,SAAS,wBACP,OACA;CACA,OAAO,oBAAC,kBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;AACxD;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,oBAAC,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAAC,kBAAyB,UAA1B;EACE,aAAU;EACV,WAAW,GACT,mOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAAC,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SAC0D;CAC7D,OACE,oBAAC,kBAAyB,MAA1B;EACE,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,UAAU,aACV,OAAO,MACP,GAAG,SAIA;CACH,OACE,oBAAC,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EAChB,gBAAc;EACd,aAAW;EACA;EACX,WAAW,GACT,w4BACA,SACF;EACA,QACE,UACE,oBAAC,QAAD;GACW;GACH;GACN,UAAA;GACA,cACE,cAAc,QAAQ,kBAAkB;EAE3C,CAAA;EAGL,GAAI;EAEH,UAAA,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

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

@@ -0,0 +1,63 @@
+/**
+ * Message — structured chat message with avatar, author, and timestamp slots.
+ *
+ * MessageAvatar, MessageHeader (author), MessageContent (body), and
+ * MessageFooter (timestamp) compose around a shared `align` value.
+ * MessageGroup stacks a thread. MessageContent also self-aligns any direct
+ * data-slot child when `align="end"`, so a Bubble can be dropped inside it to
+ * get avatar/header/footer chrome around a colored bubble surface. For long
+ * or streaming threads that must stay pinned to the newest message, wrap the
+ * list in MessageScroller instead of a plain scrolling div.
+ */
+import * as React from "react";
+declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function Message({ className, align, ...props }: React.ComponentProps<"div"> & {
+    align?: "start" | "end";
+}): React.JSX.Element;
+declare function MessageAvatar({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function MessageContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function MessageHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function MessageFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { MessageGroup, Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader, };
+/**
+ * WHEN TO USE
+ * - Chat threads where each turn needs an avatar, author name, and/or timestamp
+ * - Multi-participant conversations where "who said this" must be visible
+ *
+ * NOT WHEN
+ * - Bare speech bubbles with no metadata — use Bubble
+ * - Long scrolling threads that must auto-stick to the newest message — wrap in MessageScroller rather than a plain overflow-y-auto container
+ *
+ * KEY RULES
+ * - align: "start" (default) or "end" — reverses the avatar/content order via flex-row-reverse
+ * - Every slot is optional: omit MessageAvatar/MessageHeader/MessageFooter freely per message
+ * - MessageAvatar is `self-start` — it aligns with the first content line (the bubble/text), not the last (a MessageFooter timestamp), regardless of gap or footer text length
+ * - MessageGroup only provides gap-2 stacking — no scrolling or auto-anchoring of its own
+ * - MessageAvatar is for group threads specifically — once there are 3+ possible senders,
+ *   it's what says who's speaking. A 1:1 conversation doesn't need it: the container
+ *   already tells the user who the other party is, and `align` alone already distinguishes
+ *   your own messages from theirs — omit MessageAvatar (and MessageHeader) entirely there
+ * - Per-message hover actions (e.g. a "Copy"/feedback row under an AI reply) are a plain
+ *   composition, not a dedicated slot: give the action row `opacity-0
+ *   group-hover/message:opacity-100 group-focus-within/message:opacity-100` — Message's own
+ *   root already carries `group/message`, so no extra wrapper is needed
+ *
+ * USAGE
+ * <MessageGroup>
+ *   <Message align="start">
+ *     <MessageAvatar><Avatar><AvatarFallback>AL</AvatarFallback></Avatar></MessageAvatar>
+ *     <MessageContent>
+ *       <MessageHeader>Ada Lovelace</MessageHeader>
+ *       Where should brand overrides live?
+ *       <MessageFooter>9:41 AM</MessageFooter>
+ *     </MessageContent>
+ *   </Message>
+ *   <Message align="end">
+ *     <MessageContent>
+ *       <MessageHeader>You</MessageHeader>
+ *       In theme.css — it is the single source of truth for the theme.
+ *     </MessageContent>
+ *   </Message>
+ * </MessageGroup>
+ */
+//# sourceMappingURL=message.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/ui/message.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,KAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,qBAY3D;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAwB1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW3E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,OAAO,EACL,YAAY,EACZ,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EACb,aAAa,GACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG"}

package/dist/components/ui/message.js

@@ -0,0 +1,92 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/message.tsx
+function MessageGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-group",
+		className: cn("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+}
+function Message({ className, align = "start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message",
+		"data-align": align,
+		className: cn("group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse", className),
+		...props
+	});
+}
+function MessageAvatar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-avatar",
+		className: cn("flex w-fit shrink-0 items-center justify-center self-start overflow-hidden rounded-full", className),
+		...props
+	});
+}
+function MessageContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-content",
+		className: cn("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", className),
+		...props
+	});
+}
+function MessageHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-header",
+		className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[emphasis=ghost]/message:px-0", className),
+		...props
+	});
+}
+function MessageFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-footer",
+		className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[emphasis=ghost]/message:px-0 group-data-[align=end]/message:justify-end", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Chat threads where each turn needs an avatar, author name, and/or timestamp
+* - Multi-participant conversations where "who said this" must be visible
+*
+* NOT WHEN
+* - Bare speech bubbles with no metadata — use Bubble
+* - Long scrolling threads that must auto-stick to the newest message — wrap in MessageScroller rather than a plain overflow-y-auto container
+*
+* KEY RULES
+* - align: "start" (default) or "end" — reverses the avatar/content order via flex-row-reverse
+* - Every slot is optional: omit MessageAvatar/MessageHeader/MessageFooter freely per message
+* - MessageAvatar is `self-start` — it aligns with the first content line (the bubble/text), not the last (a MessageFooter timestamp), regardless of gap or footer text length
+* - MessageGroup only provides gap-2 stacking — no scrolling or auto-anchoring of its own
+* - MessageAvatar is for group threads specifically — once there are 3+ possible senders,
+*   it's what says who's speaking. A 1:1 conversation doesn't need it: the container
+*   already tells the user who the other party is, and `align` alone already distinguishes
+*   your own messages from theirs — omit MessageAvatar (and MessageHeader) entirely there
+* - Per-message hover actions (e.g. a "Copy"/feedback row under an AI reply) are a plain
+*   composition, not a dedicated slot: give the action row `opacity-0
+*   group-hover/message:opacity-100 group-focus-within/message:opacity-100` — Message's own
+*   root already carries `group/message`, so no extra wrapper is needed
+*
+* USAGE
+* <MessageGroup>
+*   <Message align="start">
+*     <MessageAvatar><Avatar><AvatarFallback>AL</AvatarFallback></Avatar></MessageAvatar>
+*     <MessageContent>
+*       <MessageHeader>Ada Lovelace</MessageHeader>
+*       Where should brand overrides live?
+*       <MessageFooter>9:41 AM</MessageFooter>
+*     </MessageContent>
+*   </Message>
+*   <Message align="end">
+*     <MessageContent>
+*       <MessageHeader>You</MessageHeader>
+*       In theme.css — it is the single source of truth for the theme.
+*     </MessageContent>
+*   </Message>
+* </MessageGroup>
+*/
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+
+//# sourceMappingURL=message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","names":[],"sources":["../../../src/components/ui/message.tsx"],"sourcesContent":["/**\n * Message — structured chat message with avatar, author, and timestamp slots.\n *\n * MessageAvatar, MessageHeader (author), MessageContent (body), and\n * MessageFooter (timestamp) compose around a shared `align` value.\n * MessageGroup stacks a thread. MessageContent also self-aligns any direct\n * data-slot child when `align=\"end\"`, so a Bubble can be dropped inside it to\n * get avatar/header/footer chrome around a colored bubble surface. For long\n * or streaming threads that must stay pinned to the newest message, wrap the\n * list in MessageScroller instead of a plain scrolling div.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction MessageGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-group\"\n      className={cn(\"flex min-w-0 flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction Message({\n  className,\n  align = \"start\",\n  ...props\n}: React.ComponentProps<\"div\"> & { align?: \"start\" | \"end\" }) {\n  return (\n    <div\n      data-slot=\"message\"\n      data-align={align}\n      className={cn(\n        \"group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageAvatar({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-avatar\"\n      // self-start, not self-end + a fixed -translate-y-8 correction — that\n      // bottom-align-then-shift-up-by-a-magic-number approach only lined up\n      // with the default MessageContent gap it was tuned against; tighten\n      // that gap (e.g. a P2P chat's bubble-to-timestamp spacing) and the\n      // fixed offset overshoots, pushing the avatar above the bubble's own\n      // top. True top-alignment needs no calibration at all — it's correct\n      // for any gap, any footer text length, any bubble height.\n      // No min-w-8/bg-muted of its own — those were sized for the default\n      // 32px Avatar specifically; a smaller Avatar (size=\"sm\", 24px) left\n      // a visible gray halo, the wrapper's own fill and forced minimum\n      // width showing past the smaller circle inside it. The Avatar\n      // already carries its own size and fallback background — this is\n      // purely a layout/alignment container, not a second surface.\n      className={cn(\n        \"flex w-fit shrink-0 items-center justify-center self-start overflow-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-content\"\n      className={cn(\n        \"flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-header\"\n      className={cn(\n        \"flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[emphasis=ghost]/message:px-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\n        \"flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[emphasis=ghost]/message:px-0 group-data-[align=end]/message:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  MessageGroup,\n  Message,\n  MessageAvatar,\n  MessageContent,\n  MessageFooter,\n  MessageHeader,\n}\n\n/**\n * WHEN TO USE\n * - Chat threads where each turn needs an avatar, author name, and/or timestamp\n * - Multi-participant conversations where \"who said this\" must be visible\n *\n * NOT WHEN\n * - Bare speech bubbles with no metadata — use Bubble\n * - Long scrolling threads that must auto-stick to the newest message — wrap in MessageScroller rather than a plain overflow-y-auto container\n *\n * KEY RULES\n * - align: \"start\" (default) or \"end\" — reverses the avatar/content order via flex-row-reverse\n * - Every slot is optional: omit MessageAvatar/MessageHeader/MessageFooter freely per message\n * - MessageAvatar is `self-start` — it aligns with the first content line (the bubble/text), not the last (a MessageFooter timestamp), regardless of gap or footer text length\n * - MessageGroup only provides gap-2 stacking — no scrolling or auto-anchoring of its own\n * - MessageAvatar is for group threads specifically — once there are 3+ possible senders,\n *   it's what says who's speaking. A 1:1 conversation doesn't need it: the container\n *   already tells the user who the other party is, and `align` alone already distinguishes\n *   your own messages from theirs — omit MessageAvatar (and MessageHeader) entirely there\n * - Per-message hover actions (e.g. a \"Copy\"/feedback row under an AI reply) are a plain\n *   composition, not a dedicated slot: give the action row `opacity-0\n *   group-hover/message:opacity-100 group-focus-within/message:opacity-100` — Message's own\n *   root already carries `group/message`, so no extra wrapper is needed\n *\n * USAGE\n * <MessageGroup>\n *   <Message align=\"start\">\n *     <MessageAvatar><Avatar><AvatarFallback>AL</AvatarFallback></Avatar></MessageAvatar>\n *     <MessageContent>\n *       <MessageHeader>Ada Lovelace</MessageHeader>\n *       Where should brand overrides live?\n *       <MessageFooter>9:41 AM</MessageFooter>\n *     </MessageContent>\n *   </Message>\n *   <Message align=\"end\">\n *     <MessageContent>\n *       <MessageHeader>You</MessageHeader>\n *       In theme.css — it is the single source of truth for the theme.\n *     </MessageContent>\n *   </Message>\n * </MessageGroup>\n */\n"],"mappings":";;;;AAgBA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,QAAQ,EACf,WACA,QAAQ,SACR,GAAG,SACyD;CAC5D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EAcV,WAAW,GACT,2FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;CAC5E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,+KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/meta-list.d.ts

@@ -0,0 +1,55 @@
+/**
+ * MetaList — a short horizontal list of secondary/meta information, items
+ * separated by a dot.
+ *
+ * `MetaList` is the flex row;
+ * `MetaListItem` is one entry, auto-separated from the previous item by a
+ * `·` unless it's first. Plain text/nodes instead of `MetaListItem` render
+ * with no separator, which is how a consumer opts out of the dot.
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const metaListVariants: (props?: ({
+    size?: "sm" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function MetaList({ className, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof metaListVariants>): React.JSX.Element;
+declare function MetaListItem({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function MetaListIcon({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { MetaList, MetaListItem, MetaListIcon, metaListVariants };
+/**
+ * WHEN TO USE
+ * - Secondary information below a PageHeaderTitle or inside a table cell —
+ *   e.g. "3 min read · 5 comments · Draft".
+ *
+ * NOT WHEN
+ * - Primary content or anything interactive — MetaList is a plain read-only
+ *   row, not a set of links or actions.
+ * - A single piece of metadata with no list — just render the text.
+ *
+ * KEY RULES
+ * - size: default | sm (default "default") — regular is text-sm, sm is text-xs; both inherit
+ *   text-muted-foreground.
+ * - Every MetaListItem after the first renders a `·` separator automatically — there's no
+ *   separator prop. Mixing in plain children (not wrapped in MetaListItem) skips the dot for
+ *   that entry.
+ * - MetaListIcon is an optional leading glyph inside an item, aria-hidden — pair it with real
+ *   text in the item, not on its own.
+ * - No padding is baked in — this is a plain inline row; add spacing via the parent (e.g.
+ *   PageHeaderContent's own gap) rather than on MetaList itself.
+ *
+ * USAGE
+ * <MetaList>
+ *   <MetaListItem>3 min read</MetaListItem>
+ *   <MetaListItem>5 comments</MetaListItem>
+ *   <MetaListItem>Draft</MetaListItem>
+ * </MetaList>
+ *
+ * <MetaList size="sm">
+ *   <MetaListItem>
+ *     <MetaListIcon><ClockIcon /></MetaListIcon>
+ *     Updated 2h ago
+ *   </MetaListItem>
+ *   <MetaListItem>James Wilson</MetaListItem>
+ * </MetaList>
+ */
+//# sourceMappingURL=meta-list.d.ts.map

package/dist/components/ui/meta-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta-list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/meta-list.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,gBAAgB;;8EAarB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,qBASrE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAY1E;AAED,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG"}

package/dist/components/ui/meta-list.js

@@ -0,0 +1,75 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/meta-list.tsx
+var metaListVariants = cva("flex flex-wrap items-center text-muted-foreground", {
+	variants: { size: {
+		default: "text-sm",
+		sm: "text-xs"
+	} },
+	defaultVariants: { size: "default" }
+});
+function MetaList({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "meta-list",
+		"data-size": size,
+		className: cn(metaListVariants({ size }), className),
+		...props
+	});
+}
+function MetaListItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "meta-list-item",
+		className: cn("inline-flex items-center gap-1 [&:not(:first-child)]:before:mx-1.5 [&:not(:first-child)]:before:content-['•']", className),
+		...props
+	});
+}
+function MetaListIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "meta-list-icon",
+		"aria-hidden": "true",
+		className: cn("size-3.5 shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Secondary information below a PageHeaderTitle or inside a table cell —
+*   e.g. "3 min read · 5 comments · Draft".
+*
+* NOT WHEN
+* - Primary content or anything interactive — MetaList is a plain read-only
+*   row, not a set of links or actions.
+* - A single piece of metadata with no list — just render the text.
+*
+* KEY RULES
+* - size: default | sm (default "default") — regular is text-sm, sm is text-xs; both inherit
+*   text-muted-foreground.
+* - Every MetaListItem after the first renders a `·` separator automatically — there's no
+*   separator prop. Mixing in plain children (not wrapped in MetaListItem) skips the dot for
+*   that entry.
+* - MetaListIcon is an optional leading glyph inside an item, aria-hidden — pair it with real
+*   text in the item, not on its own.
+* - No padding is baked in — this is a plain inline row; add spacing via the parent (e.g.
+*   PageHeaderContent's own gap) rather than on MetaList itself.
+*
+* USAGE
+* <MetaList>
+*   <MetaListItem>3 min read</MetaListItem>
+*   <MetaListItem>5 comments</MetaListItem>
+*   <MetaListItem>Draft</MetaListItem>
+* </MetaList>
+*
+* <MetaList size="sm">
+*   <MetaListItem>
+*     <MetaListIcon><ClockIcon /></MetaListIcon>
+*     Updated 2h ago
+*   </MetaListItem>
+*   <MetaListItem>James Wilson</MetaListItem>
+* </MetaList>
+*/
+//#endregion
+export { MetaList, MetaListIcon, MetaListItem, metaListVariants };
+
+//# sourceMappingURL=meta-list.js.map

package/dist/components/ui/meta-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta-list.js","names":[],"sources":["../../../src/components/ui/meta-list.tsx"],"sourcesContent":["/**\n * MetaList — a short horizontal list of secondary/meta information, items\n * separated by a dot.\n *\n * `MetaList` is the flex row;\n * `MetaListItem` is one entry, auto-separated from the previous item by a\n * `·` unless it's first. Plain text/nodes instead of `MetaListItem` render\n * with no separator, which is how a consumer opts out of the dot.\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst metaListVariants = cva(\n  \"flex flex-wrap items-center text-muted-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\nfunction MetaList({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof metaListVariants>) {\n  return (\n    <div\n      data-slot=\"meta-list\"\n      data-size={size}\n      className={cn(metaListVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction MetaListItem({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"meta-list-item\"\n      className={cn(\n        \"inline-flex items-center gap-1 [&:not(:first-child)]:before:mx-1.5 [&:not(:first-child)]:before:content-['•']\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MetaListIcon({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"meta-list-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-3.5 shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { MetaList, MetaListItem, MetaListIcon, metaListVariants }\n\n/**\n * WHEN TO USE\n * - Secondary information below a PageHeaderTitle or inside a table cell —\n *   e.g. \"3 min read · 5 comments · Draft\".\n *\n * NOT WHEN\n * - Primary content or anything interactive — MetaList is a plain read-only\n *   row, not a set of links or actions.\n * - A single piece of metadata with no list — just render the text.\n *\n * KEY RULES\n * - size: default | sm (default \"default\") — regular is text-sm, sm is text-xs; both inherit\n *   text-muted-foreground.\n * - Every MetaListItem after the first renders a `·` separator automatically — there's no\n *   separator prop. Mixing in plain children (not wrapped in MetaListItem) skips the dot for\n *   that entry.\n * - MetaListIcon is an optional leading glyph inside an item, aria-hidden — pair it with real\n *   text in the item, not on its own.\n * - No padding is baked in — this is a plain inline row; add spacing via the parent (e.g.\n *   PageHeaderContent's own gap) rather than on MetaList itself.\n *\n * USAGE\n * <MetaList>\n *   <MetaListItem>3 min read</MetaListItem>\n *   <MetaListItem>5 comments</MetaListItem>\n *   <MetaListItem>Draft</MetaListItem>\n * </MetaList>\n *\n * <MetaList size=\"sm\">\n *   <MetaListItem>\n *     <MetaListIcon><ClockIcon /></MetaListIcon>\n *     Updated 2h ago\n *   </MetaListItem>\n *   <MetaListItem>James Wilson</MetaListItem>\n * </MetaList>\n */\n"],"mappings":";;;;;AAeA,IAAM,mBAAmB,IACvB,qDACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAEA,SAAS,SAAS,EAChB,WACA,OAAO,WACP,GAAG,SACmE;CACtE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,iBAAiB,EAAE,KAAK,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAuC;CAC3E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,iHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAuC;CAC3E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,4DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/native-select.d.ts

@@ -0,0 +1,51 @@
+/**
+ * NativeSelect — styled wrapper around the browser's native <select>.
+ *
+ * A plain <select> with a chevron icon overlay, not a Radix primitive.
+ * Sizes ("sm" | "default") are applied via a `data-size`
+ * attribute on both the wrapper and the <select>.
+ */
+import * as React from "react";
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+    size?: "sm" | "default";
+};
+declare function NativeSelect({ className, size, ...props }: NativeSelectProps): React.JSX.Element;
+declare function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">): React.JSX.Element;
+declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">): React.JSX.Element;
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
+/**
+ * WHEN TO USE
+ * - Simple option lists in dense forms where native OS picker behavior and zero extra JS are preferable.
+ * - Mobile-heavy flows — the OS supplies its own picker UI, which tends to be more reliable than a custom popover.
+ *
+ * NOT WHEN
+ * - Custom item rendering, icons, or grouped visual styling is required — use Select instead.
+ * - The list is long enough to need type-to-filter — use Combobox instead.
+ *
+ * KEY RULES
+ * - `size` is "sm" | "default" (default "default") — no other sizes exist.
+ * - Compose options with NativeSelectOption / NativeSelectOptGroup only — content is plain text, no custom item rendering.
+ * - Disabled state is native (`disabled` on the underlying <select>); the wrapper dims via has-[select:disabled]:opacity-50.
+ *
+ * USAGE
+ * <NativeSelect defaultValue="cardamom">
+ *   <NativeSelectOption value="turmeric">Turmeric</NativeSelectOption>
+ *   <NativeSelectOption value="cardamom">Cardamom</NativeSelectOption>
+ * </NativeSelect>
+ *
+ * // Grouped
+ * <NativeSelect defaultValue="cumin">
+ *   <NativeSelectOptGroup label="Whole">
+ *     <NativeSelectOption value="cardamom">Cardamom pod</NativeSelectOption>
+ *   </NativeSelectOptGroup>
+ *   <NativeSelectOptGroup label="Ground">
+ *     <NativeSelectOption value="cumin">Cumin</NativeSelectOption>
+ *   </NativeSelectOptGroup>
+ * </NativeSelect>
+ *
+ * // Small size
+ * <NativeSelect size="sm" defaultValue="turmeric">
+ *   <NativeSelectOption value="turmeric">Turmeric</NativeSelectOption>
+ * </NativeSelect>
+ */
+//# sourceMappingURL=native-select.d.ts.map

package/dist/components/ui/native-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/native-select.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,KAAK,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,CAAA;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAuBnB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,qBAQhC;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAQlC;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAA;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG"}

package/dist/components/ui/native-select.js

@@ -0,0 +1,75 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/native-select.tsx
+function NativeSelect({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
+		"data-slot": "native-select-wrapper",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("select", {
+			"data-slot": "native-select",
+			"data-size": size,
+			className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md,0.375rem),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+			...props
+		}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+			"aria-hidden": "true",
+			"data-slot": "native-select-icon"
+		})]
+	});
+}
+function NativeSelectOption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("option", {
+		"data-slot": "native-select-option",
+		className: cn("bg-[Canvas] text-[CanvasText]", className),
+		...props
+	});
+}
+function NativeSelectOptGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("optgroup", {
+		"data-slot": "native-select-optgroup",
+		className: cn("bg-[Canvas] text-[CanvasText]", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Simple option lists in dense forms where native OS picker behavior and zero extra JS are preferable.
+* - Mobile-heavy flows — the OS supplies its own picker UI, which tends to be more reliable than a custom popover.
+*
+* NOT WHEN
+* - Custom item rendering, icons, or grouped visual styling is required — use Select instead.
+* - The list is long enough to need type-to-filter — use Combobox instead.
+*
+* KEY RULES
+* - `size` is "sm" | "default" (default "default") — no other sizes exist.
+* - Compose options with NativeSelectOption / NativeSelectOptGroup only — content is plain text, no custom item rendering.
+* - Disabled state is native (`disabled` on the underlying <select>); the wrapper dims via has-[select:disabled]:opacity-50.
+*
+* USAGE
+* <NativeSelect defaultValue="cardamom">
+*   <NativeSelectOption value="turmeric">Turmeric</NativeSelectOption>
+*   <NativeSelectOption value="cardamom">Cardamom</NativeSelectOption>
+* </NativeSelect>
+*
+* // Grouped
+* <NativeSelect defaultValue="cumin">
+*   <NativeSelectOptGroup label="Whole">
+*     <NativeSelectOption value="cardamom">Cardamom pod</NativeSelectOption>
+*   </NativeSelectOptGroup>
+*   <NativeSelectOptGroup label="Ground">
+*     <NativeSelectOption value="cumin">Cumin</NativeSelectOption>
+*   </NativeSelectOptGroup>
+* </NativeSelect>
+*
+* // Small size
+* <NativeSelect size="sm" defaultValue="turmeric">
+*   <NativeSelectOption value="turmeric">Turmeric</NativeSelectOption>
+* </NativeSelect>
+*/
+//#endregion
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
+
+//# sourceMappingURL=native-select.js.map

package/dist/components/ui/native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.js","names":[],"sources":["../../../src/components/ui/native-select.tsx"],"sourcesContent":["/**\n * NativeSelect — styled wrapper around the browser's native <select>.\n *\n * A plain <select> with a chevron icon overlay, not a Radix primitive.\n * Sizes (\"sm\" | \"default\") are applied via a `data-size`\n * attribute on both the wrapper and the <select>.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md,0.375rem),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\n        {...props}\n      />\n      <ChevronDownIcon\n        className=\"pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({\n  className,\n  ...props\n}: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-slot=\"native-select-option\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n\n/**\n * WHEN TO USE\n * - Simple option lists in dense forms where native OS picker behavior and zero extra JS are preferable.\n * - Mobile-heavy flows — the OS supplies its own picker UI, which tends to be more reliable than a custom popover.\n *\n * NOT WHEN\n * - Custom item rendering, icons, or grouped visual styling is required — use Select instead.\n * - The list is long enough to need type-to-filter — use Combobox instead.\n *\n * KEY RULES\n * - `size` is \"sm\" | \"default\" (default \"default\") — no other sizes exist.\n * - Compose options with NativeSelectOption / NativeSelectOptGroup only — content is plain text, no custom item rendering.\n * - Disabled state is native (`disabled` on the underlying <select>); the wrapper dims via has-[select:disabled]:opacity-50.\n *\n * USAGE\n * <NativeSelect defaultValue=\"cardamom\">\n *   <NativeSelectOption value=\"turmeric\">Turmeric</NativeSelectOption>\n *   <NativeSelectOption value=\"cardamom\">Cardamom</NativeSelectOption>\n * </NativeSelect>\n *\n * // Grouped\n * <NativeSelect defaultValue=\"cumin\">\n *   <NativeSelectOptGroup label=\"Whole\">\n *     <NativeSelectOption value=\"cardamom\">Cardamom pod</NativeSelectOption>\n *   </NativeSelectOptGroup>\n *   <NativeSelectOptGroup label=\"Ground\">\n *     <NativeSelectOption value=\"cumin\">Cumin</NativeSelectOption>\n *   </NativeSelectOptGroup>\n * </NativeSelect>\n *\n * // Small size\n * <NativeSelect size=\"sm\" defaultValue=\"turmeric\">\n *   <NativeSelectOption value=\"turmeric\">Turmeric</NativeSelectOption>\n * </NativeSelect>\n */\n"],"mappings":";;;;;AAiBA,SAAS,aAAa,EACpB,WACA,OAAO,WACP,GAAG,SACiB;CACpB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,uEACA,SACF;EACA,aAAU;EACV,aAAW;EANb,UAAA,CAQE,oBAAC,UAAD;GACE,aAAU;GACV,aAAW;GACX,WAAU;GACV,GAAI;EACL,CAAA,GACD,oBAAC,iBAAD;GACE,WAAU;GACV,eAAY;GACZ,aAAU;EACX,CAAA,CACE;;AAET;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SAC8B;CACjC,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,qBAAqB,EAC5B,WACA,GAAG,SACgC;CACnC,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}