@g4rcez/components 0.0.24 → 0.0.26

package/README.md

@@ -27,10 +27,10 @@ The difference between then is:
 
 # Tasks
 
-- [x] TailwindCSS Plugin
-- [x] Hook to work with forms
-- [ ] Alerts
-- [x] Notion Table
-- [x] Dropdown
-- [ ] Dark mode toggler
-- [ ] Write docs
+-   [x] TailwindCSS Plugin
+-   [x] Hook to work with forms
+-   [ ] Alerts
+-   [x] Notion Table
+-   [x] Dropdown
+-   [ ] Dark mode toggler
+-   [ ] Write docs

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/core/resizable.js

@@ -4,5 +4,5 @@ import { motion } from "framer-motion";
 import useMeasure from "react-use-measure";
 export const Resizable = ({ children }) => {
     const [ref, bounds] = useMeasure();
-    return (_jsx(motion.div, { animate: { height: bounds.height > 0 ? bounds.height : 'auto' }, children: _jsx("div", { ref: ref, children: children }) }));
+    return (_jsx(motion.div, { animate: { height: bounds.height > 0 ? bounds.height : "auto" }, children: _jsx("div", { ref: ref, children: children }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,WAAW;;;mFAwBhB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,YAAY,CAAC,OAAO,WAAW,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,EAC7E,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAgBrE,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,WAAW;;;mFAwBhB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,YAAY,CAAC,OAAO,WAAW,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,EAC7E,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAUrE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAU,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAc1C,KAAK,aAAa,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAEpE,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CAgB/D,CAAC;AAGF,QAAA,MAAM,aAAa;;mFASjB,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,GAC9B,OAAO,CAAC;IACJ,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAkCxE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAU,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAc1C,KAAK,aAAa,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAEpE,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CAgB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;mFASjB,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,GAC9B,OAAO,CAAC;IACJ,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAsCxE,CAAC"}

package/dist/components/display/alert.js

@@ -8,12 +8,12 @@ import { motion } from "framer-motion";
 import { css } from "../../lib/dom";
 const variants = {
     true: { opacity: 1, height: "auto" },
-    false: { opacity: [0.7, 0.3, 0], height: 0 }
+    false: { opacity: [0.7, 0.3, 0], height: 0 },
 };
 const transition = {
     type: "tween",
     duration: 0.7,
-    ease: [0.04, 0.62, 0.23, 0.98]
+    ease: [0.04, 0.62, 0.23, 0.98],
 };
 export const Collapse = (props) => (_jsx(motion.section, Object.assign({}, props, { layout: true, layoutRoot: true, layoutScroll: true, initial: props.open, animate: props.open.toString(), "aria-hidden": !props.open, className: props.className, exit: variants.false, transition: transition, variants: variants, children: props.children })));
 const alertVariants = cva("px-4 py-4 border relative rounded-lg text-sm", {
@@ -21,10 +21,10 @@ const alertVariants = cva("px-4 py-4 border relative rounded-lg text-sm", {
         theme: {
             neutral: "border-border bg-background",
             danger: "text-danger-contrast bg-danger/10 border-danger/50",
-            success: "text-success-contrast bg-success/10 border-success/50"
-        }
+            success: "text-success-contrast bg-success/10 border-success/50",
+        },
     },
-    defaultVariants: { theme: "neutral" }
+    defaultVariants: { theme: "neutral" },
 });
 export const Alert = forwardRef(function Alert(_a, ref) {
     var _b;

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

@@ -9,7 +9,12 @@ export type TabsProps = {
 export declare const Tabs: (props: PropsWithChildren<TabsProps>) => import("react/jsx-runtime").JSX.Element;
 export type TabProps = {
     id: string;
-    title: Label;
+    title: string;
+    label?: undefined;
+} | {
+    id: string;
+    title: Omit<Label, string>;
+    label: string;
 };
 export declare const Tab: (props: PropsWithChildren<TabProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tabs.d.ts.map

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;AAGpC,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,4CAiGvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpD,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,6 +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 { Select } from "../form/select";
 const Context = createContext("");
 export const Tabs = (props) => {
     const [active, setActive] = useReactive(props.active);
@@ -53,10 +54,14 @@ 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 md:block" }), _jsx("nav", { children: _jsx("ul", { className: "divide-x divide-card-border overflow-x-auto flex justify-between md:justify-start", children: items.map((x) => {
-                                const inner = x.props;
-                                return (_jsx("li", { "data-id": inner.id, "data-active": active === inner.id, className: "data-[active=true]:text-primary w-full md:w-auto", children: _jsx(Render, { "data-id": inner.id, onClick: onClick, "aria-current": "page", className: "px-10 py-4 block font-medium w-full whitespace-nowrap", href: props.useHash ? `#${inner.id}` : undefined, children: inner.title }) }, `tab-header-${inner.id}`));
-                            }) }) })] }), children: props.children }) }));
+    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 };
+                                }) }), _jsx("ul", { className: "hidden lg:flex divide-x divide-card-border overflow-x-auto justify-between md:justify-start", children: items.map((x) => {
+                                    const inner = x.props;
+                                    return (_jsx("li", { "data-id": inner.id, "data-active": active === inner.id, className: "data-[active=true]:text-primary w-full md:w-auto", children: _jsx(Render, { "data-id": inner.id, onClick: onClick, "aria-current": "page", className: "px-10 py-4 block font-medium w-full whitespace-nowrap", href: props.useHash ? `#${inner.id}` : undefined, children: inner.title }) }, `tab-header-${inner.id}`));
+                                }) })] })] }), children: props.children }) }));
 };
 const useTabs = () => useContext(Context);
 export const Tab = (props) => {

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,4CA8ElG,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,7 +7,9 @@ import { cva } from "class-variance-authority";
 import { AnimatePresence, motion, useMotionValue } from "framer-motion";
 import { XIcon } from "lucide-react";
 import { Fragment, useId } from "react";
-const animationDuration = '600ms';
+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 },
     enter: { [side]: 0, opacity: 1, 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,10 +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[];
+    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,KAA4D,MAAM,OAAO,CAAC;AAGjF,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;CAC1B,CAAC;AAaF,eAAO,MAAM,YAAY,mGAwKvB,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

@@ -5,10 +5,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
 import Fuzzy from "fuzzy-search";
 import { ChevronDown } from "lucide-react";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 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"]);
@@ -23,15 +25,31 @@ const transitionStyles = {
 const fuzzyOptions = { caseSensitive: false, sort: false };
 const emptyRef = [];
 export const Autocomplete = forwardRef((_a, externalRef) => {
-    var _b, _c;
-    var { options, required = true } = _a, props = __rest(_a, ["options", "required"]);
+    var _b, _c, _d, _e;
+    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("");
     const [value, setValue] = useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : "");
+    const [label, setLabel] = useState((_e = (_d = props.value) !== null && _d !== void 0 ? _d : props.defaultValue) !== null && _e !== void 0 ? _e : "");
     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) {
+            setValue(props.value);
+            const item = options.find((x) => x.value === props.value);
+            setValue((_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : props.value);
+        }
+    }, [props.value]);
     const { x, y, strategy, refs, context } = useFloating({
         open,
         transform: true,
@@ -78,8 +96,12 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
         }),
     ]);
     const onSelect = (opt) => {
+        var _a, _b;
         setValue(opt.value);
-        dispatchInput(refs.reference.current, opt.value);
+        setLabel((_a = opt.label) !== null && _a !== void 0 ? _a : "");
+        const fakeEvent = dispatchInput(ref.current, opt.value);
+        if (fakeEvent)
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, fakeEvent);
         setOpen(false);
         setShadow("");
     };
@@ -89,6 +111,7 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
         setShadow(value);
         if (!open && value === "")
             return setOpen(true);
+        event.target.name = props.name || "";
         return value ? setOpen(true) : (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
     const onFocus = () => {
@@ -98,32 +121,34 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
     const onClose = () => {
         setShadow("");
         setValue("");
+        setLabel("");
         dispatchInput(refs.reference.current, "");
         setOpen(false);
     };
-    return (_jsxs("fieldset", { className: "relative w-auto", children: [_jsx(InputField, Object.assign({}, props, { required: required, right: _jsxs("span", { className: "flex items-center gap-0.5", 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", Object.assign({}, getReferenceProps(Object.assign(Object.assign({}, props), { onChange,
-                    onFocus, ref: refs.setReference, onClick: (e) => e.currentTarget.focus(), onKeyDown(event) {
-                        if (event.key === "Escape") {
-                            event.currentTarget.blur();
-                            return setOpen(false);
+    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 (event.key === "Enter") {
-                            if (index !== null && list[index]) {
-                                event.preventDefault();
-                                return onSelect(list[index]);
-                            }
-                            if (list.length === 1) {
-                                event.preventDefault();
-                                return onSelect(list[0]);
-                            }
+                        if (list.length === 1) {
+                            event.preventDefault();
+                            return onSelect(list[0]);
                         }
-                    } })), { required: required, value: open ? shadow : value, "aria-autocomplete": "list", autoComplete: "off", 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", !!props.right || shadow ? "pe-12" : "", !!props.left ? "ps-8" : "", props.className) })) })), _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { closeOnFocusOut: true, guards: true, returnFocus: true, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("ul", Object.assign({}, getFloatingProps({
+                    }
+                } })), { 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({
                             onClick: () => onSelect(option),
                             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 })))) })) }) })] }));
+                            active: value === option.value,
+                        }), { key: `${option.value}-option`, option: option, selected: index === i, active: value === option.value })))) })) })) : null })] })));
 });

package/dist/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,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,4CAAkD,aAAa,4CAanF,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,4CAAkD,aAAa,4CAiBnF,CAAC"}

package/dist/components/form/checkbox.js

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

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"}