@a-type/ui 2.0.10 → 2.1.0

package/dist/cjs/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/cjs/colors.stories.js

@@ -6,15 +6,40 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const index_js_1 = require("./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 },
     },
 };
 exports.default = meta;
 exports.Default = {
-    render() {
-        return ((0, jsx_runtime_1.jsxs)(index_js_1.Box, { d: "col", children: [(0, jsx_runtime_1.jsx)(Range, { className: "theme-lemon" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-leek" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-tomato" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-eggplant" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-blueberry" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-salt" })] }));
+    render(args) {
+        const style = args.customHue
+            ? {
+                '--dyn-primary-source': args.customHue,
+                '--dyn-primary-hue-rotate': args.customRotate,
+            }
+            : {};
+        return ((0, jsx_runtime_1.jsxs)(index_js_1.Box, { d: "col", children: [(0, jsx_runtime_1.jsx)(Range, { className: "theme-lemon" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-leek" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-tomato" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-eggplant" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-blueberry" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme-salt" }), (0, jsx_runtime_1.jsx)(Range, { className: "theme", style: style })] }));
     },
 };
 function Swatch({ className }) {
@@ -23,7 +48,7 @@ function Swatch({ className }) {
             height: '100px',
         } }));
 }
-function Range({ className }) {
-    return ((0, jsx_runtime_1.jsxs)(index_js_1.Box, { className: className, children: [(0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary-wash" }), (0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary-light" }), (0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary" }), (0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary-dark" }), (0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary-ink" })] }));
+function Range({ className, style }) {
+    return ((0, jsx_runtime_1.jsxs)(index_js_1.Box, { className: className, style: style, children: [(0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary-wash" }), (0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary-light" }), (0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary" }), (0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary-dark" }), (0, jsx_runtime_1.jsx)(Swatch, { className: "bg-primary-ink" })] }));
 }
 //# sourceMappingURL=colors.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"colors.stories.js","sourceRoot":"","sources":["../../src/colors.stories.tsx"],"names":[],"mappings":";;;;AACA,oDAA4C;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,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM;QACL,OAAO,CACN,wBAAC,cAAG,IAAC,CAAC,EAAC,KAAK,aACX,uBAAC,KAAK,IAAC,SAAS,EAAC,aAAa,GAAG,EACjC,uBAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,EAChC,uBAAC,KAAK,IAAC,SAAS,EAAC,cAAc,GAAG,EAClC,uBAAC,KAAK,IAAC,SAAS,EAAC,gBAAgB,GAAG,EACpC,uBAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACrC,uBAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,IAC3B,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,SAAS,MAAM,CAAC,EAAE,SAAS,EAA0B;IACpD,OAAO,CACN,gCACC,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,wBAAC,cAAG,IAAC,SAAS,EAAE,SAAS,aACxB,uBAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACtC,uBAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,GAAG,EACvC,uBAAC,MAAM,IAAC,SAAS,EAAC,YAAY,GAAG,EACjC,uBAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACtC,uBAAC,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,oDAA4C;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,kBAAe,IAAI,CAAC;AAIP,QAAA,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,wBAAC,cAAG,IAAC,CAAC,EAAC,KAAK,aACX,uBAAC,KAAK,IAAC,SAAS,EAAC,aAAa,GAAG,EACjC,uBAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,EAChC,uBAAC,KAAK,IAAC,SAAS,EAAC,cAAc,GAAG,EAClC,uBAAC,KAAK,IAAC,SAAS,EAAC,gBAAgB,GAAG,EACpC,uBAAC,KAAK,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACrC,uBAAC,KAAK,IAAC,SAAS,EAAC,YAAY,GAAG,EAChC,uBAAC,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,gCACC,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,wBAAC,cAAG,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aACtC,uBAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACtC,uBAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,GAAG,EACvC,uBAAC,MAAM,IAAC,SAAS,EAAC,YAAY,GAAG,EACjC,uBAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACtC,uBAAC,MAAM,IAAC,SAAS,EAAC,gBAAgB,GAAG,IAChC,CACN,CAAC;AACH,CAAC"}

package/dist/cjs/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.js").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.js").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.js").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.js").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.js").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.js").JSX.Element;
+    List: ({ className, components, }: EmojiPickerListProps) => import("react/jsx-runtime.js").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.js").JSX.Element;
+    Row: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    Emoji: import("react").FunctionComponent<EmojiPickerListEmojiProps>;
+};

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

@@ -0,0 +1,79 @@
+// @unocss-include
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmojiPicker = exports.EmojiPickerSkinToneSelector = exports.useEmojiSkinTone = exports.EmojiPickerList = exports.EmojiPickerEmoji = exports.EmojiPickerRow = exports.EmojiPickerCategoryHeader = exports.EmojiPickerEmpty = exports.EmojiPickerLoading = exports.EmojiPickerViewport = exports.EmojiPickerSearch = exports.EmojiPickerRoot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const frimousse_1 = require("frimousse");
+const hooks_js_1 = require("../../hooks.js");
+const useStorage_js_1 = require("../../hooks/useStorage.js");
+const Box_js_1 = require("../box/Box.js");
+const Button_js_1 = require("../button/Button.js");
+const Input_js_1 = require("../input/Input.js");
+const Spinner_js_1 = require("../spinner/Spinner.js");
+exports.EmojiPickerRoot = (0, hooks_js_1.withClassName)(frimousse_1.EmojiPicker.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');
+exports.EmojiPickerSearch = (0, hooks_js_1.withClassName)(frimousse_1.EmojiPicker.Search, 'layer-components:z-10', Input_js_1.inputClassName);
+const EmojiPickerViewport = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(Box_js_1.Box, { border: true, className: "flex-1 min-h-0 overflow-hidden", children: (0, jsx_runtime_1.jsx)(frimousse_1.EmojiPicker.Viewport, Object.assign({ className: "layer-components:relative layer-components:outline-hidden" }, props)) }));
+};
+exports.EmojiPickerViewport = EmojiPickerViewport;
+exports.EmojiPickerLoading = (0, hooks_js_1.withClassName)((0, hooks_js_1.withProps)(frimousse_1.EmojiPicker.Loading, {
+    children: (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, {}),
+}), 'layer-compoennts:absolute layer-compoennts:inset-0 layer-compoennts:flex layer-compoennts:items-center layer-compoennts:justify-center layer-compoennts:bg-inherit');
+exports.EmojiPickerEmpty = (0, hooks_js_1.withClassName)((0, hooks_js_1.withProps)(frimousse_1.EmojiPicker.Empty, {
+    children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.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');
+const EmojiPickerCategoryHeader = (props) => ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('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 }));
+exports.EmojiPickerCategoryHeader = EmojiPickerCategoryHeader;
+exports.EmojiPickerRow = (0, hooks_js_1.withClassName)('div', 'layer-components:scroll-my-xs layer-components:px-xs');
+exports.EmojiPickerEmoji = (0, hooks_js_1.withClassName)((p) => ((0, jsx_runtime_1.jsx)(Button_js_1.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: exports.EmojiPickerCategoryHeader,
+    Row: exports.EmojiPickerRow,
+    Emoji: exports.EmojiPickerEmoji,
+};
+const EmojiPickerList = ({ className, components, }) => {
+    return ((0, jsx_runtime_1.jsx)(frimousse_1.EmojiPicker.List, { className: (0, clsx_1.default)('layer-components:select-none layer-components:pb-md', className), components: components
+            ? Object.assign(Object.assign({}, defaultListComponents), components) : defaultListComponents }));
+};
+exports.EmojiPickerList = EmojiPickerList;
+const useEmojiSkinTone = () => (0, useStorage_js_1.useLocalStorage)('emoji-skin-tone', undefined, false);
+exports.useEmojiSkinTone = useEmojiSkinTone;
+const EmojiPickerSkinToneSelector = (props) => {
+    const [_, __, options] = (0, frimousse_1.useSkinTone)();
+    const [skinTone, setSkinTone] = (0, exports.useEmojiSkinTone)();
+    return ((0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({ d: "row", gap: true, border: true }, props, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(Button_js_1.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))) })));
+};
+exports.EmojiPickerSkinToneSelector = EmojiPickerSkinToneSelector;
+const EmojiPickerPrefab = (_a) => {
+    var { onValueChange } = _a, props = __rest(_a, ["onValueChange"]);
+    const [skinTone] = (0, exports.useEmojiSkinTone)();
+    return ((0, jsx_runtime_1.jsxs)(exports.EmojiPickerRoot, Object.assign({}, props, { onEmojiSelect: (emoji) => onValueChange(emoji.emoji, emoji.label), skinTone: skinTone, children: [(0, jsx_runtime_1.jsx)(exports.EmojiPickerSearch, {}), (0, jsx_runtime_1.jsxs)(exports.EmojiPickerViewport, { children: [(0, jsx_runtime_1.jsx)(exports.EmojiPickerList, {}), (0, jsx_runtime_1.jsx)(exports.EmojiPickerLoading, {}), (0, jsx_runtime_1.jsx)(exports.EmojiPickerEmpty, {})] }), (0, jsx_runtime_1.jsx)(exports.EmojiPickerSkinToneSelector, { className: "mr-auto" })] })));
+};
+exports.EmojiPicker = Object.assign(EmojiPickerPrefab, {
+    Root: exports.EmojiPickerRoot,
+    Search: exports.EmojiPickerSearch,
+    Viewport: exports.EmojiPickerViewport,
+    List: exports.EmojiPickerList,
+    Loading: exports.EmojiPickerLoading,
+    Empty: exports.EmojiPickerEmpty,
+    CategoryHeader: exports.EmojiPickerCategoryHeader,
+    Row: exports.EmojiPickerRow,
+    Emoji: exports.EmojiPickerEmoji,
+});
+//# sourceMappingURL=EmojiPicker.js.map

package/dist/cjs/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/cjs/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.js").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.js").JSX.Element;
+        List: ({ className, components, }: import("frimousse").EmojiPickerListProps) => import("react/jsx-runtime.js").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.js").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/cjs/components/emojiPicker/EmojiPicker.stories.js

@@ -0,0 +1,21 @@
+// @unocss-include
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EmojiPicker_js_1 = require("./EmojiPicker.js");
+const meta = {
+    title: 'EmojiPicker',
+    component: EmojiPicker_js_1.EmojiPicker,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    render(args) {
+        return (0, jsx_runtime_1.jsx)(EmojiPicker_js_1.EmojiPicker, Object.assign({}, args));
+    },
+};
+//# sourceMappingURL=EmojiPicker.stories.js.map

package/dist/cjs/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,qDAA+C;AAE/C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,4BAAW;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACkC,CAAC;AAErC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,uBAAC,4BAAW,oBAAK,IAAI,EAAI,CAAC;IAClC,CAAC;CACD,CAAC"}

package/dist/cjs/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/cjs/components/index.js

@@ -35,6 +35,7 @@ __exportStar(require("./dialog/index.js"), exports);
 __exportStar(require("./divider/index.js"), exports);
 __exportStar(require("./dropdownMenu/index.js"), exports);
 __exportStar(require("./editableText/EditableText.js"), exports);
+__exportStar(require("./emojiPicker/EmojiPicker.js"), exports);
 __exportStar(require("./errorBoundary/index.js"), exports);
 __exportStar(require("./forms/index.js"), exports);
 __exportStar(require("./horizontalList/HorizontalList.js"), exports);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,mDAAuE;AAA9D,kGAAA,IAAI,OAAA;AAAE,uGAAA,SAAS,OAAA;AACxB,qDAAmC;AACnC,oDAAkC;AAClC,+CAA6B;AAC7B,oDAAkC;AAClC,oDAAkC;AAClC,kDAAgC;AAChC,sDAAoC;AACpC,kDAAgC;AAChC,yDAAuC;AACvC,yDAAuC;AACvC,+DAA6C;AAC7C,wDAAsC;AACtC,oDAAkC;AAClC,qDAAmC;AACnC,0DAAwC;AACxC,iEAA+C;AAC/C,2DAAyC;AACzC,mDAAiC;AACjC,qEAAmD;AACnD,kDAAgC;AAChC,2DAAyC;AACzC,+EAA6D;AAC7D,mDAAiC;AACjC,qDAAmC;AACnC,iEAA+C;AAC/C,uDAAqC;AACrC,uDAAqC;AACrC,oDAAkC;AAClC,kDAAgC;AAChC,2DAAyC;AACzC,uDAAqC;AACrC,kDAAgC;AAChC,qDAAmC;AACnC,yDAAuC;AACvC,yDAAuC;AACvC,0DAAwC;AACxC,wDAAsC;AACtC,6DAA2C;AAC3C,oDAAkC;AAClC,2DAAyC;AACzC,oDAAkC;AAClC,qDAAmC;AACnC,oDAAkC;AAClC,iDAA+B;AAC/B,sDAAoC;AACpC,qDAAmC;AACnC,+DAA6C;AAC7C,qDAAmC;AACnC,wDAAsC;AACtC,qEAAmD;AACnD,uDAAqC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,mDAAuE;AAA9D,kGAAA,IAAI,OAAA;AAAE,uGAAA,SAAS,OAAA;AACxB,qDAAmC;AACnC,oDAAkC;AAClC,+CAA6B;AAC7B,oDAAkC;AAClC,oDAAkC;AAClC,kDAAgC;AAChC,sDAAoC;AACpC,kDAAgC;AAChC,yDAAuC;AACvC,yDAAuC;AACvC,+DAA6C;AAC7C,wDAAsC;AACtC,oDAAkC;AAClC,qDAAmC;AACnC,0DAAwC;AACxC,iEAA+C;AAC/C,+DAA6C;AAC7C,2DAAyC;AACzC,mDAAiC;AACjC,qEAAmD;AACnD,kDAAgC;AAChC,2DAAyC;AACzC,+EAA6D;AAC7D,mDAAiC;AACjC,qDAAmC;AACnC,iEAA+C;AAC/C,uDAAqC;AACrC,uDAAqC;AACrC,oDAAkC;AAClC,kDAAgC;AAChC,2DAAyC;AACzC,uDAAqC;AACrC,kDAAgC;AAChC,qDAAmC;AACnC,yDAAuC;AACvC,yDAAuC;AACvC,0DAAwC;AACxC,wDAAsC;AACtC,6DAA2C;AAC3C,oDAAkC;AAClC,2DAAyC;AACzC,oDAAkC;AAClC,qDAAmC;AACnC,oDAAkC;AAClC,iDAA+B;AAC/B,sDAAoC;AACpC,qDAAmC;AACnC,+DAA6C;AAC7C,qDAAmC;AACnC,wDAAsC;AACtC,qEAAmD;AACnD,uDAAqC"}

package/dist/cjs/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/cjs/components/relativeTime/RelativeTime.js

@@ -5,31 +5,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelativeTime = RelativeTime;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@a-type/utils");
+const differenceInMinutes_1 = require("date-fns/differenceInMinutes");
 const formatDistanceToNowStrict_1 = require("date-fns/formatDistanceToNowStrict");
 const react_1 = require("react");
-function formatDistanceToNow(date) {
+function formatDistanceToNow(date, relativeText = true) {
     const now = Date.now();
     if (Math.abs(date.getTime() - now) < 1000) {
         return 'just now';
     }
     return ((0, formatDistanceToNowStrict_1.formatDistanceToNowStrict)(date) +
-        (date.getTime() < now ? ' ago' : ' from now'));
+        (relativeText ? (date.getTime() < now ? ' ago' : ' from now') : ''));
 }
-function RelativeTime({ value, abbreviate }) {
+function RelativeTime({ value, abbreviate, countdownSeconds, disableRelativeText, }) {
     const asDate = (0, react_1.useMemo)(() => new Date(value), [value]);
     const [time, setTime] = (0, react_1.useState)(() => abbreviate
-        ? (0, utils_1.shortenTimeUnits)(formatDistanceToNow(asDate))
-        : formatDistanceToNow(asDate));
+        ? (0, utils_1.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((0, differenceInMinutes_1.differenceInMinutes)(asDate, new Date())) < 1
+        ? 1000
+        : 60 * 1000;
     (0, react_1.useEffect)(() => {
         const update = () => {
             setTime(abbreviate
-                ? (0, utils_1.shortenTimeUnits)(formatDistanceToNow(asDate))
-                : formatDistanceToNow(asDate));
+                ? (0, utils_1.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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: time });
 }
 //# sourceMappingURL=RelativeTime.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAsBb,oCAsBC;;AA1CD,yCAAiD;AACjD,kFAA+E;AAC/E,iCAAqD;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,IAAA,qDAAyB,EAAC,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,SAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAqB;IACpE,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,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,2DAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}
+{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAgCb,oCAmCC;;AAjED,yCAAiD;AACjD,sEAAmE;AACnE,kFAA+E;AAC/E,iCAAqD;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,IAAA,qDAAyB,EAAC,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,SAAgB,YAAY,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,mBAAmB,GACA;IACnB,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,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,IAAA,yCAAmB,EAAC,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC;QACpD,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC;IAEd,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,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,2DAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}

package/dist/cjs/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/cjs/components/relativeTime/RelativeTime.stories.js

@@ -0,0 +1,20 @@
+// @unocss-include
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const RelativeTime_js_1 = require("./RelativeTime.js");
+const meta = {
+    title: 'RelativeTime',
+    component: RelativeTime_js_1.RelativeTime,
+    argTypes: {},
+    args: {
+        value: Date.now() + 60 * 1000 * 2,
+        abbreviate: false,
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+exports.Default = {};
+//# sourceMappingURL=RelativeTime.stories.js.map

package/dist/cjs/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,uDAAiD;AAEjD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,8BAAY;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,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU,EAAE,CAAC"}

package/dist/cjs/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/cjs/hooks/useStorage.js

@@ -0,0 +1,80 @@
+// @unocss-include
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSessionStorage = exports.useLocalStorage = void 0;
+const react_1 = require("react");
+const valtio_1 = require("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.
+        (0, react_1.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 = (0, valtio_1.useSnapshot)(cache);
+        const storedValue = ((_a = snapshot[key]) !== null && _a !== void 0 ? _a : initialValue);
+        const hasValue = snapshot[key] !== undefined;
+        (0, react_1.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 = (0, react_1.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];
+    };
+}
+exports.useLocalStorage = makeUseStorage(localStorage, (0, valtio_1.proxy)({}), 'LocalStorage');
+exports.useSessionStorage = makeUseStorage(sessionStorage, (0, valtio_1.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/cjs/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/cjs/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/cjs/hooks/withProps.js

@@ -1,7 +1,7 @@
 // @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withProps = void 0;
+exports.withoutProps = exports.withProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const withProps = (Component, extras) => {
     return (props) => {
@@ -9,4 +9,10 @@ const withProps = (Component, extras) => {
     };
 };
 exports.withProps = withProps;
+const withoutProps = (Component, remove) => {
+    return (props) => {
+        return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props));
+    };
+};
+exports.withoutProps = withoutProps;
 //# sourceMappingURL=withProps.js.map

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

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

package/dist/cjs/uno/colors.js

@@ -11,7 +11,7 @@ exports.colorConstants = `
 `;
 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)));