@g4rcez/components 1.3.1 → 2.0.0

package/dist/components/core/button.js

@@ -12,7 +12,7 @@ const variants = {
         small: "h-8 px-4 py-2 text-sm",
     },
     rounded: {
-        rough: "rounded-sm",
+        rough: "rounded-xs",
         squared: "rounded-none",
         default: "rounded-button",
         circle: "rounded-full aspect-square",
@@ -38,7 +38,7 @@ const variants = {
         "ghost-secondary": "bg-transparent hover:bg-secondary/20 border border-secondary text-secondary",
     },
 };
-const buttonVariants = cva("relative overflow-hidden inline-flex duration-500 enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring", {
+const buttonVariants = cva("relative overflow-hidden inline-flex duration-500 enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring", {
     variants,
     defaultVariants: { theme: "main", size: "default", rounded: "default" },
 });

package/dist/components/display/empty.d.ts

@@ -2,6 +2,7 @@ import { type LucideProps } from "lucide-react";
 import React from "react";
 export type EmptyProps = {
     Icon?: React.FC<LucideProps>;
+    message?: string;
 };
 export declare const Empty: (props: EmptyProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=empty.d.ts.map

package/dist/components/display/empty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/display/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAE1D,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAStC,CAAC"}
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/display/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5E,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAStC,CAAC"}

package/dist/components/display/empty.js

@@ -4,5 +4,5 @@ import { useTranslations } from "../../hooks/use-translations";
 export const Empty = (props) => {
     const Icon = props.Icon ?? FileIcon;
     const translate = useTranslations();
-    return (_jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-4 px-8 py-12", children: [_jsx(Icon, { size: 64, className: "text-disabled" }), _jsx("p", { className: "text-disabled", children: translate.emptyDataMessage })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4 justify-center items-center py-12 px-8 w-full", children: [_jsx(Icon, { size: 64, className: "text-disabled" }), _jsx("p", { className: "text-disabled", children: props.message ?? translate.emptyDataMessage })] }));
 };

package/dist/components/display/notifications.js

@@ -7,13 +7,13 @@ import { AnimatePresence, motion } from "motion/react";
 import { XIcon } from "lucide-react";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useHover } from "../../hooks/use-hover";
-const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-nowrap rounded-lg border text-sm shadow-shadow-notification supports-[backdrop-filter]:backdrop-blur-xl", {
+const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-nowrap rounded-lg border text-sm shadow-shadow-notification supports-backdrop-filter:backdrop-blur-xl", {
     variants: {
         theme: {
             warn: "bg-warn-notification/90 text-warn-hover border-warn/50",
-            info: "bg-info-notification supports-[backdrop-filter]:bg-info-notification/50 supports-[backdrop-filter]:bg-info/20 text-info border-info/50",
-            danger: "bg-danger-notification supports-[backdrop-filter]:bg-danger-notification/60 text-danger border-danger/50",
-            success: "bg-success-notification supports-[backdrop-filter]:bg-success-notification/50 text-success border-success/50",
+            info: "bg-info-notification supports-backdrop-filter:bg-info-notification/50 supports-backdrop-filter:bg-info/20 text-info border-info/50",
+            danger: "bg-danger-notification supports-backdrop-filter:bg-danger-notification/60 text-danger border-danger/50",
+            success: "bg-success-notification supports-backdrop-filter:bg-success-notification/50 text-success border-success/50",
             default: "border-card-border bg-card-background text-foreground",
         },
     },

package/dist/components/display/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/display/skeleton.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yCAAwE,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/display/skeleton.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yCAA2E,CAAC"}

package/dist/components/display/skeleton.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SkeletonCell = _jsx("div", { className: "h-2 w-10/12 animate-pulse rounded bg-table-border" });
+export const SkeletonCell = _jsx("div", { className: "h-2 w-10/12 animate-pulse rounded-sm bg-table-border" });

package/dist/components/display/tabs.js

@@ -73,7 +73,7 @@ export const Tabs = (props) => {
             setActive(result);
         }
     };
-    return (_jsx(Context.Provider, { value: active, children: _jsx(Card, { className: props.className, container: css("pt-0 max-w-full w-full min-w-0", props.container), header: _jsxs("header", { className: "relative mb-2 overflow-x-auto", children: [_jsx("div", { className: "absolute bottom-0 h-[1px] w-full bg-card-border" }), _jsx("nav", { className: "min-w-0", children: _jsx("ul", { onKeyDown: onKeyDown, ref: ref, className: "flex w-0 min-w-full flex-1 justify-start overflow-x-auto", children: items.map((x) => {
+    return (_jsx(Context.Provider, { value: active, children: _jsx(Card, { className: props.className, container: css("pt-0 max-w-full w-full min-w-0", props.container), header: _jsxs("header", { className: "relative mb-2 overflow-x-auto", children: [_jsx("div", { className: "absolute bottom-0 h-px w-full bg-card-border" }), _jsx("nav", { className: "min-w-0", children: _jsx("ul", { onKeyDown: onKeyDown, ref: ref, className: "flex w-0 min-w-full flex-1 justify-start overflow-x-auto", children: items.map((x) => {
                                 const inner = x.props;
                                 const current = active === inner.id;
                                 return (_jsx("li", { "data-id": inner.id, "data-active": current, "aria-disabled": inner.disabled, className: css("relative w-fit border-b border-transparent transition-all", current ? "border-primary font-medium text-primary" : "", inner.disabled ? "aria-disabled:text-disabled" : ""), children: _jsx(Polymorph, { as: "button", type: "button", "data-id": inner.id, "aria-current": "page", disabled: inner.disabled, onClick: inner.disabled ? undefined : onClick, className: "block w-full whitespace-nowrap px-10 py-4 disabled:cursor-not-allowed", children: inner.title }) }, `tab-header-${inner.id}`));

package/dist/components/floating/command-palette.js

@@ -102,7 +102,7 @@ export const CommandPalette = (props) => {
         return combi.register();
     }, [bindKey]);
     const Icon = props.Icon ?? FilterIcon;
-    return (_jsx(Fragment, { children: _jsxs(Modal, { ref: ref, animated: false, closable: false, open: props.open, overlayClickClose: true, interactions: [listNav], ariaTitle: "Command palette", bodyClassName: "px-0 py-0 pt-2", "data-component": "command-palette", onChange: props.onChangeVisibility, className: "container relative py-0 md:max-w-screen-sm lg:max-w-screen-md", children: [_jsxs("header", { className: "sticky top-0 isolate z-floating flex h-12 w-full items-center border-b border-floating-border bg-floating-background px-4", children: [_jsx("div", { className: "flex size-10 items-center justify-center", children: _jsx(Icon, { Default: FilterIcon, text: value, size: 16 }) }), _jsx("input", { autoFocus: true, value: value, "data-combikeysbypass": "true", placeholder: "Search for...", onChange: (e) => setValue(e.target.value), className: "h-12 w-full items-center bg-transparent px-2 py-2 pb-2 text-left text-lg outline-none", onKeyDown: (e) => {
+    return (_jsx(Fragment, { children: _jsxs(Modal, { ref: ref, animated: false, closable: false, open: props.open, overlayClickClose: true, interactions: [listNav], ariaTitle: "Command palette", bodyClassName: "px-0 py-0 pt-2", "data-component": "command-palette", onChange: props.onChangeVisibility, className: "container relative py-0 md:max-w-(--breakpoint-sm) lg:max-w-(--breakpoint-md)", children: [_jsxs("header", { className: "sticky top-0 isolate z-floating flex h-12 w-full items-center border-b border-floating-border bg-floating-background px-4", children: [_jsx("div", { className: "flex size-10 items-center justify-center", children: _jsx(Icon, { Default: FilterIcon, text: value, size: 16 }) }), _jsx("input", { autoFocus: true, value: value, "data-combikeysbypass": "true", placeholder: "Search for...", onChange: (e) => setValue(e.target.value), className: "h-12 w-full items-center bg-transparent px-2 py-2 pb-2 text-left text-lg outline-hidden", onKeyDown: (e) => {
                                 if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                                     if (activeIndex !== null) {
                                         listRef.current[activeIndex]?.scrollIntoView({

package/dist/components/floating/menu.js

@@ -6,7 +6,7 @@ import { ChevronRightIcon } from "lucide-react";
 import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 import { FLOATING_DELAY, TYPEAHEAD_RESET_DELAY } from "../../constants";
 import { css, mergeRefs } from "../../lib/dom";
-const menuItemClassName = (highlight = "") => css("w-full min-w-36 outline-none p-2.5 items-center flex justify-between text-left", "hover:bg-primary focus:bg-primary aria-expanded:opacity-80", "focus:text-primary-foreground hover:text-primary-foreground", "first-of-type:rounded-t-lg last-of-type:rounded-b-lg", "disabled:opacity-40 disabled:cursor-not-allowed", highlight);
+const menuItemClassName = (highlight = "") => css("w-full min-w-36 outline-hidden p-2.5 items-center flex justify-between text-left", "hover:bg-primary focus:bg-primary aria-expanded:opacity-80", "focus:text-primary-foreground hover:text-primary-foreground", "first-of-type:rounded-t-lg last-of-type:rounded-b-lg", "disabled:opacity-40 disabled:cursor-not-allowed", highlight);
 const MenuContext = createContext({
     isOpen: false,
     activeIndex: null,
@@ -98,7 +98,7 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
                             setHasFocusInside(false);
                             parent.setHasFocusInside(true);
                         },
-                    })), children: [label, isNested && (_jsxs("span", { style: { marginLeft: 10, fontSize: 10 }, children: [_jsx("span", { className: "sr-only", children: "Next menu" }), _jsx(ChevronRightIcon, { size: 14 })] }))] })) }), _jsx(MenuContext.Provider, { value: { activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: isParent ? restoreFocus : !isNested, children: _jsx(FloatingComponent, { ...getFloatingProps(), ref: refs.setFloating, style: { ...props.style, ...floatingStyles }, className: css("isolate z-tooltip flex max-h-80 flex-col items-start overflow-y-auto rounded-lg border border-floating-border bg-floating-background text-left shadow-shadow-floating outline-none", floatingClassName), children: children }) }) })) }) })] }));
+                    })), children: [label, isNested && (_jsxs("span", { style: { marginLeft: 10, fontSize: 10 }, children: [_jsx("span", { className: "sr-only", children: "Next menu" }), _jsx(ChevronRightIcon, { size: 14 })] }))] })) }), _jsx(MenuContext.Provider, { value: { activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: isParent ? restoreFocus : !isNested, children: _jsx(FloatingComponent, { ...getFloatingProps(), ref: refs.setFloating, style: { ...props.style, ...floatingStyles }, className: css("isolate z-tooltip flex max-h-80 flex-col items-start overflow-y-auto rounded-lg border border-floating-border bg-floating-background text-left shadow-shadow-floating outline-hidden", floatingClassName), children: children }) }) })) }) })] }));
 });
 export const MenuItem = React.forwardRef(({ title, Right, disabled, children, ...props }, forwardedRef) => {
     const menu = useContext(MenuContext);

package/dist/components/floating/modal.js

@@ -152,7 +152,7 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
             drag: type === "sheet" ? "y" : "x",
         }
         : commonAnimated;
-    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: floating.refs.setReference, ...interactions.getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: floating.refs.setReference, ...interactions.getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(AnimatePresence, { mode: "wait", propagate: true, presenceAffectsLayout: true, initial: false, children: open ? (_jsx(FloatingOverlay, { lockScroll: true, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { guards: true, visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, ...animationProps, ...(title
+    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: floating.refs.setReference, ...interactions.getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: floating.refs.setReference, ...interactions.getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(AnimatePresence, { mode: "wait", propagate: true, presenceAffectsLayout: true, initial: false, children: open ? (_jsx(FloatingOverlay, { lockScroll: true, className: css(`inset-0 isolate z-overlay h-dvh overflow-clip! bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { guards: true, visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, ...animationProps, ...(title
                                     ? {
                                         "aria-labelledby": headingId,
                                         "aria-describedby": descriptionId,

package/dist/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;AASzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,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,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGAkWxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AASzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,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,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGAiWxB,CAAC"}

package/dist/components/form/autocomplete.js

@@ -213,7 +213,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             }
                         }
                     },
-                }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", 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", "text-base group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.div, { ...getFloatingProps({
+                }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", 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-hidden transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "text-base group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.div, { ...getFloatingProps({
                             ref: mergeRefs(removeScrollRef, refs.setFloating),
                             style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy },
                         }), initial: false, "data-floating": "true", animate: { height: isEmpty ? "auto" : h }, className: "isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating ease-in-out", onAnimationComplete: () => {

package/dist/components/form/checkbox.js

@@ -3,5 +3,5 @@ import { forwardRef } from "react";
 import { css } from "../../lib/dom";
 export const Checkbox = forwardRef(({ children, asTask = false, labelClassName, loading, error, className = "", size, container, ...props }, ref) => {
     const d = props.disabled || loading;
-    return (_jsxs("label", { "aria-disabled": d, "data-disabled": d, "data-task": asTask, "data-component": "checkbox", 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, disabled: d, 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 })] }));
+    return (_jsxs("label", { "aria-disabled": d, "data-disabled": d, "data-task": asTask, "data-component": "checkbox", className: css("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", asTask ? "checkbox-task-item" : "", container), children: [_jsx("input", { ...props, ref: ref, disabled: d, type: "checkbox", "data-task": asTask, className: css("form-checkbox mr-2 inline-block size-4 appearance-none rounded-sm 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/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":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,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,GAAG,IAAI,QAAQ,CAC/E,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,EAChF,UAAU,CACb,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,EAAE,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,GAAG,EACxH,SAAS,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,EAChD,aAAa,OAAO,GAAG,UAAU,EACjC,cAAc,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACrC,WAAW,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,4CAuGtC,CAAC"}
+{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,GAAG,IAAI,QAAQ,CAC/E,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,EAChF,UAAU,CACb,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,EAAE,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,GAAG,EACxH,SAAS,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,EAChD,aAAa,OAAO,GAAG,UAAU,EACjC,cAAc,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACrC,WAAW,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,4CAsGtC,CAAC"}

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

@@ -3,10 +3,11 @@ 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";
+import { useInputId } from "../../hooks/use-input-id";
 export const createFreeText = (Element, elementName, defaultProps, register) => {
     const FreeText = forwardRef(({ info, left, next, error, right, container, rightLabel, interactive, optionalText, type = "text", labelClassName, feedback = null, hideLeft = false, loading, ...props }, ref) => {
         const Render = Element;
-        const id = props.id ?? props.name;
+        const id = useInputId(props.id, props.name);
         const inputRef = useRef(null);
         useEffect(() => {
             if (inputRef.current === null)
@@ -34,7 +35,7 @@ export const createFreeText = (Element, elementName, defaultProps, register) =>
                 input.removeEventListener("keydown", goNextInputImpl);
             };
         }, []);
-        return (_jsx(InputField, { ...defaultProps, info: info, left: left, error: error, right: right, loading: loading, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, title: props.title, container: css(container, defaultProps.container), rightLabel: rightLabel, disabled: props.disabled, interactive: interactive, required: props.required, componentName: elementName, id: props.name || props.id, optionalText: optionalText, labelClassName: labelClassName, placeholder: props.placeholder, 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-base 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", "disabled:cursor-not-allowed disabled:text-disabled", props.className) }) }));
+        return (_jsx(InputField, { ...defaultProps, info: info, left: left, error: error, right: right, loading: loading, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, title: props.title, container: css(container, defaultProps.container), rightLabel: rightLabel, disabled: props.disabled, interactive: interactive, required: props.required, componentName: elementName, id: props.name || props.id, optionalText: optionalText, labelClassName: labelClassName, placeholder: props.placeholder, 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-base", "outline-hidden transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", props.className) }) }));
     });
     return FreeText;
 };

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

@@ -6,12 +6,12 @@ import { useTranslations } from "../../hooks/use-translations";
 import { useTweaks } from "../../hooks/use-tweaks";
 import { css } from "../../lib/dom";
 import { Tooltip } from "../floating/tooltip";
-export const InputFeedback = ({ reportStatus, id, hideLeft = false, className, info, children, title }) => (_jsxs("span", { 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-disabled:text-disabled 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", "aria-description": typeof info === "string" ? info : undefined, "aria-describedby": typeof info === "string" ? undefined : id ? `tooltip-info-content-${id}` : undefined, title: _jsx("span", { className: "cursor-help", children: _jsx(InfoIcon, { className: "aspect-square size-3", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }) }), children: _jsx("div", { id: id ? `tooltip-info-content-${id}` : undefined, className: "w-full max-w-48 whitespace-break-spaces break-words", children: info }) })) : null, reportStatus ? (_jsxs("span", { className: "flex h-3 min-w-6 items-center", 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, id, hideLeft = false, className, info, children, title }) => (_jsxs("span", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex gap-1 items-center transition-colors group-disabled:text-disabled input-field-label group-hover:text-primary group-focus-within:text-primary", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex gap-1 justify-center items-center", children: [info ? (_jsx(Tooltip, { as: "button", type: "button", "aria-description": typeof info === "string" ? info : undefined, "aria-describedby": typeof info === "string" ? undefined : id ? `tooltip-info-content-${id}` : undefined, title: _jsx("span", { className: "cursor-help", children: _jsx(InfoIcon, { className: "aspect-square size-3", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }) }), children: _jsx("div", { id: id ? `tooltip-info-content-${id}` : undefined, className: "w-full break-words max-w-48 whitespace-break-spaces", children: info }) })) : null, reportStatus ? (_jsxs("span", { className: "flex items-center gap-1 h-3 min-w-6", children: [_jsx(CheckCircle, { size: 16, strokeWidth: 1, "aria-hidden": "true", absoluteStrokeWidth: true, className: "input-field-icon input-field-success-icon" }), _jsx(XCircle, { size: 16, strokeWidth: 1, "aria-hidden": "true", absoluteStrokeWidth: true, className: "input-field-icon input-field-error-icon" })] })) : null] })) : null] })), children] }));
 export const InputField = forwardRef(({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, componentName, placeholder, hideLeft = false, required, disabled, reportStatus, }, ref) => {
     const tweaks = useTweaks();
     const reportStatusDefault = reportStatus !== undefined ? reportStatus : tweaks.input.iconFeedback;
     const ID = id ?? name;
     const translation = useTranslations();
     const optionalText = _optionalText ?? translation.inputOptionalLabel;
-    return (_jsxs("fieldset", { ref: ref, form: form, disabled: disabled, "data-error": !!error, "aria-disabled": disabled, "data-component": componentName, "data-interactive": !!interactive, className: css("group flex min-h-0 max-w-full min-w-0 flex-col items-start", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "text-field-label max-w-full w-full relative inline-flex cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger", children: [_jsx(InputFeedback, { info: info, hideLeft: hideLeft, reportStatus: reportStatusDefault, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? (_jsx("span", { "aria-disabled": disabled, className: "transition-colors text-opacity-70 aria-disabled:text-disabled group-focus-within:text-primary group-hover:text-primary", 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-disabled:border-disabled 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 whitespace-pre-wrap text-wrap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:flex group-error:flex 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", { ref: ref, form: form, disabled: disabled, "data-error": !!error, "aria-disabled": disabled, "data-component": componentName, "data-interactive": !!interactive, className: css("group flex min-h-0 max-w-full min-w-0 flex-col items-start input-field-group", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex relative flex-row flex-wrap gap-1 justify-between w-full max-w-full transition-colors cursor-text empty:hidden text-field-label group-disabled:cursor-not-allowed input-field-label", children: [_jsx(InputFeedback, { info: info, hideLeft: hideLeft, reportStatus: reportStatusDefault, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? (_jsx("span", { "aria-disabled": disabled, className: "text-opacity-70 transition-colors aria-disabled:text-disabled group-hover:text-primary group-focus-within:text-primary", children: optionalText })) : null, rightLabel ? _jsx(Fragment, { children: rightLabel }) : null] })) : null }), _jsxs("div", { className: `group input-field-border relative flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border bg-transparent transition-colors group-hover:border-primary group-disabled:border-disabled ${labelClassName}`, children: [left ? _jsx("span", { className: "flex flex-nowrap gap-1 pl-2 whitespace-nowrap", children: left }) : null, children, right ? _jsx("span", { className: "flex flex-nowrap gap-2 pr-2 whitespace-nowrap", children: right }) : null] })] }), _jsx("p", { className: "mt-input-gap input-field-error-feedback whitespace-pre-wrap text-wrap text-xs", children: error }), _jsx("p", { className: "mt-input-gap text-secondary text-xs empty:mt-0 empty:hidden input-field-success-feedback", children: feedback })] }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AASlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA0DF,eAAO,MAAM,WAAW,wGAuavB,CAAC"}
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AASlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA0DF,eAAO,MAAM,WAAW,wGAsavB,CAAC"}

package/dist/components/form/multi-select.js

@@ -210,7 +210,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                     id: `${id}-shadow`,
                     name: `${id}-shadow`,
                     ref: refs.setReference,
-                }), tabIndex: 0, role: "button", "data-name": id, "data-target": id, "data-shadow": "true", "data-error": !!error, "aria-autocomplete": "list", "data-value": values.join(","), className: css("input placeholder-input-mask group h-input-height w-full", "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", "group-focus-within:border-primary group-hover:border-primary", "flex flex-row items-center gap-2 whitespace-nowrap text-left", "max-w-full overflow-x-auto truncate overflow-ellipsis", props.className), children: [values.length > 0 ? null : _jsx("li", { className: "text-input-placeholder", children: props.placeholder }), _jsx(OverflowControl, { label: selectedLabel, children: tags })] }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || values || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: true, children: _jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs("div", { ...getFloatingProps({
+                }), tabIndex: 0, role: "button", "data-name": id, "data-target": id, "data-shadow": "true", "data-error": !!error, "aria-autocomplete": "list", "data-value": values.join(","), className: css("input placeholder-input-mask group h-input-height w-full", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-hidden transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-focus-within:border-primary group-hover:border-primary", "flex flex-row items-center gap-2 whitespace-nowrap text-left", "max-w-full overflow-x-auto truncate text-ellipsis", props.className), children: [values.length > 0 ? null : _jsx("li", { className: "text-input-placeholder", children: props.placeholder }), _jsx(OverflowControl, { label: selectedLabel, children: tags })] }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || values || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: true, children: _jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs("div", { ...getFloatingProps({
                                 ref: refs.setFloating,
                                 style: {
                                     ...transitions.styles,
@@ -219,7 +219,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                                     left: x,
                                     height: h - (values.length === 0 ? 65 : 30),
                                 },
-                            }), "data-floating": "true", className: "shadow-floating isolate z-floating m-0 max-h-96 w-full origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground", children: [_jsx("input", { autoFocus: true, value: shadow, onChange: onChange, title: props.title, placeholder: translation.multiSelectInnerPlaceholder, className: "input placeholder-input-mask group mb-1 h-10 w-full flex-1 rounded border-b border-input-border bg-transparent px-input-x py-input-y outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", onKeyDown: (event) => {
+                            }), "data-floating": "true", className: "shadow-floating isolate z-floating m-0 max-h-96 w-full origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground", children: [_jsx("input", { autoFocus: true, value: shadow, onChange: onChange, title: props.title, placeholder: translation.multiSelectInnerPlaceholder, className: "input placeholder-input-mask group mb-1 h-10 w-full flex-1 rounded-sm border-b border-input-border bg-transparent px-input-x py-input-y outline-hidden transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", onKeyDown: (event) => {
                                         if (event.key === "ArrowDown") {
                                             let next = index + 1;
                                             if (next > displayList.length - 1)

package/dist/components/form/select.js

@@ -27,5 +27,5 @@ export const Select = forwardRef(({ required = true, options, info, selectContai
         };
     }, []);
     const onClickLabel = () => inputRef.current?.focus();
-    return (_jsx(InputField, { info: info, left: left, error: error, form: props.form, loading: loading, 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: _jsxs("label", { htmlFor: id, children: [right, _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, required: required, ref: mergeRefs(ref, inputRef), "data-selected": !!props.value || false, title: typeof props.title === "string" ? props.title : 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) => (_createElement("option", { ...option, value: option.value, children: option.label ?? option.value, key: `${id}-select-option-${option.value}` })))] }) }));
+    return (_jsx(InputField, { info: info, left: left, error: error, form: props.form, loading: loading, 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: _jsxs("label", { htmlFor: id, children: [right, _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, required: required, ref: mergeRefs(ref, inputRef), "data-selected": !!props.value || false, title: typeof props.title === "string" ? props.title : 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-hidden transition-colors", "data-[selected=false]:text-input-placeholder", props.className), children: [_jsx("option", { value: "", disabled: true, hidden: true, children: props.placeholder }), options.map((option) => (_createElement("option", { ...option, value: option.value, children: option.label ?? option.value, key: `${id}-select-option-${option.value}` })))] }) }));
 });

package/dist/components/form/slider.js

@@ -25,7 +25,7 @@ const Thumb = (props) => {
         observer.observe(html, { attributeFilter: ["aria-valuenow"] });
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Tooltip, { title: "", ref: ref, as: RadixSlider.Thumb, enabled: props.tooltip, className: "block rounded-full bg-input-switch size-5 cursor-grab border-1 border-input-border shadow-shadow-floating active:cursor-grabbing", children: float }));
+    return (_jsx(Tooltip, { title: "", ref: ref, as: RadixSlider.Thumb, enabled: props.tooltip, className: "block rounded-full bg-input-switch size-5 cursor-grab border border-input-border shadow-shadow-floating active:cursor-grabbing", children: float }));
 };
 export const Slider = (props) => {
     const { tooltip, className, defaultValue, value, ...restProps } = props;

package/dist/components/form/switch.js

@@ -32,5 +32,5 @@ export const Switch = forwardRef(({ children, loading, container, error, ...prop
             innerRef.current.dispatchEvent(new Event("change", { bubbles: true }));
         }
     };
-    return (_jsxs("fieldset", { className: css("flex flex-col flex-wrap justify-center", container), "data-component": "switch", disabled: props.disabled || loading, children: [_jsxs("span", { className: "flex flex-row flex-wrap items-center", children: [_jsx("input", { ...props, hidden: true, ref: innerRef, type: "checkbox", checked: checked, id: props.id || id, "data-trigger": "change", "data-checked": checked, disabled: props.disabled || loading, onChange: (e) => setInnerChecked(e.target.checked) }), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, disabled: props.disabled || loading, 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-col flex-wrap justify-center", container), "data-component": "switch", disabled: props.disabled || loading, children: [_jsxs("span", { className: "flex flex-row flex-wrap items-center", children: [_jsx("input", { ...props, hidden: true, ref: innerRef, type: "checkbox", checked: checked, id: props.id || id, "data-trigger": "change", "data-checked": checked, disabled: props.disabled || loading, onChange: (e) => setInnerChecked(e.target.checked) }), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, disabled: props.disabled || loading, className: "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-hidden 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-sm 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/components/table/index.js

@@ -35,7 +35,7 @@ const TRow = React.forwardRef(({ context, item, ...props }, ref) => {
 });
 const TFoot = React.forwardRef((props, ref) => {
     if (props.context.loadingMore) {
-        return (_jsx("tfoot", { ...props, ref: ref, className: "bg-card-background", children: _jsx("tr", { role: "row", className: "bg-card-background", children: _jsx("td", { colSpan: 999, className: "px-2 h-14 bg-card-background", children: _jsx("span", { className: "block w-full h-2 rounded opacity-60 animate-pulse bg-foreground" }) }) }) }));
+        return (_jsx("tfoot", { ...props, ref: ref, className: "bg-card-background", children: _jsx("tr", { role: "row", className: "bg-card-background", children: _jsx("td", { colSpan: 999, className: "px-2 h-14 bg-card-background", children: _jsx("span", { className: "block w-full h-2 rounded-sm opacity-60 animate-pulse bg-foreground" }) }) }) }));
     }
     return null;
 });

package/dist/components/table/metadata.js

@@ -3,7 +3,7 @@ import { Filter } from "./filter";
 import { Group } from "./group";
 import { Sort } from "./sort";
 import { valueFromType } from "./table-lib";
-export const Metadata = (props) => (_jsx("header", { className: "min-w-full mb-1", children: _jsxs("div", { className: "flex flex-wrap min-w-full items-center justify-between gap-x-4 gap-y-1", children: [_jsxs("div", { className: "flex w-fit items-centeend gap-4 whitespace-nowrap py-2", children: [_jsx("span", { children: _jsx(Filter, { cols: props.cols, options: props.options, filters: props.filters, set: props.setFilters }) }), _jsx("span", { children: _jsx(Sort, { options: props.options, cols: props.cols, sorters: props.sorters, set: props.setSorters }) }), _jsx("span", { children: _jsx(Group, { rows: props.rows, groups: props.groups, setGroups: props.setGroups, options: props.options, cols: props.cols }) })] }), _jsx("ul", { className: "flex flex-wrap w-full flex-1 flex-grow flex-row items-center md:justify-end gap-4", children: props.filters.map((x) => (_jsxs("li", { className: "flex gap-1 items-center rounded-xl border border-card-border px-4 py-0.5", children: [_jsxs("span", { children: [_jsx("span", { className: "size-3 mr-2 aspect-square bg-primary inline-block rounded-full", "aria-hidden": "true" }), x.label, " ", x.operation.label.toLowerCase(), ":"] }), _jsxs("div", { className: "relative w-min min-w-[1ch]", children: [_jsx("span", { "aria-hidden": "true", className: "invisible whitespace-pre p-0", children: x.value || " " }), _jsx("input", { type: x.type, value: x.value, className: "absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", onChange: (e) => {
+export const Metadata = (props) => (_jsx("header", { className: "min-w-full mb-1", children: _jsxs("div", { className: "flex flex-wrap min-w-full items-center justify-between gap-x-4 gap-y-1", children: [_jsxs("div", { className: "flex w-fit items-centeend gap-4 whitespace-nowrap py-2", children: [_jsx("span", { children: _jsx(Filter, { cols: props.cols, options: props.options, filters: props.filters, set: props.setFilters }) }), _jsx("span", { children: _jsx(Sort, { options: props.options, cols: props.cols, sorters: props.sorters, set: props.setSorters }) }), _jsx("span", { children: _jsx(Group, { rows: props.rows, groups: props.groups, setGroups: props.setGroups, options: props.options, cols: props.cols }) })] }), _jsx("ul", { className: "flex flex-wrap w-full flex-1 grow flex-row items-center md:justify-end gap-4", children: props.filters.map((x) => (_jsxs("li", { className: "flex gap-1 items-center rounded-xl border border-card-border px-4 py-0.5", children: [_jsxs("span", { children: [_jsx("span", { className: "size-3 mr-2 aspect-square bg-primary inline-block rounded-full", "aria-hidden": "true" }), x.label, " ", x.operation.label.toLowerCase(), ":"] }), _jsxs("div", { className: "relative w-min min-w-[1ch]", children: [_jsx("span", { "aria-hidden": "true", className: "invisible whitespace-pre p-0", children: x.value || " " }), _jsx("input", { type: x.type, value: x.value, className: "absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-hidden [appearance:textfield] empty:after:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", onChange: (e) => {
                                         const value = valueFromType(e.target);
                                         props.setFilters((prev) => prev.map((item) => x.id === item.id
                                             ? {

package/dist/components/table/thead.js

@@ -42,7 +42,7 @@ 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);
-    return (_jsxs(Reorder.Item, { ...props.header.thProps, as: "th", ref: dragRef, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, role: "columnheader", "aria-sort": ariaSort, value: props.header, "aria-busy": props.loading, "data-colid": props.header.id, whileDrag: { cursor: "grabbing" }, className: `relative min-w-0 cursor-grab font-medium ${props.header.thProps?.className ?? ""}`, children: [_jsx("span", { className: `flex h-full items-center justify-between bg-table-header px-2 py-4 ${props.isLast ? "rounded-tr-lg" : ""} ${props.index === 0 ? "rounded-tl-lg" : ""}`, 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", children: [translation.tableFilterDropdownTitleUnique, " ", _jsx("span", { className: "font-medium", children: label })] }), children: _jsxs("ul", { className: "font-medium", children: [ownFilters.length === 0 ? null : (_jsx(Fragment, { 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] }) }), props.isLast ? 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", title: props.header.id, dragConstraints: dragConstraints, className: "absolute -right-[0.5px] top-0 z-calendar block h-full w-[1px] cursor-col-resize bg-table-border hover:w-1.5 hover:bg-primary active:w-1.5 active:bg-primary", onClick: (e) => void e.currentTarget.focus(), onKeyDown: (e) => {
+    return (_jsxs(Reorder.Item, { ...props.header.thProps, as: "th", ref: dragRef, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, role: "columnheader", "aria-sort": ariaSort, value: props.header, "aria-busy": props.loading, "data-colid": props.header.id, whileDrag: { cursor: "grabbing" }, className: `relative min-w-0 cursor-grab font-medium ${props.header.thProps?.className ?? ""}`, children: [_jsx("span", { className: `flex h-full items-center justify-between bg-table-header px-2 py-4 ${props.isLast ? "rounded-tr-lg" : ""} ${props.index === 0 ? "rounded-tl-lg" : ""}`, 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", children: [translation.tableFilterDropdownTitleUnique, " ", _jsx("span", { className: "font-medium", children: label })] }), children: _jsxs("ul", { className: "font-medium", children: [ownFilters.length === 0 ? null : (_jsx(Fragment, { 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] }) }), props.isLast ? 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", title: props.header.id, dragConstraints: dragConstraints, className: "absolute -right-[0.5px] top-0 z-calendar block h-full w-px cursor-col-resize bg-table-border hover:w-1.5 hover:bg-primary active:w-1.5 active:bg-primary", onClick: (e) => void e.currentTarget.focus(), onKeyDown: (e) => {
                     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
                         if (th.current === null)
                             return;

package/dist/flow/flow.js

@@ -23,7 +23,7 @@ const Sidebar = (props) => {
     return (_jsx("aside", { className: "absolute top-0 right-0 p-2 rounded-lg border shadow min-w-24 border-floating-border bg-background", children: _jsx("ul", { className: "space-y-2", children: props.items.map((item) => (_jsxs("li", { draggable: true, className: "flex gap-1.5 items-center text-lg hover:cursor-grab hover:text-primary", onDragStart: (event) => onDragStart(event, item), children: [item.Icon ? _jsx(item.Icon, { size: 16 }) : null, item.title] }, `${item.id}-flow-side-item`))) }) }));
 };
 const Handlers = (props) => {
-    return (_jsxs(Fragment, { children: [_jsx(Handle, { id: `${props.id}-handle-top`, type: props.type, position: Position.Top, className: "h-1 w-10 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-left`, type: props.type, position: Position.Left, className: "h-4 w-1 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-right`, type: props.type, position: Position.Right, className: "h-4 w-1 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-bottom`, type: props.type, position: Position.Bottom, className: "h-1 w-10 !bg-primary" })] }));
+    return (_jsxs(Fragment, { children: [_jsx(Handle, { id: `${props.id}-handle-top`, type: props.type, position: Position.Top, className: "h-1 w-10 bg-primary!" }), _jsx(Handle, { id: `${props.id}-handle-left`, type: props.type, position: Position.Left, className: "h-4 w-1 bg-primary!" }), _jsx(Handle, { id: `${props.id}-handle-right`, type: props.type, position: Position.Right, className: "h-4 w-1 bg-primary!" }), _jsx(Handle, { id: `${props.id}-handle-bottom`, type: props.type, position: Position.Bottom, className: "h-1 w-10 bg-primary!" })] }));
 };
 const Input = memo((node) => {
     return (_jsxs("div", { className: css("relative flex border min-h-10 min-w-24 items-center justify-center rounded-lg bg-floating-background px-4 py-2 shadow-shadow-floating", node.selected ? "border-primary" : "", "border-floating-border"), children: [_jsx(Handlers, { id: node.data.id, type: "source" }), node.data.Item ? _jsx(node.data.Item, { ...node }) : _jsx("h3", { className: "text-center", children: node.data.title })] }));

package/dist/hooks/use-input-id.d.ts

@@ -0,0 +1,4 @@
+type S = string | undefined;
+export declare const useInputId: (id: S, name: S) => string;
+export {};
+//# sourceMappingURL=use-input-id.d.ts.map

package/dist/hooks/use-input-id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-id.d.ts","sourceRoot":"","sources":["../../src/hooks/use-input-id.ts"],"names":[],"mappings":"AAEA,KAAK,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5B,eAAO,MAAM,UAAU,GAAI,IAAI,CAAC,EAAE,MAAM,CAAC,WAGxC,CAAA"}

package/dist/hooks/use-input-id.js

@@ -0,0 +1,5 @@
+import { useId } from "react";
+export const useInputId = (id, name) => {
+    const same = useId();
+    return id || name || same;
+};