@facter/ds-core 1.34.0 → 1.35.0

package/dist/index.mjs

@@ -32,7 +32,7 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var buttonVariants = 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: {
@@ -3042,6 +3042,163 @@ var toast = Object.assign(
     promise: (promise, options) => toast$1.promise(promise, options)
   }
 );
+var NumberStepper = React10.forwardRef(
+  ({
+    value = 1,
+    onChange,
+    onBlur,
+    min = 0,
+    max,
+    step = 0.5,
+    defaultValue,
+    label,
+    required,
+    disabled,
+    error,
+    labelSuffix,
+    className,
+    name
+  }, ref) => {
+    const inputRef = React10.useRef(null);
+    const [displayValue, setDisplayValue] = React10.useState(String(value));
+    const [isFocused, setIsFocused] = React10.useState(false);
+    React10.useImperativeHandle(ref, () => inputRef.current, []);
+    React10.useEffect(() => {
+      if (!isFocused) {
+        setDisplayValue(String(value));
+      }
+    }, [value, isFocused]);
+    const canDecrement = value - step >= min;
+    const canIncrement = max === void 0 || value + step <= max;
+    const handleDecrement = React10.useCallback(() => {
+      if (!canDecrement || disabled) return;
+      const newValue = Math.round((value - step) * 1e3) / 1e3;
+      onChange?.(newValue);
+    }, [value, step, min, disabled, onChange, canDecrement]);
+    const handleIncrement = React10.useCallback(() => {
+      if (!canIncrement || disabled) return;
+      const newValue = Math.round((value + step) * 1e3) / 1e3;
+      onChange?.(newValue);
+    }, [value, step, max, disabled, onChange, canIncrement]);
+    const handleInputChange = React10.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.useCallback(() => {
+      setIsFocused(true);
+    }, []);
+    const handleInputBlur = React10.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__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ 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__ */ 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__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border shrink-0" }),
+            /* @__PURE__ */ 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__ */ jsx("div", { className: "w-px h-6 bg-border shrink-0" }),
+            /* @__PURE__ */ 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__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                  /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+                ] })
+              }
+            )
+          ]
+        }
+      ),
+      label && /* @__PURE__ */ 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__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" }),
+            labelSuffix
+          ]
+        }
+      )
+    ] });
+  }
+);
+NumberStepper.displayName = "NumberStepper";
 var switchVariants = cva(
   [
     "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
@@ -3853,7 +4010,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) => {
@@ -4196,7 +4355,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) => {
@@ -4562,6 +4723,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 = useFormContext();
+  const fieldState = form.getFieldState(name, form.formState);
+  const error = fieldState.error?.message;
+  return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control: form.control,
+      name,
+      render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
+        /* @__PURE__ */ 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__ */ jsx(FieldTooltipIcon, { tooltip }) : void 0
+          }
+        ),
+        description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-1", children: description }),
+        !hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500 px-1", children: error })
+      ] })
+    }
+  ) });
+}
+FormNumberStepper.displayName = "Form.NumberStepper";
 function FormRoot({
   form,
   onSubmit,
@@ -4590,6 +4800,7 @@ var Form = Object.assign(FormRoot, {
   Checkbox: FormCheckbox,
   Switch: FormSwitch,
   RadioGroup: FormRadioGroup,
+  NumberStepper: FormNumberStepper,
   // Partes auxiliares
   Label: FormLabel,
   Description: FormDescription,
@@ -8983,6 +9194,6 @@ var THEME_INFO = {
   }
 };
 
-export { AuthLayout, Avatar, AvatarFallback, AvatarImage, Badge, BigNumberCard, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DENSITY_CONFIG, DashboardLayout, DataTable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FACTER_THEMES, FloatingBarCompound as FloatingBar, FloatingBarAction, FloatingBarCounter, FloatingBarDivider, FloatingBarIconAction, Form, FormCheckbox, FormDescription, FormError, FormFieldProvider, FormFieldWrapper, FormInput, FormLabel, FormRadioGroup, FormSelect, FormSwitch, FormTextarea, GlobalLoaderController, Input, ItemCard, ItemCardActionButton, ItemCardActions, ItemCardActionsRow, ItemCardBadge, ItemCardContent, ItemCardContentItem, ItemCardEmpty, ItemCardFooter, ItemCardFooterDivider, ItemCardFooterItem, ItemCardHeader, ItemCardIcon, ItemCardRoot, ItemCardSubtitle, ItemCardTitle, ItemCardTitleGroup, Kanban, Loader, LoaderProvider, Logo, MobileNav, MobileNavItem, Navbar, NavbarCompanyProfile, NavbarNotification, NavbarUserMenu, PageHeader, Popover, PopoverContent, PopoverTrigger, RippleBackground, RippleEffect, RippleWrapper, ScrollArea, ScrollBar, SectionHeader, SectionHeaderActions, SectionHeaderBadge, SectionHeaderContent, SectionHeaderIcon, SectionHeaderRoot, SectionHeaderSubtitle, SectionHeaderTitle, Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectionLayout, Separator3 as Separator, Sidebar, SimpleTooltip, Skeleton, Sparkline, StatsCard, Switch, THEME_INFO, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Toaster, Tooltip, TooltipAction, TooltipActions, TooltipArrow, TooltipContent, TooltipDescription, TooltipHeader, TooltipIcon, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTitle, TooltipTrigger, Wizard, WizardContent, WizardNavigation, WizardPanel, WizardProgress, WizardProvider, WizardStepConnector, WizardStepIndicator, WizardSteps, cn, itemCardBadgeVariants, itemCardIconVariants, itemCardVariants, loader, toast, useAutoPageSize, useAvailableHeight, useDashboardLayout, useDataTable, useDataTableColumnVisibility, useDataTableDensity, useDataTableEmpty, useDataTableInstance, useDataTableLoading, useDataTableMeta, useDataTablePagination, useDataTableSelection, useDataTableSorting, useDataTableState, useDebounce, useDebouncedCallback, useFormFieldContext, useItemCard, useKanban, useKanbanOptional, useLoader, useMediaQuery2 as useMediaQuery, useSidebar, useSidebarOptional, useTheme, useWizardContext, useWizardContextOptional };
+export { AuthLayout, Avatar, AvatarFallback, AvatarImage, Badge, BigNumberCard, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DENSITY_CONFIG, DashboardLayout, DataTable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FACTER_THEMES, FloatingBarCompound as FloatingBar, FloatingBarAction, FloatingBarCounter, FloatingBarDivider, FloatingBarIconAction, Form, FormCheckbox, FormDescription, FormError, FormFieldProvider, FormFieldWrapper, FormInput, FormLabel, FormMultiSelect, FormNumberStepper, FormRadioGroup, FormSelect, FormSwitch, FormTextarea, GlobalLoaderController, Input, ItemCard, ItemCardActionButton, ItemCardActions, ItemCardActionsRow, ItemCardBadge, ItemCardContent, ItemCardContentItem, ItemCardEmpty, ItemCardFooter, ItemCardFooterDivider, ItemCardFooterItem, ItemCardHeader, ItemCardIcon, ItemCardRoot, ItemCardSubtitle, ItemCardTitle, ItemCardTitleGroup, Kanban, Loader, LoaderProvider, Logo, MobileNav, MobileNavItem, Navbar, NavbarCompanyProfile, NavbarNotification, NavbarUserMenu, NumberStepper, PageHeader, Popover, PopoverContent, PopoverTrigger, RippleBackground, RippleEffect, RippleWrapper, ScrollArea, ScrollBar, SectionHeader, SectionHeaderActions, SectionHeaderBadge, SectionHeaderContent, SectionHeaderIcon, SectionHeaderRoot, SectionHeaderSubtitle, SectionHeaderTitle, Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectionLayout, Separator3 as Separator, Sidebar, SimpleTooltip, Skeleton, Sparkline, StatsCard, Switch, THEME_INFO, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Toaster, Tooltip, TooltipAction, TooltipActions, TooltipArrow, TooltipContent, TooltipDescription, TooltipHeader, TooltipIcon, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTitle, TooltipTrigger, Wizard, WizardContent, WizardNavigation, WizardPanel, WizardProgress, WizardProvider, WizardStepConnector, WizardStepIndicator, WizardSteps, cn, itemCardBadgeVariants, itemCardIconVariants, itemCardVariants, loader, toast, useAutoPageSize, useAvailableHeight, useDashboardLayout, useDataTable, useDataTableColumnVisibility, useDataTableDensity, useDataTableEmpty, useDataTableInstance, useDataTableLoading, useDataTableMeta, useDataTablePagination, useDataTableSelection, useDataTableSorting, useDataTableState, useDebounce, useDebouncedCallback, useFormFieldContext, useItemCard, useKanban, useKanbanOptional, useLoader, useMediaQuery2 as useMediaQuery, useSidebar, useSidebarOptional, useTheme, useWizardContext, useWizardContextOptional };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map