@g4rcez/components 0.0.59 → 0.0.61

package/dist/src/components/core/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/core/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,cAAc;;;;mFAwCnB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,gBAAgB,CAC9E,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,EAChF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,GAwB7E,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/core/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,cAAc;;;;mFAwCnB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,gBAAgB,CAC9E,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,EAChF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,GAyB7E,CAAC"}

package/dist/src/components/core/button.js

@@ -42,5 +42,5 @@ const buttonVariants = cva("relative overflow-hidden inline-flex duration-500 en
 });
 export const Button = forwardRef(function Button({ className, icon, loading, theme, type = "button", size, rounded, ...props }, ref) {
     const disabled = loading || props.disabled;
-    return (_jsxs(Polymorph, { ...props, ref: ref, type: type, "data-theme": theme, disabled: disabled, "data-loading": loading, "aria-disabled": disabled, as: props.as ?? "button", "aria-busy": disabled || loading, onClick: disabled ? undefined : props.onClick, className: css(buttonVariants({ size, rounded, theme }), className), children: [icon, props.children] }));
+    return (_jsxs(Polymorph, { ...props, ref: ref, type: type, "data-theme": theme, disabled: disabled, "data-loading": loading, "data-component": "button", "aria-disabled": disabled, as: props.as ?? "button", "aria-busy": disabled || loading, onClick: disabled ? undefined : props.onClick, className: css(buttonVariants({ size, rounded, theme }), className), children: [icon, props.children] }));
 });

package/dist/src/components/core/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,gBAAgB;;mFAWpB,CAAC;AAEH,QAAA,MAAM,WAAW;;;mFAqBf,CAAC;AAEH,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,YAAY,CAAC,OAAO,WAAW,CAAC,GAC5B,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC7D,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAWrE,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,gBAAgB;;mFAWpB,CAAC;AAEH,QAAA,MAAM,WAAW;;;mFAqBf,CAAC;AAEH,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,YAAY,CAAC,OAAO,WAAW,CAAC,GAC5B,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC7D,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAkBrE,CAAC"}

package/dist/src/components/core/tag.js

@@ -38,5 +38,5 @@ const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-2 border-transp
     defaultVariants: { theme: "primary", size: "default" },
 });
 export const Tag = forwardRef(function Tag({ className, indicator = undefined, icon, loading, theme, size, ...props }, ref) {
-    return (_jsxs(Polymorph, { ...props, ref: ref, "data-theme": theme, as: props.as ?? "span", className: css(tagVariants({ size, theme }), className), children: [indicator ? _jsx("span", { className: indicatorVariant({ theme: indicator }) }) : null, icon, props.children] }));
+    return (_jsxs(Polymorph, { ...props, ref: ref, "data-theme": theme, "data-component": "tag", as: props.as ?? "span", className: css(tagVariants({ size, theme }), className), children: [indicator ? _jsx("span", { className: indicatorVariant({ theme: indicator }) }) : null, icon, props.children] }));
 });

package/dist/src/components/display/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/display/alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAU,MAAM,eAAe,CAAC;AAExD,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CAgB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;mFAajB,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,GAC9B,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAsCxE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/display/alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAU,MAAM,eAAe,CAAC;AAExD,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;mFAajB,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,GAC9B,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GA2CxE,CAAC"}

package/dist/src/components/display/alert.js

@@ -15,7 +15,7 @@ const transition = {
     duration: 0.7,
     ease: [0.04, 0.62, 0.23, 0.98],
 };
-export const Collapse = (props) => (_jsx(motion.div, { ...props, layout: true, layoutRoot: true, layoutScroll: true, initial: false, variants: variants, exit: variants.false, transition: transition, "aria-hidden": !props.open, animate: props.open.toString(), className: css("aria-hidden:pointer-events-none", props.className), children: props.children }));
+export const Collapse = (props) => (_jsx(motion.div, { ...props, layout: true, layoutRoot: true, layoutScroll: true, initial: false, variants: variants, exit: variants.false, transition: transition, "aria-hidden": !props.open, "data-component": "collapse", animate: props.open.toString(), className: css("aria-hidden:pointer-events-none", props.className), children: props.children }));
 const alertVariants = cva("p-4 w-full block border relative rounded-lg text-sm", {
     variants: {
         theme: {
@@ -32,5 +32,5 @@ const alertVariants = cva("p-4 w-full block border relative rounded-lg text-sm",
 });
 export const Alert = forwardRef(function Alert({ className, theme, Icon, onClose, open = true, ...props }, ref) {
     const close = () => onClose?.(false);
-    return (_jsx("div", { "data-open": !!open, "aria-hidden": !open, className: css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none"), children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, { ...props, ref: ref, role: "alert", "data-theme": theme, as: props.as ?? "div", className: css(alertVariants({ theme }), className), children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [!Icon && theme === "success" ? _jsx(CheckCircleIcon, { size: 20 }) : null, !Icon && theme === "info" ? _jsx(InfoIcon, { size: 20 }) : null, !Icon && theme === "danger" ? _jsx(TriangleAlertIcon, { size: 20 }) : null, Icon, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, onClose !== undefined ? (_jsx("button", { type: "button", onClick: close, className: "absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger", children: _jsx(XIcon, { size: 20 }) })) : null] }) }) }));
+    return (_jsx("div", { "data-open": !!open, "aria-hidden": !open, "data-component": "alert", className: css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none"), children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, { ...props, ref: ref, role: "alert", "data-theme": theme, as: props.as ?? "div", className: css(alertVariants({ theme }), className), children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [!Icon && theme === "success" ? _jsx(CheckCircleIcon, { size: 20 }) : null, !Icon && theme === "info" ? _jsx(InfoIcon, { size: 20 }) : null, !Icon && theme === "danger" ? _jsx(TriangleAlertIcon, { size: 20 }) : null, Icon, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, onClose !== undefined ? (_jsx("button", { type: "button", onClick: close, className: "absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger", children: _jsx(XIcon, { size: 20 }) })) : null] }) }) }));
 });

package/dist/src/components/display/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAqBvD,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExC,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;AAElD,KAAK,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;AAEpD,KAAK,cAAc,GAAG,OAAO,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,IAAI,OAAO,CACnF;IACI,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACtC,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,GAAG,CAAC,CAAC,SAAS,MAAM,GACf;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAE,GACtC,CAAC,SAAS,OAAO,GACf;IACI,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,aAAa,CAAC;CAC3B,GACD,EAAE,CAAC,GACP,CAAC;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE,CAAC,CAC3F,CAAC;AA0HF,eAAO,MAAM,QAAQ,mKAclB,aAAa,4CA4Of,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAqBvD,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExC,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;AAElD,KAAK,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;AAEpD,KAAK,cAAc,GAAG,OAAO,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,IAAI,OAAO,CACnF;IACI,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACtC,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,GAAG,CAAC,CAAC,SAAS,MAAM,GACf;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAE,GACtC,CAAC,SAAS,OAAO,GACf;IACI,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,aAAa,CAAC;CAC3B,GACD,EAAE,CAAC,GACP,CAAC;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE,CAAC,CAC3F,CAAC;AA0HF,eAAO,MAAM,QAAQ,mKAclB,aAAa,4CA8Of,CAAC"}

package/dist/src/components/display/calendar.js

@@ -10,7 +10,7 @@ import { useReducer } from "use-typed-reducer";
 import { useDebounce } from "../../hooks/use-debounce";
 import { useTranslations } from "../../hooks/use-components-provider";
 import { css } from "../../lib/dom";
-import { splitInto } from "../../lib/fns";
+import { splitInto, uuid } from "../../lib/fns";
 const transition = { type: "spring", bounce: 0.3, duration: 0.6 };
 const dir = (mod) => (n = 1) => ({ x: `${100 * mod * n}%`, opacity: 0.25 });
 const variants = {
@@ -24,10 +24,10 @@ const createDays = (month) => {
     return eachDayOfInterval({ start, end: addDays(start, 41) });
 };
 const formatMonth = (d, locale) => d.toLocaleDateString(locale, { month: "long" });
-const getOptionsMonth = (date, locale) => Array.from({ length: 12 }).map((_, i) => {
-    const month = startOfMonth(new Date(date).setMonth(i));
+const getOptionsMonth = (id, date, locale) => Array.from({ length: 12 }).map((_, i) => {
+    const month = startOfMonth(new Date(1970, i, 1).setMonth(i));
     const label = formatMonth(month, locale);
-    return (_jsx("option", { value: label, "data-index": i, children: label }, label));
+    return (_jsx("option", { value: label, "data-index": i, children: label }, `${id}-${label}`));
 });
 const onChangeUsingKeyboard = {
     ArrowLeft: (date, duration) => (duration === "days" ? subDays(date, 1) : subMonths(date, 1)),
@@ -73,6 +73,8 @@ const CalendarBody = (props) => {
             }) }, `week-${week.length}-${index}`))) }));
 };
 export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, disabledDate, locale, markToday = true, onChangeMonth, onChangeYear, rangeMode = false, onChange, styles, markRange = true, ...props }) => {
+    const id = useRef(uuid());
+    const translations = useTranslations();
     const root = useRef(null);
     const { date, range } = props;
     const providedDate = date || new Date();
@@ -83,7 +85,7 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
         year: formatYear(providedDate),
         direction: undefined,
         range: { from: range?.from, to: range?.to },
-        months: getOptionsMonth(providedDate, locale),
+        months: getOptionsMonth(id.current, providedDate, locale),
         selectMode: (rangeMode ? "from" : undefined),
         week: eachDayOfInterval({ start: startOfWeek(providedDate), end: endOfWeek(providedDate) }),
     }, (get) => ({
@@ -206,7 +208,7 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
         onChangeYear?.(new Date(value));
         defer(value);
     };
-    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { ref: root, className: css("relative overflow-hidden", styles?.calendar), children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { layout: true, "data-focustrap": "prev", variants: removeImmediately, onClick: dispatch.previousMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { layout: true, variants: variants, custom: state.direction, className: "absolute inset-0 isolate z-normal flex items-center justify-center font-semibold", children: _jsxs("span", { className: "flex w-fit items-center justify-center gap-0.5 py-1", children: [_jsx("select", { style: { width: `${monthString.length}ch` }, value: monthString, onChange: dispatch.onChangeMonth, className: "w-fit cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", children: state.months }), _jsx(TheMaskInput, { mask: "int", value: state.year, maxLength: 4, placeholder: "YYYY", onChange: internalOnChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 cursor-pointer appearance-none bg-transparent hover:text-primary" })] }) }), _jsx(motion.button, { layout: true, "data-focustrap": "next", variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", onClick: dispatch.nextMonth, children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: {
+    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { "data-component": "calendar", ref: root, className: css("relative overflow-hidden", styles?.calendar), children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { layout: true, "data-focustrap": "prev", variants: removeImmediately, onClick: dispatch.previousMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { layout: true, variants: variants, custom: state.direction, className: "absolute inset-0 isolate z-normal flex items-center justify-center font-semibold", children: _jsxs("span", { className: "flex w-fit items-center justify-center gap-0.5 py-1", children: [_jsx("select", { style: { width: `${monthString.length}ch` }, value: monthString, onChange: dispatch.onChangeMonth, className: "w-fit cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", children: state.months }), _jsx(TheMaskInput, { mask: "int", value: state.year, maxLength: 4, placeholder: "YYYY", onChange: internalOnChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 cursor-pointer appearance-none bg-transparent hover:text-primary" })] }) }), _jsx(motion.button, { layout: true, "data-focustrap": "next", variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", onClick: dispatch.nextMonth, children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: {
                                                 backgroundImage: "linear-gradient(to right, hsla(var(--card-background)) 15%, transparent 30%, transparent 70%, hsla(var(--card-background)) 85%)",
-                                            } })] }), _jsxs(motion.table, { className: "mt-2 table min-w-full table-auto border-0", children: [_jsx("thead", { children: _jsx("tr", { children: state.week.map((dayOfWeek) => (_jsx("th", { className: css("py-2 text-sm font-medium capitalize", styles?.weekDay), children: dayOfWeek.toLocaleDateString(locale, { weekday: "short" }) }, dayOfWeek.toString()))) }) }), _jsx(CalendarBody, { stateRange: state.range, stateDate: state.date, disabledDate: disabledDate, markRange: markRange, zip: zip, range: range, styles: styles, dispatch: dispatch, date: date || null, markToday: markToday, rangeMode: rangeMode, labelRange: labelRange, RenderOnDay: RenderOnDay, direction: state.direction, onKeyDown: dispatch.onKeyDown })] })] }, monthString) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "transition-transform duration-300 hover:scale-105", type: "button", onClick: dispatch.setToday, children: "Today" }) })] }) }));
+                                            } })] }), _jsxs(motion.table, { className: "mt-2 table min-w-full table-auto border-0", children: [_jsx("thead", { children: _jsx("tr", { children: state.week.map((dayOfWeek) => (_jsx("th", { className: css("py-2 text-sm font-medium capitalize", styles?.weekDay), children: dayOfWeek.toLocaleDateString(locale, { weekday: "short" }) }, dayOfWeek.toString()))) }) }), _jsx(CalendarBody, { stateRange: state.range, stateDate: state.date, disabledDate: disabledDate, markRange: markRange, zip: zip, range: range, styles: styles, dispatch: dispatch, date: date || null, markToday: markToday, rangeMode: rangeMode, labelRange: labelRange, RenderOnDay: RenderOnDay, direction: state.direction, onKeyDown: dispatch.onKeyDown })] })] }, monthString) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "transition-transform duration-300 hover:scale-105", type: "button", onClick: dispatch.setToday, children: translations.calendarToday }) })] }) }));
 };

package/dist/src/components/display/card.d.ts

@@ -2,9 +2,10 @@ import React, { PropsWithChildren } from "react";
 import { Label, Override } from "../../types";
 import { PolymorphicProps } from "../core/polymorph";
 export type CardProps = PolymorphicProps<Override<React.ComponentProps<"div">, {
+    titleClassName?: string;
     title?: Label;
     container?: string;
     header?: React.ReactElement | null;
 }>, "div">;
-export declare const Card: ({ children, title, as, container, header, className, ...props }: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, title, titleClassName, as, container, header, className, ...props }: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=card.d.ts.map

package/dist/src/components/display/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,MAAM,SAAS,GAAG,gBAAgB,CACpC,QAAQ,CACJ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B;IACI,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC,CACJ,EACD,KAAK,CACR,CAAC;AAEF,eAAO,MAAM,IAAI,oEAA8F,iBAAiB,CAAC,SAAS,CAAC,4CAS1I,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,MAAM,SAAS,GAAG,gBAAgB,CACpC,QAAQ,CACJ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B;IACI,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC,CACJ,EACD,KAAK,CACR,CAAC;AAEF,eAAO,MAAM,IAAI,oFASd,iBAAiB,CAAC,SAAS,CAAC,4CAU9B,CAAC"}

package/dist/src/components/display/card.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
-export const Card = ({ children, title, as = "div", container = "", header = null, className = "", ...props }) => (_jsxs(Polymorph, { ...props, as: as, className: css("flex flex-col gap-4 rounded-card border border-card-border bg-card-background py-4 pb-8 shadow", container), children: [title ? _jsx("header", { className: "mb-2 w-full border-b border-card-border px-8 pb-4 text-xl font-medium", children: title }) : header, _jsx("div", { className: css("min-w-full px-8", className), children: children })] }));
+export const Card = ({ children, title, titleClassName = "", as = "div", container = "", header = null, className = "", ...props }) => (_jsxs(Polymorph, { ...props, as: as, "data-componen": "card", className: css("flex flex-col gap-4 rounded-card border border-card-border bg-card-background py-4 pb-8 shadow", container), children: [title ? _jsx("header", { className: css("mb-2 w-full border-b border-card-border px-8 pb-4 text-xl font-medium", titleClassName), children: title }) : header, _jsx("div", { className: css("min-w-full px-8", className), children: children })] }));

package/dist/src/components/form/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAIzG,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,qBAAqB,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,MAAM,4GA2BjB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAaF,eAAO,MAAM,YAAY,yGAwRxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAIzG,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,qBAAqB,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,MAAM,4GA2BjB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAaF,eAAO,MAAM,YAAY,yGAyRxB,CAAC"}

package/dist/src/components/form/autocomplete.js

@@ -140,7 +140,7 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
         setOpen(false);
     };
     const id = props.id || props.name;
-    return (_jsxs(InputField, { ...props, container: container, error: error, feedback: feedback, form: props.form, hideLeft: hideLeft, id: props.name || props.id, interactive: interactive, labelClassName: labelClassName, left: left, name: props.name, optionalText: optionalText, placeholder: props.placeholder, required: required, rightLabel: rightLabel, title: props.title, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", className: "transition-colors link:text-primary", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "transition-colors link:text-danger", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("input", { ...getReferenceProps({
+    return (_jsxs(InputField, { ...props, left: left, error: error, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", className: "transition-colors link:text-primary", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "transition-colors link:text-danger", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("input", { ...getReferenceProps({
                     ...props,
                     onChange,
                     onFocus,

package/dist/src/components/form/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,qGA4BpB,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,qGA6BpB,CAAC"}

package/dist/src/components/form/checkbox.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { css } from "../../lib/dom";
-export const Checkbox = forwardRef(({ children, asTask = false, labelClassName, error, className = "", size, container, ...props }, ref) => (_jsxs("label", { "data-task": asTask, "data-disabled": props.disabled, "aria-disabled": props.disabled, className: css("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", asTask ? "group-checkbox-checked:line-through" : "", container), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", "data-task": asTask, className: css("form-checkbox mr-2 inline-block size-4 appearance-none rounded border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className) }), children, _jsx("span", { "data-name": "checkbox-label", className: css("min-w-full flex-1 text-xs text-danger empty:mt-0 empty:hidden", labelClassName), children: error })] })));
+export const Checkbox = forwardRef(({ children, asTask = false, labelClassName, error, className = "", size, container, ...props }, ref) => (_jsxs("label", { "data-task": asTask, "data-component": "checkbox", "data-disabled": props.disabled, "aria-disabled": props.disabled, className: css("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", asTask ? "group-checkbox-checked:line-through" : "", container), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", "data-task": asTask, className: css("form-checkbox mr-2 inline-block size-4 appearance-none rounded border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className) }), children, _jsx("span", { "data-name": "checkbox-label", className: css("min-w-full flex-1 text-xs text-danger empty:mt-0 empty:hidden", labelClassName), children: error })] })));

package/dist/src/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":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,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,CAAC,MAAM,CAAC,CAAC,CAAC;AAmC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDA2GtB,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,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,CAAC,MAAM,CAAC,CAAC,CAAC;AAmC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDA4GtB,CAAC"}

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

@@ -72,5 +72,5 @@ export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate,
     };
     const validDate = isValid(innerDate);
     const htmlValue = validDate ? innerDate.toISOString() : undefined;
-    return (_jsx(Input, { ...props, mask: mask, value: value, "data-value": htmlValue, "data-target": props.name, className: "uppercase", formNoValidate: !open, placeholder: props.placeholder ?? placeholder, onChange: onChangeDateInput, required: props.required ?? true, error: open ? undefined : props.error, name: undefined, id: undefined, right: _jsxs(Fragment, { children: [_jsx("input", { "data-origin": props.name, defaultValue: htmlValue, form: props.form, hidden: true, id: props.name, name: props.name, ref: externalRef, type: "date" }), _jsx(Dropdown, { open: open, 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, { ...props, locale: locale, changeOnlyOnClick: true, markToday: markToday, onChange: onChangeDate, disabledDate: disabledDate, date: validDate ? innerDate : undefined }) })] }) }));
+    return (_jsx(Input, { ...props, mask: mask, value: value, id: undefined, name: undefined, className: "uppercase", "data-value": htmlValue, formNoValidate: !open, "data-target": props.name, "data-component": "date-picker", onChange: onChangeDateInput, required: props.required ?? true, error: open ? undefined : props.error, placeholder: props.placeholder ?? placeholder, right: _jsxs(Fragment, { children: [_jsx("input", { "data-origin": props.name, defaultValue: htmlValue, form: props.form, hidden: true, id: props.name, name: props.name, ref: externalRef, type: "date" }), _jsx(Dropdown, { open: open, 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, { ...props, locale: locale, changeOnlyOnClick: true, markToday: markToday, onChange: onChangeDate, disabledDate: disabledDate, date: validDate ? innerDate : undefined }) })] }) }));
 });

package/dist/src/components/form/free-text.d.ts

@@ -7,6 +7,6 @@ export type FreeTextProps<T extends FreeTextTag, ExtraProps extends object> = Ov
     next: string;
     type: InputTypes;
 }>>;
-export declare const createFreeText: <T extends FreeTextTag, Html extends HTMLInputElement | HTMLTextAreaElement, Extra extends object>(Element: "input" | "textarea" | typeof MaskInput, defaultProps: FreeTextProps<T, Extra>, register?: (el: Html) => () => void) => React.FC<FreeTextProps<T, Extra>>;
+export declare const createFreeText: <T extends FreeTextTag, Html extends HTMLInputElement | HTMLTextAreaElement, Extra extends object>(Element: "input" | "textarea" | typeof MaskInput, elementName: "input" | "textarea", defaultProps: FreeTextProps<T, Extra>, register?: (el: Html) => () => void) => React.FC<FreeTextProps<T, Extra>>;
 export {};
 //# sourceMappingURL=free-text.d.ts.map

package/dist/src/components/form/free-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,MAAM,IAAI,QAAQ,CAClF,UAAU,GAAG,aAAa,EAC1B,eAAe,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,CACnE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,EAAE,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,MAAM,WAClH,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,gBAClC,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,aAC1B,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,sCAkGtC,CAAC"}
+{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,MAAM,IAAI,QAAQ,CAClF,UAAU,GAAG,aAAa,EAC1B,eAAe,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,CACnE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,EAAE,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,MAAM,WAClH,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,eACnC,OAAO,GAAG,UAAU,gBACnB,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,aAC1B,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,sCAmGtC,CAAC"}

package/dist/src/components/form/free-text.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from "react";
 import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { InputField } from "./input-field";
-export const createFreeText = (Element, defaultProps, register) => {
+export const createFreeText = (Element, elementName, defaultProps, register) => {
     const FreeText = forwardRef(({ type = "text", feedback = null, info, labelClassName, next, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error, ...props }, ref) => {
         const Render = Element;
         const id = props.id ?? props.name;
@@ -34,7 +34,7 @@ export const createFreeText = (Element, defaultProps, register) => {
                 input.removeEventListener("keydown", goNextInputImpl);
             };
         }, []);
-        return (_jsx(InputField, { ...defaultProps, info: info, container: 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(Render, { ...defaultProps, ...props, id: id, name: id, type: type, "data-next": next, "aria-busy": props.disabled, "aria-disabled": props.disabled, "aria-readonly": props.readOnly, ref: mergeRefs(ref, inputRef), className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "resize-y group-focus-within:border-primary group-hover:border-primary", props.className) }) }));
+        return (_jsx(InputField, { ...defaultProps, componentName: elementName, info: info, container: 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(Render, { ...defaultProps, ...props, id: id, name: id, type: type, "data-next": next, "aria-busy": props.disabled, "aria-disabled": props.disabled, "aria-readonly": props.readOnly, ref: mergeRefs(ref, inputRef), className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "resize-y group-focus-within:border-primary group-hover:border-primary", props.className) }) }));
     });
     return FreeText;
 };

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

@@ -11,6 +11,7 @@ export type FeedbackProps = React.PropsWithChildren<Partial<{
 }>>;
 export declare const InputFeedback: ({ reportStatus, hideLeft, className, info, children, title }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
 export type InputFieldProps<T extends "input" | "select" | "textarea"> = PolymorphicProps<Partial<{
+    componentName: string;
     info: Label;
     labelClassName: string;
     error: string;
@@ -26,5 +27,5 @@ export type InputFieldProps<T extends "input" | "select" | "textarea"> = Polymor
     name: string;
     placeholder: string;
 }>, T>;
-export declare const InputField: <T extends "input" | "select" | "textarea">({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName, name, title, placeholder, hideLeft, required, }: PropsWithChildren<InputFieldProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export declare const InputField: <T extends "input" | "select" | "textarea">({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName, name, title, componentName, placeholder, hideLeft, required, }: PropsWithChildren<InputFieldProps<T>>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=input-field.d.ts.map

package/dist/src/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,4CA6ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,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,GAAG,UAAU,8LAmBjE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,4CA0CvC,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,4CA6ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CAAC;IACJ,aAAa,EAAE,MAAM,CAAC;IACtB,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,GAAG,UAAU,6MAoBjE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,4CAyCvC,CAAC"}

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

@@ -6,9 +6,9 @@ import { useTranslations } from "../../hooks/use-components-provider";
 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 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, { as: "button", type: "button", 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: _jsx("div", { className: "w-full max-w-48 whitespace-break-spaces break-words", 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, }) => {
+export const InputField = ({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, componentName, placeholder, hideLeft = false, required, }) => {
     const ID = id ?? name;
     const translation = useTranslations();
     const optionalText = _optionalText ?? translation.inputOptionalLabel;
-    return (_jsxs("fieldset", { form: form, "data-error": !!error, "data-interactive": !!interactive, className: css("group grid min-h-0 min-w-0 grid-cols-1 items-baseline", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden 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-hover:border-primary group-error:border-danger ${labelClassName}`, children: [left ? _jsx("span", { className: "flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "flex flex-nowrap gap-2 whitespace-nowrap pr-2", children: right }) : null] })] }), _jsx("p", { className: "mt-input-gap hidden flex-shrink-0 flex-grow-0 whitespace-pre-wrap text-wrap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:inline-block group-error:inline-block group-error:text-danger", children: error }), _jsx("p", { className: "mt-input-gap 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 })] }));
+    return (_jsxs("fieldset", { form: form, "data-error": !!error, "data-component": componentName, "data-interactive": !!interactive, className: css("group grid min-h-0 min-w-0 grid-cols-1 items-baseline", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-error:text-danger", children: [_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 }), _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-hover:border-primary group-error:border-danger ${labelClassName}`, children: [left ? _jsx("span", { className: "flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "flex flex-nowrap gap-2 whitespace-nowrap pr-2", children: right }) : null] })] }), _jsx("p", { className: "mt-input-gap hidden flex-shrink-0 flex-grow-0 whitespace-pre-wrap text-wrap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:inline-block group-error:inline-block group-error:text-danger", children: error }), _jsx("p", { className: "mt-input-gap 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/src/components/form/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;AAE9D,eAAO,MAAM,KAAK,0DAAuF,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;AAE9D,eAAO,MAAM,KAAK,0DAAgG,CAAC"}

package/dist/src/components/form/input.js

@@ -1,4 +1,4 @@
 "use client";
 import MaskInput from "the-mask-input";
 import { createFreeText } from "./free-text";
-export const Input = createFreeText(MaskInput, { type: "text" });
+export const Input = createFreeText(MaskInput, "input", { type: "text" });

package/dist/src/components/form/radiobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radiobox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/radiobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,4CAAkD,aAAa,4CAiBnF,CAAC"}
+{"version":3,"file":"radiobox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/radiobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,4CAAkD,aAAa,4CAkBnF,CAAC"}

package/dist/src/components/form/radiobox.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { css } from "../../lib/dom";
-export const Radiobox = ({ children, className = "", size, ...props }) => (_jsxs("label", { "data-disabled": props.disabled, "aria-disabled": props.disabled, className: "group font-normal flex items-center gap-2 data-[disabled=true]:cursor-not-allowed", children: [_jsx("input", { ...props, type: "radio", className: css("form-radio rounded-full h-4 w-4 app border-card-border text-primary focus:ring-primary appearance-none inline-block bg-origin-border group-aria-disabled:cursor-not-allowed disabled:opacity-70", className), ...props }), children] }));
+export const Radiobox = ({ children, className = "", size, ...props }) => (_jsxs("label", { "data-component": "radiobox", "data-disabled": props.disabled, "aria-disabled": props.disabled, className: "group flex items-center gap-2 font-normal data-[disabled=true]:cursor-not-allowed", children: [_jsx("input", { ...props, type: "radio", className: css("app form-radio inline-block h-4 w-4 appearance-none rounded-full border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className), ...props }), children] }));

package/dist/src/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,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,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,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,oGA8FlB,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,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,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,oGA+FlB,CAAC"}

package/dist/src/components/form/select.js

@@ -23,5 +23,5 @@ export const Select = forwardRef(({ required = true, options, info, selectContai
         };
     }, []);
     const onClickLabel = () => inputRef.current?.focus();
-    return (_jsx(InputField, { container: 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(ChevronDownIcon, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }) }), children: _jsxs("select", { ...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-10 w-full flex-1 appearance-none rounded-md", "bg-transparent px-2 py-1 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) => (_jsx("option", { ...option, children: option.label ?? option.value }, `${id}-select-option-${option.value}`)))] }) }));
+    return (_jsx(InputField, { info: info, left: left, error: error, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, componentName: "select", rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, labelClassName: labelClassName, placeholder: props.placeholder, right: _jsx("label", { htmlFor: id, children: _jsxs("button", { onClick: onClickLabel, type: "button", className: "mt-2 transition-colors hover:text-primary", children: [_jsx(ChevronDownIcon, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }) }), children: _jsxs("select", { ...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-10 w-full flex-1 appearance-none rounded-md", "bg-transparent px-2 py-1 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) => (_jsx("option", { ...option, children: option.label ?? option.value }, `${id}-select-option-${option.value}`)))] }) }));
 });

package/dist/src/components/form/switch.js

@@ -31,5 +31,5 @@ export const Switch = forwardRef(({ children, container, error, ...props }, ref)
             innerRef.current.dispatchEvent(new Event("change", { bubbles: true }));
         }
     };
-    return (_jsxs("fieldset", { className: css("flex flex-wrap items-center", container), children: [_jsx("input", { ...props, checked: checked, "data-checked": checked, "data-trigger": "change", hidden: true, id: props.id || id, onChange: (e) => setInnerChecked(e.target.checked), ref: innerRef, type: "checkbox" }), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, className: "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out 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: "inline-block aspect-square size-5 transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch" }) }), _jsx("label", { htmlFor: props.id || id, className: "ml-3 inline-block 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 })] }));
+    return (_jsxs("fieldset", { className: css("flex flex-wrap items-center", container), "data-component": "switch", children: [_jsx("input", { ...props, checked: checked, "data-checked": checked, "data-trigger": "change", hidden: true, id: props.id || id, onChange: (e) => setInnerChecked(e.target.checked), ref: innerRef, type: "checkbox" }), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, className: "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out 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: "inline-block aspect-square size-5 transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch" }) }), _jsx("label", { htmlFor: props.id || id, className: "ml-3 inline-block 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/src/components/form/task-list.js

@@ -22,5 +22,5 @@ export const TaskList = (props) => {
         container.addEventListener("change", handler);
         return () => container.removeEventListener("change", handler);
     }, []);
-    return _jsx("fieldset", { ...props, ref: ref });
+    return _jsx("fieldset", { ...props, "data-component": "task-list", ref: ref });
 };

package/dist/src/components/form/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AAE1D,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAY5C,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AAE1D,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAa5C,CAAC"}

package/dist/src/components/form/textarea.js

@@ -1,6 +1,6 @@
 "use client";
 import { createFreeText } from "./free-text";
-export const Textarea = createFreeText("textarea", { container: "w-full" }, (textarea) => {
+export const Textarea = createFreeText("textarea", "textarea", { container: "w-full" }, (textarea) => {
     const adjustHeight = () => {
         const lineBreakers = textarea.value.split("\n");
         textarea.style.height = "auto";

package/dist/src/components/table/index.js

@@ -89,7 +89,7 @@ const InnerTable = ({ filters, pagination = null, onScrollEnd, useControl = fals
         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, followOutput: "smooth", components: components, totalCount: rows.length, itemContent: ItemContent, context: { loading: props.loading, loadingMore: props.loadingMore, cols: cols }, fixedFooterContent: showLoadingFooter ? Frag : null, fixedHeaderContent: () => (_jsx(TableHeader, { filters: filters, headers: cols, inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter, loading: !!props.loading, setCols: setCols, setFilters: setFilters, setSorters: setSorters, sorters: sorters })) }), _jsx("div", { "aria-hidden": "true", ref: ref, className: "h-0.5 w-full" })] }), pagination !== null ? _jsx(Pagination, { ...pagination }) : null] }));
+    return (_jsxs("div", { className: "min-w-full", children: [_jsxs("div", { className: `group rounded-lg ${border ? "border border-table-border" : ""}`, children: [_jsx(TableVirtuoso, { data: rows, useWindowScroll: true, followOutput: "smooth", components: components, totalCount: rows.length, itemContent: ItemContent, context: { loading: props.loading, loadingMore: props.loadingMore, cols: cols }, fixedFooterContent: showLoadingFooter ? Frag : null, fixedHeaderContent: () => (_jsx(TableHeader, { filters: filters, headers: cols, inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter, loading: !!props.loading, setCols: setCols, setFilters: setFilters, setSorters: setSorters, sorters: sorters })) }), _jsx("div", { "aria-hidden": "true", ref: ref, className: "h-0.5 w-full" })] }), pagination !== null ? _jsx(Pagination, { ...pagination }) : null] }));
 };
 const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
 const compareAndExec = (prev, state, exec) => (prev === state ? undefined : exec?.(state));
@@ -125,5 +125,5 @@ export const Table = (props) => {
             },
         ],
     });
-    return (_jsx(TableContext.Provider, { value: contextState, children: _jsxs("div", { className: "relative min-w-full", children: [operations ? (_jsx(Metadata, { cols: state.cols, rows: props.rows, options: optionCols, groups: state.groups, filters: state.filters, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, pagination: props.pagination ?? null, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true })) : null, state.groups.length === 0 ? (_jsx(InnerTable, { ...props, index: 0, cols: state.cols, options: optionCols, groups: state.groups, filters: state.filters, optionCols: optionCols, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, onScrollEnd: props.onScrollEnd, pagination: props.pagination ?? null, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true })) : (_jsx("div", { className: "flex flex-wrap gap-4", children: state.groups.map((group, index) => (_jsx("div", { className: "min-w-full", children: _jsx(InnerTable, { ...props, group: group, index: index, cols: state.cols, pagination: null, rows: group.rows, options: optionCols, groups: state.groups, filters: state.filters, optionCols: optionCols, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, onScrollEnd: props.onScrollEnd, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true }) }, `group-${group.groupId}`))) }))] }) }));
+    return (_jsx(TableContext.Provider, { value: contextState, children: _jsxs("div", { className: "relative min-w-full", "data-component": "table", children: [operations ? (_jsx(Metadata, { cols: state.cols, rows: props.rows, options: optionCols, groups: state.groups, filters: state.filters, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, pagination: props.pagination ?? null, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true })) : null, state.groups.length === 0 ? (_jsx(InnerTable, { ...props, index: 0, cols: state.cols, options: optionCols, groups: state.groups, filters: state.filters, optionCols: optionCols, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, onScrollEnd: props.onScrollEnd, pagination: props.pagination ?? null, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true })) : (_jsx("div", { className: "flex flex-wrap gap-4", children: state.groups.map((group, index) => (_jsx("div", { className: "min-w-full", children: _jsx(InnerTable, { ...props, group: group, index: index, cols: state.cols, pagination: null, rows: group.rows, options: optionCols, groups: state.groups, filters: state.filters, optionCols: optionCols, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, onScrollEnd: props.onScrollEnd, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true }) }, `group-${group.groupId}`))) }))] }) }));
 };

package/dist/src/components/table/table-lib.js

@@ -25,7 +25,7 @@ export const createColumns = (callback) => {
 };
 const noop = {};
 const mergeCols = (cols, saved) => {
-    if (!saved)
+    if (!Array.isArray(saved))
         return cols;
     const map = new Map(cols.map((x) => [x.id, x]));
     return saved.map((mock) => {
@@ -34,7 +34,7 @@ const mergeCols = (cols, saved) => {
     });
 };
 export const useTablePreferences = (name, cols, options = noop) => {
-    const init = isSsr() ? null : LocalStorage.get(`@unamed/table-${name}`) || null;
+    const init = isSsr() ? null : LocalStorage.get(`@components/table-${name}`) || null;
     const [state, dispatch] = useReducer({
         name,
         groups: options.groups || init?.groups || [],
@@ -46,7 +46,7 @@ export const useTablePreferences = (name, cols, options = noop) => {
             const prev = get.state();
             const result = { ...prev, ...partial };
             if (!isSsr())
-                LocalStorage.set(`@unamed/table-${prev.name}`, result);
+                LocalStorage.set(`@components/table-${prev.name}`, result);
             return result;
         };
         return {

package/dist/src/components/table/thead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../../src/components/table/thead.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,GAAG,EAAY,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIjE,KAAK,gBAAgB,CAAC,CAAC,SAAS,EAAE,IAAI;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC,CAAC;AAuIpI,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,EAAE,SAAS,gBAAgB,CAAC,CAAC,CAAC,4CA6BnE,CAAC"}
+{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../../src/components/table/thead.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,GAAG,EAAY,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIjE,KAAK,gBAAgB,CAAC,CAAC,SAAS,EAAE,IAAI;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC,CAAC;AAyIpI,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,EAAE,SAAS,gBAAgB,CAAC,CAAC,CAAC,4CA6BnE,CAAC"}

package/dist/src/components/table/thead.js

@@ -13,10 +13,10 @@ const HeaderChild = (props) => {
     const translation = useTranslations();
     const ownFilters = props.filters.filter((x) => x.name === props.header.id);
     const hasFilters = ownFilters.length > 0;
-    const FilterIcon = hasFilters ? SearchCheckIcon : SearchXIcon;
     const defaultAllowSort = props.header.allowSort ?? true;
     const defaultAllowFilter = props.header.allowFilter ?? true;
     const operators = useOperators();
+    const FilterIcon = hasFilters ? SearchCheckIcon : SearchXIcon;
     const onDelete = (e) => {
         const id = e.currentTarget.dataset.id || "";
         return props.setFilters((prev) => prev.filter((x) => x.id !== id));
@@ -37,12 +37,12 @@ const HeaderChild = (props) => {
     const ownSorter = props.sorters.find((x) => props.header.id === x.value);
     const ariaSort = !ownSorter?.type ? "none" : ownSorter.type === Order.Asc ? "ascending" : "descending";
     const label = getLabel(props.header);
-    const value = useMotionValue(undefined);
-    return (_jsxs(Reorder.Item, { ...props.header.thProps, ref: dragRef, as: "th", initial: false, dragSnapToOrigin: true, dragDirectionLock: true, role: "columnheader", value: props.header, "aria-sort": ariaSort, style: { width: value }, "aria-busy": props.loading, className: `relative hidden min-w-0 border border-transparent border-r-table-border font-medium first:table-cell last:border-r-transparent md:table-cell ${props.header.thProps?.className ?? ""}`, children: [_jsx("span", { className: "flex h-full items-center justify-between px-2 py-4", children: _jsxs("span", { className: "flex items-center gap-1", children: [props.inlineFilter && defaultAllowFilter ? (_jsx(Dropdown, { arrow: true, trigger: _jsxs("span", { children: [_jsxs("span", { id: `${props.header.id}-filter-dropdown-button`, className: "sr-only", children: [translation.tableFilterDropdownTitleUnique, " ", label] }), _jsx(FilterIcon, { "aria-labelledby": `${props.header.id}-filter-dropdown-button`, size: 14 })] }), title: _jsxs("span", { className: "text-lg font-medium", children: [translation.tableFilterDropdownTitleUnique, " ", _jsx("span", { className: "text-primary", children: label })] }), children: (ownFilters.length === 0) === null ? null : (_jsxs("ul", { className: "font-medium", children: [ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))), _jsx("li", { children: _jsxs("button", { onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations))), type: "button", className: "flex items-center gap-1 text-primary", children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] })) })) : null, _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), props.inlineSorter && defaultAllowSort ? (_jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })) : null] }) }), _jsx(motion.button, { drag: "x", draggable: true, dragListener: true, dragMomentum: true, animate: false, dragElastic: 0, dragPropagation: true, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, "data-type": "resizer", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: "absolute right-0 top-0 block h-full w-1 cursor-col-resize hover:bg-primary active:bg-primary", onDrag: (e, info) => {
+    const width = useMotionValue(undefined);
+    return (_jsxs(Reorder.Item, { ...props.header.thProps, as: "th", ref: dragRef, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, style: { width }, role: "columnheader", "aria-sort": ariaSort, value: props.header, "aria-busy": props.loading, className: `relative hidden min-w-0 border border-b border-transparent border-b-table-border border-r-table-border font-medium first:table-cell last:border-r-transparent md:table-cell ${props.header.thProps?.className ?? ""}`, children: [_jsx("span", { className: "flex h-full items-center justify-between px-2 py-4", children: _jsxs("span", { className: "flex items-center gap-1", children: [props.inlineFilter && defaultAllowFilter ? (_jsx(Dropdown, { arrow: true, trigger: _jsxs("span", { children: [_jsxs("span", { id: `${props.header.id}-filter-dropdown-button`, className: "sr-only", children: [translation.tableFilterDropdownTitleUnique, " ", label] }), _jsx(FilterIcon, { "aria-labelledby": `${props.header.id}-filter-dropdown-button`, size: 14 })] }), title: _jsxs("span", { className: "text-lg font-medium", children: [translation.tableFilterDropdownTitleUnique, " ", _jsx("span", { className: "text-primary", children: label })] }), children: (ownFilters.length === 0) === null ? null : (_jsxs("ul", { className: "font-medium", children: [ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))), _jsx("li", { children: _jsxs("button", { type: "button", className: "flex items-center gap-1 text-primary", onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations))), children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] })) })) : null, _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), props.inlineSorter && defaultAllowSort ? (_jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })) : null] }) }), _jsx(motion.button, { drag: "x", draggable: true, dragListener: true, dragMomentum: true, type: "button", animate: false, dragElastic: 0, dragPropagation: true, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, "data-type": "resizer", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: "absolute right-0 top-0 block h-full w-1 cursor-col-resize hover:bg-primary active:bg-primary", onDrag: (e, info) => {
                     const div = e.target;
-                    const v = value.get() || div.getBoundingClientRect().width;
+                    const v = width.get() || div.getBoundingClientRect().width;
                     const delta = info.delta.x;
-                    return value.set(Math.abs(v + delta));
+                    return width.set(Math.abs(v + delta));
                 } })] }));
 };
-export const TableHeader = (props) => (_jsx(Reorder.Group, { layout: true, as: "tr", axis: "x", drag: "x", layoutRoot: true, role: "row", layoutScroll: true, values: props.headers, onReorder: props.setCols, className: "bg-table-header rounded-t text-lg", children: _jsx(AnimatePresence, { children: props.headers.map((header) => (_jsx(HeaderChild, { inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter, loading: props.loading, setFilters: props.setFilters, filters: props.filters, setSorters: props.setSorters, sorters: props.sorters, header: header }, `header-child-item-${header.id}`))) }) }));
+export const TableHeader = (props) => (_jsx(Reorder.Group, { layout: true, as: "tr", axis: "x", drag: "x", layoutRoot: true, role: "row", layoutScroll: true, values: props.headers, onReorder: props.setCols, className: "bg-table-header text-lg", children: _jsx(AnimatePresence, { children: props.headers.map((header) => (_jsx(HeaderChild, { inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter, loading: props.loading, setFilters: props.setFilters, filters: props.filters, setSorters: props.setSorters, sorters: props.sorters, header: header }, `header-child-item-${header.id}`))) }) }));

package/dist/src/hooks/use-components-provider.d.ts

@@ -48,6 +48,7 @@ declare const defaultTranslations: {
     }) => import("react/jsx-runtime").JSX.Element;
     calendarFromDate: string;
     calendarToDate: string;
+    calendarToday: string;
 };
 type Translations = typeof defaultTranslations;
 type ContextProps = Partial<{
@@ -104,6 +105,7 @@ export declare const useTranslations: () => {
     }) => import("react/jsx-runtime").JSX.Element;
     calendarFromDate: string;
     calendarToDate: string;
+    calendarToday: string;
 };
 export declare const useColorParser: () => (v: string) => `hsla(${string})`;
 export {};

package/dist/src/hooks/use-components-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA2B,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA8Ce;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;CASxI,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,mBAAmB,CAAC;AAQ/C,KAAK,YAAY,GAAG,OAAO,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;CAC/B,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,UAAW,iBAAiB,CAAC,YAAY,CAAC,4CAUxE,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,OAAO,GAAG,SAItC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA3CY;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;CA+CxI,CAAC;AAEF,eAAO,MAAM,cAAc,wCAI1B,CAAC"}
+{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA2B,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA8Ce;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;CAUxI,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,mBAAmB,CAAC;AAQ/C,KAAK,YAAY,GAAG,OAAO,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;CAC/B,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,UAAW,iBAAiB,CAAC,YAAY,CAAC,4CAUxE,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,OAAO,GAAG,SAItC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA5CY;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;CAgDxI,CAAC;AAEF,eAAO,MAAM,cAAc,wCAI1B,CAAC"}

package/dist/src/hooks/use-components-provider.js

@@ -43,6 +43,7 @@ const defaultTranslations = {
     tablePaginationFooter: (pagination) => (_jsxs(Fragment, { children: [pagination.current, " to ", pagination.pages, " of ", pagination.totalItems, " items.", Array.isArray(pagination.sizes) ? pagination.select : null, " per page."] })),
     calendarFromDate: "From",
     calendarToDate: "To",
+    calendarToday: "Today",
 };
 const Context = createContext({
     colorTokenParser: parsers.hsla,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@g4rcez/components",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "sideEffects": false,
   "private": false,
   "packageManager": "pnpm@8.15.3",