@usefragments/ui 1.3.3 → 1.4.0

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

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const pagination = "_pagination_1ruwh_1";
-const list = "_list_1ruwh_7";
-const item = "_item_1ruwh_16";
-const itemActive = "_itemActive_1ruwh_57";
-const itemDisabled = "_itemDisabled_1ruwh_65";
-const navButton = "_navButton_1ruwh_71";
-const ellipsis = "_ellipsis_1ruwh_76";
+const pagination = "_pagination_lk556_1";
+const list = "_list_lk556_7";
+const item = "_item_lk556_16";
+const itemActive = "_itemActive_lk556_57";
+const itemDisabled = "_itemDisabled_lk556_66";
+const navButton = "_navButton_lk556_72";
+const ellipsis = "_ellipsis_lk556_77";
 const styles = {
   pagination,
   list,

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

@@ -1,10 +1,10 @@
-const pagination = "_pagination_1ruwh_1";
-const list = "_list_1ruwh_7";
-const item = "_item_1ruwh_16";
-const itemActive = "_itemActive_1ruwh_57";
-const itemDisabled = "_itemDisabled_1ruwh_65";
-const navButton = "_navButton_1ruwh_71";
-const ellipsis = "_ellipsis_1ruwh_76";
+const pagination = "_pagination_lk556_1";
+const list = "_list_lk556_7";
+const item = "_item_lk556_16";
+const itemActive = "_itemActive_lk556_57";
+const itemDisabled = "_itemDisabled_lk556_66";
+const navButton = "_navButton_lk556_72";
+const ellipsis = "_ellipsis_lk556_77";
 const styles = {
   pagination,
   list,

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

@@ -1,51 +1,81 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const prompt = "_prompt_1k8t3_1";
-const fixed = "_fixed_1k8t3_60";
-const sticky = "_sticky_1k8t3_71";
-const textarea = "_textarea_1k8t3_86";
-const tabs = "_tabs_1k8t3_127";
-const tabsInner = "_tabsInner_1k8t3_135";
-const tabButton = "_tabButton_1k8t3_145";
-const tabButtonActive = "_tabButtonActive_1k8t3_174";
-const toolbar = "_toolbar_1k8t3_179";
-const actions = "_actions_1k8t3_189";
-const info = "_info_1k8t3_196";
-const actionButton = "_actionButton_1k8t3_203";
-const modeButton = "_modeButton_1k8t3_249";
-const modeButtonActive = "_modeButtonActive_1k8t3_292";
-const usage = "_usage_1k8t3_297";
-const submit = "_submit_1k8t3_304";
-const submitLoading = "_submitLoading_1k8t3_353";
-const submitSpinner = "_submitSpinner_1k8t3_357";
+const prompt = "_prompt_1wo4v_1";
+const fixed = "_fixed_1wo4v_60";
+const sticky = "_sticky_1wo4v_71";
+const seamless = "_seamless_1wo4v_86";
+const toolbar = "_toolbar_1wo4v_102";
+const textarea = "_textarea_1wo4v_107";
+const attachments = "_attachments_1wo4v_110";
+const tabs = "_tabs_1wo4v_115";
+const tabsInner = "_tabsInner_1wo4v_123";
+const attach = "_attach_1wo4v_110";
+const select = "_select_1wo4v_141";
+const modeButton = "_modeButton_1wo4v_142";
+const submit = "_submit_1wo4v_173";
+const actionButton = "_actionButton_1wo4v_174";
+const tabButton = "_tabButton_1wo4v_246";
+const tabButtonActive = "_tabButtonActive_1wo4v_275";
+const actions = "_actions_1wo4v_290";
+const info = "_info_1wo4v_297";
+const modeButtonActive = "_modeButtonActive_1wo4v_393";
+const attachment = "_attachment_1wo4v_110";
+const attachmentThumb = "_attachmentThumb_1wo4v_473";
+const attachmentName = "_attachmentName_1wo4v_481";
+const attachmentSize = "_attachmentSize_1wo4v_489";
+const attachmentRemove = "_attachmentRemove_1wo4v_495";
+const dragging = "_dragging_1wo4v_539";
+const usage = "_usage_1wo4v_547";
+const submitLoading = "_submitLoading_1wo4v_603";
+const submitSpinner = "_submitSpinner_1wo4v_607";
 const styles = {
   prompt,
   fixed,
   sticky,
+  seamless,
+  toolbar,
   textarea,
+  attachments,
   tabs,
   tabsInner,
+  attach,
+  select,
+  modeButton,
+  submit,
+  actionButton,
   tabButton,
   tabButtonActive,
-  toolbar,
   actions,
   info,
-  actionButton,
-  modeButton,
   modeButtonActive,
+  attachment,
+  attachmentThumb,
+  attachmentName,
+  attachmentSize,
+  attachmentRemove,
+  dragging,
   usage,
-  submit,
   submitLoading,
   submitSpinner
 };
 exports.actionButton = actionButton;
 exports.actions = actions;
+exports.attach = attach;
+exports.attachment = attachment;
+exports.attachmentName = attachmentName;
+exports.attachmentRemove = attachmentRemove;
+exports.attachmentSize = attachmentSize;
+exports.attachmentThumb = attachmentThumb;
+exports.attachments = attachments;
 exports.default = styles;
+exports.dragging = dragging;
 exports.fixed = fixed;
 exports.info = info;
 exports.modeButton = modeButton;
 exports.modeButtonActive = modeButtonActive;
 exports.prompt = prompt;
+exports.seamless = seamless;
+exports.select = select;
 exports.sticky = sticky;
 exports.submit = submit;
 exports.submitLoading = submitLoading;

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

@@ -1,50 +1,80 @@
-const prompt = "_prompt_1k8t3_1";
-const fixed = "_fixed_1k8t3_60";
-const sticky = "_sticky_1k8t3_71";
-const textarea = "_textarea_1k8t3_86";
-const tabs = "_tabs_1k8t3_127";
-const tabsInner = "_tabsInner_1k8t3_135";
-const tabButton = "_tabButton_1k8t3_145";
-const tabButtonActive = "_tabButtonActive_1k8t3_174";
-const toolbar = "_toolbar_1k8t3_179";
-const actions = "_actions_1k8t3_189";
-const info = "_info_1k8t3_196";
-const actionButton = "_actionButton_1k8t3_203";
-const modeButton = "_modeButton_1k8t3_249";
-const modeButtonActive = "_modeButtonActive_1k8t3_292";
-const usage = "_usage_1k8t3_297";
-const submit = "_submit_1k8t3_304";
-const submitLoading = "_submitLoading_1k8t3_353";
-const submitSpinner = "_submitSpinner_1k8t3_357";
+const prompt = "_prompt_1wo4v_1";
+const fixed = "_fixed_1wo4v_60";
+const sticky = "_sticky_1wo4v_71";
+const seamless = "_seamless_1wo4v_86";
+const toolbar = "_toolbar_1wo4v_102";
+const textarea = "_textarea_1wo4v_107";
+const attachments = "_attachments_1wo4v_110";
+const tabs = "_tabs_1wo4v_115";
+const tabsInner = "_tabsInner_1wo4v_123";
+const attach = "_attach_1wo4v_110";
+const select = "_select_1wo4v_141";
+const modeButton = "_modeButton_1wo4v_142";
+const submit = "_submit_1wo4v_173";
+const actionButton = "_actionButton_1wo4v_174";
+const tabButton = "_tabButton_1wo4v_246";
+const tabButtonActive = "_tabButtonActive_1wo4v_275";
+const actions = "_actions_1wo4v_290";
+const info = "_info_1wo4v_297";
+const modeButtonActive = "_modeButtonActive_1wo4v_393";
+const attachment = "_attachment_1wo4v_110";
+const attachmentThumb = "_attachmentThumb_1wo4v_473";
+const attachmentName = "_attachmentName_1wo4v_481";
+const attachmentSize = "_attachmentSize_1wo4v_489";
+const attachmentRemove = "_attachmentRemove_1wo4v_495";
+const dragging = "_dragging_1wo4v_539";
+const usage = "_usage_1wo4v_547";
+const submitLoading = "_submitLoading_1wo4v_603";
+const submitSpinner = "_submitSpinner_1wo4v_607";
 const styles = {
   prompt,
   fixed,
   sticky,
+  seamless,
+  toolbar,
   textarea,
+  attachments,
   tabs,
   tabsInner,
+  attach,
+  select,
+  modeButton,
+  submit,
+  actionButton,
   tabButton,
   tabButtonActive,
-  toolbar,
   actions,
   info,
-  actionButton,
-  modeButton,
   modeButtonActive,
+  attachment,
+  attachmentThumb,
+  attachmentName,
+  attachmentSize,
+  attachmentRemove,
+  dragging,
   usage,
-  submit,
   submitLoading,
   submitSpinner
 };
 export {
   actionButton,
   actions,
+  attach,
+  attachment,
+  attachmentName,
+  attachmentRemove,
+  attachmentSize,
+  attachmentThumb,
+  attachments,
   styles as default,
+  dragging,
   fixed,
   info,
   modeButton,
   modeButtonActive,
   prompt,
+  seamless,
+  select,
   sticky,
   submit,
   submitLoading,

package/dist/components/Prompt/index.cjs

@@ -5,6 +5,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Prompt_module = require("./Prompt.module.scss.cjs");
 const index = require("../Loading/index.cjs");
+const index$1 = require("../Select/index.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -22,6 +23,34 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function PlusIcon() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     "svg",
@@ -73,10 +102,15 @@ function PromptRoot({
   autoResize = true,
   submitOnEnter = true,
   variant = "default",
+  appearance = "panel",
+  onFiles,
+  accept,
   className,
   ...htmlProps
 }) {
   const textareaRef = React__namespace.useRef(null);
+  const [dragging, setDragging] = React__namespace.useState(false);
+  const dragDepth = React__namespace.useRef(0);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -86,6 +120,13 @@ function PromptRoot({
     if (disabled || loading || !value.trim()) return;
     onSubmit == null ? void 0 : onSubmit(value);
   }, [disabled, loading, value, onSubmit]);
+  const acceptFiles = React__namespace.useCallback(
+    (files) => {
+      if (!onFiles || disabled || loading || files.length === 0) return;
+      onFiles(files);
+    },
+    [onFiles, disabled, loading]
+  );
   const contextValue = {
     value,
     setValue,
@@ -97,12 +138,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 = [
     Prompt_module.default.prompt,
     variant === "fixed" && Prompt_module.default.fixed,
     variant === "sticky" && Prompt_module.default.sticky,
+    appearance === "seamless" && Prompt_module.default.seamless,
+    dragging && Prompt_module.default.dragging,
     disabled && Prompt_module.default.disabled,
     loading && Prompt_module.default.loading,
     className
@@ -111,10 +179,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
     }
   ) });
@@ -124,6 +195,7 @@ function PromptTextarea({
   className,
   onChange,
   onKeyDown,
+  onPaste,
   "aria-label": ariaLabel,
   ...htmlProps
 }) {
@@ -138,7 +210,8 @@ function PromptTextarea({
     autoResize,
     submitOnEnter,
     handleSubmit,
-    textareaRef
+    textareaRef,
+    onFiles
   } = usePromptContext();
   const lineHeight = 1.5;
   const padding = 12;
@@ -169,6 +242,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, index2) => file.name && file.name !== "image.png" ? file : new File([file], `pasted-${index2 + 1}.${file.type.split("/")[1] || "png"}`, {
+          type: file.type
+        })
+      )
+    );
+  };
   const classes = [Prompt_module.default.textarea, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
@@ -179,6 +266,7 @@ function PromptTextarea({
       value,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
       placeholder: overridePlaceholder ?? placeholder,
       disabled: disabled || loading,
       rows: minRows,
@@ -259,6 +347,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 = [Prompt_module.default.attachments, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classes, "aria-label": "Attachments", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: Prompt_module.default.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__ */ jsxRuntime.jsx("img", { src: item.previewUrl, alt: "", className: Prompt_module.default.attachmentThumb })
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Prompt_module.default.attachmentName, title: item.name, children: item.name }),
+    item.size != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Prompt_module.default.attachmentSize, children: formatSize(item.size) }),
+    onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: Prompt_module.default.attachmentRemove,
+        onClick: () => onRemove(item.id),
+        "aria-label": `Remove ${item.name}`,
+        children: /* @__PURE__ */ jsxRuntime.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__namespace.useRef(null);
+  const isDisabled = disabled || loading || buttonDisabled || !onFiles;
+  const classes = [Prompt_module.default.attach, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PlusIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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 = [Prompt_module.default.select, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    index$1.Select,
+    {
+      ...selectProps,
+      size: "sm",
+      variant: "ghost",
+      options,
+      placeholder,
+      disabled: disabled || loading || selectDisabled,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.Select.Trigger, { className: classes, icon, "aria-label": ariaLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(index$1.Select.Content, { children })
+      ]
+    }
+  );
+}
 function PromptUsage({ children, className }) {
   const classes = [Prompt_module.default.usage, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes, children });
@@ -305,15 +494,21 @@ const Prompt = Object.assign(PromptRoot, {
   Info: PromptInfo,
   ActionButton: PromptActionButton,
   ModeButton: PromptModeButton,
+  Select: PromptSelect,
+  Attach: PromptAttach,
+  Attachments: PromptAttachments,
   Usage: PromptUsage,
   Submit: PromptSubmit
 });
 exports.Prompt = Prompt;
 exports.PromptActionButton = PromptActionButton;
 exports.PromptActions = PromptActions;
+exports.PromptAttach = PromptAttach;
+exports.PromptAttachments = PromptAttachments;
 exports.PromptInfo = PromptInfo;
 exports.PromptModeButton = PromptModeButton;
 exports.PromptRoot = PromptRoot;
+exports.PromptSelect = PromptSelect;
 exports.PromptSubmit = PromptSubmit;
 exports.PromptTab = PromptTab;
 exports.PromptTabs = PromptTabs;