@a-type/ui 2.0.10 → 2.1.0

package/dist/esm/colors.stories.d.ts

@@ -1,7 +1,26 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    argTypes: {};
+    argTypes: {
+        customHue: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+            };
+        };
+        customRotate: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+            };
+        };
+    };
+    args: {
+        customHue: number;
+        customRotate: number;
+    };
     parameters: {
         controls: {
             expanded: boolean;

package/dist/esm/colors.stories.js

@@ -3,15 +3,40 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from './components/index.js';
 const meta = {
     title: 'colors',
-    argTypes: {},
+    argTypes: {
+        customHue: {
+            control: {
+                type: 'range',
+                min: 0,
+                max: 360,
+            },
+        },
+        customRotate: {
+            control: {
+                type: 'range',
+                min: -180,
+                max: 180,
+            },
+        },
+    },
+    args: {
+        customHue: 0,
+        customRotate: 0,
+    },
     parameters: {
         controls: { expanded: true },
     },
 };
 export default meta;
 export const Default = {
-    render() {
-        return (_jsxs(Box, { d: "col", children: [_jsx(Range, { className: "theme-lemon" }), _jsx(Range, { className: "theme-leek" }), _jsx(Range, { className: "theme-tomato" }), _jsx(Range, { className: "theme-eggplant" }), _jsx(Range, { className: "theme-blueberry" }), _jsx(Range, { className: "theme-salt" })] }));
+    render(args) {
+        const style = args.customHue
+            ? {
+                '--dyn-primary-source': args.customHue,
+                '--dyn-primary-hue-rotate': args.customRotate,
+            }
+            : {};
+        return (_jsxs(Box, { d: "col", children: [_jsx(Range, { className: "theme-lemon" }), _jsx(Range, { className: "theme-leek" }), _jsx(Range, { className: "theme-tomato" }), _jsx(Range, { className: "theme-eggplant" }), _jsx(Range, { className: "theme-blueberry" }), _jsx(Range, { className: "theme-salt" }), _jsx(Range, { className: "theme", style: style })] }));
     },
 };
 function Swatch({ className }) {
@@ -20,7 +45,7 @@ function Swatch({ className }) {
             height: '100px',
         } }));
 }
-function Range({ className }) {
-    return (_jsxs(Box, { className: className, children: [_jsx(Swatch, { className: "bg-primary-wash" }), _jsx(Swatch, { className: "bg-primary-light" }), _jsx(Swatch, { className: "bg-primary" }), _jsx(Swatch, { className: "bg-primary-dark" }), _jsx(Swatch, { className: "bg-primary-ink" })] }));
+function Range({ className, style }) {
+    return (_jsxs(Box, { className: className, style: style, children: [_jsx(Swatch, { className: "bg-primary-wash" }), _jsx(Swatch, { className: "bg-primary-light" }), _jsx(Swatch, { className: "bg-primary" }), _jsx(Swatch, { className: "bg-primary-dark" }), _jsx(Swatch, { className: "bg-primary-ink" })] }));
 }
 //# sourceMappingURL=colors.stories.js.map

package/dist/esm/colors.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.stories.js","sourceRoot":"","sources":["../../src/colors.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,OAAO,CACN,MAAC,GAAG,IAAC,CAAC,EAAC,KAAK,aACX,KAAC,KAAK,IAAC,SAAS,EAAC,aAAa,GAAG,EACjC,KAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,EAChC,KAAC,KAAK,IAAC,SAAS,EAAC,cAAc,GAAG,EAClC,KAAC,KAAK,IAAC,SAAS,EAAC,gBAAgB,GAAG,EACpC,KAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACrC,KAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,IAC3B,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,SAAS,MAAM,CAAC,EAAE,SAAS,EAA0B;IACpD,OAAO,CACN,cACC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACN,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SACf,GACA,CACF,CAAC;AACH,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,SAAS,EAA0B;IACnD,OAAO,CACN,MAAC,GAAG,IAAC,SAAS,EAAE,SAAS,aACxB,KAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACtC,KAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,GAAG,EACvC,KAAC,MAAM,IAAC,SAAS,EAAC,YAAY,GAAG,EACjC,KAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACtC,KAAC,MAAM,IAAC,SAAS,EAAC,gBAAgB,GAAG,IAChC,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"colors.stories.js","sourceRoot":"","sources":["../../src/colors.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE;QACT,SAAS,EAAE;YACV,OAAO,EAAE;gBACR,IAAI,EAAE,OAAO;gBACb,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;aACR;SACD;QACD,YAAY,EAAE;YACb,OAAO,EAAE;gBACR,IAAI,EAAE,OAAO;gBACb,GAAG,EAAE,CAAC,GAAG;gBACT,GAAG,EAAE,GAAG;aACR;SACD;KACD;IACD,IAAI,EAAE;QACL,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KACf;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAS;QACf,MAAM,KAAK,GAAQ,IAAI,CAAC,SAAS;YAChC,CAAC,CAAC;gBACA,sBAAsB,EAAE,IAAI,CAAC,SAAS;gBACtC,0BAA0B,EAAE,IAAI,CAAC,YAAY;aAC5C;YACH,CAAC,CAAC,EAAE,CAAC;QACN,OAAO,CACN,MAAC,GAAG,IAAC,CAAC,EAAC,KAAK,aACX,KAAC,KAAK,IAAC,SAAS,EAAC,aAAa,GAAG,EACjC,KAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,EAChC,KAAC,KAAK,IAAC,SAAS,EAAC,cAAc,GAAG,EAClC,KAAC,KAAK,IAAC,SAAS,EAAC,gBAAgB,GAAG,EACpC,KAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACrC,KAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,EAChC,KAAC,KAAK,IAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,GAAI,IACpC,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,SAAS,MAAM,CAAC,EAAE,SAAS,EAA0B;IACpD,OAAO,CACN,cACC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACN,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SACf,GACA,CACF,CAAC;AACH,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAuC;IACvE,OAAO,CACN,MAAC,GAAG,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aACtC,KAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACtC,KAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,GAAG,EACvC,KAAC,MAAM,IAAC,SAAS,EAAC,YAAY,GAAG,EACjC,KAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACtC,KAAC,MAAM,IAAC,SAAS,EAAC,gBAAgB,GAAG,IAChC,CACN,CAAC;AACH,CAAC"}

package/dist/esm/components/emojiPicker/EmojiPicker.d.ts

@@ -0,0 +1,28 @@
+import { EmojiPickerListCategoryHeaderProps, EmojiPickerListEmojiProps, EmojiPickerListProps, EmojiPickerRootProps, EmojiPickerViewportProps, useSkinTone } from 'frimousse';
+import { BoxProps } from '../box/Box.js';
+export declare const EmojiPickerRoot: import("react").FunctionComponent<Omit<EmojiPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const EmojiPickerSearch: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const EmojiPickerViewport: ({ className, ...props }: EmojiPickerViewportProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmojiPickerLoading: import("react").FunctionComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+export declare const EmojiPickerEmpty: import("react").FunctionComponent<import("frimousse").EmojiPickerEmptyProps>;
+export declare const EmojiPickerCategoryHeader: (props: EmojiPickerListCategoryHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmojiPickerRow: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const EmojiPickerEmoji: import("react").FunctionComponent<EmojiPickerListEmojiProps>;
+export declare const EmojiPickerList: ({ className, components, }: EmojiPickerListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useEmojiSkinTone: () => readonly [import("frimousse").SkinTone | undefined, (value: import("frimousse").SkinTone | ((current: import("frimousse").SkinTone | undefined) => import("frimousse").SkinTone | undefined) | undefined) => void];
+export type SkinTone = ReturnType<typeof useSkinTone>[0];
+export declare const EmojiPickerSkinToneSelector: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export interface EmojiPickerProps extends Omit<EmojiPickerRootProps, 'emoji' | 'onEmojiSelect'> {
+    onValueChange: (value: string, label: string) => void;
+}
+export declare const EmojiPicker: (({ onValueChange, ...props }: EmojiPickerProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: import("react").FunctionComponent<Omit<EmojiPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Search: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    Viewport: ({ className, ...props }: EmojiPickerViewportProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ className, components, }: EmojiPickerListProps) => import("react/jsx-runtime").JSX.Element;
+    Loading: import("react").FunctionComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+    Empty: import("react").FunctionComponent<import("frimousse").EmojiPickerEmptyProps>;
+    CategoryHeader: (props: EmojiPickerListCategoryHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Row: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    Emoji: import("react").FunctionComponent<EmojiPickerListEmojiProps>;
+};

package/dist/esm/components/emojiPicker/EmojiPicker.js

@@ -0,0 +1,68 @@
+// @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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { EmojiPicker as Core, useSkinTone, } from 'frimousse';
+import { withClassName, withProps } from '../../hooks.js';
+import { useLocalStorage } from '../../hooks/useStorage.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { inputClassName } from '../input/Input.js';
+import { Spinner } from '../spinner/Spinner.js';
+export const EmojiPickerRoot = withClassName(Core.Root, 'layer-components:isolate layer-components:flex layer-components:flex-col layer-components:w-fit layer-components:h-368px layer-components:bg-white layer-components:gap-sm');
+export const EmojiPickerSearch = withClassName(Core.Search, 'layer-components:z-10', inputClassName);
+export const EmojiPickerViewport = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Box, { border: true, className: "flex-1 min-h-0 overflow-hidden", children: _jsx(Core.Viewport, Object.assign({ className: "layer-components:relative layer-components:outline-hidden" }, props)) }));
+};
+export const EmojiPickerLoading = withClassName(withProps(Core.Loading, {
+    children: _jsx(Spinner, {}),
+}), 'layer-compoennts:absolute layer-compoennts:inset-0 layer-compoennts:flex layer-compoennts:items-center layer-compoennts:justify-center layer-compoennts:bg-inherit');
+export const EmojiPickerEmpty = withClassName(withProps(Core.Empty, {
+    children: _jsx(_Fragment, { children: "No emoji found" }),
+}), 'layer-components:absolute layer-components:inset-0 layer-components:flex layer-components:items-center layer-components:justify-center layer-components:bg-inherit layer-components:color-gray-dark layer-components:text-xs');
+export const EmojiPickerCategoryHeader = (props) => (_jsx("div", { className: clsx('layer-components:bg-inherit layer-components:px-md layer-components:py-sm layer-components:text-xs layer-components:font-semibold layer-components:text-gray-dark layer-components:sticky layer-components:top-0', props.className), children: props.category.label }));
+export const EmojiPickerRow = withClassName('div', 'layer-components:scroll-my-xs layer-components:px-xs');
+export const EmojiPickerEmoji = withClassName((p) => (_jsx(Button, Object.assign({}, p, { color: "ghost", toggled: p.emoji.isActive, toggleMode: "color", size: "icon-small", "aria-label": p.emoji.label, className: "text-lg p-xs", children: p.emoji.emoji }))), '');
+const defaultListComponents = {
+    CategoryHeader: EmojiPickerCategoryHeader,
+    Row: EmojiPickerRow,
+    Emoji: EmojiPickerEmoji,
+};
+export const EmojiPickerList = ({ className, components, }) => {
+    return (_jsx(Core.List, { className: clsx('layer-components:select-none layer-components:pb-md', className), components: components
+            ? Object.assign(Object.assign({}, defaultListComponents), components) : defaultListComponents }));
+};
+export const useEmojiSkinTone = () => useLocalStorage('emoji-skin-tone', undefined, false);
+export const EmojiPickerSkinToneSelector = (props) => {
+    const [_, __, options] = useSkinTone();
+    const [skinTone, setSkinTone] = useEmojiSkinTone();
+    return (_jsx(Box, Object.assign({ d: "row", gap: true, border: true }, props, { children: options.map((option) => (_jsx(Button, { color: "ghost", toggled: option.skinTone === skinTone, toggleMode: "color", size: "icon-small", "aria-label": `Skin tone ${option}`, className: "text-md p-xs", onClick: () => setSkinTone(option.skinTone), children: option.emoji }, option.skinTone))) })));
+};
+const EmojiPickerPrefab = (_a) => {
+    var { onValueChange } = _a, props = __rest(_a, ["onValueChange"]);
+    const [skinTone] = useEmojiSkinTone();
+    return (_jsxs(EmojiPickerRoot, Object.assign({}, props, { onEmojiSelect: (emoji) => onValueChange(emoji.emoji, emoji.label), skinTone: skinTone, children: [_jsx(EmojiPickerSearch, {}), _jsxs(EmojiPickerViewport, { children: [_jsx(EmojiPickerList, {}), _jsx(EmojiPickerLoading, {}), _jsx(EmojiPickerEmpty, {})] }), _jsx(EmojiPickerSkinToneSelector, { className: "mr-auto" })] })));
+};
+export const EmojiPicker = Object.assign(EmojiPickerPrefab, {
+    Root: EmojiPickerRoot,
+    Search: EmojiPickerSearch,
+    Viewport: EmojiPickerViewport,
+    List: EmojiPickerList,
+    Loading: EmojiPickerLoading,
+    Empty: EmojiPickerEmpty,
+    CategoryHeader: EmojiPickerCategoryHeader,
+    Row: EmojiPickerRow,
+    Emoji: EmojiPickerEmoji,
+});
+//# sourceMappingURL=EmojiPicker.js.map

package/dist/esm/components/emojiPicker/EmojiPicker.js.map

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

package/dist/esm/components/emojiPicker/EmojiPicker.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react';
+import { EmojiPicker } from './EmojiPicker.js';
+declare const meta: {
+    title: string;
+    component: (({ onValueChange, ...props }: import("./EmojiPicker.js").EmojiPickerProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: import("react").FunctionComponent<Omit<import("frimousse").EmojiPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Search: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+        Viewport: ({ className, ...props }: import("frimousse").EmojiPickerViewportProps) => import("react/jsx-runtime").JSX.Element;
+        List: ({ className, components, }: import("frimousse").EmojiPickerListProps) => import("react/jsx-runtime").JSX.Element;
+        Loading: import("react").FunctionComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+        Empty: import("react").FunctionComponent<import("frimousse").EmojiPickerEmptyProps>;
+        CategoryHeader: (props: import("frimousse").EmojiPickerListCategoryHeaderProps) => import("react/jsx-runtime").JSX.Element;
+        Row: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+        Emoji: import("react").FunctionComponent<import("frimousse").EmojiPickerListEmojiProps>;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof EmojiPicker>;
+export declare const Default: Story;

package/dist/esm/components/emojiPicker/EmojiPicker.stories.js

@@ -0,0 +1,18 @@
+// @unocss-include
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmojiPicker } from './EmojiPicker.js';
+const meta = {
+    title: 'EmojiPicker',
+    component: EmojiPicker,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return _jsx(EmojiPicker, Object.assign({}, args));
+    },
+};
+//# sourceMappingURL=EmojiPicker.stories.js.map

package/dist/esm/components/emojiPicker/EmojiPicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.stories.js","sourceRoot":"","sources":["../../../../src/components/emojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACkC,CAAC;AAErC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;IAClC,CAAC;CACD,CAAC"}

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

@@ -15,6 +15,7 @@ export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './dropdownMenu/index.js';
 export * from './editableText/EditableText.js';
+export * from './emojiPicker/EmojiPicker.js';
 export * from './errorBoundary/index.js';
 export * from './forms/index.js';
 export * from './horizontalList/HorizontalList.js';

package/dist/esm/components/index.js

@@ -16,6 +16,7 @@ export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './dropdownMenu/index.js';
 export * from './editableText/EditableText.js';
+export * from './emojiPicker/EmojiPicker.js';
 export * from './errorBoundary/index.js';
 export * from './forms/index.js';
 export * from './horizontalList/HorizontalList.js';

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,sBAAsB,CAAC;AACvE,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,sBAAsB,CAAC;AACvE,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC"}

package/dist/esm/components/relativeTime/RelativeTime.d.ts

@@ -1,5 +1,14 @@
 export interface RelativeTimeProps {
     value: number;
     abbreviate?: boolean;
+    /**
+     * Makes it count down seconds for a future date value as it approaches.
+     * Does not affect past dates.
+     */
+    countdownSeconds?: boolean;
+    /**
+     * Remove "from now" or "ago" from the output.
+     */
+    disableRelativeText?: boolean;
 }
-export declare function RelativeTime({ value, abbreviate }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
+export declare function RelativeTime({ value, abbreviate, countdownSeconds, disableRelativeText, }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/relativeTime/RelativeTime.js

@@ -2,31 +2,39 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { shortenTimeUnits } from '@a-type/utils';
+import { differenceInMinutes } from 'date-fns/differenceInMinutes';
 import { formatDistanceToNowStrict } from 'date-fns/formatDistanceToNowStrict';
 import { useEffect, useMemo, useState } from 'react';
-function formatDistanceToNow(date) {
+function formatDistanceToNow(date, relativeText = true) {
     const now = Date.now();
     if (Math.abs(date.getTime() - now) < 1000) {
         return 'just now';
     }
     return (formatDistanceToNowStrict(date) +
-        (date.getTime() < now ? ' ago' : ' from now'));
+        (relativeText ? (date.getTime() < now ? ' ago' : ' from now') : ''));
 }
-export function RelativeTime({ value, abbreviate }) {
+export function RelativeTime({ value, abbreviate, countdownSeconds, disableRelativeText, }) {
     const asDate = useMemo(() => new Date(value), [value]);
     const [time, setTime] = useState(() => abbreviate
-        ? shortenTimeUnits(formatDistanceToNow(asDate))
-        : formatDistanceToNow(asDate));
+        ? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
+        : formatDistanceToNow(asDate, !disableRelativeText));
+    // increase update rate if the date is less than 1 minute away and in the future
+    // (past is ok to just leave ~1 minute)
+    const updateRate = countdownSeconds &&
+        asDate.getTime() > Date.now() &&
+        Math.abs(differenceInMinutes(asDate, new Date())) < 1
+        ? 1000
+        : 60 * 1000;
     useEffect(() => {
         const update = () => {
             setTime(abbreviate
-                ? shortenTimeUnits(formatDistanceToNow(asDate))
-                : formatDistanceToNow(asDate));
+                ? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
+                : formatDistanceToNow(asDate, !disableRelativeText));
         };
-        const interval = setInterval(update, 60 * 1000);
+        const interval = setInterval(update, updateRate);
         update();
         return () => clearInterval(interval);
-    }, [asDate, abbreviate]);
+    }, [asDate, abbreviate, updateRate, disableRelativeText]);
     return _jsx(_Fragment, { children: time });
 }
 //# sourceMappingURL=RelativeTime.js.map

package/dist/esm/components/relativeTime/RelativeTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOrD,SAAS,mBAAmB,CAAC,IAAU;IACtC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;QAC3C,OAAO,UAAU,CAAC;IACnB,CAAC;IACD,OAAO,CACN,yBAAyB,CAAC,IAAI,CAAC;QAC/B,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAC7C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAqB;IACpE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;gBAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;QACH,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;QAChD,MAAM,EAAE,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,OAAO,4BAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}
+{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAgBrD,SAAS,mBAAmB,CAAC,IAAU,EAAE,YAAY,GAAG,IAAI;IAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;QAC3C,OAAO,UAAU,CAAC;IACnB,CAAC;IACD,OAAO,CACN,yBAAyB,CAAC,IAAI,CAAC;QAC/B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CACnE,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,mBAAmB,GACA;IACnB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CAAC;QACrE,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CACpD,CAAC;IACF,gFAAgF;IAChF,uCAAuC;IACvC,MAAM,UAAU,GACf,gBAAgB;QAChB,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;QAC7B,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC;QACpD,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CAAC;gBACrE,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CACpD,CAAC;QACH,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACjD,MAAM,EAAE,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE1D,OAAO,4BAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}

package/dist/esm/components/relativeTime/RelativeTime.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+import { RelativeTime } from './RelativeTime.js';
+declare const meta: {
+    title: string;
+    component: typeof RelativeTime;
+    argTypes: {};
+    args: {
+        value: number;
+        abbreviate: false;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof RelativeTime>;
+export declare const Default: Story;

package/dist/esm/components/relativeTime/RelativeTime.stories.js

@@ -0,0 +1,17 @@
+// @unocss-include
+import { RelativeTime } from './RelativeTime.js';
+const meta = {
+    title: 'RelativeTime',
+    component: RelativeTime,
+    argTypes: {},
+    args: {
+        value: Date.now() + 60 * 1000 * 2,
+        abbreviate: false,
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {};
+//# sourceMappingURL=RelativeTime.stories.js.map

package/dist/esm/components/relativeTime/RelativeTime.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.stories.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,GAAG,CAAC;QACjC,UAAU,EAAE,KAAK;KACjB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACmC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}

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

@@ -0,0 +1,2 @@
+export declare const useLocalStorage: <T>(key: string, initialValue: T, writeInitialValue?: boolean) => readonly [T, (value: T | ((current: T) => T)) => void];
+export declare const useSessionStorage: <T>(key: string, initialValue: T, writeInitialValue?: boolean) => readonly [T, (value: T | ((current: T) => T)) => void];

package/dist/esm/hooks/useStorage.js

@@ -0,0 +1,77 @@
+// @unocss-include
+import { useEffect, useMemo } from 'react';
+import { proxy, useSnapshot } from 'valtio';
+function makeUseStorage(storage, cache, name = storage.constructor.name) {
+    return function useStorage(key, initialValue, writeInitialValue = false) {
+        var _a;
+        // using useMemo to execute synchronous code in render just once.
+        // this hook comes before useLocalStorageCache because we want to load
+        // values into the cache before accessing them.
+        useMemo(() => {
+            if (typeof window === 'undefined')
+                return;
+            try {
+                const stored = storage.getItem(key);
+                if (stored) {
+                    cache[key] = JSON.parse(stored);
+                }
+            }
+            catch (err) {
+                console.error(`Error loading use-${name} value for ${key}: ${err}`);
+                storage.removeItem(key);
+            }
+        }, [key]);
+        const snapshot = useSnapshot(cache);
+        const storedValue = ((_a = snapshot[key]) !== null && _a !== void 0 ? _a : initialValue);
+        const hasValue = snapshot[key] !== undefined;
+        useEffect(() => {
+            if (!hasValue && writeInitialValue) {
+                storage.setItem(key, JSON.stringify(initialValue));
+            }
+        }, [hasValue, initialValue, writeInitialValue, key]);
+        // Return a wrapped version of useState's setter function that
+        // persists the new value to localStorage. It's throttled to prevent
+        // frequent writes to localStorage, which can be costly.
+        const setValue = useMemo(() => throttle((value) => {
+            if (typeof window === 'undefined')
+                return;
+            try {
+                // Allow value to be a function so we have same API as useState
+                const valueToStore = value instanceof Function ? value(storedValue) : value;
+                // Save to local storage
+                storage.setItem(key, JSON.stringify(valueToStore));
+                // sync it to other instances of the hook via the global cache
+                cache[key] = valueToStore;
+            }
+            catch (error) {
+                console.error(`Error setting use-${name} value for ${key}: ${value}: ${error}`);
+                throw new Error('Error setting value');
+            }
+        }, 300, { trailing: true, leading: true }), [key, storedValue]);
+        return [storedValue, setValue];
+    };
+}
+export const useLocalStorage = makeUseStorage(localStorage, proxy({}), 'LocalStorage');
+export const useSessionStorage = makeUseStorage(sessionStorage, proxy({}), 'SessionStorage');
+function throttle(func, wait, options) {
+    let previous = 0;
+    return function (...args) {
+        const now = Date.now();
+        if (!previous && (options === null || options === void 0 ? void 0 : options.leading) === false)
+            previous = now;
+        const remaining = wait - (now - previous);
+        if (remaining <= 0) {
+            if ((options === null || options === void 0 ? void 0 : options.trailing) === false)
+                previous = now;
+            return func(...args);
+        }
+        if ((options === null || options === void 0 ? void 0 : options.trailing) === false) {
+            return func(...args);
+        }
+        return setTimeout(() => {
+            previous = (options === null || options === void 0 ? void 0 : options.leading) === false ? 0 : Date.now();
+            func(...args);
+        }, remaining);
+    };
+}
+//# sourceMappingURL=useStorage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStorage.js","sourceRoot":"","sources":["../../../src/hooks/useStorage.ts"],"names":[],"mappings":"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"}

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

@@ -1,2 +1,7 @@
 import React from 'react';
 export declare const withProps: <T extends {}>(Component: React.ComponentType<T>, extras: Partial<T>) => (props: T) => import("react/jsx-runtime").JSX.Element;
+type OptionalKeys<T> = {
+    [K in keyof T]-?: undefined extends T[K] ? K : never;
+}[keyof T];
+export declare const withoutProps: <T extends {}, P extends OptionalKeys<T>>(Component: React.ComponentType<T>, remove: P[]) => (props: Omit<T, P>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/hooks/withProps.js

@@ -5,4 +5,9 @@ export const withProps = (Component, extras) => {
         return _jsx(Component, Object.assign({}, props, extras));
     };
 };
+export const withoutProps = (Component, remove) => {
+    return (props) => {
+        return _jsx(Component, Object.assign({}, props));
+    };
+};
 //# sourceMappingURL=withProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"withProps.js","sourceRoot":"","sources":["../../../src/hooks/withProps.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,SAAS,GAAG,CACxB,SAAiC,EACjC,MAAkB,EACjB,EAAE;IACH,OAAO,CAAC,KAAQ,EAAE,EAAE;QACnB,OAAO,KAAC,SAAS,oBAAK,KAAK,EAAM,MAAM,EAAI,CAAC;IAC7C,CAAC,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"withProps.js","sourceRoot":"","sources":["../../../src/hooks/withProps.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,SAAS,GAAG,CACxB,SAAiC,EACjC,MAAkB,EACjB,EAAE;IACH,OAAO,CAAC,KAAQ,EAAE,EAAE;QACnB,OAAO,KAAC,SAAS,oBAAK,KAAK,EAAM,MAAM,EAAI,CAAC;IAC7C,CAAC,CAAC;AACH,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC3B,SAAiC,EACjC,MAAW,EACV,EAAE;IACH,OAAO,CAAC,KAAiB,EAAE,EAAE;QAC5B,OAAO,KAAC,SAAS,oBAAM,KAAa,EAAI,CAAC;IAC1C,CAAC,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/uno/colors.js

@@ -7,7 +7,7 @@ export const colorConstants = `
 `;
 export const dynamicThemeComputedColors = (name) => `
 	--color-${name}: oklch(calc(90% - 35% * var(--dyn-source-mode-adjust, 0) - (var(--dyn-mode-sign, 1) * var(--dyn-${name}-base-dim, 0%))) calc(var(--dyn-${name}-sat-mult,1) * (35% - 2% * var(--dyn-source-mode-adjust, 0))) var(--dyn-${name}-source, 0));
-	--color-${name}-wash: oklch(from var(--color-${name}) calc(min(0.999,max(0.15, l + 0.15 * var(--dyn-mode-mult, 1)))) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.03)) calc(h - 5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
+	--color-${name}-wash: oklch(from var(--color-${name}) calc(min(0.999,max(0.15, l + 0.15 * var(--dyn-mode-mult, 1)))) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.06)) calc(h - 5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
 	--color-${name}-light: oklch(from var(--color-${name}) calc(l + 0.08 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-light, 1) - 0.03)) calc(h - 0.5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
 	--color-${name}-dark: oklch(from var(--color-${name}) calc(l - 0.26 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-dark, 1) + 0.01)) calc(h + 0.2 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
 	--color-${name}-ink: oklch(from var(--color-${name}) calc(l - 0.45 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-ink, 1) + 0.01)) calc(h + 1 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "2.0.10",
+  "version": "2.1.0",
   "type": "module",
   "files": [
     "/dist",
@@ -67,8 +67,10 @@
     "csstype": "^3.1.3",
     "date-fns": "^4.1.0",
     "formik": "^2.4.6",
+    "frimousse": "^0.2.0",
     "pluralize": "^8.0.0",
-    "react-hot-toast": "^2.4.1"
+    "react-hot-toast": "^2.4.1",
+    "valtio": "^2.1.4"
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.1",

package/src/colors.stories.tsx

@@ -3,7 +3,26 @@ import { Box } from './components/index.js';
 
 const meta = {
 	title: 'colors',
-	argTypes: {},
+	argTypes: {
+		customHue: {
+			control: {
+				type: 'range',
+				min: 0,
+				max: 360,
+			},
+		},
+		customRotate: {
+			control: {
+				type: 'range',
+				min: -180,
+				max: 180,
+			},
+		},
+	},
+	args: {
+		customHue: 0,
+		customRotate: 0,
+	},
 	parameters: {
 		controls: { expanded: true },
 	},
@@ -14,7 +33,13 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-	render() {
+	render(args: any) {
+		const style: any = args.customHue
+			? {
+					'--dyn-primary-source': args.customHue,
+					'--dyn-primary-hue-rotate': args.customRotate,
+			  }
+			: {};
 		return (
 			<Box d="col">
 				<Range className="theme-lemon" />
@@ -23,6 +48,7 @@ export const Default: Story = {
 				<Range className="theme-eggplant" />
 				<Range className="theme-blueberry" />
 				<Range className="theme-salt" />
+				<Range className="theme" style={style} />
 			</Box>
 		);
 	},
@@ -40,9 +66,9 @@ function Swatch({ className }: { className?: string }) {
 	);
 }
 
-function Range({ className }: { className?: string }) {
+function Range({ className, style }: { className?: string; style?: any }) {
 	return (
-		<Box className={className}>
+		<Box className={className} style={style}>
 			<Swatch className="bg-primary-wash" />
 			<Swatch className="bg-primary-light" />
 			<Swatch className="bg-primary" />