shadcn-ui-react 0.3.7 → 0.4.0

package/dist/index.cjs

@@ -167,6 +167,7 @@ __export(index_exports, {
   FormItem: () => FormItem,
   FormLabel: () => FormLabel,
   FormMessage: () => FormMessage,
+  FormSelect: () => FormSelect,
   Heading: () => Heading,
   HoverCard: () => HoverCard,
   HoverCardContent: () => HoverCardContent,
@@ -283,12 +284,14 @@ __export(index_exports, {
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  inputVariants: () => inputVariants,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
   reducer: () => reducer,
   toast: () => toast,
   toggleVariants: () => toggleVariants,
   useFormField: () => useFormField,
-  useToast: () => useToast
+  useToast: () => useToast,
+  variants: () => variants
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -5756,56 +5759,121 @@ var Form = ({
 };
 
 // src/components/Form/form-field.tsx
-var import_react_hook_form2 = require("react-hook-form");
 var import_react33 = __toESM(require("react"), 1);
-
-// src/components/Label/label.tsx
-var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
-var import_class_variance_authority4 = require("class-variance-authority");
-var React41 = __toESM(require("react"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var labelVariants = (0, import_class_variance_authority4.cva)(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-label"
-);
-var Label3 = React41.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    LabelPrimitive.Root,
-    __spreadValues({
-      ref,
-      className: cn(labelVariants(), className)
-    }, props)
-  );
-});
-Label3.displayName = LabelPrimitive.Root.displayName;
-
-// src/components/Form/form-field.tsx
+var import_react_hook_form2 = require("react-hook-form");
 var import_react_slot3 = require("@radix-ui/react-slot");
+var import_lucide_react3 = require("lucide-react");
 
 // src/components/input.tsx
-var React42 = __toESM(require("react"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Input = React42.forwardRef(
+var React41 = __toESM(require("react"), 1);
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Input = React41.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, classNameDefault, type } = _b, props = __objRest(_b, ["className", "classNameDefault", "type"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      "input",
-      __spreadValues({
-        type,
-        className: classNameDefault ? cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ) : className,
-        ref
-      }, props)
-    );
+    var _b = _a, {
+      className,
+      variant = "outline",
+      size = "md",
+      leading,
+      trailing,
+      invalid = false,
+      disabled
+    } = _b, props = __objRest(_b, [
+      "className",
+      "variant",
+      "size",
+      "leading",
+      "trailing",
+      "invalid",
+      "disabled"
+    ]);
+    const base = "block w-full bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition disabled:opacity-50 disabled:cursor-not-allowed";
+    const sizeCls = size === "sm" ? "h-9 px-3 text-sm" : size === "lg" ? "h-12 px-5 text-base" : "h-11 px-4 text-sm";
+    const variants2 = {
+      outline: "rounded-md border border-input bg-input backdrop-blur-sm shadow-sm hover:border-primary/60 focus:border-primary focus:ring-2 focus:ring-primary/20",
+      soft: "rounded-md border border-transparent bg-muted/60 hover:bg-muted shadow-sm focus:bg-input/80 focus:ring-2 focus:ring-primary/20",
+      ghost: "rounded-md border border-transparent bg-transparent hover:bg-muted/50 focus:ring-2 focus:ring-ring",
+      filled: "rounded-md border border-input bg-muted/70 hover:bg-muted shadow-inner focus:bg-input/70 focus:ring-2 focus:ring-primary/20",
+      flushed: (
+        // sin bordes laterales/superior, solo inferior; sin sombras ni radios
+        "rounded-none border-0 border-b border-input px-0 shadow-none focus:border-b-2 focus:border-primary focus:ring-0"
+      ),
+      unstyled: (
+        // sin estilos, útil para inputs embebidos o controles muy custom
+        "border-0 shadow-none focus:ring-0"
+      ),
+      link: (
+        // aspecto tipo enlace: inline height-auto, sin paddings ni borde
+        "border-0 p-0 h-auto shadow-none bg-transparent text-primary underline-offset-4 focus:underline focus:ring-0"
+      )
+    };
+    const errorCls = invalid ? "border-destructive focus:border-destructive focus:ring-destructive/20" : "";
+    const iconPadLeft = leading && variant !== "flushed" && variant !== "link" ? size === "lg" ? "pl-12" : "pl-10" : "";
+    const iconPadRight = trailing && variant !== "flushed" && variant !== "link" ? size === "lg" ? "pr-12" : "pr-10" : "";
+    const specialSizeForFlushed = variant === "flushed" ? size === "sm" ? "h-9 text-sm" : size === "lg" ? "h-12 text-base" : "h-11 text-sm" : "";
+    const specialSizeForLink = variant === "link" ? "text-sm" : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("relative", disabled && "opacity-80"), children: [
+      leading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 opacity-60",
+            size === "lg" ? "text-[1.15rem]" : "text-[1rem]",
+            // no desplazamos visualmente en variantes sin padding
+            variant === "flushed" || variant === "link" ? "hidden" : ""
+          ),
+          children: leading
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "input",
+        __spreadValues({
+          ref,
+          "aria-invalid": invalid || void 0,
+          disabled,
+          className: cn(
+            base,
+            variants2[variant],
+            variant === "flushed" ? specialSizeForFlushed : variant === "link" ? specialSizeForLink : sizeCls,
+            errorCls,
+            iconPadLeft,
+            iconPadRight,
+            className
+          )
+        }, props)
+      ),
+      trailing ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "span",
+        {
+          className: cn(
+            "absolute right-3 top-1/2 -translate-y-1/2 opacity-70",
+            size === "lg" ? "text-[1.15rem]" : "text-[1rem]",
+            variant === "flushed" || variant === "link" ? "hidden" : ""
+          ),
+          children: trailing
+        }
+      ) : null
+    ] });
   }
 );
 Input.displayName = "Input";
+Input.displayName = "Input";
 
 // src/components/Form/form-field.tsx
-var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var inputVariants = {
+  outline: "rounded-md border border-input bg-input backdrop-blur-sm shadow-sm hover:border-primary/60 focus:border-primary focus:ring-2 focus:ring-primary/20",
+  soft: "rounded-md border border-transparent bg-muted/60 hover:bg-muted shadow-sm focus:bg-input/80 focus:ring-2 focus:ring-primary/20",
+  ghost: "rounded-md border border-transparent bg-transparent hover:bg-muted/50 focus:ring-2 focus:ring-ring",
+  filled: "rounded-md border border-input bg-muted/70 hover:bg-muted shadow-inner focus:bg-input/70 focus:ring-2 focus:ring-primary/20",
+  // sin bordes laterales/superior, solo inferior; sin sombras ni radios
+  flushed: "rounded-none border-0 border-b border-input px-0 shadow-none focus:border-b-2 focus:border-primary focus:ring-0",
+  // sin estilos, útil para inputs embebidos o controles muy custom
+  unstyled: "border-0 shadow-none focus:ring-0",
+  // aspecto tipo enlace: inline height-auto, sin paddings ni borde
+  link: "border-0 p-0 h-auto shadow-none bg-transparent text-primary underline-offset-4 focus:underline focus:ring-0"
+};
+var variants = inputVariants;
 var FormFieldContext = import_react33.default.createContext(
   null
 );
@@ -5816,11 +5884,13 @@ var FormField = (_a) => {
     label,
     placeholder,
     requiredLabel,
-    className = "px-4 py-6 shadow-inner drop-shadow-xl",
+    className,
     classNameDefault,
     labelClassName,
     messageClassName,
     requiredLabelClassName,
+    variant = "outline",
+    size = "md",
     rules,
     shouldUnregister,
     defaultValue,
@@ -5836,6 +5906,8 @@ var FormField = (_a) => {
     "labelClassName",
     "messageClassName",
     "requiredLabelClassName",
+    "variant",
+    "size",
     "rules",
     "shouldUnregister",
     "defaultValue",
@@ -5846,7 +5918,7 @@ var FormField = (_a) => {
     formState: { errors }
   } = (0, import_react_hook_form2.useFormContext)();
   const fieldError = (_a2 = errors[name]) == null ? void 0 : _a2.message;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormFieldContext.Provider, { value: { name }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FormFieldContext.Provider, { value: { name }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_react_hook_form2.Controller,
     {
       control,
@@ -5854,20 +5926,29 @@ var FormField = (_a) => {
       rules,
       shouldUnregister,
       defaultValue,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormItem, { children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormLabel, { className: cn("flex items-center self-center gap-0", labelClassName), children: [
-          label,
-          requiredLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_lucide_react2.Asterisk,
-            {
-              className: cn(
-                "h-3 w-3 text-red-500 ml-[1px]",
-                requiredLabelClassName
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(FormItem, { children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          FormLabel,
+          {
+            className: cn(
+              "flex items-center gap-0 self-center",
+              labelClassName
+            ),
+            children: [
+              label,
+              requiredLabel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                import_lucide_react3.Asterisk,
+                {
+                  className: cn(
+                    "ml-[1px] h-3 w-3 text-red-500",
+                    requiredLabelClassName
+                  )
+                }
               )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Input,
           __spreadProps(__spreadValues(__spreadValues({}, field), inputProps), {
             onChange: (e) => {
@@ -5875,11 +5956,11 @@ var FormField = (_a) => {
               onChange == null ? void 0 : onChange(e.target.value);
             },
             placeholder,
-            className,
+            className: cn("bg-input px-[0.9rem] py-5", className),
             classNameDefault: classNameDefault != null ? classNameDefault : true
           })
         ) }),
-        fieldError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormMessage, { className: messageClassName, children: fieldError })
+        fieldError && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FormMessage, { className: messageClassName, children: fieldError })
       ] })
     }
   ) });
@@ -5890,30 +5971,27 @@ var FormItemContext = import_react33.default.createContext(
 var FormItem = import_react33.default.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const id = import_react33.default.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", __spreadValues({ ref, className: cn("space-y-2", className) }, props)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", __spreadValues({ ref, className: cn("space-y-2", className) }, props)) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = import_react33.default.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    Label3,
-    __spreadValues({
-      ref,
-      className: cn(error && "text-destructive", className),
-      htmlFor: formItemId
-    }, props)
-  );
-});
-FormLabel.displayName = "FormLabel";
 var useFormField = () => {
   const fieldContext = import_react33.default.useContext(FormFieldContext);
   const itemContext = import_react33.default.useContext(FormItemContext);
   const { getFieldState, formState } = (0, import_react_hook_form2.useFormContext)();
+  if (!(itemContext == null ? void 0 : itemContext.id)) {
+    const id2 = import_react33.default.useId();
+    return {
+      id: id2,
+      formItemId: `${id2}-form-item`,
+      formDescriptionId: `${id2}-form-item-description`,
+      formMessageId: `${id2}-form-item-message`,
+      error: null
+    };
+  }
   if (!fieldContext) {
     const { id: id2 } = itemContext;
     return {
-      id: itemContext.id,
+      id: id2,
       formItemId: `${id2}-form-item`,
       formDescriptionId: `${id2}-form-item-description`,
       formMessageId: `${id2}-form-item-message`,
@@ -5921,9 +5999,6 @@ var useFormField = () => {
     };
   }
   const fieldState = getFieldState(fieldContext.name, formState);
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
   const { id } = itemContext;
   return __spreadValues({
     id,
@@ -5933,10 +6008,23 @@ var useFormField = () => {
     formMessageId: `${id}-form-item-message`
   }, fieldState);
 };
+var FormLabel = import_react33.default.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    Label3,
+    __spreadValues({
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId
+    }, props)
+  );
+});
+FormLabel.displayName = "FormLabel";
 var FormControl = import_react33.default.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_react_slot3.Slot,
     __spreadValues({
       ref,
@@ -5950,12 +6038,12 @@ FormControl.displayName = "FormControl";
 var FormDescription = import_react33.default.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "p",
     __spreadValues({
       ref,
       id: formDescriptionId,
-      className: cn("text-[0.8rem] text-muted-foreground", className)
+      className: cn("text-muted-foreground text-[0.8rem]", className)
     }, props)
   );
 });
@@ -5963,32 +6051,193 @@ FormDescription.displayName = "FormDescription";
 var FormMessage = import_react33.default.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   const { error, formMessageId } = useFormField();
-  const body = error ? String(error == null ? void 0 : error.message) : children;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  const body = error ? error == null ? void 0 : error.message : children;
+  if (!body) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "p",
     __spreadProps(__spreadValues({
       ref,
       id: formMessageId,
-      className: cn("text-[0.8rem] font-medium text-destructive", className)
+      className: cn("text-destructive text-[0.8rem] font-medium", className)
     }, props), {
       children: body
     })
   );
 });
 FormMessage.displayName = "FormMessage";
+var FormSelect = ({
+  name,
+  control,
+  rules,
+  shouldUnregister,
+  defaultValue,
+  placeholder,
+  label,
+  requiredLabel,
+  className,
+  contentClassName,
+  labelClassName,
+  messageClassName,
+  requiredLabelClassName,
+  items,
+  children,
+  onChange,
+  disabled,
+  size = "md",
+  variant = "outline",
+  invalid,
+  searchable = false,
+  searchPlaceholder = "Buscar\u2026"
+}) => {
+  var _a;
+  const {
+    formState: { errors }
+  } = (0, import_react_hook_form2.useFormContext)();
+  const triggerBase = "relative inline-flex w-full items-center justify-between outline-none transition disabled:opacity-50 disabled:cursor-not-allowed text-foreground placeholder:text-muted-foreground ring-offset-background";
+  const sizeTrigger = {
+    sm: "h-9 px-3 text-sm",
+    md: "h-11 px-4 text-sm",
+    lg: "h-12 px-5 text-base"
+  };
+  const errorCls = invalid ? "ring-destructive focus:ring-destructive/40 border-destructive" : "";
+  const specialFlushed = variant === "flushed" ? size === "sm" ? "h-9 text-sm" : size === "lg" ? "h-12 text-base" : "h-11 text-sm" : "";
+  const specialLink = variant === "link" ? "text-sm" : "";
+  const contentBase = "bg-popover text-popover-foreground border border-border rounded-md shadow-md";
+  const itemSize = {
+    sm: "h-8 text-sm",
+    md: "h-9 text-sm",
+    lg: "h-10 text-base"
+  };
+  const fieldError = (_a = errors[name]) == null ? void 0 : _a.message;
+  const [query, setQuery] = import_react33.default.useState("");
+  const getOptionText = import_react33.default.useCallback((opt) => {
+    var _a2;
+    if (typeof opt.label === "string") return opt.label.toLowerCase();
+    const extra = typeof ((_a2 = opt == null ? void 0 : opt.data) == null ? void 0 : _a2.search) === "string" ? opt.data.search.toLowerCase() : "";
+    return `${opt.value}${extra}`.toLowerCase();
+  }, []);
+  const searchRef = import_react33.default.useRef(null);
+  const filteredItems = import_react33.default.useMemo(() => {
+    if (!items) return items;
+    if (!searchable || !query.trim()) return items;
+    const q = query.trim().toLowerCase();
+    return items.filter((opt) => getOptionText(opt).includes(q));
+  }, [items, searchable, query, getOptionText]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FormFieldContext.Provider, { value: { name }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_hook_form2.Controller,
+    {
+      control,
+      name,
+      rules,
+      shouldUnregister,
+      defaultValue,
+      render: ({ field }) => {
+        var _a2, _b, _c;
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(FormItem, { children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            FormLabel,
+            {
+              className: cn("flex items-center gap-0", labelClassName),
+              children: [
+                label,
+                requiredLabel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  import_lucide_react3.Asterisk,
+                  {
+                    className: cn(
+                      "ml-[4px] h-3 w-3 text-red-500",
+                      requiredLabelClassName
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            Select2,
+            {
+              value: (_a2 = field.value) != null ? _a2 : "",
+              onValueChange: (v) => {
+                field.onChange(v);
+                onChange == null ? void 0 : onChange(v);
+              },
+              disabled,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  SelectTrigger,
+                  {
+                    className: cn(
+                      triggerBase,
+                      variants[variant],
+                      variant === "flushed" ? specialFlushed : variant === "link" ? specialLink : sizeTrigger[size],
+                      errorCls,
+                      className
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectValue, { placeholder })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                  SelectContent,
+                  {
+                    className: cn(contentBase, contentClassName),
+                    onCloseAutoFocus: (e) => {
+                      e.preventDefault();
+                      requestAnimationFrame(() => {
+                        var _a3;
+                        return (_a3 = searchRef.current) == null ? void 0 : _a3.focus();
+                      });
+                    },
+                    children: [
+                      searchable && ((_b = items == null ? void 0 : items.length) != null ? _b : 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "border-border bg-popover sticky top-0 border-b p-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                        "input",
+                        {
+                          ref: searchRef,
+                          autoFocus: true,
+                          value: query,
+                          onChange: (e) => setQuery(e.target.value),
+                          placeholder: searchPlaceholder,
+                          className: cn(
+                            "border-input bg-input focus:ring-primary/20 w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2"
+                          ),
+                          onKeyDown: (e) => {
+                            if (e.key !== "Escape") e.stopPropagation();
+                          },
+                          onPointerDown: (e) => e.stopPropagation(),
+                          onClick: (e) => e.stopPropagation()
+                        }
+                      ) }),
+                      children && !searchable ? children : (_c = filteredItems != null ? filteredItems : items) == null ? void 0 : _c.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                        SelectItem,
+                        {
+                          value: opt.value,
+                          disabled: opt.disabled,
+                          className: cn(itemSize[size]),
+                          children: opt.label
+                        },
+                        opt.value
+                      ))
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          fieldError && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FormMessage, { className: messageClassName, children: fieldError })
+        ] });
+      }
+    }
+  ) });
+};
+FormSelect.displayName = "FormSelect";
 
 // src/components/hover-card.tsx
 var HoverCardPrimitive = __toESM(require("@radix-ui/react-hover-card"), 1);
-var React44 = __toESM(require("react"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var React43 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React44.forwardRef((_a, ref) => {
+var HoverCardContent = React43.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     HoverCardPrimitive.Content,
     __spreadValues({
       ref,
@@ -6004,46 +6253,46 @@ var HoverCardContent = React44.forwardRef((_a, ref) => {
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/components/icons.tsx
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var IconsApp = {
-  dashboard: import_lucide_react3.LayoutDashboardIcon,
-  logo: import_lucide_react3.Command,
-  login: import_lucide_react3.LogIn,
-  close: import_lucide_react3.X,
-  profile: import_lucide_react3.User2Icon,
-  spinner: import_lucide_react3.Loader2,
-  kanban: import_lucide_react3.CircuitBoardIcon,
-  chevronLeft: import_lucide_react3.ChevronLeft,
-  chevronRight: import_lucide_react3.ChevronRight,
-  trash: import_lucide_react3.Trash,
-  employee: import_lucide_react3.UserX2Icon,
-  post: import_lucide_react3.FileText,
-  page: import_lucide_react3.File,
-  media: import_lucide_react3.Image,
-  settings: import_lucide_react3.Settings,
-  billing: import_lucide_react3.CreditCard,
-  ellipsis: import_lucide_react3.MoreVertical,
-  add: import_lucide_react3.Plus,
-  warning: import_lucide_react3.AlertTriangle,
-  user: import_lucide_react3.User,
-  arrowRight: import_lucide_react3.ArrowRight,
-  help: import_lucide_react3.HelpCircle,
-  pizza: import_lucide_react3.Pizza,
-  sun: import_lucide_react3.SunMedium,
-  moon: import_lucide_react3.Moon,
-  laptop: import_lucide_react3.Laptop,
-  check: import_lucide_react3.Check
+  dashboard: import_lucide_react4.LayoutDashboardIcon,
+  logo: import_lucide_react4.Command,
+  login: import_lucide_react4.LogIn,
+  close: import_lucide_react4.X,
+  profile: import_lucide_react4.User2Icon,
+  spinner: import_lucide_react4.Loader2,
+  kanban: import_lucide_react4.CircuitBoardIcon,
+  chevronLeft: import_lucide_react4.ChevronLeft,
+  chevronRight: import_lucide_react4.ChevronRight,
+  trash: import_lucide_react4.Trash,
+  employee: import_lucide_react4.UserX2Icon,
+  post: import_lucide_react4.FileText,
+  page: import_lucide_react4.File,
+  media: import_lucide_react4.Image,
+  settings: import_lucide_react4.Settings,
+  billing: import_lucide_react4.CreditCard,
+  ellipsis: import_lucide_react4.MoreVertical,
+  add: import_lucide_react4.Plus,
+  warning: import_lucide_react4.AlertTriangle,
+  user: import_lucide_react4.User,
+  arrowRight: import_lucide_react4.ArrowRight,
+  help: import_lucide_react4.HelpCircle,
+  pizza: import_lucide_react4.Pizza,
+  sun: import_lucide_react4.SunMedium,
+  moon: import_lucide_react4.Moon,
+  laptop: import_lucide_react4.Laptop,
+  check: import_lucide_react4.Check
 };
 var Icons = IconsApp;
 
 // src/components/input-otp.tsx
 var import_react_icons9 = require("@radix-ui/react-icons");
 var import_input_otp = require("input-otp");
-var React45 = __toESM(require("react"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var InputOTP = React45.forwardRef((_a, ref) => {
+var React44 = __toESM(require("react"), 1);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var InputOTP = React44.forwardRef((_a, ref) => {
   var _b = _a, { className, containerClassName } = _b, props = __objRest(_b, ["className", "containerClassName"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_input_otp.OTPInput,
     __spreadValues({
       ref,
@@ -6056,16 +6305,16 @@ var InputOTP = React45.forwardRef((_a, ref) => {
   );
 });
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React45.forwardRef((_a, ref) => {
+var InputOTPGroup = React44.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", __spreadValues({ ref, className: cn("flex items-center", className) }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", __spreadValues({ ref, className: cn("flex items-center", className) }, props));
 });
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React45.forwardRef((_a, ref) => {
+var InputOTPSlot = React44.forwardRef((_a, ref) => {
   var _b = _a, { index, className } = _b, props = __objRest(_b, ["index", "className"]);
-  const inputOTPContext = React45.useContext(import_input_otp.OTPInputContext);
+  const inputOTPContext = React44.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       ref,
@@ -6077,18 +6326,38 @@ var InputOTPSlot = React45.forwardRef((_a, ref) => {
     }, props), {
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "animate-caret-blink h-4 w-px bg-foreground duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "animate-caret-blink h-4 w-px bg-foreground duration-1000" }) })
       ]
     })
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React45.forwardRef((_a, ref) => {
+var InputOTPSeparator = React44.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", __spreadProps(__spreadValues({ ref, role: "separator" }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_icons9.DashIcon, {}) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", __spreadProps(__spreadValues({ ref, role: "separator" }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_icons9.DashIcon, {}) }));
 });
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
+// src/components/Label/label.tsx
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
+var import_class_variance_authority4 = require("class-variance-authority");
+var React45 = __toESM(require("react"), 1);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var labelVariants = (0, import_class_variance_authority4.cva)(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-label"
+);
+var Label3 = React45.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    LabelPrimitive.Root,
+    __spreadValues({
+      ref,
+      className: cn(labelVariants(), className)
+    }, props)
+  );
+});
+Label3.displayName = LabelPrimitive.Root.displayName;
+
 // src/components/menubar.tsx
 var import_react_icons10 = require("@radix-ui/react-icons");
 var MenubarPrimitive = __toESM(require("@radix-ui/react-menubar"), 1);
@@ -6417,7 +6686,7 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 // src/components/pagination.tsx
 var import_react_icons12 = require("@radix-ui/react-icons");
 var React48 = __toESM(require("react"), 1);
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Pagination = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -6486,7 +6755,7 @@ var PaginationPreviousLast = (_a) => {
       className: cn("gap-1 pl-2.5", className)
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react5.ChevronLeft, { className: "h-4 w-4" }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Previous Last" })
       ]
     })
@@ -6550,7 +6819,7 @@ var PaginationNextLast = (_a) => {
     }, props), {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Next Last" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react5.ChevronRight, { className: "h-4 w-4" })
       ]
     })
   );
@@ -7668,13 +7937,13 @@ var AlertModal = ({
 };
 
 // src/shared/breadcrumbs.tsx
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var import_react35 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function Breadcrumbs({ items, className, classNameList }) {
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Breadcrumb, { className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbList, { className: classNameList, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react35.Fragment, { children: [
     index !== items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbItem, { className: item.className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbLink, { href: item.link, children: item.title }) }),
-    index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react5.Slash, {}) }),
+    index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react6.Slash, {}) }),
     index === items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbPage, { children: item.title })
   ] }, item.title)) }) });
 }
@@ -7683,7 +7952,7 @@ function Breadcrumbs({ items, className, classNameList }) {
 var import_react36 = __toESM(require("react"), 1);
 var import_react_icons18 = require("@radix-ui/react-icons");
 var import_react_table = require("@tanstack/react-table");
-var import_lucide_react6 = require("lucide-react");
+var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function DataTable({
   columns,
@@ -7736,13 +8005,13 @@ function DataTable({
     }
   }, [pagination]);
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "rounded-md border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Table, { className: cn("relative", tableClassName), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHeader, { className: headerClassName, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { className: rowClassName, children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHead, { className: headerClassName, children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
-        header.column.columnDef.header,
-        header.getContext()
-      ) }, header.id)) }, headerGroup.id)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ScrollArea, { className: "h-[calc(80vh-220px)] md:h-[calc(80dvh-80px)]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Table, { className: cn("relative", tableClassName), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ScrollArea, { className: "h-[calc(80vh-220px)] md:h-[calc(80dvh-80px)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Table, { className: cn("relative", tableClassName), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHeader, { className: headerClassName, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { className: rowClassName, children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHead, { className: headerClassName, children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+          header.column.columnDef.header,
+          header.getContext()
+        ) }, header.id)) }, headerGroup.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           TableRow,
           {
             "data-state": row.getIsSelected() ? "selected" : void 0,
@@ -7761,48 +8030,10 @@ function DataTable({
             className: "h-24 text-center",
             children: "No results."
           }
-        ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScrollBar, { orientation: "horizontal" })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-      ScrollArea,
-      {
-        className: cn(
-          "h-[calc(80vh-220px)] rounded-md border md:h-[calc(80dvh-80px)]",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Table, { className: cn("relative", tableClassName), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHeader, { className: headerClassName, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { className: rowClassName, children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHead, { className: headerClassName, children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
-              header.column.columnDef.header,
-              header.getContext()
-            ) }, header.id)) }, headerGroup.id)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-              TableRow,
-              {
-                "data-state": row.getIsSelected() ? "selected" : void 0,
-                onClick: () => onClickItem(row.original),
-                className: rowClassName,
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cellClassName, children: (0, import_react_table.flexRender)(
-                  cell.column.columnDef.cell,
-                  cell.getContext()
-                ) }, cell.id))
-              },
-              row.id
-            )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-              TableCell,
-              {
-                colSpan: columns.length,
-                className: "h-24 text-center",
-                children: "No results."
-              }
-            ) }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScrollBar, { orientation: "horizontal" })
-        ]
-      }
-    ),
+        ) }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScrollBar, { orientation: "horizontal" })
+    ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col items-center justify-end gap-2 space-x-2 py-4 sm:flex-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
         isRowsSelected ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-muted-foreground flex-1 text-sm", children: [
@@ -7872,7 +8103,7 @@ function DataTable({
                 pageIndex: pagination.pageIndex - 1
               })),
               disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronLeftIcon, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react7.ChevronLeftIcon, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -7885,7 +8116,7 @@ function DataTable({
                 pageIndex: pagination.pageIndex + 1
               })),
               disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronRightIcon, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react7.ChevronRightIcon, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -7947,7 +8178,7 @@ function DataTableSkeleton({
 
 // src/shared/fileupload.tsx
 var import_react_icons19 = require("@radix-ui/react-icons");
-var import_lucide_react7 = require("lucide-react");
+var import_lucide_react8 = require("lucide-react");
 var import_react37 = require("react");
 var import_react_dropzone = require("react-dropzone");
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -7978,7 +8209,7 @@ function FileUpload({
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("input", __spreadValues({}, getInputProps())),
         value && !!value.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ImagePreview, { file: value[0] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_icons19.AvatarIcon, { className: "h-36 w-36 text-gray-100" }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "absolute -bottom-5 left-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center bg-gray-300 bg-opacity-50 py-1 text-xs font-normal text-muted-foreground ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react7.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react8.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
           label
         ] })
       ] }))
@@ -8269,6 +8500,7 @@ function Dropzone({
   FormItem,
   FormLabel,
   FormMessage,
+  FormSelect,
   Heading,
   HoverCard,
   HoverCardContent,
@@ -8385,10 +8617,12 @@ function Dropzone({
   badgeVariants,
   buttonVariants,
   cn,
+  inputVariants,
   navigationMenuTriggerStyle,
   reducer,
   toast,
   toggleVariants,
   useFormField,
-  useToast
+  useToast,
+  variants
 });