@g4rcez/components 0.0.29 → 0.0.31

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

@@ -5,7 +5,7 @@ import { PolymorphicProps } from "./polymorph";
 declare const buttonVariants: (props?: ({
     size?: "big" | "small" | "default" | "icon" | null | undefined;
     rounded?: "circle" | "default" | "rough" | "squared" | null | undefined;
-    theme?: "main" | "raw" | "warn" | "danger" | "secondary" | "success" | "info" | null | undefined;
+    theme?: "main" | "raw" | "primary" | "warn" | "danger" | "secondary" | "success" | "info" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export type ButtonProps<T extends React.ElementType = "button"> = PolymorphicProps<VariantProps<typeof buttonVariants> & Partial<{
     icon: Label;

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,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"}
+{"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;;;;mFA6BnB,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

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
-const buttonVariants = cva("inline-flex duration-700 enabled:hover:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 text-main-foreground border-2 border-transparent items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring", {
+const buttonVariants = cva("inline-flex duration-700 enabled:hover:bg-opacity-80 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 text-main-foreground border-2 border-transparent items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring ease-normal", {
     variants: {
         size: {
             default: "h-10 px-4 py-2",
@@ -20,6 +20,7 @@ const buttonVariants = cva("inline-flex duration-700 enabled:hover:bg-opacity-70
         },
         theme: {
             raw: "",
+            primary: "bg-primary text-primary-foreground",
             main: "bg-primary text-primary-foreground",
             warn: "bg-warn text-warn-foreground",
             danger: "bg-danger text-danger-foreground",

package/dist/components/core/polymorph.d.ts

@@ -3,7 +3,7 @@ import { Override } from "../../types";
 type Polymorphism<T extends React.ElementType> = React.PropsWithChildren<{
     as?: T;
 }>;
-export type Props<T extends React.ElementType = React.ElementType> = Polymorphism<T> & Omit<React.ComponentPropsWithRef<T>, keyof Polymorphism<T>>;
+type Props<T extends React.ElementType = React.ElementType> = Polymorphism<T> & Omit<React.ComponentPropsWithRef<T>, keyof Polymorphism<T>>;
 export type PolymorphicProps<P extends {}, T extends React.ElementType = React.ElementType> = Omit<T extends string ? Override<React.ComponentProps<T> & Props<T>, P> : Override<Props<T>, P>, keyof Polymorphism<T>> & Polymorphism<T>;
 export declare const Polymorph: React.ForwardRefExoticComponent<Omit<Props<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,KAAK,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,iBAAiB,CAAC;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAErF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnJ,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,IAAI,CAC9F,CAAC,SAAS,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAC1F,MAAM,YAAY,CAAC,CAAC,CAAC,CACxB,GACG,YAAY,CAAC,CAAC,CAAC,CAAC;AAEpB,eAAO,MAAM,SAAS,2IAGpB,CAAC"}
+{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,KAAK,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,iBAAiB,CAAC;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAErF,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5I,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,IAAI,CAC9F,CAAC,SAAS,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAC1F,MAAM,YAAY,CAAC,CAAC,CAAC,CACxB,GACG,YAAY,CAAC,CAAC,CAAC,CAAC;AAEpB,eAAO,MAAM,SAAS,2IAGpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/core/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,SAAS,iBAAkB,KAAK,CAAC,iBAAiB,4CAO9D,CAAC"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/core/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAkD5D,eAAO,MAAM,SAAS,iBAAkB,KAAK,CAAC,iBAAiB,4CAQ9D,CAAC"}

package/dist/components/core/resizable.js

@@ -1,8 +1,47 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import useMeasure from "react-use-measure";
+import { motion, useMotionValue } from "framer-motion";
+import { useEffect, useMemo, useState } from "react";
+const defaultState = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+};
+const useElementRect = () => {
+    const [element, ref] = useState(null);
+    const motion = useMotionValue(defaultState);
+    const observer = useMemo(() => new window.ResizeObserver((entries) => {
+        if (entries[0]) {
+            const rect = entries[0].contentRect;
+            motion.set({
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+                top: rect.top,
+                left: rect.left,
+                bottom: rect.bottom,
+                right: rect.right,
+            });
+        }
+    }), []);
+    useEffect(() => {
+        if (!element)
+            return;
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [element]);
+    return [ref, motion];
+};
 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 }) }));
+    const [ref, bounds] = useElementRect();
+    const h = bounds.get().height;
+    return (_jsx(motion.div, { animate: { height: h > 0 ? h : "auto" }, children: _jsx("div", { ref: ref, children: children }) }));
 };

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

@@ -1,14 +1,13 @@
 import { type VariantProps } from "class-variance-authority";
-import React from "react";
-import { PolymorphicProps } from "../core/polymorph";
 import { HTMLMotionProps } from "framer-motion";
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
+import { PolymorphicProps } from "../core/polymorph";
 type CollapseProps = {
     open: boolean;
 } & HTMLMotionProps<"section">;
 export declare const Collapse: (props: PropsWithChildren<CollapseProps>) => import("react/jsx-runtime").JSX.Element;
 declare const alertVariants: (props?: ({
-    theme?: "danger" | "success" | "neutral" | null | undefined;
+    theme?: "danger" | "success" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export type AlertProps<T extends React.ElementType = "div"> = PolymorphicProps<VariantProps<typeof alertVariants> & Partial<{
     container: string;

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;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"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAU,MAAM,eAAe,CAAC;AAExD,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,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;;mFAUjB,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,GAuCxE,CAAC"}

package/dist/components/display/alert.js

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { CheckCircleIcon, CircleAlertIcon, XIcon } from "lucide-react";
-import { forwardRef } from "react";
-import { Polymorph } from "../core/polymorph";
 import { motion } from "framer-motion";
+import { CheckCircleIcon, CircleAlertIcon, InfoIcon, XIcon } from "lucide-react";
+import { forwardRef } from "react";
 import { css } from "../../lib/dom";
+import { Polymorph } from "../core/polymorph";
 const variants = {
     true: { opacity: 1, height: "auto" },
     false: { opacity: [0.7, 0.3, 0], height: 0 },
@@ -15,19 +15,20 @@ const transition = {
     duration: 0.7,
     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 })));
+export const Collapse = (props) => (_jsx(motion.section, Object.assign({}, props, { layout: true, layoutRoot: true, layoutScroll: true, initial: false, 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", {
     variants: {
         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-foreground bg-success/10 border-success/50",
+            info: "text-info bg-info/10 border-info/50",
         },
     },
     defaultVariants: { theme: "neutral" },
 });
 export const Alert = forwardRef(function Alert(_a, ref) {
     var _b;
-    var { className, theme, onClose, open } = _a, props = __rest(_a, ["className", "theme", "onClose", "open"]);
-    return (_jsx("div", { "data-open": !!open, "aria-hidden": !open, className: "data-[open=true]:mb-4 isolate data-[open=true]:pointer-events-auto pointer-events-none", children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, Object.assign({}, props, { className: css(alertVariants({ theme }), className), ref: ref, "data-theme": theme, role: "alert", as: (_b = props.as) !== null && _b !== void 0 ? _b : "div", children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [theme === "success" ? _jsx(CheckCircleIcon, { size: 20 }) : null, theme === "danger" ? _jsx(CircleAlertIcon, { size: 20 }) : null, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, open !== undefined ? (_jsx("button", { type: "button", onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose(false), className: "text-foreground hover:text-danger absolute right-3 top-3 transition-colors duration-300 ease-in-out", children: _jsx(XIcon, { size: 20 }) })) : null] })) }) }));
+    var { className, theme, onClose, open = true } = _a, props = __rest(_a, ["className", "theme", "onClose", "open"]);
+    return (_jsx("div", { "data-open": !!open, "aria-hidden": !open, className: "pointer-events-none isolate data-[open=true]:pointer-events-auto data-[open=true]:mb-4", children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, Object.assign({}, props, { className: css(alertVariants({ theme }), className), ref: ref, "data-theme": theme, role: "alert", as: (_b = props.as) !== null && _b !== void 0 ? _b : "div", children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [theme === "success" ? _jsx(CheckCircleIcon, { size: 20 }) : null, theme === "info" ? _jsx(InfoIcon, { size: 20 }) : null, theme === "danger" ? _jsx(CircleAlertIcon, { size: 20 }) : null, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, onClose !== undefined ? (_jsx("button", { type: "button", onClick: () => onClose(false), className: "duration-300 ease-in-out absolute right-3 top-3 text-foreground transition-colors hover:text-danger", children: _jsx(XIcon, { size: 20 }) })) : null] })) }) }));
 });

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

@@ -5,7 +5,7 @@ export type CalendarProps = {
     locale?: Locales;
     markToday?: boolean;
     autoFocusToday?: boolean;
-    onChange?: (d: Date) => void;
+    onChange?: (d: Date | undefined) => void;
 };
 export declare const Calendar: ({ locale, disabledDate, markToday, autoFocusToday, date, onChange }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=calendar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAmBvD,MAAM,MAAM,aAAa,GAAG;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC,CAAC;AAmDF,eAAO,MAAM,QAAQ,wEAAuF,aAAa,4CAmMxH,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAoBvD,MAAM,MAAM,aAAa,GAAG;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5C,CAAC;AAmDF,eAAO,MAAM,QAAQ,wEAAuF,aAAa,4CAqMxH,CAAC"}

package/dist/components/display/calendar.js

@@ -8,6 +8,7 @@ import { Is } from "sidekicker";
 import TheMaskInput from "the-mask-input";
 import { useReducer } from "use-typed-reducer";
 import { useDebounce } from "../../hooks/use-debounce";
+import { css } from "../../lib/dom";
 import { Resizable } from "../core/resizable";
 const transition = { type: "spring", bounce: 0.1, duration: 0.3 };
 const dir = (mod) => (n = 1) => ({ x: `${100 * mod * n}%`, opacity: 0.5 });
@@ -137,20 +138,20 @@ export const Calendar = ({ locale, disabledDate, markToday = true, autoFocusToda
             d.setFullYear(+y);
             return d;
         });
-    }, 700);
+    }, 1200);
     const onChangeYear = (e) => {
         const value = e.currentTarget.value;
         dispatch.onChangeYear(value);
         defer(value);
     };
-    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { className: "relative overflow-hidden", children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(Resizable, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, mode: "popLayout", initial: false, custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { onClick: dispatch.previousMonth, variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { variants: variants, custom: state.direction, className: "absolute z-normal isolate inset-0 flex items-center justify-center font-semibold", children: _jsxs("span", { className: "w-fit flex items-center justify-center gap-0.5 py-1", children: [_jsx("select", { style: { width: `${monthString.length}ch` }, value: monthString, onChange: dispatch.onChangeMonth, className: "appearance-none capitalize bg-transparent proportional-nums hover:text-primary cursor-pointer w-fit", children: state.months }), _jsx(TheMaskInput, { mask: "int", value: state.year, maxLength: 4, placeholder: "YYYY", onChange: onChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 bg-transparent appearance-none hover:text-primary cursor-pointer" })] }) }), _jsx(motion.button, { variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", onClick: dispatch.nextMonth, children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: {
+    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { className: "relative overflow-hidden", children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(Resizable, { children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", presenceAffectsLayout: true, custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { onClick: dispatch.previousMonth, variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { variants: variants, custom: state.direction, className: "absolute inset-0 isolate z-normal flex items-center justify-center font-semibold", children: _jsxs("span", { className: "flex w-fit items-center justify-center gap-0.5 py-1", children: [_jsx("select", { style: { width: `${monthString.length}ch` }, value: monthString, onChange: dispatch.onChangeMonth, className: "w-fit cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", children: state.months }), _jsx(TheMaskInput, { mask: "int", value: state.year, maxLength: 4, placeholder: "YYYY", onChange: onChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 cursor-pointer appearance-none bg-transparent hover:text-primary" })] }) }), _jsx(motion.button, { variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", onClick: dispatch.nextMonth, children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: {
                                                     backgroundImage: "linear-gradient(to right, hsla(var(--card-background)) 15%, transparent 30%, transparent 70%, hsla(var(--card-background)) 85%)",
-                                                } })] }), _jsx("div", { className: "mt-4 grid grid-cols-7 gap-y-4", children: state.week.map((dayOfWeek) => (_jsx("span", { className: "font-medium capitalize text-sm", children: dayOfWeek.toLocaleDateString(locale, { weekday: "short" }) }, dayOfWeek.toString()))) }), _jsx(motion.ul, { onKeyDown: dispatch.onKeyDown, variants: variants, custom: state.direction, className: "mt-4 pb-2 grid grid-cols-7 gap-y-4", children: days.map((day) => {
+                                                } })] }), _jsx("div", { className: "mt-4 grid grid-cols-7 gap-y-4", children: state.week.map((dayOfWeek) => (_jsx("span", { className: "text-sm font-medium capitalize", children: dayOfWeek.toLocaleDateString(locale, { weekday: "short" }) }, dayOfWeek.toString()))) }), _jsx(motion.ul, { onKeyDown: dispatch.onKeyDown, variants: variants, custom: state.direction, className: "mt-4 grid grid-cols-7 gap-y-4 pb-2", children: days.map((day) => {
                                             const key = day.toISOString();
                                             const isSelected = key === currentAsString;
                                             const today = isToday(day) && markToday;
                                             const disabledByFn = (disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(day)) || false;
                                             const disableDate = !isSameMonth(day, state.date) || disabledByFn;
-                                            return (_jsx("li", { className: "w-full flex items-center justify-center", children: _jsx("button", { type: "button", "data-date": key, disabled: disabledByFn, onClick: dispatch.onSelectDate, "data-view": state.date.getMonth().toString(), className: `size-8 disabled:cursor-not-allowed rounded-full font-semibold flex items-center justify-center proportional-nums ${today ? "text-primary" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, children: day.getDate() }) }, key));
-                                        }) })] }, monthString) }) }) }), _jsx("footer", { className: "text-center text-primary mt-2", children: _jsx("button", { className: "hover:scale-105 transition-transform duration-300", type: "button", onClick: dispatch.setToday, children: "Today" }) })] }) }));
+                                            return (_jsx("li", { className: "flex w-full items-center justify-center", children: _jsx("button", { type: "button", "data-date": key, disabled: disabledByFn, onClick: dispatch.onSelectDate, "data-view": state.date.getMonth().toString(), className: css(`flex size-8 items-center justify-center rounded-full font-semibold proportional-nums disabled:cursor-not-allowed ${today ? "text-primary" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`), children: day.getDate() }) }, key));
+                                        }) })] }, monthString) }) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "duration-300 transition-transform hover:scale-105", type: "button", onClick: dispatch.setToday, children: "Today" }) })] }) }));
 };

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

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

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

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

package/dist/components/display/card.js

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

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

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+import { Label } from "../../types";
+type AnimatedItemProps = {
+    title: Label;
+    description: Label;
+    children: Label;
+    avatar?: Label;
+    leading?: React.FC<{
+        open: () => void;
+    }>;
+};
+type AnimatedListProps = {};
+export declare const AnimatedList: (props: PropsWithChildren<AnimatedListProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimatedListItem: (props: PropsWithChildren<AnimatedItemProps>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAE5G,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,EAAE,CAAC;AA0D5B,eAAO,MAAM,YAAY,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CA4DvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}

package/dist/components/display/list.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import { XIcon } from "lucide-react";
+import React, { Fragment, useCallback, useEffect, useId, useRef, useState } from "react";
+import { useOnClickOutside } from "../../hooks/use-click-outside";
+const FloatItem = ({ item, setter }) => {
+    const ref = useRef(null);
+    useOnClickOutside(ref, setter);
+    useEffect(() => {
+        function onKeyDown(event) {
+            if (event.key === "Escape")
+                setter();
+        }
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, []);
+    return (_jsxs(Fragment, { children: [_jsx(AnimatePresence, { children: item ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "pointer-events-none absolute inset-0 z-floating h-screen w-screen bg-floating-overlay/70" })) : null }), _jsx(AnimatePresence, { children: item ? (_jsx("div", { className: "absolute inset-0 z-tooltip flex items-center justify-center", children: _jsxs(motion.div, { layout: true, ref: ref, layoutId: `item-${item.id}`, className: "relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow", children: [_jsx("nav", { className: "absolute right-4 top-1 lg:right-2", children: _jsx("button", { type: "button", onClick: setter, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) }), _jsxs("header", { className: "flex w-full flex-wrap items-center justify-between gap-2", children: [_jsx("h3", { className: "min-w-full text-balance text-2xl font-medium", children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), item.children] }) })) : null })] }));
+};
+export const AnimatedList = (props) => {
+    const [selected, setSelected] = useState(null);
+    const id = useId();
+    const clear = useCallback(() => {
+        setSelected(null);
+    }, []);
+    const items = React.Children.toArray(props.children);
+    return (_jsxs(Fragment, { children: [_jsx(FloatItem, { item: selected, setter: clear }), _jsx("ul", { role: "list", children: items.map((x, index) => {
+                    const item = x.props;
+                    const isLast = index === items.length - 1;
+                    const innerId = `${id}-${index}`;
+                    const setter = () => setSelected(Object.assign(Object.assign({}, item), { id: innerId }));
+                    const Leading = item.leading;
+                    return (_jsx(motion.li, { layout: true, layoutId: `item-${innerId}`, className: `border-b border-card-border py-2 last:border-transparent`, children: _jsx(motion.div, { layoutId: `toast-${innerId}`, className: "relative", children: _jsx("div", { className: "relative flex items-start space-x-3", children: _jsxs(Fragment, { children: [item.avatar ? (_jsx("div", { children: _jsx("div", { className: "relative px-1", children: _jsx("button", { onClick: setter, className: "flex size-10 items-center justify-center ring-primary", children: item.avatar }) }) })) : null, _jsx("div", { className: "min-w-0 flex-1 py-1 text-foreground", children: _jsxs("div", { className: "flex flex-row flex-nowrap justify-between gap-4", children: [_jsxs("button", { onClick: setter, className: "ease-out cursor-pointer text-left transition-all hover:scale-105 hover:text-primary", children: [_jsx("h3", { children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), Leading ? _jsx(Leading, { open: setter }) : null] }) })] }) }) }) }, innerId));
+                }) })] }));
+};
+export const AnimatedListItem = (props) => _jsx(Fragment, { children: props.children });

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;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"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2B,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAEnH,OAAO,EAAE,KAAK,EAAY,MAAM,aAAa,CAAC;AAK9C,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;AAmCF,eAAO,MAAM,IAAI,UAAW,iBAAiB,CAAC,SAAS,CAAC,4CAkGvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GACd;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GAChD;IACI,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAER,eAAO,MAAM,GAAG,UAAW,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}

package/dist/components/display/tabs.js

@@ -1,11 +1,28 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion, useMotionValue } from "framer-motion";
-import React, { createContext, Fragment, useContext, useEffect, useRef } from "react";
+import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 import { useReactive } from "../../hooks/use-reactive";
+import { Button } from "../core/button";
+import { Modal } from "../floating/modal";
 import { Card } from "./card";
-import { Select } from "../form/select";
 const Context = createContext("");
+const SelectTab = (props) => {
+    var _a;
+    const [view, setView] = useState(false);
+    const title = props.items.find((x) => {
+        const inner = x.props;
+        return inner.id === props.active;
+    });
+    return (_jsxs("div", { className: "my-4 px-8 flex min-w-full text-center lg:hidden", children: [_jsx(Button, { className: "min-w-full", onClick: () => setView(true), children: (_a = title === null || title === void 0 ? void 0 : title.props) === null || _a === void 0 ? void 0 : _a.title }), _jsx(Modal, { closable: true, forceType: true, onChange: setView, open: view, type: "dialog", children: _jsx("ul", { className: "mt-4 space-y-4", children: props.items.map((x) => {
+                        const inner = x.props;
+                        const onClick = () => {
+                            props.setActive(inner.id);
+                            setView(false);
+                        };
+                        return (_jsx("li", { className: "min-w-full", children: _jsx(Button, { className: "w-full", onClick: onClick, theme: inner.id === props.active ? "primary" : "secondary", children: inner.title }) }, inner.id));
+                    }) }) })] }));
+};
 export const Tabs = (props) => {
     const [active, setActive] = useReactive(props.active);
     const left = useMotionValue(0);
@@ -54,13 +71,9 @@ 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(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) => {
+    return (_jsx(Context.Provider, { value: active, children: _jsx(Card, { container: "pt-0", className: props.className, header: _jsxs("header", { ref: ref, className: "relative mb-2 border-b border-card-border", children: [_jsx(motion.div, { layout: true, initial: false, "aria-hidden": "true", style: { left, width }, transition: { type: "tween", left, width }, className: "duration-300 absolute bottom-0 hidden h-0.5 w-28 bg-primary transition-all lg:block" }), _jsxs("nav", { children: [_jsx(SelectTab, { setActive: setActive, items: items, active: active }), _jsx("ul", { className: "hidden justify-between divide-x divide-card-border overflow-x-auto md:justify-start lg:flex", 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}`));
+                                    return (_jsx("li", { "data-id": inner.id, "data-active": active === inner.id, className: "w-full data-[active=true]:text-primary md:w-auto", children: _jsx(Render, { "data-id": inner.id, onClick: onClick, "aria-current": "page", className: "block w-full whitespace-nowrap px-10 py-4 font-medium", href: props.useHash ? `#${inner.id}` : undefined, children: inner.title }) }, `tab-header-${inner.id}`));
                                 }) })] })] }), children: props.children }) }));
 };
 const useTabs = () => useContext(Context);

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

@@ -1,16 +1,18 @@
 import React, { PropsWithChildren } from "react";
 import { Label } from "../../types";
-export type DrawerProps = {
+export type ModalProps = {
     title?: Label;
     open: boolean;
     footer?: Label;
     resizer?: boolean;
     asChild?: boolean;
     closable?: boolean;
-    type?: "dialog" | "drawer";
+    overlayClickClose?: boolean;
     position?: "left" | "right";
     trigger?: Label | React.FC<any>;
+    forceType?: boolean;
+    type?: "dialog" | "drawer" | "sheet";
     onChange: (nextState: boolean) => void;
 };
-export declare const Modal: ({ type: _type, resizer, ...props }: PropsWithChildren<DrawerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ type: _type, resizer, overlayClickClose, forceType, ...props }: PropsWithChildren<ModalProps>) => 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;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAsDpC,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;AAoEF,eAAO,MAAM,KAAK,uCAA0D,iBAAiB,CAAC,WAAW,CAAC,4CA6FzG,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;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAsDpC,MAAM,MAAM,UAAU,GAAG;IACrB,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,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAoEF,eAAO,MAAM,KAAK,qEAMf,iBAAiB,CAAC,UAAU,CAAC,4CAgG/B,CAAC"}

package/dist/components/floating/modal.js

@@ -30,12 +30,12 @@ const animations = {
         exit: { opacity: 0, scale: 0.97, animationDuration },
     },
 };
-const variants = cva("isolate ring-0 outline-0 appearance-none flex flex-col gap-4 flex-nowrap min-w-xs bg-floating-background", {
+const variants = cva("isolate relative ring-0 outline-0 appearance-none flex flex-col gap-4 flex-nowrap min-w-xs bg-floating-background", {
     variants: {
         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-[85vh] max-h-[85svh] pt-6 pb-4 rounded-t-lg",
+            dialog: "max-h-[calc(100lvh-10%)] container h-min rounded-lg py-8",
+            sheet: "w-full absolute bottom-0 h-[85vh] max-h-[85vh] max-h-[85svh] pt-6 pb-4 rounded-t-lg",
         },
         position: {
             none: "",
@@ -68,23 +68,23 @@ const Draggable = (props) => {
             return props.value.set(result);
         }
     };
-    return (_jsx(motion.div, { draggable: true, dragMomentum: true, dragListener: true, dragPropagation: true, onDrag: onDrag, animate: false, initial: false, dragElastic: 0, dragDirectionLock: true, dragSnapToOrigin: true, drag: props.sheet ? "y" : "x", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: css("absolute rounded-lg", props.sheet ? "cursor-row-resize" : "bg-floating-border cursor-col-resize", props.sheet
-            ? "w-full py-2 top-1 h-3 flex justify-center"
+    return (_jsx(motion.div, { draggable: true, dragMomentum: true, dragListener: true, dragPropagation: true, onDrag: onDrag, animate: false, initial: false, dragElastic: 0, dragDirectionLock: true, dragSnapToOrigin: true, drag: props.sheet ? "y" : "x", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: css("absolute rounded-lg", props.sheet ? "cursor-row-resize" : "cursor-col-resize bg-floating-border", props.sheet
+            ? "top-1 flex h-3 w-full justify-center py-2"
             : props.position === "left"
-                ? "top-1/2 right-5 h-10 w-2"
-                : "top-1/2 left-2 h-10 w-2"), children: props.sheet ? _jsx("div", { className: "bg-floating-border rounded-lg w-1/4 h-2" }) : null }));
+                ? "right-5 top-1/2 h-10 w-2"
+                : "left-2 top-1/2 h-10 w-2"), children: props.sheet ? _jsx("div", { className: "h-2 w-1/4 rounded-lg bg-floating-border" }) : null }));
 };
 const positions = { drawer: "right", sheet: "none", dialog: "none" };
 export const Modal = (_a) => {
-    var { type: _type = "dialog", resizer = true } = _a, props = __rest(_a, ["type", "resizer"]);
+    var { type: _type = "dialog", resizer = true, overlayClickClose = false, forceType = false } = _a, props = __rest(_a, ["type", "resizer", "overlayClickClose", "forceType"]);
     const headingId = useId();
     const descriptionId = useId();
     const isDesktop = useMediaQuery("(min-width: 48rem)");
-    const useResizer = _type === "drawer" || !isDesktop;
-    const position = isDesktop ? (_type === "drawer" ? props.position : positions[_type]) : positions.sheet;
-    const func = isDesktop ? animations[_type] : animations.sheet;
+    const useResizer = _type === "drawer" || (forceType ? false : !isDesktop);
+    const position = isDesktop ? (_type === "drawer" ? props.position : positions[_type]) : forceType ? positions[_type] : positions.sheet;
+    const func = isDesktop ? animations[_type] : forceType ? animations[_type] : animations.sheet;
     const animation = typeof func === "function" ? func(position) : func;
-    const type = isDesktop ? _type : "sheet";
+    const type = isDesktop ? _type : forceType ? _type : "sheet";
     const { refs, context } = useFloating({ open: props.open, onOpenChange: props.onChange });
     const click = useClick(context);
     const role = useRole(context);
@@ -92,5 +92,6 @@ 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: isDesktop ? { width: value } : { height: value } }, getFloatingProps(), { children: [useResizer && resizer ? (_jsx(Draggable, { onChange: props.onChange, sheet: !isDesktop, value: value, parent: refs.floating, position: 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-2.5 lg:-top-1 right-4 lg:right-8", children: _jsx("button", { type: "button", onClick: () => props.onChange(false), className: "p-1 transition-colors opacity-70 hover:opacity-100 hover:text-danger focus:text-danger", children: _jsx(XIcon, {}) }) })) : null] })) : null, _jsx("section", { 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] })) }) })) }) })] }));
+    const onClose = () => props.onChange(false);
+    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, onClick: overlayClickClose ? onClose : undefined, className: `relative z-floating h-[100dvh] !overflow-clip 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: [props.closable !== false ? (_jsx("nav", { className: "absolute top-2 right-2 lg:-top-1 lg:right-8", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: props.onChange, sheet: !isDesktop, value: value, parent: refs.floating, position: position })) : null, props.title ? (_jsx("header", { className: "relative w-full", children: props.title ? (_jsx("h2", { className: "border-b border-floating-border px-8 pb-4 text-3xl font-medium leading-relaxed", children: props.title })) : null })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8", children: props.children }), props.footer ? (_jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: props.footer })) : null] })) }) })) }) })] }));
 };

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;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"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,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,8FAYjB,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,yGAwPxB,CAAC"}