@a-type/ui 1.3.0 → 1.3.2

package/dist/esm/components/switch/Switch.d.ts

@@ -1,5 +1,7 @@
 import { SwitchProps } from '@radix-ui/react-switch';
-export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>> & {
+export declare const Switch: (({ ref, ...props }: SwitchProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => import("react/jsx-runtime").JSX.Element) & {
     Root: import("react").FunctionComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
     Thumb: import("react").FunctionComponent<import("@radix-ui/react-switch").SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
 };

package/dist/esm/components/switch/Switch.js

@@ -1,13 +1,24 @@
 // @unocss-include
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { withClassName } from '../../hooks/withClassName.js';
 import { Root, Thumb } from '@radix-ui/react-switch';
-import { forwardRef } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
 const SwitchRoot = withClassName(Root, 'unset w-42px h-25px bg-white rounded-full relative transition-color border-default flex-shrink-0 focus-visible:shadow-focus [&[data-state=checked]]:bg-accent');
 const SwitchThumb = withClassName(Thumb, 'block w-21px h-21px bg-white rounded-full border-default transition-transform will-change-transform [&[data-state=checked]]:translate-x-19px');
-export const Switch = Object.assign(forwardRef(function Switch(props, ref) {
+export const Switch = Object.assign(function Switch(_a) {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
     return (_jsx(SwitchRoot, Object.assign({}, props, { ref: ref, children: _jsx(SwitchThumb, {}) })));
-}), {
+}, {
     Root: SwitchRoot,
     Thumb: SwitchThumb,
 });

package/dist/esm/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAe,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,MAAM,UAAU,GAAG,aAAa,CAC/B,IAAI,EACJ,+JAA+J,CAC/J,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAChC,KAAK,EACL,8IAA8I,CAC9I,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,UAAU,CAAiC,SAAS,MAAM,CAAC,KAAK,EAAE,GAAG;IACpE,OAAO,CACN,KAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,YAC9B,KAAC,WAAW,KAAG,IACH,CACb,CAAC;AACH,CAAC,CAAC,EACF;IACC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,WAAW;CAClB,CACD,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAe,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,UAAU,GAAG,aAAa,CAC/B,IAAI,EACJ,+JAA+J,CAC/J,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAChC,KAAK,EACL,8IAA8I,CAC9I,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAClC,SAAS,MAAM,CAAC,EAKf;QALe,EACf,GAAG,OAIH,EAHG,KAAK,cAFO,OAGf,CADQ;IAIR,OAAO,CACN,KAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,YAC9B,KAAC,WAAW,KAAG,IACH,CACb,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,WAAW;CAClB,CACD,CAAC"}

package/dist/esm/components/textArea/TextArea.d.ts

@@ -8,4 +8,6 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'ref
     placeholdersIntervalMs?: number;
     onValueChange?: (value: string) => void;
 }
-export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, onChange, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: TextAreaProps & {
+    ref?: React.Ref<HTMLTextAreaElement>;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/textArea/TextArea.js

@@ -13,13 +13,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'clsx';
-import { forwardRef, useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 import { inputClassName } from '../input/index.js';
-export const TextArea = forwardRef(function TextArea(_a, ref) {
+export const TextArea = function TextArea(_a) {
     var _b;
-    var { autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0, onChange, placeholder, placeholders, placeholdersIntervalMs = 5000, onValueChange } = _a, rest = __rest(_a, ["autoSize", "autoSelect", "onFocus", "className", "rows", "padBottomPixels", "onChange", "placeholder", "placeholders", "placeholdersIntervalMs", "onValueChange"]);
+    var { ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0, onChange, placeholder, placeholders, placeholdersIntervalMs = 5000, onValueChange } = _a, rest = __rest(_a, ["ref", "autoSize", "autoSelect", "onFocus", "className", "rows", "padBottomPixels", "onChange", "placeholder", "placeholders", "placeholdersIntervalMs", "onValueChange"]);
     const innerRef = useRef(null);
     const finalRef = useMergedRef(innerRef, ref);
     const [innerValue, setInnerValue] = useState('');
@@ -59,5 +59,5 @@ export const TextArea = forwardRef(function TextArea(_a, ref) {
             'layer-components:[resize:vertical]': !autoSize,
             'layer-components:[resize:none]': autoSize,
         }, className), rows: autoSize ? 1 : rows, onChange: handleChange, onFocus: handleFocus, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder }, rest)));
-});
+};
 //# sourceMappingURL=TextArea.js.map

package/dist/esm/components/textArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/textArea/TextArea.stories.d.ts

@@ -2,7 +2,9 @@ import type { StoryObj } from '@storybook/react';
 import { TextArea } from './TextArea.js';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./TextArea.js").TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+    component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, onChange, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: import("./TextArea.js").TextAreaProps & {
+        ref?: React.Ref<HTMLTextAreaElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {
         controls: {

package/dist/esm/components/tooltip/Tooltip.d.ts

@@ -6,7 +6,9 @@ export interface TooltipProps extends Omit<TooltipPrimitive.TooltipTriggerProps,
     open?: boolean;
     disabled?: boolean;
 }
-export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLButtonElement>> & {
+export declare const Tooltip: (({ ref, content, children, open, disabled, ...rest }: TooltipProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => import("react/jsx-runtime").JSX.Element) & {
     Trigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: typeof Content;
 };

package/dist/esm/components/tooltip/Tooltip.js

@@ -12,7 +12,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import classNames from 'clsx';
 function Content(_a) {
@@ -20,10 +19,10 @@ function Content(_a) {
     return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, Object.assign({ className: classNames('layer-components:relative layer-components:rounded-md layer-components:py-2 layer-components:px-3 layer-components:bg-black layer-components:text-white layer-components:text-sm layer-components:leading-tight layer-components:shadow-sm layer-components:select-none layer-components:hidden layer-components:z-tooltip layer-components:sm:display-initial', '[&[data-state=delayed-open]]:display-initial', '[&[data-state=instant-open]]:display-initial', 'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]', 'layer-components:[&[data-state=delayed-open]]:animate-popover-in', className) }, props, { children: [children, _jsx(TooltipPrimitive.Arrow, { className: "fill-black" })] })) }));
 }
 export const TooltipProvider = TooltipPrimitive.Provider;
-export const Tooltip = Object.assign(forwardRef(function Tooltip(_a, ref) {
-    var { content, children, open, disabled } = _a, rest = __rest(_a, ["content", "children", "open", "disabled"]);
+export const Tooltip = Object.assign(function Tooltip(_a) {
+    var { ref, content, children, open, disabled } = _a, rest = __rest(_a, ["ref", "content", "children", "open", "disabled"]);
     return (_jsxs(TooltipPrimitive.Root, { open: open, children: [disabled ? (children) : (_jsx(TooltipPrimitive.TooltipTrigger, Object.assign({ asChild: true, ref: ref }, rest, { children: children }))), _jsx(Content, { sideOffset: 12, children: content })] }));
-}), {
+}, {
     Trigger: TooltipPrimitive.TooltipTrigger,
     Content,
 });

package/dist/esm/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,SAAS,OAAO,CAAC,EAIsB;QAJtB,EAChB,QAAQ,EACR,SAAS,OAE6B,EADnC,KAAK,cAHQ,yBAIhB,CADQ;IAER,OAAO,CACN,KAAC,gBAAgB,CAAC,MAAM,cACvB,MAAC,gBAAgB,CAAC,OAAO,kBACxB,SAAS,EAAE,UAAU,CACpB,sJAAsJ,EACtJ,8CAA8C,EAC9C,8CAA8C,EAC9C,mFAAmF,EACnF,kEAAkE,EAClE,SAAS,CACT,IACG,KAAK,eAER,QAAQ,EACT,KAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,KACvB,GACF,CAC1B,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AASzD,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CACnC,UAAU,CAAkC,SAAS,OAAO,CAC3D,EAA8C,EAC9C,GAAG;QADH,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA5C,2CAA8C,CAAF;IAG5C,OAAO,CACN,MAAC,gBAAgB,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,aAC/B,QAAQ,CAAC,CAAC,CAAC,CACX,QAAQ,CACR,CAAC,CAAC,CAAC,CACH,KAAC,gBAAgB,CAAC,cAAc,kBAAC,OAAO,QAAC,GAAG,EAAE,GAAG,IAAM,IAAI,cACzD,QAAQ,IACwB,CAClC,EACD,KAAC,OAAO,IAAC,UAAU,EAAE,EAAE,YAAG,OAAO,GAAW,IACrB,CACxB,CAAC;AACH,CAAC,CAAC,EACF;IACC,OAAO,EAAE,gBAAgB,CAAC,cAAc;IACxC,OAAO;CACP,CACD,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,SAAS,OAAO,CAAC,EAIsB;QAJtB,EAChB,QAAQ,EACR,SAAS,OAE6B,EADnC,KAAK,cAHQ,yBAIhB,CADQ;IAER,OAAO,CACN,KAAC,gBAAgB,CAAC,MAAM,cACvB,MAAC,gBAAgB,CAAC,OAAO,kBACxB,SAAS,EAAE,UAAU,CACpB,sJAAsJ,EACtJ,8CAA8C,EAC9C,8CAA8C,EAC9C,mFAAmF,EACnF,kEAAkE,EAClE,SAAS,CACT,IACG,KAAK,eAER,QAAQ,EACT,KAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,KACvB,GACF,CAC1B,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AASzD,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CACnC,SAAS,OAAO,CAAC,EAShB;QATgB,EAChB,GAAG,EACH,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,OAIR,EAHG,IAAI,cANS,kDAOhB,CADO;IAIP,OAAO,CACN,MAAC,gBAAgB,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,aAC/B,QAAQ,CAAC,CAAC,CAAC,CACX,QAAQ,CACR,CAAC,CAAC,CAAC,CACH,KAAC,gBAAgB,CAAC,cAAc,kBAAC,OAAO,QAAC,GAAG,EAAE,GAAG,IAAM,IAAI,cACzD,QAAQ,IACwB,CAClC,EACD,KAAC,OAAO,IAAC,UAAU,EAAE,EAAE,YAAG,OAAO,GAAW,IACrB,CACxB,CAAC;AACH,CAAC,EACD;IACC,OAAO,EAAE,gBAAgB,CAAC,cAAc;IACxC,OAAO;CACP,CACD,CAAC"}

package/dist/esm/components/tooltip/Tooltip.stories.d.ts

@@ -2,7 +2,9 @@ import type { StoryObj } from '@storybook/react';
 import { Tooltip } from './Tooltip.js';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Tooltip.js").TooltipProps & import("react").RefAttributes<HTMLButtonElement>> & {
+    component: (({ ref, content, children, open, disabled, ...rest }: import("./Tooltip.js").TooltipProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => import("react/jsx-runtime").JSX.Element) & {
         Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
         Content: ({ children, className, ...props }: import("@radix-ui/react-tooltip").TooltipContentProps) => import("react/jsx-runtime").JSX.Element;
     };

package/dist/esm/components/utility/HideWhileKeyboardOpen.d.ts

@@ -2,4 +2,6 @@ import { HTMLAttributes } from 'react';
 export interface HideWhileKeyboardOpenProps extends HTMLAttributes<HTMLDivElement> {
     asChild?: boolean;
 }
-export declare const HideWhileKeyboardOpen: import("react").ForwardRefExoticComponent<HideWhileKeyboardOpenProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const HideWhileKeyboardOpen: ({ ref, asChild, className, ...rest }: HideWhileKeyboardOpenProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/utility/HideWhileKeyboardOpen.js

@@ -12,13 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
-import { useIsKeyboardOpen } from '../../hooks.js';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
-export const HideWhileKeyboardOpen = forwardRef(function HideWhileKeyboardOpen(_a, ref) {
-    var { asChild, className } = _a, rest = __rest(_a, ["asChild", "className"]);
+import { useIsKeyboardOpen } from '../../hooks.js';
+export const HideWhileKeyboardOpen = function HideWhileKeyboardOpen(_a) {
+    var { ref, asChild, className } = _a, rest = __rest(_a, ["ref", "asChild", "className"]);
     const isKeyboardOpen = useIsKeyboardOpen();
     const Comp = asChild ? Slot : 'div';
     return (_jsx(Comp, Object.assign({ ref: ref, className: clsx(isKeyboardOpen && 'layer-responsive:hidden', className) }, rest)));
-});
+};
 //# sourceMappingURL=HideWhileKeyboardOpen.js.map

package/dist/esm/components/utility/HideWhileKeyboardOpen.js.map

@@ -1 +1 @@
-{"version":3,"file":"HideWhileKeyboardOpen.js","sourceRoot":"","sources":["../../../../src/components/utility/HideWhileKeyboardOpen.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAOnD,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAG7C,SAAS,qBAAqB,CAAC,EAA+B,EAAE,GAAG;QAApC,EAAE,OAAO,EAAE,SAAS,OAAW,EAAN,IAAI,cAA7B,wBAA+B,CAAF;IAC7D,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACN,KAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,cAAc,IAAI,yBAAyB,EAAE,SAAS,CAAC,IACnE,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC"}
+{"version":3,"file":"HideWhileKeyboardOpen.js","sourceRoot":"","sources":["../../../../src/components/utility/HideWhileKeyboardOpen.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAOnD,MAAM,CAAC,MAAM,qBAAqB,GAAG,SAAS,qBAAqB,CAAC,EAOnE;QAPmE,EACnE,GAAG,EACH,OAAO,EACP,SAAS,OAIT,EAHG,IAAI,cAJ4D,+BAKnE,CADO;IAIP,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACN,KAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,cAAc,IAAI,yBAAyB,EAAE,SAAS,CAAC,IACnE,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/components/utility/SlotDiv.d.ts

@@ -2,4 +2,4 @@ import { HTMLProps } from 'react';
 export interface SlotDivProps extends HTMLProps<HTMLDivElement> {
     asChild?: boolean;
 }
-export declare const SlotDiv: import("react").ForwardRefExoticComponent<Omit<SlotDivProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const SlotDiv: ({ ref, asChild, ...rest }: SlotDivProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/utility/SlotDiv.js

@@ -12,12 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-export const SlotDiv = forwardRef(function SlotDiv(_a, ref) {
-    var { asChild } = _a, rest = __rest(_a, ["asChild"]);
+export const SlotDiv = function SlotDiv(_a) {
+    var { ref, asChild } = _a, rest = __rest(_a, ["ref", "asChild"]);
     if (asChild) {
         return _jsx(Slot, Object.assign({ ref: ref }, rest));
     }
     return _jsx("div", Object.assign({ ref: ref }, rest));
-});
+};
 //# sourceMappingURL=SlotDiv.js.map

package/dist/esm/components/utility/SlotDiv.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlotDiv.js","sourceRoot":"","sources":["../../../../src/components/utility/SlotDiv.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AAK9C,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAoB,SAAS,OAAO,CACpE,EAAoB,EACpB,GAAG;QADH,EAAE,OAAO,OAAW,EAAN,IAAI,cAAlB,WAAoB,CAAF;IAGlB,IAAI,OAAO,EAAE,CAAC;QACb,OAAO,KAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,IAAM,IAAI,EAAI,CAAC;IACrC,CAAC;IACD,OAAO,4BAAK,GAAG,EAAE,GAAG,IAAM,IAAI,EAAI,CAAC;AACpC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"SlotDiv.js","sourceRoot":"","sources":["../../../../src/components/utility/SlotDiv.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAM5C,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,OAAO,CAAC,EAIzB;QAJyB,EACvC,GAAG,EACH,OAAO,OAEO,EADX,IAAI,cAHgC,kBAIvC,CADO;IAEP,IAAI,OAAO,EAAE,CAAC;QACb,OAAO,KAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,IAAM,IAAI,EAAI,CAAC;IACrC,CAAC;IACD,OAAO,4BAAK,GAAG,EAAE,GAAG,IAAM,IAAI,EAAI,CAAC;AACpC,CAAC,CAAC"}

package/dist/esm/hooks/useMergedRef.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T>;
+declare function useMergedRef<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T>;
 export default useMergedRef;

package/dist/esm/hooks/useMergedRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMergedRef.js","sourceRoot":"","sources":["../../../src/hooks/useMergedRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,SAAS,YAAY,CAAI,GAAG,IAAoB;IAC/C,OAAO,KAAK,CAAC,WAAW,CAAC,CAAC,OAAU,EAAE,EAAE;QACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACtC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,OAAO,GAAG,KAAK,UAAU;gBAAE,GAAG,CAAC,OAAO,CAAC,CAAC;iBACvC,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ;gBACrC,GAAiC,CAAC,OAAO,GAAG,OAAO,CAAC;QACvD,CAAC;IACF,CAAC,EAAE,IAAI,CAAC,CAAC;AACV,CAAC;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useMergedRef.js","sourceRoot":"","sources":["../../../src/hooks/useMergedRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,SAAS,YAAY,CACpB,GAAG,IAAkC;IAErC,OAAO,KAAK,CAAC,WAAW,CAAC,CAAC,OAAU,EAAE,EAAE;QACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACtC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,OAAO,GAAG,KAAK,UAAU;gBAAE,GAAG,CAAC,OAAO,CAAC,CAAC;iBACvC,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ;gBACrC,GAAiC,CAAC,OAAO,GAAG,OAAO,CAAC;QACvD,CAAC;IACF,CAAC,EAAE,IAAI,CAAC,CAAC;AACV,CAAC;AAED,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "type": "module",
   "files": [
     "/dist",

package/src/components/actions/ActionButton.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'clsx';
-import { forwardRef, ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { Button, ButtonProps } from '../button/Button.js';
 import { CollapsibleContent, CollapsibleRoot } from '../collapsible/index.js';
 
@@ -10,50 +10,50 @@ export interface ActionButtonProps extends ButtonProps {
 	visible?: boolean;
 }
 
-export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
-	function ActionButton(
-		{ icon, children, className, visible = true, ...rest },
-		ref,
-	) {
-		// this rather convoluted logic is meant to do:
-		// - when button goes invisible, wait for collapse and then
-		//   stop rendering
-		// - when button goes visible, render immediately and
-		//   set collapsible open next frame.
-		const [render, setRender] = useState(visible);
-		useEffect(() => {
-			if (!visible) {
-				const timeout = setTimeout(() => {
-					setRender(visible);
-				}, 300);
-				return () => clearTimeout(timeout);
-			} else {
+export function ActionButton({
+	icon,
+	children,
+	className,
+	visible = true,
+	...rest
+}: ActionButtonProps) {
+	// this rather convoluted logic is meant to do:
+	// - when button goes invisible, wait for collapse and then
+	//   stop rendering
+	// - when button goes visible, render immediately and
+	//   set collapsible open next frame.
+	const [render, setRender] = useState(visible);
+	useEffect(() => {
+		if (!visible) {
+			const timeout = setTimeout(() => {
 				setRender(visible);
-			}
-		}, [visible]);
-
-		if (!render && !visible) {
-			return null;
+			}, 300);
+			return () => clearTimeout(timeout);
+		} else {
+			setRender(visible);
 		}
+	}, [visible]);
+
+	if (!render && !visible) {
+		return null;
+	}
 
-		return (
-			<CollapsibleRoot open={!visible ? false : render}>
-				<CollapsibleContent data-horizontal>
-					<Button
-						ref={ref}
-						size="small"
-						className={classNames(
-							'important:(border-gray7 font-normal whitespace-nowrap m-2 flex flex-row gap-2 items-center h-30px rounded-15px mx-1)',
-							'hover:bg-gray2',
-							className,
-						)}
-						{...rest}
-					>
-						{icon}
-						{children}
-					</Button>
-				</CollapsibleContent>
-			</CollapsibleRoot>
-		);
-	},
-);
+	return (
+		<CollapsibleRoot open={!visible ? false : render}>
+			<CollapsibleContent data-horizontal>
+				<Button
+					size="small"
+					className={classNames(
+						'important:(border-gray7 font-normal whitespace-nowrap m-2 flex flex-row gap-2 items-center h-30px rounded-15px mx-1)',
+						'hover:bg-gray2',
+						className,
+					)}
+					{...rest}
+				>
+					{icon}
+					{children}
+				</Button>
+			</CollapsibleContent>
+		</CollapsibleRoot>
+	);
+}

package/src/components/box/Box.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { createContext, forwardRef, useContext, useMemo } from 'react';
+import { createContext, Ref, useContext, useMemo } from 'react';
 import { ThemeName } from '../colorPicker/ColorPicker.js';
 import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
 
@@ -23,30 +23,29 @@ export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
 	wrap?: boolean;
 	p?: BoxSpacingSize;
 	container?: boolean;
-	surface?: boolean;
+	surface?: boolean | 'primary' | 'secondary';
 	theme?: ThemeName;
 	border?: boolean;
+	ref?: Ref<HTMLDivElement>;
 }
 
-export const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
-	{
-		className,
-		direction,
-		items: itemsSolo,
-		justify: justifySolo,
-		align,
-		gap = 'md',
-		wrap,
-		p = 'sm',
-		container,
-		style: userStyle,
-		surface,
-		theme,
-		border,
-		...rest
-	},
+export function Box({
+	className,
+	direction,
+	items: itemsSolo,
+	justify: justifySolo,
+	align,
+	gap = 'md',
+	wrap,
+	p = 'sm',
+	container,
+	style: userStyle,
+	surface,
+	theme,
+	border,
 	ref,
-) {
+	...rest
+}: BoxProps) {
 	const { spacingScale } = useContext(BoxContext);
 
 	const style = useMemo(
@@ -93,9 +92,13 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
 					'layer-components:p-md': p === 'md',
 					'layer-components:p-lg': p === 'lg',
 					'layer-components:p-xl': p === 'xl',
-					'layer-components:(rounded-lg bg-primary-wash)': surface,
-					'layer-components:(border border-solid border-primary-dark rounded-lg)':
-						border,
+					'layer-components:rounded-lg': !!surface,
+					'layer-components:(bg-white border-black)': surface === true,
+					'layer-components:(bg-primary-wash border-primary-dark)':
+						surface === 'primary',
+					'layer-components:(bg-secondary-wash border-secondary-dark)':
+						surface === 'secondary',
+					'layer-components:(border border-solid rounded-lg)': border,
 				},
 				theme && `theme-${theme}`,
 				className,
@@ -114,7 +117,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
 	}
 
 	return main;
-});
+}
 
 const SPACING_SCALE_NESTING_FACTOR = 0.5;
 const BoxContext = createContext<{

package/src/components/button/Button.tsx

@@ -1,6 +1,6 @@
 import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
-import { ButtonHTMLAttributes, forwardRef, memo } from 'react';
+import { ButtonHTMLAttributes, memo, Ref } from 'react';
 import { Icon } from '../icon/index.js';
 import { Spinner } from '../spinner/index.js';
 import { getButtonClassName } from './classes.js';
@@ -24,67 +24,64 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	loading?: boolean;
 	asChild?: boolean;
 	visuallyFocused?: boolean;
+	ref?: Ref<HTMLButtonElement>;
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-	function Button(
-		{
+export function Button({
+	className,
+	color,
+	size,
+	toggled,
+	toggleMode = 'color',
+	align,
+	visuallyDisabled,
+	visuallyFocused,
+	loading,
+	children,
+	disabled,
+	asChild,
+	ref,
+	...props
+}: ButtonProps) {
+	const Comp = asChild ? Slot : 'button';
+	const buttonProps = {
+		ref: ref,
+		...props,
+		disabled: disabled || loading,
+		'data-disabled': visuallyDisabled,
+		'data-focus': visuallyFocused,
+		'data-size': size,
+		tabIndex: visuallyDisabled ? -1 : undefined,
+		className: classNames(
+			getButtonClassName({
+				color,
+				size,
+				toggleable: toggled !== undefined && toggleMode === 'color',
+				align,
+			}),
 			className,
-			color,
-			size,
-			toggled,
-			toggleMode = 'color',
-			align,
-			visuallyDisabled,
-			visuallyFocused,
-			loading,
-			children,
-			disabled,
-			asChild,
-			...props
-		},
-		ref,
-	) {
-		const Comp = asChild ? Slot : 'button';
-		const buttonProps = {
-			ref: ref,
-			...props,
-			disabled: disabled || loading,
-			'data-disabled': visuallyDisabled,
-			'data-focus': visuallyFocused,
-			'data-size': size,
-			tabIndex: visuallyDisabled ? -1 : undefined,
-			className: classNames(
-				getButtonClassName({
-					color,
-					size,
-					toggleable: toggled !== undefined && toggleMode === 'color',
-					align,
-				}),
-				className,
-			),
-		};
-		// set state when toggleable
-		if (toggled !== undefined) {
-			buttonProps['aria-pressed'] = !!toggled;
-		}
+		),
+	};
+	// set state when toggleable
+	if (toggled !== undefined) {
+		buttonProps['aria-pressed'] = !!toggled;
+	}
 
-		if (asChild) {
-			// avoid rendering loading spinner with asChild
-			return <Comp {...buttonProps}>{children}</Comp>;
-		}
+	if (asChild) {
+		// avoid rendering loading spinner with asChild
+		return <Comp {...buttonProps}>{children}</Comp>;
+	}
 
-		return (
-			<Comp {...buttonProps}>
-				{loading && <Spinner size={16} className="inline-block w-1em h-1em" />}
-				{toggled !== undefined && toggleMode !== 'state-only' && (
-					<ToggleIndicator value={toggled} />
-				)}
-				{children}
-			</Comp>
-		);
-	},
-);
+	return (
+		<Comp {...buttonProps}>
+			{loading && <Spinner size={16} className="inline-block w-1em h-1em" />}
+			{toggled !== undefined && toggleMode !== 'state-only' && (
+				<ToggleIndicator value={toggled} />
+			)}
+			{children}
+		</Comp>
+	);
+}
 
 const ToggleIndicator = memo(function ToggleIndicator({
 	value,