@facter/ds-core 1.9.0 → 1.11.0

package/dist/index.d.mts

@@ -896,6 +896,8 @@ interface FormSelectProps<T extends FieldValues = FieldValues> extends BaseField
     }>;
     hideError?: boolean;
     selectSize?: 'sm' | 'default' | 'lg';
+    /** Render as dropdown (default) or visual card grid */
+    variant?: 'default' | 'card';
 }
 interface FormTextareaProps<T extends FieldValues = FieldValues> extends BaseFieldProps<T>, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'> {
     hideError?: boolean;
@@ -927,7 +929,7 @@ declare namespace FormInput {
     var displayName: string;
 }
 
-declare function FormSelect<T extends FieldValues = FieldValues>({ name, label, description, required, disabled, className, options, placeholder, icon, hideError, selectSize, emptyText, loading, }: FormSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function FormSelect<T extends FieldValues = FieldValues>({ name, label, description, required, disabled, className, options, placeholder, icon, hideError, selectSize, emptyText, loading, variant, }: FormSelectProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace FormSelect {
     var displayName: string;
 }
@@ -2535,6 +2537,8 @@ interface FloatingBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     visible?: boolean;
     /** Position on screen */
     position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
+    /** Additional classes for the outer positioning wrapper */
+    wrapperClassName?: string;
 }
 declare const actionVariants: (props?: ({
     variant?: "default" | "destructive" | "ghost" | "success" | null | undefined;

package/dist/index.d.ts

@@ -896,6 +896,8 @@ interface FormSelectProps<T extends FieldValues = FieldValues> extends BaseField
     }>;
     hideError?: boolean;
     selectSize?: 'sm' | 'default' | 'lg';
+    /** Render as dropdown (default) or visual card grid */
+    variant?: 'default' | 'card';
 }
 interface FormTextareaProps<T extends FieldValues = FieldValues> extends BaseFieldProps<T>, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'> {
     hideError?: boolean;
@@ -927,7 +929,7 @@ declare namespace FormInput {
     var displayName: string;
 }
 
-declare function FormSelect<T extends FieldValues = FieldValues>({ name, label, description, required, disabled, className, options, placeholder, icon, hideError, selectSize, emptyText, loading, }: FormSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function FormSelect<T extends FieldValues = FieldValues>({ name, label, description, required, disabled, className, options, placeholder, icon, hideError, selectSize, emptyText, loading, variant, }: FormSelectProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace FormSelect {
     var displayName: string;
 }
@@ -2535,6 +2537,8 @@ interface FloatingBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     visible?: boolean;
     /** Position on screen */
     position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
+    /** Additional classes for the outer positioning wrapper */
+    wrapperClassName?: string;
 }
 declare const actionVariants: (props?: ({
     variant?: "default" | "destructive" | "ghost" | "success" | null | undefined;

package/dist/index.js

@@ -16,10 +16,10 @@ var DialogPrimitive = require('@radix-ui/react-dialog');
 var sonner = require('sonner');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var reactHookForm = require('react-hook-form');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var PopoverPrimitive = require('@radix-ui/react-popover');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
@@ -50,10 +50,10 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
-var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
@@ -3239,6 +3239,22 @@ function FormInput({
   ) });
 }
 FormInput.displayName = "Form.Input";
+var Popover = PopoverPrimitive__namespace.Root;
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverContent = React10__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  PopoverPrimitive__namespace.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
 function FormSelect({
   name,
   label,
@@ -3252,7 +3268,8 @@ function FormSelect({
   hideError = false,
   selectSize = "default",
   emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
-  loading = false
+  loading = false,
+  variant = "default"
 }) {
   const form = reactHookForm.useFormContext();
   const fieldState = form.getFieldState(name, form.formState);
@@ -3263,7 +3280,19 @@ function FormSelect({
       control: form.control,
       name,
       render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-1", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        variant === "card" ? /* @__PURE__ */ jsxRuntime.jsx(
+          CardSelect,
+          {
+            options,
+            value: field.value,
+            onChange: (v) => field.onChange(v || void 0),
+            disabled,
+            label,
+            required,
+            error: !!error,
+            placeholder
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           Select,
           {
             value: field.value ?? "",
@@ -3301,6 +3330,98 @@ function FormSelect({
   ) });
 }
 FormSelect.displayName = "Form.Select";
+function CardSelect({
+  options,
+  value,
+  onChange,
+  disabled,
+  label,
+  required,
+  error,
+  placeholder = "Selecione..."
+}) {
+  const [open, setOpen] = React10__namespace.useState(false);
+  const selected = options.find((o) => o.value === value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "flex w-full items-center justify-between rounded-md border-2 bg-background px-3 text-sm transition-colors",
+            "focus:outline-none focus:border-primary",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            label ? "h-12 pt-4 pb-2" : "h-9 py-2",
+            error ? "border-red-500" : "border-border",
+            open && !error && "border-primary"
+          ),
+          children: [
+            selected ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+              selected.icon && /* @__PURE__ */ jsxRuntime.jsx(selected.icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selected.label })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: placeholder }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      label && /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          className: cn(
+            "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 pointer-events-none",
+            error ? "text-red-500" : "text-foreground"
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        align: "start",
+        className: "p-2 overflow-y-auto",
+        style: {
+          width: "var(--radix-popover-trigger-width)",
+          maxHeight: "var(--radix-popover-content-available-height)"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border/50", children: options.map((option) => {
+          const isSelected = value === option.value;
+          const isDisabled = option.disabled || disabled;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: isDisabled,
+              onClick: () => {
+                onChange(option.value);
+                setOpen(false);
+              },
+              className: cn(
+                "flex w-full items-center gap-3 p-3 text-left transition-all",
+                "cursor-pointer hover:bg-accent",
+                isSelected && "bg-primary/5",
+                isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent"
+              ),
+              children: [
+                option.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(option.icon, { className: "h-5 w-5 text-primary" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium leading-tight", children: option.label }),
+                  option.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs leading-tight text-muted-foreground", children: option.description })
+                ] }),
+                isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" }) })
+              ]
+            },
+            option.value
+          );
+        }) })
+      }
+    )
+  ] });
+}
 function FormTextarea({
   name,
   label,
@@ -3862,22 +3983,6 @@ var DropdownMenuShortcut = ({
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var Popover = PopoverPrimitive__namespace.Root;
-var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React10__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  PopoverPrimitive__namespace.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var TooltipRoot = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
@@ -7724,30 +7829,35 @@ var Wizard = Object.assign(WizardRoot, {
   Progress: WizardProgress
 });
 var positionClasses = {
-  "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
+  "bottom-center": "bottom-6 inset-x-0 flex justify-center",
   "bottom-left": "bottom-6 left-6",
   "bottom-right": "bottom-6 right-6"
 };
 var FloatingBar = React10__namespace.forwardRef(
-  ({ className, visible = true, position = "bottom-center", children, style, ...props }, ref) => {
+  ({ className, visible = true, position = "bottom-center", wrapperClassName, children, style, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: cn("fixed z-50", positionClasses[position]),
+        className: cn(
+          "fixed z-50 pointer-events-none",
+          positionClasses[position],
+          wrapperClassName
+        ),
         style,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "flex items-center gap-1.5 px-2 py-1.5 rounded-full",
-              "bg-white/70 dark:bg-gray-900/70 backdrop-blur-xl",
-              "border border-white/50 dark:border-white/10",
-              "shadow-xl shadow-black/10 dark:shadow-black/30",
-              "ring-1 ring-black/5 dark:ring-white/5",
-              "transition-all duration-300 ease-out",
-              visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0 pointer-events-none",
+              "pointer-events-auto",
+              "flex items-center gap-2 px-4 py-2.5 rounded-full",
+              "bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl",
+              "border border-white/60 dark:border-white/10",
+              "shadow-2xl shadow-black/15 dark:shadow-black/40",
+              "ring-1 ring-black/[0.06] dark:ring-white/[0.06]",
+              "transition-all duration-300",
+              visible ? "translate-y-0 opacity-100 scale-100" : "translate-y-6 opacity-0 scale-95 pointer-events-none",
               className
             ),
             children
@@ -7759,18 +7869,18 @@ var FloatingBar = React10__namespace.forwardRef(
 );
 FloatingBar.displayName = "FloatingBar";
 var actionVariants = classVarianceAuthority.cva(
-  "inline-flex items-center gap-2 rounded-full font-medium transition-all duration-150 active:scale-[0.97] disabled:opacity-50 disabled:pointer-events-none",
+  "inline-flex items-center gap-2 rounded-full font-medium transition-all duration-150 active:scale-[0.97] disabled:opacity-50 disabled:pointer-events-none cursor-pointer",
   {
     variants: {
       variant: {
-        default: "bg-primary hover:bg-primary/90 text-primary-foreground",
-        success: "bg-emerald-600 hover:bg-emerald-700 text-white",
-        destructive: "bg-red-600 hover:bg-red-700 text-white",
+        default: "bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm",
+        success: "bg-emerald-600 hover:bg-emerald-700 text-white shadow-sm shadow-emerald-600/20",
+        destructive: "bg-red-600 hover:bg-red-700 text-white shadow-sm shadow-red-600/20",
         ghost: "hover:bg-accent text-foreground"
       },
       size: {
-        default: "h-8 px-4 text-sm",
-        sm: "h-7 px-3 text-xs"
+        default: "h-9 px-5 text-sm",
+        sm: "h-8 px-4 text-xs"
       }
     },
     defaultVariants: {
@@ -7788,7 +7898,7 @@ var FloatingBarAction = React10__namespace.forwardRef(
         className: cn(actionVariants({ variant, size, className })),
         ...props,
         children: [
-          Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-3.5 w-3.5" }),
+          Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children })
         ]
       }
@@ -7797,7 +7907,7 @@ var FloatingBarAction = React10__namespace.forwardRef(
 );
 FloatingBarAction.displayName = "FloatingBarAction";
 var iconActionVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center rounded-full transition-colors duration-150 disabled:opacity-50 disabled:pointer-events-none",
+  "inline-flex items-center justify-center rounded-full transition-colors duration-150 cursor-pointer disabled:opacity-50 disabled:pointer-events-none",
   {
     variants: {
       variant: {
@@ -7807,8 +7917,8 @@ var iconActionVariants = classVarianceAuthority.cva(
         danger: "text-muted-foreground hover:text-destructive hover:bg-destructive/10"
       },
       size: {
-        default: "h-8 w-8",
-        sm: "h-7 w-7"
+        default: "h-9 w-9",
+        sm: "h-8 w-8"
       }
     },
     defaultVariants: {
@@ -7839,7 +7949,7 @@ var FloatingBarDivider = React10__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn("w-px h-5 bg-border mx-0.5", className),
+        className: cn("w-px h-6 bg-border/60 mx-0.5", className),
         ...props
       }
     );