shadcn-zod-formkit 1.24.0 → 1.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,11 +1,11 @@
1
- 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';
1
+ 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';
2
2
  import { InfoCircledIcon } from '@radix-ui/react-icons';
3
3
  import { cva } from 'class-variance-authority';
4
4
  import { twMerge } from 'tailwind-merge';
5
5
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
6
6
  import * as React3 from 'react';
7
- import React3__default, { useState, useEffect, useTransition, useMemo, useRef } from 'react';
8
- import { FormProvider, Controller, useFormContext, useFormState, useForm, useFieldArray } from 'react-hook-form';
7
+ import React3__default, { useMemo, useState, useEffect, useRef, useTransition } from 'react';
8
+ import { FormProvider, Controller, useFormContext, useFormState, useFieldArray, useForm } from 'react-hook-form';
9
9
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
10
10
  import { Slot } from '@radix-ui/react-slot';
11
11
  import { getDefaultClassNames, DayPicker } from 'react-day-picker';
@@ -29,7 +29,7 @@ import { Command as Command$1 } from 'cmdk';
29
29
  import * as TabsPrimitive from '@radix-ui/react-tabs';
30
30
  import * as SliderPrimitive from '@radix-ui/react-slider';
31
31
  import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
32
- import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
32
+ import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
33
33
  import { CSS } from '@dnd-kit/utilities';
34
34
  import z2 from 'zod';
35
35
  import { zodResolver } from '@hookform/resolvers/zod';
@@ -256,9 +256,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
256
256
  InputTypes2["COMBOBOX"] = "COMBO_BOX";
257
257
  InputTypes2["SORTABLE_LIST"] = "sortable_list";
258
258
  InputTypes2["REPEATER_TABS"] = "repeater_tabs";
259
+ InputTypes2["STRING_LIST"] = "string_list";
259
260
  return InputTypes2;
260
261
  })(InputTypes || {});
261
262
  var inputFieldComp = [
263
+ "string_list" /* STRING_LIST */,
262
264
  "repeater_tabs" /* REPEATER_TABS */,
263
265
  "sortable_list" /* SORTABLE_LIST */,
264
266
  "COMBO_BOX" /* COMBOBOX */,
@@ -929,7 +931,54 @@ function Separator({
929
931
  }
930
932
  );
931
933
  }
932
- cva(
934
+ function FieldSet({ className, ...props }) {
935
+ return /* @__PURE__ */ jsx(
936
+ "fieldset",
937
+ {
938
+ "data-slot": "field-set",
939
+ className: cn(
940
+ "flex flex-col gap-6",
941
+ "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
942
+ className
943
+ ),
944
+ ...props
945
+ }
946
+ );
947
+ }
948
+ function FieldLegend({
949
+ className,
950
+ variant = "legend",
951
+ ...props
952
+ }) {
953
+ return /* @__PURE__ */ jsx(
954
+ "legend",
955
+ {
956
+ "data-slot": "field-legend",
957
+ "data-variant": variant,
958
+ className: cn(
959
+ "mb-3 font-medium",
960
+ "data-[variant=legend]:text-base",
961
+ "data-[variant=label]:text-sm",
962
+ className
963
+ ),
964
+ ...props
965
+ }
966
+ );
967
+ }
968
+ function FieldGroup({ className, ...props }) {
969
+ return /* @__PURE__ */ jsx(
970
+ "div",
971
+ {
972
+ "data-slot": "field-group",
973
+ className: cn(
974
+ "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",
975
+ className
976
+ ),
977
+ ...props
978
+ }
979
+ );
980
+ }
981
+ var fieldVariants = cva(
933
982
  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
934
983
  {
935
984
  variants: {
@@ -952,6 +1001,147 @@ cva(
952
1001
  }
953
1002
  }
954
1003
  );
1004
+ function Field({
1005
+ className,
1006
+ orientation = "vertical",
1007
+ ...props
1008
+ }) {
1009
+ return /* @__PURE__ */ jsx(
1010
+ "div",
1011
+ {
1012
+ role: "group",
1013
+ "data-slot": "field",
1014
+ "data-orientation": orientation,
1015
+ className: cn(fieldVariants({ orientation }), className),
1016
+ ...props
1017
+ }
1018
+ );
1019
+ }
1020
+ function FieldContent({ className, ...props }) {
1021
+ return /* @__PURE__ */ jsx(
1022
+ "div",
1023
+ {
1024
+ "data-slot": "field-content",
1025
+ className: cn(
1026
+ "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
1027
+ className
1028
+ ),
1029
+ ...props
1030
+ }
1031
+ );
1032
+ }
1033
+ function FieldLabel({
1034
+ className,
1035
+ ...props
1036
+ }) {
1037
+ return /* @__PURE__ */ jsx(
1038
+ Label,
1039
+ {
1040
+ "data-slot": "field-label",
1041
+ className: cn(
1042
+ "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
1043
+ "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",
1044
+ "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
1045
+ className
1046
+ ),
1047
+ ...props
1048
+ }
1049
+ );
1050
+ }
1051
+ function FieldTitle({ className, ...props }) {
1052
+ return /* @__PURE__ */ jsx(
1053
+ "div",
1054
+ {
1055
+ "data-slot": "field-label",
1056
+ className: cn(
1057
+ "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
1058
+ className
1059
+ ),
1060
+ ...props
1061
+ }
1062
+ );
1063
+ }
1064
+ function FieldDescription({ className, ...props }) {
1065
+ return /* @__PURE__ */ jsx(
1066
+ "p",
1067
+ {
1068
+ "data-slot": "field-description",
1069
+ className: cn(
1070
+ "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
1071
+ "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
1072
+ "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
1073
+ className
1074
+ ),
1075
+ ...props
1076
+ }
1077
+ );
1078
+ }
1079
+ function FieldSeparator({
1080
+ children,
1081
+ className,
1082
+ ...props
1083
+ }) {
1084
+ return /* @__PURE__ */ jsxs(
1085
+ "div",
1086
+ {
1087
+ "data-slot": "field-separator",
1088
+ "data-content": !!children,
1089
+ className: cn(
1090
+ "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
1091
+ className
1092
+ ),
1093
+ ...props,
1094
+ children: [
1095
+ /* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }),
1096
+ children && /* @__PURE__ */ jsx(
1097
+ "span",
1098
+ {
1099
+ className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
1100
+ "data-slot": "field-separator-content",
1101
+ children
1102
+ }
1103
+ )
1104
+ ]
1105
+ }
1106
+ );
1107
+ }
1108
+ function FieldError({
1109
+ className,
1110
+ children,
1111
+ errors,
1112
+ ...props
1113
+ }) {
1114
+ const content = useMemo(() => {
1115
+ if (children) {
1116
+ return children;
1117
+ }
1118
+ if (!errors?.length) {
1119
+ return null;
1120
+ }
1121
+ const uniqueErrors = [
1122
+ ...new Map(errors.map((error) => [error?.message, error])).values()
1123
+ ];
1124
+ if (uniqueErrors?.length == 1) {
1125
+ return uniqueErrors[0]?.message;
1126
+ }
1127
+ return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
1128
+ (error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)
1129
+ ) });
1130
+ }, [children, errors]);
1131
+ if (!content) {
1132
+ return null;
1133
+ }
1134
+ return /* @__PURE__ */ jsx(
1135
+ "div",
1136
+ {
1137
+ role: "alert",
1138
+ "data-slot": "field-error",
1139
+ className: cn("text-destructive text-sm font-normal", className),
1140
+ ...props,
1141
+ children: content
1142
+ }
1143
+ );
1144
+ }
955
1145
  var Form = FormProvider;
956
1146
  var FormFieldContext = React3.createContext(
957
1147
  {}
@@ -1143,7 +1333,7 @@ function InputGroupAddon({
1143
1333
  }
1144
1334
  );
1145
1335
  }
1146
- cva(
1336
+ var inputGroupButtonVariants = cva(
1147
1337
  "text-sm shadow-none flex gap-2 items-center",
1148
1338
  {
1149
1339
  variants: {
@@ -1159,6 +1349,24 @@ cva(
1159
1349
  }
1160
1350
  }
1161
1351
  );
1352
+ function InputGroupButton({
1353
+ className,
1354
+ type = "button",
1355
+ variant = "ghost",
1356
+ size = "xs",
1357
+ ...props
1358
+ }) {
1359
+ return /* @__PURE__ */ jsx(
1360
+ Button,
1361
+ {
1362
+ type,
1363
+ "data-size": size,
1364
+ variant,
1365
+ className: cn(inputGroupButtonVariants({ size }), className),
1366
+ ...props
1367
+ }
1368
+ );
1369
+ }
1162
1370
  function InputGroupText({ className, ...props }) {
1163
1371
  return /* @__PURE__ */ jsx(
1164
1372
  "span",
@@ -1187,6 +1395,22 @@ function InputGroupInput({
1187
1395
  }
1188
1396
  );
1189
1397
  }
1398
+ function InputGroupTextarea({
1399
+ className,
1400
+ ...props
1401
+ }) {
1402
+ return /* @__PURE__ */ jsx(
1403
+ Textarea,
1404
+ {
1405
+ "data-slot": "input-group-control",
1406
+ className: cn(
1407
+ "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
1408
+ className
1409
+ ),
1410
+ ...props
1411
+ }
1412
+ );
1413
+ }
1190
1414
  function InputOTP({
1191
1415
  className,
1192
1416
  containerClassName,
@@ -1785,6 +2009,41 @@ function ButtonGroup({
1785
2009
  }
1786
2010
  );
1787
2011
  }
2012
+ function ButtonGroupText({
2013
+ className,
2014
+ asChild = false,
2015
+ ...props
2016
+ }) {
2017
+ const Comp = asChild ? Slot : "div";
2018
+ return /* @__PURE__ */ jsx(
2019
+ Comp,
2020
+ {
2021
+ className: cn(
2022
+ "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",
2023
+ className
2024
+ ),
2025
+ ...props
2026
+ }
2027
+ );
2028
+ }
2029
+ function ButtonGroupSeparator({
2030
+ className,
2031
+ orientation = "vertical",
2032
+ ...props
2033
+ }) {
2034
+ return /* @__PURE__ */ jsx(
2035
+ Separator,
2036
+ {
2037
+ "data-slot": "button-group-separator",
2038
+ orientation,
2039
+ className: cn(
2040
+ "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
2041
+ className
2042
+ ),
2043
+ ...props
2044
+ }
2045
+ );
2046
+ }
1788
2047
  var ButtonGroupInput = class extends BaseInput {
1789
2048
  render() {
1790
2049
  const { input, form, isSubmitting } = this;
@@ -1812,7 +2071,7 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
1812
2071
  disabled: isSubmitting,
1813
2072
  children: option.label ?? option.name
1814
2073
  },
1815
- key
2074
+ `${input.name}-${key}-btn-g`
1816
2075
  )) });
1817
2076
  };
1818
2077
  var CheckListInput = class extends BaseInput {
@@ -1988,6 +2247,29 @@ function Command({
1988
2247
  }
1989
2248
  );
1990
2249
  }
2250
+ function CommandDialog({
2251
+ title = "Command Palette",
2252
+ description = "Search for a command to run...",
2253
+ children,
2254
+ className,
2255
+ showCloseButton = true,
2256
+ ...props
2257
+ }) {
2258
+ return /* @__PURE__ */ jsxs(Dialog, { ...props, children: [
2259
+ /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
2260
+ /* @__PURE__ */ jsx(DialogTitle, { children: title }),
2261
+ /* @__PURE__ */ jsx(DialogDescription, { children: description })
2262
+ ] }),
2263
+ /* @__PURE__ */ jsx(
2264
+ DialogContent,
2265
+ {
2266
+ className: cn("overflow-hidden p-0", className),
2267
+ showCloseButton,
2268
+ 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 })
2269
+ }
2270
+ )
2271
+ ] });
2272
+ }
1991
2273
  function CommandInput({
1992
2274
  className,
1993
2275
  ...props
@@ -2058,6 +2340,19 @@ function CommandGroup({
2058
2340
  }
2059
2341
  );
2060
2342
  }
2343
+ function CommandSeparator({
2344
+ className,
2345
+ ...props
2346
+ }) {
2347
+ return /* @__PURE__ */ jsx(
2348
+ Command$1.Separator,
2349
+ {
2350
+ "data-slot": "command-separator",
2351
+ className: cn("bg-border -mx-1 h-px", className),
2352
+ ...props
2353
+ }
2354
+ );
2355
+ }
2061
2356
  function CommandItem({
2062
2357
  className,
2063
2358
  ...props
@@ -2074,6 +2369,22 @@ function CommandItem({
2074
2369
  }
2075
2370
  );
2076
2371
  }
2372
+ function CommandShortcut({
2373
+ className,
2374
+ ...props
2375
+ }) {
2376
+ return /* @__PURE__ */ jsx(
2377
+ "span",
2378
+ {
2379
+ "data-slot": "command-shortcut",
2380
+ className: cn(
2381
+ "text-muted-foreground ml-auto text-xs tracking-widest",
2382
+ className
2383
+ ),
2384
+ ...props
2385
+ }
2386
+ );
2387
+ }
2077
2388
  var ComboboxInput = class extends BaseInput {
2078
2389
  render() {
2079
2390
  const { input, form, isSubmitting } = this;
@@ -4182,7 +4493,7 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
4182
4493
  return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
4183
4494
  /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
4184
4495
  /* @__PURE__ */ jsx(FormMessage, {}),
4185
- /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 shadow-lg rounded-xl p-3 bg-white", children: [
4496
+ /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl p-3 ", children: [
4186
4497
  pairs.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No pairs have been added yet." }),
4187
4498
  pairs.map((pair, index) => /* @__PURE__ */ jsxs(
4188
4499
  "div",
@@ -4292,7 +4603,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
4292
4603
  const option = lista.find(
4293
4604
  (item) => getValue(item).toString() === val
4294
4605
  );
4295
- return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: option?.name ?? val }, val);
4606
+ return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: option?.name ?? val }, `${input.name}-${val}-ms`);
4296
4607
  }) }) : /* @__PURE__ */ jsx("span", { children: input.placeHolder ?? "Selecciona..." }),
4297
4608
  /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 opacity-50" })
4298
4609
  ]
@@ -4325,7 +4636,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
4325
4636
  item.name
4326
4637
  ]
4327
4638
  },
4328
- value
4639
+ `${value}-ms`
4329
4640
  );
4330
4641
  }) })
4331
4642
  ] })
@@ -4863,7 +5174,7 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
4863
5174
  }
4864
5175
  ) }) }),
4865
5176
  /* @__PURE__ */ jsxs(SelectContent, { children: [
4866
- lista.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: getValue(item), children: item.name }, item.id)),
5177
+ lista.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: getValue(item), children: item.name }, `${input.name}-${item.id}-s`)),
4867
5178
  lista.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "p-2 text-sm text-muted-foreground", children: "No hay opciones disponibles" })
4868
5179
  ] })
4869
5180
  ]
@@ -5160,6 +5471,102 @@ function SortableWrapper({
5160
5471
  }
5161
5472
  );
5162
5473
  }
5474
+ var StringValueListInput = class extends BaseInput {
5475
+ render() {
5476
+ const { input, form, isSubmitting } = this;
5477
+ return /* @__PURE__ */ jsx(
5478
+ FieldStringValueList,
5479
+ {
5480
+ input,
5481
+ form,
5482
+ isSubmitting
5483
+ }
5484
+ );
5485
+ }
5486
+ };
5487
+ var FieldStringValueList = ({ form, input, isSubmitting }) => {
5488
+ const fieldName = input.name;
5489
+ useEffect(() => {
5490
+ const current = form.getValues(fieldName);
5491
+ if (!Array.isArray(current)) {
5492
+ form.setValue(fieldName, []);
5493
+ }
5494
+ }, [form, fieldName]);
5495
+ const handleAddItem = () => {
5496
+ const current = form.getValues(fieldName) || [];
5497
+ form.setValue(fieldName, [...current, ""]);
5498
+ };
5499
+ const handleRemoveItem = (index) => {
5500
+ const current = form.getValues(fieldName) || [];
5501
+ const updated = current.filter((_, i) => i !== index);
5502
+ form.setValue(fieldName, updated);
5503
+ };
5504
+ const handleChange = (index, newValue) => {
5505
+ const current = form.getValues(fieldName) || [];
5506
+ const updated = current.map(
5507
+ (item, i) => i === index ? newValue : item
5508
+ );
5509
+ form.setValue(fieldName, updated);
5510
+ };
5511
+ return /* @__PURE__ */ jsx(
5512
+ FormField,
5513
+ {
5514
+ control: form.control,
5515
+ name: fieldName,
5516
+ render: () => {
5517
+ const items = form.watch(fieldName) || [];
5518
+ return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
5519
+ /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
5520
+ /* @__PURE__ */ jsx(FormMessage, {}),
5521
+ /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl ", children: [
5522
+ items.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No items have been added yet." }),
5523
+ items.map((value, index) => /* @__PURE__ */ jsxs(
5524
+ "div",
5525
+ {
5526
+ className: "flex gap-2 items-center",
5527
+ children: [
5528
+ /* @__PURE__ */ jsx(
5529
+ Input,
5530
+ {
5531
+ placeholder: `Item ${index + 1}`,
5532
+ value,
5533
+ disabled: isSubmitting,
5534
+ onChange: (e) => handleChange(index, e.target.value)
5535
+ }
5536
+ ),
5537
+ input.isRemovebleOption && /* @__PURE__ */ jsx(
5538
+ Button,
5539
+ {
5540
+ type: "button",
5541
+ variant: "destructive",
5542
+ size: "icon",
5543
+ onClick: () => handleRemoveItem(index),
5544
+ disabled: isSubmitting,
5545
+ children: /* @__PURE__ */ jsx(Trash2, { size: 18 })
5546
+ }
5547
+ )
5548
+ ]
5549
+ },
5550
+ index
5551
+ )),
5552
+ /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsx(
5553
+ Button,
5554
+ {
5555
+ type: "button",
5556
+ variant: "outline",
5557
+ size: "sm",
5558
+ onClick: handleAddItem,
5559
+ disabled: isSubmitting,
5560
+ children: /* @__PURE__ */ jsx(Plus, { size: 18, className: "mr-1" })
5561
+ }
5562
+ ) })
5563
+ ] }) }),
5564
+ input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description })
5565
+ ] });
5566
+ }
5567
+ }
5568
+ );
5569
+ };
5163
5570
  var SwitchInput = class extends BaseInput {
5164
5571
  render() {
5165
5572
  const { input, form, isSubmitting } = this;
@@ -5471,6 +5878,7 @@ var inputMap = {
5471
5878
  ["COMBO_BOX" /* COMBOBOX */]: ComboboxInput,
5472
5879
  ["sortable_list" /* SORTABLE_LIST */]: SortableListInput,
5473
5880
  ["repeater_tabs" /* REPEATER_TABS */]: RepeaterTabsInput,
5881
+ ["string_list" /* STRING_LIST */]: StringValueListInput,
5474
5882
  //ToDos: ============================================================
5475
5883
  ["slider" /* SLIDER */]: SliderInput,
5476
5884
  //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -5948,7 +6356,122 @@ var InputList = ({ handleAddInput, inputsTypes }) => {
5948
6356
  );
5949
6357
  }) });
5950
6358
  };
6359
+ var GenericFilter = ({
6360
+ filters = [],
6361
+ pagination,
6362
+ autoSubmit = false,
6363
+ defaultValues = {},
6364
+ initPage = 1,
6365
+ initLimit = 10,
6366
+ rangeLimit = [10, 25, 50, 100],
6367
+ onChange,
6368
+ withSearch = true,
6369
+ withInitDate = true,
6370
+ withEndDate = true,
6371
+ withActive = true,
6372
+ withLimit = true,
6373
+ wrapInCard = true
6374
+ }) => {
6375
+ const record = {
6376
+ page: initPage,
6377
+ limit: initLimit,
6378
+ ...defaultValues
6379
+ };
6380
+ const [values, setValues] = useState(record);
6381
+ const isFirstRender = useRef(true);
6382
+ useEffect(() => {
6383
+ if (isFirstRender.current) {
6384
+ isFirstRender.current = false;
6385
+ return;
6386
+ }
6387
+ }, [values]);
6388
+ const handleChange = (name, value) => {
6389
+ setValues((prev) => ({ ...prev, [name]: value }));
6390
+ if (autoSubmit && onChange) onChange({ ...values, [name]: value });
6391
+ };
6392
+ const baseFields = [
6393
+ ...withSearch ? [
6394
+ {
6395
+ name: "search",
6396
+ label: "Buscar",
6397
+ inputType: "text_group" /* TEXT_GROUP */,
6398
+ inputGroupConfig: { iconsLeft: [Search] },
6399
+ onChange: (value) => handleChange("search", value)
6400
+ }
6401
+ ] : [],
6402
+ ...withInitDate ? [
6403
+ {
6404
+ name: "initDate",
6405
+ label: "Fecha de Inicio",
6406
+ inputType: "date" /* DATE */,
6407
+ onChange: (value) => handleChange("initDate", value)
6408
+ }
6409
+ ] : [],
6410
+ ...withEndDate ? [
6411
+ {
6412
+ name: "endDate",
6413
+ label: "Fecha Final",
6414
+ inputType: "date" /* DATE */,
6415
+ onChange: (value) => handleChange("endDate", value)
6416
+ }
6417
+ ] : [],
6418
+ ...withActive ? [
6419
+ {
6420
+ wrapInCard: true,
6421
+ name: "active",
6422
+ label: "",
6423
+ inputType: "button_group" /* BUTTON_GROUP */,
6424
+ description: "Estado",
6425
+ listConfig: {
6426
+ list: [
6427
+ { id: 1, name: "Activo", value: true },
6428
+ { id: 2, name: "Inactivo", value: false },
6429
+ { id: 3, name: "Todos", value: void 0 }
6430
+ ],
6431
+ onOptionChange: (item) => {
6432
+ if (Array.isArray(item) && item[0]) handleChange("active", item[0].value);
6433
+ else if (item && "value" in item) handleChange("active", item.value);
6434
+ }
6435
+ }
6436
+ }
6437
+ ] : [],
6438
+ ...withLimit ? [
6439
+ {
6440
+ name: "limit",
6441
+ label: "L\xEDmite por p\xE1gina",
6442
+ inputType: "select" /* SELECT */,
6443
+ listConfig: {
6444
+ list: rangeLimit.map((num) => ({
6445
+ value: String(num),
6446
+ id: num,
6447
+ name: String(num)
6448
+ })),
6449
+ onOptionChange: (item) => handleChange("limit", Number(item?.value ?? 10))
6450
+ }
6451
+ }
6452
+ ] : []
6453
+ ];
6454
+ const fieldsConfig = [
6455
+ ...filters,
6456
+ baseFields
6457
+ ];
6458
+ 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(
6459
+ DynamicForm,
6460
+ {
6461
+ withCard: wrapInCard,
6462
+ withSubmitBtn: !autoSubmit,
6463
+ formTitle: "",
6464
+ submitBtnLabel: "Buscar",
6465
+ fields: fieldsConfig,
6466
+ record: values,
6467
+ showFormHeader: false,
6468
+ onSubmit: ({ data }) => {
6469
+ if (onChange && !autoSubmit) onChange(data);
6470
+ }
6471
+ }
6472
+ ) }) });
6473
+ };
5951
6474
 
5952
- 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 };
6475
+ 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 };
5953
6476
  //# sourceMappingURL=index.mjs.map
5954
6477
  //# sourceMappingURL=index.mjs.map