@a-type/ui 2.0.11 → 2.1.1

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/chip/Chip.js

@@ -22,9 +22,9 @@ const clsx_1 = __importDefault(require("clsx"));
 function Chip(_a) {
     var { className, color = 'neutral', asChild, ref } = _a, rest = __rest(_a, ["className", "color", "asChild", "ref"]);
     const Component = asChild ? react_slot_1.Slot : 'div';
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, clsx_1.default)('inline-flex flex-row gap-1 items-center whitespace-nowrap border-light border-solid border rounded-lg px-2 py-1 text-black', {
-            'bg-primary-wash': color === 'primary',
-            'bg-accent-wash': color === 'accent',
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, clsx_1.default)('layer-components:inline-flex layer-components:flex-row layer-components:gap-1 layer-components:items-center layer-components:whitespace-nowrap layer-components:border-light layer-components:border-solid layer-components:border layer-components:rounded-lg layer-components:px-2 layer-components:py-1 layer-components:text-black', {
+            'layer-variants:bg-primary-wash': color === 'primary',
+            'layer-variants:bg-accent-wash': color === 'accent',
         }, className) }, rest)));
 }
 //# sourceMappingURL=Chip.js.map

package/dist/cjs/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../src/components/chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAUA,oBAsBC;;AAhCD,qDAA4C;AAC5C,gDAA8B;AAS9B,SAAgB,IAAI,CAAC,EAMT;QANS,EACpB,SAAS,EACT,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,GAAG,OAEQ,EADR,IAAI,cALa,wCAMpB,CADO;IAEP,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACzC,OAAO,CACN,uBAAC,SAAS,kBACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB,4HAA4H,EAC5H;YACC,iBAAiB,EAAE,KAAK,KAAK,SAAS;YACtC,gBAAgB,EAAE,KAAK,KAAK,QAAQ;SACpC,EACD,SAAS,CACT,IACG,IAAI,EACP,CACF,CAAC;AACH,CAAC"}
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../src/components/chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAUA,oBAsBC;;AAhCD,qDAA4C;AAC5C,gDAA8B;AAS9B,SAAgB,IAAI,CAAC,EAMT;QANS,EACpB,SAAS,EACT,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,GAAG,OAEQ,EADR,IAAI,cALa,wCAMpB,CADO;IAEP,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACzC,OAAO,CACN,uBAAC,SAAS,kBACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB,+IAA+I,EAC/I;YACC,gCAAgC,EAAE,KAAK,KAAK,SAAS;YACrD,+BAA+B,EAAE,KAAK,KAAK,QAAQ;SACnD,EACD,SAAS,CACT,IACG,IAAI,EACP,CACF,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"}