@g4rcez/components 0.2.4 → 0.2.6

package/dist/preset/src/styles/common.js

@@ -18,7 +18,7 @@ export var spacing = {
 };
 export var zIndex = {
     normal: "1",
-    navbar: "19",
+    navbar: "22",
     calendar: "2",
     overlay: "21",
     tooltip: "20",

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

@@ -1,16 +1,46 @@
-import { type VariantProps } from "class-variance-authority";
-import React from "react";
-import { type Label } from "../../types";
+import React, { PropsWithChildren } from "react";
+import { CvaVariants, type Label } from "../../types";
 import { PolymorphicProps } from "./polymorph";
-declare const buttonVariants: (props?: ({
-    size?: "big" | "small" | "default" | "icon" | "min" | null | undefined;
-    rounded?: "circle" | "default" | "rough" | "squared" | null | undefined;
-    theme?: "main" | "disabled" | "raw" | "loading" | "info" | "warn" | "muted" | "danger" | "neutral" | "primary" | "success" | "secondary" | "ghost-info" | "ghost-warn" | "ghost-danger" | "ghost-primary" | "ghost-success" | "ghost-secondary" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export type ButtonProps<T extends React.ElementType = "button"> = PolymorphicProps<VariantProps<typeof buttonVariants> & Partial<{
+declare const variants: {
+    size: {
+        icon: string;
+        big: string;
+        default: string;
+        min: string;
+        small: string;
+    };
+    rounded: {
+        rough: string;
+        squared: string;
+        default: string;
+        circle: string;
+    };
+    theme: {
+        raw: string;
+        disabled: string;
+        loading: string;
+        main: string;
+        info: string;
+        warn: string;
+        muted: string;
+        danger: string;
+        neutral: string;
+        primary: string;
+        success: string;
+        secondary: string;
+        "ghost-info": string;
+        "ghost-warn": string;
+        "ghost-danger": string;
+        "ghost-primary": string;
+        "ghost-success": string;
+        "ghost-secondary": string;
+    };
+};
+type Variants = CvaVariants<typeof variants>;
+export type ButtonProps<T extends React.ElementType = "button"> = PropsWithChildren<PolymorphicProps<Variants & Partial<{
     icon: Label;
     loading: boolean;
-}>, T>;
-export declare const Button: <T extends React.ElementType = "button">(props: ButtonProps<T>) => any;
+}>, T>>;
+export declare const Button: <T extends React.ElementType = "button">(props: ButtonProps<T>) => React.ReactNode;
 export {};
 //# sourceMappingURL=button.d.ts.map

package/dist/src/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,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,cAAc;;;;mFAyCnB,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,GAwB7E,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCb,CAAC;AAUF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,EAAE,CAAC,CAAC,CAC7E,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwB5F,CAAC"}

package/dist/src/components/core/button.js

@@ -3,42 +3,43 @@ import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
-const buttonVariants = cva("relative overflow-hidden inline-flex duration-500 enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 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", {
-    variants: {
-        size: {
-            icon: "p-1",
-            big: "h-12 px-6 py-4",
-            default: "h-10 px-4 py-2",
-            min: "h-7 px-3 py-1 text-sm",
-            small: "h-8 px-4 py-2 text-sm",
-        },
-        rounded: {
-            rough: "rounded-sm",
-            squared: "rounded-none",
-            default: "rounded-button",
-            circle: "rounded-full aspect-square",
-        },
-        theme: {
-            raw: "",
-            disabled: "bg-disabled opacity-70",
-            loading: "animate-pulse bg-disabled",
-            main: "bg-primary text-primary-foreground",
-            info: "bg-button-info-bg text-button-info-text",
-            warn: "bg-button-warn-bg text-button-warn-text",
-            muted: "bg-button-muted-bg text-button-muted-text",
-            danger: "bg-button-danger-bg text-button-danger-text",
-            neutral: "bg-transparent border-2 border-card-border",
-            primary: "bg-button-primary-bg text-button-primary-text",
-            success: "bg-button-success-bg text-button-success-text",
-            secondary: "bg-button-secondary-bg text-button-secondary-text",
-            "ghost-info": "bg-transparent hover:bg-info/20 border border-info text-info",
-            "ghost-warn": "bg-transparent hover:bg-warn/20 border border-warn text-warn",
-            "ghost-danger": "bg-transparent hover:bg-danger/20 border border-danger text-danger",
-            "ghost-primary": "bg-transparent hover:bg-primary/20 border border-primary text-primary",
-            "ghost-success": "bg-transparent hover:bg-success/20 border border-success text-success",
-            "ghost-secondary": "bg-transparent hover:bg-secondary/20 border border-secondary text-secondary",
-        },
+const variants = {
+    size: {
+        icon: "p-1",
+        big: "h-12 px-6 py-4",
+        default: "h-10 px-4 py-2",
+        min: "h-7 px-3 py-1 text-sm",
+        small: "h-8 px-4 py-2 text-sm",
+    },
+    rounded: {
+        rough: "rounded-sm",
+        squared: "rounded-none",
+        default: "rounded-button",
+        circle: "rounded-full aspect-square",
     },
+    theme: {
+        raw: "",
+        disabled: "bg-disabled opacity-70",
+        loading: "animate-pulse bg-disabled",
+        main: "bg-primary text-primary-foreground",
+        info: "bg-button-info-bg text-button-info-text",
+        warn: "bg-button-warn-bg text-button-warn-text",
+        muted: "bg-button-muted-bg text-button-muted-text",
+        danger: "bg-button-danger-bg text-button-danger-text",
+        neutral: "bg-transparent border-2 border-card-border",
+        primary: "bg-button-primary-bg text-button-primary-text",
+        success: "bg-button-success-bg text-button-success-text",
+        secondary: "bg-button-secondary-bg text-button-secondary-text",
+        "ghost-info": "bg-transparent hover:bg-info/20 border border-info text-info",
+        "ghost-warn": "bg-transparent hover:bg-warn/20 border border-warn text-warn",
+        "ghost-danger": "bg-transparent hover:bg-danger/20 border border-danger text-danger",
+        "ghost-primary": "bg-transparent hover:bg-primary/20 border border-primary text-primary",
+        "ghost-success": "bg-transparent hover:bg-success/20 border border-success text-success",
+        "ghost-secondary": "bg-transparent hover:bg-secondary/20 border border-secondary text-secondary",
+    },
+};
+const buttonVariants = cva("relative overflow-hidden inline-flex duration-500 enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 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", {
+    variants,
     defaultVariants: { theme: "main", size: "default", rounded: "default" },
 });
 export const Button = forwardRef(function Button({ className, icon, loading, theme, type = "button", size, rounded, ...props }, ref) {

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

@@ -1,11 +1,9 @@
 import type React from "react";
-import { Any, Override } from "../../types";
-type TransformProps<E extends React.ElementType = React.ElementType> = {
+import { Merge, Override } from "../../types";
+type TransformProps<E extends React.ElementType = React.ElementType> = Merge<{
     as?: E;
-};
-export type PolymorphicProps<P extends Any, E extends React.ElementType> = Override<TransformProps<E> & Omit<React.ComponentProps<E>, keyof TransformProps>, P>;
-type InnerPolymorphicProps<E extends React.ElementType> = TransformProps<E> & Omit<React.ComponentProps<E>, keyof TransformProps>;
-declare const defaultElement = "span";
-export declare const Polymorph: <E extends React.ElementType = typeof defaultElement>(props: InnerPolymorphicProps<E>) => React.ReactElement | null;
+} & React.ComponentPropsWithRef<E>>;
+export type PolymorphicProps<P extends object, E extends React.ElementType> = Override<TransformProps<E>, P>;
+export declare const Polymorph: <E extends React.ElementType = React.ElementType>(props: TransformProps<E>) => React.ReactNode;
 export {};
 //# sourceMappingURL=polymorph.d.ts.map

package/dist/src/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,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI;IACnE,EAAE,CAAC,EAAE,CAAC,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,GAAG,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,QAAQ,CAC/E,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,EACvE,CAAC,CACJ,CAAC;AAEF,KAAK,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC;AAElI,QAAA,MAAM,cAAc,SAAS,CAAC;AAE9B,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,OAAO,cAAc,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAAY,GAAG,IAI1H,CAAC"}
+{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE9C,KAAK,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC;IACzE,EAAE,CAAC,EAAE,CAAC,CAAA;CACT,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpC,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAI7G,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAKrG,CAAC"}

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

@@ -1,15 +1,31 @@
 import { type VariantProps } from "class-variance-authority";
 import React from "react";
-import { Label } from "../../types";
+import { CvaVariants, Label } from "../../types";
 import { PolymorphicProps } from "./polymorph";
 declare const indicatorVariant: (props?: ({
     theme?: "info" | "warn" | "muted" | "danger" | "primary" | "success" | "secondary" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const tagVariants: (props?: ({
-    size?: "big" | "small" | "default" | "icon" | null | undefined;
-    theme?: "disabled" | "loading" | "info" | "warn" | "muted" | "danger" | "neutral" | "primary" | "success" | "secondary" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export type TagProps<T extends React.ElementType = "span"> = PolymorphicProps<VariantProps<typeof tagVariants> & Partial<{
+declare const variants: {
+    readonly size: {
+        readonly icon: "p-1";
+        readonly big: "h-12 px-6 py-4";
+        readonly default: "h-8 px-4 py-2";
+        readonly small: "h-6 p-2 px-3 text-sm";
+    };
+    readonly theme: {
+        readonly primary: "bg-tag-primary-bg text-tag-primary-text";
+        readonly danger: "bg-tag-danger-bg text-tag-danger-text";
+        readonly info: "bg-tag-info-bg text-tag-info-text";
+        readonly success: "bg-tag-success-bg text-tag-success-text";
+        readonly secondary: "bg-tag-secondary-bg text-tag-secondary-text";
+        readonly warn: "bg-tag-warn-bg text-tag-warn-text";
+        readonly muted: "bg-tag-muted-bg text-tag-muted-text";
+        readonly neutral: "bg-transparent border border-card-border";
+        readonly disabled: "bg-disabled duration-700 opacity-70";
+        readonly loading: "animate-pulse bg-disabled duration-700 opacity-70";
+    };
+};
+export type TagProps<T extends React.ElementType = "span"> = PolymorphicProps<CvaVariants<typeof variants> & Partial<{
     icon: Label;
     loading: boolean;
     indicator: VariantProps<typeof indicatorVariant>["theme"];

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,gBAAgB;;mFAYpB,CAAC;AAEH,QAAA,MAAM,WAAW;;;mFAsBf,CAAC;AAEH,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,YAAY,CAAC,OAAO,WAAW,CAAC,GAC5B,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC7D,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAkBrE,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,gBAAgB;;mFAYpB,CAAC;AAEH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;CAmBJ,CAAC;AAOX,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,WAAW,CAAC,OAAO,QAAQ,CAAC,GACxB,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC7D,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAkB9E,CAAC"}

package/dist/src/components/core/tag.js

@@ -16,27 +16,28 @@ const indicatorVariant = cva("size-2.5 aspect-square rounded-full border-0", {
         },
     },
 });
-const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-2 border-transparent items-center justify-center align-middle whitespace-nowrap", {
-    variants: {
-        size: {
-            icon: "p-1",
-            big: "h-12 px-6 py-4",
-            default: "h-8 px-4 py-2",
-            small: "h-6 p-2 px-3 text-sm",
-        },
-        theme: {
-            primary: "bg-tag-primary-bg text-tag-primary-text",
-            danger: "bg-tag-danger-bg text-tag-danger-text",
-            info: "bg-tag-info-bg text-tag-info-text",
-            success: "bg-tag-success-bg text-tag-success-text",
-            secondary: "bg-tag-secondary-bg text-tag-secondary-text",
-            warn: "bg-tag-warn-bg text-tag-warn-text",
-            muted: "bg-tag-muted-bg text-tag-muted-text",
-            neutral: "bg-transparent border border-card-border",
-            disabled: "bg-disabled duration-700 opacity-70",
-            loading: "animate-pulse bg-disabled duration-700 opacity-70",
-        },
+const variants = {
+    size: {
+        icon: "p-1",
+        big: "h-12 px-6 py-4",
+        default: "h-8 px-4 py-2",
+        small: "h-6 p-2 px-3 text-sm",
+    },
+    theme: {
+        primary: "bg-tag-primary-bg text-tag-primary-text",
+        danger: "bg-tag-danger-bg text-tag-danger-text",
+        info: "bg-tag-info-bg text-tag-info-text",
+        success: "bg-tag-success-bg text-tag-success-text",
+        secondary: "bg-tag-secondary-bg text-tag-secondary-text",
+        warn: "bg-tag-warn-bg text-tag-warn-text",
+        muted: "bg-tag-muted-bg text-tag-muted-text",
+        neutral: "bg-transparent border border-card-border",
+        disabled: "bg-disabled duration-700 opacity-70",
+        loading: "animate-pulse bg-disabled duration-700 opacity-70",
     },
+};
+const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-2 border-transparent items-center justify-center align-middle whitespace-nowrap", {
+    variants,
     defaultVariants: { theme: "primary", size: "default" },
 });
 export const Tag = forwardRef(function Tag({ className, indicator = undefined, icon, loading, theme, size, ...props }, ref) {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/display/alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAU,MAAM,cAAc,CAAC;AAEvD,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,4CAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;mFAajB,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,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,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,GA2CxE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAU,MAAM,cAAc,CAAC;AAEvD,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,4CAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,WAAW,CAAC,OAAO,aAAa,CAAC,GAC7B,OAAO,CAAC;IACJ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,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,GA2CxE,CAAC"}

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

@@ -16,18 +16,19 @@ const transition = {
     ease: [0.04, 0.62, 0.23, 0.98],
 };
 export const Collapse = (props) => (_jsx(motion.div, { ...props, layout: true, layoutRoot: true, layoutScroll: true, initial: false, variants: variants, exit: variants.false, transition: transition, "aria-hidden": !props.open, "data-component": "collapse", animate: props.open.toString(), className: css("aria-hidden:pointer-events-none", props.className), children: props.children }));
-const alertVariants = cva("p-4 w-full block border relative rounded-lg text-sm", {
-    variants: {
-        theme: {
-            primary: "bg-alert-primary-bg text-alert-primary-text border-alert-primary-border",
-            danger: "bg-alert-danger-bg text-alert-danger-text border-alert-danger-border",
-            info: "bg-alert-info-bg text-alert-info-text border-alert-info-border",
-            success: "bg-alert-success-bg text-alert-success-text border-alert-success-border",
-            secondary: "bg-alert-secondary-bg text-alert-secondary-text border-alert-secondary-border",
-            warn: "bg-alert-warn-bg text-alert-warn-text border-alert-warn-border",
-            neutral: "bg-transparent border border-card-border text-alert-primary-text",
-        },
+const themeVariants = {
+    theme: {
+        primary: "bg-alert-primary-bg text-alert-primary-text border-alert-primary-border",
+        danger: "bg-alert-danger-bg text-alert-danger-text border-alert-danger-border",
+        info: "bg-alert-info-bg text-alert-info-text border-alert-info-border",
+        success: "bg-alert-success-bg text-alert-success-text border-alert-success-border",
+        secondary: "bg-alert-secondary-bg text-alert-secondary-text border-alert-secondary-border",
+        warn: "bg-alert-warn-bg text-alert-warn-text border-alert-warn-border",
+        neutral: "bg-transparent border border-card-border text-alert-primary-text",
     },
+};
+const alertVariants = cva("p-4 w-full block border relative rounded-lg text-sm", {
+    variants: themeVariants,
     defaultVariants: { theme: "neutral" },
 });
 export const Alert = forwardRef(function Alert({ className, theme, Icon, onClose, open = true, ...props }, ref) {

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

@@ -21,7 +21,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" | "open" | "children" | "hover" | "asChild" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
+export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "open" | "hover" | "asChild" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
     hover: boolean;
     open?: boolean;
     nested: boolean;
@@ -32,7 +32,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" | "open" | "children" | "hover" | "asChild" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
+}>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "open" | "hover" | "asChild" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
     hover: boolean;
     open?: boolean;
     nested: boolean;

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

@@ -8,7 +8,7 @@ import { AnimatePresence, motion, useMotionValue } from "motion/react";
 import { Fragment, useId } from "react";
 import { useMediaQuery } from "../../hooks/use-media-query";
 import { useRemoveScroll } from "../../hooks/use-remove-scroll";
-import { css } from "../../lib/dom";
+import { css, mergeRefs } from "../../lib/dom";
 const animationDuration = "600ms";
 const drawerLeft = {
     exit: { translateX: ["0%", "-30%"], opacity: 0, animationDuration },
@@ -86,7 +86,7 @@ const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
     return forceType ? positions[type] : positions.sheet;
 };
 export const Modal = ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer = true, closable = true, forceType = false, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, ariaTitle, ...props }) => {
-    useRemoveScroll(open);
+    const removeScrollRef = useRemoveScroll(open, "overflow-hidden");
     const headingId = useId();
     const descriptionId = useId();
     const isDesktop = useMediaQuery("(min-width: 64rem)");
@@ -103,7 +103,7 @@ export const Modal = ({ open, title, footer, asChild, trigger, children, layoutI
     const Trigger = trigger;
     const floatingSize = useMotionValue(undefined);
     const onClose = () => onChange(false);
-    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: refs.setReference, ...getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: false, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", initial: "initial", variants: animation, "data-component": "modal", ref: refs.setFloating, "aria-modal": open, layoutId: layoutId, className: css(variants({ position, type }), className), style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, ...(title
+    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: refs.setReference, ...getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: false, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", "aria-modal": open, initial: "initial", layoutId: layoutId, variants: animation, "data-component": "modal", ref: mergeRefs(refs.setFloating, removeScrollRef), className: css(variants({ position, type }), className), style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, ...(title
                                     ? {
                                         "aria-labelledby": headingId,
                                         "aria-describedby": descriptionId,

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAOzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGAyWxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAQzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAmCF,eAAO,MAAM,YAAY,yGA4VxB,CAAC"}

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

@@ -8,8 +8,9 @@ import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { Virtuoso } from "react-virtuoso";
 import { Is } from "sidekicker";
+import { useRemoveScroll } from "../../hooks/use-remove-scroll";
 import { useTranslations } from "../../hooks/use-translations";
-import { css, dispatchInput, initializeInputDataset } from "../../lib/dom";
+import { css, dispatchInput, getRemainingSize, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { safeRegex } from "../../lib/fns";
 import { InputField } from "./input-field";
 const Frag = (props) => _jsx(Fragment, { children: props.children });
@@ -22,20 +23,20 @@ const transitionStyles = {
 const fuzzyOptions = { caseSensitive: false, sort: false };
 const emptyRef = [];
 const List = forwardRef(function VirtualList(props, ref) {
-    return (_jsx(motion.ul, { ...props, ref: ref, className: "w-full rounded-lg border-b border-tooltip-border last:border-transparent", children: _jsx(AnimatePresence, { children: props.children }) }));
+    return (_jsx(motion.ul, { ...props, ref: ref, className: "w-full overscroll-contain rounded-lg border-b border-tooltip-border last:border-transparent", children: _jsx(AnimatePresence, { children: props.children }) }));
 });
 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 DEFAULT_SIZE = 320;
 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);
     const virtuoso = useRef(null);
     const defaults = props.value ?? props.defaultValue ?? "";
     const translation = useTranslations();
-    const [h, setH] = useState(() => Math.min(DEFAULT_SIZE, MIN_SIZE * options.length));
+    const [h, setH] = useState(() => Math.min(320, MIN_SIZE * options.length));
     const [open, setOpen] = useState(false);
     const [shadow, setShadow] = useState("");
     const [value, setValue] = useState(defaults);
@@ -53,6 +54,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         ]
         : options;
     const list = new Fuzzy(innerOptions, ["value", "label"], fuzzyOptions).search(shadow);
+    const removeScrollRef = useRemoveScroll(open, "block-only");
     const setClosed = () => {
         setOpen(false);
         setH(0);
@@ -61,35 +63,10 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const pattern = dynamicOption
         ? undefined
         : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
-    useEffect(() => {
-        if (props.value) {
-            const item = options.find((x) => x.value === props.value);
-            setValue(item?.label ?? props.value);
-        }
-    }, [props.value]);
-    useEffect(() => {
-        if (!open)
-            setH(0);
-    }, [open]);
-    useEffect(() => {
-        if (!open)
-            return;
-        const ul = refs.floating;
-        if (ul.current === null)
-            return;
-        let size = 0;
-        const items = Array.from(ul.current.querySelectorAll("li")).slice(0, Math.min(displayList.length, 10));
-        items.forEach((x) => {
-            const rect = x.getBoundingClientRect();
-            size += rect.height;
-        });
-        const s = Math.min(size, DEFAULT_SIZE);
-        setH(s);
-    }, [shadow, open]);
     const { x, y, strategy, refs, context } = useFloating({
         open,
         transform: true,
-        strategy: "absolute",
+        placement: "bottom-start",
         onOpenChange: setOpen,
         whileElementsMounted: autoUpdate,
         middleware: [
@@ -97,22 +74,14 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
             size({
                 padding: 10,
                 elementContext: "reference",
-                apply(a) {
-                    const w = fieldset.current.getBoundingClientRect().width;
-                    const ul = a.elements.floating.querySelector("ul");
+                apply(args) {
+                    const ul = args.elements.floating.querySelector("ul");
                     const fullSize = ul?.getBoundingClientRect().height || 0;
-                    const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE);
-                    flushSync(() => setTimeout(() => {
-                        const currentH = ul?.getBoundingClientRect().height ?? 0;
-                        if (currentH < MIN_SIZE)
-                            return void setH(maxH);
-                        return void setH(Math.min(currentH, DEFAULT_SIZE));
-                    }, 50));
-                    Object.assign(a.elements.floating.style, {
-                        width: `${w}px`,
-                        maxWidth: `${w}px`,
-                        maxHeight: `${DEFAULT_SIZE}`,
-                    });
+                    const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
+                    const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE, args.availableHeight);
+                    const size = displayList.length === 0 ? MIN_SIZE : Math.min(maxH, DEFAULT_SIZE, fullSize);
+                    const mw = `${fieldset.current.getBoundingClientRect().width}px`;
+                    Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw, height: size });
                 },
             }),
         ],
@@ -132,9 +101,23 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
             focusItemOnOpen: "auto",
             openOnArrowKeyDown: true,
             scrollItemIntoView: true,
-            // onNavigate: (n) => setIndex((prev) => n ?? prev)
         }),
     ]);
+    useEffect(() => {
+        if (props.value) {
+            const item = options.find((x) => x.value === props.value);
+            setValue(item?.label ?? props.value);
+        }
+    }, [props.value]);
+    useEffect(() => {
+        if (!open)
+            return setH(0);
+        const inputRef = refs.reference;
+        if (inputRef.current === null)
+            return;
+        const s = getRemainingSize(inputRef.current, window.innerHeight);
+        setTimeout(() => setH(Math.min(s, displayList.length * MIN_SIZE)), 100);
+    }, [shadow, open, refs.reference]);
     useEffect(() => {
         const input = refs.reference.current;
         if (!input)
@@ -226,15 +209,17 @@ 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 : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.ul, { ...getFloatingProps({
-                            ref: refs.setFloating,
-                            style: {
-                                ...transitions.styles,
-                                top: y ?? 0,
-                                position: strategy,
-                                left: (x ?? 0) + (value ? 36 : 25),
-                            },
-                        }), initial: false, "data-floating": "true", animate: { height: isEmpty ? "auto" : h }, className: "isolate z-floating m-0 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: [isEmpty ? (_jsx("li", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h }, components: components, className: "rounded-lg border-floating-border bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
+                }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { 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 },
+                        }), 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);
+                            const ul = refs.floating.current;
+                            const li = ul.querySelectorAll("li").item(0);
+                            const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
+                            return flushSync(() => setH(sum + 2));
+                        }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h }, defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-80 overscroll-contain rounded-lg border-floating-border bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
                                     const Label = option.Render ?? Frag;
                                     const active = value === option.value || value === option.label;
                                     const selected = index === i;
@@ -248,7 +233,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                                             "aria-selected": active,
                                             "aria-busy": option.disabled,
                                             onClick: () => onSelect(option, i),
-                                            className: `cursor-pointer w-full p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
+                                            className: `cursor-pointer min-h-10 hover:bg-floating-hover w-full p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
                                         }), children: _jsx(Label, { ...props, label: option.label, value: option.value, children: children }) }));
                                 } })] }) })) : null })] }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAOlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA0DF,eAAO,MAAM,WAAW,wGAkYvB,CAAC"}
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAQlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA4DF,eAAO,MAAM,WAAW,wGAsZvB,CAAC"}