@g4rcez/components 2.0.20 → 2.0.22

package/dist/components/display/card.js

@@ -4,7 +4,7 @@ import { Is } from "sidekicker";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
 import { Skeleton } from "./skeleton";
-export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (_jsxs(Polymorph, { ...props, as: as || "div", "data-component": "card", className: css("flex shadow-shadow-card flex-col gap-4 rounded-card border border-card-border bg-card-background w-full py-4 pb-5", container), children: [title ? (_jsx("header", { "data-component": "card-title", className: css("mb-2 w-full border-b border-card-border px-4 pb-4 text-xl font-medium lg:px-8", titleClassName), children: title })) : (header), _jsx("div", { "data-component": "card-body", className: css("min-w-full px-4 lg:px-8", props.className), children: loading ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Skeleton, { className: "w-full" }), _jsx(Skeleton, { className: "w-8/12" }), _jsx(Skeleton, { className: "w-10/12" }), _jsx(Skeleton, { className: "w-1/2" })] })) : children })] }));
+export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (_jsxs(Polymorph, { ...props, as: as || "div", "data-component": "card", className: css("flex shadow-shadow-card flex-col gap-4 rounded-card border border-card-border bg-card-background w-full py-4", container), children: [title ? (_jsx("header", { "data-component": "card-title", className: css("mb-2 w-full border-b border-card-border px-6 pb-4 text-xl font-medium", titleClassName), children: title })) : (header), _jsx("div", { "data-component": "card-body", className: css("min-w-full px-6", props.className), children: loading ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Skeleton, { className: "w-full" }), _jsx(Skeleton, { className: "w-8/12" }), _jsx(Skeleton, { className: "w-10/12" }), _jsx(Skeleton, { className: "w-1/2" })] })) : children })] }));
 Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
     const Component = (as || "div");
     const Title = (titleTag || "h2");
@@ -14,5 +14,5 @@ Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
 export const StatsCard = (props) => {
     const interactive = props.interactive ?? true;
     const Icon = props.Icon ?? InfoIcon;
-    return (_jsx(Card, { ...props, title: null, loading: undefined, container: "px-0 py-0", className: "flex gap-4 items-center px-0 lg:px-0", children: _jsxs("div", { className: `flex w-full items-center gap-4 rounded-card px-0 lg:px-0 ${interactive ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`, children: [_jsx("div", { className: css("flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground", props.mark), children: _jsx(Icon, { size: 48 }) }), _jsxs("div", { className: "flex flex-col gap-2 justify-center py-2", children: [_jsx("p", { className: "text-lg", children: props.title }), props.loading ? _jsx(Skeleton, { className: "h-10" }) : _jsx("p", { className: "text-4xl font-bold tracking-wide", children: props.value })] })] }) }));
+    return (_jsx(Card, { ...props, title: null, loading: undefined, container: "px-0 py-0", className: "flex gap-4 items-center px-0", children: _jsxs("div", { className: `flex w-full items-center gap-4 rounded-card px-0 lg:px-0 ${interactive ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`, children: [_jsx("div", { className: css("flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground", props.mark), children: _jsx(Icon, { size: 48 }) }), _jsxs("div", { className: "flex flex-col gap-2 justify-center py-2", children: [_jsx("p", { className: "text-lg", children: props.title }), props.loading ? _jsx(Skeleton, { className: "h-10" }) : _jsx("p", { className: "text-4xl font-bold tracking-wide", children: props.value })] })] }) }));
 };

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

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import { type PropsWithChildren } from "react";
 import { Label } from "../../types";
 declare const variants: (props?: ({
-    theme?: "default" | "info" | "warn" | "muted" | "danger" | "success" | "secondary" | null | undefined;
+    theme?: "info" | "warn" | "muted" | "danger" | "success" | "secondary" | "default" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type NotificationOptions = Partial<{
     title: Label;

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

@@ -5,10 +5,10 @@ export type StepProps = React.ComponentProps<"button"> & {
     currentStep: number;
     status?: StepStatus;
 };
-export declare const StepsContainer: (props: PropsWithChildren<{
+export declare const Steps: (props: PropsWithChildren<{
     steps: number;
     currentStep: number;
 }>) => import("react/jsx-runtime").JSX.Element;
-export declare const Step: (props: StepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Step: ({ step, currentStep, status, ...props }: StepProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=step.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAkB,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAmC5E,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAkBpH,eAAO,MAAM,cAAc,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,4CA6B9F,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CAkDpC,CAAC"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAkB,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAmC5E,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAkBpH,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,4CA6BrF,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,yCAAyC,SAAS,4CAkDtE,CAAC"}

package/dist/components/display/step.js

@@ -22,16 +22,16 @@ const transitions = {
     type: "tween",
     ease: "circOut",
 };
-const getCurrentStatus = (props) => {
-    if (props.status === "error")
+const getCurrentStatus = (step, currentStep, status) => {
+    if (status === "error")
         return "error";
-    if (props.currentStep === props.step)
+    if (currentStep === step)
         return "active";
-    if (props.currentStep < props.step)
+    if (currentStep < step)
         return "inactive";
     return "complete";
 };
-export const StepsContainer = (props) => {
+export const Steps = (props) => {
     const [ref, animate] = useAnimate();
     useEffect(() => {
         if (props.currentStep === 0)
@@ -48,12 +48,12 @@ export const StepsContainer = (props) => {
             });
         }
     }, [props.currentStep]);
-    return (_jsxs("div", { className: "relative flex justify-between", ref: ref, children: [_jsx("div", { className: "absolute top-1/2 h-1 w-[calc(100%)] bg-card-border" }), _jsx("div", { "data-name": "progress", className: "absolute top-1/2 h-1 w-0 bg-success transition-all duration-300 ease-out" }), props.children] }));
+    return (_jsxs("div", { className: "flex relative justify-between", ref: ref, children: [_jsx("div", { className: "absolute top-1/2 h-1 w-[calc(100%)] bg-card-border" }), _jsx("div", { "data-name": "progress", className: "absolute top-1/2 w-0 h-1 transition-all duration-300 ease-out bg-success" }), props.children] }));
 };
-export const Step = (props) => {
+export const Step = ({ step, currentStep, status, ...props }) => {
     const parser = useColorParser();
-    const status = getCurrentStatus(props);
-    return (_jsxs(motion.button, { ...props, type: "button", "data-step": props.step, animate: status, className: "relative block w-auto", children: [_jsx(motion.div, { variants: variants, transition: transitions, className: `absolute inset-0 rounded-full ${props.status === "error" ? "bg-danger" : ""}` }), _jsx(motion.div, { initial: false, variants: {
+    const innerStatus = getCurrentStatus(step, currentStep, status);
+    return (_jsxs(motion.button, { ...props, type: "button", "data-step": step, animate: innerStatus, className: "block relative w-auto", children: [_jsx(motion.div, { variants: variants, transition: transitions, className: `absolute inset-0 rounded-full ${innerStatus === "error" ? "bg-danger" : ""}` }), _jsx(motion.div, { initial: false, transition: { duration: 0.2 }, className: "flex relative justify-center items-center w-10 h-10 font-semibold rounded-full", variants: {
                     error: {
                         backgroundColor: parser("var(--danger-DEFAULT)"),
                         borderColor: parser("var(--danger-hover)"),
@@ -74,5 +74,5 @@ export const Step = (props) => {
                         borderColor: parser("var(--success-DEFAULT)"),
                         color: parser("var(--success-foreground)"),
                     },
-                }, transition: { duration: 0.2 }, className: "relative flex h-10 w-10 items-center justify-center rounded-full font-semibold", children: _jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (_jsx(CheckIcon, { className: "h-6 w-6 text-primary-foreground" })) : status === "error" ? (_jsx(ErrorIcon, { className: "h-6 w-6 text-danger-foreground" })) : (_jsx("span", { children: props.step })) }) })] }));
+                }, children: _jsx("div", { className: "flex justify-center items-center", children: innerStatus === "complete" ? (_jsx(CheckIcon, { className: "w-6 h-6 text-primary-foreground" })) : innerStatus === "error" ? (_jsx(ErrorIcon, { className: "w-6 h-6 text-danger-foreground" })) : (_jsx("span", { children: step })) }) })] }));
 };

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

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from "react";
 import { Label } from "../../types";
-export type TabsProps = {
+import { CardProps } from "./card";
+export type TabsProps = Omit<CardProps<"div">, "onChange"> & {
     active: string;
     container?: string;
     className?: string;

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":"AACA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAMzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAiCF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,4CAsFvD,CAAC;AAIF,KAAK,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAAG,cAAc,GACjC,CACM;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GACpC;IACI,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9B,CACN,CAAC;AAEN,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAMzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAiCF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,4CAsFvD,CAAC;AAIF,KAAK,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAAG,cAAc,GACjC,CACM;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GACpC;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9B,CACJ,CAAC;AAEN,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}

package/dist/components/display/tabs.js

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

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

@@ -22,7 +22,7 @@ type MenuItemProps = {
     Right?: React.FC<LucideProps>;
 };
 export declare const MenuItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof MenuItemProps> & MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "open" | "hover" | "asChild" | "restoreFocus" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
+export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "open" | "asChild" | "restoreFocus" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
     hover: boolean;
     open?: boolean;
     nested: boolean;
@@ -34,7 +34,7 @@ export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.Deta
     FloatingComponent: React.ElementType;
 } & {
     label: string;
-}>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "open" | "hover" | "asChild" | "restoreFocus" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
+}>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "open" | "asChild" | "restoreFocus" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
     hover: boolean;
     open?: boolean;
     nested: boolean;

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

@@ -35,7 +35,7 @@ type ModalRef = {
     context: any;
     floating: HTMLElement | null;
 };
-export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "className" | "role" | "onChange" | "type" | "layoutId" | "open" | "position" | "resizer" | "asChild" | "closable" | "animated" | "forceType" | "bodyClassName" | "overlayClassName" | "overlayClickClose" | "interactions" | "trigger" | "ariaTitle"> & {
+export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "className" | "role" | "onChange" | "position" | "open" | "resizer" | "type" | "asChild" | "layoutId" | "trigger" | "animated" | "closable" | "forceType" | "bodyClassName" | "overlayClassName" | "overlayClickClose" | "interactions" | "ariaTitle"> & {
     title: Label;
     ariaTitle?: string;
 } & {
@@ -60,7 +60,7 @@ export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotio
     trigger: Label | React.FC<any>;
 }> & {
     children?: React.ReactNode | undefined;
-}, "ref"> | Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "className" | "role" | "onChange" | "type" | "layoutId" | "open" | "position" | "resizer" | "asChild" | "closable" | "animated" | "forceType" | "bodyClassName" | "overlayClassName" | "overlayClickClose" | "interactions" | "trigger" | "ariaTitle"> & {
+}, "ref"> | Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "className" | "role" | "onChange" | "position" | "open" | "resizer" | "type" | "asChild" | "layoutId" | "trigger" | "animated" | "closable" | "forceType" | "bodyClassName" | "overlayClassName" | "overlayClickClose" | "interactions" | "ariaTitle"> & {
     ariaTitle: string;
     title?: Label;
 } & {

package/dist/components/floating/modal.js

@@ -97,11 +97,11 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     const headingId = useId();
     const descriptionId = useId();
     const isDesktop = useMediaQuery("(min-width: 64rem)");
-    const useResizer = _type !== "dialog";
     const position = fetchPosition(isDesktop, forceType, _type, propsPosition);
     const func = isDesktop ? animations[_type] : forceType ? animations[_type] : animations.sheet;
     const animation = typeof func === "function" ? func(position) : func;
     const type = isDesktop ? _type : forceType ? _type : "sheet";
+    const useResizer = type !== "dialog";
     const floating = useFloating({ open, onOpenChange: onChange });
     const click = useClick(floating.context, {});
     const role = useRole(floating.context, { role: roleName });
@@ -175,7 +175,7 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                                         "aria-modal": open,
                                         ref: mergeRefs(floating.refs.setFloating, removeScrollRef),
                                         className: css(variants({ position, type }), className, "isolate overscroll-contain"),
-                                    }), exit: "exit", layout: true, animate: "enter", initial: "initial", layoutId: layoutId, variants: animation, "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null, title ? (_jsx(motion.header, { ...draggableMotionProps, className: "relative w-full isolate", children: title ? (_jsx("h2", { id: headingId, className: "block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border", children: title })) : null })) : null, _jsx(motion.section, { ref: innerContent, "data-component": "modal-body", dragConstraints: dragConstraints, drag: isDesktop ? "y" : undefined, onDrag: type === "sheet" ? (isDesktop ? onDragBody : undefined) : undefined, className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), onTouchEnd: () => {
+                                    }), exit: "exit", layout: true, animate: "enter", initial: "initial", layoutId: layoutId, variants: animation, "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null, title ? (_jsx(motion.header, { ...draggableMotionProps, className: "relative w-full isolate", children: title ? (_jsx("h2", { id: headingId, className: "block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border", children: title })) : null })) : null, _jsx(motion.section, { ref: innerContent, "data-component": "modal-body", dragConstraints: dragConstraints, drag: isDesktop ? undefined : "y", onDrag: type === "sheet" ? (isDesktop ? undefined : onDragBody) : undefined, className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), onTouchEnd: () => {
                                                 scroll.set(undefined);
                                                 scrollInitial.set(undefined);
                                             }, onTouchStart: e => {

package/dist/components/floating/tooltip.js

@@ -51,5 +51,5 @@ export const Tooltip = forwardRef(function Tooltip({ as, open, title, children,
             return setInnerOpen(false);
         return setInnerOpen(open);
     }, [open]);
-    return (_jsxs(Fragment, { children: [_jsx(Component, { ...getReferenceProps(props), ref: mergeRefs(refs.setReference, outerRef), children: title }), innerOpen && (_jsx(FloatingPortal, { children: _jsxs(Polymorph, { ...getFloatingProps(), ref: refs.setFloating, style: floatingStyles, className: "isolate z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-shadow-floating", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] }) }))] }));
+    return (_jsxs(Fragment, { children: [_jsx(Component, { ...getReferenceProps(props), ref: mergeRefs(refs.setReference, outerRef), children: title }), innerOpen && (_jsx(FloatingPortal, { children: _jsxs(Polymorph, { ...getFloatingProps(), ref: refs.setFloating, style: floatingStyles, className: "p-3 rounded-lg border isolate z-tooltip border-tooltip-border bg-tooltip-background text-tooltip-foreground shadow-shadow-floating", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] }) }))] }));
 });

package/dist/components/form/autocomplete.js

@@ -28,7 +28,7 @@ const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
     return _jsx(motion.li, { ...props, ref: ref, className: "first:rounded-t-lg last:rounded-t-lg" });
 });
 const components = { List, Item };
-const MIN_SIZE = 44;
+const MIN_SIZE = 40;
 export const Autocomplete = forwardRef(({ left, error, right, loading, options, container, rightLabel, interactive, emptyMessage, optionalText, labelClassName, feedback = null, hideLeft = false, required = false, dynamicOption = false, ...props }, externalRef) => {
     const scroller = useRef(null);
     const fieldset = useRef(null);
@@ -217,7 +217,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                     },
                 }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : options.length === 0 ? "" : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.div, { ...getFloatingProps({
                             ref: mergeRefs(removeScrollRef, refs.setFloating),
-                            style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy },
+                            style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy, height: "auto" },
                         }), initial: false, "data-floating": "true", animate: { height: isEmpty ? "auto" : h }, className: "isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating ease-in-out", onAnimationComplete: () => {
                             if (!open)
                                 return setH(0);
@@ -225,7 +225,9 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             const li = ul.querySelectorAll("li").item(0);
                             const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
                             return flushSync(() => setH(sum + 10));
-                        }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h - 10 }, defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-[calc(100%-2px)] overscroll-contain rounded-lg border-floating bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
+                        }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, 
+                                // style={{ height: h - 10 }}
+                                defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-full overscroll-contain rounded-lg border-floating bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
                                     const Label = option.Render ?? Frag;
                                     const active = value === option.value || value === option.label;
                                     const selected = index === i;

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

@@ -3,6 +3,7 @@ import { Override } from "../../types";
 import { CalendarProps } from "../display/calendar";
 import { InputProps } from "./input";
 export type DatePickerProps = Omit<Override<InputProps, CalendarProps & {
+    floating?: boolean;
     clickToClose?: boolean;
 }>, "currency">;
 export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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":"AAGA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC,EAAE,UAAU,CAAC,CAAA;AAkDf,eAAO,MAAM,UAAU,uGA2HtB,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC,EAAE,UAAU,CAAC,CAAA;AAkDf,eAAO,MAAM,UAAU,uGAiItB,CAAC"}

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

@@ -49,7 +49,7 @@ const formatParts = (datetimeFormat, date) => {
 };
 const DATE_TIME_FORMAT = { day: "numeric", month: "numeric", year: "numeric", hour: "numeric", minute: "numeric" };
 const DATE_FORMAT = { day: "numeric", month: "numeric", year: "numeric" };
-export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate, onChange, markToday, clickToClose, type, ...props }, externalRef) => {
+export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate, onChange, markToday, clickToClose, floating = true, type, ...props }, externalRef) => {
     const locale = useLocale(inputLocal);
     const labelId = useId();
     const translation = useTranslations();
@@ -99,5 +99,6 @@ export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate,
     };
     const validDate = isValid(innerDate);
     const htmlValue = validDate ? innerDate.toISOString() : undefined;
-    return (_jsx(Input, { ...props, mask: mask, value: value, id: undefined, name: undefined, "data-value": htmlValue, formNoValidate: !open, "data-target": props.name, "data-component": "date-picker", onChange: onChangeDateInput, required: props.required ?? true, error: open ? undefined : props.error, placeholder: props.placeholder || translation.datepickerPlaceholder(placeholder), right: _jsxs(Fragment, { children: [_jsx("input", { "data-origin": props.name, defaultValue: htmlValue, form: props.form, hidden: true, id: props.name, name: props.name, ref: externalRef, type: "date" }), _jsx(Dropdown, { open: open, onChange: setOpen, buttonProps: { "aria-describedby": labelId }, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), children: _jsx(Calendar, { ...props, type: type, locale: locale, changeOnlyOnClick: true, markToday: markToday, onChange: onChangeDate, disabledDate: disabledDate, date: validDate ? innerDate : undefined }) })] }) }));
+    const CalendarComponent = _jsx(Calendar, { ...props, type: type, locale: locale, changeOnlyOnClick: true, markToday: markToday, onChange: onChangeDate, disabledDate: disabledDate, date: validDate ? innerDate : undefined });
+    return (_jsxs(Fragment, { children: [_jsx(Input, { ...props, mask: mask, value: value, id: undefined, name: undefined, "data-value": htmlValue, formNoValidate: !open, "data-target": props.name, "data-component": "date-picker", onChange: onChangeDateInput, required: props.required ?? true, error: open ? undefined : props.error, placeholder: props.placeholder || translation.datepickerPlaceholder(placeholder), right: floating ? _jsxs(Fragment, { children: [_jsx("input", { "data-origin": props.name, defaultValue: htmlValue, form: props.form, hidden: true, id: props.name, name: props.name, ref: externalRef, type: "date" }), _jsx(Dropdown, { open: open, onChange: setOpen, buttonProps: { "aria-describedby": labelId }, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), children: CalendarComponent })] }) : null }), CalendarComponent] }));
 });

package/dist/components/index.d.ts

@@ -1,41 +1,43 @@
-export * from "./core/button";
-export * from "./core/polymorph";
-export * from "./core/render-on-view";
 export * from "./core/tag";
-export * from "./core/typography";
-export * from "./display/alert";
-export * from "./display/calendar";
+export * from "./form/form";
+export * from "./form/input";
+export * from "./core/button";
+export * from "./form/select";
+export * from "./form/slider";
+export * from "./form/switch";
+export * from "./table/index";
 export * from "./display/card";
+export * from "./display/list";
+export * from "./display/tabs";
+export * from "./display/step";
+export * from "./display/alert";
 export * from "./display/empty";
-export * from "./display/notifications";
-export * from "./display/progress";
 export * from "./display/stats";
-export * from "./display/tabs";
-export * from "./display/timeline";
-export * from "./display/list";
-export * from "./floating/command-palette";
-export * from "./floating/dropdown";
-export * from "./floating/expand";
 export * from "./floating/menu";
+export * from "./form/checkbox";
+export * from "./form/radiobox";
+export * from "./form/textarea";
+export * from "./core/polymorph";
 export * from "./floating/modal";
+export * from "./form/task-list";
+export * from "./core/typography";
+export * from "./display/spinner";
+export * from "./floating/expand";
+export * from "./display/calendar";
+export * from "./display/progress";
+export * from "./display/timeline";
 export * from "./floating/toolbar";
 export * from "./floating/tooltip";
-export * from "./form/autocomplete";
-export * from "./form/checkbox";
 export * from "./form/date-picker";
 export * from "./form/file-upload";
-export * from "./form/form";
-export * from "./form/input";
 export * from "./form/input-field";
+export * from "./floating/dropdown";
+export * from "./form/autocomplete";
 export * from "./form/multi-select";
-export * from "./form/radiobox";
-export * from "./form/select";
-export * from "./form/slider";
-export * from "./form/switch";
-export * from "./form/task-list";
-export * from "./form/textarea";
 export * from "./form/transfer-list";
-export * from "./table/index";
-export { createColumns, createOptionCols, type ColType, useTablePreferences, type TablePagination } from "./table/table-lib";
+export * from "./core/render-on-view";
+export * from "./display/notifications";
+export * from "./floating/command-palette";
 export { formReset } from "./form/formReset";
+export { createColumns, createOptionCols, type ColType, useTablePreferences, type TablePagination } from "./table/table-lib";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC7H,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/index.js

@@ -1,40 +1,42 @@
-export * from "./core/button";
-export * from "./core/polymorph";
-export * from "./core/render-on-view";
 export * from "./core/tag";
-export * from "./core/typography";
-export * from "./display/alert";
-export * from "./display/calendar";
+export * from "./form/form";
+export * from "./form/input";
+export * from "./core/button";
+export * from "./form/select";
+export * from "./form/slider";
+export * from "./form/switch";
+export * from "./table/index";
 export * from "./display/card";
+export * from "./display/list";
+export * from "./display/tabs";
+export * from "./display/step";
+export * from "./display/alert";
 export * from "./display/empty";
-export * from "./display/notifications";
-export * from "./display/progress";
 export * from "./display/stats";
-export * from "./display/tabs";
-export * from "./display/timeline";
-export * from "./display/list";
-export * from "./floating/command-palette";
-export * from "./floating/dropdown";
-export * from "./floating/expand";
 export * from "./floating/menu";
+export * from "./form/checkbox";
+export * from "./form/radiobox";
+export * from "./form/textarea";
+export * from "./core/polymorph";
 export * from "./floating/modal";
+export * from "./form/task-list";
+export * from "./core/typography";
+export * from "./display/spinner";
+export * from "./floating/expand";
+export * from "./display/calendar";
+export * from "./display/progress";
+export * from "./display/timeline";
 export * from "./floating/toolbar";
 export * from "./floating/tooltip";
-export * from "./form/autocomplete";
-export * from "./form/checkbox";
 export * from "./form/date-picker";
 export * from "./form/file-upload";
-export * from "./form/form";
-export * from "./form/input";
 export * from "./form/input-field";
+export * from "./floating/dropdown";
+export * from "./form/autocomplete";
 export * from "./form/multi-select";
-export * from "./form/radiobox";
-export * from "./form/select";
-export * from "./form/slider";
-export * from "./form/switch";
-export * from "./form/task-list";
-export * from "./form/textarea";
 export * from "./form/transfer-list";
-export * from "./table/index";
-export { createColumns, createOptionCols, useTablePreferences } from "./table/table-lib";
+export * from "./core/render-on-view";
+export * from "./display/notifications";
+export * from "./floating/command-palette";
 export { formReset } from "./form/formReset";
+export { createColumns, createOptionCols, useTablePreferences } from "./table/table-lib";

package/dist/components/table/pagination.js

@@ -32,7 +32,7 @@ export const Pagination = (pagination) => {
     const translation = useTranslations();
     const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination.current, pagination.pages]);
     const hasNext = pagination.current < pagination.pages;
-    return (_jsxs("footer", { className: "flex flex-wrap items-center justify-center gap-4 px-1 py-4 lg:flex-nowrap lg:justify-between", children: [_jsx("p", { children: _jsx(translation.tablePaginationFooter, { ...pagination, sizes: pagination.sizes, select: pagination.onChangeSize && Array.isArray(pagination.sizes) ? (_jsxs(Fragment, { children: [_jsx("label", { htmlFor: id, children: translation.tablePaginationSelectLabel }), _jsx("select", { id: id, value: pagination.size, className: "cursor-pointer bg-transparent", onChange: (e) => {
+    return (_jsxs("footer", { className: "flex flex-wrap items-center justify-center gap-4 p-3 border-t-muted text-sm lg:flex-nowrap lg:justify-between", children: [_jsx("p", { children: _jsx(translation.tablePaginationFooter, { ...pagination, sizes: pagination.sizes, select: pagination.onChangeSize && Array.isArray(pagination.sizes) ? (_jsxs(Fragment, { children: [_jsx("label", { htmlFor: id, children: translation.tablePaginationSelectLabel }), _jsx("select", { id: id, value: pagination.size, className: "cursor-pointer bg-transparent", onChange: (e) => {
                                     pagination.onChangeSize?.(Number(e.target.value));
                                 }, children: pagination.sizes.map((value) => (_jsx("option", { value: value, children: value }, `pagination-opt-${value}`))) }), " "] })) : null }) }), _jsx("nav", { children: _jsxs("ul", { className: "flex items-center gap-2", children: [pagination.current > 1 ? (_jsx("li", { children: _jsx(Polymorph, { as: pagination.asLink || "button", href: "previous", className: "", children: translation.tablePaginationPrevious }) })) : null, pageNavigation.map((x) => {
                             if (x === null)

package/dist/hooks/use-form.js

@@ -17,7 +17,7 @@ const isValidJSON = (value) => {
         try {
             value = JSON.stringify(value);
         }
-        catch (error) {
+        catch {
             return false;
         }
     }
@@ -25,7 +25,7 @@ const isValidJSON = (value) => {
         JSON.parse(value);
         return true;
     }
-    catch (error) {
+    catch {
         return false;
     }
 };

package/dist/hooks/use-preferences.d.ts

@@ -0,0 +1,2 @@
+export declare const usePreferences: <T extends string, V>(key: T, defaultValue: V) => readonly [V, (params: Parameters<import("react").Dispatch<import("react").SetStateAction<V>>>[0]) => void | V];
+//# sourceMappingURL=use-preferences.d.ts.map

package/dist/hooks/use-preferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-preferences.d.ts","sourceRoot":"","sources":["../../src/hooks/use-preferences.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,EAChD,KAAK,CAAC,EACN,cAAc,CAAC,2BASJ,UAAU,6DAAiB,CAAC,CAAC,CAAC,cAc1C,CAAC"}

package/dist/hooks/use-preferences.js

@@ -0,0 +1,23 @@
+import { useCallback, useState } from "react";
+import { Is } from "sidekicker";
+import { LocalStorage } from "storage-manager-js";
+export const usePreferences = (key, defaultValue) => {
+    const [state, setState] = useState(() => {
+        const saved = LocalStorage.get(key);
+        if (saved)
+            return saved;
+        return defaultValue;
+    });
+    const setCallback = useCallback((params) => {
+        if (Is.function(params)) {
+            return setState((prev) => {
+                const result = params(prev);
+                LocalStorage.set(key, result);
+                return result;
+            });
+        }
+        LocalStorage.set(key, params);
+        return params;
+    }, [key]);
+    return [state, setCallback];
+};