@g4rcez/components 0.0.25 → 0.0.26

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

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

package/dist/components/core/button.js

@@ -34,6 +34,6 @@ export const Button = forwardRef(function Button(_a, ref) {
     var _b;
     var { className, icon, loading, theme, type = "button", size, rounded } = _a, props = __rest(_a, ["className", "icon", "loading", "theme", "type", "size", "rounded"]);
     const disabled = loading || props.disabled;
-    return (_jsxs(Polymorph, Object.assign({}, props, { ref: ref, type: type, "data-theme": theme, "data-loading": loading, disabled: disabled, as: (_b = props.as) !== null && _b !== void 0 ? _b : "button", onClick: disabled ? undefined : props.onClick, className: css(buttonVariants({ size, rounded, theme }), className), children: [props.children, icon] })));
+    return (_jsxs(Polymorph, Object.assign({}, props, { ref: ref, type: type, "data-theme": theme, "data-loading": loading, disabled: disabled, "aria-busy": disabled || loading, as: (_b = props.as) !== null && _b !== void 0 ? _b : "button", onClick: disabled ? undefined : props.onClick, className: css(buttonVariants({ size, rounded, theme }), className), children: [props.children, icon] })));
 });
 export const ButtonGroup = (props) => (_jsx("ul", { className: "border-main-bg text-main-foreground flex w-full flex-row rounded-md border-2", children: props.buttons.map((button) => (_jsx("li", { className: "flex flex-1", children: _jsx("button", Object.assign({}, button, { type: button.type || "button", "data-active": props.active === button.name ? "true" : "false", className: css("flex flex-1 items-center gap-1.5 rounded-sm border-r-2 px-4 py-2 last:border-r-0", "cursor-pointer justify-center whitespace-nowrap align-middle font-medium", "focus-visible:ring-ring shadow-sm focus-visible:outline-none focus-visible:ring-2 disabled:text-opacity-80", "data-[active=true]:bg-main-bg text-body data-[active=true]:text-main transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-50") })) }, `button-group-${button.name}`))) }));

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAEzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,IAAI,UAAW,iBAAiB,CAAC,SAAS,CAAC,4CA8GvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpI,eAAO,MAAM,GAAG,UAAW,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAEzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,IAAI,UAAW,iBAAiB,CAAC,SAAS,CAAC,4CA6GvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpI,eAAO,MAAM,GAAG,UAAW,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}

package/dist/components/display/tabs.js

@@ -4,7 +4,7 @@ import { motion, useMotionValue } from "framer-motion";
 import React, { createContext, Fragment, useContext, useEffect, useRef } from "react";
 import { useReactive } from "../../hooks/use-reactive";
 import { Card } from "./card";
-import { Autocomplete } from "../form/autocomplete";
+import { Select } from "../form/select";
 const Context = createContext("");
 export const Tabs = (props) => {
     const [active, setActive] = useReactive(props.active);
@@ -54,7 +54,7 @@ export const Tabs = (props) => {
         left.set(anchor.offsetLeft);
         setActive(anchor.dataset.id || "");
     };
-    return (_jsx(Context.Provider, { value: active, children: _jsx(Card, { className: props.className, container: "pt-0", header: _jsxs("header", { ref: ref, className: "border-b border-card-border relative mb-2", children: [_jsx(motion.div, { layout: true, initial: false, "aria-hidden": "true", style: { left, width }, transition: { type: "tween", left, width }, className: "w-28 h-0.5 bg-primary absolute bottom-0 duration-300 transition-all hidden lg:block" }), _jsxs("nav", { children: [_jsx(Autocomplete, { onChange: (e) => setActive(e.target.value), value: active, container: "container inline-flex px-6 w-full mx-auto", selectContainer: "mt-4 lg:mt-0 min-w-full inline-flex min-w-full lg:hidden", hideLeft: true, labelClassName: "border-transparent rounded-none", rightLabel: null, options: items.map((x) => {
+    return (_jsx(Context.Provider, { value: active, children: _jsx(Card, { className: props.className, container: "pt-0", header: _jsxs("header", { ref: ref, className: "border-b border-card-border relative mb-2", children: [_jsx(motion.div, { layout: true, initial: false, "aria-hidden": "true", style: { left, width }, transition: { type: "tween", left, width }, className: "w-28 h-0.5 bg-primary absolute bottom-0 duration-300 transition-all hidden lg:block" }), _jsxs("nav", { children: [_jsx(Select, { onChange: (e) => setActive(e.target.value), value: active, hideLeft: true, container: "container rounded mt-4 lg:mt-0 min-w-full lg:hidden inline-flex px-6 w-full mx-auto", labelClassName: "border-transparent rounded-none", rightLabel: null, options: items.map((x) => {
                                     var _a;
                                     const inner = x.props;
                                     return { value: inner.id, label: (_a = inner.label) !== null && _a !== void 0 ? _a : inner.title };

package/dist/components/floating/dropdown.d.ts

@@ -7,6 +7,7 @@ type DropdownProps = {
     onChange?: (nextValue: boolean) => void;
     trigger: React.ReactElement | React.ReactNode;
     title?: React.ReactNode | React.ReactElement | string;
+    buttonProps?: React.ComponentProps<"button">;
 };
 export declare const Dropdown: (props: PropsWithChildren<DropdownProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/floating/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/floating/dropdown.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAE7F,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CA0E/D,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/floating/dropdown.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAE7F,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACtD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CA0E/D,CAAC"}

package/dist/components/floating/dropdown.js

@@ -36,5 +36,5 @@ export const Dropdown = (props) => {
     const dismiss = useDismiss(context);
     const role = useRole(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
-    return (_jsxs(Fragment, { children: [_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { type: "button", children: props.trigger })), open && (_jsx(FloatingPortal, { id: `${headingId}-portal`, children: _jsx(FloatingFocusManager, { restoreFocus: (_a = props.restoreFocus) !== null && _a !== void 0 ? _a : true, returnFocus: (_b = props.restoreFocus) !== null && _b !== void 0 ? _b : true, visuallyHiddenDismiss: true, context: context, modal: false, children: _jsxs("div", Object.assign({ className: "bg-floating-background relative min-w-96 isolate z-floating border shadow-2xl p-6 border-floating-border rounded-lg", 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: "leading-snug font-medium text-2xl tracking-wide text-left", children: props.title }) }), props.children] })) }) }))] }));
+    return (_jsxs(Fragment, { children: [_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(props.buttonProps), { type: "button", children: props.trigger })), open && (_jsx(FloatingPortal, { id: `${headingId}-portal`, children: _jsx(FloatingFocusManager, { restoreFocus: (_a = props.restoreFocus) !== null && _a !== void 0 ? _a : true, returnFocus: (_b = props.restoreFocus) !== null && _b !== void 0 ? _b : true, visuallyHiddenDismiss: true, context: context, modal: false, children: _jsxs("div", Object.assign({ className: "bg-floating-background relative min-w-96 isolate z-floating border shadow-2xl p-6 border-floating-border rounded-lg", 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: "leading-snug font-medium text-2xl tracking-wide text-left", children: props.title }) }), props.children] })) }) }))] }));
 };

package/dist/components/floating/menu.d.ts

@@ -0,0 +1,16 @@
+import { LucideProps } from "lucide-react";
+import React from "react";
+type MenuItemProps = {
+    label: string;
+    disabled?: boolean;
+    Right?: React.FC<LucideProps>;
+};
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Menu: React.ForwardRefExoticComponent<Omit<Partial<{
+    isParent: boolean;
+    label: string;
+    nested: boolean;
+    children: React.ReactNode;
+}> & React.HTMLProps<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=menu.d.ts.map

package/dist/components/floating/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAiE,MAAM,OAAO,CAAC;AA2JtF,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAE1F,eAAO,MAAM,QAAQ,yIAgCpB,CAAC;AAEF,eAAO,MAAM,IAAI;cA1KH,OAAO;WACV,MAAM;YACL,OAAO;cACL,KAAK,CAAC,SAAS;yFAgL3B,CAAC"}

package/dist/components/floating/menu.js

@@ -0,0 +1,115 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
+import { ChevronRightIcon } from "lucide-react";
+import React, { createContext, useContext, useEffect, useRef, useState } from "react";
+import { css } from "../../lib/dom";
+const menuItemClassName = (highlight = "data-[open]:bg-primary focus:bg-primary") => `w-full outline-none px-2 py-1 rounded items-center flex justify-between text-left min-w-32 ${highlight} aria-expanded:opacity-80`;
+const MenuContext = createContext({
+    isOpen: false,
+    activeIndex: null,
+    getItemProps: () => ({}),
+    setActiveIndex: () => { },
+    setHasFocusInside: () => { },
+});
+const MenuComponent = React.forwardRef((_a, forwardedRef) => {
+    var { children, label, isParent } = _a, props = __rest(_a, ["children", "label", "isParent"]);
+    const parentId = useFloatingParentNodeId();
+    const isNested = parentId !== null;
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasFocusInside, setHasFocusInside] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const elementsRef = useRef([]);
+    const labelsRef = useRef([]);
+    const parent = useContext(MenuContext);
+    const tree = useFloatingTree();
+    const nodeId = useFloatingNodeId();
+    const item = useListItem();
+    const { floatingStyles, refs, context } = useFloating({
+        nodeId,
+        open: isOpen,
+        transform: true,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
+        placement: isNested ? "right-start" : "bottom-start",
+        middleware: [offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }), flip(), shift()],
+    });
+    const role = useRole(context, { role: "menu", enabled: true });
+    const dismiss = useDismiss(context, { bubbles: true });
+    const hover = useHover(context, {
+        enabled: true,
+        delay: { open: 75 },
+        handleClose: safePolygon({ blockPointerEvents: true }),
+    });
+    const click = useClick(context, {
+        event: "mousedown",
+        toggle: !isNested,
+        ignoreMouse: isNested,
+        keyboardHandlers: true,
+    });
+    const listNavigation = useListNavigation(context, {
+        loop: true,
+        activeIndex,
+        virtual: true,
+        nested: isNested,
+        allowEscape: true,
+        listRef: elementsRef,
+        scrollItemIntoView: true,
+        onNavigate: setActiveIndex,
+    });
+    const typeahead = useTypeahead(context, {
+        activeIndex,
+        listRef: labelsRef,
+        onMatch: isOpen ? setActiveIndex : undefined,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([hover, click, role, dismiss, listNavigation, typeahead]);
+    useEffect(() => {
+        if (!tree)
+            return;
+        const handleTreeClick = () => setIsOpen(false);
+        const onSubMenuOpen = (event) => {
+            if (event.nodeId !== nodeId && event.parentId === parentId) {
+                setIsOpen(false);
+            }
+        };
+        tree.events.on("click", handleTreeClick);
+        tree.events.on("menuopen", onSubMenuOpen);
+        return () => {
+            tree.events.off("click", handleTreeClick);
+            tree.events.off("menuopen", onSubMenuOpen);
+        };
+    }, [tree, nodeId, parentId]);
+    useEffect(() => {
+        if (isOpen && tree)
+            tree.events.emit("menuopen", { parentId, nodeId });
+    }, [tree, isOpen, nodeId, parentId]);
+    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsxs("button", Object.assign({ ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, className: isParent ? css(props.className) : isNested ? menuItemClassName(props.className) : menuItemClassName(props.className) }, getReferenceProps(parent.getItemProps(Object.assign(Object.assign({}, props), { onFocus(event) {
+                    var _a;
+                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                    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("div", Object.assign({ ref: refs.setFloating, style: floatingStyles, className: "bg-floating-background outline-none items-start border text-left shadow-xl border-floating-border flex flex-col rounded-lg" }, getFloatingProps(), { children: children })) }) })) }) })] }));
+});
+export const MenuItem = React.forwardRef((_a, forwardedRef) => {
+    var { label, Right, disabled } = _a, props = __rest(_a, ["label", "Right", "disabled"]);
+    const menu = useContext(MenuContext);
+    const item = useListItem({ label: disabled ? null : label });
+    const tree = useFloatingTree();
+    const isActive = item.index === menu.activeIndex;
+    return (_jsxs("button", Object.assign({}, props, { ref: useMergeRefs([item.ref, forwardedRef]), type: "button", role: "menuitem", disabled: disabled, tabIndex: isActive ? 0 : -1, className: menuItemClassName(props.className) }, menu.getItemProps({
+        onClick(event) {
+            var _a;
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            tree === null || tree === void 0 ? void 0 : tree.events.emit("click");
+        },
+        onFocus(event) {
+            var _a;
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            menu.setHasFocusInside(true);
+        },
+    }), { children: [label, Right ? _jsx(Right, { size: 16 }) : null] })));
+});
+export const Menu = React.forwardRef((props, ref) => {
+    const parentId = useFloatingParentNodeId();
+    return parentId !== null ? (_jsx(MenuComponent, Object.assign({}, props, { isParent: false, ref: ref }))) : (_jsx(FloatingTree, { children: _jsx(MenuComponent, Object.assign({}, props, { isParent: true, ref: ref })) }));
+});

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

@@ -12,5 +12,5 @@ export type DrawerProps = {
     trigger?: Label | React.FC<any>;
     onChange: (nextState: boolean) => void;
 };
-export declare const Modal: ({ type, resizer, ...props }: PropsWithChildren<DrawerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ type: _type, resizer, ...props }: PropsWithChildren<DrawerProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AA+CpC,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,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,CAAC;AAiCF,eAAO,MAAM,KAAK,gCAAmD,iBAAiB,CAAC,WAAW,CAAC,4CAgFlG,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAwDpC,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,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,CAAC;AAsDF,eAAO,MAAM,KAAK,uCAA0D,iBAAiB,CAAC,WAAW,CAAC,4CAqFzG,CAAC"}

package/dist/components/floating/modal.js

@@ -7,6 +7,8 @@ import { cva } from "class-variance-authority";
 import { AnimatePresence, motion, useMotionValue } from "framer-motion";
 import { XIcon } from "lucide-react";
 import { Fragment, useId } from "react";
+import { useMediaQuery } from "../../hooks/use-media-query";
+import { css } from "../../lib/dom";
 const animationDuration = "600ms";
 const createDrawerAnimation = (side) => ({
     initial: { [side]: "-60%", opacity: 0.8, animationDuration },
@@ -17,6 +19,11 @@ const drawerLeft = createDrawerAnimation("left");
 const drawerRight = createDrawerAnimation("right");
 const animations = {
     drawer: (type) => (type === "left" ? drawerLeft : drawerRight),
+    sheet: {
+        initial: { opacity: 0, scaleY: 0.95, animationDuration, originY: "bottom" },
+        enter: { opacity: 1, scaleY: 1, animationDuration, originY: "bottom" },
+        exit: { opacity: 0, scaleY: 0.8, animationDuration, originY: "bottom" },
+    },
     dialog: {
         initial: { opacity: 0, scale: 0.95, animationDuration },
         enter: { opacity: 1, scale: [1.05, 1], animationDuration },
@@ -28,6 +35,7 @@ const variants = cva("isolate ring-0 outline-0 appearance-none flex flex-col gap
         type: {
             drawer: "max-h-screen max-w-[90%] w-auto h-screen min-h-0",
             dialog: "max-h-[calc(100lvh-10%)] container h-[inherit] rounded-lg py-8",
+            sheet: "w-full absolute bottom-0 max-h-[calc(100lvh-10%)] pt-6 pb-4 rounded-t-lg"
         },
         position: {
             none: "",
@@ -41,21 +49,37 @@ const dragConstraints = { top: 0, left: 0, right: 0, bottom: 0 };
 const Draggable = (props) => {
     const handleDrag = (_, info) => {
         if (props.parent.current) {
+            if (!props.sheet) {
+                const div = props.parent.current;
+                const v = props.value.get() || div.getBoundingClientRect().width;
+                const delta = props.type === "right" ? -info.delta.x : info.delta.x;
+                props.value.set(Math.abs(v + delta));
+            }
             const div = props.parent.current;
-            const v = props.value.get() || div.getBoundingClientRect().width;
-            const delta = props.type === "right" ? -info.delta.x : info.delta.x;
-            props.value.set(Math.abs(v + delta));
+            const rect = div.getBoundingClientRect();
+            const v = props.value.get() || rect.height;
+            const result = Math.abs(v - info.delta.y);
+            const twentyPercentScreen = window.outerHeight * 0.68;
+            if (result < twentyPercentScreen) {
+                props.onChange(false);
+                return setTimeout(() => props.value.set(window.outerHeight * 0.9), 350);
+            }
+            return props.value.set(result);
         }
     };
-    return (_jsx(motion.div, { drag: "x", dragElastic: 0, dragMomentum: false, onDrag: handleDrag, dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: `absolute top-1/2 ${props.type === "left" ? "right-5" : "left-2"} rounded-lg cursor-grab h-10 w-2 bg-floating-border` }));
+    return (_jsx(motion.div, { drag: "x", dragElastic: 0, dragMomentum: false, onDrag: handleDrag, dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: css("absolute rounded-lg cursor-grab bg-floating-border", props.sheet ? "left-1/2 top-2 w-16 h-2" : (props.type === "left" ? "top-1/2 right-5 h-10 w-2" : "top-1/2 left-2 h-10 w-2")) }));
 };
+const positions = { "drawer": "right", "sheet": "none", "dialog": "none" };
 export const Modal = (_a) => {
-    var { type = "dialog", resizer = true } = _a, props = __rest(_a, ["type", "resizer"]);
-    const isDialog = type === "dialog";
-    const position = isDialog ? "none" : props.position || "left";
-    const animation = isDialog ? animations.dialog : animations.drawer(position);
+    var { type: _type = "dialog", resizer = true } = _a, props = __rest(_a, ["type", "resizer"]);
     const headingId = useId();
     const descriptionId = useId();
+    const isDesktop = useMediaQuery("(min-width: 48rem)");
+    const useResizer = _type === "drawer" || !isDesktop;
+    const position = isDesktop ? positions[_type] : positions.sheet;
+    const func = isDesktop ? animations[_type] : animations.sheet;
+    const animation = typeof func === "function" ? func(position) : func;
+    const type = isDesktop ? _type : "sheet";
     const { refs, context } = useFloating({ open: props.open, onOpenChange: props.onChange });
     const click = useClick(context);
     const role = useRole(context);
@@ -63,5 +87,5 @@ export const Modal = (_a) => {
     const { getReferenceProps, getFloatingProps } = useInteractions([click, role, dismiss]);
     const Trigger = props.trigger;
     const value = useMotionValue(undefined);
-    return (_jsxs(Fragment, { children: [props.trigger ? (_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: Trigger }))) : (_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { type: "button", children: Trigger }))) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, children: props.open && (_jsx(FloatingOverlay, { lockScroll: true, className: `relative !overflow-clip h-[100dvh] z-floating bg-floating-overlay/70 ${type === "drawer" ? "" : "grid justify-center p-8"}`, children: _jsx(FloatingFocusManager, { modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, Object.assign({ animate: "enter", "aria-describedby": descriptionId, "aria-labelledby": headingId, className: variants({ position, type }), exit: "exit", initial: "initial", ref: refs.setFloating, variants: animation, style: { width: value } }, getFloatingProps(), { children: [!isDialog && resizer ? _jsx(Draggable, { value: value, parent: refs.floating, type: position }) : null, props.title || props.closable ? (_jsxs("header", { className: "w-full relative", children: [props.title ? (_jsx("h2", { className: "px-8 pb-4 border-b border-floating-border text-3xl font-medium leading-relaxed", children: props.title })) : null, props.closable !== false ? (_jsx("nav", { className: "absolute -top-1 right-8", children: _jsx("button", { type: "button", onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, false); }, className: "p-1 transition-colors hover:text-danger focus:text-danger", children: _jsx(XIcon, {}) }) })) : null] })) : null, _jsx("div", { className: "flex-1 px-8 overflow-y-auto", children: props.children }), props.footer ? (_jsx("footer", { className: "px-8 border-t border-floating-border pt-4 w-full", children: props.footer })) : null] })) }) })) }) })] }));
+    return (_jsxs(Fragment, { children: [props.trigger ? (_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: Trigger }))) : (_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { type: "button", children: Trigger }))) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, children: props.open && (_jsx(FloatingOverlay, { lockScroll: true, className: `relative !overflow-clip h-[100dvh] z-floating bg-floating-overlay/70 ${type === "drawer" ? "" : "grid justify-center p-8"}`, children: _jsx(FloatingFocusManager, { modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, Object.assign({ animate: "enter", "aria-describedby": descriptionId, "aria-labelledby": headingId, className: variants({ position, type }), exit: "exit", initial: "initial", ref: refs.setFloating, variants: animation, style: isDesktop ? { width: value } : { height: value } }, getFloatingProps(), { children: [useResizer && resizer ? _jsx(Draggable, { onChange: props.onChange, sheet: !isDesktop, value: value, parent: refs.floating, type: position }) : null, props.title || props.closable ? (_jsxs("header", { className: "w-full relative", children: [props.title ? (_jsx("h2", { className: "px-8 pb-4 border-b border-floating-border text-3xl font-medium leading-relaxed", children: props.title })) : null, props.closable !== false ? (_jsx("nav", { className: "absolute -top-1 right-8", children: _jsx("button", { type: "button", onClick: () => props.onChange(false), className: "p-1 transition-colors hover:text-danger focus:text-danger", children: _jsx(XIcon, {}) }) })) : null] })) : null, _jsx("div", { className: "flex-1 px-8 overflow-y-auto", children: props.children }), props.footer ? (_jsx("footer", { className: "px-8 border-t border-floating-border pt-4 w-full", children: props.footer })) : null] })) }) })) }) })] }));
 };

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

@@ -7,11 +7,11 @@ type ItemProps = Omit<React.HTMLProps<HTMLLIElement>, "children"> & {
     option: OptionProps;
 };
 export declare const Option: React.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
-type SelectProps = Omit<InputFieldProps<"input">, "value"> & {
+export type AutocompleteProps = Omit<InputFieldProps<"input">, "value"> & {
     value?: string;
     options: OptionProps[];
-    selectContainer?: string;
+    dynamicOption?: boolean;
 };
-export declare const Autocomplete: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Autocomplete: React.ForwardRefExoticComponent<Omit<AutocompleteProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};
 //# sourceMappingURL=autocomplete.d.ts.map

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,KAAuE,MAAM,OAAO,CAAC;AAG5F,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,8FAWjB,CAAC;AAEH,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAaF,eAAO,MAAM,YAAY,mGA+LxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAG5F,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,8FAWjB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAaF,eAAO,MAAM,YAAY,yGAmNxB,CAAC"}

package/dist/components/form/autocomplete.js

@@ -9,6 +9,8 @@ import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "re
 import { usePrevious } from "../../hooks/use-previous";
 import { css, dispatchInput } from "../../lib/dom";
 import { InputField } from "./input-field";
+import { safeRegex } from "../../lib/fns";
+import { useTranslations } from "../../hooks/use-translate-context";
 export const Option = forwardRef((_a, ref) => {
     var _b;
     var { selected, active, onClick, option } = _a, rest = __rest(_a, ["selected", "active", "onClick", "option"]);
@@ -24,7 +26,8 @@ const fuzzyOptions = { caseSensitive: false, sort: false };
 const emptyRef = [];
 export const Autocomplete = forwardRef((_a, externalRef) => {
     var _b, _c, _d, _e;
-    var { options, selectContainer, labelClassName, required = false } = _a, props = __rest(_a, ["options", "selectContainer", "labelClassName", "required"]);
+    var { options, dynamicOption = false, feedback = null, labelClassName, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error, required = false } = _a, props = __rest(_a, ["options", "dynamicOption", "feedback", "labelClassName", "interactive", "rightLabel", "optionalText", "container", "hideLeft", "right", "left", "error", "required"]);
+    const translation = useTranslations();
     const ref = useRef(null);
     const [open, setOpen] = useState(false);
     const [shadow, setShadow] = useState("");
@@ -33,7 +36,12 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
     const [index, setIndex] = useState(null);
     const listRef = useRef(emptyRef);
     const previousIndex = usePrevious(index);
-    const list = new Fuzzy(options, ["value"], fuzzyOptions).search(shadow);
+    const innerOptions = dynamicOption && shadow !== "" ? [
+        { value: shadow, label: shadow, "data-dynamic": "true" },
+        ...options
+    ] : options;
+    const list = new Fuzzy(innerOptions, ["value", "label"], fuzzyOptions).search(shadow);
+    const pattern = dynamicOption ? undefined : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
     useEffect(() => {
         var _a;
         if (props.value) {
@@ -117,23 +125,24 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
         dispatchInput(refs.reference.current, "");
         setOpen(false);
     };
-    return (_jsxs("fieldset", { className: `relative w-full inline-block ${selectContainer}`, children: [_jsxs(InputField, Object.assign({}, props, { required: required, labelClassName: labelClassName, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("button", { type: "button", className: "link:text-primary transition-colors", children: _jsx(ChevronDown, { size: 20 }) }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "link:text-danger transition-colors", 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", { ref: ref, required: required, type: "hidden", name: props.name, defaultValue: props.value || value || undefined }), _jsx("input", Object.assign({}, getReferenceProps(Object.assign(Object.assign({}, props), { onChange,
-                        onFocus, ref: refs.setReference, name: undefined, onClick: (e) => e.currentTarget.focus(), onKeyDown(event) {
-                            if (event.key === "Escape") {
-                                event.currentTarget.blur();
-                                return setOpen(false);
-                            }
-                            if (event.key === "Enter") {
-                                if (index !== null && list[index]) {
-                                    event.preventDefault();
-                                    return onSelect(list[index]);
-                                }
-                                if (list.length === 1) {
-                                    event.preventDefault();
-                                    return onSelect(list[0]);
-                                }
-                            }
-                        } })), { required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input text-foreground text-base group h-10 w-full flex-1 rounded-md bg-transparent p-2 placeholder-input-mask outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!props.right || shadow ? "pe-12" : "", !!props.left ? "ps-8" : "", props.className) }))] })), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("ul", Object.assign({}, getFloatingProps({
+    return (_jsxs(InputField, Object.assign({}, props, { container: css("group inline-block w-full", container), error: error, feedback: feedback, form: props.form, hideLeft: hideLeft, id: props.name || props.id, interactive: interactive, labelClassName: labelClassName, left: left, name: props.name, optionalText: optionalText, placeholder: props.placeholder, required: required, rightLabel: rightLabel, title: props.title, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", className: "link:text-primary transition-colors", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "link:text-danger transition-colors", 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", { ref: ref, required: required, type: "hidden", name: props.name, defaultValue: props.value || value || undefined }), _jsx("input", Object.assign({}, getReferenceProps(Object.assign(Object.assign({}, props), { onChange,
+                onFocus,
+                pattern, ref: refs.setReference, name: undefined, onClick: (e) => e.currentTarget.focus(), onKeyDown(event) {
+                    if (event.key === "Escape") {
+                        event.currentTarget.blur();
+                        return setOpen(false);
+                    }
+                    if (event.key === "Enter") {
+                        if (index !== null && list[index]) {
+                            event.preventDefault();
+                            return onSelect(list[index]);
+                        }
+                        if (list.length === 1) {
+                            event.preventDefault();
+                            return onSelect(list[0]);
+                        }
+                    }
+                } })), { required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input text-foreground text-base group h-11 w-full flex-1 rounded-md bg-transparent p-2 placeholder-input-mask outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!right || shadow ? "pe-12" : "", !!left ? "ps-8" : "", props.className) })), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("ul", Object.assign({}, getFloatingProps({
                         ref: refs.setFloating,
                         style: Object.assign({ position: strategy, left: x !== null && x !== void 0 ? x : 0, top: y !== null && y !== void 0 ? y : 0 }, transitions.styles),
                     }), { "data-floating": "true", className: "bg-floating-background shadow-floating text-foreground list-none p-0 m-0 rounded-b-lg overflow-auto origin-[top_center] overflow-y-auto z-floating", children: list.map((option, i) => (_createElement(Option, Object.assign({}, getItemProps({
@@ -141,5 +150,5 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
                             ref: (node) => void (listRef.current[i] = node),
                             selected: index === i,
                             active: value === option.value,
-                        }), { key: `${option.value}-option`, option: option, selected: index === i, active: value === option.value })))) })) })) : null })] }));
+                        }), { key: `${option.value}-option`, option: option, selected: index === i, active: value === option.value })))) })) })) : null })] })));
 });

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

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

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

@@ -2,11 +2,12 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { format, parse, startOfDay } from "date-fns";
 import { CalendarIcon } from "lucide-react";
-import { Fragment, useMemo, useState } from "react";
+import { Fragment, useId, useMemo, useState } from "react";
 import { Is } from "sidekicker";
 import { Calendar } from "../display/calendar";
 import { Dropdown } from "../floating/dropdown";
 import { Input } from "./input";
+import { useTranslations } from "../../hooks/use-translate-context";
 const fixedDate = new Date(1970, 11, 31);
 const parts = {
     year: () => [/\d/, /\d/, /\d/, /\d/],
@@ -29,6 +30,8 @@ const partValues = {
 export const DatePicker = (_a) => {
     var _b;
     var { date, locale, disabledDate, autoFocusToday, onChange, markToday } = _a, props = __rest(_a, ["date", "locale", "disabledDate", "autoFocusToday", "onChange", "markToday"]);
+    const labelId = useId();
+    const translation = useTranslations();
     const datetimeFormat = useMemo(() => new Intl.DateTimeFormat(locale), [locale]);
     const [innerDate, setInnerDate] = useState(date || undefined);
     const [open, setOpen] = useState(false);
@@ -61,5 +64,5 @@ export const DatePicker = (_a) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(d);
         setValue(format(d, placeholder));
     };
-    return (_jsx(Input, Object.assign({}, props, { mask: mask, value: value, onChange: onChangeDateInput, className: "uppercase", formNoValidate: !open, placeholder: placeholder, required: (_b = props.required) !== null && _b !== void 0 ? _b : true, error: open ? undefined : props.error, name: props.name ? `${props.name}-picker` : props.name, right: _jsxs(Fragment, { children: [_jsx("input", { defaultValue: innerDate === null || innerDate === void 0 ? void 0 : innerDate.toISOString(), hidden: true, type: "date", name: props.name }), _jsx(Dropdown, { restoreFocus: true, trigger: _jsx(CalendarIcon, {}), onChange: setOpen, open: open, children: _jsx(Calendar, Object.assign({}, props, { locale: locale, date: innerDate, onChange: onChangeDate, markToday: markToday, disabledDate: disabledDate, autoFocusToday: autoFocusToday })) })] }) })));
+    return (_jsx(Input, Object.assign({}, props, { mask: mask, value: value, onChange: onChangeDateInput, className: "uppercase", formNoValidate: !open, placeholder: placeholder, required: (_b = props.required) !== null && _b !== void 0 ? _b : true, error: open ? undefined : props.error, name: props.name ? `${props.name}-picker` : props.name, right: _jsxs(Fragment, { children: [_jsx("input", { defaultValue: innerDate === null || innerDate === void 0 ? void 0 : innerDate.toISOString(), hidden: true, type: "date", name: props.name }), _jsx(Dropdown, { open: open, restoreFocus: true, onChange: setOpen, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), buttonProps: { "aria-describedby": labelId }, children: _jsx(Calendar, Object.assign({}, props, { locale: locale, date: innerDate, onChange: onChangeDate, markToday: markToday, disabledDate: disabledDate, autoFocusToday: autoFocusToday })) })] }) })));
 };

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

@@ -1,15 +1,17 @@
 import React, { PropsWithChildren } from "react";
-import { PolymorphicProps } from "../core/polymorph";
 import { Label } from "../../types";
+import { PolymorphicProps } from "../core/polymorph";
 export type FeedbackProps = React.PropsWithChildren<Partial<{
-    title: string | React.ReactElement | React.ReactNode;
+    info: Label;
+    title: Label;
     hideLeft?: boolean;
     className?: string;
     placeholder: string;
     reportStatus: boolean;
 }>>;
-export declare const InputFeedback: ({ reportStatus, hideLeft, className, children, title }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputFeedback: ({ reportStatus, hideLeft, className, info, children, title }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
 export type InputFieldProps<T extends "input" | "select"> = PolymorphicProps<Partial<{
+    info: Label;
     labelClassName: string;
     error: string;
     hideLeft: boolean;
@@ -24,5 +26,5 @@ export type InputFieldProps<T extends "input" | "select"> = PolymorphicProps<Par
     name: string;
     placeholder: string;
 }>, T>;
-export declare const InputField: <T extends "input" | "select">({ optionalText, left, rightLabel, container, feedback, interactive, right, children, error, form, id, labelClassName, name, title, placeholder, hideLeft, required, }: PropsWithChildren<InputFieldProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export declare const InputField: <T extends "input" | "select">({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName, name, title, placeholder, hideLeft, required, }: PropsWithChildren<InputFieldProps<T>>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=input-field.d.ts.map

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

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

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

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

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { TheMaskProps } from "the-mask-input";
-import { FeedbackProps, InputFieldProps } from "./input-field";
 import { Override } from "../../types";
+import { FeedbackProps, InputFieldProps } from "./input-field";
 export type InputProps = Override<InputFieldProps<"input">, TheMaskProps & FeedbackProps & {
     next?: string;
 }>;

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

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

package/dist/components/form/input.js

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

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

@@ -3,9 +3,11 @@ import { InputFieldProps } from "./input-field";
 import { Override } from "../../types";
 export type OptionProps = Override<React.ComponentProps<"option">, {
     value: string;
+    "data-dynamic"?: string;
 }>;
 export type SelectProps = Override<InputFieldProps<"select">, {
     options: OptionProps[];
+    selectContainer?: string;
 }>;
 export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 //# sourceMappingURL=select.d.ts.map