shadcn-zod-formkit 3.9.0 → 3.9.1
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.cjs +1500 -1381
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +679 -490
- package/dist/index.d.ts +679 -490
- package/dist/index.mjs +1461 -1384
- package/dist/index.mjs.map +1 -1
- package/dist/shadcn-zod-formkit-3.9.1.tgz +0 -0
- package/package.json +1 -1
- package/dist/shadcn-zod-formkit-3.9.0.tgz +0 -0
package/dist/index.cjs
CHANGED
|
@@ -6,11 +6,9 @@ var lucideReact = require('lucide-react');
|
|
|
6
6
|
var reactIcons = require('@radix-ui/react-icons');
|
|
7
7
|
var classVarianceAuthority = require('class-variance-authority');
|
|
8
8
|
var tailwindMerge = require('tailwind-merge');
|
|
9
|
-
var reactSlot = require('@radix-ui/react-slot');
|
|
10
|
-
var zustand = require('zustand');
|
|
11
|
-
var reactHookForm = require('react-hook-form');
|
|
12
9
|
var AccordionPrimitive = require('@radix-ui/react-accordion');
|
|
13
10
|
var radixUi = require('radix-ui');
|
|
11
|
+
var reactSlot = require('@radix-ui/react-slot');
|
|
14
12
|
var SeparatorPrimitive = require('@radix-ui/react-separator');
|
|
15
13
|
var reactDayPicker = require('react-day-picker');
|
|
16
14
|
var CheckboxPrimitive = require('@radix-ui/react-checkbox');
|
|
@@ -20,6 +18,7 @@ require('react-color-palette/css');
|
|
|
20
18
|
var cmdk = require('cmdk');
|
|
21
19
|
var DialogPrimitive = require('@radix-ui/react-dialog');
|
|
22
20
|
var LabelPrimitive = require('@radix-ui/react-label');
|
|
21
|
+
var reactHookForm = require('react-hook-form');
|
|
23
22
|
var inputOtp = require('input-otp');
|
|
24
23
|
var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
|
|
25
24
|
var ResizablePrimitive = require('react-resizable-panels');
|
|
@@ -31,6 +30,7 @@ var sonner = require('sonner');
|
|
|
31
30
|
var SwitchPrimitive = require('@radix-ui/react-switch');
|
|
32
31
|
var TabsPrimitive = require('@radix-ui/react-tabs');
|
|
33
32
|
var TooltipPrimitive = require('@radix-ui/react-tooltip');
|
|
33
|
+
var zustand = require('zustand');
|
|
34
34
|
var dateFns = require('date-fns');
|
|
35
35
|
var core = require('@dnd-kit/core');
|
|
36
36
|
var sortable = require('@dnd-kit/sortable');
|
|
@@ -9868,6 +9868,60 @@ var CustomAlert = ({
|
|
|
9868
9868
|
}
|
|
9869
9869
|
);
|
|
9870
9870
|
};
|
|
9871
|
+
function Accordion({
|
|
9872
|
+
...props
|
|
9873
|
+
}) {
|
|
9874
|
+
return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
|
|
9875
|
+
}
|
|
9876
|
+
function AccordionItem({
|
|
9877
|
+
className,
|
|
9878
|
+
...props
|
|
9879
|
+
}) {
|
|
9880
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9881
|
+
AccordionPrimitive__namespace.Item,
|
|
9882
|
+
{
|
|
9883
|
+
"data-slot": "accordion-item",
|
|
9884
|
+
className: cn("border-b last:border-b-0", className),
|
|
9885
|
+
...props
|
|
9886
|
+
}
|
|
9887
|
+
);
|
|
9888
|
+
}
|
|
9889
|
+
function AccordionTrigger({
|
|
9890
|
+
className,
|
|
9891
|
+
children,
|
|
9892
|
+
...props
|
|
9893
|
+
}) {
|
|
9894
|
+
return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
9895
|
+
AccordionPrimitive__namespace.Trigger,
|
|
9896
|
+
{
|
|
9897
|
+
"data-slot": "accordion-trigger",
|
|
9898
|
+
className: cn(
|
|
9899
|
+
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
|
9900
|
+
className
|
|
9901
|
+
),
|
|
9902
|
+
...props,
|
|
9903
|
+
children: [
|
|
9904
|
+
children,
|
|
9905
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
|
|
9906
|
+
]
|
|
9907
|
+
}
|
|
9908
|
+
) });
|
|
9909
|
+
}
|
|
9910
|
+
function AccordionContent({
|
|
9911
|
+
className,
|
|
9912
|
+
children,
|
|
9913
|
+
...props
|
|
9914
|
+
}) {
|
|
9915
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9916
|
+
AccordionPrimitive__namespace.Content,
|
|
9917
|
+
{
|
|
9918
|
+
"data-slot": "accordion-content",
|
|
9919
|
+
className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
|
|
9920
|
+
...props,
|
|
9921
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
|
|
9922
|
+
}
|
|
9923
|
+
);
|
|
9924
|
+
}
|
|
9871
9925
|
var buttonVariants = classVarianceAuthority.cva(
|
|
9872
9926
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
9873
9927
|
{
|
|
@@ -9914,1075 +9968,290 @@ function Button({
|
|
|
9914
9968
|
}
|
|
9915
9969
|
);
|
|
9916
9970
|
}
|
|
9917
|
-
function
|
|
9918
|
-
|
|
9919
|
-
|
|
9920
|
-
|
|
9921
|
-
}
|
|
9922
|
-
return { width: border.width ?? defaultWidth, color: border.color };
|
|
9971
|
+
function AlertDialog({
|
|
9972
|
+
...props
|
|
9973
|
+
}) {
|
|
9974
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
|
|
9923
9975
|
}
|
|
9924
|
-
function
|
|
9925
|
-
|
|
9926
|
-
|
|
9927
|
-
|
|
9928
|
-
const left = normalizeBorder(borders.left) ?? allBorder;
|
|
9929
|
-
const right = normalizeBorder(borders.right) ?? allBorder;
|
|
9930
|
-
const top = normalizeBorder(borders.top) ?? allBorder;
|
|
9931
|
-
const bottom = normalizeBorder(borders.bottom) ?? allBorder;
|
|
9932
|
-
if (left?.color) {
|
|
9933
|
-
shadows.push(`inset ${left.width}px 0 0 0 ${left.color}`);
|
|
9934
|
-
}
|
|
9935
|
-
if (right?.color) {
|
|
9936
|
-
shadows.push(`inset -${right.width}px 0 0 0 ${right.color}`);
|
|
9937
|
-
}
|
|
9938
|
-
if (top?.color) {
|
|
9939
|
-
shadows.push(`inset 0 ${top.width}px 0 0 ${top.color}`);
|
|
9940
|
-
}
|
|
9941
|
-
if (bottom?.color) {
|
|
9942
|
-
shadows.push(`inset 0 -${bottom.width}px 0 0 ${bottom.color}`);
|
|
9943
|
-
}
|
|
9944
|
-
return shadows.length > 0 ? shadows.join(", ") : "none";
|
|
9976
|
+
function AlertDialogTrigger({
|
|
9977
|
+
...props
|
|
9978
|
+
}) {
|
|
9979
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
|
|
9945
9980
|
}
|
|
9946
|
-
|
|
9947
|
-
|
|
9948
|
-
|
|
9949
|
-
|
|
9950
|
-
|
|
9951
|
-
|
|
9981
|
+
function AlertDialogPortal({
|
|
9982
|
+
...props
|
|
9983
|
+
}) {
|
|
9984
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
|
|
9985
|
+
}
|
|
9986
|
+
function AlertDialogOverlay({
|
|
9952
9987
|
className,
|
|
9953
|
-
|
|
9954
|
-
|
|
9955
|
-
withLabel = true,
|
|
9956
|
-
isActive = false,
|
|
9957
|
-
fontSize = "text-sm",
|
|
9958
|
-
icons,
|
|
9959
|
-
borders,
|
|
9960
|
-
// iconSize = 72,
|
|
9961
|
-
iconClassName = "w-8 h-8"
|
|
9962
|
-
}) => {
|
|
9963
|
-
let content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
9964
|
-
withLabel && label,
|
|
9965
|
-
shortcut && ` (${shortcut})`
|
|
9966
|
-
] });
|
|
9967
|
-
if (children) content = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
|
|
9968
|
-
const borderShadow = generateBorderShadows(borders);
|
|
9969
|
-
const hasBorders = borders && borderShadow !== "none";
|
|
9988
|
+
...props
|
|
9989
|
+
}) {
|
|
9970
9990
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9971
|
-
|
|
9991
|
+
radixUi.AlertDialog.Overlay,
|
|
9972
9992
|
{
|
|
9973
|
-
|
|
9974
|
-
onDoubleClick,
|
|
9975
|
-
onClick: (e) => onClick?.(label ?? e.currentTarget.textContent ?? ""),
|
|
9976
|
-
style: {
|
|
9977
|
-
...style,
|
|
9978
|
-
...hasBorders && { boxShadow: borderShadow }
|
|
9979
|
-
},
|
|
9993
|
+
"data-slot": "alert-dialog-overlay",
|
|
9980
9994
|
className: cn(
|
|
9981
|
-
|
|
9982
|
-
"shadow-md shadow-black/20",
|
|
9983
|
-
"flex flex-1 items-center justify-center rounded-lg h-full w-full",
|
|
9984
|
-
"font-mono font-bold transition-all duration-100",
|
|
9985
|
-
"active:scale-95",
|
|
9986
|
-
fontSize,
|
|
9987
|
-
// Estados base (soft UI)
|
|
9988
|
-
"border border-(--color-border)",
|
|
9989
|
-
"bg-(--color-secondary-soft) text-(--color-foreground)",
|
|
9990
|
-
// Hover
|
|
9991
|
-
"hover:bg-(--color-accent-soft)",
|
|
9992
|
-
// Active click (presionado)
|
|
9993
|
-
"active:bg-(--color-primary) active:text-(--color-primary-foreground)",
|
|
9994
|
-
// Estado activo (seleccionado)
|
|
9995
|
-
isActive && "bg-(--color-primary) text-(--color-primary-foreground) border-(--color-primary)",
|
|
9996
|
-
// Backspace especial
|
|
9997
|
-
// label === '⌫' &&
|
|
9998
|
-
// 'bg-(--color-destructive) text-white hover:opacity-90',
|
|
9999
|
-
// Overflow hidden para que los bordes respeten el border-radius
|
|
10000
|
-
"overflow-hidden",
|
|
9995
|
+
"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
|
|
10001
9996
|
className
|
|
10002
9997
|
),
|
|
10003
|
-
|
|
10004
|
-
icons && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row justify-center text-3xl", children: icons.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
10005
|
-
IconComponent,
|
|
10006
|
-
{
|
|
10007
|
-
className: iconClassName
|
|
10008
|
-
},
|
|
10009
|
-
index
|
|
10010
|
-
)) }),
|
|
10011
|
-
content
|
|
10012
|
-
] })
|
|
9998
|
+
...props
|
|
10013
9999
|
}
|
|
10014
10000
|
);
|
|
10015
|
-
}
|
|
10016
|
-
|
|
10017
|
-
if (!label || label.length !== 1 || !/[a-z]/.test(label)) return label;
|
|
10018
|
-
return upper ? label.toUpperCase() : label;
|
|
10019
|
-
};
|
|
10020
|
-
var letter = (l, isUpper, handleKey) => ({
|
|
10021
|
-
label: applyCase(l, isUpper),
|
|
10022
|
-
onClick: handleKey,
|
|
10023
|
-
className: "flex-1"
|
|
10024
|
-
});
|
|
10025
|
-
|
|
10026
|
-
// src/components/custom/keyboard/keyboard-base.tsx
|
|
10027
|
-
var BaseKeyboard = class {
|
|
10028
|
-
constructor(input, children) {
|
|
10029
|
-
this.input = input;
|
|
10030
|
-
this.children = children;
|
|
10031
|
-
}
|
|
10032
|
-
};
|
|
10033
|
-
var KeyboardBuilder = ({
|
|
10034
|
-
keys,
|
|
10035
|
-
withCard = false,
|
|
10001
|
+
}
|
|
10002
|
+
function AlertDialogContent({
|
|
10036
10003
|
className,
|
|
10037
|
-
|
|
10038
|
-
|
|
10039
|
-
|
|
10040
|
-
|
|
10041
|
-
|
|
10042
|
-
|
|
10043
|
-
|
|
10044
|
-
|
|
10045
|
-
|
|
10046
|
-
|
|
10047
|
-
|
|
10048
|
-
|
|
10049
|
-
|
|
10050
|
-
|
|
10051
|
-
|
|
10052
|
-
if (key && !key.disabled) {
|
|
10053
|
-
key.onClick?.(pressedKey);
|
|
10054
|
-
const keyboardEvent = new KeyboardEvent("keydown", {
|
|
10055
|
-
key: pressedKey,
|
|
10056
|
-
bubbles: true
|
|
10057
|
-
});
|
|
10058
|
-
window.dispatchEvent(keyboardEvent);
|
|
10059
|
-
}
|
|
10060
|
-
}, [keyMap]);
|
|
10061
|
-
React3.useEffect(() => {
|
|
10062
|
-
const handleKeyDown = (event) => {
|
|
10063
|
-
const active = document.activeElement;
|
|
10064
|
-
if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active && active.getAttribute("contenteditable") === "true") {
|
|
10065
|
-
console.log("\u{1F680} ~ Ignorando tecla porque el foco est\xE1 en un input:", event.key);
|
|
10066
|
-
return;
|
|
10004
|
+
size = "default",
|
|
10005
|
+
...props
|
|
10006
|
+
}) {
|
|
10007
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
|
|
10008
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
|
|
10009
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10010
|
+
radixUi.AlertDialog.Content,
|
|
10011
|
+
{
|
|
10012
|
+
"data-slot": "alert-dialog-content",
|
|
10013
|
+
"data-size": size,
|
|
10014
|
+
className: cn(
|
|
10015
|
+
"group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
|
|
10016
|
+
className
|
|
10017
|
+
),
|
|
10018
|
+
...props
|
|
10067
10019
|
}
|
|
10068
|
-
|
|
10069
|
-
|
|
10070
|
-
|
|
10071
|
-
|
|
10072
|
-
|
|
10073
|
-
|
|
10074
|
-
|
|
10075
|
-
|
|
10076
|
-
const content = /* @__PURE__ */ jsxRuntime.jsx(
|
|
10020
|
+
)
|
|
10021
|
+
] });
|
|
10022
|
+
}
|
|
10023
|
+
function AlertDialogHeader({
|
|
10024
|
+
className,
|
|
10025
|
+
...props
|
|
10026
|
+
}) {
|
|
10027
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10077
10028
|
"div",
|
|
10078
10029
|
{
|
|
10030
|
+
"data-slot": "alert-dialog-header",
|
|
10079
10031
|
className: cn(
|
|
10080
|
-
|
|
10032
|
+
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
|
|
10081
10033
|
className
|
|
10082
10034
|
),
|
|
10083
|
-
|
|
10084
|
-
const handleClick = () => {
|
|
10085
|
-
triggerKey(key.label ?? "");
|
|
10086
|
-
key.onClick?.(key.label ?? "");
|
|
10087
|
-
if (!key.shortcut) return;
|
|
10088
|
-
triggerKey(key.shortcut);
|
|
10089
|
-
};
|
|
10090
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
10091
|
-
key.label == "" && !key.icons?.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${key.className}` }, indx),
|
|
10092
|
-
(key.label != "" || key.icons?.length) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10093
|
-
Key,
|
|
10094
|
-
{
|
|
10095
|
-
borders: {
|
|
10096
|
-
left: key.disabled ? "grey" : "",
|
|
10097
|
-
bottom: key.disabled ? "grey" : ""
|
|
10098
|
-
},
|
|
10099
|
-
label: key.label,
|
|
10100
|
-
onClick: handleClick,
|
|
10101
|
-
shortcut: key.shortcut,
|
|
10102
|
-
icons: key.icons,
|
|
10103
|
-
className: `${key.className} ${key.disabled ? "bg-muted-foreground h-full" : "h-full"}`,
|
|
10104
|
-
iconClassName: key.iconClassName,
|
|
10105
|
-
iconSize: key.iconSize,
|
|
10106
|
-
fontSize: keyFontSize3,
|
|
10107
|
-
isActive: key.isActive,
|
|
10108
|
-
disabled: key.disabled,
|
|
10109
|
-
children: key.children
|
|
10110
|
-
},
|
|
10111
|
-
indx
|
|
10112
|
-
)
|
|
10113
|
-
] });
|
|
10114
|
-
}) }, ri))
|
|
10035
|
+
...props
|
|
10115
10036
|
}
|
|
10116
10037
|
);
|
|
10117
|
-
|
|
10118
|
-
|
|
10119
|
-
|
|
10120
|
-
|
|
10121
|
-
|
|
10122
|
-
|
|
10123
|
-
|
|
10124
|
-
|
|
10125
|
-
|
|
10126
|
-
|
|
10127
|
-
|
|
10128
|
-
|
|
10129
|
-
|
|
10130
|
-
|
|
10131
|
-
isInputRequired: false,
|
|
10132
|
-
activeInput: null,
|
|
10133
|
-
inputs: {},
|
|
10134
|
-
type: "qwerty" /* QWERTY */,
|
|
10135
|
-
currentInputField: null,
|
|
10136
|
-
children: void 0,
|
|
10137
|
-
isOpen: false,
|
|
10138
|
-
isOpenDynamic: false,
|
|
10139
|
-
value: "",
|
|
10140
|
-
onEnter: void 0,
|
|
10141
|
-
setChildren(children) {
|
|
10142
|
-
set({ children });
|
|
10143
|
-
},
|
|
10144
|
-
setOnEnter(onEnter) {
|
|
10145
|
-
set({ onEnter });
|
|
10146
|
-
},
|
|
10147
|
-
setCurrentInputField(inputField) {
|
|
10148
|
-
set({ currentInputField: inputField, isInputRequired: true });
|
|
10149
|
-
},
|
|
10150
|
-
setIsOpen(open) {
|
|
10151
|
-
if (!open) set({ value: "" });
|
|
10152
|
-
set({ isOpen: open ?? !get().isOpen, children: void 0 });
|
|
10153
|
-
if (!get().isOpen) {
|
|
10154
|
-
set({
|
|
10155
|
-
children: void 0,
|
|
10156
|
-
value: "",
|
|
10157
|
-
currentInputField: null,
|
|
10158
|
-
isInputRequired: false,
|
|
10159
|
-
onEnter: void 0
|
|
10160
|
-
});
|
|
10161
|
-
}
|
|
10162
|
-
},
|
|
10163
|
-
setIsOpenDynamic(open) {
|
|
10164
|
-
if (!open) set({ value: "" });
|
|
10165
|
-
set({ isOpenDynamic: open ?? !get().isOpenDynamic });
|
|
10166
|
-
if (!get().isOpenDynamic) {
|
|
10167
|
-
set({
|
|
10168
|
-
children: void 0,
|
|
10169
|
-
value: "",
|
|
10170
|
-
currentInputField: null,
|
|
10171
|
-
isInputRequired: false
|
|
10172
|
-
});
|
|
10038
|
+
}
|
|
10039
|
+
function AlertDialogFooter({
|
|
10040
|
+
className,
|
|
10041
|
+
...props
|
|
10042
|
+
}) {
|
|
10043
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10044
|
+
"div",
|
|
10045
|
+
{
|
|
10046
|
+
"data-slot": "alert-dialog-footer",
|
|
10047
|
+
className: cn(
|
|
10048
|
+
"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
|
|
10049
|
+
className
|
|
10050
|
+
),
|
|
10051
|
+
...props
|
|
10173
10052
|
}
|
|
10174
|
-
|
|
10175
|
-
|
|
10176
|
-
|
|
10177
|
-
|
|
10178
|
-
|
|
10053
|
+
);
|
|
10054
|
+
}
|
|
10055
|
+
function AlertDialogTitle({
|
|
10056
|
+
className,
|
|
10057
|
+
...props
|
|
10058
|
+
}) {
|
|
10059
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10060
|
+
radixUi.AlertDialog.Title,
|
|
10061
|
+
{
|
|
10062
|
+
"data-slot": "alert-dialog-title",
|
|
10063
|
+
className: cn(
|
|
10064
|
+
"text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
|
|
10065
|
+
className
|
|
10066
|
+
),
|
|
10067
|
+
...props
|
|
10179
10068
|
}
|
|
10180
|
-
|
|
10181
|
-
|
|
10182
|
-
|
|
10183
|
-
|
|
10184
|
-
|
|
10185
|
-
|
|
10186
|
-
|
|
10187
|
-
|
|
10188
|
-
|
|
10189
|
-
|
|
10190
|
-
|
|
10191
|
-
|
|
10192
|
-
// current.field.onChange(newValue); // 🔥 RHF update
|
|
10193
|
-
// return {
|
|
10194
|
-
// currentInputField: {
|
|
10195
|
-
// ...current,
|
|
10196
|
-
// field: {
|
|
10197
|
-
// ...current.field,
|
|
10198
|
-
// value: newValue
|
|
10199
|
-
// }
|
|
10200
|
-
// }
|
|
10201
|
-
// };
|
|
10202
|
-
// }),
|
|
10203
|
-
write: (char) => set((state) => {
|
|
10204
|
-
if (!state.isInputRequired) {
|
|
10205
|
-
const newValue = get().value + char;
|
|
10206
|
-
set({ value: newValue });
|
|
10207
|
-
state.value = newValue;
|
|
10208
|
-
return state;
|
|
10069
|
+
);
|
|
10070
|
+
}
|
|
10071
|
+
function AlertDialogDescription({
|
|
10072
|
+
className,
|
|
10073
|
+
...props
|
|
10074
|
+
}) {
|
|
10075
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10076
|
+
radixUi.AlertDialog.Description,
|
|
10077
|
+
{
|
|
10078
|
+
"data-slot": "alert-dialog-description",
|
|
10079
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
10080
|
+
...props
|
|
10209
10081
|
}
|
|
10210
|
-
|
|
10211
|
-
|
|
10212
|
-
|
|
10213
|
-
|
|
10214
|
-
|
|
10215
|
-
|
|
10082
|
+
);
|
|
10083
|
+
}
|
|
10084
|
+
function AlertDialogMedia({
|
|
10085
|
+
className,
|
|
10086
|
+
...props
|
|
10087
|
+
}) {
|
|
10088
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10089
|
+
"div",
|
|
10090
|
+
{
|
|
10091
|
+
"data-slot": "alert-dialog-media",
|
|
10092
|
+
className: cn(
|
|
10093
|
+
"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
|
|
10094
|
+
className
|
|
10095
|
+
),
|
|
10096
|
+
...props
|
|
10216
10097
|
}
|
|
10217
|
-
|
|
10218
|
-
|
|
10219
|
-
|
|
10220
|
-
|
|
10221
|
-
|
|
10222
|
-
|
|
10223
|
-
|
|
10224
|
-
|
|
10225
|
-
|
|
10226
|
-
|
|
10227
|
-
|
|
10228
|
-
|
|
10229
|
-
|
|
10098
|
+
);
|
|
10099
|
+
}
|
|
10100
|
+
function AlertDialogAction({
|
|
10101
|
+
className,
|
|
10102
|
+
variant = "default",
|
|
10103
|
+
size = "default",
|
|
10104
|
+
...props
|
|
10105
|
+
}) {
|
|
10106
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
10107
|
+
radixUi.AlertDialog.Action,
|
|
10108
|
+
{
|
|
10109
|
+
"data-slot": "alert-dialog-action",
|
|
10110
|
+
className: cn(className),
|
|
10111
|
+
...props
|
|
10230
10112
|
}
|
|
10231
|
-
|
|
10232
|
-
|
|
10233
|
-
|
|
10234
|
-
|
|
10235
|
-
|
|
10236
|
-
|
|
10113
|
+
) });
|
|
10114
|
+
}
|
|
10115
|
+
function AlertDialogCancel({
|
|
10116
|
+
className,
|
|
10117
|
+
variant = "outline",
|
|
10118
|
+
size = "default",
|
|
10119
|
+
...props
|
|
10120
|
+
}) {
|
|
10121
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
10122
|
+
radixUi.AlertDialog.Cancel,
|
|
10123
|
+
{
|
|
10124
|
+
"data-slot": "alert-dialog-cancel",
|
|
10125
|
+
className: cn(className),
|
|
10126
|
+
...props
|
|
10237
10127
|
}
|
|
10238
|
-
|
|
10239
|
-
|
|
10240
|
-
|
|
10241
|
-
|
|
10242
|
-
|
|
10243
|
-
|
|
10244
|
-
|
|
10128
|
+
) });
|
|
10129
|
+
}
|
|
10130
|
+
var badgeVariants = classVarianceAuthority.cva(
|
|
10131
|
+
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
10132
|
+
{
|
|
10133
|
+
variants: {
|
|
10134
|
+
variant: {
|
|
10135
|
+
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
10136
|
+
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
10137
|
+
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
10138
|
+
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
|
|
10245
10139
|
}
|
|
10246
|
-
}
|
|
10247
|
-
|
|
10248
|
-
|
|
10249
|
-
if (!state.isInputRequired) {
|
|
10250
|
-
set({ value: "" });
|
|
10251
|
-
state.value = "";
|
|
10140
|
+
},
|
|
10141
|
+
defaultVariants: {
|
|
10142
|
+
variant: "default"
|
|
10252
10143
|
}
|
|
10253
|
-
if (!state.activeInput) return state;
|
|
10254
|
-
return {
|
|
10255
|
-
inputs: {
|
|
10256
|
-
...state.inputs,
|
|
10257
|
-
[state.activeInput]: ""
|
|
10258
|
-
}
|
|
10259
|
-
};
|
|
10260
|
-
}),
|
|
10261
|
-
setValue: (id, value) => set((state) => ({
|
|
10262
|
-
inputs: {
|
|
10263
|
-
...state.inputs,
|
|
10264
|
-
[id]: value
|
|
10265
|
-
}
|
|
10266
|
-
}))
|
|
10267
|
-
}));
|
|
10268
|
-
|
|
10269
|
-
// src/components/custom/form/inputs/base/definitions.ts
|
|
10270
|
-
var flattenFields = (fields, onAnyFieldChange) => {
|
|
10271
|
-
const result = [];
|
|
10272
|
-
for (const field of fields) {
|
|
10273
|
-
if (Array.isArray(field)) {
|
|
10274
|
-
result.push(...flattenFields(field));
|
|
10275
|
-
} else if (field.fields) {
|
|
10276
|
-
result.push(...flattenFields(field.fields));
|
|
10277
|
-
} else {
|
|
10278
|
-
if (onAnyFieldChange) field.onAnyFieldChange = (data) => onAnyFieldChange(data);
|
|
10279
|
-
result.push(field);
|
|
10280
|
-
}
|
|
10281
|
-
}
|
|
10282
|
-
return result;
|
|
10283
|
-
};
|
|
10284
|
-
var TextInputType = /* @__PURE__ */ ((TextInputType3) => {
|
|
10285
|
-
TextInputType3["DEFAULT"] = "default";
|
|
10286
|
-
TextInputType3["NUMBER"] = "number";
|
|
10287
|
-
TextInputType3["EMAIL"] = "email";
|
|
10288
|
-
TextInputType3["PHONE"] = "phone";
|
|
10289
|
-
TextInputType3["PASSWORD"] = "password";
|
|
10290
|
-
return TextInputType3;
|
|
10291
|
-
})(TextInputType || {});
|
|
10292
|
-
var QwertyKeyboard = class extends BaseKeyboard {
|
|
10293
|
-
render() {
|
|
10294
|
-
const { input, children } = this;
|
|
10295
|
-
return /* @__PURE__ */ jsxRuntime.jsx(KeyboardQwerty, { children, input });
|
|
10296
10144
|
}
|
|
10297
|
-
|
|
10298
|
-
|
|
10299
|
-
|
|
10300
|
-
|
|
10301
|
-
|
|
10302
|
-
|
|
10303
|
-
|
|
10304
|
-
const
|
|
10305
|
-
|
|
10306
|
-
|
|
10307
|
-
|
|
10308
|
-
|
|
10309
|
-
|
|
10310
|
-
|
|
10311
|
-
onEnter?.();
|
|
10312
|
-
storeonEnter?.();
|
|
10313
|
-
return;
|
|
10314
|
-
}
|
|
10315
|
-
if (key === "Backspace") {
|
|
10316
|
-
backspace();
|
|
10317
|
-
e.preventDefault();
|
|
10318
|
-
onDelete?.();
|
|
10319
|
-
return;
|
|
10320
|
-
}
|
|
10321
|
-
if (key === " ") {
|
|
10322
|
-
e.preventDefault();
|
|
10323
|
-
handleKey(" ");
|
|
10324
|
-
return;
|
|
10325
|
-
}
|
|
10326
|
-
if (key === "Shift") {
|
|
10327
|
-
handleShift();
|
|
10328
|
-
return;
|
|
10329
|
-
}
|
|
10330
|
-
if (key === "CapsLock") {
|
|
10331
|
-
handleCaps();
|
|
10332
|
-
return;
|
|
10333
|
-
}
|
|
10334
|
-
if (key === "Tab") {
|
|
10335
|
-
e.preventDefault();
|
|
10336
|
-
return;
|
|
10337
|
-
}
|
|
10338
|
-
if (key === "Escape") {
|
|
10339
|
-
setIsOpen(false);
|
|
10340
|
-
return;
|
|
10341
|
-
}
|
|
10342
|
-
if (key.length === 1) {
|
|
10343
|
-
handleKey(key);
|
|
10344
|
-
}
|
|
10345
|
-
};
|
|
10346
|
-
window.addEventListener("keydown", handleKeyDown);
|
|
10347
|
-
return () => {
|
|
10348
|
-
window.removeEventListener("keydown", handleKeyDown);
|
|
10349
|
-
};
|
|
10350
|
-
}, [currentInputField, shiftMode]);
|
|
10351
|
-
const handleShift = () => {
|
|
10352
|
-
const now = Date.now();
|
|
10353
|
-
if (now - lastShiftPress.current < 300) {
|
|
10354
|
-
setShiftMode((prev) => prev === "caps" ? "off" : "caps");
|
|
10355
|
-
} else {
|
|
10356
|
-
setShiftMode((prev) => prev === "once" ? "off" : "once");
|
|
10145
|
+
);
|
|
10146
|
+
function Badge({
|
|
10147
|
+
className,
|
|
10148
|
+
variant,
|
|
10149
|
+
asChild = false,
|
|
10150
|
+
...props
|
|
10151
|
+
}) {
|
|
10152
|
+
const Comp = asChild ? reactSlot.Slot : "span";
|
|
10153
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10154
|
+
Comp,
|
|
10155
|
+
{
|
|
10156
|
+
"data-slot": "badge",
|
|
10157
|
+
className: cn(badgeVariants({ variant }), className),
|
|
10158
|
+
...props
|
|
10357
10159
|
}
|
|
10358
|
-
|
|
10359
|
-
|
|
10360
|
-
|
|
10361
|
-
|
|
10362
|
-
|
|
10363
|
-
|
|
10364
|
-
|
|
10365
|
-
|
|
10366
|
-
|
|
10367
|
-
|
|
10368
|
-
|
|
10369
|
-
|
|
10370
|
-
|
|
10371
|
-
|
|
10372
|
-
|
|
10373
|
-
|
|
10374
|
-
|
|
10375
|
-
|
|
10376
|
-
|
|
10377
|
-
|
|
10378
|
-
|
|
10379
|
-
|
|
10380
|
-
|
|
10381
|
-
|
|
10382
|
-
|
|
10383
|
-
|
|
10384
|
-
|
|
10385
|
-
(
|
|
10386
|
-
|
|
10387
|
-
return { label: k, onClick: () => handleKey(k) };
|
|
10388
|
-
}
|
|
10389
|
-
)
|
|
10390
|
-
);
|
|
10391
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col", children: [
|
|
10392
|
-
textField,
|
|
10393
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10394
|
-
KeyboardBuilder,
|
|
10395
|
-
{
|
|
10396
|
-
className: "w-full h-full",
|
|
10397
|
-
keyFontSize: keyFontSize3,
|
|
10398
|
-
keys: [
|
|
10399
|
-
...keys,
|
|
10400
|
-
[
|
|
10401
|
-
{ label: "ABC", onClick: () => setMode("letters"), className: "flex-[2]" },
|
|
10402
|
-
{ label: " ", onClick: () => handleKey(" "), className: "flex-[4]" },
|
|
10403
|
-
{ label: "Enter", onClick: onEnter, className: "flex-[2] bg-green-200 " }
|
|
10404
|
-
]
|
|
10405
|
-
]
|
|
10406
|
-
}
|
|
10407
|
-
)
|
|
10408
|
-
] });
|
|
10409
|
-
}
|
|
10410
|
-
const fila1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"].map((l) => letter(l, isUpper, handleKey));
|
|
10411
|
-
const fila2 = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"].map((l) => letter(l, isUpper, handleKey));
|
|
10412
|
-
const fila3 = ["a", "s", "d", "f", "g", "h", "j", "k", "l"].map((l) => letter(l, isUpper, handleKey));
|
|
10413
|
-
const fila4 = ["z", "x", "c", "v", "b", "n", "m"].map((l) => letter(l, isUpper, handleKey));
|
|
10414
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col", children: [
|
|
10415
|
-
textField,
|
|
10416
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10417
|
-
KeyboardBuilder,
|
|
10418
|
-
{
|
|
10419
|
-
className: "w-full h-full flex-3",
|
|
10420
|
-
keyFontSize: keyFontSize3,
|
|
10421
|
-
keys: [
|
|
10422
|
-
[
|
|
10423
|
-
{ label: "esc", onClick: () => {
|
|
10424
|
-
setIsOpen(false);
|
|
10425
|
-
}, className: "bg-red-200" },
|
|
10426
|
-
...fila1,
|
|
10427
|
-
{ label: "delete", icons: [lucideReact.DeleteIcon], onClick: () => {
|
|
10428
|
-
backspace();
|
|
10429
|
-
}, className: "bg-red-200 text-xs" }
|
|
10430
|
-
],
|
|
10431
|
-
[
|
|
10432
|
-
{ label: "tab", onClick: () => {
|
|
10433
|
-
} },
|
|
10434
|
-
...fila2
|
|
10435
|
-
// { icons:[Delete], onClick: backspace, className: 'text-xs' },
|
|
10436
|
-
],
|
|
10437
|
-
[
|
|
10438
|
-
{ label: "caps", onClick: handleCaps },
|
|
10439
|
-
...fila3
|
|
10440
|
-
],
|
|
10441
|
-
[
|
|
10442
|
-
{
|
|
10443
|
-
label: "",
|
|
10444
|
-
icons: [shiftLabel],
|
|
10445
|
-
onClick: handleShift,
|
|
10446
|
-
className: "flex-1",
|
|
10447
|
-
isActive: shiftActive
|
|
10448
|
-
},
|
|
10449
|
-
...fila4,
|
|
10450
|
-
{ label: ".", onClick: () => handleKey(".") },
|
|
10451
|
-
{ label: "-", onClick: () => handleKey("-") },
|
|
10452
|
-
{ label: "_", onClick: () => handleKey("_") }
|
|
10453
|
-
],
|
|
10454
|
-
[
|
|
10455
|
-
{ label: "?123", onClick: () => setMode("symbols"), className: "flex-[2]" },
|
|
10456
|
-
{ label: " ", onClick: () => handleKey(" "), className: "flex-[4]" },
|
|
10457
|
-
{ label: "Enter", onClick: onEnter, className: "flex-[2] bg-green-200" }
|
|
10458
|
-
]
|
|
10459
|
-
]
|
|
10160
|
+
);
|
|
10161
|
+
}
|
|
10162
|
+
function Separator({
|
|
10163
|
+
className,
|
|
10164
|
+
orientation: orientation2 = "horizontal",
|
|
10165
|
+
decorative = true,
|
|
10166
|
+
...props
|
|
10167
|
+
}) {
|
|
10168
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10169
|
+
SeparatorPrimitive__namespace.Root,
|
|
10170
|
+
{
|
|
10171
|
+
"data-slot": "separator",
|
|
10172
|
+
decorative,
|
|
10173
|
+
orientation: orientation2,
|
|
10174
|
+
className: cn(
|
|
10175
|
+
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
|
10176
|
+
className
|
|
10177
|
+
),
|
|
10178
|
+
...props
|
|
10179
|
+
}
|
|
10180
|
+
);
|
|
10181
|
+
}
|
|
10182
|
+
var buttonGroupVariants = classVarianceAuthority.cva(
|
|
10183
|
+
"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
|
|
10184
|
+
{
|
|
10185
|
+
variants: {
|
|
10186
|
+
orientation: {
|
|
10187
|
+
horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
|
10188
|
+
vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
|
|
10460
10189
|
}
|
|
10461
|
-
|
|
10462
|
-
|
|
10463
|
-
|
|
10464
|
-
var keyboardMap = {
|
|
10465
|
-
["qwerty" /* QWERTY */]: QwertyKeyboard,
|
|
10466
|
-
["qwerty_not_chars" /* QWERTY_NOT_CHARS */]: QwertyKeyboard,
|
|
10467
|
-
["number" /* NUMBER */]: QwertyKeyboard
|
|
10468
|
-
};
|
|
10469
|
-
var KeyboardFactory = class {
|
|
10470
|
-
static create(typeKeyboard, input, children) {
|
|
10471
|
-
const inputKbType = input?.keyboardType;
|
|
10472
|
-
let keyboardType = typeKeyboard ?? "qwerty" /* QWERTY */;
|
|
10473
|
-
if (inputKbType) {
|
|
10474
|
-
if (inputKbType == "number" /* NUMBER */) keyboardType = "number" /* NUMBER */;
|
|
10190
|
+
},
|
|
10191
|
+
defaultVariants: {
|
|
10192
|
+
orientation: "horizontal"
|
|
10475
10193
|
}
|
|
10476
|
-
const keyboardClass = keyboardMap[keyboardType] ?? QwertyKeyboard;
|
|
10477
|
-
const instance = new keyboardClass(input, children);
|
|
10478
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: instance.render() });
|
|
10479
10194
|
}
|
|
10480
|
-
|
|
10481
|
-
|
|
10482
|
-
// src/components/custom/form/input-errors.ts
|
|
10483
|
-
var validationMessages = {
|
|
10484
|
-
required: "Este campo es obligatorio",
|
|
10485
|
-
email: "El correo electr\xF3nico no es v\xE1lido",
|
|
10486
|
-
invalidFormat: "Formato inv\xE1lido",
|
|
10487
|
-
onlyPositive: "Solo n\xFAmeros positivos",
|
|
10488
|
-
minLength: (length) => `Debe tener al menos ${length} caracteres`,
|
|
10489
|
-
maxLength: (length) => `No puede tener m\xE1s de ${length} caracteres`,
|
|
10490
|
-
passwordMismatch: "Las contrase\xF1as no coinciden",
|
|
10491
|
-
invalidPhone: "El n\xFAmero de tel\xE9fono no es v\xE1lido"
|
|
10492
|
-
};
|
|
10493
|
-
|
|
10494
|
-
// src/components/custom/form/inputs/base/base-input.ts
|
|
10495
|
-
var BaseInput = class {
|
|
10496
|
-
constructor(input, form, isSubmitting) {
|
|
10497
|
-
this.input = input;
|
|
10498
|
-
this.form = form;
|
|
10499
|
-
this.isSubmitting = isSubmitting;
|
|
10500
|
-
}
|
|
10501
|
-
};
|
|
10502
|
-
var entityToInputOption = (entitiy, name = "name", description = "description", groupedLabel, optionLabel = "label") => ({
|
|
10503
|
-
id: entitiy["id"],
|
|
10504
|
-
name: entitiy[name],
|
|
10505
|
-
label: entitiy[optionLabel],
|
|
10506
|
-
description: entitiy[description],
|
|
10507
|
-
groupedLabel
|
|
10508
|
-
});
|
|
10509
|
-
var entitiesToInputOption = (data, optionValue = "name", groupedLabel, optionLabel = "description") => {
|
|
10510
|
-
const entities = [];
|
|
10511
|
-
for (const key of data) {
|
|
10512
|
-
const entidad = entityToInputOption(key, optionValue, optionLabel, groupedLabel);
|
|
10513
|
-
if (entidad) entities.push(entidad);
|
|
10514
|
-
}
|
|
10515
|
-
return entities;
|
|
10516
|
-
};
|
|
10517
|
-
var entityToGroupedOption = (entitiy, name = "name") => ({
|
|
10518
|
-
id: entitiy["id"],
|
|
10519
|
-
label: entitiy[name] || entitiy["label"],
|
|
10520
|
-
options: entitiy["options"] || [],
|
|
10521
|
-
selectedOptions: []
|
|
10522
|
-
});
|
|
10523
|
-
var entitiesToGroupedOption = (data, optionValue = "name") => {
|
|
10524
|
-
const entities = [];
|
|
10525
|
-
for (const key of data) {
|
|
10526
|
-
const entidad = entityToGroupedOption(key, optionValue);
|
|
10527
|
-
if (entidad) entities.push(entidad);
|
|
10528
|
-
}
|
|
10529
|
-
return entities;
|
|
10530
|
-
};
|
|
10531
|
-
var handleOnChage = (event, input, field) => {
|
|
10532
|
-
let value = event;
|
|
10533
|
-
if (event && typeof event === "object" && "target" in event) {
|
|
10534
|
-
value = event.target.value;
|
|
10535
|
-
}
|
|
10536
|
-
field?.onChange(value);
|
|
10537
|
-
const data = input.form?.getValues();
|
|
10538
|
-
input.onChange?.(value, data);
|
|
10539
|
-
input.onAnyFieldChange?.(data);
|
|
10540
|
-
};
|
|
10541
|
-
var isValidField = (input, form, defaultValue) => {
|
|
10542
|
-
const value = defaultValue ?? form.getValues(input.name);
|
|
10543
|
-
const fieldState = form.getFieldState(input.name);
|
|
10544
|
-
if (input.zodType) {
|
|
10545
|
-
const result = input.zodType.safeParse(value);
|
|
10546
|
-
return result.success;
|
|
10547
|
-
}
|
|
10548
|
-
return !fieldState.error && value !== void 0 && value !== "";
|
|
10549
|
-
};
|
|
10550
|
-
|
|
10551
|
-
// src/components/custom/form/inputs/base/input-types.ts
|
|
10552
|
-
var InputTypes = /* @__PURE__ */ ((InputTypes3) => {
|
|
10553
|
-
InputTypes3["HIDDEN"] = "hidden";
|
|
10554
|
-
InputTypes3["TEXT"] = "text";
|
|
10555
|
-
InputTypes3["TEXT_GROUP"] = "text_group";
|
|
10556
|
-
InputTypes3["NUMBER"] = "number";
|
|
10557
|
-
InputTypes3["SWITCH"] = "switch";
|
|
10558
|
-
InputTypes3["CHECKBOX"] = "checkbox";
|
|
10559
|
-
InputTypes3["SELECT"] = "select";
|
|
10560
|
-
InputTypes3["SIMPLE_CHECK_LIST"] = "siple_checklist";
|
|
10561
|
-
InputTypes3["CHECK_LIST"] = "checklist";
|
|
10562
|
-
InputTypes3["GROUPED_SWITCH_LIST"] = "grouped_switchlist";
|
|
10563
|
-
InputTypes3["ACCORDION_GROUPED_SWITCH_LIST"] = "accordion_grouped_switchlist";
|
|
10564
|
-
InputTypes3["DATE"] = "date";
|
|
10565
|
-
InputTypes3["TEXTAREA"] = "textarea";
|
|
10566
|
-
InputTypes3["FILE"] = "file";
|
|
10567
|
-
InputTypes3["OTP"] = "otp";
|
|
10568
|
-
InputTypes3["FORM"] = "form";
|
|
10569
|
-
InputTypes3["COLOR"] = "color";
|
|
10570
|
-
InputTypes3["RADIO_GROUP"] = "radio_group";
|
|
10571
|
-
InputTypes3["TAGS"] = "tags";
|
|
10572
|
-
InputTypes3["DATE_TIME"] = "date_time";
|
|
10573
|
-
InputTypes3["TIME"] = "time";
|
|
10574
|
-
InputTypes3["FILE_MULTI_UPLOAD"] = "file_multi_upload";
|
|
10575
|
-
InputTypes3["SLIDER"] = "slider";
|
|
10576
|
-
InputTypes3["BUTTON_GROUP"] = "button_group";
|
|
10577
|
-
InputTypes3["CURRENCY"] = "currency";
|
|
10578
|
-
InputTypes3["KEY_VALUE"] = "key_value";
|
|
10579
|
-
InputTypes3["REPEATER"] = "repeater";
|
|
10580
|
-
InputTypes3["MULTI_SELECT"] = "multi_select";
|
|
10581
|
-
InputTypes3["COMBOBOX"] = "COMBO_BOX";
|
|
10582
|
-
InputTypes3["SORTABLE_LIST"] = "sortable_list";
|
|
10583
|
-
InputTypes3["REPEATER_TABS"] = "repeater_tabs";
|
|
10584
|
-
InputTypes3["STRING_LIST"] = "string_list";
|
|
10585
|
-
InputTypes3["RATING"] = "rating";
|
|
10586
|
-
InputTypes3["PHONE"] = "phone";
|
|
10587
|
-
InputTypes3["URL"] = "url";
|
|
10588
|
-
InputTypes3["PASSWORD"] = "password";
|
|
10589
|
-
InputTypes3["AUTOCOMPLETE"] = "autocomplete";
|
|
10590
|
-
InputTypes3["EMAIL"] = "email";
|
|
10591
|
-
InputTypes3["SEARCH"] = "search";
|
|
10592
|
-
InputTypes3["LOCATION_PICKER"] = "location_picker";
|
|
10593
|
-
InputTypes3["DATE_RANGE"] = "date_range";
|
|
10594
|
-
InputTypes3["COUNTRY_SELECT"] = "country_select";
|
|
10595
|
-
InputTypes3["RANGE"] = "range";
|
|
10596
|
-
InputTypes3["FILE_UPLOAD"] = "file_upload";
|
|
10597
|
-
return InputTypes3;
|
|
10598
|
-
})(InputTypes || {});
|
|
10599
|
-
var inputFieldComp = [
|
|
10600
|
-
"string_list" /* STRING_LIST */,
|
|
10601
|
-
"repeater_tabs" /* REPEATER_TABS */,
|
|
10602
|
-
"sortable_list" /* SORTABLE_LIST */,
|
|
10603
|
-
"COMBO_BOX" /* COMBOBOX */,
|
|
10604
|
-
"multi_select" /* MULTI_SELECT */,
|
|
10605
|
-
"repeater" /* REPEATER */,
|
|
10606
|
-
"key_value" /* KEY_VALUE */,
|
|
10607
|
-
"currency" /* CURRENCY */,
|
|
10608
|
-
"button_group" /* BUTTON_GROUP */,
|
|
10609
|
-
"slider" /* SLIDER */,
|
|
10610
|
-
"file_multi_upload" /* FILE_MULTI_UPLOAD */,
|
|
10611
|
-
"time" /* TIME */,
|
|
10612
|
-
"date_time" /* DATE_TIME */,
|
|
10613
|
-
"tags" /* TAGS */,
|
|
10614
|
-
"radio_group" /* RADIO_GROUP */,
|
|
10615
|
-
"text_group" /* TEXT_GROUP */,
|
|
10616
|
-
"accordion_grouped_switchlist" /* ACCORDION_GROUPED_SWITCH_LIST */,
|
|
10617
|
-
"grouped_switchlist" /* GROUPED_SWITCH_LIST */,
|
|
10618
|
-
"text" /* TEXT */,
|
|
10619
|
-
"switch" /* SWITCH */,
|
|
10620
|
-
"siple_checklist" /* SIMPLE_CHECK_LIST */,
|
|
10621
|
-
"checkbox" /* CHECKBOX */,
|
|
10622
|
-
"color" /* COLOR */,
|
|
10623
|
-
"otp" /* OTP */,
|
|
10624
|
-
"select" /* SELECT */,
|
|
10625
|
-
"date" /* DATE */,
|
|
10626
|
-
"file" /* FILE */,
|
|
10627
|
-
"form" /* FORM */,
|
|
10628
|
-
"number" /* NUMBER */,
|
|
10629
|
-
"textarea" /* TEXTAREA */,
|
|
10630
|
-
// InputTypes.SWITCH_LIST,
|
|
10631
|
-
"hidden" /* HIDDEN */,
|
|
10632
|
-
// ✨ New input types (v1.35.0)
|
|
10633
|
-
"rating" /* RATING */,
|
|
10634
|
-
"phone" /* PHONE */,
|
|
10635
|
-
"url" /* URL */,
|
|
10636
|
-
"password" /* PASSWORD */,
|
|
10637
|
-
"autocomplete" /* AUTOCOMPLETE */,
|
|
10638
|
-
// ✨ New input types (v1.36.0)
|
|
10639
|
-
"email" /* EMAIL */,
|
|
10640
|
-
"search" /* SEARCH */,
|
|
10641
|
-
"location_picker" /* LOCATION_PICKER */,
|
|
10642
|
-
"date_range" /* DATE_RANGE */,
|
|
10643
|
-
"country_select" /* COUNTRY_SELECT */,
|
|
10644
|
-
"range" /* RANGE */,
|
|
10645
|
-
// ✨ New input types (v1.37.0)
|
|
10646
|
-
"file_upload" /* FILE_UPLOAD */
|
|
10647
|
-
];
|
|
10648
|
-
function Accordion({
|
|
10649
|
-
...props
|
|
10650
|
-
}) {
|
|
10651
|
-
return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
|
|
10652
|
-
}
|
|
10653
|
-
function AccordionItem({
|
|
10195
|
+
);
|
|
10196
|
+
function ButtonGroup({
|
|
10654
10197
|
className,
|
|
10198
|
+
orientation: orientation2,
|
|
10655
10199
|
...props
|
|
10656
10200
|
}) {
|
|
10657
10201
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10658
|
-
|
|
10202
|
+
"div",
|
|
10659
10203
|
{
|
|
10660
|
-
|
|
10661
|
-
|
|
10204
|
+
role: "group",
|
|
10205
|
+
"data-slot": "button-group",
|
|
10206
|
+
"data-orientation": orientation2,
|
|
10207
|
+
className: cn(buttonGroupVariants({ orientation: orientation2 }), className),
|
|
10662
10208
|
...props
|
|
10663
10209
|
}
|
|
10664
10210
|
);
|
|
10665
10211
|
}
|
|
10666
|
-
function
|
|
10212
|
+
function ButtonGroupText({
|
|
10667
10213
|
className,
|
|
10668
|
-
|
|
10214
|
+
asChild = false,
|
|
10669
10215
|
...props
|
|
10670
10216
|
}) {
|
|
10671
|
-
|
|
10672
|
-
|
|
10217
|
+
const Comp = asChild ? reactSlot.Slot : "div";
|
|
10218
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10219
|
+
Comp,
|
|
10673
10220
|
{
|
|
10674
|
-
"data-slot": "accordion-trigger",
|
|
10675
10221
|
className: cn(
|
|
10676
|
-
"
|
|
10222
|
+
"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",
|
|
10677
10223
|
className
|
|
10678
10224
|
),
|
|
10679
|
-
...props
|
|
10680
|
-
children: [
|
|
10681
|
-
children,
|
|
10682
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
|
|
10683
|
-
]
|
|
10684
|
-
}
|
|
10685
|
-
) });
|
|
10686
|
-
}
|
|
10687
|
-
function AccordionContent({
|
|
10688
|
-
className,
|
|
10689
|
-
children,
|
|
10690
|
-
...props
|
|
10691
|
-
}) {
|
|
10692
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10693
|
-
AccordionPrimitive__namespace.Content,
|
|
10694
|
-
{
|
|
10695
|
-
"data-slot": "accordion-content",
|
|
10696
|
-
className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
|
|
10697
|
-
...props,
|
|
10698
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
|
|
10225
|
+
...props
|
|
10699
10226
|
}
|
|
10700
10227
|
);
|
|
10701
10228
|
}
|
|
10702
|
-
function
|
|
10703
|
-
...props
|
|
10704
|
-
}) {
|
|
10705
|
-
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
|
|
10706
|
-
}
|
|
10707
|
-
function AlertDialogTrigger({
|
|
10708
|
-
...props
|
|
10709
|
-
}) {
|
|
10710
|
-
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
|
|
10711
|
-
}
|
|
10712
|
-
function AlertDialogPortal({
|
|
10713
|
-
...props
|
|
10714
|
-
}) {
|
|
10715
|
-
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
|
|
10716
|
-
}
|
|
10717
|
-
function AlertDialogOverlay({
|
|
10229
|
+
function ButtonGroupSeparator({
|
|
10718
10230
|
className,
|
|
10231
|
+
orientation: orientation2 = "vertical",
|
|
10719
10232
|
...props
|
|
10720
10233
|
}) {
|
|
10721
10234
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10722
|
-
|
|
10235
|
+
Separator,
|
|
10723
10236
|
{
|
|
10724
|
-
"data-slot": "
|
|
10237
|
+
"data-slot": "button-group-separator",
|
|
10238
|
+
orientation: orientation2,
|
|
10725
10239
|
className: cn(
|
|
10726
|
-
"
|
|
10240
|
+
"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
|
|
10727
10241
|
className
|
|
10728
10242
|
),
|
|
10729
10243
|
...props
|
|
10730
10244
|
}
|
|
10731
10245
|
);
|
|
10732
10246
|
}
|
|
10733
|
-
function
|
|
10247
|
+
function Calendar({
|
|
10734
10248
|
className,
|
|
10735
|
-
|
|
10736
|
-
|
|
10737
|
-
|
|
10738
|
-
|
|
10739
|
-
|
|
10740
|
-
|
|
10741
|
-
radixUi.AlertDialog.Content,
|
|
10742
|
-
{
|
|
10743
|
-
"data-slot": "alert-dialog-content",
|
|
10744
|
-
"data-size": size,
|
|
10745
|
-
className: cn(
|
|
10746
|
-
"group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
|
|
10747
|
-
className
|
|
10748
|
-
),
|
|
10749
|
-
...props
|
|
10750
|
-
}
|
|
10751
|
-
)
|
|
10752
|
-
] });
|
|
10753
|
-
}
|
|
10754
|
-
function AlertDialogHeader({
|
|
10755
|
-
className,
|
|
10756
|
-
...props
|
|
10757
|
-
}) {
|
|
10758
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10759
|
-
"div",
|
|
10760
|
-
{
|
|
10761
|
-
"data-slot": "alert-dialog-header",
|
|
10762
|
-
className: cn(
|
|
10763
|
-
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
|
|
10764
|
-
className
|
|
10765
|
-
),
|
|
10766
|
-
...props
|
|
10767
|
-
}
|
|
10768
|
-
);
|
|
10769
|
-
}
|
|
10770
|
-
function AlertDialogFooter({
|
|
10771
|
-
className,
|
|
10772
|
-
...props
|
|
10773
|
-
}) {
|
|
10774
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10775
|
-
"div",
|
|
10776
|
-
{
|
|
10777
|
-
"data-slot": "alert-dialog-footer",
|
|
10778
|
-
className: cn(
|
|
10779
|
-
"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
|
|
10780
|
-
className
|
|
10781
|
-
),
|
|
10782
|
-
...props
|
|
10783
|
-
}
|
|
10784
|
-
);
|
|
10785
|
-
}
|
|
10786
|
-
function AlertDialogTitle({
|
|
10787
|
-
className,
|
|
10788
|
-
...props
|
|
10789
|
-
}) {
|
|
10790
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10791
|
-
radixUi.AlertDialog.Title,
|
|
10792
|
-
{
|
|
10793
|
-
"data-slot": "alert-dialog-title",
|
|
10794
|
-
className: cn(
|
|
10795
|
-
"text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
|
|
10796
|
-
className
|
|
10797
|
-
),
|
|
10798
|
-
...props
|
|
10799
|
-
}
|
|
10800
|
-
);
|
|
10801
|
-
}
|
|
10802
|
-
function AlertDialogDescription({
|
|
10803
|
-
className,
|
|
10804
|
-
...props
|
|
10805
|
-
}) {
|
|
10806
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10807
|
-
radixUi.AlertDialog.Description,
|
|
10808
|
-
{
|
|
10809
|
-
"data-slot": "alert-dialog-description",
|
|
10810
|
-
className: cn("text-sm text-muted-foreground", className),
|
|
10811
|
-
...props
|
|
10812
|
-
}
|
|
10813
|
-
);
|
|
10814
|
-
}
|
|
10815
|
-
function AlertDialogMedia({
|
|
10816
|
-
className,
|
|
10817
|
-
...props
|
|
10818
|
-
}) {
|
|
10819
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10820
|
-
"div",
|
|
10821
|
-
{
|
|
10822
|
-
"data-slot": "alert-dialog-media",
|
|
10823
|
-
className: cn(
|
|
10824
|
-
"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
|
|
10825
|
-
className
|
|
10826
|
-
),
|
|
10827
|
-
...props
|
|
10828
|
-
}
|
|
10829
|
-
);
|
|
10830
|
-
}
|
|
10831
|
-
function AlertDialogAction({
|
|
10832
|
-
className,
|
|
10833
|
-
variant = "default",
|
|
10834
|
-
size = "default",
|
|
10835
|
-
...props
|
|
10836
|
-
}) {
|
|
10837
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
10838
|
-
radixUi.AlertDialog.Action,
|
|
10839
|
-
{
|
|
10840
|
-
"data-slot": "alert-dialog-action",
|
|
10841
|
-
className: cn(className),
|
|
10842
|
-
...props
|
|
10843
|
-
}
|
|
10844
|
-
) });
|
|
10845
|
-
}
|
|
10846
|
-
function AlertDialogCancel({
|
|
10847
|
-
className,
|
|
10848
|
-
variant = "outline",
|
|
10849
|
-
size = "default",
|
|
10850
|
-
...props
|
|
10851
|
-
}) {
|
|
10852
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
10853
|
-
radixUi.AlertDialog.Cancel,
|
|
10854
|
-
{
|
|
10855
|
-
"data-slot": "alert-dialog-cancel",
|
|
10856
|
-
className: cn(className),
|
|
10857
|
-
...props
|
|
10858
|
-
}
|
|
10859
|
-
) });
|
|
10860
|
-
}
|
|
10861
|
-
var badgeVariants = classVarianceAuthority.cva(
|
|
10862
|
-
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
10863
|
-
{
|
|
10864
|
-
variants: {
|
|
10865
|
-
variant: {
|
|
10866
|
-
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
10867
|
-
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
10868
|
-
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
10869
|
-
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
|
|
10870
|
-
}
|
|
10871
|
-
},
|
|
10872
|
-
defaultVariants: {
|
|
10873
|
-
variant: "default"
|
|
10874
|
-
}
|
|
10875
|
-
}
|
|
10876
|
-
);
|
|
10877
|
-
function Badge({
|
|
10878
|
-
className,
|
|
10879
|
-
variant,
|
|
10880
|
-
asChild = false,
|
|
10881
|
-
...props
|
|
10882
|
-
}) {
|
|
10883
|
-
const Comp = asChild ? reactSlot.Slot : "span";
|
|
10884
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10885
|
-
Comp,
|
|
10886
|
-
{
|
|
10887
|
-
"data-slot": "badge",
|
|
10888
|
-
className: cn(badgeVariants({ variant }), className),
|
|
10889
|
-
...props
|
|
10890
|
-
}
|
|
10891
|
-
);
|
|
10892
|
-
}
|
|
10893
|
-
function Separator({
|
|
10894
|
-
className,
|
|
10895
|
-
orientation: orientation2 = "horizontal",
|
|
10896
|
-
decorative = true,
|
|
10897
|
-
...props
|
|
10898
|
-
}) {
|
|
10899
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10900
|
-
SeparatorPrimitive__namespace.Root,
|
|
10901
|
-
{
|
|
10902
|
-
"data-slot": "separator",
|
|
10903
|
-
decorative,
|
|
10904
|
-
orientation: orientation2,
|
|
10905
|
-
className: cn(
|
|
10906
|
-
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
|
10907
|
-
className
|
|
10908
|
-
),
|
|
10909
|
-
...props
|
|
10910
|
-
}
|
|
10911
|
-
);
|
|
10912
|
-
}
|
|
10913
|
-
var buttonGroupVariants = classVarianceAuthority.cva(
|
|
10914
|
-
"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
|
|
10915
|
-
{
|
|
10916
|
-
variants: {
|
|
10917
|
-
orientation: {
|
|
10918
|
-
horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
|
10919
|
-
vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
|
|
10920
|
-
}
|
|
10921
|
-
},
|
|
10922
|
-
defaultVariants: {
|
|
10923
|
-
orientation: "horizontal"
|
|
10924
|
-
}
|
|
10925
|
-
}
|
|
10926
|
-
);
|
|
10927
|
-
function ButtonGroup({
|
|
10928
|
-
className,
|
|
10929
|
-
orientation: orientation2,
|
|
10930
|
-
...props
|
|
10931
|
-
}) {
|
|
10932
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10933
|
-
"div",
|
|
10934
|
-
{
|
|
10935
|
-
role: "group",
|
|
10936
|
-
"data-slot": "button-group",
|
|
10937
|
-
"data-orientation": orientation2,
|
|
10938
|
-
className: cn(buttonGroupVariants({ orientation: orientation2 }), className),
|
|
10939
|
-
...props
|
|
10940
|
-
}
|
|
10941
|
-
);
|
|
10942
|
-
}
|
|
10943
|
-
function ButtonGroupText({
|
|
10944
|
-
className,
|
|
10945
|
-
asChild = false,
|
|
10946
|
-
...props
|
|
10947
|
-
}) {
|
|
10948
|
-
const Comp = asChild ? reactSlot.Slot : "div";
|
|
10949
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10950
|
-
Comp,
|
|
10951
|
-
{
|
|
10952
|
-
className: cn(
|
|
10953
|
-
"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",
|
|
10954
|
-
className
|
|
10955
|
-
),
|
|
10956
|
-
...props
|
|
10957
|
-
}
|
|
10958
|
-
);
|
|
10959
|
-
}
|
|
10960
|
-
function ButtonGroupSeparator({
|
|
10961
|
-
className,
|
|
10962
|
-
orientation: orientation2 = "vertical",
|
|
10963
|
-
...props
|
|
10964
|
-
}) {
|
|
10965
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10966
|
-
Separator,
|
|
10967
|
-
{
|
|
10968
|
-
"data-slot": "button-group-separator",
|
|
10969
|
-
orientation: orientation2,
|
|
10970
|
-
className: cn(
|
|
10971
|
-
"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
|
|
10972
|
-
className
|
|
10973
|
-
),
|
|
10974
|
-
...props
|
|
10975
|
-
}
|
|
10976
|
-
);
|
|
10977
|
-
}
|
|
10978
|
-
function Calendar({
|
|
10979
|
-
className,
|
|
10980
|
-
classNames,
|
|
10981
|
-
showOutsideDays = true,
|
|
10982
|
-
captionLayout = "label",
|
|
10983
|
-
buttonVariant = "ghost",
|
|
10984
|
-
formatters,
|
|
10985
|
-
components,
|
|
10249
|
+
classNames,
|
|
10250
|
+
showOutsideDays = true,
|
|
10251
|
+
captionLayout = "label",
|
|
10252
|
+
buttonVariant = "ghost",
|
|
10253
|
+
formatters,
|
|
10254
|
+
components,
|
|
10986
10255
|
...props
|
|
10987
10256
|
}) {
|
|
10988
10257
|
const defaultClassNames = reactDayPicker.getDefaultClassNames();
|
|
@@ -12438,6 +11707,16 @@ function SelectScrollDownButton({
|
|
|
12438
11707
|
function Sheet({ ...props }) {
|
|
12439
11708
|
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "sheet", ...props });
|
|
12440
11709
|
}
|
|
11710
|
+
function SheetTrigger({
|
|
11711
|
+
...props
|
|
11712
|
+
}) {
|
|
11713
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
|
|
11714
|
+
}
|
|
11715
|
+
function SheetClose({
|
|
11716
|
+
...props
|
|
11717
|
+
}) {
|
|
11718
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "sheet-close", ...props });
|
|
11719
|
+
}
|
|
12441
11720
|
function SheetPortal({
|
|
12442
11721
|
...props
|
|
12443
11722
|
}) {
|
|
@@ -12473,7 +11752,7 @@ function SheetContent({
|
|
|
12473
11752
|
{
|
|
12474
11753
|
"data-slot": "sheet-content",
|
|
12475
11754
|
className: cn(
|
|
12476
|
-
"fixed z-50 flex flex-col gap-
|
|
11755
|
+
"fixed z-50 flex flex-col gap-2 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
|
|
12477
11756
|
side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
|
12478
11757
|
side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
12479
11758
|
side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
@@ -12497,7 +11776,7 @@ function SheetHeader({ className, ...props }) {
|
|
|
12497
11776
|
"div",
|
|
12498
11777
|
{
|
|
12499
11778
|
"data-slot": "sheet-header",
|
|
12500
|
-
className: cn("flex flex-col gap-1.5 p-
|
|
11779
|
+
className: cn("flex flex-col gap-1.5 p-2", className),
|
|
12501
11780
|
...props
|
|
12502
11781
|
}
|
|
12503
11782
|
);
|
|
@@ -12507,7 +11786,7 @@ function SheetFooter({ className, ...props }) {
|
|
|
12507
11786
|
"div",
|
|
12508
11787
|
{
|
|
12509
11788
|
"data-slot": "sheet-footer",
|
|
12510
|
-
className: cn("mt-auto flex flex-col gap-2 p-
|
|
11789
|
+
className: cn("mt-auto flex flex-col gap-2 p-2", className),
|
|
12511
11790
|
...props
|
|
12512
11791
|
}
|
|
12513
11792
|
);
|
|
@@ -12794,6 +12073,975 @@ function TooltipContent({
|
|
|
12794
12073
|
}
|
|
12795
12074
|
) });
|
|
12796
12075
|
}
|
|
12076
|
+
|
|
12077
|
+
// src/components/custom/keyboard/keyboard-types.ts
|
|
12078
|
+
var KeyboardTypes = /* @__PURE__ */ ((KeyboardTypes3) => {
|
|
12079
|
+
KeyboardTypes3["QWERTY"] = "qwerty";
|
|
12080
|
+
KeyboardTypes3["NUMBER"] = "number";
|
|
12081
|
+
KeyboardTypes3["QWERTY_NOT_CHARS"] = "qwerty_not_chars";
|
|
12082
|
+
return KeyboardTypes3;
|
|
12083
|
+
})(KeyboardTypes || {});
|
|
12084
|
+
|
|
12085
|
+
// src/components/custom/keyboard/providers/keyboard.store.ts
|
|
12086
|
+
var useKeyboardStore = zustand.create((set, get) => ({
|
|
12087
|
+
isInputRequired: false,
|
|
12088
|
+
activeInput: null,
|
|
12089
|
+
inputs: {},
|
|
12090
|
+
type: "qwerty" /* QWERTY */,
|
|
12091
|
+
currentInputField: null,
|
|
12092
|
+
children: void 0,
|
|
12093
|
+
isOpen: false,
|
|
12094
|
+
isOpenDynamic: false,
|
|
12095
|
+
value: "",
|
|
12096
|
+
onEnter: void 0,
|
|
12097
|
+
setChildren(children) {
|
|
12098
|
+
set({ children });
|
|
12099
|
+
},
|
|
12100
|
+
setOnEnter(onEnter) {
|
|
12101
|
+
set({ onEnter });
|
|
12102
|
+
},
|
|
12103
|
+
setCurrentInputField(inputField) {
|
|
12104
|
+
set({ currentInputField: inputField, isInputRequired: true });
|
|
12105
|
+
},
|
|
12106
|
+
setIsOpen(open) {
|
|
12107
|
+
if (!open) set({ value: "" });
|
|
12108
|
+
set({ isOpen: open ?? !get().isOpen, children: void 0 });
|
|
12109
|
+
if (!get().isOpen) {
|
|
12110
|
+
set({
|
|
12111
|
+
children: void 0,
|
|
12112
|
+
value: "",
|
|
12113
|
+
currentInputField: null,
|
|
12114
|
+
isInputRequired: false,
|
|
12115
|
+
onEnter: void 0
|
|
12116
|
+
});
|
|
12117
|
+
}
|
|
12118
|
+
},
|
|
12119
|
+
setIsOpenDynamic(open) {
|
|
12120
|
+
if (!open) set({ value: "" });
|
|
12121
|
+
set({ isOpenDynamic: open ?? !get().isOpenDynamic });
|
|
12122
|
+
if (!get().isOpenDynamic) {
|
|
12123
|
+
set({
|
|
12124
|
+
children: void 0,
|
|
12125
|
+
value: "",
|
|
12126
|
+
currentInputField: null,
|
|
12127
|
+
isInputRequired: false
|
|
12128
|
+
});
|
|
12129
|
+
}
|
|
12130
|
+
},
|
|
12131
|
+
registerInput: (id, initialValue = "") => set((state) => ({
|
|
12132
|
+
inputs: {
|
|
12133
|
+
...state.inputs,
|
|
12134
|
+
[id]: initialValue
|
|
12135
|
+
}
|
|
12136
|
+
})),
|
|
12137
|
+
unregisterInput: (id) => set((state) => {
|
|
12138
|
+
const newInputs = { ...state.inputs };
|
|
12139
|
+
delete newInputs[id];
|
|
12140
|
+
return { inputs: newInputs };
|
|
12141
|
+
}),
|
|
12142
|
+
focusInput: (id) => set({ activeInput: id }),
|
|
12143
|
+
// write: (char) =>
|
|
12144
|
+
// set((state) => {
|
|
12145
|
+
// const current = state.currentInputField;
|
|
12146
|
+
// if (!current?.field) return state;
|
|
12147
|
+
// const newValue = (current.field.value ?? "") + char;
|
|
12148
|
+
// current.field.onChange(newValue); // 🔥 RHF update
|
|
12149
|
+
// return {
|
|
12150
|
+
// currentInputField: {
|
|
12151
|
+
// ...current,
|
|
12152
|
+
// field: {
|
|
12153
|
+
// ...current.field,
|
|
12154
|
+
// value: newValue
|
|
12155
|
+
// }
|
|
12156
|
+
// }
|
|
12157
|
+
// };
|
|
12158
|
+
// }),
|
|
12159
|
+
write: (char) => set((state) => {
|
|
12160
|
+
if (!state.isInputRequired) {
|
|
12161
|
+
const newValue = get().value + char;
|
|
12162
|
+
set({ value: newValue });
|
|
12163
|
+
state.value = newValue;
|
|
12164
|
+
return state;
|
|
12165
|
+
}
|
|
12166
|
+
let currentInputField = state.currentInputField;
|
|
12167
|
+
if (currentInputField && currentInputField.field) {
|
|
12168
|
+
currentInputField.field.value += char;
|
|
12169
|
+
const newValue = currentInputField.field.value;
|
|
12170
|
+
set({ currentInputField });
|
|
12171
|
+
currentInputField.field.onChange(newValue);
|
|
12172
|
+
}
|
|
12173
|
+
if (!state.activeInput) return state;
|
|
12174
|
+
const current = state.inputs[state.activeInput] || "";
|
|
12175
|
+
return {
|
|
12176
|
+
inputs: {
|
|
12177
|
+
...state.inputs,
|
|
12178
|
+
[state.activeInput]: current + char
|
|
12179
|
+
}
|
|
12180
|
+
};
|
|
12181
|
+
}),
|
|
12182
|
+
backspace: () => set((state) => {
|
|
12183
|
+
if (!state.isInputRequired) {
|
|
12184
|
+
set({ value: state.value.slice(0, -1) });
|
|
12185
|
+
state.value = state.value.slice(0, -1);
|
|
12186
|
+
}
|
|
12187
|
+
let currentInputField = state.currentInputField;
|
|
12188
|
+
if (currentInputField && currentInputField.field) {
|
|
12189
|
+
const newValue = currentInputField.field.value.slice(0, -1);
|
|
12190
|
+
currentInputField.field.value = newValue;
|
|
12191
|
+
set({ currentInputField });
|
|
12192
|
+
currentInputField.field.onChange(newValue);
|
|
12193
|
+
}
|
|
12194
|
+
if (!state.activeInput) return state;
|
|
12195
|
+
const current = state.inputs[state.activeInput] || "";
|
|
12196
|
+
console.log("RUN BACKSPACE - current value:", current);
|
|
12197
|
+
return {
|
|
12198
|
+
inputs: {
|
|
12199
|
+
...state.inputs,
|
|
12200
|
+
[state.activeInput]: current.slice(0, -1)
|
|
12201
|
+
}
|
|
12202
|
+
};
|
|
12203
|
+
}),
|
|
12204
|
+
clear: () => set((state) => {
|
|
12205
|
+
if (!state.isInputRequired) {
|
|
12206
|
+
set({ value: "" });
|
|
12207
|
+
state.value = "";
|
|
12208
|
+
}
|
|
12209
|
+
if (!state.activeInput) return state;
|
|
12210
|
+
return {
|
|
12211
|
+
inputs: {
|
|
12212
|
+
...state.inputs,
|
|
12213
|
+
[state.activeInput]: ""
|
|
12214
|
+
}
|
|
12215
|
+
};
|
|
12216
|
+
}),
|
|
12217
|
+
setValue: (id, value) => set((state) => ({
|
|
12218
|
+
inputs: {
|
|
12219
|
+
...state.inputs,
|
|
12220
|
+
[id]: value
|
|
12221
|
+
}
|
|
12222
|
+
}))
|
|
12223
|
+
}));
|
|
12224
|
+
var CustomSheet = ({ title = "", children, childrenHeader, isOpen, className, side = "bottom" }) => {
|
|
12225
|
+
const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
|
|
12226
|
+
const storeIsOpen = useKeyboardStore((state) => state.isOpen);
|
|
12227
|
+
const controlledIsOpen = typeof isOpen === "boolean" ? isOpen : storeIsOpen;
|
|
12228
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: controlledIsOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsx(SheetContent, { side, className, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { children: [
|
|
12229
|
+
/* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: title }),
|
|
12230
|
+
/* @__PURE__ */ jsxRuntime.jsxs(SheetDescription, { children: [
|
|
12231
|
+
childrenHeader,
|
|
12232
|
+
children
|
|
12233
|
+
] })
|
|
12234
|
+
] }) }) });
|
|
12235
|
+
};
|
|
12236
|
+
var DynamicDialog = ({
|
|
12237
|
+
open,
|
|
12238
|
+
onOpenChange,
|
|
12239
|
+
trigger,
|
|
12240
|
+
title = "Are you absolutely sure?",
|
|
12241
|
+
description = "This action cannot be undone.",
|
|
12242
|
+
cancelText = "Cerrar",
|
|
12243
|
+
actionText = "Procesar",
|
|
12244
|
+
className = "bg-red-600 text-white font-bold",
|
|
12245
|
+
variant = "info",
|
|
12246
|
+
loading = false,
|
|
12247
|
+
autoCloseOnFinish = true,
|
|
12248
|
+
onAction,
|
|
12249
|
+
children,
|
|
12250
|
+
listBtnConfig = [],
|
|
12251
|
+
btnGroupDirection = "flex-end",
|
|
12252
|
+
submitBtnClass = "h-16",
|
|
12253
|
+
iconSize = "w-16 h-16",
|
|
12254
|
+
btnHeightClass = "h-16 text-xl",
|
|
12255
|
+
showActionBtn = true,
|
|
12256
|
+
centerContent = false
|
|
12257
|
+
}) => {
|
|
12258
|
+
const isLoading = variant === "loading" || loading;
|
|
12259
|
+
React3.useEffect(() => {
|
|
12260
|
+
if (!isLoading && open && autoCloseOnFinish) {
|
|
12261
|
+
onOpenChange?.(false);
|
|
12262
|
+
}
|
|
12263
|
+
}, [isLoading]);
|
|
12264
|
+
const getVariantStyles = () => {
|
|
12265
|
+
switch (variant) {
|
|
12266
|
+
case "info":
|
|
12267
|
+
return {
|
|
12268
|
+
container: "!bg-blue-100 !text-blue-800 dark:!bg-blue-900 dark:!text-blue-200",
|
|
12269
|
+
border: "!border-blue-500/30 dark:!border-blue-300/30",
|
|
12270
|
+
media: "bg-blue-500/10 dark:bg-blue-300/10",
|
|
12271
|
+
action: "text-blue-200 bg-blue-500 dark:bg-blue-300",
|
|
12272
|
+
icon: "text-blue-500 dark:text-blue-300",
|
|
12273
|
+
iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleWarning, { className: iconSize })
|
|
12274
|
+
};
|
|
12275
|
+
case "warning":
|
|
12276
|
+
return {
|
|
12277
|
+
container: "!bg-yellow-100 !text-yellow-800 dark:!bg-yellow-900 dark:!text-yellow-200",
|
|
12278
|
+
border: "!border-yellow-500/30 dark:!border-yellow-300/30",
|
|
12279
|
+
media: "bg-yellow-500/10 dark:bg-yellow-300/10",
|
|
12280
|
+
action: "text-yellow-200 bg-yellow-500 dark:bg-yellow-300",
|
|
12281
|
+
icon: "text-yellow-500 dark:text-yellow-300",
|
|
12282
|
+
iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: iconSize })
|
|
12283
|
+
};
|
|
12284
|
+
case "error":
|
|
12285
|
+
case "delete":
|
|
12286
|
+
return {
|
|
12287
|
+
container: "!bg-red-100 !text-red-800 dark:!bg-red-900 dark:!text-red-200",
|
|
12288
|
+
border: "!border-red-500/30 dark:!border-red-300/30",
|
|
12289
|
+
media: "bg-red-500/10 dark:bg-red-300/10",
|
|
12290
|
+
action: "text-red-200 bg-red-500 dark:bg-red-300",
|
|
12291
|
+
icon: "text-red-500 dark:text-red-300",
|
|
12292
|
+
iconNode: variant === "delete" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { className: iconSize }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonX, { className: iconSize })
|
|
12293
|
+
};
|
|
12294
|
+
case "success":
|
|
12295
|
+
return {
|
|
12296
|
+
container: "!bg-green-100 !text-green-800 dark:!bg-green-900 dark:!text-green-200",
|
|
12297
|
+
border: "!border-green-500/30 dark:!border-green-300/30",
|
|
12298
|
+
media: "bg-green-500/10 dark:bg-green-300/10",
|
|
12299
|
+
action: "text-green-200 bg-green-500 dark:bg-green-300",
|
|
12300
|
+
icon: "text-green-500 dark:text-green-300",
|
|
12301
|
+
iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: iconSize })
|
|
12302
|
+
};
|
|
12303
|
+
case "confirm":
|
|
12304
|
+
return {
|
|
12305
|
+
container: "!bg-purple-100 !text-purple-800 dark:!bg-purple-900 dark:!text-purple-200",
|
|
12306
|
+
border: "!border-purple-500/30 dark:!border-purple-300/30",
|
|
12307
|
+
media: "bg-purple-500/10 dark:bg-purple-300/10",
|
|
12308
|
+
action: "text-purple-200 bg-purple-500 dark:bg-purple-300",
|
|
12309
|
+
icon: "text-purple-500 dark:text-purple-300",
|
|
12310
|
+
iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleQuestionMark, { className: iconSize })
|
|
12311
|
+
};
|
|
12312
|
+
case "loading":
|
|
12313
|
+
return {
|
|
12314
|
+
container: "!bg-gray-100 !text-gray-800 dark:!bg-gray-900 dark:!text-gray-200",
|
|
12315
|
+
border: "!border-gray-500/30 dark:!border-gray-300/30",
|
|
12316
|
+
media: "bg-gray-500/10 dark:bg-gray-300/10",
|
|
12317
|
+
action: "text-gray-200 bg-gray-500 dark:bg-gray-300",
|
|
12318
|
+
icon: "text-gray-500 dark:text-gray-300",
|
|
12319
|
+
iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: cn(iconSize, "animate-spin") })
|
|
12320
|
+
};
|
|
12321
|
+
}
|
|
12322
|
+
};
|
|
12323
|
+
const styles = getVariantStyles();
|
|
12324
|
+
const handleActionClick = async () => {
|
|
12325
|
+
if (!onAction) return;
|
|
12326
|
+
const result = onAction();
|
|
12327
|
+
if (result instanceof Promise) {
|
|
12328
|
+
await result;
|
|
12329
|
+
}
|
|
12330
|
+
};
|
|
12331
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog, { open, onOpenChange, children: [
|
|
12332
|
+
trigger && /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTrigger, { asChild: true, children: trigger }),
|
|
12333
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
12334
|
+
AlertDialogContent,
|
|
12335
|
+
{
|
|
12336
|
+
className: cn(
|
|
12337
|
+
"w-full h-fit font-mono border-x-8",
|
|
12338
|
+
styles.container,
|
|
12339
|
+
styles.border
|
|
12340
|
+
),
|
|
12341
|
+
children: [
|
|
12342
|
+
/* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "flex flex-col justify-center w-full text-center", children: [
|
|
12343
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
12344
|
+
AlertDialogMedia,
|
|
12345
|
+
{
|
|
12346
|
+
className: cn(
|
|
12347
|
+
styles.media,
|
|
12348
|
+
"rounded-full flex items-center justify-center",
|
|
12349
|
+
iconSize
|
|
12350
|
+
),
|
|
12351
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.icon, children: styles.iconNode })
|
|
12352
|
+
}
|
|
12353
|
+
) }),
|
|
12354
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { className: "text-2xl text-center w-full", children: title }),
|
|
12355
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { className: cn("text-xl w-full flex-row", centerContent ? "text-center" : "text-left"), children: description })
|
|
12356
|
+
] }),
|
|
12357
|
+
children,
|
|
12358
|
+
!isLoading && /* @__PURE__ */ jsxRuntime.jsx(AlertDialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
12359
|
+
ButtonGroup,
|
|
12360
|
+
{
|
|
12361
|
+
className: "flex w-full",
|
|
12362
|
+
style: {
|
|
12363
|
+
justifyContent: btnGroupDirection,
|
|
12364
|
+
alignItems: "center"
|
|
12365
|
+
},
|
|
12366
|
+
children: [
|
|
12367
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { className: cn("flex-1", btnHeightClass), children: cancelText }),
|
|
12368
|
+
listBtnConfig.map((btn, key) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
12369
|
+
Button,
|
|
12370
|
+
{
|
|
12371
|
+
type: btn.btnType,
|
|
12372
|
+
size: "lg",
|
|
12373
|
+
className: cn(btnHeightClass, submitBtnClass),
|
|
12374
|
+
variant: btn.variant,
|
|
12375
|
+
onClick: btn.onClick,
|
|
12376
|
+
disabled: btn.disabled,
|
|
12377
|
+
children: btn.label
|
|
12378
|
+
},
|
|
12379
|
+
key
|
|
12380
|
+
)),
|
|
12381
|
+
onAction && showActionBtn && /* @__PURE__ */ jsxRuntime.jsx(
|
|
12382
|
+
AlertDialogAction,
|
|
12383
|
+
{
|
|
12384
|
+
onClick: handleActionClick,
|
|
12385
|
+
className: cn(
|
|
12386
|
+
"flex-1",
|
|
12387
|
+
btnHeightClass,
|
|
12388
|
+
className,
|
|
12389
|
+
styles.action
|
|
12390
|
+
),
|
|
12391
|
+
children: actionText
|
|
12392
|
+
}
|
|
12393
|
+
)
|
|
12394
|
+
]
|
|
12395
|
+
}
|
|
12396
|
+
) })
|
|
12397
|
+
]
|
|
12398
|
+
}
|
|
12399
|
+
)
|
|
12400
|
+
] });
|
|
12401
|
+
};
|
|
12402
|
+
var InputList = ({ handleAddInput, inputsTypes }) => {
|
|
12403
|
+
const [inputSetups, setInputSetups] = React3.useState(
|
|
12404
|
+
() => Object.fromEntries(
|
|
12405
|
+
inputsTypes.map((type) => [type, { required: false, disabled: false }])
|
|
12406
|
+
)
|
|
12407
|
+
);
|
|
12408
|
+
const toggleConfig = (type, key) => {
|
|
12409
|
+
setInputSetups((prev) => ({
|
|
12410
|
+
...prev,
|
|
12411
|
+
[type]: { ...prev[type], [key]: !prev[type][key] }
|
|
12412
|
+
}));
|
|
12413
|
+
};
|
|
12414
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-1", children: inputsTypes.map((type) => {
|
|
12415
|
+
const setup = inputSetups[type];
|
|
12416
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
12417
|
+
"div",
|
|
12418
|
+
{
|
|
12419
|
+
className: "border rounded-lg p-2 flex flex-col-2 gap-1 shadow-sm",
|
|
12420
|
+
children: [
|
|
12421
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { size: "icon", onClick: () => handleAddInput(type, setup), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
|
|
12422
|
+
/* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "item-1", children: [
|
|
12423
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row justify-center w-full content-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-xl", children: type }) }) }),
|
|
12424
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
12425
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
12426
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12427
|
+
Switch,
|
|
12428
|
+
{
|
|
12429
|
+
checked: setup.required,
|
|
12430
|
+
onCheckedChange: () => toggleConfig(type, "required")
|
|
12431
|
+
}
|
|
12432
|
+
),
|
|
12433
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Required" })
|
|
12434
|
+
] }),
|
|
12435
|
+
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
12436
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12437
|
+
Switch,
|
|
12438
|
+
{
|
|
12439
|
+
checked: setup.disabled,
|
|
12440
|
+
onCheckedChange: () => toggleConfig(type, "disabled")
|
|
12441
|
+
}
|
|
12442
|
+
),
|
|
12443
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Disabled" })
|
|
12444
|
+
] })
|
|
12445
|
+
] }) })
|
|
12446
|
+
] }) })
|
|
12447
|
+
]
|
|
12448
|
+
},
|
|
12449
|
+
type
|
|
12450
|
+
);
|
|
12451
|
+
}) });
|
|
12452
|
+
};
|
|
12453
|
+
|
|
12454
|
+
// src/components/custom/form/input-errors.ts
|
|
12455
|
+
var validationMessages = {
|
|
12456
|
+
required: "Este campo es obligatorio",
|
|
12457
|
+
email: "El correo electr\xF3nico no es v\xE1lido",
|
|
12458
|
+
invalidFormat: "Formato inv\xE1lido",
|
|
12459
|
+
onlyPositive: "Solo n\xFAmeros positivos",
|
|
12460
|
+
minLength: (length) => `Debe tener al menos ${length} caracteres`,
|
|
12461
|
+
maxLength: (length) => `No puede tener m\xE1s de ${length} caracteres`,
|
|
12462
|
+
passwordMismatch: "Las contrase\xF1as no coinciden",
|
|
12463
|
+
invalidPhone: "El n\xFAmero de tel\xE9fono no es v\xE1lido"
|
|
12464
|
+
};
|
|
12465
|
+
function normalizeBorder(border, defaultWidth = 4) {
|
|
12466
|
+
if (!border) return null;
|
|
12467
|
+
if (typeof border === "string") {
|
|
12468
|
+
return { width: defaultWidth, color: border };
|
|
12469
|
+
}
|
|
12470
|
+
return { width: border.width ?? defaultWidth, color: border.color };
|
|
12471
|
+
}
|
|
12472
|
+
function generateBorderShadows(borders) {
|
|
12473
|
+
if (!borders) return "none";
|
|
12474
|
+
const shadows = [];
|
|
12475
|
+
const allBorder = normalizeBorder(borders.all);
|
|
12476
|
+
const left = normalizeBorder(borders.left) ?? allBorder;
|
|
12477
|
+
const right = normalizeBorder(borders.right) ?? allBorder;
|
|
12478
|
+
const top = normalizeBorder(borders.top) ?? allBorder;
|
|
12479
|
+
const bottom = normalizeBorder(borders.bottom) ?? allBorder;
|
|
12480
|
+
if (left?.color) {
|
|
12481
|
+
shadows.push(`inset ${left.width}px 0 0 0 ${left.color}`);
|
|
12482
|
+
}
|
|
12483
|
+
if (right?.color) {
|
|
12484
|
+
shadows.push(`inset -${right.width}px 0 0 0 ${right.color}`);
|
|
12485
|
+
}
|
|
12486
|
+
if (top?.color) {
|
|
12487
|
+
shadows.push(`inset 0 ${top.width}px 0 0 ${top.color}`);
|
|
12488
|
+
}
|
|
12489
|
+
if (bottom?.color) {
|
|
12490
|
+
shadows.push(`inset 0 -${bottom.width}px 0 0 ${bottom.color}`);
|
|
12491
|
+
}
|
|
12492
|
+
return shadows.length > 0 ? shadows.join(", ") : "none";
|
|
12493
|
+
}
|
|
12494
|
+
var Key = ({
|
|
12495
|
+
label,
|
|
12496
|
+
onClick,
|
|
12497
|
+
onDoubleClick,
|
|
12498
|
+
style,
|
|
12499
|
+
disabled = false,
|
|
12500
|
+
className,
|
|
12501
|
+
shortcut,
|
|
12502
|
+
children,
|
|
12503
|
+
withLabel = true,
|
|
12504
|
+
isActive = false,
|
|
12505
|
+
fontSize = "text-sm",
|
|
12506
|
+
icons,
|
|
12507
|
+
borders,
|
|
12508
|
+
// iconSize = 72,
|
|
12509
|
+
iconClassName = "w-8 h-8"
|
|
12510
|
+
}) => {
|
|
12511
|
+
let content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
12512
|
+
withLabel && label,
|
|
12513
|
+
shortcut && ` (${shortcut})`
|
|
12514
|
+
] });
|
|
12515
|
+
if (children) content = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
|
|
12516
|
+
const borderShadow = generateBorderShadows(borders);
|
|
12517
|
+
const hasBorders = borders && borderShadow !== "none";
|
|
12518
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12519
|
+
Button,
|
|
12520
|
+
{
|
|
12521
|
+
disabled,
|
|
12522
|
+
onDoubleClick,
|
|
12523
|
+
onClick: (e) => onClick?.(label ?? e.currentTarget.textContent ?? ""),
|
|
12524
|
+
style: {
|
|
12525
|
+
...style,
|
|
12526
|
+
...hasBorders && { boxShadow: borderShadow }
|
|
12527
|
+
},
|
|
12528
|
+
className: cn(
|
|
12529
|
+
// Base
|
|
12530
|
+
"shadow-md shadow-black/20",
|
|
12531
|
+
"flex flex-1 items-center justify-center rounded-lg h-full w-full",
|
|
12532
|
+
"font-mono font-bold transition-all duration-100",
|
|
12533
|
+
"active:scale-95",
|
|
12534
|
+
fontSize,
|
|
12535
|
+
// Estados base (soft UI)
|
|
12536
|
+
"border border-(--color-border)",
|
|
12537
|
+
"bg-(--color-secondary-soft) text-(--color-foreground)",
|
|
12538
|
+
// Hover
|
|
12539
|
+
"hover:bg-(--color-accent-soft)",
|
|
12540
|
+
// Active click (presionado)
|
|
12541
|
+
"active:bg-(--color-primary) active:text-(--color-primary-foreground)",
|
|
12542
|
+
// Estado activo (seleccionado)
|
|
12543
|
+
isActive && "bg-(--color-primary) text-(--color-primary-foreground) border-(--color-primary)",
|
|
12544
|
+
// Backspace especial
|
|
12545
|
+
// label === '⌫' &&
|
|
12546
|
+
// 'bg-(--color-destructive) text-white hover:opacity-90',
|
|
12547
|
+
// Overflow hidden para que los bordes respeten el border-radius
|
|
12548
|
+
"overflow-hidden",
|
|
12549
|
+
className
|
|
12550
|
+
),
|
|
12551
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center", children: [
|
|
12552
|
+
icons && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row justify-center text-3xl", children: icons.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
12553
|
+
IconComponent,
|
|
12554
|
+
{
|
|
12555
|
+
className: iconClassName
|
|
12556
|
+
},
|
|
12557
|
+
index
|
|
12558
|
+
)) }),
|
|
12559
|
+
content
|
|
12560
|
+
] })
|
|
12561
|
+
}
|
|
12562
|
+
);
|
|
12563
|
+
};
|
|
12564
|
+
var applyCase = (label, upper) => {
|
|
12565
|
+
if (!label || label.length !== 1 || !/[a-z]/.test(label)) return label;
|
|
12566
|
+
return upper ? label.toUpperCase() : label;
|
|
12567
|
+
};
|
|
12568
|
+
var letter = (l, isUpper, handleKey) => ({
|
|
12569
|
+
label: applyCase(l, isUpper),
|
|
12570
|
+
onClick: handleKey,
|
|
12571
|
+
className: "flex-1"
|
|
12572
|
+
});
|
|
12573
|
+
|
|
12574
|
+
// src/components/custom/keyboard/keyboard-base.tsx
|
|
12575
|
+
var BaseKeyboard = class {
|
|
12576
|
+
constructor(input, children, className, keyFontSize) {
|
|
12577
|
+
this.input = input;
|
|
12578
|
+
this.children = children;
|
|
12579
|
+
this.className = className;
|
|
12580
|
+
this.keyFontSize = keyFontSize;
|
|
12581
|
+
}
|
|
12582
|
+
};
|
|
12583
|
+
var KeyboardBuilder = ({
|
|
12584
|
+
keys,
|
|
12585
|
+
withCard = false,
|
|
12586
|
+
className,
|
|
12587
|
+
keyFontSize
|
|
12588
|
+
}) => {
|
|
12589
|
+
const keyMap = React3.useMemo(() => {
|
|
12590
|
+
const map = /* @__PURE__ */ new Map();
|
|
12591
|
+
keys?.forEach((row) => {
|
|
12592
|
+
row.forEach((k) => {
|
|
12593
|
+
if (k.shortcut) {
|
|
12594
|
+
map.set(k.shortcut.toLowerCase(), k);
|
|
12595
|
+
}
|
|
12596
|
+
});
|
|
12597
|
+
});
|
|
12598
|
+
return map;
|
|
12599
|
+
}, [keys]);
|
|
12600
|
+
const triggerKey = React3.useCallback((pressedKey) => {
|
|
12601
|
+
const key = keyMap.get(pressedKey.toLowerCase());
|
|
12602
|
+
if (key && !key.disabled) {
|
|
12603
|
+
key.onClick?.(pressedKey);
|
|
12604
|
+
const keyboardEvent = new KeyboardEvent("keydown", {
|
|
12605
|
+
key: pressedKey,
|
|
12606
|
+
bubbles: true
|
|
12607
|
+
});
|
|
12608
|
+
window.dispatchEvent(keyboardEvent);
|
|
12609
|
+
}
|
|
12610
|
+
}, [keyMap]);
|
|
12611
|
+
React3.useEffect(() => {
|
|
12612
|
+
const handleKeyDown = (event) => {
|
|
12613
|
+
const active = document.activeElement;
|
|
12614
|
+
if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active && active.getAttribute("contenteditable") === "true") {
|
|
12615
|
+
console.log("\u{1F680} ~ Ignorando tecla porque el foco est\xE1 en un input:", event.key);
|
|
12616
|
+
return;
|
|
12617
|
+
}
|
|
12618
|
+
triggerKey(event.key);
|
|
12619
|
+
event.preventDefault();
|
|
12620
|
+
};
|
|
12621
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
12622
|
+
return () => {
|
|
12623
|
+
window.removeEventListener("keydown", handleKeyDown);
|
|
12624
|
+
};
|
|
12625
|
+
}, [triggerKey]);
|
|
12626
|
+
const content = /* @__PURE__ */ jsxRuntime.jsx(
|
|
12627
|
+
"div",
|
|
12628
|
+
{
|
|
12629
|
+
className: cn(
|
|
12630
|
+
`flex-1 grid grid-rows-${keys?.length} py-0.5 h-full`,
|
|
12631
|
+
className
|
|
12632
|
+
),
|
|
12633
|
+
children: keys?.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row py-0.5 gap-1 h-full", children: row.map((key, indx) => {
|
|
12634
|
+
const handleClick = () => {
|
|
12635
|
+
triggerKey(key.label ?? "");
|
|
12636
|
+
key.onClick?.(key.label ?? "");
|
|
12637
|
+
if (!key.shortcut) return;
|
|
12638
|
+
triggerKey(key.shortcut);
|
|
12639
|
+
};
|
|
12640
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
12641
|
+
key.label == "" && !key.icons?.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${key.className}` }, indx),
|
|
12642
|
+
(key.label != "" || key.icons?.length) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
12643
|
+
Key,
|
|
12644
|
+
{
|
|
12645
|
+
borders: {
|
|
12646
|
+
left: key.disabled ? "grey" : "",
|
|
12647
|
+
bottom: key.disabled ? "grey" : ""
|
|
12648
|
+
},
|
|
12649
|
+
label: key.label,
|
|
12650
|
+
onClick: handleClick,
|
|
12651
|
+
shortcut: key.shortcut,
|
|
12652
|
+
icons: key.icons,
|
|
12653
|
+
className: `${key.className} ${key.disabled ? "bg-muted-foreground h-full" : "h-full"}`,
|
|
12654
|
+
iconClassName: key.iconClassName,
|
|
12655
|
+
iconSize: key.iconSize,
|
|
12656
|
+
fontSize: keyFontSize,
|
|
12657
|
+
isActive: key.isActive,
|
|
12658
|
+
disabled: key.disabled,
|
|
12659
|
+
style: key.style,
|
|
12660
|
+
children: key.children
|
|
12661
|
+
},
|
|
12662
|
+
indx
|
|
12663
|
+
)
|
|
12664
|
+
] });
|
|
12665
|
+
}) }, ri))
|
|
12666
|
+
}
|
|
12667
|
+
);
|
|
12668
|
+
if (!withCard) return content;
|
|
12669
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full h-full m-0.5 p-1", className), children: content });
|
|
12670
|
+
};
|
|
12671
|
+
|
|
12672
|
+
// src/components/custom/form/inputs/base/definitions.ts
|
|
12673
|
+
var flattenFields = (fields, onAnyFieldChange) => {
|
|
12674
|
+
const result = [];
|
|
12675
|
+
for (const field of fields) {
|
|
12676
|
+
if (Array.isArray(field)) {
|
|
12677
|
+
result.push(...flattenFields(field));
|
|
12678
|
+
} else if (field.fields) {
|
|
12679
|
+
result.push(...flattenFields(field.fields));
|
|
12680
|
+
} else {
|
|
12681
|
+
if (onAnyFieldChange) field.onAnyFieldChange = (data) => onAnyFieldChange(data);
|
|
12682
|
+
result.push(field);
|
|
12683
|
+
}
|
|
12684
|
+
}
|
|
12685
|
+
return result;
|
|
12686
|
+
};
|
|
12687
|
+
var TextInputType = /* @__PURE__ */ ((TextInputType3) => {
|
|
12688
|
+
TextInputType3["DEFAULT"] = "default";
|
|
12689
|
+
TextInputType3["NUMBER"] = "number";
|
|
12690
|
+
TextInputType3["EMAIL"] = "email";
|
|
12691
|
+
TextInputType3["PHONE"] = "phone";
|
|
12692
|
+
TextInputType3["PASSWORD"] = "password";
|
|
12693
|
+
return TextInputType3;
|
|
12694
|
+
})(TextInputType || {});
|
|
12695
|
+
var QwertyKeyboard = class extends BaseKeyboard {
|
|
12696
|
+
render() {
|
|
12697
|
+
const { input, children, className, keyFontSize } = this;
|
|
12698
|
+
return /* @__PURE__ */ jsxRuntime.jsx(KeyboardQwerty, { children, input, className, keyFontSize });
|
|
12699
|
+
}
|
|
12700
|
+
};
|
|
12701
|
+
var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize = "text-2xl", onDelete, input, children, className }) => {
|
|
12702
|
+
const [shiftMode, setShiftMode] = React3.useState("off");
|
|
12703
|
+
const [mode, setMode] = React3.useState("letters");
|
|
12704
|
+
const lastShiftPress = React3.useRef(0);
|
|
12705
|
+
const { currentInputField, write, setIsOpen, backspace, isInputRequired } = useKeyboardStore();
|
|
12706
|
+
const storeonEnter = useKeyboardStore((state) => state.onEnter);
|
|
12707
|
+
const isUpper = shiftMode !== "off";
|
|
12708
|
+
React3.useEffect(() => {
|
|
12709
|
+
const handleKeyDown = (e) => {
|
|
12710
|
+
if (isInputRequired && !currentInputField) return;
|
|
12711
|
+
const key = e.key;
|
|
12712
|
+
if (key === "Enter") {
|
|
12713
|
+
e.preventDefault();
|
|
12714
|
+
onEnter?.();
|
|
12715
|
+
storeonEnter?.();
|
|
12716
|
+
return;
|
|
12717
|
+
}
|
|
12718
|
+
if (key === "Backspace") {
|
|
12719
|
+
backspace();
|
|
12720
|
+
e.preventDefault();
|
|
12721
|
+
onDelete?.();
|
|
12722
|
+
return;
|
|
12723
|
+
}
|
|
12724
|
+
if (key === " ") {
|
|
12725
|
+
e.preventDefault();
|
|
12726
|
+
handleKey(" ");
|
|
12727
|
+
return;
|
|
12728
|
+
}
|
|
12729
|
+
if (key === "Shift") {
|
|
12730
|
+
handleShift();
|
|
12731
|
+
return;
|
|
12732
|
+
}
|
|
12733
|
+
if (key === "CapsLock") {
|
|
12734
|
+
handleCaps();
|
|
12735
|
+
return;
|
|
12736
|
+
}
|
|
12737
|
+
if (key === "Tab") {
|
|
12738
|
+
e.preventDefault();
|
|
12739
|
+
return;
|
|
12740
|
+
}
|
|
12741
|
+
if (key === "Escape") {
|
|
12742
|
+
setIsOpen(false);
|
|
12743
|
+
return;
|
|
12744
|
+
}
|
|
12745
|
+
if (key.length === 1) {
|
|
12746
|
+
handleKey(key);
|
|
12747
|
+
}
|
|
12748
|
+
};
|
|
12749
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
12750
|
+
return () => {
|
|
12751
|
+
window.removeEventListener("keydown", handleKeyDown);
|
|
12752
|
+
};
|
|
12753
|
+
}, [currentInputField, shiftMode]);
|
|
12754
|
+
const handleShift = () => {
|
|
12755
|
+
const now = Date.now();
|
|
12756
|
+
if (now - lastShiftPress.current < 300) {
|
|
12757
|
+
setShiftMode((prev) => prev === "caps" ? "off" : "caps");
|
|
12758
|
+
} else {
|
|
12759
|
+
setShiftMode((prev) => prev === "once" ? "off" : "once");
|
|
12760
|
+
}
|
|
12761
|
+
lastShiftPress.current = now;
|
|
12762
|
+
};
|
|
12763
|
+
const handleKey = (key) => {
|
|
12764
|
+
const output = isUpper ? key.toUpperCase() : key;
|
|
12765
|
+
onKeyPress?.(output);
|
|
12766
|
+
write(output);
|
|
12767
|
+
if (shiftMode === "once") setShiftMode("off");
|
|
12768
|
+
};
|
|
12769
|
+
const handleCaps = () => {
|
|
12770
|
+
setShiftMode((prev) => prev === "caps" ? "off" : "caps");
|
|
12771
|
+
};
|
|
12772
|
+
const shiftLabel = shiftMode === "caps" ? lucideReact.ArrowBigUpDash : lucideReact.ArrowBigUp;
|
|
12773
|
+
const shiftActive = shiftMode !== "off";
|
|
12774
|
+
const textField = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
12775
|
+
children && children,
|
|
12776
|
+
!children && currentInputField && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 h-full min-h-16 flex-1 flex flex-row text-2xl font-bold justify-center text-center items-center gap-2 rounded-xl border-2 transition-all outline-none border-amber-400 bg-amber-50 ", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentInputField.input && currentInputField.input.keyboardType == "password" /* PASSWORD */ ? "\u2022".repeat(currentInputField.field?.value.toString().length) : currentInputField.field?.value || "" }) })
|
|
12777
|
+
] });
|
|
12778
|
+
const btnDelete = { label: "delete", icons: [lucideReact.DeleteIcon], onClick: () => {
|
|
12779
|
+
backspace();
|
|
12780
|
+
}, className: "bg-red-200 text-xs", style: { backgroundColor: "#faba005e" } };
|
|
12781
|
+
const btnEsc = { label: "esc", onClick: () => {
|
|
12782
|
+
setIsOpen(false);
|
|
12783
|
+
}, className: "", style: { backgroundColor: "#ffc0c0" } };
|
|
12784
|
+
const btnEnter = { label: "Enter", onClick: onEnter, className: "flex-[2] bg-green-200", style: { backgroundColor: "#008f003d" } };
|
|
12785
|
+
if (mode === "symbols") {
|
|
12786
|
+
const keys = [
|
|
12787
|
+
["esc", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
|
|
12788
|
+
["~", "`", "|", "\\", "/", "{", "}", "[", "]"],
|
|
12789
|
+
["+", "=", "<", ">", "?", "'", '"', ":", ";"]
|
|
12790
|
+
].map(
|
|
12791
|
+
(row, index) => row.map(
|
|
12792
|
+
(k, idx) => {
|
|
12793
|
+
const isEsc = k == "esc";
|
|
12794
|
+
if (index == 0 && idx == row.length - 1) return btnDelete;
|
|
12795
|
+
if (isEsc) return btnEsc;
|
|
12796
|
+
return {
|
|
12797
|
+
label: k,
|
|
12798
|
+
onClick: () => isEsc ? setIsOpen(false) : handleKey(k),
|
|
12799
|
+
className: isEsc ? "bg-red-600" : ""
|
|
12800
|
+
};
|
|
12801
|
+
}
|
|
12802
|
+
)
|
|
12803
|
+
);
|
|
12804
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full h-full flex flex-col", className), children: [
|
|
12805
|
+
textField,
|
|
12806
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12807
|
+
KeyboardBuilder,
|
|
12808
|
+
{
|
|
12809
|
+
className: "w-full h-full",
|
|
12810
|
+
keyFontSize,
|
|
12811
|
+
keys: [
|
|
12812
|
+
...keys,
|
|
12813
|
+
[
|
|
12814
|
+
{ label: "ABC", onClick: () => setMode("letters"), className: "flex-[2]" },
|
|
12815
|
+
{ label: " ", onClick: () => handleKey(" "), className: "flex-[4]" },
|
|
12816
|
+
btnEnter
|
|
12817
|
+
]
|
|
12818
|
+
]
|
|
12819
|
+
}
|
|
12820
|
+
)
|
|
12821
|
+
] });
|
|
12822
|
+
}
|
|
12823
|
+
const fila1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"].map((l) => letter(l, isUpper, handleKey));
|
|
12824
|
+
const fila2 = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"].map((l) => letter(l, isUpper, handleKey));
|
|
12825
|
+
const fila3 = ["a", "s", "d", "f", "g", "h", "j", "k", "l"].map((l) => letter(l, isUpper, handleKey));
|
|
12826
|
+
const fila4 = ["z", "x", "c", "v", "b", "n", "m"].map((l) => letter(l, isUpper, handleKey));
|
|
12827
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col", children: [
|
|
12828
|
+
textField,
|
|
12829
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12830
|
+
KeyboardBuilder,
|
|
12831
|
+
{
|
|
12832
|
+
className: "w-full h-full flex-3",
|
|
12833
|
+
keyFontSize,
|
|
12834
|
+
keys: [
|
|
12835
|
+
[
|
|
12836
|
+
btnEsc,
|
|
12837
|
+
...fila1,
|
|
12838
|
+
btnDelete
|
|
12839
|
+
],
|
|
12840
|
+
[
|
|
12841
|
+
{ label: "tab", onClick: () => {
|
|
12842
|
+
} },
|
|
12843
|
+
...fila2
|
|
12844
|
+
// { icons:[Delete], onClick: backspace, className: 'text-xs' },
|
|
12845
|
+
],
|
|
12846
|
+
[
|
|
12847
|
+
{ label: "caps", onClick: handleCaps },
|
|
12848
|
+
...fila3
|
|
12849
|
+
],
|
|
12850
|
+
[
|
|
12851
|
+
{
|
|
12852
|
+
label: "",
|
|
12853
|
+
icons: [shiftLabel],
|
|
12854
|
+
onClick: handleShift,
|
|
12855
|
+
className: "flex-1",
|
|
12856
|
+
isActive: shiftActive
|
|
12857
|
+
},
|
|
12858
|
+
...fila4,
|
|
12859
|
+
{ label: ".", onClick: () => handleKey(".") },
|
|
12860
|
+
{ label: "-", onClick: () => handleKey("-") },
|
|
12861
|
+
{ label: "_", onClick: () => handleKey("_") }
|
|
12862
|
+
],
|
|
12863
|
+
[
|
|
12864
|
+
{ label: "?123", onClick: () => setMode("symbols"), className: "flex-[2]" },
|
|
12865
|
+
{ label: " ", onClick: () => handleKey(" "), className: "flex-[4]" },
|
|
12866
|
+
btnEnter
|
|
12867
|
+
]
|
|
12868
|
+
]
|
|
12869
|
+
}
|
|
12870
|
+
)
|
|
12871
|
+
] });
|
|
12872
|
+
};
|
|
12873
|
+
var keyboardMap = {
|
|
12874
|
+
["qwerty" /* QWERTY */]: QwertyKeyboard,
|
|
12875
|
+
["qwerty_not_chars" /* QWERTY_NOT_CHARS */]: QwertyKeyboard,
|
|
12876
|
+
["number" /* NUMBER */]: QwertyKeyboard
|
|
12877
|
+
};
|
|
12878
|
+
var KeyboardFactory = class {
|
|
12879
|
+
static create(typeKeyboard, input, children, className, keyFontSize) {
|
|
12880
|
+
const inputKbType = input?.keyboardType;
|
|
12881
|
+
let keyboardType = typeKeyboard ?? "qwerty" /* QWERTY */;
|
|
12882
|
+
if (inputKbType) {
|
|
12883
|
+
if (inputKbType == "number" /* NUMBER */) keyboardType = "number" /* NUMBER */;
|
|
12884
|
+
}
|
|
12885
|
+
const keyboardClass = keyboardMap[keyboardType] ?? QwertyKeyboard;
|
|
12886
|
+
const instance = new keyboardClass(input, children, className, keyFontSize);
|
|
12887
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: instance.render() });
|
|
12888
|
+
}
|
|
12889
|
+
};
|
|
12890
|
+
|
|
12891
|
+
// src/components/custom/form/inputs/base/base-input.ts
|
|
12892
|
+
var BaseInput = class {
|
|
12893
|
+
constructor(input, form, isSubmitting) {
|
|
12894
|
+
this.input = input;
|
|
12895
|
+
this.form = form;
|
|
12896
|
+
this.isSubmitting = isSubmitting;
|
|
12897
|
+
}
|
|
12898
|
+
};
|
|
12899
|
+
var entityToInputOption = (entitiy, name = "name", description = "description", groupedLabel, optionLabel = "label") => ({
|
|
12900
|
+
id: entitiy["id"],
|
|
12901
|
+
name: entitiy[name],
|
|
12902
|
+
label: entitiy[optionLabel],
|
|
12903
|
+
description: entitiy[description],
|
|
12904
|
+
groupedLabel
|
|
12905
|
+
});
|
|
12906
|
+
var entitiesToInputOption = (data, optionValue = "name", groupedLabel, optionLabel = "description") => {
|
|
12907
|
+
const entities = [];
|
|
12908
|
+
for (const key of data) {
|
|
12909
|
+
const entidad = entityToInputOption(key, optionValue, optionLabel, groupedLabel);
|
|
12910
|
+
if (entidad) entities.push(entidad);
|
|
12911
|
+
}
|
|
12912
|
+
return entities;
|
|
12913
|
+
};
|
|
12914
|
+
var entityToGroupedOption = (entitiy, name = "name") => ({
|
|
12915
|
+
id: entitiy["id"],
|
|
12916
|
+
label: entitiy[name] || entitiy["label"],
|
|
12917
|
+
options: entitiy["options"] || [],
|
|
12918
|
+
selectedOptions: []
|
|
12919
|
+
});
|
|
12920
|
+
var entitiesToGroupedOption = (data, optionValue = "name") => {
|
|
12921
|
+
const entities = [];
|
|
12922
|
+
for (const key of data) {
|
|
12923
|
+
const entidad = entityToGroupedOption(key, optionValue);
|
|
12924
|
+
if (entidad) entities.push(entidad);
|
|
12925
|
+
}
|
|
12926
|
+
return entities;
|
|
12927
|
+
};
|
|
12928
|
+
var handleOnChage = (event, input, field) => {
|
|
12929
|
+
let value = event;
|
|
12930
|
+
if (event && typeof event === "object" && "target" in event) {
|
|
12931
|
+
value = event.target.value;
|
|
12932
|
+
}
|
|
12933
|
+
field?.onChange(value);
|
|
12934
|
+
const data = input.form?.getValues();
|
|
12935
|
+
input.onChange?.(value, data);
|
|
12936
|
+
input.onAnyFieldChange?.(data);
|
|
12937
|
+
};
|
|
12938
|
+
var isValidField = (input, form, defaultValue) => {
|
|
12939
|
+
const value = defaultValue ?? form.getValues(input.name);
|
|
12940
|
+
const fieldState = form.getFieldState(input.name);
|
|
12941
|
+
if (input.zodType) {
|
|
12942
|
+
const result = input.zodType.safeParse(value);
|
|
12943
|
+
return result.success;
|
|
12944
|
+
}
|
|
12945
|
+
return !fieldState.error && value !== void 0 && value !== "";
|
|
12946
|
+
};
|
|
12947
|
+
|
|
12948
|
+
// src/components/custom/form/inputs/base/input-types.ts
|
|
12949
|
+
var InputTypes = /* @__PURE__ */ ((InputTypes3) => {
|
|
12950
|
+
InputTypes3["HIDDEN"] = "hidden";
|
|
12951
|
+
InputTypes3["TEXT"] = "text";
|
|
12952
|
+
InputTypes3["TEXT_GROUP"] = "text_group";
|
|
12953
|
+
InputTypes3["NUMBER"] = "number";
|
|
12954
|
+
InputTypes3["SWITCH"] = "switch";
|
|
12955
|
+
InputTypes3["CHECKBOX"] = "checkbox";
|
|
12956
|
+
InputTypes3["SELECT"] = "select";
|
|
12957
|
+
InputTypes3["SIMPLE_CHECK_LIST"] = "siple_checklist";
|
|
12958
|
+
InputTypes3["CHECK_LIST"] = "checklist";
|
|
12959
|
+
InputTypes3["GROUPED_SWITCH_LIST"] = "grouped_switchlist";
|
|
12960
|
+
InputTypes3["ACCORDION_GROUPED_SWITCH_LIST"] = "accordion_grouped_switchlist";
|
|
12961
|
+
InputTypes3["DATE"] = "date";
|
|
12962
|
+
InputTypes3["TEXTAREA"] = "textarea";
|
|
12963
|
+
InputTypes3["FILE"] = "file";
|
|
12964
|
+
InputTypes3["OTP"] = "otp";
|
|
12965
|
+
InputTypes3["FORM"] = "form";
|
|
12966
|
+
InputTypes3["COLOR"] = "color";
|
|
12967
|
+
InputTypes3["RADIO_GROUP"] = "radio_group";
|
|
12968
|
+
InputTypes3["TAGS"] = "tags";
|
|
12969
|
+
InputTypes3["DATE_TIME"] = "date_time";
|
|
12970
|
+
InputTypes3["TIME"] = "time";
|
|
12971
|
+
InputTypes3["FILE_MULTI_UPLOAD"] = "file_multi_upload";
|
|
12972
|
+
InputTypes3["SLIDER"] = "slider";
|
|
12973
|
+
InputTypes3["BUTTON_GROUP"] = "button_group";
|
|
12974
|
+
InputTypes3["CURRENCY"] = "currency";
|
|
12975
|
+
InputTypes3["KEY_VALUE"] = "key_value";
|
|
12976
|
+
InputTypes3["REPEATER"] = "repeater";
|
|
12977
|
+
InputTypes3["MULTI_SELECT"] = "multi_select";
|
|
12978
|
+
InputTypes3["COMBOBOX"] = "COMBO_BOX";
|
|
12979
|
+
InputTypes3["SORTABLE_LIST"] = "sortable_list";
|
|
12980
|
+
InputTypes3["REPEATER_TABS"] = "repeater_tabs";
|
|
12981
|
+
InputTypes3["STRING_LIST"] = "string_list";
|
|
12982
|
+
InputTypes3["RATING"] = "rating";
|
|
12983
|
+
InputTypes3["PHONE"] = "phone";
|
|
12984
|
+
InputTypes3["URL"] = "url";
|
|
12985
|
+
InputTypes3["PASSWORD"] = "password";
|
|
12986
|
+
InputTypes3["AUTOCOMPLETE"] = "autocomplete";
|
|
12987
|
+
InputTypes3["EMAIL"] = "email";
|
|
12988
|
+
InputTypes3["SEARCH"] = "search";
|
|
12989
|
+
InputTypes3["LOCATION_PICKER"] = "location_picker";
|
|
12990
|
+
InputTypes3["DATE_RANGE"] = "date_range";
|
|
12991
|
+
InputTypes3["COUNTRY_SELECT"] = "country_select";
|
|
12992
|
+
InputTypes3["RANGE"] = "range";
|
|
12993
|
+
InputTypes3["FILE_UPLOAD"] = "file_upload";
|
|
12994
|
+
return InputTypes3;
|
|
12995
|
+
})(InputTypes || {});
|
|
12996
|
+
var inputFieldComp = [
|
|
12997
|
+
"string_list" /* STRING_LIST */,
|
|
12998
|
+
"repeater_tabs" /* REPEATER_TABS */,
|
|
12999
|
+
"sortable_list" /* SORTABLE_LIST */,
|
|
13000
|
+
"COMBO_BOX" /* COMBOBOX */,
|
|
13001
|
+
"multi_select" /* MULTI_SELECT */,
|
|
13002
|
+
"repeater" /* REPEATER */,
|
|
13003
|
+
"key_value" /* KEY_VALUE */,
|
|
13004
|
+
"currency" /* CURRENCY */,
|
|
13005
|
+
"button_group" /* BUTTON_GROUP */,
|
|
13006
|
+
"slider" /* SLIDER */,
|
|
13007
|
+
"file_multi_upload" /* FILE_MULTI_UPLOAD */,
|
|
13008
|
+
"time" /* TIME */,
|
|
13009
|
+
"date_time" /* DATE_TIME */,
|
|
13010
|
+
"tags" /* TAGS */,
|
|
13011
|
+
"radio_group" /* RADIO_GROUP */,
|
|
13012
|
+
"text_group" /* TEXT_GROUP */,
|
|
13013
|
+
"accordion_grouped_switchlist" /* ACCORDION_GROUPED_SWITCH_LIST */,
|
|
13014
|
+
"grouped_switchlist" /* GROUPED_SWITCH_LIST */,
|
|
13015
|
+
"text" /* TEXT */,
|
|
13016
|
+
"switch" /* SWITCH */,
|
|
13017
|
+
"siple_checklist" /* SIMPLE_CHECK_LIST */,
|
|
13018
|
+
"checkbox" /* CHECKBOX */,
|
|
13019
|
+
"color" /* COLOR */,
|
|
13020
|
+
"otp" /* OTP */,
|
|
13021
|
+
"select" /* SELECT */,
|
|
13022
|
+
"date" /* DATE */,
|
|
13023
|
+
"file" /* FILE */,
|
|
13024
|
+
"form" /* FORM */,
|
|
13025
|
+
"number" /* NUMBER */,
|
|
13026
|
+
"textarea" /* TEXTAREA */,
|
|
13027
|
+
// InputTypes.SWITCH_LIST,
|
|
13028
|
+
"hidden" /* HIDDEN */,
|
|
13029
|
+
// ✨ New input types (v1.35.0)
|
|
13030
|
+
"rating" /* RATING */,
|
|
13031
|
+
"phone" /* PHONE */,
|
|
13032
|
+
"url" /* URL */,
|
|
13033
|
+
"password" /* PASSWORD */,
|
|
13034
|
+
"autocomplete" /* AUTOCOMPLETE */,
|
|
13035
|
+
// ✨ New input types (v1.36.0)
|
|
13036
|
+
"email" /* EMAIL */,
|
|
13037
|
+
"search" /* SEARCH */,
|
|
13038
|
+
"location_picker" /* LOCATION_PICKER */,
|
|
13039
|
+
"date_range" /* DATE_RANGE */,
|
|
13040
|
+
"country_select" /* COUNTRY_SELECT */,
|
|
13041
|
+
"range" /* RANGE */,
|
|
13042
|
+
// ✨ New input types (v1.37.0)
|
|
13043
|
+
"file_upload" /* FILE_UPLOAD */
|
|
13044
|
+
];
|
|
12797
13045
|
var GroupedSwitchInput = class extends BaseInput {
|
|
12798
13046
|
render() {
|
|
12799
13047
|
const { input, isSubmitting } = this;
|
|
@@ -13757,13 +14005,18 @@ var FakeInput = ({ input, field, form, isValid, isSubmitting, isPasswordField, s
|
|
|
13757
14005
|
onBlur: handleBlur,
|
|
13758
14006
|
onClick: () => ref.current?.focus(),
|
|
13759
14007
|
className: `
|
|
13760
|
-
p-
|
|
14008
|
+
p-1 min-h-8 w-full flex justify-items-center justify-between flex-row
|
|
13761
14009
|
text-2xl font-bold rounded-xl border-2
|
|
13762
14010
|
outline-none transition-all
|
|
13763
|
-
${isFocused ? "border-
|
|
14011
|
+
${isFocused ? "border-amber-400 bg-amber-50" : "border-blue-200 bg-blue-50"}
|
|
13764
14012
|
`,
|
|
13765
14013
|
children: [
|
|
13766
|
-
/* @__PURE__ */ jsxRuntime.
|
|
14014
|
+
value.toString().length == 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1 text-left self-center text-gray-400", children: [
|
|
14015
|
+
" ",
|
|
14016
|
+
input.placeHolder ?? input.label,
|
|
14017
|
+
" "
|
|
14018
|
+
] }),
|
|
14019
|
+
value.toString().length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left self-center ", children: input && (isPasswordField && !showPassword) ? "\u2022".repeat(value.toString().length) : value || "" }),
|
|
13767
14020
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 self-center", children: [
|
|
13768
14021
|
isPasswordField && /* @__PURE__ */ jsxRuntime.jsx(
|
|
13769
14022
|
Button,
|
|
@@ -15802,7 +16055,7 @@ var SearchInputClass = class extends BaseInput {
|
|
|
15802
16055
|
}
|
|
15803
16056
|
};
|
|
15804
16057
|
var FieldSearch = ({ input, form, isSubmitting }) => {
|
|
15805
|
-
const debounceRef = React3.useRef();
|
|
16058
|
+
const debounceRef = React3.useRef(void 0);
|
|
15806
16059
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
15807
16060
|
FormField,
|
|
15808
16061
|
{
|
|
@@ -16921,153 +17174,7 @@ var FormFieldsGrid = ({
|
|
|
16921
17174
|
);
|
|
16922
17175
|
}) });
|
|
16923
17176
|
};
|
|
16924
|
-
var
|
|
16925
|
-
trigger,
|
|
16926
|
-
title = "Are you absolutely sure?",
|
|
16927
|
-
description = "This action cannot be undone.",
|
|
16928
|
-
cancelText = "Cancel",
|
|
16929
|
-
actionText = "Confirmar",
|
|
16930
|
-
className = "bg-red-600 text-white font-bold",
|
|
16931
|
-
variant = "info",
|
|
16932
|
-
onAction,
|
|
16933
|
-
children,
|
|
16934
|
-
listBtnConfig = [],
|
|
16935
|
-
btnGroupDirection = "flex-end",
|
|
16936
|
-
submitBtnClass = "h-16",
|
|
16937
|
-
iconSize = "w-16 h-16",
|
|
16938
|
-
btnHeightClass = "h-16",
|
|
16939
|
-
showActionBtn = true
|
|
16940
|
-
}) => {
|
|
16941
|
-
const getVariantStyles = () => {
|
|
16942
|
-
switch (variant) {
|
|
16943
|
-
case "info":
|
|
16944
|
-
return {
|
|
16945
|
-
container: "!bg-blue-100 !text-blue-800 dark:!bg-blue-900 dark:!text-blue-200",
|
|
16946
|
-
border: "!border-blue-500/30 dark:!border-blue-300/30",
|
|
16947
|
-
media: "bg-blue-500/10 dark:bg-blue-300/10",
|
|
16948
|
-
action: "text-blue-200 bg-blue-500 dark:bg-blue-300",
|
|
16949
|
-
icon: "text-blue-500 dark:text-blue-300",
|
|
16950
|
-
iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleWarning, { className: iconSize })
|
|
16951
|
-
};
|
|
16952
|
-
case "warning":
|
|
16953
|
-
return {
|
|
16954
|
-
container: "!bg-yellow-100 !text-yellow-800 dark:!bg-yellow-900 dark:!text-yellow-200",
|
|
16955
|
-
border: "!border-yellow-500/30 dark:!border-yellow-300/30",
|
|
16956
|
-
media: "bg-yellow-500/10 dark:bg-yellow-300/10",
|
|
16957
|
-
action: "text-yellow-200 bg-yellow-500 dark:bg-yellow-300",
|
|
16958
|
-
icon: "text-yellow-500 dark:text-yellow-300",
|
|
16959
|
-
iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: iconSize })
|
|
16960
|
-
};
|
|
16961
|
-
case "error":
|
|
16962
|
-
case "delete":
|
|
16963
|
-
return {
|
|
16964
|
-
container: "!bg-red-100 !text-red-800 dark:!bg-red-900 dark:!text-red-200",
|
|
16965
|
-
border: "!border-red-500/30 dark:!border-red-300/30",
|
|
16966
|
-
media: "bg-red-500/10 dark:bg-red-300/10",
|
|
16967
|
-
action: "text-red-200 bg-red-500 dark:bg-red-300",
|
|
16968
|
-
icon: "text-red-500 dark:text-red-300",
|
|
16969
|
-
iconNode: variant === "delete" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { className: iconSize }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonX, { className: iconSize })
|
|
16970
|
-
};
|
|
16971
|
-
case "success":
|
|
16972
|
-
return {
|
|
16973
|
-
container: "!bg-green-100 !text-green-800 dark:!bg-green-900 dark:!text-green-200",
|
|
16974
|
-
border: "!border-green-500/30 dark:!border-green-300/30",
|
|
16975
|
-
media: "bg-green-500/10 dark:bg-green-300/10",
|
|
16976
|
-
action: "text-green-200 bg-green-500 dark:bg-green-300",
|
|
16977
|
-
icon: "text-green-500 dark:text-green-300",
|
|
16978
|
-
iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: iconSize })
|
|
16979
|
-
};
|
|
16980
|
-
case "confirm":
|
|
16981
|
-
return {
|
|
16982
|
-
container: "!bg-purple-100 !text-purple-800 dark:!bg-purple-900 dark:!text-purple-200",
|
|
16983
|
-
border: "!border-purple-500/30 dark:!border-purple-300/30",
|
|
16984
|
-
media: "bg-purple-500/10 dark:bg-purple-300/10",
|
|
16985
|
-
action: "text-purple-200 bg-purple-500 dark:bg-purple-300",
|
|
16986
|
-
icon: "text-purple-500 dark:text-purple-300",
|
|
16987
|
-
iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleQuestionMark, { className: iconSize })
|
|
16988
|
-
};
|
|
16989
|
-
}
|
|
16990
|
-
};
|
|
16991
|
-
const styles = getVariantStyles();
|
|
16992
|
-
console.log("onAction", onAction);
|
|
16993
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog, { children: [
|
|
16994
|
-
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogTrigger, { asChild: true, children: trigger || /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", children: "Show Dialog" }) }),
|
|
16995
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
16996
|
-
AlertDialogContent,
|
|
16997
|
-
{
|
|
16998
|
-
className: cn(
|
|
16999
|
-
"w-50 h-fit font-mono border-x-8",
|
|
17000
|
-
styles.container,
|
|
17001
|
-
styles.border
|
|
17002
|
-
),
|
|
17003
|
-
children: [
|
|
17004
|
-
/* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "justify-center w-full text-center", children: [
|
|
17005
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17006
|
-
AlertDialogMedia,
|
|
17007
|
-
{
|
|
17008
|
-
className: cn(
|
|
17009
|
-
styles.media,
|
|
17010
|
-
"rounded-full flex items-center justify-center",
|
|
17011
|
-
iconSize
|
|
17012
|
-
// 🔥 ahora controla también el contenedor
|
|
17013
|
-
),
|
|
17014
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.icon, children: styles.iconNode })
|
|
17015
|
-
}
|
|
17016
|
-
) }),
|
|
17017
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { className: "text-2xl", children: title }) }),
|
|
17018
|
-
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { className: "text-xl text-center", children: description })
|
|
17019
|
-
] }),
|
|
17020
|
-
children,
|
|
17021
|
-
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
17022
|
-
ButtonGroup,
|
|
17023
|
-
{
|
|
17024
|
-
className: "flex w-full",
|
|
17025
|
-
style: {
|
|
17026
|
-
justifyContent: btnGroupDirection,
|
|
17027
|
-
alignItems: "center"
|
|
17028
|
-
},
|
|
17029
|
-
children: [
|
|
17030
|
-
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { className: cn("flex-1", btnHeightClass), children: cancelText }),
|
|
17031
|
-
listBtnConfig.map((btn, key) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
17032
|
-
Button,
|
|
17033
|
-
{
|
|
17034
|
-
type: btn.btnType,
|
|
17035
|
-
size: "lg",
|
|
17036
|
-
className: cn(btnHeightClass, submitBtnClass),
|
|
17037
|
-
variant: btn.variant,
|
|
17038
|
-
onClick: btn.onClick,
|
|
17039
|
-
disabled: btn.disabled,
|
|
17040
|
-
children: btn.label
|
|
17041
|
-
},
|
|
17042
|
-
key
|
|
17043
|
-
)),
|
|
17044
|
-
onAction && showActionBtn && /* @__PURE__ */ jsxRuntime.jsx(
|
|
17045
|
-
AlertDialogAction,
|
|
17046
|
-
{
|
|
17047
|
-
onClick: (e) => {
|
|
17048
|
-
e.preventDefault();
|
|
17049
|
-
if (onAction) {
|
|
17050
|
-
onAction();
|
|
17051
|
-
}
|
|
17052
|
-
},
|
|
17053
|
-
className: cn(
|
|
17054
|
-
"flex-1",
|
|
17055
|
-
btnHeightClass,
|
|
17056
|
-
className,
|
|
17057
|
-
styles.action
|
|
17058
|
-
),
|
|
17059
|
-
children: actionText
|
|
17060
|
-
}
|
|
17061
|
-
)
|
|
17062
|
-
]
|
|
17063
|
-
}
|
|
17064
|
-
) })
|
|
17065
|
-
]
|
|
17066
|
-
}
|
|
17067
|
-
)
|
|
17068
|
-
] });
|
|
17069
|
-
};
|
|
17070
|
-
var DynamicSheetKeyboard = ({ currentInputField, children, input }) => {
|
|
17177
|
+
var DynamicSheetKeyboard = ({ currentInputField, children, input, className, childClassName, keyFontSize = "text-base" }) => {
|
|
17071
17178
|
const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17072
17179
|
" ",
|
|
17073
17180
|
KeyboardFactory.create(currentInputField?.input.keyboard ?? "qwerty" /* QWERTY */, input, children),
|
|
@@ -17077,11 +17184,11 @@ var DynamicSheetKeyboard = ({ currentInputField, children, input }) => {
|
|
|
17077
17184
|
React3.useEffect(() => {
|
|
17078
17185
|
setContainer(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17079
17186
|
" ",
|
|
17080
|
-
KeyboardFactory.create(currentInputField?.input.keyboard ?? "qwerty" /* QWERTY */, input, children),
|
|
17187
|
+
KeyboardFactory.create(currentInputField?.input.keyboard ?? "qwerty" /* QWERTY */, input, children, childClassName, keyFontSize),
|
|
17081
17188
|
" "
|
|
17082
17189
|
] }));
|
|
17083
17190
|
}, [children]);
|
|
17084
|
-
return /* @__PURE__ */ jsxRuntime.jsx(CustomSheet, { children: container });
|
|
17191
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CustomSheet, { children: container, className });
|
|
17085
17192
|
};
|
|
17086
17193
|
var DynamicForm = ({
|
|
17087
17194
|
formTitle,
|
|
@@ -17276,53 +17383,120 @@ var FormWrapper = ({ form, handleSubmit, children, readOnly, debug, isWrapInWiza
|
|
|
17276
17383
|
}
|
|
17277
17384
|
) });
|
|
17278
17385
|
};
|
|
17279
|
-
var
|
|
17280
|
-
|
|
17281
|
-
|
|
17282
|
-
|
|
17283
|
-
|
|
17284
|
-
|
|
17285
|
-
|
|
17386
|
+
var GenericFilter = ({
|
|
17387
|
+
filters = [],
|
|
17388
|
+
pagination,
|
|
17389
|
+
autoSubmit = false,
|
|
17390
|
+
defaultValues = {},
|
|
17391
|
+
initPage = 1,
|
|
17392
|
+
initLimit = 10,
|
|
17393
|
+
rangeLimit = [10, 25, 50, 100],
|
|
17394
|
+
onChange,
|
|
17395
|
+
withSearch = true,
|
|
17396
|
+
withInitDate = true,
|
|
17397
|
+
withEndDate = true,
|
|
17398
|
+
withActive = true,
|
|
17399
|
+
withLimit = true,
|
|
17400
|
+
wrapInCard = true
|
|
17286
17401
|
}) => {
|
|
17287
|
-
const
|
|
17288
|
-
|
|
17289
|
-
|
|
17290
|
-
|
|
17291
|
-
|
|
17292
|
-
|
|
17293
|
-
);
|
|
17294
|
-
|
|
17295
|
-
|
|
17296
|
-
|
|
17297
|
-
|
|
17402
|
+
const record = {
|
|
17403
|
+
page: initPage,
|
|
17404
|
+
limit: initLimit,
|
|
17405
|
+
...defaultValues
|
|
17406
|
+
};
|
|
17407
|
+
const [values, setValues] = React3.useState(record);
|
|
17408
|
+
const isFirstRender = React3.useRef(true);
|
|
17409
|
+
React3.useEffect(() => {
|
|
17410
|
+
if (isFirstRender.current) {
|
|
17411
|
+
isFirstRender.current = false;
|
|
17412
|
+
return;
|
|
17413
|
+
}
|
|
17414
|
+
}, [values]);
|
|
17415
|
+
const handleChange = (name, value) => {
|
|
17416
|
+
setValues((prev) => ({ ...prev, [name]: value }));
|
|
17417
|
+
if (autoSubmit && onChange) onChange({ ...values, [name]: value });
|
|
17418
|
+
};
|
|
17419
|
+
const baseFields = [
|
|
17420
|
+
...withSearch ? [
|
|
17298
17421
|
{
|
|
17299
|
-
|
|
17300
|
-
|
|
17301
|
-
|
|
17302
|
-
|
|
17422
|
+
name: "search",
|
|
17423
|
+
label: "Buscar",
|
|
17424
|
+
inputType: "text_group" /* TEXT_GROUP */,
|
|
17425
|
+
inputGroupConfig: { iconsLeft: [lucideReact.Search] },
|
|
17426
|
+
onChange: (value) => handleChange("search", value)
|
|
17303
17427
|
}
|
|
17304
|
-
|
|
17305
|
-
|
|
17306
|
-
stepFields,
|
|
17307
|
-
currentStep,
|
|
17308
|
-
totalSteps,
|
|
17309
|
-
setCurrentStep
|
|
17310
|
-
}) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
17311
|
-
DynamicForm,
|
|
17428
|
+
] : [],
|
|
17429
|
+
...withInitDate ? [
|
|
17312
17430
|
{
|
|
17313
|
-
|
|
17314
|
-
|
|
17315
|
-
|
|
17316
|
-
|
|
17317
|
-
|
|
17318
|
-
|
|
17319
|
-
|
|
17320
|
-
|
|
17321
|
-
|
|
17322
|
-
|
|
17431
|
+
name: "initDate",
|
|
17432
|
+
label: "Fecha de Inicio",
|
|
17433
|
+
inputType: "date" /* DATE */,
|
|
17434
|
+
onChange: (value) => handleChange("initDate", value)
|
|
17435
|
+
}
|
|
17436
|
+
] : [],
|
|
17437
|
+
...withEndDate ? [
|
|
17438
|
+
{
|
|
17439
|
+
name: "endDate",
|
|
17440
|
+
label: "Fecha Final",
|
|
17441
|
+
inputType: "date" /* DATE */,
|
|
17442
|
+
onChange: (value) => handleChange("endDate", value)
|
|
17443
|
+
}
|
|
17444
|
+
] : [],
|
|
17445
|
+
...withActive ? [
|
|
17446
|
+
{
|
|
17447
|
+
wrapInCard: true,
|
|
17448
|
+
name: "active",
|
|
17449
|
+
label: "",
|
|
17450
|
+
inputType: "button_group" /* BUTTON_GROUP */,
|
|
17451
|
+
description: "Estado",
|
|
17452
|
+
listConfig: {
|
|
17453
|
+
list: [
|
|
17454
|
+
{ id: 1, name: "Activo", value: true },
|
|
17455
|
+
{ id: 2, name: "Inactivo", value: false },
|
|
17456
|
+
{ id: 3, name: "Todos", value: void 0 }
|
|
17457
|
+
],
|
|
17458
|
+
onOptionChange: (item) => {
|
|
17459
|
+
if (Array.isArray(item) && item[0]) handleChange("active", item[0].value);
|
|
17460
|
+
else if (item && "value" in item) handleChange("active", item.value);
|
|
17461
|
+
}
|
|
17462
|
+
}
|
|
17323
17463
|
}
|
|
17324
|
-
|
|
17325
|
-
|
|
17464
|
+
] : [],
|
|
17465
|
+
...withLimit ? [
|
|
17466
|
+
{
|
|
17467
|
+
name: "limit",
|
|
17468
|
+
label: "L\xEDmite por p\xE1gina",
|
|
17469
|
+
inputType: "select" /* SELECT */,
|
|
17470
|
+
listConfig: {
|
|
17471
|
+
list: rangeLimit.map((num) => ({
|
|
17472
|
+
value: String(num),
|
|
17473
|
+
id: num,
|
|
17474
|
+
name: String(num)
|
|
17475
|
+
})),
|
|
17476
|
+
onOptionChange: (item) => handleChange("limit", Number(item?.value ?? 10))
|
|
17477
|
+
}
|
|
17478
|
+
}
|
|
17479
|
+
] : []
|
|
17480
|
+
];
|
|
17481
|
+
const fieldsConfig = [
|
|
17482
|
+
...filters,
|
|
17483
|
+
baseFields
|
|
17484
|
+
];
|
|
17485
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col md:flex-row md:items-end gap-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17486
|
+
DynamicForm,
|
|
17487
|
+
{
|
|
17488
|
+
withCard: wrapInCard,
|
|
17489
|
+
withSubmitBtn: !autoSubmit,
|
|
17490
|
+
formTitle: "",
|
|
17491
|
+
submitBtnLabel: "Buscar",
|
|
17492
|
+
fields: fieldsConfig,
|
|
17493
|
+
record: values,
|
|
17494
|
+
showFormHeader: false,
|
|
17495
|
+
onSubmit: ({ data }) => {
|
|
17496
|
+
if (onChange && !autoSubmit) onChange(data);
|
|
17497
|
+
}
|
|
17498
|
+
}
|
|
17499
|
+
) }) });
|
|
17326
17500
|
};
|
|
17327
17501
|
var DynamicFormExample = () => {
|
|
17328
17502
|
const record = {
|
|
@@ -17447,186 +17621,89 @@ var mockFields = [
|
|
|
17447
17621
|
zodType: z2__default.default.string().min(4, "Debe tener al menos 4 d\xEDgitos").max(6, "Debe tener m\xE1ximo 6 d\xEDgitos")
|
|
17448
17622
|
}
|
|
17449
17623
|
];
|
|
17450
|
-
var
|
|
17451
|
-
|
|
17452
|
-
|
|
17453
|
-
|
|
17454
|
-
|
|
17455
|
-
|
|
17456
|
-
|
|
17457
|
-
setInputSetups((prev) => ({
|
|
17458
|
-
...prev,
|
|
17459
|
-
[type]: { ...prev[type], [key]: !prev[type][key] }
|
|
17460
|
-
}));
|
|
17461
|
-
};
|
|
17462
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-1", children: inputsTypes.map((type) => {
|
|
17463
|
-
const setup = inputSetups[type];
|
|
17464
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
17465
|
-
"div",
|
|
17466
|
-
{
|
|
17467
|
-
className: "border rounded-lg p-2 flex flex-col-2 gap-1 shadow-sm",
|
|
17468
|
-
children: [
|
|
17469
|
-
/* @__PURE__ */ jsxRuntime.jsx(Button, { size: "icon", onClick: () => handleAddInput(type, setup), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}) }),
|
|
17470
|
-
/* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "item-1", children: [
|
|
17471
|
-
/* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row justify-center w-full content-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-xl", children: type }) }) }),
|
|
17472
|
-
/* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
17473
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
17474
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17475
|
-
Switch,
|
|
17476
|
-
{
|
|
17477
|
-
checked: setup.required,
|
|
17478
|
-
onCheckedChange: () => toggleConfig(type, "required")
|
|
17479
|
-
}
|
|
17480
|
-
),
|
|
17481
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Required" })
|
|
17482
|
-
] }),
|
|
17483
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
|
|
17484
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17485
|
-
Switch,
|
|
17486
|
-
{
|
|
17487
|
-
checked: setup.disabled,
|
|
17488
|
-
onCheckedChange: () => toggleConfig(type, "disabled")
|
|
17489
|
-
}
|
|
17490
|
-
),
|
|
17491
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Disabled" })
|
|
17492
|
-
] })
|
|
17493
|
-
] }) })
|
|
17494
|
-
] }) })
|
|
17495
|
-
]
|
|
17496
|
-
},
|
|
17497
|
-
type
|
|
17498
|
-
);
|
|
17499
|
-
}) });
|
|
17500
|
-
};
|
|
17501
|
-
var CustomSheet = ({ title = "", children, childrenHeader, isOpen, className, side = "bottom" }) => {
|
|
17502
|
-
const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
|
|
17503
|
-
const storeIsOpen = useKeyboardStore((state) => state.isOpen);
|
|
17504
|
-
const controlledIsOpen = typeof isOpen === "boolean" ? isOpen : storeIsOpen;
|
|
17505
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: controlledIsOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side, className, children: [
|
|
17506
|
-
/* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { children: [
|
|
17507
|
-
/* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: title }),
|
|
17508
|
-
/* @__PURE__ */ jsxRuntime.jsxs(SheetDescription, { children: [
|
|
17509
|
-
childrenHeader,
|
|
17510
|
-
children
|
|
17511
|
-
] })
|
|
17512
|
-
] }),
|
|
17513
|
-
/* @__PURE__ */ jsxRuntime.jsx(SheetFooter, {})
|
|
17514
|
-
] }) });
|
|
17515
|
-
};
|
|
17516
|
-
var GenericFilter = ({
|
|
17517
|
-
filters = [],
|
|
17518
|
-
pagination,
|
|
17519
|
-
autoSubmit = false,
|
|
17520
|
-
defaultValues = {},
|
|
17521
|
-
initPage = 1,
|
|
17522
|
-
initLimit = 10,
|
|
17523
|
-
rangeLimit = [10, 25, 50, 100],
|
|
17524
|
-
onChange,
|
|
17525
|
-
withSearch = true,
|
|
17526
|
-
withInitDate = true,
|
|
17527
|
-
withEndDate = true,
|
|
17528
|
-
withActive = true,
|
|
17529
|
-
withLimit = true,
|
|
17530
|
-
wrapInCard = true
|
|
17624
|
+
var WizardForm = ({
|
|
17625
|
+
fields,
|
|
17626
|
+
record,
|
|
17627
|
+
onSubmit,
|
|
17628
|
+
children,
|
|
17629
|
+
isWrapInWizard = true,
|
|
17630
|
+
skipSteps = false
|
|
17531
17631
|
}) => {
|
|
17532
|
-
const
|
|
17533
|
-
|
|
17534
|
-
|
|
17535
|
-
|
|
17536
|
-
|
|
17537
|
-
|
|
17538
|
-
|
|
17539
|
-
|
|
17540
|
-
|
|
17541
|
-
|
|
17542
|
-
|
|
17543
|
-
}
|
|
17544
|
-
}, [values]);
|
|
17545
|
-
const handleChange = (name, value) => {
|
|
17546
|
-
setValues((prev) => ({ ...prev, [name]: value }));
|
|
17547
|
-
if (autoSubmit && onChange) onChange({ ...values, [name]: value });
|
|
17548
|
-
};
|
|
17549
|
-
const baseFields = [
|
|
17550
|
-
...withSearch ? [
|
|
17551
|
-
{
|
|
17552
|
-
name: "search",
|
|
17553
|
-
label: "Buscar",
|
|
17554
|
-
inputType: "text_group" /* TEXT_GROUP */,
|
|
17555
|
-
inputGroupConfig: { iconsLeft: [lucideReact.Search] },
|
|
17556
|
-
onChange: (value) => handleChange("search", value)
|
|
17557
|
-
}
|
|
17558
|
-
] : [],
|
|
17559
|
-
...withInitDate ? [
|
|
17560
|
-
{
|
|
17561
|
-
name: "initDate",
|
|
17562
|
-
label: "Fecha de Inicio",
|
|
17563
|
-
inputType: "date" /* DATE */,
|
|
17564
|
-
onChange: (value) => handleChange("initDate", value)
|
|
17565
|
-
}
|
|
17566
|
-
] : [],
|
|
17567
|
-
...withEndDate ? [
|
|
17568
|
-
{
|
|
17569
|
-
name: "endDate",
|
|
17570
|
-
label: "Fecha Final",
|
|
17571
|
-
inputType: "date" /* DATE */,
|
|
17572
|
-
onChange: (value) => handleChange("endDate", value)
|
|
17573
|
-
}
|
|
17574
|
-
] : [],
|
|
17575
|
-
...withActive ? [
|
|
17632
|
+
const [currentStep, setCurrentStep] = React3.useState(1);
|
|
17633
|
+
const flattenFields4 = (list) => list.flatMap((f) => Array.isArray(f) ? flattenFields4(f) : f);
|
|
17634
|
+
const allFields = flattenFields4(fields);
|
|
17635
|
+
const totalSteps = allFields.reduce(
|
|
17636
|
+
(max, f) => Math.max(max, f.step ?? 1),
|
|
17637
|
+
1
|
|
17638
|
+
);
|
|
17639
|
+
const stepFields = allFields.filter((f) => (f.step ?? 1) === currentStep);
|
|
17640
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "flex flex-col gap-4 px-4", children: [
|
|
17641
|
+
/* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between mb-4 gap-2 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17642
|
+
Stepper,
|
|
17576
17643
|
{
|
|
17577
|
-
|
|
17578
|
-
|
|
17579
|
-
|
|
17580
|
-
|
|
17581
|
-
description: "Estado",
|
|
17582
|
-
listConfig: {
|
|
17583
|
-
list: [
|
|
17584
|
-
{ id: 1, name: "Activo", value: true },
|
|
17585
|
-
{ id: 2, name: "Inactivo", value: false },
|
|
17586
|
-
{ id: 3, name: "Todos", value: void 0 }
|
|
17587
|
-
],
|
|
17588
|
-
onOptionChange: (item) => {
|
|
17589
|
-
if (Array.isArray(item) && item[0]) handleChange("active", item[0].value);
|
|
17590
|
-
else if (item && "value" in item) handleChange("active", item.value);
|
|
17591
|
-
}
|
|
17592
|
-
}
|
|
17644
|
+
steps: Array(totalSteps).fill({}),
|
|
17645
|
+
currentStep,
|
|
17646
|
+
clickable: skipSteps,
|
|
17647
|
+
onStepClick: setCurrentStep
|
|
17593
17648
|
}
|
|
17594
|
-
|
|
17595
|
-
|
|
17649
|
+
) }) }),
|
|
17650
|
+
children ? children({
|
|
17651
|
+
stepFields,
|
|
17652
|
+
currentStep,
|
|
17653
|
+
totalSteps,
|
|
17654
|
+
setCurrentStep
|
|
17655
|
+
}) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
17656
|
+
DynamicForm,
|
|
17596
17657
|
{
|
|
17597
|
-
|
|
17598
|
-
|
|
17599
|
-
|
|
17600
|
-
|
|
17601
|
-
|
|
17602
|
-
|
|
17603
|
-
|
|
17604
|
-
|
|
17605
|
-
|
|
17606
|
-
|
|
17607
|
-
}
|
|
17608
|
-
}
|
|
17609
|
-
] : []
|
|
17610
|
-
];
|
|
17611
|
-
const fieldsConfig = [
|
|
17612
|
-
...filters,
|
|
17613
|
-
baseFields
|
|
17614
|
-
];
|
|
17615
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col md:flex-row md:items-end gap-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
17616
|
-
DynamicForm,
|
|
17617
|
-
{
|
|
17618
|
-
withCard: wrapInCard,
|
|
17619
|
-
withSubmitBtn: !autoSubmit,
|
|
17620
|
-
formTitle: "",
|
|
17621
|
-
submitBtnLabel: "Buscar",
|
|
17622
|
-
fields: fieldsConfig,
|
|
17623
|
-
record: values,
|
|
17624
|
-
showFormHeader: false,
|
|
17625
|
-
onSubmit: ({ data }) => {
|
|
17626
|
-
if (onChange && !autoSubmit) onChange(data);
|
|
17658
|
+
record,
|
|
17659
|
+
formSubTitle: "This is a subtitle",
|
|
17660
|
+
formTitle: "Wizard Form Example",
|
|
17661
|
+
withCard: false,
|
|
17662
|
+
errorAlertPosition: "down",
|
|
17663
|
+
fields: stepFields,
|
|
17664
|
+
onSubmit,
|
|
17665
|
+
isWrapInWizard: true,
|
|
17666
|
+
currentStep,
|
|
17667
|
+
totalSteps
|
|
17627
17668
|
}
|
|
17628
|
-
|
|
17629
|
-
|
|
17669
|
+
)
|
|
17670
|
+
] });
|
|
17671
|
+
};
|
|
17672
|
+
|
|
17673
|
+
// src/components/custom/form/theme/theme-config.ts
|
|
17674
|
+
var defaultTheme = {
|
|
17675
|
+
colors: {
|
|
17676
|
+
primary: "hsl(var(--primary))",
|
|
17677
|
+
error: "hsl(var(--destructive))",
|
|
17678
|
+
success: "hsl(var(--success))",
|
|
17679
|
+
warning: "hsl(var(--warning))"
|
|
17680
|
+
},
|
|
17681
|
+
spacing: "normal",
|
|
17682
|
+
borderRadius: "md",
|
|
17683
|
+
labelPosition: "top",
|
|
17684
|
+
fontSize: "base"
|
|
17685
|
+
};
|
|
17686
|
+
var spacingClasses = {
|
|
17687
|
+
compact: "gap-1",
|
|
17688
|
+
normal: "gap-2",
|
|
17689
|
+
comfortable: "gap-4"
|
|
17690
|
+
};
|
|
17691
|
+
var borderRadiusClasses = {
|
|
17692
|
+
none: "rounded-none",
|
|
17693
|
+
sm: "rounded-sm",
|
|
17694
|
+
md: "rounded-md",
|
|
17695
|
+
lg: "rounded-lg",
|
|
17696
|
+
full: "rounded-full"
|
|
17697
|
+
};
|
|
17698
|
+
var fontSizeClasses = {
|
|
17699
|
+
sm: "text-sm",
|
|
17700
|
+
base: "text-base",
|
|
17701
|
+
lg: "text-lg"
|
|
17702
|
+
};
|
|
17703
|
+
var labelPositionClasses = {
|
|
17704
|
+
top: "flex-col",
|
|
17705
|
+
left: "flex-row items-center",
|
|
17706
|
+
floating: "relative"
|
|
17630
17707
|
};
|
|
17631
17708
|
function useDynamicForm({
|
|
17632
17709
|
fields,
|
|
@@ -17736,7 +17813,20 @@ exports.AccordionItem = AccordionItem;
|
|
|
17736
17813
|
exports.AccordionTrigger = AccordionTrigger;
|
|
17737
17814
|
exports.Alert = Alert;
|
|
17738
17815
|
exports.AlertDescription = AlertDescription;
|
|
17816
|
+
exports.AlertDialog = AlertDialog;
|
|
17817
|
+
exports.AlertDialogAction = AlertDialogAction;
|
|
17818
|
+
exports.AlertDialogCancel = AlertDialogCancel;
|
|
17819
|
+
exports.AlertDialogContent = AlertDialogContent;
|
|
17820
|
+
exports.AlertDialogDescription = AlertDialogDescription;
|
|
17821
|
+
exports.AlertDialogFooter = AlertDialogFooter;
|
|
17822
|
+
exports.AlertDialogHeader = AlertDialogHeader;
|
|
17823
|
+
exports.AlertDialogMedia = AlertDialogMedia;
|
|
17824
|
+
exports.AlertDialogOverlay = AlertDialogOverlay;
|
|
17825
|
+
exports.AlertDialogPortal = AlertDialogPortal;
|
|
17826
|
+
exports.AlertDialogTitle = AlertDialogTitle;
|
|
17827
|
+
exports.AlertDialogTrigger = AlertDialogTrigger;
|
|
17739
17828
|
exports.AlertTitle = AlertTitle;
|
|
17829
|
+
exports.AutocompleteInput = AutocompleteInput;
|
|
17740
17830
|
exports.Badge = Badge;
|
|
17741
17831
|
exports.BaseInput = BaseInput;
|
|
17742
17832
|
exports.BaseKeyboard = BaseKeyboard;
|
|
@@ -17769,11 +17859,13 @@ exports.CommandItem = CommandItem;
|
|
|
17769
17859
|
exports.CommandList = CommandList;
|
|
17770
17860
|
exports.CommandSeparator = CommandSeparator;
|
|
17771
17861
|
exports.CommandShortcut = CommandShortcut;
|
|
17862
|
+
exports.CountrySelectInput = CountrySelectInput;
|
|
17772
17863
|
exports.CurrencyInput = CurrencyInput;
|
|
17773
17864
|
exports.CustomAlert = CustomAlert;
|
|
17774
17865
|
exports.CustomInputGroup = CustomInputGroup;
|
|
17775
17866
|
exports.CustomSheet = CustomSheet;
|
|
17776
17867
|
exports.DateInput = DateInput;
|
|
17868
|
+
exports.DateRangeInput = DateRangeInput;
|
|
17777
17869
|
exports.DateTimeInput = DateTimeInput;
|
|
17778
17870
|
exports.Dialog = Dialog;
|
|
17779
17871
|
exports.DialogClose = DialogClose;
|
|
@@ -17785,9 +17877,12 @@ exports.DialogOverlay = DialogOverlay;
|
|
|
17785
17877
|
exports.DialogPortal = DialogPortal;
|
|
17786
17878
|
exports.DialogTitle = DialogTitle;
|
|
17787
17879
|
exports.DialogTrigger = DialogTrigger;
|
|
17880
|
+
exports.DynamicDialog = DynamicDialog;
|
|
17788
17881
|
exports.DynamicForm = DynamicForm;
|
|
17789
17882
|
exports.DynamicFormExample = DynamicFormExample;
|
|
17790
17883
|
exports.DynamicSheetKeyboard = DynamicSheetKeyboard;
|
|
17884
|
+
exports.EmailInput = EmailInput;
|
|
17885
|
+
exports.FakeInput = FakeInput;
|
|
17791
17886
|
exports.Field = Field;
|
|
17792
17887
|
exports.FieldButtonGroup = FieldButtonGroup;
|
|
17793
17888
|
exports.FieldContent = FieldContent;
|
|
@@ -17796,10 +17891,12 @@ exports.FieldDateTimeInput = FieldDateTimeInput;
|
|
|
17796
17891
|
exports.FieldDescription = FieldDescription;
|
|
17797
17892
|
exports.FieldError = FieldError;
|
|
17798
17893
|
exports.FieldFileMultiUpload = FieldFileMultiUpload;
|
|
17894
|
+
exports.FieldFileUpload = FieldFileUpload;
|
|
17799
17895
|
exports.FieldGroup = FieldGroup;
|
|
17800
17896
|
exports.FieldKeyValueList = FieldKeyValueList;
|
|
17801
17897
|
exports.FieldLabel = FieldLabel;
|
|
17802
17898
|
exports.FieldLegend = FieldLegend;
|
|
17899
|
+
exports.FieldRange = FieldRange;
|
|
17803
17900
|
exports.FieldRepeater = FieldRepeater;
|
|
17804
17901
|
exports.FieldSeparator = FieldSeparator;
|
|
17805
17902
|
exports.FieldSet = FieldSet;
|
|
@@ -17811,6 +17908,7 @@ exports.FieldTimeInput = FieldTimeInput2;
|
|
|
17811
17908
|
exports.FieldTitle = FieldTitle;
|
|
17812
17909
|
exports.FileInput = FileInput;
|
|
17813
17910
|
exports.FileMultiUploadInput = FileMultiUploadInput;
|
|
17911
|
+
exports.FileUploadInput = FileUploadInput;
|
|
17814
17912
|
exports.Form = Form;
|
|
17815
17913
|
exports.FormControl = FormControl;
|
|
17816
17914
|
exports.FormDescription = FormDescription;
|
|
@@ -17844,9 +17942,12 @@ exports.KeyboardFactory = KeyboardFactory;
|
|
|
17844
17942
|
exports.KeyboardQwerty = KeyboardQwerty;
|
|
17845
17943
|
exports.KeyboardTypes = KeyboardTypes;
|
|
17846
17944
|
exports.Label = Label;
|
|
17945
|
+
exports.LocationPickerInput = LocationPickerInput;
|
|
17847
17946
|
exports.MultiSelectInput = MultiSelectInput;
|
|
17848
17947
|
exports.NumberInput = NumberInput;
|
|
17849
17948
|
exports.OTPInput = OTPInput2;
|
|
17949
|
+
exports.PasswordInput = PasswordInput;
|
|
17950
|
+
exports.PhoneInput = PhoneInput;
|
|
17850
17951
|
exports.Popover = Popover;
|
|
17851
17952
|
exports.PopoverAnchor = PopoverAnchor;
|
|
17852
17953
|
exports.PopoverContent = PopoverContent;
|
|
@@ -17855,6 +17956,8 @@ exports.QwertyKeyboard = QwertyKeyboard;
|
|
|
17855
17956
|
exports.RadioGroup = RadioGroup;
|
|
17856
17957
|
exports.RadioGroupInput = RadioGroupInput;
|
|
17857
17958
|
exports.RadioGroupItem = RadioGroupItem;
|
|
17959
|
+
exports.RangeInput = RangeInput;
|
|
17960
|
+
exports.RatingInput = RatingInput;
|
|
17858
17961
|
exports.RepeaterInput = RepeaterInput;
|
|
17859
17962
|
exports.RepeaterTabsInput = RepeaterTabsInput;
|
|
17860
17963
|
exports.ResizableHandle = ResizableHandle;
|
|
@@ -17862,6 +17965,7 @@ exports.ResizablePanel = ResizablePanel;
|
|
|
17862
17965
|
exports.ResizablePanelGroup = ResizablePanelGroup;
|
|
17863
17966
|
exports.ScrollArea = ScrollArea;
|
|
17864
17967
|
exports.ScrollBar = ScrollBar;
|
|
17968
|
+
exports.SearchInputClass = SearchInputClass;
|
|
17865
17969
|
exports.Select = Select;
|
|
17866
17970
|
exports.SelectContent = SelectContent;
|
|
17867
17971
|
exports.SelectGroup = SelectGroup;
|
|
@@ -17874,10 +17978,19 @@ exports.SelectSeparator = SelectSeparator;
|
|
|
17874
17978
|
exports.SelectTrigger = SelectTrigger;
|
|
17875
17979
|
exports.SelectValue = SelectValue;
|
|
17876
17980
|
exports.Separator = Separator;
|
|
17981
|
+
exports.Sheet = Sheet;
|
|
17982
|
+
exports.SheetClose = SheetClose;
|
|
17983
|
+
exports.SheetContent = SheetContent;
|
|
17984
|
+
exports.SheetDescription = SheetDescription;
|
|
17985
|
+
exports.SheetFooter = SheetFooter;
|
|
17986
|
+
exports.SheetHeader = SheetHeader;
|
|
17987
|
+
exports.SheetTitle = SheetTitle;
|
|
17988
|
+
exports.SheetTrigger = SheetTrigger;
|
|
17877
17989
|
exports.SimpleCheckListInput = SimpleCheckListInput;
|
|
17878
17990
|
exports.Slider = Slider;
|
|
17879
17991
|
exports.SliderInput = SliderInput;
|
|
17880
17992
|
exports.SortableListInput = SortableListInput;
|
|
17993
|
+
exports.Stepper = Stepper;
|
|
17881
17994
|
exports.StringValueListInput = StringValueListInput;
|
|
17882
17995
|
exports.Switch = Switch;
|
|
17883
17996
|
exports.SwitchInput = SwitchInput;
|
|
@@ -17897,18 +18010,22 @@ exports.Tooltip = Tooltip;
|
|
|
17897
18010
|
exports.TooltipContent = TooltipContent;
|
|
17898
18011
|
exports.TooltipProvider = TooltipProvider;
|
|
17899
18012
|
exports.TooltipTrigger = TooltipTrigger;
|
|
18013
|
+
exports.UrlInput = UrlInput;
|
|
17900
18014
|
exports.WizardForm = WizardForm;
|
|
17901
18015
|
exports.applyCase = applyCase;
|
|
17902
18016
|
exports.applyInputFilter = applyInputFilter;
|
|
17903
18017
|
exports.badgeVariants = badgeVariants;
|
|
18018
|
+
exports.borderRadiusClasses = borderRadiusClasses;
|
|
17904
18019
|
exports.buttonGroupVariants = buttonGroupVariants;
|
|
17905
18020
|
exports.buttonVariants = buttonVariants;
|
|
17906
18021
|
exports.cn = cn;
|
|
18022
|
+
exports.defaultTheme = defaultTheme;
|
|
17907
18023
|
exports.entitiesToGroupedOption = entitiesToGroupedOption;
|
|
17908
18024
|
exports.entitiesToInputOption = entitiesToInputOption;
|
|
17909
18025
|
exports.entityToGroupedOption = entityToGroupedOption;
|
|
17910
18026
|
exports.entityToInputOption = entityToInputOption;
|
|
17911
18027
|
exports.flattenFields = flattenFields;
|
|
18028
|
+
exports.fontSizeClasses = fontSizeClasses;
|
|
17912
18029
|
exports.getDefaultValues = getDefaultValues;
|
|
17913
18030
|
exports.getDynamicSchema = getDynamicSchema;
|
|
17914
18031
|
exports.getFieldLabel = getFieldLabel;
|
|
@@ -17916,8 +18033,10 @@ exports.handleOnChage = handleOnChage;
|
|
|
17916
18033
|
exports.inputFieldComp = inputFieldComp;
|
|
17917
18034
|
exports.inputMap = inputMap;
|
|
17918
18035
|
exports.isValidField = isValidField;
|
|
18036
|
+
exports.labelPositionClasses = labelPositionClasses;
|
|
17919
18037
|
exports.letter = letter;
|
|
17920
18038
|
exports.mockFields = mockFields;
|
|
18039
|
+
exports.spacingClasses = spacingClasses;
|
|
17921
18040
|
exports.useDynamicForm = useDynamicForm;
|
|
17922
18041
|
exports.useFormField = useFormField;
|
|
17923
18042
|
exports.useFormPersist = useFormPersist;
|