@usefragments/ui 1.3.2 → 1.4.0

package/dist/components/Prompt/index.js

@@ -1,8 +1,37 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./Prompt.module.scss.js";
 import { Loading } from "../Loading/index.js";
+import { Select } from "../Select/index.js";
+function PlusIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z" })
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" })
+    }
+  );
+}
 function ArrowUpIcon() {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -54,10 +83,15 @@ function PromptRoot({
   autoResize = true,
   submitOnEnter = true,
   variant = "default",
+  appearance = "panel",
+  onFiles,
+  accept,
   className,
   ...htmlProps
 }) {
   const textareaRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const dragDepth = React.useRef(0);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -67,6 +101,13 @@ function PromptRoot({
     if (disabled || loading || !value.trim()) return;
     onSubmit == null ? void 0 : onSubmit(value);
   }, [disabled, loading, value, onSubmit]);
+  const acceptFiles = React.useCallback(
+    (files) => {
+      if (!onFiles || disabled || loading || files.length === 0) return;
+      onFiles(files);
+    },
+    [onFiles, disabled, loading]
+  );
   const contextValue = {
     value,
     setValue,
@@ -78,12 +119,39 @@ function PromptRoot({
     autoResize,
     submitOnEnter,
     handleSubmit,
-    textareaRef
+    textareaRef,
+    accept,
+    onFiles: onFiles ? acceptFiles : void 0
   };
+  const dropHandlers = onFiles ? {
+    onDragEnter: (event) => {
+      if (!event.dataTransfer.types.includes("Files")) return;
+      dragDepth.current += 1;
+      setDragging(true);
+    },
+    onDragOver: (event) => {
+      if (!event.dataTransfer.types.includes("Files")) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+    },
+    onDragLeave: () => {
+      dragDepth.current = Math.max(0, dragDepth.current - 1);
+      if (dragDepth.current === 0) setDragging(false);
+    },
+    onDrop: (event) => {
+      if (!event.dataTransfer.types.includes("Files")) return;
+      event.preventDefault();
+      dragDepth.current = 0;
+      setDragging(false);
+      acceptFiles(Array.from(event.dataTransfer.files));
+    }
+  } : null;
   const classes = [
     styles.prompt,
     variant === "fixed" && styles.fixed,
     variant === "sticky" && styles.sticky,
+    appearance === "seamless" && styles.seamless,
+    dragging && styles.dragging,
     disabled && styles.disabled,
     loading && styles.loading,
     className
@@ -92,10 +160,13 @@ function PromptRoot({
     "div",
     {
       ...htmlProps,
+      ...dropHandlers,
       className: classes,
       "data-disabled": disabled || void 0,
       "data-loading": loading || void 0,
       "data-variant": variant,
+      "data-appearance": appearance,
+      "data-dragging": dragging || void 0,
       children
     }
   ) });
@@ -105,6 +176,7 @@ function PromptTextarea({
   className,
   onChange,
   onKeyDown,
+  onPaste,
   "aria-label": ariaLabel,
   ...htmlProps
 }) {
@@ -119,7 +191,8 @@ function PromptTextarea({
     autoResize,
     submitOnEnter,
     handleSubmit,
-    textareaRef
+    textareaRef,
+    onFiles
   } = usePromptContext();
   const lineHeight = 1.5;
   const padding = 12;
@@ -150,6 +223,20 @@ function PromptTextarea({
       handleSubmit();
     }
   };
+  const handlePaste = (e) => {
+    onPaste == null ? void 0 : onPaste(e);
+    if (e.defaultPrevented || !onFiles) return;
+    const files = Array.from(e.clipboardData.files);
+    if (files.length === 0) return;
+    e.preventDefault();
+    onFiles(
+      files.map(
+        (file, index) => file.name && file.name !== "image.png" ? file : new File([file], `pasted-${index + 1}.${file.type.split("/")[1] || "png"}`, {
+          type: file.type
+        })
+      )
+    );
+  };
   const classes = [styles.textarea, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     "textarea",
@@ -160,6 +247,7 @@ function PromptTextarea({
       value,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
       placeholder: overridePlaceholder ?? placeholder,
       disabled: disabled || loading,
       rows: minRows,
@@ -240,6 +328,107 @@ function PromptModeButton({
     }
   );
 }
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${Math.round(kb)} KB`;
+  return `${(kb / 1024).toFixed(kb / 1024 < 10 ? 1 : 0)} MB`;
+}
+function PromptAttachments({ items, onRemove, className }) {
+  if (items.length === 0) return null;
+  const classes = [styles.attachments, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("ul", { className: classes, "aria-label": "Attachments", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: styles.attachment, children: [
+    item.previewUrl ? (
+      // Decorative: the filename beside it is the accessible name, and a
+      // thumbnail of a screenshot has no description worth inventing.
+      /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: styles.attachmentThumb })
+    ) : null,
+    /* @__PURE__ */ jsx("span", { className: styles.attachmentName, title: item.name, children: item.name }),
+    item.size != null && /* @__PURE__ */ jsx("span", { className: styles.attachmentSize, children: formatSize(item.size) }),
+    onRemove && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.attachmentRemove,
+        onClick: () => onRemove(item.id),
+        "aria-label": `Remove ${item.name}`,
+        children: /* @__PURE__ */ jsx(CloseIcon, {})
+      }
+    )
+  ] }, item.id)) });
+}
+function PromptAttach({
+  "aria-label": ariaLabel = "Attach files",
+  children,
+  accept: acceptOverride,
+  multiple = true,
+  disabled: buttonDisabled,
+  className
+}) {
+  const { disabled, loading, accept, onFiles } = usePromptContext();
+  const inputRef = React.useRef(null);
+  const isDisabled = disabled || loading || buttonDisabled || !onFiles;
+  const classes = [styles.attach, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classes,
+        onClick: () => {
+          var _a;
+          return (_a = inputRef.current) == null ? void 0 : _a.click();
+        },
+        disabled: isDisabled,
+        "aria-label": ariaLabel,
+        children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        hidden: true,
+        accept: acceptOverride ?? accept,
+        multiple,
+        onChange: (event) => {
+          const files = Array.from(event.target.files ?? []);
+          event.target.value = "";
+          onFiles == null ? void 0 : onFiles(files);
+        }
+      }
+    )
+  ] });
+}
+function PromptSelect({
+  icon,
+  "aria-label": ariaLabel,
+  options,
+  children,
+  placeholder,
+  disabled: selectDisabled,
+  className,
+  ...selectProps
+}) {
+  const { disabled, loading } = usePromptContext();
+  const classes = [styles.select, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      ...selectProps,
+      size: "sm",
+      variant: "ghost",
+      options,
+      placeholder,
+      disabled: disabled || loading || selectDisabled,
+      children: [
+        /* @__PURE__ */ jsx(Select.Trigger, { className: classes, icon, "aria-label": ariaLabel }),
+        /* @__PURE__ */ jsx(Select.Content, { children })
+      ]
+    }
+  );
+}
 function PromptUsage({ children, className }) {
   const classes = [styles.usage, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("span", { className: classes, children });
@@ -286,6 +475,9 @@ const Prompt = Object.assign(PromptRoot, {
   Info: PromptInfo,
   ActionButton: PromptActionButton,
   ModeButton: PromptModeButton,
+  Select: PromptSelect,
+  Attach: PromptAttach,
+  Attachments: PromptAttachments,
   Usage: PromptUsage,
   Submit: PromptSubmit
 });
@@ -293,9 +485,12 @@ export {
   Prompt,
   PromptActionButton,
   PromptActions,
+  PromptAttach,
+  PromptAttachments,
   PromptInfo,
   PromptModeButton,
   PromptRoot,
+  PromptSelect,
   PromptSubmit,
   PromptTab,
   PromptTabs,

package/dist/components/Select/Select.module.scss.cjs

@@ -1,22 +1,26 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_z7hl3_1";
-const label = "_label_z7hl3_6";
-const helper = "_helper_z7hl3_19";
-const helperError = "_helperError_z7hl3_26";
-const errorMessage = "_errorMessage_z7hl3_30";
-const trigger = "_trigger_z7hl3_36";
-const triggerSm = "_triggerSm_z7hl3_99";
-const triggerLg = "_triggerLg_z7hl3_106";
-const value = "_value_z7hl3_113";
-const placeholder = "_placeholder_z7hl3_126";
-const icon = "_icon_z7hl3_130";
-const positioner = "_positioner_z7hl3_145";
-const popup = "_popup_z7hl3_150";
-const item = "_item_z7hl3_182";
-const itemIndicator = "_itemIndicator_z7hl3_230";
-const group = "_group_z7hl3_244";
-const groupLabel = "_groupLabel_z7hl3_250";
+const wrapper = "_wrapper_9zaqb_1";
+const label = "_label_9zaqb_6";
+const helper = "_helper_9zaqb_19";
+const helperError = "_helperError_9zaqb_26";
+const errorMessage = "_errorMessage_9zaqb_30";
+const trigger = "_trigger_9zaqb_36";
+const triggerSm = "_triggerSm_9zaqb_99";
+const triggerLg = "_triggerLg_9zaqb_106";
+const triggerGhost = "_triggerGhost_9zaqb_113";
+const wrapperGhost = "_wrapperGhost_9zaqb_144";
+const triggerIcon = "_triggerIcon_9zaqb_149";
+const value = "_value_9zaqb_157";
+const placeholder = "_placeholder_9zaqb_170";
+const hint = "_hint_9zaqb_174";
+const icon = "_icon_9zaqb_180";
+const positioner = "_positioner_9zaqb_195";
+const popup = "_popup_9zaqb_200";
+const item = "_item_9zaqb_238";
+const itemIndicator = "_itemIndicator_9zaqb_287";
+const group = "_group_9zaqb_301";
+const groupLabel = "_groupLabel_9zaqb_307";
 const styles = {
   wrapper,
   label,
@@ -26,8 +30,12 @@ const styles = {
   trigger,
   triggerSm,
   triggerLg,
+  triggerGhost,
+  wrapperGhost,
+  triggerIcon,
   value,
   placeholder,
+  hint,
   icon,
   positioner,
   popup,
@@ -42,6 +50,7 @@ exports.group = group;
 exports.groupLabel = groupLabel;
 exports.helper = helper;
 exports.helperError = helperError;
+exports.hint = hint;
 exports.icon = icon;
 exports.item = item;
 exports.itemIndicator = itemIndicator;
@@ -50,7 +59,10 @@ exports.placeholder = placeholder;
 exports.popup = popup;
 exports.positioner = positioner;
 exports.trigger = trigger;
+exports.triggerGhost = triggerGhost;
+exports.triggerIcon = triggerIcon;
 exports.triggerLg = triggerLg;
 exports.triggerSm = triggerSm;
 exports.value = value;
 exports.wrapper = wrapper;
+exports.wrapperGhost = wrapperGhost;

package/dist/components/Select/Select.module.scss.js

@@ -1,20 +1,24 @@
-const wrapper = "_wrapper_z7hl3_1";
-const label = "_label_z7hl3_6";
-const helper = "_helper_z7hl3_19";
-const helperError = "_helperError_z7hl3_26";
-const errorMessage = "_errorMessage_z7hl3_30";
-const trigger = "_trigger_z7hl3_36";
-const triggerSm = "_triggerSm_z7hl3_99";
-const triggerLg = "_triggerLg_z7hl3_106";
-const value = "_value_z7hl3_113";
-const placeholder = "_placeholder_z7hl3_126";
-const icon = "_icon_z7hl3_130";
-const positioner = "_positioner_z7hl3_145";
-const popup = "_popup_z7hl3_150";
-const item = "_item_z7hl3_182";
-const itemIndicator = "_itemIndicator_z7hl3_230";
-const group = "_group_z7hl3_244";
-const groupLabel = "_groupLabel_z7hl3_250";
+const wrapper = "_wrapper_9zaqb_1";
+const label = "_label_9zaqb_6";
+const helper = "_helper_9zaqb_19";
+const helperError = "_helperError_9zaqb_26";
+const errorMessage = "_errorMessage_9zaqb_30";
+const trigger = "_trigger_9zaqb_36";
+const triggerSm = "_triggerSm_9zaqb_99";
+const triggerLg = "_triggerLg_9zaqb_106";
+const triggerGhost = "_triggerGhost_9zaqb_113";
+const wrapperGhost = "_wrapperGhost_9zaqb_144";
+const triggerIcon = "_triggerIcon_9zaqb_149";
+const value = "_value_9zaqb_157";
+const placeholder = "_placeholder_9zaqb_170";
+const hint = "_hint_9zaqb_174";
+const icon = "_icon_9zaqb_180";
+const positioner = "_positioner_9zaqb_195";
+const popup = "_popup_9zaqb_200";
+const item = "_item_9zaqb_238";
+const itemIndicator = "_itemIndicator_9zaqb_287";
+const group = "_group_9zaqb_301";
+const groupLabel = "_groupLabel_9zaqb_307";
 const styles = {
   wrapper,
   label,
@@ -24,8 +28,12 @@ const styles = {
   trigger,
   triggerSm,
   triggerLg,
+  triggerGhost,
+  wrapperGhost,
+  triggerIcon,
   value,
   placeholder,
+  hint,
   icon,
   positioner,
   popup,
@@ -41,6 +49,7 @@ export {
   groupLabel,
   helper,
   helperError,
+  hint,
   icon,
   item,
   itemIndicator,
@@ -49,8 +58,11 @@ export {
   popup,
   positioner,
   trigger,
+  triggerGhost,
+  triggerIcon,
   triggerLg,
   triggerSm,
   value,
-  wrapper
+  wrapper,
+  wrapperGhost
 };

package/dist/components/Select/index.cjs

@@ -66,8 +66,17 @@ const SelectContext = React__namespace.createContext({
   },
   unregisterItem: () => {
   },
-  size: "md"
+  size: "md",
+  variant: "field",
+  optionItems: null
 });
+function renderOptionLabel(option) {
+  if (!option.hint) return option.label;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    option.label,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.hint, children: option.hint })
+  ] });
+}
 function collectDeclaredItems(children, map) {
   React__namespace.Children.forEach(children, (child) => {
     var _a;
@@ -103,6 +112,7 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
   helperText,
   error,
   size: sizeProp,
+  variant = "field",
   className
 }, ref) {
   const size = index.useResolvedControlSize(sizeProp);
@@ -132,7 +142,7 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
   }, [value]);
   const selectedValue = value !== void 0 ? value : internalValue;
   const optionItems = React__namespace.useMemo(
-    () => (options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))) ?? null,
+    () => (options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, disabled: option.disabled, children: renderOptionLabel(option) }, option.value))) ?? null,
     [options]
   );
   const resolvedChildren = children ?? (optionItems ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -152,7 +162,7 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
   );
   const declaredItems = React__namespace.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
-    options == null ? void 0 : options.forEach((option) => map.set(option.value, option.label));
+    options == null ? void 0 : options.forEach((option) => map.set(option.value, renderOptionLabel(option)));
     collectDeclaredItems(children, map);
     return map;
   }, [children, options]);
@@ -169,16 +179,31 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
       items: resolvedItems,
       registerItem,
       unregisterItem,
-      size
+      size,
+      variant,
+      optionItems
     }),
-    [placeholder, selectedValue, resolvedItems, registerItem, unregisterItem, size]
+    [
+      placeholder,
+      selectedValue,
+      resolvedItems,
+      registerItem,
+      unregisterItem,
+      size,
+      variant,
+      optionItems
+    ]
   );
   const { helperId, errorId, hasError, errorMessage } = aria.useFormFieldIds("select", {
     label,
     helperText,
     error
   });
-  const wrapperClasses = [Select_module.default.wrapper, className].filter(Boolean).join(" ");
+  const wrapperClasses = [
+    Select_module.default.wrapper,
+    variant === "ghost" && Select_module.default.wrapperGhost,
+    className
+  ].filter(Boolean).join(" ");
   const helperClasses = [Select_module.default.helper, hasError && Select_module.default.helperError].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: wrapperClasses, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -208,18 +233,29 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
     errorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { id: errorId, className: Select_module.default.errorMessage, children: errorMessage })
   ] }) });
 });
-function SelectTrigger({ children, placeholder, className, ...htmlProps }) {
+function SelectTrigger({
+  children,
+  placeholder,
+  icon,
+  className,
+  ...htmlProps
+}) {
   const context = React__namespace.useContext(SelectContext);
   const placeholderText = placeholder ?? context.placeholder;
   const classes = [
     Select_module.default.trigger,
     context.size === "sm" && Select_module.default.triggerSm,
     context.size === "lg" && Select_module.default.triggerLg,
+    // Ghost unsets the field shell and the size mixin's box. Both are single
+    // classes like this one, so it wins on being declared after them in
+    // Select.module.scss — the one place that ordering is guaranteed.
+    context.variant === "ghost" && Select_module.default.triggerGhost,
     className
   ].filter(Boolean).join(" ");
   const selectedContent = context.value != null ? context.items.get(context.value) : null;
   const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.placeholder, children: placeholderText }) : null);
   return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.triggerIcon, children: icon }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.value, children: displayContent }),
     /* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { className: Select_module.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
   ] }) });
@@ -232,12 +268,13 @@ function SelectContent({
   maxVisibleItems,
   ...htmlProps
 }) {
+  const { optionItems } = React__namespace.useContext(SelectContext);
   const popupClasses = [Select_module.default.popup, className].filter(Boolean).join(" ");
   const popupStyle = maxVisibleItems != null ? {
     "--fui-select-max-items": maxVisibleItems + 0.5,
     ...htmlProps.style
   } : htmlProps.style;
-  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Positioner, { sideOffset, align, className: Select_module.default.positioner, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { ...htmlProps, className: popupClasses, style: popupStyle, children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Positioner, { sideOffset, align, className: Select_module.default.positioner, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { ...htmlProps, className: popupClasses, style: popupStyle, children: children ?? optionItems }) }) });
 }
 function SelectItem({ children, value, disabled, className, ...htmlProps }) {
   const { registerItem, unregisterItem } = React__namespace.useContext(SelectContext);

package/dist/components/Select/index.d.ts

@@ -1,9 +1,14 @@
 import * as React from "react";
 import { type FormFieldProps } from "../../utils/aria";
 export type SelectValue = string;
+export type SelectVariant = "field" | "ghost";
 export interface SelectOption {
     value: SelectValue;
     label: string;
+    /** A dimmed qualifier after the label, in the trigger as well as the list —
+     * a tier beside a model, a path beside a filename. Use it when the label
+     * alone is ambiguous but the qualifier is not what you are choosing by. */
+    hint?: string;
     disabled?: boolean;
 }
 /**
@@ -45,15 +50,25 @@ export interface SelectProps extends FormFieldProps {
     /** Size variant.
      * @default "md" */
     size?: "sm" | "md" | "lg";
+    /** Visual treatment. `ghost` drops the field shell for a compact, borderless
+     * control — for toolbars and dense rows, where a bordered field reads as a
+     * form. Pair with `size="sm"`.
+     * @default "field" */
+    variant?: SelectVariant;
     /** Wrapper class name */
     className?: string;
 }
 export interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
     children?: React.ReactNode;
     placeholder?: string;
+    /** Leading adornment shown before the value — usually says what the choice is
+     * about, so the visible text can be the choice itself. Ignored when you pass
+     * your own `children`. */
+    icon?: React.ReactNode;
 }
 export interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
+    /** Omit to render the items the root's `options` prop describes. */
+    children?: React.ReactNode;
     sideOffset?: number;
     align?: "start" | "center" | "end";
     /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */
@@ -71,7 +86,7 @@ export interface SelectGroupLabelProps extends React.HTMLAttributes<HTMLElement>
     children: React.ReactNode;
 }
 declare const SelectRoot: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
-declare function SelectTrigger({ children, placeholder, className, ...htmlProps }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ children, placeholder, icon, className, ...htmlProps }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function SelectContent({ children, className, sideOffset, align, maxVisibleItems, ...htmlProps }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
 declare function SelectItem({ children, value, disabled, className, ...htmlProps }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
 declare function SelectGroup({ children, className, ...htmlProps }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/index.d.ts.map

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