@dust-tt/sparkle 0.2.263 → 0.2.265-rc-1

package/dist/cjs/index.js

@@ -74110,7 +74110,7 @@ function getElementRef$1(element) {
 }
 
 // packages/react/primitive/src/Primitive.tsx
-var NODES$4 = [
+var NODES$5 = [
   "a",
   "button",
   "div",
@@ -74128,7 +74128,7 @@ var NODES$4 = [
   "svg",
   "ul"
 ];
-var Primitive$4 = NODES$4.reduce((primitive, node) => {
+var Primitive$5 = NODES$5.reduce((primitive, node) => {
   const Node = React__namespace.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot : node;
@@ -74255,7 +74255,7 @@ var DismissableLayer$2 = React__namespace.forwardRef(
       return () => document.removeEventListener(CONTEXT_UPDATE$2, handleUpdate);
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Primitive$4.div,
+      Primitive$5.div,
       {
         ...layerProps,
         ref: composedRefs,
@@ -74288,7 +74288,7 @@ var DismissableLayerBranch$2 = React__namespace.forwardRef((props, forwardedRef)
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Primitive$4.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ jsxRuntime.jsx(Primitive$5.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch$2.displayName = BRANCH_NAME$2;
 function usePointerDownOutside$2(onPointerDownOutside, ownerDocument = globalThis?.document) {
@@ -76334,11 +76334,11 @@ const arrow = (options, deps) => ({
 });
 
 // packages/react/arrow/src/Arrow.tsx
-var NAME$4 = "Arrow";
+var NAME$5 = "Arrow";
 var Arrow$5 = React__namespace.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Primitive$4.svg,
+    Primitive$5.svg,
     {
       ...arrowProps,
       ref: forwardedRef,
@@ -76350,8 +76350,8 @@ var Arrow$5 = React__namespace.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Arrow$5.displayName = NAME$4;
-var Root$5 = Arrow$5;
+Arrow$5.displayName = NAME$5;
+var Root$6 = Arrow$5;
 
 // packages/react/context/src/createContext.tsx
 function createContextScope$7(scopeName, createContextScopeDeps = []) {
@@ -76467,7 +76467,7 @@ var PopperAnchor$2 = React__namespace.forwardRef(
     React__namespace.useEffect(() => {
       context.onAnchorChange(virtualRef?.current || ref.current);
     });
-    return virtualRef ? null : /* @__PURE__ */ jsxRuntime.jsx(Primitive$4.div, { ...anchorProps, ref: composedRefs });
+    return virtualRef ? null : /* @__PURE__ */ jsxRuntime.jsx(Primitive$5.div, { ...anchorProps, ref: composedRefs });
   }
 );
 PopperAnchor$2.displayName = ANCHOR_NAME$4;
@@ -76594,7 +76594,7 @@ var PopperContent$2 = React__namespace.forwardRef(
             arrowY,
             shouldHideArrow: cannotCenterArrow,
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              Primitive$4.div,
+              Primitive$5.div,
               {
                 "data-side": placedSide,
                 "data-align": placedAlign,
@@ -76654,7 +76654,7 @@ var PopperArrow$2 = React__namespace.forwardRef(function PopperArrow2(props, for
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          Root$5,
+          Root$6,
           {
             ...arrowProps,
             ref: forwardedRef,
@@ -76900,11 +76900,11 @@ function useUncontrolledState$3({
 }
 
 // packages/react/visually-hidden/src/VisuallyHidden.tsx
-var NAME$3 = "VisuallyHidden";
+var NAME$4 = "VisuallyHidden";
 var VisuallyHidden = React__namespace.forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Primitive$4.span,
+      Primitive$5.span,
       {
         ...props,
         ref: forwardedRef,
@@ -76926,8 +76926,8 @@ var VisuallyHidden = React__namespace.forwardRef(
     );
   }
 );
-VisuallyHidden.displayName = NAME$3;
-var Root$4 = VisuallyHidden;
+VisuallyHidden.displayName = NAME$4;
+var Root$5 = VisuallyHidden;
 
 var [createTooltipContext, createTooltipScope] = createContextScope$8("Tooltip", [
   createPopperScope$2
@@ -77078,7 +77078,7 @@ var TooltipTrigger$1 = React__namespace.forwardRef(
       return () => document.removeEventListener("pointerup", handlePointerUp);
     }, [handlePointerUp]);
     return /* @__PURE__ */ jsxRuntime.jsx(Anchor$2, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Primitive$4.button,
+      Primitive$5.button,
       {
         "aria-describedby": context.open ? context.contentId : void 0,
         "data-state": context.stateAttribute,
@@ -77240,7 +77240,7 @@ var TooltipContentImpl = React__namespace.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Slottable, { children }),
-              /* @__PURE__ */ jsxRuntime.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntime.jsx(Root$4, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+              /* @__PURE__ */ jsxRuntime.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntime.jsx(Root$5, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
             ]
           }
         )
@@ -77410,22 +77410,16 @@ function Icon(_a) {
 }
 
 var textClasses = {
-    xs: "s-text-xs s-font-semibold",
-    sm: "s-text-sm s-font-semibold",
-    md: "s-text-base s-font-bold",
-    lg: "s-text-lg s-font-bold",
+    xs: "s-text-xs s-font-semibold s-rounded-lg",
+    sm: "s-text-sm s-font-semibold s-rounded-xl",
+    md: "s-text-base s-font-bold s-rounded-2xl",
+    lg: "s-text-lg s-font-bold s-rounded-3xl",
 };
 var sizeClasses$4 = {
-    xs: "s-gap-x-1 s-px-3 s-h-7",
-    sm: "s-gap-x-1 s-px-4 s-h-9",
-    md: "s-gap-x-1.5 s-px-5 s-h-12",
-    lg: "s-gap-x-3 s-px-6 s-h-16",
-};
-var sizeAvatarClasses = {
-    xs: "s-gap-x-1 s-pl-0.5 s-pr-3 s-py-0.5",
-    sm: "s-gap-x-1 s-pl-0.5 s-pr-4 s-py-0.5",
-    md: "s-gap-x-1.5 s-pl-1 s-pr-5 s-py-1",
-    lg: "s-gap-x-2 s-pl-0 s-pr-6 s-py-0",
+    xs: "s-gap-x-1 s-px-2 s-h-7",
+    sm: "s-gap-x-1 s-px-3 s-h-9",
+    md: "s-gap-x-1.5 s-px-4 s-h-12",
+    lg: "s-gap-x-3 s-px-5 s-h-16",
 };
 var containerClasses = {
     xs: "s-px-0.5",
@@ -77494,25 +77488,13 @@ var variantClasses$2 = {
             disabled: "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
         },
     },
-    avatar: {
-        base: "s-text-element-800 s-border-structure-200 s-bg-structure-0",
-        hover: "hover:s-bg-action-50 hover:s-text-action-500 hover:s-border-action-200",
-        active: "active:s-bg-action-100 active:s-text-action-600 active:s-border-action-500",
-        disabled: "s-text-element-500 s-border-structure-200 s-bg-structure-0",
-        dark: {
-            base: "dark:s-text-element-700-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
-            hover: "dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
-            active: "dark:active:s-bg-action-100-dark dark:active:s-border-action-500-dark",
-            disabled: "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
-        },
-    },
 };
 var transitionClasses = "s-transition-all s-ease-out s-duration-200 s-cursor-pointer";
 var magnifyingClasses = "hover:s-scale-105 hover:s-drop-shadow-md active:s-scale-100 active:s-drop-shadow-none";
 function Button(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var _o = _a.variant, variant = _o === void 0 ? "primary" : _o, _p = _a.type, type = _p === void 0 ? "button" : _p, _q = _a.size, size = _q === void 0 ? "sm" : _q, onClick = _a.onClick, _r = _a.disabled, disabled = _r === void 0 ? false : _r, _s = _a.labelVisible, labelVisible = _s === void 0 ? true : _s, label = _a.label, icon = _a.icon, _t = _a.className, className = _t === void 0 ? "" : _t, tooltipPosition = _a.tooltipPosition, _u = _a.hasMagnifying, hasMagnifying = _u === void 0 ? true : _u, _v = _a.disabledTooltip, disabledTooltip = _v === void 0 ? false : _v, avatar = _a.avatar;
-    var buttonClasses = classNames("s-inline-flex s-items-center s-border s-scale-100 s-box-border s-whitespace-nowrap s-rounded-full", !avatar ? sizeClasses$4[size] : sizeAvatarClasses[size], textClasses[size], className);
+    var _o = _a.variant, variant = _o === void 0 ? "primary" : _o, _p = _a.type, type = _p === void 0 ? "button" : _p, _q = _a.size, size = _q === void 0 ? "sm" : _q, onClick = _a.onClick, _r = _a.disabled, disabled = _r === void 0 ? false : _r, _s = _a.labelVisible, labelVisible = _s === void 0 ? true : _s, label = _a.label, icon = _a.icon, _t = _a.className, className = _t === void 0 ? "" : _t, tooltipPosition = _a.tooltipPosition, _u = _a.hasMagnifying, hasMagnifying = _u === void 0 ? false : _u, _v = _a.disabledTooltip, disabledTooltip = _v === void 0 ? false : _v;
+    var buttonClasses = classNames("s-inline-flex s-items-center s-border s-scale-100 s-box-border s-whitespace-nowrap", sizeClasses$4[size], textClasses[size], className);
     if (disabled) {
         buttonClasses = classNames(buttonClasses, (_b = variantClasses$2[variant]) === null || _b === void 0 ? void 0 : _b.disabled, (_c = variantClasses$2[variant]) === null || _c === void 0 ? void 0 : _c.dark.disabled, disabled ? "s-cursor-default" : "");
     }
@@ -77522,7 +77504,6 @@ function Button(_a) {
     var finalContainerClasses = classNames(containerClasses[size]);
     var buttonBase = (React.createElement("button", { type: "button", className: buttonClasses, onClick: onClick, disabled: disabled, "aria-label": label },
         icon && React.createElement(Icon, { visual: icon, size: size }),
-        avatar && React.createElement(Avatar, { size: size, visual: avatar, isRounded: true }),
         labelVisible ? (React.createElement("div", { className: classNames("s-truncate", finalContainerClasses) }, label)) : null,
         type === "menu" && (React.createElement(Icon, { className: "s-opacity-50", visual: ChevronDownIcon, size: size })),
         type === "select" && (React.createElement(Icon, { className: "s-opacity-60", visual: ChevronUpDownIcon, size: size }))));
@@ -113460,21 +113441,72 @@ function IconToggleButton(_a) {
     return tooltip ? (React.createElement(Tooltip, { trigger: IconButtonToggleContent, label: tooltip, side: tooltipPosition })) : (IconButtonToggleContent);
 }
 
-var sizeInputClasses = {
-    sm: "s-text-base s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
-    md: "s-text-lg s-rounded-lg s-py-2 s-pl-4 s-pr-10",
-};
+// packages/react/primitive/src/Primitive.tsx
+var NODES$4 = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive$4 = NODES$4.reduce((primitive, node) => {
+  const Node = React__namespace.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node };
+}, {});
+
+var NAME$3 = "Label";
+var Label$2 = React__namespace.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Primitive$4.label,
+    {
+      ...props,
+      ref: forwardedRef,
+      onMouseDown: (event) => {
+        const target = event.target;
+        if (target.closest("button, input, select, textarea")) return;
+        props.onMouseDown?.(event);
+        if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+      }
+    }
+  );
+});
+Label$2.displayName = NAME$3;
+var Root$4 = Label$2;
+
+var labelVariants = cn("s-text-sm s-font-medium s-text-foreground s-leading-none", "peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70");
+var Label$1 = React__namespace.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React__namespace.createElement(Root$4, __assign({ ref: ref, className: cn(labelVariants, className) }, props)));
+});
+Label$1.displayName = Root$4.displayName;
+
+var inputStyleClasses = cn("s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ", "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground", "placeholder:s-text-muted-foreground", "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-ring-ring focus-visible:s-border-primary-400", "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground");
 var Input = React.forwardRef(function (_a, ref) {
-    var placeholder = _a.placeholder, value = _a.value, _b = _a.size, size = _b === void 0 ? "sm" : _b, onChange = _a.onChange, error = _a.error, _c = _a.showErrorLabel, showErrorLabel = _c === void 0 ? false : _c, name = _a.name, _d = _a.isPassword, isPassword = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? "" : _f, label = _a.label, maxLength = _a.maxLength;
+    var className = _a.className, error = _a.error, label = _a.label, _b = _a.showErrorLabel, showErrorLabel = _b === void 0 ? false : _b, props = __rest(_a, ["className", "error", "label", "showErrorLabel"]);
     return (React.createElement("div", { className: "s-flex s-flex-col s-gap-1 s-p-px" },
-        label && (React.createElement("label", { htmlFor: name, className: "s-pb-1 s-text-sm s-font-medium s-text-element-700 dark:s-text-element-700-dark" }, label)),
-        React.createElement("input", { ref: ref, type: isPassword ? "password" : "text", name: name, id: name, maxLength: maxLength, className: classNames("s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2", "s-bg-structure-50 s-placeholder-element-700", "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark", sizeInputClasses[size], "s-transition-all s-duration-300 s-ease-out", className !== null && className !== void 0 ? className : "", !error
-                ? classNames("s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark")
-                : classNames("s-ring-warning-200 focus:s-ring-warning-300", "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"), disabled
-                ? "s-text-element-500 hover:s-cursor-not-allowed"
-                : "s-text-element-900 dark:s-text-element-800-dark"), placeholder: placeholder, value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
-                onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
-            }, "data-1p-ignore": !isPassword, disabled: disabled }),
+        label && (React.createElement(Label$1, { htmlFor: props.name, className: "s-pb-1 s-text-element-700 dark:s-text-element-700-dark" }, label)),
+        React.createElement("input", __assign({ ref: ref, className: cn(inputStyleClasses, className, !error
+                ? cn("s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark")
+                : cn("s-ring-warning-200 focus:s-ring-warning-300", "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark")), "data-1p-ignore": props.type !== "password" }, props)),
         React.createElement("div", { className: "s-ml-2 s-text-sm s-text-warning-500" }, showErrorLabel && error ? error : null)));
 });
 Input.displayName = "Input";
@@ -140507,9 +140539,9 @@ function RadioButton(_a) {
 }
 
 var sizeClasses$1 = {
-    xs: "s-text-xs s-h-[26px] s-pl-3 s-pr-6 s-pt-1.5",
-    sm: "s-text-sm s-h-[34px] s-pl-4 s-pr-8 s-pt-1.5",
-    md: "s-text-base s-h-[46px] s-pl-6 s-pr-10 s-pt-1.5",
+    xs: "s-text-xs s-h-[26px] s-pl-3 s-pr-6 s-pt-1.5 s-rounded-lg",
+    sm: "s-text-sm s-h-[34px] s-pl-4 s-pr-8 s-pt-1.5 s-rounded-xl",
+    md: "s-text-base s-h-[46px] s-pl-6 s-pr-10 s-pt-1.5 s-rounded-2xl",
 };
 var iconClasses$1 = {
     xs: "s-pr-2",
@@ -140522,7 +140554,7 @@ var Searchbar = React.forwardRef(function (_a, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange("");
     };
     return (React.createElement("div", { className: "s-relative s-m-px s-flex-grow" },
-        React.createElement("input", { type: "text", name: name, id: name, ref: ref, className: classNames("s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2", "s-w-full s-rounded-full s-bg-structure-50 s-font-normal s-placeholder-element-600", "s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark", "s-transition-all s-duration-300 s-ease-out", sizeClasses$1[size], className !== null && className !== void 0 ? className : "", disabled
+        React.createElement("input", { type: "text", name: name, id: name, ref: ref, className: classNames("s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2", "s-w-full s-bg-structure-50 s-font-normal s-placeholder-element-600", "s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark", "s-transition-all s-duration-300 s-ease-out", sizeClasses$1[size], className !== null && className !== void 0 ? className : "", disabled
                 ? "s-cursor-default s-text-element-600"
                 : "s-text-element-900"), placeholder: placeholder, value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
@@ -141206,6 +141238,7 @@ exports.IntercomLogo = IntercomLogo;
 exports.Item = Item$1;
 exports.KeyIcon = SvgKey$3;
 exports.KeyStrokeIcon = SvgKey$1;
+exports.Label = Label$1;
 exports.LightbulbIcon = SvgLightbulb$3;
 exports.LightbulbStrokeIcon = SvgLightbulb$1;
 exports.LinkIcon = SvgLink$3;