@g4rcez/components 0.2.0 → 0.2.2

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

@@ -1,32 +1,10 @@
-import React from "react";
-declare const typeMap: {
-    tag: () => null;
-    custom: () => null;
-    record: ({ item }: {
-        item: TimelineItemProps;
-    }) => import("react/jsx-runtime").JSX.Element;
+import { ComponentProps, ElementType, PropsWithChildren } from "react";
+import { PolymorphicProps } from "../core/polymorph";
+export declare const TimelineItem: {
+    (props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    Icon(props: PropsWithChildren<ComponentProps<"header">>): import("react/jsx-runtime").JSX.Element;
+    Body<T extends ElementType = "section">(props: PropsWithChildren<PolymorphicProps<object, T>>): import("react/jsx-runtime").JSX.Element;
+    Right<T extends ElementType = "button">(props: PolymorphicProps<object, T>): import("react/jsx-runtime").JSX.Element;
 };
-export type TimelineItemType = keyof typeof typeMap;
-export type TimelineItemProps = {
-    id: string | number;
-    date: Date;
-    type: TimelineItemType;
-    avatar?: {
-        img?: string;
-        name: string;
-        profile?: string;
-    };
-    text?: string;
-    custom?: React.FC<{
-        item: TimelineItemProps;
-    }>;
-};
-export type TimelineProps = {
-    items: TimelineItemProps[];
-    Custom?: React.FC<{
-        item: TimelineItemProps;
-    }>;
-};
-export declare const Timeline: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Timeline: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=timeline.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/display/timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,QAAA,MAAM,OAAO;;;;cA4B+B,iBAAiB;;CAAI,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,OAAO,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,gBAAgB,CAAC;IACvB,MAAM,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,iBAAiB,CAAA;KAAE,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,iBAAiB,CAAA;KAAE,CAAC,CAAA;CAAE,CAAC;AAE3G,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAyB5C,CAAC"}
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/display/timeline.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,eAAO,MAAM,YAAY;YAAW,iBAAiB;gBAOJ,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAW9C,CAAC,SAAS,WAAW,qBAAqB,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;UAQtF,CAAC,SAAS,WAAW,oBAAoB,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC;CArBnH,CAAC;AA6BF,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,4CAIhD,CAAC"}

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

@@ -1,17 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MessagesSquareIcon } from "lucide-react";
-import { Fragment } from "react";
-const typeMap = {
-    tag: () => null,
-    custom: () => null,
-    record: ({ item }) => (_jsxs(Fragment, { children: [_jsxs("div", { className: "relative", children: [_jsx("img", { src: item.avatar?.img, alt: item.avatar?.name, className: "flex aspect-square size-12 items-center justify-center rounded-full bg-primary-hover" }), _jsx("span", { className: "absolute -bottom-0.5 -right-1 rounded-full rounded-tl bg-card-background px-0.5 py-px", children: _jsx(MessagesSquareIcon, { "aria-hidden": "true", className: "aspect-square size-5" }) })] }), _jsxs("div", { className: "min-w-0 flex-1 text-foreground", children: [_jsxs("div", { children: [_jsx("a", { href: item.avatar?.profile, className: "text-base font-medium text-primary", children: item.avatar?.name }), _jsxs("p", { className: "mt-0.5 text-sm", children: ["Commented ", item.date.toISOString()] })] }), _jsx("div", { className: "mt-2 text-wrap text-sm", children: _jsx("p", { children: item.text }) })] })] })),
+import { css } from "../../lib/dom";
+import { Polymorph } from "../core/polymorph";
+export const TimelineItem = (props) => (_jsxs("li", { "data-component": "timeline-item", className: "relative pb-12", role: "listitem", children: [_jsx("span", { "aria-hidden": "true", className: "absolute left-6 top-8 -ml-px h-full w-0.5 bg-card-border" }), _jsx("div", { className: "relative flex items-stretch justify-start space-x-3", children: props.children })] }));
+TimelineItem.Icon = function TimelineIcon(props) {
+    return (_jsx("header", { ...props, className: css("flex size-12 items-center justify-center rounded-full bg-primary p-2 text-primary-foreground", props.className), children: props.children }));
 };
-export const Timeline = (props) => {
-    return (_jsx("div", { className: "flow-root", children: _jsx("ul", { role: "list", className: "-mb-8", children: props.items.map((item, index) => {
-                const Render = typeMap[item.type] ?? null;
-                if (Render === null && props.Custom) {
-                    return _jsx(props.Custom, { item: item });
-                }
-                return (_jsx("li", { children: _jsxs("div", { className: "relative pb-8", children: [index !== props.items.length - 1 ? (_jsx("span", { "aria-hidden": "true", className: "absolute left-5 top-5 -ml-px h-full w-0.5 bg-card-border" })) : null, _jsx("div", { className: "relative flex items-start space-x-3", children: _jsx(Render, { item: item }) })] }) }, item.id));
-            }) }) }));
+TimelineItem.Body = function TimelineItemBody(props) {
+    return (_jsx(Polymorph, { ...props, className: css("min-w-0 flex-1", props.className), children: props.children }));
 };
+TimelineItem.Right = function TimelineItemRight(props) {
+    return (_jsx("footer", { className: "flex gap-6 self-stretch px-4 align-baseline", children: _jsx(Polymorph, { ...props, type: "button" }) }));
+};
+export const Timeline = (props) => (_jsx("ul", { "data-component": "timeline", role: "list", className: "flow-root [&>li:last-child>span[aria-hidden=true]]:hidden", children: props.children }));

package/dist/src/components/floating/dropdown.js

@@ -32,7 +32,7 @@ export const Dropdown = (props) => {
     });
     const click = useClick(context);
     const dismiss = useDismiss(context);
-    const role = useRole(context);
+    const role = useRole(context, { role: "tooltip" });
     const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
-    return (_jsxs(Fragment, { children: [_jsx("button", { ref: refs.setReference, ...getReferenceProps(props.buttonProps), type: "button", children: props.trigger }), open && (_jsx(FloatingPortal, { preserveTabOrder: true, id: `${headingId}-portal`, children: _jsx(FloatingFocusManager, { guards: true, restoreFocus: true, returnFocus: true, visuallyHiddenDismiss: true, context: context, modal: false, children: _jsxs("div", { className: "relative isolate z-floating min-w-96 rounded-lg border border-floating-border bg-floating-background p-6 shadow-2xl", ref: refs.setFloating, style: floatingStyles, "aria-labelledby": headingId, ...getFloatingProps(), children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-floating-background stroke-floating-border" }), _jsx("header", { className: "mb-2", children: _jsx("h3", { className: "text-left text-2xl font-medium leading-snug tracking-wide", children: props.title }) }), props.children] }) }) }))] }));
+    return (_jsxs(Fragment, { children: [_jsx("button", { ref: refs.setReference, ...getReferenceProps(props.buttonProps), type: "button", children: props.trigger }), open && (_jsx(FloatingPortal, { preserveTabOrder: true, id: `${headingId}-portal`, children: _jsx(FloatingFocusManager, { guards: true, restoreFocus: true, returnFocus: true, visuallyHiddenDismiss: true, context: context, modal: false, children: _jsxs("div", { className: "relative isolate z-floating min-w-96 rounded-lg border border-floating-border bg-floating-background p-4 shadow-2xl", ref: refs.setFloating, style: floatingStyles, "aria-labelledby": headingId, ...getFloatingProps(), children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-floating-background stroke-floating-border" }), _jsx("header", { className: "mb-2", children: _jsx("h3", { className: "text-left text-2xl font-medium leading-snug tracking-wide", children: props.title }) }), props.children] }) }) }))] }));
 };

package/dist/src/components/floating/expand.d.ts

@@ -4,6 +4,8 @@ import { Label, Override } from "../../types";
 import { ButtonProps } from "../core/button";
 export type ExpandProps = Override<ButtonProps<typeof motion.button>, {
     trigger: Label;
+    open?: boolean;
+    disabled?: boolean;
 }>;
 export declare const Expand: (props: PropsWithChildren<ExpandProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=expand.d.ts.map

package/dist/src/components/floating/expand.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/expand.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAU,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE;IAAE,OAAO,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAE1F,eAAO,MAAM,MAAM,GAAI,OAAO,iBAAiB,CAAC,WAAW,CAAC,4CA4C3D,CAAC"}
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/expand.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAU,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,WAAW,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,EACjC;IACI,OAAO,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,OAAO,iBAAiB,CAAC,WAAW,CAAC,4CAmD3D,CAAC"}

package/dist/src/components/floating/expand.js

@@ -2,14 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
 import { AnimatePresence, motion } from "motion/react";
-import { useId, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Button } from "../core/button";
 export const Expand = (props) => {
     const root = useRef(null);
     const id = useId();
     const wrapperId = `${id}:wrapper`;
     const titleId = `${id}:title`;
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(props.open ?? false);
+    useEffect(() => {
+        setOpen(props.open ?? false);
+    }, [props.open]);
     const { context, refs } = useFloating({
         transform: true,
         open: open !== null,
@@ -17,9 +20,13 @@ export const Expand = (props) => {
         onOpenChange: setOpen,
         strategy: "absolute",
     });
-    const click = useClick(context);
-    const role = useRole(context);
-    const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: true });
+    const click = useClick(context, { enabled: props.disabled ?? true });
+    const role = useRole(context, { role: "tooltip" });
+    const dismiss = useDismiss(context, {
+        escapeKey: true,
+        referencePress: true,
+        outsidePress: true,
+    });
     const { getFloatingProps, getReferenceProps } = useInteractions([click, role, dismiss]);
     return (_jsxs("div", { className: "relative inline-flex items-center justify-center", ref: root, children: [_jsx(Button, { ...getReferenceProps(props), as: motion.button, layoutId: wrapperId, ref: refs.setReference, size: "small", onClick: () => setOpen(true), children: _jsx(motion.span, { layoutId: titleId, children: props.trigger }) }), _jsx(AnimatePresence, { children: open ? (_jsx(FloatingPortal, { root: root, children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsx(motion.div, { ...getFloatingProps(), ref: refs.setFloating, layoutId: wrapperId, className: "absolute -left-1/4 -top-3/4", children: props.children }) }) })) : null })] }));
 };

package/dist/src/components/floating/menu.js

@@ -36,7 +36,7 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
         placement: isNested ? "right" : "bottom-start",
         middleware: [offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }), flip(), shift()],
     });
-    const role = useRole(context, { role: "menu", enabled: true });
+    const role = useRole(context, { role: "menu" });
     const dismiss = useDismiss(context, { bubbles: true });
     const hoverModule = useHover(context, {
         move: false,
@@ -102,7 +102,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: !isNested, children: _jsx(FloatingComponent, { ...getFloatingProps(), ref: refs.setFloating, style: { ...props.style, ...floatingStyles }, className: css("isolate z-tooltip flex flex-col items-start rounded-lg border border-floating-border bg-floating-background text-left shadow-xl 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: !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-xl outline-none", floatingClassName), children: children }) }) })) }) })] }));
 });
 export const MenuItem = React.forwardRef(({ title, Right, disabled, children, ...props }, forwardedRef) => {
     const menu = useContext(MenuContext);

package/dist/src/components/floating/modal.d.ts

@@ -1,6 +1,8 @@
 import { HTMLMotionProps } from "motion/react";
 import React, { PropsWithChildren } from "react";
 import { Label, Override } from "../../types";
+type DialogType = "dialog" | "drawer" | "sheet";
+type DrawerPosition = "left" | "right";
 export type ModalProps = Override<HTMLMotionProps<"div">, ({
     title: Label;
     ariaTitle?: string;
@@ -13,15 +15,16 @@ export type ModalProps = Override<HTMLMotionProps<"div">, ({
     asChild?: boolean;
     layoutId?: string;
     resizer?: boolean;
+    type?: DialogType;
     className?: string;
     closable?: boolean;
     forceType?: boolean;
     overlayClassName?: string;
+    position?: DrawerPosition;
     overlayClickClose?: boolean;
-    position?: "left" | "right";
     trigger?: Label | React.FC<any>;
-    type?: "dialog" | "drawer" | "sheet";
     onChange: (nextState: boolean) => void;
 }>;
 export declare const Modal: ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer, closable, forceType, overlayClassName, type: _type, position: propsPosition, overlayClickClose, ariaTitle, ...props }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=modal.d.ts.map

package/dist/src/components/floating/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AACnI,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAIlE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2D9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACJ,CAAC;AAoEF,eAAO,MAAM,KAAK,GAAI,kNAmBnB,iBAAiB,CAAC,UAAU,CAAC,4CA+G/B,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AACnI,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAIlE,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2DnD,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhD,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACJ,CAAC;AA2EF,eAAO,MAAM,KAAK,GAAI,kNAmBnB,iBAAiB,CAAC,UAAU,CAAC,4CA8G/B,CAAC"}

package/dist/src/components/floating/modal.js

@@ -28,9 +28,9 @@ const animations = {
         exit: { opacity: 0.1, translateY: "50%", animationDuration, originY: "bottom" },
     },
     dialog: {
+        exit: { opacity: 0, scale: 0.97, animationDuration },
         initial: { opacity: 0, scale: 0.95, animationDuration },
         enter: { opacity: 1, scale: [1.05, 1], animationDuration },
-        exit: { opacity: 0, scale: 0.97, animationDuration },
     },
 };
 const variants = cva("z-floating border border-card-border ring-0 outline-0 appearance-none flex flex-col gap-4 flex-nowrap min-w-xs bg-floating-background", {
@@ -57,7 +57,8 @@ const Draggable = (props) => {
                 const div = props.parent.current;
                 const v = props.value.get() || div.getBoundingClientRect().width;
                 const delta = props.position === "right" ? -info.delta.x : info.delta.x;
-                return props.value.set(Math.abs(v + delta));
+                const value = Math.abs(v + delta);
+                return props.value.set(value);
             }
             const div = props.parent.current;
             const rect = div.getBoundingClientRect();
@@ -78,28 +79,34 @@ const Draggable = (props) => {
                 : "left-2 top-1/2 h-10 w-2"), children: props.sheet ? _jsx("div", { className: "h-2 w-1/4 rounded-lg bg-floating-border" }) : null }));
 };
 const positions = { drawer: "right", sheet: "none", dialog: "none" };
+const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
+    const type = propsType || "dialog";
+    if (isDesktop)
+        return propsType === "drawer" ? (propsPosition ?? positions.drawer) : positions[type];
+    return forceType ? positions[type] : positions.sheet;
+};
 export const Modal = ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer = true, closable = true, forceType = false, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, ariaTitle, ...props }) => {
     useRemoveScroll(open);
     const headingId = useId();
     const descriptionId = useId();
     const isDesktop = useMediaQuery("(min-width: 64rem)");
     const useResizer = _type !== "dialog";
-    const position = isDesktop ? (_type === "drawer" ? propsPosition : positions[_type]) : forceType ? positions[_type] : positions.sheet;
+    const position = fetchPosition(isDesktop, forceType, _type, propsPosition);
     const func = isDesktop ? animations[_type] : forceType ? animations[_type] : animations.sheet;
     const animation = typeof func === "function" ? func(position) : func;
     const type = isDesktop ? _type : forceType ? _type : "sheet";
     const { refs, context } = useFloating({ open: open, onOpenChange: onChange });
     const click = useClick(context);
-    const role = useRole(context);
+    const role = useRole(context, { role: "dialog" });
     const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: overlayClickClose });
     const { getReferenceProps, getFloatingProps } = useInteractions([click, role, dismiss]);
     const Trigger = trigger;
-    const value = useMotionValue(undefined);
+    const floatingSize = useMotionValue(undefined);
     const onClose = () => onChange(false);
-    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: refs.setReference, ...getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: false, className: css(`fixed 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, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", initial: "initial", variants: animation, "data-component": "modal", ref: refs.setFloating, "aria-modal": open, layoutId: layoutId, className: css(variants({ position, type }), className), style: type === "drawer" ? { width: value } : { height: value }, ...(title
+    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: refs.setReference, ...getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: false, 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, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", initial: "initial", variants: animation, "data-component": "modal", ref: refs.setFloating, "aria-modal": open, layoutId: layoutId, className: css(variants({ position, type }), className), style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, ...(title
                                     ? {
                                         "aria-labelledby": headingId,
                                         "aria-describedby": descriptionId,
                                     }
-                                    : { "aria-label": ariaTitle }), ...getFloatingProps(), children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: title })) : null })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8 py-1", children: children }), footer ? _jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: footer }) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { value: value, onChange: onChange, sheet: type === "sheet", parent: refs.floating, position: position })) : null] }) }) })) : null }) })] }));
+                                    : { "aria-label": ariaTitle }), ...getFloatingProps(), children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: title })) : null })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8 py-1", children: children }), footer ? _jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: footer }) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, parent: refs.floating, position: position, sheet: type === "sheet", value: floatingSize })) : null] }) }) })) : null }) })] }));
 };

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":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAOzG,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"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAOzG,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,yGAyWxB,CAAC"}

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

@@ -7,6 +7,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { Virtuoso } from "react-virtuoso";
+import { Is } from "sidekicker";
 import { useTranslations } from "../../hooks/use-translations";
 import { css, dispatchInput, initializeInputDataset } from "../../lib/dom";
 import { safeRegex } from "../../lib/fns";
@@ -29,7 +30,7 @@ const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
 const components = { List, Item };
 const DEFAULT_SIZE = 320;
 const MIN_SIZE = 40;
-export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedback = null, labelClassName, emptyMessage, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error, required = false, ...props }, externalRef) => {
+export const Autocomplete = forwardRef(({ left, error, right, loading, options, container, rightLabel, interactive, emptyMessage, optionalText, labelClassName, feedback = null, hideLeft = false, required = false, dynamicOption = false, ...props }, externalRef) => {
     const fieldset = useRef(null);
     const virtuoso = useRef(null);
     const defaults = props.value ?? props.defaultValue ?? "";
@@ -77,7 +78,7 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
         if (ul.current === null)
             return;
         let size = 0;
-        const items = Array.from(ul.current.querySelectorAll("li")).slice(0, Math.min(list.length, 10));
+        const items = Array.from(ul.current.querySelectorAll("li")).slice(0, Math.min(displayList.length, 10));
         items.forEach((x) => {
             const rect = x.getBoundingClientRect();
             size += rect.height;
@@ -97,7 +98,7 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
                 padding: 10,
                 elementContext: "reference",
                 apply(a) {
-                    const w = fieldset.current?.getBoundingClientRect().width;
+                    const w = fieldset.current.getBoundingClientRect().width;
                     const ul = a.elements.floating.querySelector("ul");
                     const fullSize = ul?.getBoundingClientRect().height || 0;
                     const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE);
@@ -131,7 +132,7 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
             focusItemOnOpen: "auto",
             openOnArrowKeyDown: true,
             scrollItemIntoView: true,
-            onNavigate: (n) => setIndex((prev) => n ?? prev),
+            // onNavigate: (n) => setIndex((prev) => n ?? prev)
         }),
     ]);
     useEffect(() => {
@@ -170,6 +171,7 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
         refs.reference.current?.focus();
     };
     const onFocus = () => {
+        setIndex((prev) => (prev === null ? 0 : prev));
         setOpen(true);
         setShadow("");
     };
@@ -178,11 +180,12 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
         setShadow("");
         setValue("");
         setLabel("");
-        dispatchInput(refs.reference.current, "");
+        dispatchInput(refs.reference.current);
         setClosed();
     };
     const id = props.id || props.name;
-    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, 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: [right, _jsxs("button", { type: "button", className: "p-2 transition-colors link:text-primary md:p-1", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "p-2 transition-colors link:text-danger md:p-1", 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", { "data-shadow": "true", ...getReferenceProps({
+    const isEmpty = displayList.length === 0;
+    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, loading: loading, 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: [right, _jsxs("button", { type: "button", className: "p-2 transition-colors link:text-primary md:p-1", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "p-2 transition-colors link:text-danger md:p-1", 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", { "data-shadow": "true", ...getReferenceProps({
                     ...props,
                     onChange,
                     onFocus,
@@ -192,44 +195,46 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
                     id: `${id}-shadow`,
                     onClick: (e) => e.currentTarget.focus(),
                     onKeyDown(event) {
+                        if (event.key === "Escape") {
+                            event.currentTarget.blur();
+                            return setClosed();
+                        }
+                        if (!open)
+                            return;
                         if (event.key === "ArrowDown") {
-                            let next = index + 1;
-                            if (next > list.length - 1)
+                            let next = Is.number(index) ? index + 1 : 0;
+                            if (next > displayList.length - 1)
                                 next = 0;
                             virtuoso.current?.scrollIntoView({ index: next });
                             return setIndex(next);
                         }
                         if (event.key === "ArrowUp") {
-                            let next = index - 1;
+                            let next = Is.number(index) ? index - 1 : displayList.length - 1;
                             if (next < 0)
-                                next = list.length - 1;
+                                next = displayList.length - 1;
                             virtuoso.current?.scrollIntoView({ index: next });
                             return setIndex(next);
                         }
-                        if (event.key === "Escape") {
-                            event.currentTarget.blur();
-                            return setClosed();
-                        }
                         if (event.key === "Enter") {
-                            if (index !== null && list[index]) {
+                            if (index !== null && displayList[index]) {
                                 event.preventDefault();
-                                return onSelect(list[index], index);
+                                return onSelect(displayList[index], index);
                             }
-                            if (list.length === 1) {
+                            if (displayList.length === 1) {
                                 event.preventDefault();
-                                return onSelect(list[0], 0);
+                                return onSelect(displayList[0], 0);
                             }
                         }
                     },
-                }), "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", "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, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs("ul", { ...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-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", 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, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.ul, { ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...transitions.styles,
-                                position: strategy,
-                                left: (x ?? 0) + (!!value ? 36 : 25),
                                 top: y ?? 0,
+                                position: strategy,
+                                left: (x ?? 0) + (value ? 36 : 25),
                             },
-                        }), "data-floating": "true", className: "isolate z-floating m-0 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", children: [list.length === 0 ? (_jsx("li", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { ref: virtuoso, data: displayList, components: components, hidden: displayList.length === 0, className: "rounded-lg border-floating-border bg-floating-background p-0 text-foreground", style: { height: h }, itemContent: (i, option) => {
+                        }), initial: false, "data-floating": "true", animate: { height: isEmpty ? "auto" : h }, className: "isolate z-floating m-0 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", children: [isEmpty ? (_jsx("li", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h }, components: components, className: "rounded-lg border-floating-border bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
                                     const Label = option.Render ?? Frag;
                                     const active = value === option.value || value === option.label;
                                     const selected = index === i;

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

@@ -3,6 +3,7 @@ import { Override } from "../../types";
 export type CheckboxProps = Override<React.PropsWithChildren<React.ComponentProps<"input">>, {
     error?: string;
     asTask?: boolean;
+    loading?: boolean;
     container?: string;
     labelClassName?: string;
     size?: "medium" | "large";

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,qGA6BpB,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,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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,qGAiCpB,CAAC"}

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

@@ -1,4 +1,7 @@
 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-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 })] })));
+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 })] }));
+});

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":"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,4CAqGtC,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;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"}

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

@@ -4,7 +4,7 @@ import { forwardRef, useEffect, useRef } from "react";
 import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { InputField } from "./input-field";
 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, ...props }, ref) => {
+    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 inputRef = useRef(null);
@@ -34,7 +34,7 @@ export const createFreeText = (Element, elementName, defaultProps, register) =>
                 input.removeEventListener("keydown", goNextInputImpl);
             };
         }, []);
-        return (_jsx(InputField, { ...defaultProps, info: info, left: left, error: error, right: right, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, title: props.title, container: 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-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-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 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<Override<FeedbackProps, {
+    loading: boolean;
     componentName: string;
     info: Label;
     labelClassName: string;

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,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,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,GAAI,8DAAsE,aAAa,4CA8ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,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,CACJ,CACJ,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YA6EpH,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,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,GAAI,8DAAsE,aAAa,4CA8ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,OAAO,EAAE,OAAO,CAAC;IACjB,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,CACJ,CACJ,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YA6EpH,CAAC"}

package/dist/src/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, 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-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": info, 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 InputFeedback = ({ reportStatus, 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": info, 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("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 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 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-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: "text-opacity-70 aria-disabled:text-disabled", 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 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", { 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: "text-opacity-70 aria-disabled:text-disabled", 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 })] }));
 });

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,EACd,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,mBAAmB,gBAAgB,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG,aAAa,CAClC,OAAO,EACL,CAAC;IACG,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACvC,GAAG,kBAAkB,CAAC,GACvB,CAAC;IACG,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,iBAAiB,CAAC,GACtB,CAAC;IACG,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC;IAC9F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,YAAY,CAAC,CACtB,CAAC;AAEF,eAAO,MAAM,KAAK,oEAA8F,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAkB,EACd,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,mBAAmB,gBAAgB,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG,aAAa,CAClC,OAAO,EACL,CAAC;IACG,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACvC,GAAG,kBAAkB,CAAC,GACvB,CAAC;IACG,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,iBAAiB,CAAC,GACtB,CAAC;IACG,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC;IAC9F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,YAAY,CAAC,CACtB,CAAC;AAEF,eAAO,MAAM,KAAK,oEAEhB,CAAC"}

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

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

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { Label, Override } from "../../types";
+import { InputFieldProps } from "./input-field";
+import { type OptionProps } from "./select";
+export type MultiSelectItemProps = OptionProps & {
+    Render?: React.FC<OptionProps>;
+};
+export type MultiSelectProps = Override<InputFieldProps<"input">, {
+    title?: string;
+    value?: string[];
+    emptyMessage?: Label;
+    selectedLabel?: string;
+    defaultValue?: string[];
+    dynamicOption?: boolean;
+    options: MultiSelectItemProps[];
+    onChangeOptions?: (options: string[]) => void;
+}>;
+export declare const MultiSelect: React.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=multi-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAOlH,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,wGAkYvB,CAAC"}