shadcn-zod-formkit 1.25.0 → 1.26.0

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Loader2, Save, Pencil, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, Trash2, ChevronsUpDown, Check, Upload, GripVertical, SearchIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, CircleIcon, GripVerticalIcon, ChevronUpIcon, SearchIcon, ChevronsUpDown, Check, CalendarIcon, EyeOff, Eye, Upload, Trash2, Plus, Info, GripVertical, Loader2, Save, Pencil, Search, MessageCircleWarning, CircleCheck, CircleX } from 'lucide-react';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React3 from 'react';
-import React3__default, { useState, useEffect, useTransition, useMemo, useRef } from 'react';
-import { FormProvider, Controller, useFormContext, useFormState, useForm, useFieldArray } from 'react-hook-form';
+import React3__default, { useMemo, useState, useEffect, useRef, useTransition } from 'react';
+import { FormProvider, Controller, useFormContext, useFormState, useFieldArray, useForm } from 'react-hook-form';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Slot } from '@radix-ui/react-slot';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
@@ -29,7 +29,7 @@ import { Command as Command$1 } from 'cmdk';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import z2 from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -931,7 +931,54 @@ function Separator({
     }
   );
 }
-cva(
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = cva(
   "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
   {
     variants: {
@@ -954,6 +1001,147 @@ cva(
     }
   }
 );
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-destructive text-sm font-normal", className),
+      ...props,
+      children: content
+    }
+  );
+}
 var Form = FormProvider;
 var FormFieldContext = React3.createContext(
   {}
@@ -1145,7 +1333,7 @@ function InputGroupAddon({
     }
   );
 }
-cva(
+var inputGroupButtonVariants = cva(
   "text-sm shadow-none flex gap-2 items-center",
   {
     variants: {
@@ -1161,6 +1349,24 @@ cva(
     }
   }
 );
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
 function InputGroupText({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
@@ -1189,6 +1395,22 @@ function InputGroupInput({
     }
   );
 }
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function InputOTP({
   className,
   containerClassName,
@@ -1787,6 +2009,41 @@ function ButtonGroup({
     }
   );
 }
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var ButtonGroupInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -1814,7 +2071,7 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
       disabled: isSubmitting,
       children: option.label ?? option.name
     },
-    key
+    `${input.name}-${key}-btn-g`
   )) });
 };
 var CheckListInput = class extends BaseInput {
@@ -1990,6 +2247,29 @@ function Command({
     }
   );
 }
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        className: cn("overflow-hidden p-0", className),
+        showCloseButton,
+        children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+      }
+    )
+  ] });
+}
 function CommandInput({
   className,
   ...props
@@ -2060,6 +2340,19 @@ function CommandGroup({
     }
   );
 }
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("bg-border -mx-1 h-px", className),
+      ...props
+    }
+  );
+}
 function CommandItem({
   className,
   ...props
@@ -2076,6 +2369,22 @@ function CommandItem({
     }
   );
 }
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var ComboboxInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -4294,7 +4603,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
                     const option = lista.find(
                       (item) => getValue(item).toString() === val
                     );
-                    return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: option?.name ?? val }, val);
+                    return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: option?.name ?? val }, `${input.name}-${val}-ms`);
                   }) }) : /* @__PURE__ */ jsx("span", { children: input.placeHolder ?? "Selecciona..." }),
                   /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 opacity-50" })
                 ]
@@ -4327,7 +4636,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
                         item.name
                       ]
                     },
-                    value
+                    `${value}-ms`
                   );
                 }) })
               ] })
@@ -4865,7 +5174,7 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
                   }
                 ) }) }),
                 /* @__PURE__ */ jsxs(SelectContent, { children: [
-                  lista.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: getValue(item), children: item.name }, item.id)),
+                  lista.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: getValue(item), children: item.name }, `${input.name}-${item.id}-s`)),
                   lista.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "p-2 text-sm text-muted-foreground", children: "No hay opciones disponibles" })
                 ] })
               ]
@@ -6047,7 +6356,122 @@ var InputList = ({ handleAddInput, inputsTypes }) => {
     );
   }) });
 };
+var GenericFilter = ({
+  filters = [],
+  pagination,
+  autoSubmit = false,
+  defaultValues = {},
+  initPage = 1,
+  initLimit = 10,
+  rangeLimit = [10, 25, 50, 100],
+  onChange,
+  withSearch = true,
+  withInitDate = true,
+  withEndDate = true,
+  withActive = true,
+  withLimit = true,
+  wrapInCard = true
+}) => {
+  const record = {
+    page: initPage,
+    limit: initLimit,
+    ...defaultValues
+  };
+  const [values, setValues] = useState(record);
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+  }, [values]);
+  const handleChange = (name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    if (autoSubmit && onChange) onChange({ ...values, [name]: value });
+  };
+  const baseFields = [
+    ...withSearch ? [
+      {
+        name: "search",
+        label: "Buscar",
+        inputType: "text_group" /* TEXT_GROUP */,
+        inputGroupConfig: { iconsLeft: [Search] },
+        onChange: (value) => handleChange("search", value)
+      }
+    ] : [],
+    ...withInitDate ? [
+      {
+        name: "initDate",
+        label: "Fecha de Inicio",
+        inputType: "date" /* DATE */,
+        onChange: (value) => handleChange("initDate", value)
+      }
+    ] : [],
+    ...withEndDate ? [
+      {
+        name: "endDate",
+        label: "Fecha Final",
+        inputType: "date" /* DATE */,
+        onChange: (value) => handleChange("endDate", value)
+      }
+    ] : [],
+    ...withActive ? [
+      {
+        wrapInCard: true,
+        name: "active",
+        label: "",
+        inputType: "button_group" /* BUTTON_GROUP */,
+        description: "Estado",
+        listConfig: {
+          list: [
+            { id: 1, name: "Activo", value: true },
+            { id: 2, name: "Inactivo", value: false },
+            { id: 3, name: "Todos", value: void 0 }
+          ],
+          onOptionChange: (item) => {
+            if (Array.isArray(item) && item[0]) handleChange("active", item[0].value);
+            else if (item && "value" in item) handleChange("active", item.value);
+          }
+        }
+      }
+    ] : [],
+    ...withLimit ? [
+      {
+        name: "limit",
+        label: "L\xEDmite por p\xE1gina",
+        inputType: "select" /* SELECT */,
+        listConfig: {
+          list: rangeLimit.map((num) => ({
+            value: String(num),
+            id: num,
+            name: String(num)
+          })),
+          onOptionChange: (item) => handleChange("limit", Number(item?.value ?? 10))
+        }
+      }
+    ] : []
+  ];
+  const fieldsConfig = [
+    ...filters,
+    baseFields
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col md:flex-row md:items-end gap-4 py-3", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+    DynamicForm,
+    {
+      withCard: wrapInCard,
+      withSubmitBtn: !autoSubmit,
+      formTitle: "",
+      submitBtnLabel: "Buscar",
+      fields: fieldsConfig,
+      record: values,
+      showFormHeader: false,
+      onSubmit: ({ data }) => {
+        if (onChange && !autoSubmit) onChange(data);
+      }
+    }
+  ) }) });
+};
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, Label, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, GenericFilter, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map