@usefragments/ui 1.0.0

package/dist/components/Progress/index.js

@@ -0,0 +1,166 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+import styles from "./Progress.module.scss.js";
+function ProgressRoot({
+  value = null,
+  min = 0,
+  max = 100,
+  size = "md",
+  variant = "default",
+  label,
+  showValue = false,
+  formatValue,
+  className,
+  "aria-label": ariaLabel,
+  "aria-valuetext": ariaValueText,
+  ...htmlProps
+}) {
+  const isIndeterminate = value === null;
+  const range = max - min;
+  const normalizedPercentage = isIndeterminate ? 0 : range <= 0 ? 0 : (value - min) / range * 100;
+  const percentage = isIndeterminate ? 0 : Math.round(Math.min(100, Math.max(0, normalizedPercentage)));
+  const trackClasses = [
+    styles.track,
+    size === "sm" && styles.trackSm,
+    size === "md" && styles.trackMd,
+    size === "lg" && styles.trackLg
+  ].filter(Boolean).join(" ");
+  const indicatorClasses = [
+    styles.indicator,
+    variant === "success" && styles.indicatorSuccess,
+    variant === "warning" && styles.indicatorWarning,
+    variant === "danger" && styles.indicatorDanger,
+    isIndeterminate && styles.indicatorIndeterminate
+  ].filter(Boolean).join(" ");
+  const rootClasses = [styles.root, className].filter(Boolean).join(" ");
+  const displayValue = formatValue ? formatValue(percentage) : `${percentage}%`;
+  const effectiveValueText = ariaValueText || (isIndeterminate ? "Loading" : `${percentage} percent`);
+  return /* @__PURE__ */ jsxs(
+    Progress$1.Root,
+    {
+      ...htmlProps,
+      value,
+      min,
+      max,
+      className: rootClasses,
+      "aria-label": ariaLabel || (label ? void 0 : "Progress"),
+      "aria-valuetext": effectiveValueText,
+      "aria-busy": isIndeterminate,
+      children: [
+        (label || showValue) && /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+          label && /* @__PURE__ */ jsx(Progress$1.Label, { className: styles.label, children: label }),
+          showValue && !isIndeterminate && /* @__PURE__ */ jsx("span", { className: styles.value, children: displayValue })
+        ] }),
+        /* @__PURE__ */ jsx(Progress$1.Track, { className: trackClasses, children: /* @__PURE__ */ jsx(
+          Progress$1.Indicator,
+          {
+            className: indicatorClasses,
+            style: isIndeterminate ? void 0 : { width: `${percentage}%` }
+          }
+        ) })
+      ]
+    }
+  );
+}
+const CIRCLE_SIZES = {
+  sm: { size: 32, strokeWidth: 3 },
+  md: { size: 48, strokeWidth: 4 },
+  lg: { size: 64, strokeWidth: 5 }
+};
+function CircularProgressRoot({
+  value = null,
+  size = "md",
+  variant = "default",
+  showValue = false,
+  strokeWidth: customStrokeWidth,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-valuetext": ariaValueText,
+  ...htmlProps
+}) {
+  const isIndeterminate = value === null;
+  const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));
+  const { size: svgSize, strokeWidth: defaultStrokeWidth } = CIRCLE_SIZES[size];
+  const strokeWidth = customStrokeWidth ?? defaultStrokeWidth;
+  const radius = (svgSize - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - percentage / 100 * circumference;
+  const sizeClass = size === "sm" ? styles.circularSm : size === "lg" ? styles.circularLg : styles.circularMd;
+  const indicatorClasses = [
+    styles.circularIndicator,
+    variant === "success" && styles.circularIndicatorSuccess,
+    variant === "warning" && styles.circularIndicatorWarning,
+    variant === "danger" && styles.circularIndicatorDanger,
+    isIndeterminate && styles.circularIndicatorIndeterminate
+  ].filter(Boolean).join(" ");
+  const rootClasses = [styles.circular, sizeClass, className].filter(Boolean).join(" ");
+  const effectiveValueText = ariaValueText || (isIndeterminate ? "Loading" : `${Math.round(percentage)} percent`);
+  return /* @__PURE__ */ jsxs(
+    Progress$1.Root,
+    {
+      ...htmlProps,
+      value,
+      min: 0,
+      max: 100,
+      className: rootClasses,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-valuenow": isIndeterminate ? void 0 : percentage,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": effectiveValueText,
+      "aria-busy": isIndeterminate,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: styles.circularSvg,
+            width: svgSize,
+            height: svgSize,
+            viewBox: `0 0 ${svgSize} ${svgSize}`,
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: styles.circularTrack,
+                  cx: svgSize / 2,
+                  cy: svgSize / 2,
+                  r: radius,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: indicatorClasses,
+                  cx: svgSize / 2,
+                  cy: svgSize / 2,
+                  r: radius,
+                  strokeWidth,
+                  strokeDasharray: circumference,
+                  strokeDashoffset: isIndeterminate ? void 0 : offset,
+                  style: isIndeterminate ? { transformOrigin: "center" } : void 0
+                }
+              )
+            ]
+          }
+        ),
+        showValue && !isIndeterminate && /* @__PURE__ */ jsxs("span", { className: styles.circularValue, "aria-hidden": "true", children: [
+          Math.round(percentage),
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+const CircularProgress = CircularProgressRoot;
+const Progress = Object.assign(ProgressRoot, {
+  Root: ProgressRoot,
+  Circular: CircularProgressRoot
+});
+export {
+  CircularProgress,
+  Progress
+};

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const prompt = "_prompt_ntqxa_1";
+const fixed = "_fixed_ntqxa_60";
+const sticky = "_sticky_ntqxa_71";
+const textarea = "_textarea_ntqxa_86";
+const tabs = "_tabs_ntqxa_127";
+const tabsInner = "_tabsInner_ntqxa_135";
+const tabButton = "_tabButton_ntqxa_145";
+const tabButtonActive = "_tabButtonActive_ntqxa_174";
+const toolbar = "_toolbar_ntqxa_179";
+const actions = "_actions_ntqxa_189";
+const info = "_info_ntqxa_196";
+const actionButton = "_actionButton_ntqxa_203";
+const modeButton = "_modeButton_ntqxa_249";
+const modeButtonActive = "_modeButtonActive_ntqxa_292";
+const usage = "_usage_ntqxa_297";
+const submit = "_submit_ntqxa_304";
+const submitLoading = "_submitLoading_ntqxa_353";
+const submitSpinner = "_submitSpinner_ntqxa_357";
+const styles = {
+  prompt,
+  fixed,
+  sticky,
+  textarea,
+  tabs,
+  tabsInner,
+  tabButton,
+  tabButtonActive,
+  toolbar,
+  actions,
+  info,
+  actionButton,
+  modeButton,
+  modeButtonActive,
+  usage,
+  submit,
+  submitLoading,
+  submitSpinner
+};
+exports.actionButton = actionButton;
+exports.actions = actions;
+exports.default = styles;
+exports.fixed = fixed;
+exports.info = info;
+exports.modeButton = modeButton;
+exports.modeButtonActive = modeButtonActive;
+exports.prompt = prompt;
+exports.sticky = sticky;
+exports.submit = submit;
+exports.submitLoading = submitLoading;
+exports.submitSpinner = submitSpinner;
+exports.tabButton = tabButton;
+exports.tabButtonActive = tabButtonActive;
+exports.tabs = tabs;
+exports.tabsInner = tabsInner;
+exports.textarea = textarea;
+exports.toolbar = toolbar;
+exports.usage = usage;

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

@@ -0,0 +1,59 @@
+const prompt = "_prompt_ntqxa_1";
+const fixed = "_fixed_ntqxa_60";
+const sticky = "_sticky_ntqxa_71";
+const textarea = "_textarea_ntqxa_86";
+const tabs = "_tabs_ntqxa_127";
+const tabsInner = "_tabsInner_ntqxa_135";
+const tabButton = "_tabButton_ntqxa_145";
+const tabButtonActive = "_tabButtonActive_ntqxa_174";
+const toolbar = "_toolbar_ntqxa_179";
+const actions = "_actions_ntqxa_189";
+const info = "_info_ntqxa_196";
+const actionButton = "_actionButton_ntqxa_203";
+const modeButton = "_modeButton_ntqxa_249";
+const modeButtonActive = "_modeButtonActive_ntqxa_292";
+const usage = "_usage_ntqxa_297";
+const submit = "_submit_ntqxa_304";
+const submitLoading = "_submitLoading_ntqxa_353";
+const submitSpinner = "_submitSpinner_ntqxa_357";
+const styles = {
+  prompt,
+  fixed,
+  sticky,
+  textarea,
+  tabs,
+  tabsInner,
+  tabButton,
+  tabButtonActive,
+  toolbar,
+  actions,
+  info,
+  actionButton,
+  modeButton,
+  modeButtonActive,
+  usage,
+  submit,
+  submitLoading,
+  submitSpinner
+};
+export {
+  actionButton,
+  actions,
+  styles as default,
+  fixed,
+  info,
+  modeButton,
+  modeButtonActive,
+  prompt,
+  sticky,
+  submit,
+  submitLoading,
+  submitSpinner,
+  tabButton,
+  tabButtonActive,
+  tabs,
+  tabsInner,
+  textarea,
+  toolbar,
+  usage
+};

package/dist/components/Prompt/index.cjs

@@ -0,0 +1,322 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Prompt_module = require("./Prompt.module.scss.cjs");
+const index = require("../Loading/index.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function ArrowUpIcon() {
+  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,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z" })
+    }
+  );
+}
+const PromptContext = React__namespace.createContext(null);
+function usePromptContext() {
+  const context = React__namespace.useContext(PromptContext);
+  if (!context) {
+    throw new Error("Prompt compound components must be used within a Prompt");
+  }
+  return context;
+}
+function useControllableState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const setValue = React__namespace.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
+function PromptRoot({
+  children,
+  value: controlledValue,
+  defaultValue = "",
+  onChange,
+  onSubmit,
+  placeholder = "Ask, Search or Chat...",
+  disabled = false,
+  loading = false,
+  minRows = 1,
+  maxRows = 8,
+  autoResize = true,
+  submitOnEnter = true,
+  variant = "default",
+  className,
+  ...htmlProps
+}) {
+  const textareaRef = React__namespace.useRef(null);
+  const [value, setValue] = useControllableState(
+    controlledValue,
+    defaultValue,
+    onChange
+  );
+  const handleSubmit = React__namespace.useCallback(() => {
+    if (disabled || loading || !value.trim()) return;
+    onSubmit == null ? void 0 : onSubmit(value);
+  }, [disabled, loading, value, onSubmit]);
+  const contextValue = {
+    value,
+    setValue,
+    placeholder,
+    disabled,
+    loading,
+    minRows,
+    maxRows,
+    autoResize,
+    submitOnEnter,
+    handleSubmit,
+    textareaRef
+  };
+  const classes = [
+    Prompt_module.default.prompt,
+    variant === "fixed" && Prompt_module.default.fixed,
+    variant === "sticky" && Prompt_module.default.sticky,
+    disabled && Prompt_module.default.disabled,
+    loading && Prompt_module.default.loading,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(PromptContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      "data-disabled": disabled || void 0,
+      "data-loading": loading || void 0,
+      "data-variant": variant,
+      children
+    }
+  ) });
+}
+function PromptTextarea({
+  placeholder: overridePlaceholder,
+  className,
+  onChange,
+  onKeyDown,
+  "aria-label": ariaLabel,
+  ...htmlProps
+}) {
+  const {
+    value,
+    setValue,
+    placeholder,
+    disabled,
+    loading,
+    minRows,
+    maxRows,
+    autoResize,
+    submitOnEnter,
+    handleSubmit,
+    textareaRef
+  } = usePromptContext();
+  const lineHeight = 1.5;
+  const padding = 12;
+  const adjustHeight = React__namespace.useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || !autoResize) return;
+    textarea.style.height = "auto";
+    const computedStyle = window.getComputedStyle(textarea);
+    const fontSize = parseFloat(computedStyle.fontSize);
+    const minHeight = minRows * fontSize * lineHeight + padding;
+    const maxHeight = maxRows * fontSize * lineHeight + padding;
+    const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+    textarea.style.height = `${newHeight}px`;
+  }, [textareaRef, autoResize, minRows, maxRows]);
+  React__namespace.useEffect(() => {
+    adjustHeight();
+  }, [value, adjustHeight]);
+  const handleChange = (e) => {
+    onChange == null ? void 0 : onChange(e);
+    if (e.defaultPrevented) return;
+    setValue(e.target.value);
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown == null ? void 0 : onKeyDown(e);
+    if (e.defaultPrevented) return;
+    if (submitOnEnter && e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const classes = [Prompt_module.default.textarea, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      ...htmlProps,
+      className: classes,
+      value,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder: overridePlaceholder ?? placeholder,
+      disabled: disabled || loading,
+      rows: minRows,
+      "aria-label": ariaLabel ?? overridePlaceholder ?? placeholder
+    }
+  );
+}
+function PromptToolbar({ children, className }) {
+  const classes = [Prompt_module.default.toolbar, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+}
+function PromptTabs({ children, className }) {
+  const classes = [Prompt_module.default.tabs, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Prompt_module.default.tabsInner, children }) });
+}
+function PromptTab({ children, active = false, onClick, className }) {
+  const classes = [
+    Prompt_module.default.tabButton,
+    active && Prompt_module.default.tabButtonActive,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: classes, onClick, "aria-pressed": active, children });
+}
+function PromptActions({ children, className }) {
+  if (!children) return null;
+  const classes = [Prompt_module.default.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+}
+function PromptInfo({ children, className }) {
+  const classes = [Prompt_module.default.info, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+}
+function PromptActionButton({
+  children,
+  "aria-label": ariaLabel,
+  onClick,
+  disabled: buttonDisabled,
+  className
+}) {
+  const { disabled, loading } = usePromptContext();
+  const isDisabled = disabled || loading || buttonDisabled;
+  const classes = [Prompt_module.default.actionButton, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick,
+      disabled: isDisabled,
+      "aria-label": ariaLabel,
+      children
+    }
+  );
+}
+function PromptModeButton({
+  children,
+  onClick,
+  active = false,
+  disabled: buttonDisabled,
+  className
+}) {
+  const { disabled, loading } = usePromptContext();
+  const isDisabled = disabled || loading || buttonDisabled;
+  const classes = [
+    Prompt_module.default.modeButton,
+    active && Prompt_module.default.modeButtonActive,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick,
+      disabled: isDisabled,
+      "aria-pressed": active,
+      children
+    }
+  );
+}
+function PromptUsage({ children, className }) {
+  const classes = [Prompt_module.default.usage, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes, children });
+}
+function PromptSubmit({
+  children,
+  "aria-label": ariaLabel = "Submit",
+  className
+}) {
+  const { disabled, loading, handleSubmit, value } = usePromptContext();
+  const isDisabled = disabled || loading || !value.trim();
+  const classes = [
+    Prompt_module.default.submit,
+    loading && Prompt_module.default.submitLoading,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: handleSubmit,
+      disabled: isDisabled,
+      "aria-label": ariaLabel,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+        index.Loading,
+        {
+          size: "sm",
+          variant: "spinner",
+          color: "current",
+          label: "Submitting",
+          className: Prompt_module.default.submitSpinner
+        }
+      ) : children ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, {})
+    }
+  );
+}
+const Prompt = Object.assign(PromptRoot, {
+  Textarea: PromptTextarea,
+  Toolbar: PromptToolbar,
+  Tabs: PromptTabs,
+  Tab: PromptTab,
+  Actions: PromptActions,
+  Info: PromptInfo,
+  ActionButton: PromptActionButton,
+  ModeButton: PromptModeButton,
+  Usage: PromptUsage,
+  Submit: PromptSubmit
+});
+exports.Prompt = Prompt;
+exports.PromptActionButton = PromptActionButton;
+exports.PromptActions = PromptActions;
+exports.PromptInfo = PromptInfo;
+exports.PromptModeButton = PromptModeButton;
+exports.PromptRoot = PromptRoot;
+exports.PromptSubmit = PromptSubmit;
+exports.PromptTab = PromptTab;
+exports.PromptTabs = PromptTabs;
+exports.PromptTextarea = PromptTextarea;
+exports.PromptToolbar = PromptToolbar;
+exports.PromptUsage = PromptUsage;
+exports.usePromptContext = usePromptContext;