@epicbagel/saas-kit 1.30.0 → 1.31.0

package/dist/primitives/chat.cjs

@@ -458,6 +458,7 @@ function ChatInput({
   compactOnBlur = false,
   header,
   helperText,
+  tools,
   privacyNote
 }) {
   const internalRef = _react.useRef.call(void 0, null);
@@ -608,6 +609,7 @@ function ChatInput({
                           addFilesLabel
                         ] }) })
                       ] }),
+                      tools ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "chat-input-tools", className: "flex shrink-0 items-center gap-1", children: tools }) : null,
                       helperText ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         "span",
                         {
@@ -1048,6 +1050,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   composerAppearance = "default",
   mobileCompactComposer = false,
   composerHelperText,
+  composerTools,
   composerPrivacyNote,
   emptyFileDropzone = false,
   emptyFileDropzoneLabel = "Drop files here, or choose them",
@@ -1262,6 +1265,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                       uploadingLabel,
                       appearance: composerAppearance,
                       helperText: composerHelperText,
+                      tools: composerTools,
                       privacyNote: composerPrivacyNote,
                       className: workspace ? "rounded-3xl shadow-sm" : void 0
                     }
@@ -1380,6 +1384,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                   appearance: composerAppearance,
                   compactOnBlur: compactComposer,
                   helperText: composerHelperText,
+                  tools: composerTools,
                   privacyNote: composerPrivacyNote,
                   className: workspace ? "mx-auto max-w-3xl rounded-3xl shadow-sm" : void 0
                 }

package/dist/primitives/chat.d.cts

@@ -240,6 +240,12 @@ interface ChatInputProps {
     header?: ReactNode;
     /** Quiet contextual copy between the composer controls. */
     helperText?: ReactNode;
+    /**
+     * Controls for the message, in the composer's control row after the `+`
+     * menu: a setting the next send uses, such as an `OptionPicker`. Each
+     * control keeps a 44px touch target; they stay in the folded composer too.
+     */
+    tools?: ReactNode;
     /** Privacy or visibility reassurance rendered below the composer. */
     privacyNote?: ReactNode;
 }
@@ -260,7 +266,7 @@ interface ChatInputProps {
  * `<Chat>` instead of composing `<ChatInput>` directly if you want
  * device-aware default modes.
  */
-declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, header, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, header, helperText, tools, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 /** A next step offered in the empty state, under the composer (`emptyActions`). */
 interface ChatEmptyAction {
     /** Stable key. */
@@ -423,6 +429,12 @@ interface ChatProps {
     mobileCompactComposer?: boolean;
     /** Quiet contextual copy inside the composer action row. */
     composerHelperText?: ReactNode;
+    /**
+     * Controls in the composer's control row, after the `+` menu, on the new
+     * conversation's composer and the conversation's alike: a setting the next
+     * message uses, such as an `OptionPicker`.
+     */
+    composerTools?: ReactNode;
     /** Privacy or visibility reassurance below the composer. */
     composerPrivacyNote?: ReactNode;
     /** Show a prominent file drop target before the empty-state composer. */

package/dist/primitives/chat.d.ts

@@ -240,6 +240,12 @@ interface ChatInputProps {
     header?: ReactNode;
     /** Quiet contextual copy between the composer controls. */
     helperText?: ReactNode;
+    /**
+     * Controls for the message, in the composer's control row after the `+`
+     * menu: a setting the next send uses, such as an `OptionPicker`. Each
+     * control keeps a 44px touch target; they stay in the folded composer too.
+     */
+    tools?: ReactNode;
     /** Privacy or visibility reassurance rendered below the composer. */
     privacyNote?: ReactNode;
 }
@@ -260,7 +266,7 @@ interface ChatInputProps {
  * `<Chat>` instead of composing `<ChatInput>` directly if you want
  * device-aware default modes.
  */
-declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, header, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, header, helperText, tools, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 /** A next step offered in the empty state, under the composer (`emptyActions`). */
 interface ChatEmptyAction {
     /** Stable key. */
@@ -423,6 +429,12 @@ interface ChatProps {
     mobileCompactComposer?: boolean;
     /** Quiet contextual copy inside the composer action row. */
     composerHelperText?: ReactNode;
+    /**
+     * Controls in the composer's control row, after the `+` menu, on the new
+     * conversation's composer and the conversation's alike: a setting the next
+     * message uses, such as an `OptionPicker`.
+     */
+    composerTools?: ReactNode;
     /** Privacy or visibility reassurance below the composer. */
     composerPrivacyNote?: ReactNode;
     /** Show a prominent file drop target before the empty-state composer. */

package/dist/primitives/chat.js

@@ -458,6 +458,7 @@ function ChatInput({
   compactOnBlur = false,
   header,
   helperText,
+  tools,
   privacyNote
 }) {
   const internalRef = useRef(null);
@@ -608,6 +609,7 @@ function ChatInput({
                           addFilesLabel
                         ] }) })
                       ] }),
+                      tools ? /* @__PURE__ */ jsx("div", { "data-slot": "chat-input-tools", className: "flex shrink-0 items-center gap-1", children: tools }) : null,
                       helperText ? /* @__PURE__ */ jsx(
                         "span",
                         {
@@ -1048,6 +1050,7 @@ var Chat = forwardRef(function Chat2({
   composerAppearance = "default",
   mobileCompactComposer = false,
   composerHelperText,
+  composerTools,
   composerPrivacyNote,
   emptyFileDropzone = false,
   emptyFileDropzoneLabel = "Drop files here, or choose them",
@@ -1262,6 +1265,7 @@ var Chat = forwardRef(function Chat2({
                       uploadingLabel,
                       appearance: composerAppearance,
                       helperText: composerHelperText,
+                      tools: composerTools,
                       privacyNote: composerPrivacyNote,
                       className: workspace ? "rounded-3xl shadow-sm" : void 0
                     }
@@ -1380,6 +1384,7 @@ var Chat = forwardRef(function Chat2({
                   appearance: composerAppearance,
                   compactOnBlur: compactComposer,
                   helperText: composerHelperText,
+                  tools: composerTools,
                   privacyNote: composerPrivacyNote,
                   className: workspace ? "mx-auto max-w-3xl rounded-3xl shadow-sm" : void 0
                 }

package/dist/primitives/option-picker.cjs

@@ -0,0 +1,74 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+"use client";
+
+
+
+
+
+
+
+var _chunkZAITUDYDcjs = require('../chunk-ZAITUDYD.cjs');
+
+
+var _chunkJDEXZGIYcjs = require('../chunk-JDEXZGIY.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/option-picker.tsx
+var _lucidereact = require('lucide-react');
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+function OptionPicker({
+  value,
+  onValueChange,
+  options,
+  label,
+  icon,
+  disabled = false,
+  side = "top",
+  align = "start",
+  className
+}) {
+  const headingId = _react.useId.call(void 0, );
+  const current = options.find((option) => option.value === value);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenu, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkJDEXZGIYcjs.Button,
+      {
+        type: "button",
+        variant: "ghost",
+        "aria-label": `${label}: ${_nullishCoalesce(_optionalChain([current, 'optionalAccess', _ => _.label]), () => ( value))}`,
+        "data-slot": "option-picker-trigger",
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-[44px] shrink-0 gap-1.5 px-3 text-sm font-medium", className),
+        children: [
+          icon,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: _nullishCoalesce(_optionalChain([current, 'optionalAccess', _2 => _2.label]), () => ( value)) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronUp, { "aria-hidden": true, className: _chunkKWLSBTB2cjs.cn.call(void 0, "h-3.5 w-3.5 opacity-60", side === "bottom" && "rotate-180") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenuContent, { side, align, className: "w-80 max-w-[calc(100vw-2rem)]", "aria-labelledby": headingId, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuLabel, { id: headingId, className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuRadioGroup, { value, onValueChange: (next) => onValueChange(next), children: options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkZAITUDYDcjs.DropdownMenuRadioItem,
+        {
+          value: option.value,
+          "data-slot": "option-picker-option",
+          className: "items-start py-2.5 sm:py-2.5 [&>span:first-child]:top-3.5",
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "font-medium", children: [
+              option.label,
+              option.tag ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-1.5 text-xs font-normal text-muted-foreground", children: option.tag }) : null
+            ] }),
+            option.description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs leading-relaxed text-muted-foreground", children: option.description }) : null
+          ] })
+        },
+        option.value
+      )) })
+    ] })
+  ] });
+}
+
+
+exports.OptionPicker = OptionPicker;

package/dist/primitives/option-picker.d.cts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface OptionPickerOption<TValue extends string = string> {
+    value: TValue;
+    /** The option's name, also shown on the button once picked. */
+    label: string;
+    /** One line on what picking it means. */
+    description?: ReactNode;
+    /** A quiet note after the name, such as "default". */
+    tag?: ReactNode;
+}
+interface OptionPickerProps<TValue extends string = string> {
+    value: TValue;
+    onValueChange: (value: TValue) => void;
+    options: ReadonlyArray<OptionPickerOption<TValue>>;
+    /** Names the setting: the list's heading, and the button's accessible name with the value. */
+    label: string;
+    /** Shown before the value on the button. */
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Where the list opens. Defaults to `top`, for a control in a composer. */
+    side?: "top" | "bottom";
+    align?: "start" | "end";
+    className?: string;
+}
+/**
+ * A setting picked from a short list, the way a chat composer picks its effort:
+ * a button showing the current value opens a list of options, each a name and
+ * one line on what it means, one of them picked. A controlled radio group in a
+ * menu, so arrow keys move between options and Enter picks one.
+ */
+declare function OptionPicker<TValue extends string = string>({ value, onValueChange, options, label, icon, disabled, side, align, className, }: OptionPickerProps<TValue>): react_jsx_runtime.JSX.Element;
+
+export { OptionPicker, type OptionPickerOption, type OptionPickerProps };

package/dist/primitives/option-picker.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface OptionPickerOption<TValue extends string = string> {
+    value: TValue;
+    /** The option's name, also shown on the button once picked. */
+    label: string;
+    /** One line on what picking it means. */
+    description?: ReactNode;
+    /** A quiet note after the name, such as "default". */
+    tag?: ReactNode;
+}
+interface OptionPickerProps<TValue extends string = string> {
+    value: TValue;
+    onValueChange: (value: TValue) => void;
+    options: ReadonlyArray<OptionPickerOption<TValue>>;
+    /** Names the setting: the list's heading, and the button's accessible name with the value. */
+    label: string;
+    /** Shown before the value on the button. */
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Where the list opens. Defaults to `top`, for a control in a composer. */
+    side?: "top" | "bottom";
+    align?: "start" | "end";
+    className?: string;
+}
+/**
+ * A setting picked from a short list, the way a chat composer picks its effort:
+ * a button showing the current value opens a list of options, each a name and
+ * one line on what it means, one of them picked. A controlled radio group in a
+ * menu, so arrow keys move between options and Enter picks one.
+ */
+declare function OptionPicker<TValue extends string = string>({ value, onValueChange, options, label, icon, disabled, side, align, className, }: OptionPickerProps<TValue>): react_jsx_runtime.JSX.Element;
+
+export { OptionPicker, type OptionPickerOption, type OptionPickerProps };

package/dist/primitives/option-picker.js

@@ -0,0 +1,74 @@
+"use client";
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from "../chunk-V4LE2HWP.js";
+import {
+  Button
+} from "../chunk-W326GKML.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/option-picker.tsx
+import { ChevronUp } from "lucide-react";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OptionPicker({
+  value,
+  onValueChange,
+  options,
+  label,
+  icon,
+  disabled = false,
+  side = "top",
+  align = "start",
+  className
+}) {
+  const headingId = useId();
+  const current = options.find((option) => option.value === value);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        "aria-label": `${label}: ${current?.label ?? value}`,
+        "data-slot": "option-picker-trigger",
+        className: cn("min-h-[44px] shrink-0 gap-1.5 px-3 text-sm font-medium", className),
+        children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { children: current?.label ?? value }),
+          /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": true, className: cn("h-3.5 w-3.5 opacity-60", side === "bottom" && "rotate-180") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { side, align, className: "w-80 max-w-[calc(100vw-2rem)]", "aria-labelledby": headingId, children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { id: headingId, className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value, onValueChange: (next) => onValueChange(next), children: options.map((option) => /* @__PURE__ */ jsx(
+        DropdownMenuRadioItem,
+        {
+          value: option.value,
+          "data-slot": "option-picker-option",
+          className: "items-start py-2.5 sm:py-2.5 [&>span:first-child]:top-3.5",
+          children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+              option.label,
+              option.tag ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs font-normal text-muted-foreground", children: option.tag }) : null
+            ] }),
+            option.description ? /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-muted-foreground", children: option.description }) : null
+          ] })
+        },
+        option.value
+      )) })
+    ] })
+  ] });
+}
+export {
+  OptionPicker
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [
@@ -790,6 +790,16 @@
         "default": "./dist/primitives/notes.cjs"
       }
     },
+    "./primitives/option-picker": {
+      "import": {
+        "types": "./dist/primitives/option-picker.d.ts",
+        "default": "./dist/primitives/option-picker.js"
+      },
+      "require": {
+        "types": "./dist/primitives/option-picker.d.cts",
+        "default": "./dist/primitives/option-picker.cjs"
+      }
+    },
     "./primitives/page-header-actions": {
       "import": {
         "types": "./dist/primitives/page-header-actions.d.ts",