pentatrion-design 1.0.0 → 1.0.1

package/dist/components/accordion/AccordionItem.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+interface Props extends ComponentProps<"div"> {
+    name: string;
+}
+export declare function AccordionItem({ name, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AccordionItem.d.ts.map

package/dist/components/accordion/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAM,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAQ/D"}

package/dist/components/accordion/AccordionItem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAccordion } from "./useAccordion";
+import clsx from "clsx";
+export function AccordionItem({ name, children, ...rest }) {
+    const { value } = useAccordion();
+    return (_jsx("div", { ...rest, className: clsx(value !== name && "hidden"), children: children }));
+}

package/dist/components/button/Button.js

@@ -29,7 +29,7 @@ export const buttonVariants = cva("relative box-border inline-flex items-center
             custom: "",
         },
         icon: {
-            true: "rounded-[calc(var(--h-button)/2)] min-w-(--h-button) [&_i,&_img,&_svg]:w-(--h-button) justify-center [&_:last-child:not(i,img,svg)]:pr-4",
+            true: "rounded-[calc(var(--h-button)/2)] min-w-(--h-button) [&_i,&_img,&_svg]:w-(--h-button) justify-center [&_:last-child:not(i,img,svg,strong)]:pr-4",
             false: "rounded-2xl px-4",
             custom: "",
         },

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

@@ -1,4 +1,7 @@
-import { ComponentPropsWithRef } from "react";
-import { ButtonProps } from "./Button.js";
-export type LinkButtonProps = ComponentPropsWithRef<"a"> & Pick<ButtonProps, "withRipple" | "variant" | "size" | "color" | "selected" | "icon" | "disabled" | "width">;
-export declare const LinkButton: (props: import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Pick<ButtonProps, "color" | "selected" | "disabled" | "size" | "width" | "icon" | "withRipple" | "variant"> & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+import { ComponentProps, RefObject } from "react";
+import { ButtonProps } from "./Button";
+export type HrefButtonProps = ComponentProps<"a"> & Pick<ButtonProps, "withRipple" | "variant" | "size" | "color" | "selected" | "icon" | "disabled" | "width"> & {
+    ref?: RefObject<HTMLAnchorElement>;
+};
+export declare function HrefButton({ withRipple, variant, color, size, width, className, disabled, children, selected, icon, href, ref, ...props }: HrefButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LinkButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,GAAG,CAAC,GAC/C,IAAI,CACF,WAAW,EACX,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACzF,GAAG;IAAE,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAAE,CAAC;AAE7C,wBAAgB,UAAU,CAAC,EACzB,UAAiB,EACjB,OAAqB,EACrB,KAAgB,EAChB,IAAe,EACf,KAAa,EACb,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,IAAY,EACZ,IAAI,EACJ,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,2CA8BjB"}

package/dist/components/button/LinkButton.js

@@ -1,11 +1,11 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
-import { useRipple } from "../../hooks/useRipple.js";
-import { buttonVariants } from "./Button.js";
-export const LinkButton = forwardRef(function LinkButton({ withRipple = true, variant = "contained", color = "yellow", size = "medium", width = "fit", className, disabled, children, selected = false, icon = false, href, ...props }, ref) {
+import { useRipple } from "../../hooks/useRipple";
+import { buttonVariants } from "./Button";
+export function HrefButton({ withRipple = true, variant = "contained", color = "yellow", size = "medium", width = "fit", className, disabled, children, selected = false, icon = false, href, ref, ...props }) {
     const anchorRef = useRef(null);
     useImperativeHandle(ref, () => anchorRef.current);
     const ripples = useRipple(anchorRef);
     return (_jsxs("a", { role: "button", href: href, ref: anchorRef, className: clsx(buttonVariants({ variant, size, width, icon: size === "custom" ? "custom" : icon }), className, selected && "active"), "data-color": color, "data-variant": variant, "aria-checked": selected, "aria-disabled": disabled, ...props, children: [!disabled && withRipple && ripples, children] }));
-});
+}

package/dist/components/dropdown-menu/useDropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/useDropdownMenu.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAiB1D,wBAAgB,eAAe,CAAC,EAC9B,WAAmB,EACnB,SAAoB,EACpB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EACL,KAAa,GACd,EAAE,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA0F2mhC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADxzhC"}
+{"version":3,"file":"useDropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/useDropdownMenu.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAiB1D,wBAAgB,eAAe,CAAC,EAC9B,WAAmB,EACnB,SAAoB,EACpB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EACL,KAAa,GACd,EAAE,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA0F81jC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EAD3ikC"}

package/dist/components/dropdown-menu/useDropdownMenuContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownMenuContext.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/useDropdownMenuContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,GAAG,IAAI,CAAC;AAE7D,eAAO,MAAM,mBAAmB,sCAAmC,CAAC;AAEpE,wBAAgB,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCASiolC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EAD31lC"}
+{"version":3,"file":"useDropdownMenuContext.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/useDropdownMenuContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,GAAG,IAAI,CAAC;AAE7D,eAAO,MAAM,mBAAmB,sCAAmC,CAAC;AAEpE,wBAAgB,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCASo3nC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EAD9koC"}

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../src/components/form/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAS,MAAM,OAAO,CAAC;AAIzD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,MAAM,EACN,OAAO,EACP,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,iBAAwB,EACxB,aAAa,EAAE,UAAU,EACzB,SAAS,GACV,EAAE,eAAe,2CAuDjB"}
+{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../src/components/form/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAS,MAAM,OAAO,CAAC;AAIzD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,MAAM,EACN,OAAO,EACP,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,iBAAwB,EACxB,aAAa,EAAE,UAAU,EACzB,SAAS,GACV,EAAE,eAAe,2CAyDjB"}

package/dist/components/form/InputField.js

@@ -13,6 +13,7 @@ export function InputField({ label, hint, description, errors, warning, id: prov
     const color = errors ? "red" : warning ? "orange" : "yellow";
     const showLabel = preventLayerShift || label || hint;
     const showFooter = preventLayerShift || errorsElement || warningElement;
-    return (_jsxs("div", { role: "group", className: className, children: [showLabel &&
+    const testIdProp = dataTestId ? { "data-testid": `input-field-${dataTestId}` } : {};
+    return (_jsxs("div", { role: "group", className: className, ...testIdProp, children: [showLabel &&
                 (label || hint ? (_jsxs("label", { className: "mb-1 flex flex-wrap items-center justify-between", htmlFor: id, children: [labelElement, hintElement] })) : (_jsx("label", { htmlFor: id, className: "invisible" }))), description && _jsx("div", { className: "text-body-sm text-gray-6 mb-2", children: description }), _jsx(Slot, { id: id, color: color, children: children }), showFooter && (_jsx("div", { className: "text-body-sm text-gray-6 mt-1 min-h-5", children: errorsElement || warningElement }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../src/components/input/Color.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,UAAiB,EACjB,KAAgB,EAChB,KAAK,EACL,SAAiB,EACjB,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,2CAgCZ"}
+{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../src/components/input/Color.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,UAAiB,EACjB,KAAgB,EAChB,KAAK,EACL,SAAiB,EACjB,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,2CAuCZ"}

package/dist/components/input/Color.js

@@ -7,5 +7,5 @@ export function Color({ value, withRipple = true, color = "yellow", label, showV
     const buttonRef = useRef(null);
     useImperativeHandle(ref, () => buttonRef.current);
     const ripples = useRipple(buttonRef);
-    return (_jsxs("button", { ref: buttonRef, "data-color": color, className: "p8n-input-text relative flex h-8 overflow-clip rounded-2xl p-1 outline-offset-[-1px]", ...rest, children: [withRipple && ripples, _jsx("span", { className: clsx("flex h-full items-center justify-center rounded-2xl px-2", valueToShow === null && "min-w-12", className), style: { backgroundColor: value }, children: valueToShow })] }));
+    return (_jsxs("button", { ref: buttonRef, "data-color": color, className: "p8n-input-text group relative flex h-8 cursor-pointer overflow-clip rounded-2xl p-1 outline-offset-[-1px] active:translate-y-[1px]", ...rest, children: [withRipple && ripples, _jsx("span", { className: clsx("absolute inset-1 flex items-center justify-center rounded-2xl transition-transform group-hover:scale-150", valueToShow === null && "min-w-12", className), style: { backgroundColor: value } }), _jsx("span", { className: clsx("relative flex h-full items-center justify-center px-2", valueToShow === null && "min-w-12", className), children: valueToShow })] }));
 }

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

@@ -5,7 +5,8 @@ interface TotpInputProps {
     type?: "number" | "alphabet";
     autoFocus?: boolean;
     autoComplete?: "one-time-code";
+    name?: string;
 }
-export declare function TotpInput({ value, length, onValue, type, autoFocus, }: TotpInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function TotpInput({ value, length, onValue, type, autoFocus, name, }: TotpInputProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TotpInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TotpInput.d.ts","sourceRoot":"","sources":["../../../src/components/input/TotpInput.tsx"],"names":[],"mappings":"AAIA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC;AAWD,wBAAgB,SAAS,CAAC,EACxB,KAAU,EACV,MAAM,EACN,OAAO,EACP,IAAiB,EACjB,SAAS,GACV,EAAE,cAAc,2CAsIhB"}
+{"version":3,"file":"TotpInput.d.ts","sourceRoot":"","sources":["../../../src/components/input/TotpInput.tsx"],"names":[],"mappings":"AAIA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAWD,wBAAgB,SAAS,CAAC,EACxB,KAAU,EACV,MAAM,EACN,OAAO,EACP,IAAiB,EACjB,SAAS,EACT,IAAI,GACL,EAAE,cAAc,2CAuIhB"}

package/dist/components/input/TotpInput.js

@@ -9,7 +9,7 @@ const getIsValidValue = (value, type) => {
     }
     return /[0-9A-Za-z]/.test(value);
 };
-export function TotpInput({ value = "", length, onValue, type = "alphabet", autoFocus, }) {
+export function TotpInput({ value = "", length, onValue, type = "alphabet", autoFocus, name, }) {
     const list = useMemo(() => Array.from({ length }), [length]);
     const splitValues = value.split("");
     const values = list.map((_, i) => {
@@ -51,7 +51,7 @@ export function TotpInput({ value = "", length, onValue, type = "alphabet", auto
             // trim only for replacing ' ' with ''
             const value = values[i].trim();
             const isValidValue = getIsValidValue(value, type);
-            return (_jsx(Fragment, { children: _jsx(Input, { size: "custom", autoFocus: i === focusIndex ? autoFocus : undefined, type: type === "number" ? "tel" : "text", inputMode: type === "number" ? "numeric" : undefined, className: clsx("2sm:w-16 h-(--h-input) w-12 shrink-0 p-0 [--h-input:72px]"), inputClassName: "text-center text-body-3xl", autoCapitalize: "off", autoCorrect: "off", spellCheck: "false", ref: (ref) => {
+            return (_jsx(Fragment, { children: _jsx(Input, { name: name ? `${name}-chars[${i}]` : undefined, size: "custom", autoFocus: i === focusIndex ? autoFocus : undefined, type: type === "number" ? "tel" : "text", inputMode: type === "number" ? "numeric" : undefined, className: clsx("2sm:w-16 h-(--h-input) w-12 shrink-0 p-0 [--h-input:72px]"), inputClassName: "text-center text-body-3xl", autoCapitalize: "none", autoCorrect: "off", spellCheck: "false", ref: (ref) => {
                         refArray.current[i] = ref;
                     }, value: value, onFocus: (event) => {
                         event.currentTarget.select();

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

@@ -1,7 +1,8 @@
 import { ComponentProps, RefObject } from "react";
 interface Props extends ComponentProps<"div"> {
     ref?: RefObject<HTMLInputElement>;
+    zClassName?: string;
 }
-export declare function ModalContent({ style, className, children, ref, ...props }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function ModalContent({ zClassName, style, className, children, ref, ...props }: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=ModalContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalContent.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlD,UAAU,KAAM,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3C,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,kDA8BhF"}
+{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalContent.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlD,UAAU,KAAM,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3C,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,kDAiC5F"}

package/dist/components/modal/ModalContent.js

@@ -3,12 +3,12 @@ import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useMergeRefs, }
 import { useModalContext } from "./useModalContext";
 import clsx from "clsx";
 import { Dialog } from "../dialog/Dialog";
-export function ModalContent({ style, className, children, ref, ...props }) {
+export function ModalContent({ zClassName, style, className, children, ref, ...props }) {
     const context = useModalContext();
     const floatingContext = context.context;
     const mergedRef = useMergeRefs([context.refs.setFloating, ref]);
     if (!context.open) {
         return null;
     }
-    return (_jsx(FloatingPortal, { children: _jsx(FloatingOverlay, { className: "flex-center z-overlay bg-gray-7/40 motion-safe:animate-fade-in-opacity", lockScroll: true, children: _jsx(FloatingFocusManager, { context: floatingContext, children: _jsx(Dialog, { color: context.color, className: clsx("motion-safe:animate-fade-in mx-4", className), style: style, "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId, ...context.getFloatingProps(props), children: _jsx("div", { ref: mergedRef, children: children }) }) }) }) }));
+    return (_jsx(FloatingPortal, { children: _jsx(FloatingOverlay, { className: clsx("flex-center bg-gray-7/40 motion-safe:animate-fade-in-opacity", zClassName ?? "z-overlay"), lockScroll: true, children: _jsx(FloatingFocusManager, { context: floatingContext, children: _jsx(Dialog, { color: context.color, className: clsx("motion-safe:animate-fade-in mx-4", className), style: style, "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId, ...context.getFloatingProps(props), children: _jsx("div", { ref: mergedRef, children: children }) }) }) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/useModal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,wBAAgB,QAAQ,CAAC,EACvB,WAAmB,EACnB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,iBAAiB,EACzB,KAAK,GACN,GAAE,YAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAuC+vjC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADv8jC"}
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/useModal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,wBAAgB,QAAQ,CAAC,EACvB,WAAmB,EACnB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,iBAAiB,EACzB,KAAK,GACN,GAAE,YAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAuCk/lC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EAD1rmC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useModalContext.d.ts","sourceRoot":"","sources":["../../../src/components/modal/useModalContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG,IAAI,CAAC;AAEtD,eAAO,MAAM,YAAY,sCAAmC,CAAC;AAE7D,wBAAgB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCASgslC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADn5lC"}
+{"version":3,"file":"useModalContext.d.ts","sourceRoot":"","sources":["../../../src/components/modal/useModalContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG,IAAI,CAAC;AAEtD,eAAO,MAAM,YAAY,sCAAmC,CAAC;AAE7D,wBAAgB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCASm7nC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADtooC"}

package/dist/components/popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/usePopover.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAgB7C,wBAAgB,UAAU,CAAC,EACzB,WAAmB,EACnB,SAAoB,EACpB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EACL,KAAa,GACd,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAwD2xiC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADh+iC"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/usePopover.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAgB7C,wBAAgB,UAAU,CAAC,EACzB,WAAmB,EACnB,SAAoB,EACpB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EACL,KAAa,GACd,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAwD8glC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADntlC"}

package/dist/components/popover/usePopoverContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopoverContext.d.ts","sourceRoot":"","sources":["../../../src/components/popover/usePopoverContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;AAExD,eAAO,MAAM,cAAc,sCAAmC,CAAC;AAE/D,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAS8qlC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADn4lC"}
+{"version":3,"file":"usePopoverContext.d.ts","sourceRoot":"","sources":["../../../src/components/popover/usePopoverContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;AAExD,eAAO,MAAM,cAAc,sCAAmC,CAAC;AAE/D,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCASi6nC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADtnoC"}

package/dist/components/slot/Slot.d.ts

@@ -2,11 +2,16 @@ import * as React from "react";
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }
+export declare function createSlot(ownerName: string): React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
 declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
-declare const Slottable: ({ children }: {
+interface SlottableProps {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-declare const Root: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
-export { Slot, Slottable, Root, };
+}
+interface SlottableComponent extends React.FC<SlottableProps> {
+    __radixId: symbol;
+}
+export declare function createSlottable(ownerName: string): SlottableComponent;
+declare const Slottable: SlottableComponent;
+export { Slot, Slottable, Slot as Root, };
 export type { SlotProps };
 //# sourceMappingURL=Slot.d.ts.map

package/dist/components/slot/Slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../../src/components/slot/Slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,IAAI,+EAoCR,CAAC;AAoCH,QAAA,MAAM,SAAS,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAE7D,CAAC;AAqEF,QAAA,MAAM,IAAI,+EAAO,CAAC;AAElB,OAAO,EACL,IAAI,EACJ,SAAS,EAET,IAAI,GACL,CAAC;AACF,YAAY,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../../src/components/slot/Slot.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAE0B,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM,iFA0CtE;AAED,QAAA,MAAM,IAAI,+EAAqB,CAAC;AAqChC,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,UAAU,kBAAmB,SAAQ,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC;IAC3D,SAAS,EAAE,MAAM,CAAC;CACnB;AAE0B,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,sBAO3E;AAED,QAAA,MAAM,SAAS,oBAA+B,CAAC;AA2E/C,OAAO,EACL,IAAI,EACJ,SAAS,EAET,IAAI,IAAI,IAAI,GACb,CAAC;AACF,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/slot/Slot.js

@@ -1,58 +1,78 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/* -------------------------------------------------------------------------------------------------
+ * Slot
+ * https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/slot.tsx
+ * -----------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import { composeRefs } from "../../lib";
-const Slot = React.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    const childrenArray = React.Children.toArray(children);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-        // the new element to render is the one passed as a child of `Slottable`
-        const newElement = slottable.props.children;
-        const newChildren = childrenArray.map((child) => {
-            if (child === slottable) {
-                // because the new element will be the one rendered, we are only interested
-                // in grabbing its children (`newElement.props.children`)
-                if (React.Children.count(newElement) > 1)
-                    return React.Children.only(null);
-                return React.isValidElement(newElement)
-                    ? newElement.props.children
-                    : null;
-            }
-            else {
-                return child;
+/* @__NO_SIDE_EFFECTS__ */ export function createSlot(ownerName) {
+    const SlotClone = createSlotClone(ownerName);
+    const Slot = React.forwardRef((props, forwardedRef) => {
+        const { children, ...slotProps } = props;
+        const childrenArray = React.Children.toArray(children);
+        const slottable = childrenArray.find(isSlottable);
+        if (slottable) {
+            // the new element to render is the one passed as a child of `Slottable`
+            const newElement = slottable.props.children;
+            const newChildren = childrenArray.map((child) => {
+                if (child === slottable) {
+                    // because the new element will be the one rendered, we are only interested
+                    // in grabbing its children (`newElement.props.children`)
+                    if (React.Children.count(newElement) > 1)
+                        return React.Children.only(null);
+                    return React.isValidElement(newElement)
+                        ? newElement.props.children
+                        : null;
+                }
+                else {
+                    return child;
+                }
+            });
+            return (_jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement)
+                    ? React.cloneElement(newElement, undefined, newChildren)
+                    : null }));
+        }
+        return (_jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: children }));
+    });
+    Slot.displayName = `${ownerName}.Slot`;
+    return Slot;
+}
+const Slot = createSlot("Slot");
+/* @__NO_SIDE_EFFECTS__ */ function createSlotClone(ownerName) {
+    const SlotClone = React.forwardRef((props, forwardedRef) => {
+        const { children, ...slotProps } = props;
+        if (React.isValidElement(children)) {
+            const childrenRef = getElementRef(children);
+            const props = mergeProps(slotProps, children.props);
+            // do not pass ref to React.Fragment for React 19 compatibility
+            if (children.type !== React.Fragment) {
+                props.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
             }
-        });
-        return (_jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement)
-                ? React.cloneElement(newElement, undefined, newChildren)
-                : null }));
-    }
-    return (_jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: children }));
-});
-// @ts-ignore
-Slot.displayName = "Slot";
-const SlotClone = React.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    if (React.isValidElement(children)) {
-        const childrenRef = getElementRef(children);
-        const props = mergeProps(slotProps, children.props);
-        // do not pass ref to React.Fragment for React 19 compatibility
-        if (children.type !== React.Fragment) {
-            props.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+            return React.cloneElement(children, props);
         }
-        return React.cloneElement(children, props);
-    }
-    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
-});
-// @ts-ignore
-SlotClone.displayName = "SlotClone";
+        return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+    });
+    SlotClone.displayName = `${ownerName}.SlotClone`;
+    return SlotClone;
+}
 /* -------------------------------------------------------------------------------------------------
  * Slottable
  * -----------------------------------------------------------------------------------------------*/
-const Slottable = ({ children }) => {
-    return _jsx(_Fragment, { children: children });
-};
+const SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+/* @__NO_SIDE_EFFECTS__ */ export function createSlottable(ownerName) {
+    const Slottable = ({ children }) => {
+        return _jsx(_Fragment, { children: children });
+    };
+    Slottable.displayName = `${ownerName}.Slottable`;
+    Slottable.__radixId = SLOTTABLE_IDENTIFIER;
+    return Slottable;
+}
+const Slottable = createSlottable("Slottable");
 function isSlottable(child) {
-    return React.isValidElement(child) && child.type === Slottable;
+    return (React.isValidElement(child) &&
+        typeof child.type === "function" &&
+        "__radixId" in child.type &&
+        child.type.__radixId === SLOTTABLE_IDENTIFIER);
 }
 function mergeProps(slotProps, childProps) {
     // all child props should override
@@ -65,8 +85,9 @@ function mergeProps(slotProps, childProps) {
             // if the handler exists on both, we compose them
             if (slotPropValue && childPropValue) {
                 overrideProps[propName] = (...args) => {
-                    childPropValue(...args);
+                    const result = childPropValue(...args);
                     slotPropValue(...args);
+                    return result;
                 };
             }
             // but if it exists only on the slot, we use only this one
@@ -105,7 +126,6 @@ function getElementRef(element) {
     // Not DEV
     return element.props.ref || element.ref;
 }
-const Root = Slot;
 export { Slot, Slottable, 
 //
-Root, };
+Slot as Root, };

package/dist/components/tooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/useTooltip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAkB7C,wBAAgB,UAAU,CAAC,EACzB,WAAmB,EACnB,SAAiB,EACjB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,iBAAiB,EACzB,SAAe,EACf,UAAgB,EAChB,KAAgB,GACjB,GAAE,cAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA4D4yiC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADt/iC"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/useTooltip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAkB7C,wBAAgB,UAAU,CAAC,EACzB,WAAmB,EACnB,SAAiB,EACjB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,iBAAiB,EACzB,SAAe,EACf,UAAgB,EAChB,KAAgB,GACjB,GAAE,cAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA4D+hlC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADzulC"}

package/dist/components/tooltip/useTooltipContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltipContext.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/useTooltipContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;AAExD,eAAO,MAAM,cAAc,sCAAmC,CAAC;AAE/D,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAS8qlC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADn4lC"}
+{"version":3,"file":"useTooltipContext.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/useTooltipContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;AAExD,eAAO,MAAM,cAAc,sCAAmC,CAAC;AAE/D,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCASi6nC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;EADtnoC"}

package/dist/lib/compose-refs.d.ts

@@ -1,16 +1,17 @@
 /**
- * https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx
+ * https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx
  */
+import * as React from "react";
 type PossibleRef<T> = React.Ref<T> | undefined;
 /**
  * A utility to compose multiple refs together
  * Accepts callback refs and RefObject(s)
  */
-declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+declare function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T>;
 /**
  * A custom hook that composes multiple refs
  * Accepts callback refs and RefObject(s)
  */
-declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T>;
 export { composeRefs, useComposedRefs };
 //# sourceMappingURL=compose-refs.d.ts.map

package/dist/lib/compose-refs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compose-refs.d.ts","sourceRoot":"","sources":["../../src/lib/compose-refs.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH,KAAK,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;AAc/C;;;GAGG;AACH,iBAAS,WAAW,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IACvC,MAAM,CAAC,UAChB;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,qBAGpD;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"compose-refs.d.ts","sourceRoot":"","sources":["../../src/lib/compose-refs.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;AAc/C;;;GAGG;AACH,iBAAS,WAAW,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CA4BvE;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAG3E;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}

package/dist/lib/compose-refs.js

@@ -1,11 +1,14 @@
-import { useCallback } from "react";
+/**
+ * https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx
+ */
+import * as React from "react";
 /**
  * Set a given ref to a given value
  * This utility takes care of different types of refs: callback refs and RefObject(s)
  */
 function setRef(ref, value) {
     if (typeof ref === "function") {
-        ref(value);
+        return ref(value);
     }
     else if (ref !== null && ref !== undefined) {
         ref.current = value;
@@ -16,7 +19,33 @@ function setRef(ref, value) {
  * Accepts callback refs and RefObject(s)
  */
 function composeRefs(...refs) {
-    return (node) => refs.forEach((ref) => setRef(ref, node));
+    return (node) => {
+        let hasCleanup = false;
+        const cleanups = refs.map((ref) => {
+            const cleanup = setRef(ref, node);
+            if (!hasCleanup && typeof cleanup == "function") {
+                hasCleanup = true;
+            }
+            return cleanup;
+        });
+        // React <19 will log an error to the console if a callback ref returns a
+        // value. We don't use ref cleanups internally so this will only happen if a
+        // user's ref callback returns a value, which we only expect if they are
+        // using the cleanup functionality added in React 19.
+        if (hasCleanup) {
+            return () => {
+                for (let i = 0; i < cleanups.length; i++) {
+                    const cleanup = cleanups[i];
+                    if (typeof cleanup == "function") {
+                        cleanup();
+                    }
+                    else {
+                        setRef(refs[i], null);
+                    }
+                }
+            };
+        }
+    };
 }
 /**
  * A custom hook that composes multiple refs
@@ -24,6 +53,6 @@ function composeRefs(...refs) {
  */
 function useComposedRefs(...refs) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    return useCallback(composeRefs(...refs), refs);
+    return React.useCallback(composeRefs(...refs), refs);
 }
 export { composeRefs, useComposedRefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pentatrion-design",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",
@@ -9,13 +9,13 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "devDependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.5.2",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.6.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@conform-to/react": "^1.3.0",
-    "@conform-to/zod": "^1.3.0",
-    "@eslint/js": "^9.23.0",
-    "@floating-ui/react": "^0.27.6",
+    "@conform-to/react": "1.3.0",
+    "@conform-to/zod": "1.3.0",
+    "@eslint/js": "^9.27.0",
+    "@floating-ui/react": "^0.27.8",
     "@floating-ui/react-dom": "^2.1.2",
     "@storybook/addon-actions": "^8.6.12",
     "@storybook/addon-docs": "^8.6.12",
@@ -34,16 +34,16 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/geojson": "^7946.0.16",
-    "@types/react": "19.1.2",
-    "@types/react-dom": "^19.1.1",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.3",
     "@use-gesture/react": "^10.3.1",
     "@vitejs/plugin-react-swc": "^3.8.1",
     "chokidar": "^4.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "eslint": "^9.23.0",
+    "eslint": "^9.27.0",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "fuse.js": "^7.1.0",
     "globals": "^16.0.0",
     "jsdom": "^26.0.0",
@@ -54,13 +54,13 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "storybook": "^8.6.12",
-    "tailwindcss": "^4.1.2",
-    "tsx": "^4.19.3",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.32.0",
+    "tailwindcss": "^4.1.5",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3",
-    "zod": "^3.24.4"
+    "vitest": "^3.1.4",
+    "zod": "^3.25.7"
   },
   "peerDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "*",

package/src/components/button/Button.tsx

@@ -61,7 +61,7 @@ export const buttonVariants = cva(
         custom: "",
       },
       icon: {
-        true: "rounded-[calc(var(--h-button)/2)] min-w-(--h-button) [&_i,&_img,&_svg]:w-(--h-button) justify-center [&_:last-child:not(i,img,svg)]:pr-4",
+        true: "rounded-[calc(var(--h-button)/2)] min-w-(--h-button) [&_i,&_img,&_svg]:w-(--h-button) justify-center [&_:last-child:not(i,img,svg,strong)]:pr-4",
         false: "rounded-2xl px-4",
         custom: "",
       },

package/src/components/form/InputField.tsx

@@ -59,8 +59,10 @@ export function InputField({
   const showLabel = preventLayerShift || label || hint;
   const showFooter = preventLayerShift || errorsElement || warningElement;
 
+  const testIdProp = dataTestId ? { "data-testid": `input-field-${dataTestId}` } : {};
+
   return (
-    <div role="group" className={className}>
+    <div role="group" className={className} {...testIdProp}>
       {showLabel &&
         (label || hint ? (
           <label className="mb-1 flex flex-wrap items-center justify-between" htmlFor={id}>

package/src/components/input/Color.tsx

@@ -39,17 +39,24 @@ export function Color({
     <button
       ref={buttonRef}
       data-color={color}
-      className="p8n-input-text relative flex h-8 overflow-clip rounded-2xl p-1 outline-offset-[-1px]"
+      className="p8n-input-text group relative flex h-8 cursor-pointer overflow-clip rounded-2xl p-1 outline-offset-[-1px] active:translate-y-[1px]"
       {...rest}
     >
       {withRipple && ripples}
       <span
         className={clsx(
-          "flex h-full items-center justify-center rounded-2xl px-2",
+          "absolute inset-1 flex items-center justify-center rounded-2xl transition-transform group-hover:scale-150",
           valueToShow === null && "min-w-12",
           className,
         )}
         style={{ backgroundColor: value }}
+      ></span>
+      <span
+        className={clsx(
+          "relative flex h-full items-center justify-center px-2",
+          valueToShow === null && "min-w-12",
+          className,
+        )}
       >
         {valueToShow}
       </span>