@facter/ds-core 1.34.0 → 1.35.0

package/dist/index.js

@@ -63,7 +63,7 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-70",
   {
     variants: {
       variant: {
@@ -3073,6 +3073,163 @@ var toast = Object.assign(
     promise: (promise, options) => sonner.toast.promise(promise, options)
   }
 );
+var NumberStepper = React10__namespace.forwardRef(
+  ({
+    value = 1,
+    onChange,
+    onBlur,
+    min = 0,
+    max,
+    step = 0.5,
+    defaultValue,
+    label,
+    required,
+    disabled,
+    error,
+    labelSuffix,
+    className,
+    name
+  }, ref) => {
+    const inputRef = React10__namespace.useRef(null);
+    const [displayValue, setDisplayValue] = React10__namespace.useState(String(value));
+    const [isFocused, setIsFocused] = React10__namespace.useState(false);
+    React10__namespace.useImperativeHandle(ref, () => inputRef.current, []);
+    React10__namespace.useEffect(() => {
+      if (!isFocused) {
+        setDisplayValue(String(value));
+      }
+    }, [value, isFocused]);
+    const canDecrement = value - step >= min;
+    const canIncrement = max === void 0 || value + step <= max;
+    const handleDecrement = React10__namespace.useCallback(() => {
+      if (!canDecrement || disabled) return;
+      const newValue = Math.round((value - step) * 1e3) / 1e3;
+      onChange?.(newValue);
+    }, [value, step, min, disabled, onChange, canDecrement]);
+    const handleIncrement = React10__namespace.useCallback(() => {
+      if (!canIncrement || disabled) return;
+      const newValue = Math.round((value + step) * 1e3) / 1e3;
+      onChange?.(newValue);
+    }, [value, step, max, disabled, onChange, canIncrement]);
+    const handleInputChange = React10__namespace.useCallback(
+      (e) => {
+        const raw = e.target.value;
+        setDisplayValue(raw);
+        if (raw === "" || raw === "-" || raw === ".") return;
+        const parsed = parseFloat(raw);
+        if (isNaN(parsed)) return;
+        onChange?.(parsed);
+      },
+      [onChange]
+    );
+    const handleInputFocus = React10__namespace.useCallback(() => {
+      setIsFocused(true);
+    }, []);
+    const handleInputBlur = React10__namespace.useCallback(() => {
+      setIsFocused(false);
+      const parsed = parseFloat(displayValue);
+      if (isNaN(parsed) || displayValue === "") {
+        const resetValue = defaultValue ?? min;
+        setDisplayValue(String(resetValue));
+        if (value !== resetValue) onChange?.(resetValue);
+        onBlur?.();
+        return;
+      }
+      let clamped = parsed;
+      if (clamped < min) clamped = min;
+      if (max !== void 0 && clamped > max) clamped = max;
+      setDisplayValue(String(clamped));
+      if (clamped !== value) onChange?.(clamped);
+      onBlur?.();
+    }, [displayValue, value, min, max, onChange, onBlur]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center h-12 rounded-md border-2 transition-colors overflow-hidden bg-background",
+            error ? "border-red-500 focus-within:border-red-600" : "border-border focus-within:border-primary",
+            disabled && "opacity-50 cursor-not-allowed"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                onClick: handleDecrement,
+                disabled: disabled || !canDecrement,
+                className: cn(
+                  "flex items-center justify-center w-11 h-full transition-colors select-none shrink-0",
+                  "text-muted-foreground hover:text-foreground hover:bg-muted",
+                  "disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-muted-foreground disabled:cursor-not-allowed"
+                ),
+                "aria-label": "Diminuir",
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-6 bg-border shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                name,
+                type: "text",
+                inputMode: "decimal",
+                value: displayValue,
+                onChange: handleInputChange,
+                onFocus: handleInputFocus,
+                onBlur: handleInputBlur,
+                disabled,
+                className: cn(
+                  "flex-1 min-w-0 h-full text-center text-sm font-medium bg-transparent outline-none",
+                  "disabled:cursor-not-allowed",
+                  label ? "pt-1" : ""
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-6 bg-border shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                onClick: handleIncrement,
+                disabled: disabled || !canIncrement,
+                className: cn(
+                  "flex items-center justify-center w-11 h-full transition-colors select-none shrink-0",
+                  "text-muted-foreground hover:text-foreground hover:bg-muted",
+                  "disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-muted-foreground disabled:cursor-not-allowed"
+                ),
+                "aria-label": "Aumentar",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+                ] })
+              }
+            )
+          ]
+        }
+      ),
+      label && /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          className: cn(
+            "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 cursor-pointer inline-flex items-center gap-1",
+            error ? "text-red-500" : "text-foreground"
+          ),
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-0.5", children: "*" }),
+            labelSuffix
+          ]
+        }
+      )
+    ] });
+  }
+);
+NumberStepper.displayName = "NumberStepper";
 var switchVariants = classVarianceAuthority.cva(
   [
     "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
@@ -3884,7 +4041,9 @@ function SelectDropdown({
         collisionPadding: 16,
         className: "p-0 overflow-hidden flex flex-col",
         style: {
-          width: "var(--radix-popover-trigger-width)",
+          minWidth: "var(--radix-popover-trigger-width)",
+          width: "fit-content",
+          maxWidth: "var(--radix-popover-content-available-width, 100%)",
           maxHeight: "min(340px, var(--radix-popover-content-available-height, 340px))"
         },
         onOpenAutoFocus: (e) => {
@@ -4227,7 +4386,9 @@ function MultiSelectDropdown({
         collisionPadding: 16,
         className: "p-0 overflow-hidden flex flex-col",
         style: {
-          width: "var(--radix-popover-trigger-width)",
+          minWidth: "var(--radix-popover-trigger-width)",
+          width: "fit-content",
+          maxWidth: "var(--radix-popover-content-available-width, 100%)",
           maxHeight: "min(340px, var(--radix-popover-content-available-height, 340px))"
         },
         onOpenAutoFocus: (e) => {
@@ -4593,6 +4754,55 @@ function FormRadioGroup({
   ) });
 }
 FormRadioGroup.displayName = "Form.RadioGroup";
+function FormNumberStepper({
+  name,
+  label,
+  description,
+  tooltip,
+  required,
+  disabled,
+  className,
+  min = 0,
+  max,
+  step = 0.5,
+  defaultValue,
+  hideError = false
+}) {
+  const form = reactHookForm.useFormContext();
+  const fieldState = form.getFieldState(name, form.formState);
+  const error = fieldState.error?.message;
+  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      control: form.control,
+      name,
+      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-1", className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NumberStepper,
+          {
+            ref: field.ref,
+            name: field.name,
+            value: typeof field.value === "number" ? field.value : 0,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            min,
+            max,
+            step,
+            defaultValue,
+            label,
+            required,
+            disabled,
+            error: !!error,
+            labelSuffix: tooltip ? /* @__PURE__ */ jsxRuntime.jsx(FieldTooltipIcon, { tooltip }) : void 0
+          }
+        ),
+        description && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground px-1", children: description }),
+        !hideError && error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500 px-1", children: error })
+      ] })
+    }
+  ) });
+}
+FormNumberStepper.displayName = "Form.NumberStepper";
 function FormRoot({
   form,
   onSubmit,
@@ -4621,6 +4831,7 @@ var Form = Object.assign(FormRoot, {
   Checkbox: FormCheckbox,
   Switch: FormSwitch,
   RadioGroup: FormRadioGroup,
+  NumberStepper: FormNumberStepper,
   // Partes auxiliares
   Label: FormLabel,
   Description: FormDescription,
@@ -9092,6 +9303,8 @@ exports.FormFieldProvider = FormFieldProvider;
 exports.FormFieldWrapper = FormFieldWrapper;
 exports.FormInput = FormInput;
 exports.FormLabel = FormLabel;
+exports.FormMultiSelect = FormMultiSelect;
+exports.FormNumberStepper = FormNumberStepper;
 exports.FormRadioGroup = FormRadioGroup;
 exports.FormSelect = FormSelect;
 exports.FormSwitch = FormSwitch;
@@ -9125,6 +9338,7 @@ exports.Navbar = Navbar;
 exports.NavbarCompanyProfile = NavbarCompanyProfile;
 exports.NavbarNotification = NavbarNotification;
 exports.NavbarUserMenu = NavbarUserMenu;
+exports.NumberStepper = NumberStepper;
 exports.PageHeader = PageHeader;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;