@g4rcez/components 0.0.28 → 0.0.30

package/dist/components/form/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAG5C,KAAK,eAAe,GAAG,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,EAAE,CAAC,CAAC;AAyBhE,eAAO,MAAM,UAAU,kFAAmF,eAAe,4CAoFxH,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,EAAE,CAAC,CAAC;AAyBvE,eAAO,MAAM,UAAU,uGAuGtB,CAAC"}

package/dist/components/form/date-picker.js

@@ -2,12 +2,12 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { format, parse, startOfDay } from "date-fns";
 import { CalendarIcon } from "lucide-react";
-import { Fragment, useId, useMemo, useState } from "react";
+import { forwardRef, Fragment, useId, useMemo, useState } from "react";
 import { Is } from "sidekicker";
+import { useTranslations } from "../../hooks/use-translate-context";
 import { Calendar } from "../display/calendar";
 import { Dropdown } from "../floating/dropdown";
 import { Input } from "./input";
-import { useTranslations } from "../../hooks/use-translate-context";
 const fixedDate = new Date(1970, 11, 31);
 const parts = {
     year: () => [/\d/, /\d/, /\d/, /\d/],
@@ -27,7 +27,7 @@ const partValues = {
     day: (date) => date.getDate().toString().padStart(2, "0"),
     month: (date) => (date.getMonth() + 1).toString().padStart(2, "0"),
 };
-export const DatePicker = (_a) => {
+export const DatePicker = forwardRef((_a, externalRef) => {
     var _b;
     var { date, locale, disabledDate, autoFocusToday, onChange, markToday } = _a, props = __rest(_a, ["date", "locale", "disabledDate", "autoFocusToday", "onChange", "markToday"]);
     const labelId = useId();
@@ -55,14 +55,19 @@ export const DatePicker = (_a) => {
             if (matches) {
                 const d = startOfDay(parse(v, placeholder, new Date()));
                 setInnerDate(d);
-                onChange === null || onChange === void 0 ? void 0 : onChange(d);
+                return onChange === null || onChange === void 0 ? void 0 : onChange(d);
             }
         }
+        setInnerDate(undefined);
+        return onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
     };
     const onChangeDate = (d) => {
         setInnerDate(d);
         onChange === null || onChange === void 0 ? void 0 : onChange(d);
-        setValue(format(d, placeholder));
+        if (d)
+            return setValue(format(d, placeholder));
+        return setValue("");
     };
-    return (_jsx(Input, Object.assign({}, props, { mask: mask, value: value, onChange: onChangeDateInput, className: "uppercase", formNoValidate: !open, placeholder: placeholder, required: (_b = props.required) !== null && _b !== void 0 ? _b : true, error: open ? undefined : props.error, name: props.name ? `${props.name}-picker` : props.name, right: _jsxs(Fragment, { children: [_jsx("input", { defaultValue: innerDate === null || innerDate === void 0 ? void 0 : innerDate.toISOString(), hidden: true, type: "date", name: props.name }), _jsx(Dropdown, { open: open, restoreFocus: true, onChange: setOpen, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), buttonProps: { "aria-describedby": labelId }, children: _jsx(Calendar, Object.assign({}, props, { locale: locale, date: innerDate, onChange: onChangeDate, markToday: markToday, disabledDate: disabledDate, autoFocusToday: autoFocusToday })) })] }) })));
-};
+    const htmlValue = innerDate === null || innerDate === void 0 ? void 0 : innerDate.toISOString();
+    return (_jsx(Input, Object.assign({}, props, { mask: mask, value: value, "data-value": htmlValue, "data-target": props.name, className: "uppercase", formNoValidate: !open, placeholder: placeholder, onChange: onChangeDateInput, required: (_b = props.required) !== null && _b !== void 0 ? _b : true, error: open ? undefined : props.error, name: undefined, id: undefined, right: _jsxs(Fragment, { children: [_jsx("input", { "data-origin": props.name, hidden: true, type: "date", id: props.name, ref: externalRef, name: props.name, defaultValue: htmlValue }), _jsx(Dropdown, { open: open, restoreFocus: true, onChange: setOpen, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), buttonProps: { "aria-describedby": labelId }, children: _jsx(Calendar, Object.assign({}, props, { locale: locale, date: innerDate, onChange: onChangeDate, markToday: markToday, disabledDate: disabledDate, autoFocusToday: autoFocusToday })) })] }) })));
+});

package/dist/components/form/input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,iEAA0E,aAAa,4CAiDhH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,IAAI,gBAAgB,CACxE,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,OAAO,GAAG,QAAQ,8LAmBpD,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,4CAmCvC,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,iEAA0E,aAAa,4CA2ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,IAAI,gBAAgB,CACxE,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,OAAO,GAAG,QAAQ,8LAmBpD,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,4CAqCvC,CAAC"}

package/dist/components/form/input-field.js

@@ -5,10 +5,10 @@ import { Fragment } from "react";
 import { useTranslations } from "../../hooks/use-translate-context";
 import { css } from "../../lib/dom";
 import { Tooltip } from "../floating/tooltip";
-export const InputFeedback = ({ reportStatus, hideLeft = false, className, info, children, title }) => (_jsxs("div", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex items-center gap-1 group-hover:text-primary group-focus-within:text-primary transition-colors group-error:text-danger", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex gap-1 items-center justify-center", children: [info ? (_jsx(Tooltip, { title: _jsxs("span", { children: [_jsx("span", { className: "sr-only", children: info }), _jsx(InfoIcon, { className: "aspect-square size-3", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] }), children: info })) : null, reportStatus ? (_jsxs(Fragment, { children: [_jsx(CheckCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }), _jsx(XCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] })) : null] })) : null] })), children] }));
+export const InputFeedback = ({ reportStatus, hideLeft = false, className, info, children, title }) => (_jsxs("div", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex items-center gap-1 transition-colors group-focus-within:text-primary group-hover:text-primary group-error:text-danger", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex items-center justify-center gap-1", children: [info ? (_jsx(Tooltip, { title: _jsxs("span", { className: "cursor-help", children: [_jsx("span", { className: "sr-only", children: info }), _jsx(InfoIcon, { className: "aspect-square size-3", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] }), children: info })) : null, reportStatus ? (_jsxs(Fragment, { children: [_jsx(CheckCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }), _jsx(XCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] })) : null] })) : null] })), children] }));
 export const InputField = ({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, placeholder, hideLeft, required, }) => {
     const ID = id !== null && id !== void 0 ? id : name;
     const translation = useTranslations();
     const optionalText = _optionalText !== null && _optionalText !== void 0 ? _optionalText : translation.inputOptionalLabel;
-    return (_jsxs("fieldset", { form: form, "data-error": !!error, "data-interactive": !!interactive, className: css("group inline-flex gap-1.5 w-full", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex w-full cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-error:text-danger group-hover:border-primary", children: [!hideLeft && !rightLabel ? (_jsx(InputFeedback, { info: info, hideLeft: hideLeft, reportStatus: true, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? _jsx("span", { className: "text-opacity-70", children: optionalText }) : null, rightLabel ? _jsx(Fragment, { children: rightLabel }) : null] })) : null })) : null, _jsxs("div", { className: `relative group flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-focus-within:border-primary group-hover:border-primary group-error:border-danger ${labelClassName}`, children: [left ? _jsx("span", { className: "absolute left-0 flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "absolute right-0 flex flex-nowrap gap-2 whitespace-nowrap pr-1", children: right }) : null] })] }), _jsx("p", { className: "group-error:block empty:hidden group-error:text-danger hidden text-xs group-has-[input:not(:focus):invalid[data-initialized=true]]:block", children: error }), _jsx("p", { className: "text-xs group-assert:block group-error:hidden empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block", children: feedback })] }));
+    return (_jsxs("fieldset", { form: form, "data-error": !!error, "data-interactive": !!interactive, className: css("group inline-flex w-full gap-1.5", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex w-full cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-hover:border-primary group-error:text-danger", children: [!hideLeft && !rightLabel ? (_jsx(InputFeedback, { info: info, hideLeft: hideLeft, reportStatus: true, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? _jsx("span", { className: "text-opacity-70", children: optionalText }) : null, rightLabel ? _jsx(Fragment, { children: rightLabel }) : null] })) : null })) : null, _jsxs("div", { className: `group relative flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-focus-within:border-primary group-hover:border-primary group-error:border-danger ${labelClassName} focus:ring-2 focus:ring-inset focus:ring-primary`, children: [left ? _jsx("span", { className: "absolute left-0 flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "absolute right-0 flex flex-nowrap gap-2 whitespace-nowrap pr-1", children: right }) : null] })] }), _jsx("p", { className: "hidden text-xs empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:block group-error:block group-error:text-danger", children: error }), _jsx("p", { className: "text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden", children: feedback })] }));
 };

package/dist/components/form/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,OAAO,CAAC,EACxB,YAAY,GACR,aAAa,GAAG;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CACR,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqF/B,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,OAAO,CAAC,EACxB,YAAY,GACR,aAAa,GAAG;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CACR,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoF/B,CAAC"}

package/dist/components/form/input.js

@@ -3,7 +3,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from "react";
 import MaskInput from "the-mask-input";
-import { css, mergeRefs } from "../../lib/dom";
+import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { InputField } from "./input-field";
 export const Input = forwardRef((_a, ref) => {
     var _b;
@@ -14,7 +14,7 @@ export const Input = forwardRef((_a, ref) => {
         if (inputRef.current === null)
             return;
         const input = inputRef.current;
-        const focus = () => input.setAttribute("data-initialized", "true");
+        const focus = initializeInputDataset(inputRef.current);
         const goNextInputImpl = (e) => {
             const event = e;
             if (event.key === "Enter" && input.enterKeyHint === "next") {
@@ -29,11 +29,10 @@ export const Input = forwardRef((_a, ref) => {
             }
         };
         input.addEventListener("keydown", goNextInputImpl);
-        input.addEventListener("focus", focus);
         return () => {
+            focus();
             input.removeEventListener("keydown", goNextInputImpl);
-            input.removeEventListener("focus", focus);
         };
     }, []);
-    return (_jsx(InputField, { info: info, container: css("group inline-block w-full", container), error: error, feedback: feedback, hideLeft: hideLeft, left: left, optionalText: optionalText, right: right, rightLabel: rightLabel, interactive: interactive, form: props.form, id: props.name || props.id, name: props.name, labelClassName: labelClassName, title: props.title, placeholder: props.placeholder, required: props.required, children: _jsx(MaskInput, Object.assign({}, props, { type: type, "data-next": next, ref: mergeRefs(ref, inputRef), id: id, name: id, className: css("input text-foreground group h-11 w-full flex-1 rounded-md bg-transparent p-2 placeholder-input-mask outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!right ? "pe-4" : "", !!left ? "ps-4" : "", props.className) })) }));
+    return (_jsx(InputField, { info: info, container: css("group inline-block w-full", container), error: error, feedback: feedback, hideLeft: hideLeft, left: left, optionalText: optionalText, right: right, rightLabel: rightLabel, interactive: interactive, form: props.form, id: props.name || props.id, name: props.name, labelClassName: labelClassName, title: props.title, placeholder: props.placeholder, required: props.required, children: _jsx(MaskInput, Object.assign({}, props, { type: type, "data-next": next, ref: mergeRefs(ref, inputRef), id: id, name: id, className: css("input placeholder-input-mask group h-11 w-full flex-1 rounded-md bg-transparent p-2 text-foreground outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!right ? "pe-4" : "", !!left ? "ps-4" : "", props.className) })) }));
 });

package/dist/components/form/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE/G,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGAwFlB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE/G,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGA4FlB,CAAC"}

package/dist/components/form/select.js

@@ -2,30 +2,31 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
-import { forwardRef, useEffect, useRef } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { useTranslations } from "../../hooks/use-translate-context";
-import { css, mergeRefs } from "../../lib/dom";
+import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { InputField } from "./input-field";
 export const Select = forwardRef((_a, ref) => {
     var _b;
-    var { required = true, options, selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error } = _a, props = __rest(_a, ["required", "options", "selectContainer", "feedback", "labelClassName", "interactive", "rightLabel", "optionalText", "container", "hideLeft", "right", "left", "error"]);
+    var { required = true, options, info, selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error } = _a, props = __rest(_a, ["required", "options", "info", "selectContainer", "feedback", "labelClassName", "interactive", "rightLabel", "optionalText", "container", "hideLeft", "right", "left", "error"]);
     const translation = useTranslations();
     const inputRef = useRef(null);
     const id = (_b = props.id) !== null && _b !== void 0 ? _b : props.name;
+    useImperativeHandle(ref, () => inputRef.current);
     useEffect(() => {
         if (inputRef.current === null)
             return;
         const input = inputRef.current;
-        const focus = () => input.setAttribute("data-initialized", "true");
+        const focus = initializeInputDataset(inputRef.current);
         const change = () => input.setAttribute("data-selected", "true");
-        input.addEventListener("focus", focus);
         input.addEventListener("change", change);
         return () => {
-            input.removeEventListener("focus", focus);
+            focus();
             input.removeEventListener("change", change);
         };
     }, []);
-    return (_jsx(InputField, { container: css("group inline-block w-full", container), error: error, feedback: feedback, hideLeft: hideLeft, left: left, optionalText: optionalText, rightLabel: rightLabel, interactive: interactive, form: props.form, id: props.name || props.id, name: props.name, labelClassName: labelClassName, title: props.title, placeholder: props.placeholder, required: required, right: _jsx("label", { htmlFor: id, children: _jsxs("button", { type: "button", className: "hover:text-primary transition-colors", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }) }), children: _jsxs("select", Object.assign({}, props, { ref: mergeRefs(ref, inputRef), id: id, name: id, value: props.value, required: required, "data-selected": !!props.value || false, defaultValue: props.value ? undefined : "", className: css("input bg-transparent text-foreground select group h-11 w-full flex-1 rounded-md p-2 placeholder-input-placeholder outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className), children: [_jsx("option", { value: "", disabled: true, hidden: true, children: props.placeholder }), options.map((option) => {
+    const onClickLabel = () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
+    return (_jsx(InputField, { container: css("group inline-block w-full", container), error: error, feedback: feedback, hideLeft: hideLeft, left: left, info: info, optionalText: optionalText, rightLabel: rightLabel, interactive: interactive, form: props.form, id: props.name || props.id, name: props.name, labelClassName: labelClassName, title: props.title, placeholder: props.placeholder, required: required, right: _jsx("label", { htmlFor: id, children: _jsxs("button", { onClick: onClickLabel, type: "button", className: "mt-2 transition-colors hover:text-primary", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }) }), children: _jsxs("select", Object.assign({}, props, { id: id, name: id, value: props.value, required: required, ref: mergeRefs(ref, inputRef), "data-selected": !!props.value || false, defaultValue: props.value ? undefined : "", className: css("input select group h-11 w-full flex-1 rounded-md bg-transparent p-2 text-foreground placeholder-input-placeholder outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className), children: [_jsx("option", { value: "", disabled: true, hidden: true, children: props.placeholder }), options.map((option) => {
                     var _a;
                     return (_jsx("option", Object.assign({}, option, { children: (_a = option.label) !== null && _a !== void 0 ? _a : option.value }), `${id}-select-option-${option.value}`));
                 })] })) }));

package/dist/components/form/switch.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-type SwitchProps = Omit<React.ComponentProps<"input">, "onChange"> & {
+export type SwitchProps = React.ComponentProps<"input"> & {
     onCheck?: (nextValue: boolean) => void;
+    error?: string;
+    container?: string;
 };
-export declare const Switch: ({ children, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=switch.d.ts.map

package/dist/components/form/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,KAAK,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CAAC;AAEhH,eAAO,MAAM,MAAM,2BAA4B,WAAW,4CAmCzD,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAInG,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,MAAM,mGAwDjB,CAAC"}

package/dist/components/form/switch.js

@@ -1,19 +1,40 @@
 "use client";
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
-export const Switch = (_a) => {
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { useCallbackRef } from "../../hooks/use-callback-ref";
+import { css, dispatchInput } from "../../lib/dom";
+export const Switch = forwardRef((_a, ref) => {
     var _b;
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { children, container, error } = _a, props = __rest(_a, ["children", "container", "error"]);
     const id = useId();
-    const [innerChecked, setInnerChecked] = useState(false);
-    const checked = (_b = props.checked) !== null && _b !== void 0 ? _b : innerChecked;
+    const [innerChecked, setInnerChecked] = useState((_b = props.checked) !== null && _b !== void 0 ? _b : false);
+    const checked = innerChecked;
+    const innerRef = useRef(null);
+    const stableOnChange = useCallbackRef(props.onChange);
+    useImperativeHandle(ref, () => innerRef.current);
+    useEffect(() => {
+        if (innerRef.current !== null) {
+            if (stableOnChange.current) {
+                const onChange = (e) => {
+                    e.target.checked = !e.target.checked;
+                    stableOnChange.current && stableOnChange.current(e);
+                };
+                innerRef.current.addEventListener("change", onChange);
+                return () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", onChange); };
+            }
+        }
+    }, []);
     const onCheck = (e) => {
         var _a;
         const button = e.target;
         const checked = !(button.dataset.checked === "true");
         setInnerChecked(checked);
         (_a = props === null || props === void 0 ? void 0 : props.onCheck) === null || _a === void 0 ? void 0 : _a.call(props, checked);
+        if (innerRef.current !== null) {
+            dispatchInput(innerRef.current, checked.toString());
+            innerRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+        }
     };
-    return (_jsxs("div", { className: "flex items-center", children: [_jsx("input", Object.assign({}, props, { hidden: true, type: "checkbox", checked: checked, onChange: (e) => setInnerChecked(e.target.checked) })), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, className: "relative duration-300 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary transition-colors ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2", children: _jsx("span", { "aria-hidden": "true", "data-checked": checked, className: "data-[checked=false]:bg-disabled duration-300 data-[checked=true]:bg-input-switch inline-block size-5 aspect-square data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 transform rounded-full shadow ring-0 transition duration-300 ease-in-out" }) }), _jsx("span", { className: "ml-3 text-sm", id: `${id}-label`, children: _jsx("span", { className: "font-medium text-foreground", children: children }) })] }));
-};
+    return (_jsxs("fieldset", { className: css("flex flex-wrap items-center", container), children: [_jsx("input", Object.assign({}, props, { ref: innerRef, hidden: true, type: "checkbox", checked: checked, onChange: (e) => setInnerChecked(e.target.checked) })), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, className: "duration-300 ease-in-out relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary", children: _jsx("span", { "aria-hidden": "true", "data-checked": checked, className: "duration-300 duration-300 ease-in-out inline-block aspect-square size-5 transform rounded-full shadow ring-0 transition data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch" }) }), _jsx("span", { className: "ml-3 text-sm", id: `${id}-label`, children: _jsx("span", { className: "font-medium text-foreground", children: children }) }), _jsx("span", { className: "mt-1 flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden", children: error })] }));
+});

package/dist/components/table/index.js

@@ -5,7 +5,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import Linq from "linq-arrays";
 import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { TableVirtuoso } from "react-virtuoso";
-import { clamp, Is } from "sidekicker";
+import { Is } from "sidekicker";
 import { useReducer } from "use-typed-reducer";
 import { useCallbackRef } from "../../hooks/use-callback-ref";
 import { path } from "../../lib/fns";
@@ -14,7 +14,7 @@ import { Pagination } from "./pagination";
 import { multiSort } from "./sort";
 import { createOptionCols } from "./table-lib";
 import { TableHeader } from "./thead";
-const calculateSkeletonWidth = () => clamp(40, Math.random() * 90, 90);
+const calculateSkeletonWidth = (index) => Math.min(Math.max(index + index * (index % 2 === 0 ? 2 : 4) + 10, 50), 90);
 const TableBody = React.forwardRef((props, ref) => {
     var _a;
     return (_jsx("tbody", Object.assign({}, props, { role: "rowgroup", className: `divide-y divide-table-border ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref, children: _jsx(AnimatePresence, { children: props.children }) })));
@@ -53,12 +53,12 @@ const ItemContent = (index, row, context) => {
             const matrix = `${colIndex},${index}`;
             const value = path(row, col.id);
             const Component = col.Element;
-            return (_createElement("td", Object.assign({}, col.cellProps, { "data-matrix": matrix, role: "cell", key: `accessor-${index}-${colIndex}`, className: "px-2 h-14 border-none first:table-cell hidden md:table-cell" }), loading ? (_jsx("div", { className: "animate-pulse h-2 bg-table-border rounded", style: { width: `${calculateSkeletonWidth()}%` } })) : Component ? (_jsx(Component, { row: row, matrix: matrix, col: col, rowIndex: index, value: value })) : (_jsx(Fragment, { children: Is.nil(value) ? "" : value }))));
+            return (_createElement("td", Object.assign({}, col.cellProps, { "data-matrix": matrix, role: "cell", key: `accessor-${index}-${colIndex}`, className: "px-2 h-14 border-none first:table-cell hidden md:table-cell" }), loading ? (_jsx("div", { className: "animate-pulse h-2 bg-table-border rounded", style: { width: `${calculateSkeletonWidth(index)}%` } })) : Component ? (_jsx(Component, { row: row, matrix: matrix, col: col, rowIndex: index, value: value })) : (_jsx(Fragment, { children: Is.nil(value) ? "" : value }))));
         }) }));
 };
 const Frag = () => _jsx(Fragment, {});
 const InnerTable = (_a) => {
-    var { filters, pagination = null, onScrollEnd, useControl = false, setCols, setFilters, sorters, cols, border = true, setSorters } = _a, props = __rest(_a, ["filters", "pagination", "onScrollEnd", "useControl", "setCols", "setFilters", "sorters", "cols", "border", "setSorters"]);
+    var { filters, pagination = null, onScrollEnd, useControl = false, setCols, setFilters, sorters, cols, border = false, setSorters } = _a, props = __rest(_a, ["filters", "pagination", "onScrollEnd", "useControl", "setCols", "setFilters", "sorters", "cols", "border", "setSorters"]);
     const ref = useRef(null);
     const [showLoadingFooter, setShowLoadingFooter] = useState(false);
     const onScrollEndRef = useCallbackRef(onScrollEnd);
@@ -94,7 +94,7 @@ const InnerTable = (_a) => {
         observer.observe(div);
         return () => observer.disconnect();
     }, []);
-    return (_jsxs("div", { className: "min-w-full", children: [_jsxs("div", { className: `group  rounded-lg px-1 ${border ? "border border-table-border" : ""}`, children: [_jsx(TableVirtuoso, { data: rows, useWindowScroll: true, components: components, totalCount: rows.length, itemContent: ItemContent, context: { loading: props.loading, loadingMore: props.loadingMore, cols: cols }, fixedFooterContent: showLoadingFooter ? Frag : null, fixedHeaderContent: () => (_jsx(TableHeader, { headers: cols, sorters: sorters, filters: filters, setCols: setCols, setSorters: setSorters, setFilters: setFilters, loading: !!props.loading })) }), _jsx("div", { "aria-hidden": "true", ref: ref, className: "h-0.5 w-full" })] }), pagination !== null ? _jsx(Pagination, Object.assign({}, pagination)) : null] }));
+    return (_jsxs("div", { className: "min-w-full", children: [_jsxs("div", { className: `group rounded-lg px-1 ${border ? "border border-table-border" : ""}`, children: [_jsx(TableVirtuoso, { data: rows, useWindowScroll: true, components: components, totalCount: rows.length, itemContent: ItemContent, context: { loading: props.loading, loadingMore: props.loadingMore, cols: cols }, fixedFooterContent: showLoadingFooter ? Frag : null, fixedHeaderContent: () => (_jsx(TableHeader, { headers: cols, sorters: sorters, filters: filters, setCols: setCols, setSorters: setSorters, setFilters: setFilters, loading: !!props.loading })) }), _jsx("div", { "aria-hidden": "true", ref: ref, className: "h-0.5 w-full" })] }), pagination !== null ? _jsx(Pagination, Object.assign({}, pagination)) : null] }));
 };
 const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
 export const Table = (props) => {

package/dist/components/table/sort.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,EAAE,GAAG,EAAY,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGrF,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE9E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAY9F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,QAAuC,CAAC;AAG/G,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,kBAAkB,CACzC,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CACJ,CAAC;AASF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CA0EjD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE9G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,4CA+BjE,CAAC"}
+{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,EAAE,GAAG,EAAY,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAErF,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE9E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAY9F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,QAA2C,CAAC;AAEnH,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,kBAAkB,CACzC,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CACJ,CAAC;AASF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CA0EjD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE9G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,4CAkCjE,CAAC"}

package/dist/components/table/sort.js

@@ -2,11 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown01Icon, ArrowUp01Icon, ArrowUpDownIcon, PlusIcon, Trash2Icon } from "lucide-react";
 import { Fragment, useEffect, useState } from "react";
+import { useTranslations } from "../../hooks/use-translate-context";
 import { uuid } from "../../lib/fns";
 import { Dropdown } from "../floating/dropdown";
 import { Select } from "../form/select";
 import { getLabel } from "./table-lib";
-import { useTranslations } from "../../hooks/use-translate-context";
 var Order;
 (function (Order) {
     Order["Asc"] = "asc";
@@ -19,8 +19,8 @@ const createSorterFn = (fields) => (a, b) => fields.reduce((acc, x) => {
     const p = a[property] > b[property] ? reverse : a[property] < b[property] ? -reverse : 0;
     return acc !== 0 ? acc : p;
 }, 0);
-export const multiSort = (array, fields) => array.sort(createSorterFn(fields));
-const createSorter = (col, label, order = Order.Asc) => ({
+export const multiSort = (array, fields) => array.toSorted(createSorterFn(fields));
+const createSorter = (col, label, order) => ({
     id: uuid(),
     type: order,
     value: col.id,
@@ -36,7 +36,7 @@ export const Sort = (props) => {
     const onAddSorter = () => {
         const col = props.cols[0];
         if (col)
-            props.set((prev) => [...prev, createSorter(col, orders.asc.label)]);
+            props.set((prev) => [...prev, createSorter(col, orders.asc.label, orders.asc.value)]);
     };
     const onSetSorter = (id) => (e) => {
         const value = e.target.value;
@@ -66,9 +66,10 @@ export const SorterHead = (props) => {
             if (status === Order.Undefined)
                 return prev.filter((x) => x.value !== props.col.id);
             const findIndex = prev.findIndex((p) => p.value === props.col.id);
+            const sorter = createSorter(props.col, status, status);
             if (findIndex === -1)
-                return [...prev, createSorter(props.col, status)];
-            prev[findIndex] = createSorter(props.col, status);
+                return [...prev, sorter];
+            prev[findIndex] = sorter;
             return [...prev];
         });
     }, [status, props.col]);

package/dist/hooks/use-click-outside.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const useOnClickOutside: <T extends HTMLElement>(ref: React.RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void) => void;
+//# sourceMappingURL=use-click-outside.d.ts.map

package/dist/hooks/use-click-outside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../src/hooks/use-click-outside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,SAclI,CAAC"}

package/dist/hooks/use-click-outside.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+export const useOnClickOutside = (ref, handler) => {
+    useEffect(() => {
+        const listener = (event) => {
+            if (!ref.current || ref.current.contains(event.target))
+                return;
+            handler(event);
+        };
+        const params = { passive: true };
+        document.addEventListener("mousedown", listener, params);
+        document.addEventListener("touchstart", listener, params);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [ref, handler]);
+};

package/dist/hooks/use-form.d.ts

@@ -1,8 +1,12 @@
 import React from "react";
 import { AllPaths } from "sidekicker";
 import { z } from "zod";
+import { DatePickerProps } from "../components";
+import { AutocompleteProps } from "../components/form/autocomplete";
+import { CheckboxProps } from "../components/form/checkbox";
 import { InputProps } from "../components/form/input";
 import { SelectProps } from "../components/form/select";
+import { SwitchProps } from "../components/form/switch";
 export declare const formToJson: (form: HTMLFormElement) => any;
 export declare const convertPath: (path: string) => string[];
 export declare const getSchemaShape: <T extends z.ZodObject<any>>(name: string, schema: T) => T;
@@ -10,16 +14,25 @@ type CustomOnInvalid = (args: {
     form: HTMLFormElement;
     errors: Record<string, string>;
 }) => any;
-type CustomOnSubmit<T> = (args: {
-    json: T;
+export type UseFormSubmitParams<T> = {
+    success: boolean;
+    errors: Array<{
+        message: string;
+        path: string[];
+    }>;
+    json: any;
+    data: T;
     form: HTMLFormElement;
     reset: () => void;
     event: React.FormEvent<HTMLFormElement>;
-}) => any;
+};
+type UseFormSubmit<T> = (args: UseFormSubmitParams<T>) => any;
 export declare const useForm: <T extends z.ZodObject<any>>(schema: T) => {
     input: <Props extends InputProps>(name: AllPaths<z.infer<T>>, props?: Props) => Props;
-    select: <Props extends SelectProps>(name: AllPaths<z.infer<T>>, props?: Props) => Props;
-    onSubmit: (exec: CustomOnSubmit<z.infer<T>>) => (event: React.FormEvent<HTMLFormElement>) => void;
+    datepicker: <Props extends DatePickerProps>(name: AllPaths<z.infer<T>>, props?: Props) => Props;
+    checkbox: <Props extends CheckboxProps | SwitchProps>(name: AllPaths<z.infer<T>>, props?: Props) => Props;
+    select: <Props extends SelectProps | AutocompleteProps>(name: AllPaths<z.infer<T>>, props?: Props) => Props;
+    onSubmit: (exec: UseFormSubmit<z.infer<T>>) => (event: React.FormEvent<HTMLFormElement>) => any;
     errors: Record<string, string | undefined> | null;
     onInvalid: (exec?: CustomOnInvalid) => (event: React.FormEvent<HTMLFormElement>) => void;
     disabled: boolean;

package/dist/hooks/use-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../../src/hooks/use-form.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAe,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,CAAC,EAAuB,MAAM,KAAK,CAAC;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAiBxD,eAAO,MAAM,UAAU,SAAU,eAAe,KAAG,GAIlD,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,MAAM,aAAuD,CAAC;AAEhG,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,MAAM,UAAU,CAAC,MAKpE,CAAC;AAQf,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,KAAK,GAAG,CAAC;AAEhG,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,eAAe,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAA;CAAE,KAAK,GAAG,CAAC;AAEvI,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;YAkB1C,KAAK,SAAS,UAAU,QAAQ,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,KAAK,KAAG,KAAK;aAd1E,KAAK,SAAS,WAAW,QAAQ,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,KAAK,KAAG,KAAK;qBAkFjF,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;;uBAnBtE,eAAe,aAAa,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;;CAuC3E,CAAC"}
+{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../../src/hooks/use-form.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAe,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,CAAC,EAAuB,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAiBxD,eAAO,MAAM,UAAU,SAAU,eAAe,KAAG,GAIlD,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,MAAM,aAAuD,CAAC;AAEhG,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,MAAM,UAAU,CAAC,MAKpE,CAAC;AAWf,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,KAAK,GAAG,CAAC;AAEhG,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACnD,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;CAC3C,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC;AAE9D,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;YAiD1C,KAAK,SAAS,UAAU,QAAQ,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,KAAK,KAAG,KAAK;iBA7CtE,KAAK,SAAS,eAAe,QAAQ,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,KAAK,KAAG,KAAK;eA8BlF,KAAK,SAAS,aAAa,GAAG,WAAW,QAAQ,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,KAAK,KAAG,KAAK;aAf9F,KAAK,SAAS,WAAW,GAAG,iBAAiB,QAAQ,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,KAAK,KAAG,KAAK;qBA6GrG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;;uBApBrE,eAAe,aAAa,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;;CAoD3E,CAAC"}

package/dist/hooks/use-form.js

@@ -31,6 +31,8 @@ export const getSchemaShape = (name, schema) => convertPath(name).reduce((acc, e
     return shape instanceof ZodArray ? shape.element : shape;
 }, schema);
 const getValueByType = (e) => {
+    if (e.dataset.value)
+        return e.dataset.value;
     if (e.type === "checkbox")
         return e.checked;
     if (e.type === "number")
@@ -40,9 +42,25 @@ const getValueByType = (e) => {
 export const useForm = (schema) => {
     const [errors, setErrors] = useState(null);
     const ref = useRef({});
+    const datepicker = (name, props) => {
+        const validator = getSchemaShape(name, schema);
+        return Object.assign(Object.assign({}, props), { name, id: name, required: !validator.isOptional(), error: errors === null || errors === void 0 ? void 0 : errors[name], ref: (e) => {
+                if (e === null)
+                    return;
+                ref.current[name] = { element: e, schema: validator };
+            } });
+    };
     const select = (name, props) => {
         const validator = getSchemaShape(name, schema);
-        return Object.assign(Object.assign({}, props), { name, id: name, error: errors === null || errors === void 0 ? void 0 : errors[name], ref: (e) => {
+        return Object.assign(Object.assign({}, props), { name, id: name, required: !validator.isOptional(), error: errors === null || errors === void 0 ? void 0 : errors[name], ref: (e) => {
+                if (e === null)
+                    return;
+                ref.current[name] = { element: e, schema: validator };
+            } });
+    };
+    const checkbox = (name, props) => {
+        const validator = getSchemaShape(name, schema);
+        return Object.assign(Object.assign({}, props), { name, id: name, required: !validator.isOptional(), error: errors === null || errors === void 0 ? void 0 : errors[name], ref: (e) => {
                 if (e === null)
                     return;
                 ref.current[name] = { element: e, schema: validator };
@@ -51,7 +69,7 @@ export const useForm = (schema) => {
     const input = (name, props) => {
         var _a;
         const validator = getSchemaShape(name, schema);
-        return Object.assign(Object.assign({}, props), { name, id: name, type: Is.instance(validator, ZodNumber) ? "number" : ((_a = props === null || props === void 0 ? void 0 : props.type) !== null && _a !== void 0 ? _a : "text"), error: errors === null || errors === void 0 ? void 0 : errors[name], ref: (e) => {
+        return Object.assign(Object.assign({}, props), { name, id: name, required: !validator.isOptional(), type: Is.instance(validator, ZodNumber) ? "number" : ((_a = props === null || props === void 0 ? void 0 : props.type) !== null && _a !== void 0 ? _a : "text"), error: errors === null || errors === void 0 ? void 0 : errors[name], ref: (e) => {
                 if (e === null)
                     return;
                 ref.current[name] = { element: e, schema: validator };
@@ -59,30 +77,42 @@ export const useForm = (schema) => {
     };
     useEffect(() => {
         const events = Object.values(ref.current).map((input) => {
-            const validation = input.schema.safeParse(getValueByType(input.element));
+            const element = input.element.dataset.origin
+                ? document.querySelector(`[data-target=${input.element.name}]`)
+                : input.element;
+            const validation = input.schema.safeParse(getValueByType(element));
             const onBlurField = (e) => {
-                const validation = input.schema.safeParse(getValueByType(e.target));
-                const html = input.element;
-                const name = html.name;
+                const name = element.dataset.target || element.name;
+                if (!name)
+                    return;
+                console.log(e);
+                const value = getValueByType(e.target) || (e.relatedTarget ? getValueByType(e.relatedTarget) : "");
+                const validation = input.schema.safeParse(value);
+                console.log({ name, value, validation });
                 if (validation.success) {
-                    html.setCustomValidity("");
+                    element.setCustomValidity("");
                     return setErrors((prev) => {
                         const _a = prev || {}, _b = name, removed = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
                         return rest === null || Is.empty(rest) ? null : rest;
                     });
                 }
-                if (html.required) {
+                if (element.required) {
                     const errorMessage = validation.error.issues[0].message;
-                    html.setCustomValidity(errorMessage);
+                    element.setCustomValidity(errorMessage);
                     setErrors((prev) => (Object.assign(Object.assign({}, prev), { [name]: errorMessage })));
                 }
             };
-            const event = input.element.tagName === "INPUT" ? "blur" : "change";
-            input.element.addEventListener(event, onBlurField);
+            element.addEventListener("blur", onBlurField);
+            if (element.tagName === "SELECT")
+                element.addEventListener("change", onBlurField);
             return {
                 input,
-                hasInitialError: input.element.required ? !validation.success : false,
-                unsubscribe: () => input.element.removeEventListener(event, onBlurField),
+                hasInitialError: element.required ? !validation.success : false,
+                unsubscribe: () => {
+                    element.removeEventListener("blur", onBlurField);
+                    if (element.tagName === "SELECT")
+                        element.addEventListener("change", onBlurField);
+                },
             };
         });
         const hasErrors = events.some((x) => x.hasInitialError);
@@ -91,18 +121,20 @@ export const useForm = (schema) => {
         return () => events.forEach((item) => item.unsubscribe());
     });
     const onInvalid = useCallback((exec) => (event) => {
-        event.preventDefault();
         const form = event.currentTarget;
         const validationErrors = Object.values(ref.current).reduce((acc, input) => {
             const field = input.element;
             const validation = input.schema.safeParse(getValueByType(field));
+            if (field.dataset.ignore === "ignore")
+                return acc;
             if (validation.success)
                 return acc;
             const errorMessage = validation.error.issues[0].message;
             field.setAttribute("data-initialized", "true");
-            return Object.assign(Object.assign({}, acc), { [field.name]: errorMessage });
+            const name = field.dataset.name || field.name || "";
+            return Object.assign(Object.assign({}, acc), { [name]: errorMessage });
         }, {});
-        const e = Is.empty(validationErrors) ? null : {};
+        const e = Is.empty(validationErrors) ? null : validationErrors;
         setErrors(e);
         exec === null || exec === void 0 ? void 0 : exec({ form, errors: e || {} });
     }, []);
@@ -120,7 +152,19 @@ export const useForm = (schema) => {
                 json = setPath(json, input.name, getValueByType(input));
             }
         });
-        exec({ form, json, event, reset: () => formReset(form) });
+        const result = schema.safeParse(json);
+        if (result.success) {
+            return exec({ form, json, data: result.data, event, reset: () => formReset(form), success: true, errors: [] });
+        }
+        return exec({
+            form,
+            json,
+            event,
+            data: json,
+            success: false,
+            reset: () => formReset(form),
+            errors: result.error.issues.map((x) => ({ message: x.message, path: x.path.map((x) => String(x)) })),
+        });
     }, []);
-    return { input, select, onSubmit, errors, onInvalid, disabled: errors !== null };
+    return { input, datepicker, checkbox, select, onSubmit, errors, onInvalid, disabled: errors !== null };
 };