@a-type/ui 5.0.22 → 6.0.1

package/dist/components/divider/Divider.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import classNames from 'clsx';
+import { withClassName } from '../../hooks/withClassName.js';
+const DividerBase = withClassName(BaseSeparator, 'relative h-1px w-full bg-neutral-ink');
+export const Divider = function Divider(_a) {
+    var { ref, compensate, padded, className } = _a, props = __rest(_a, ["ref", "compensate", "padded", "className"]);
+    return (_jsx(DividerBase, Object.assign({ ref: ref, style: {
+            left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
+            width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
+        } }, props, { className: classNames(padded && 'my-4', className) })));
+};
+//# sourceMappingURL=Divider.js.map

package/dist/components/divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/divider/Divider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,WAAW,GAAG,aAAa,CAChC,aAAa,EACb,sCAAsC,CACtC,CAAC;AAOF,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,OAAO,CAAC,EAQvC;QARuC,EACvC,GAAG,EACH,UAAU,EACV,MAAM,EACN,SAAS,OAIT,EAHG,KAAK,cAL+B,4CAMvC,CADQ;IAIR,OAAO,CACN,KAAC,WAAW,kBACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACN,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,UAAU,aAAa,CAAC,CAAC,CAAC,SAAS;YAC9D,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,eAAe,UAAU,YAAY,CAAC,CAAC,CAAC,SAAS;SACrE,IACG,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,MAAM,IAAI,MAAM,EAAE,SAAS,CAAC,IACjD,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/components/divider/index.js

@@ -0,0 +1,2 @@
+export * from './Divider.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/dropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,41 @@
+import { Menu as BaseMenu, MenuArrowProps, MenuItemProps, MenuPopupProps, MenuPositionerProps, MenuTriggerProps } from '@base-ui/react/menu';
+import { Ref } from 'react';
+export interface DropdownMenuItemProps extends MenuItemProps {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DropdownMenuRoot: <Payload>(props: BaseMenu.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownMenuItem: ({ ref: forwardedRef, className, ...props }: DropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownMenuCheckboxItem: import("react").FunctionComponent<Omit<import("@base-ui/react/menu").MenuCheckboxItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const DropdownMenuRadioGroup: import("react").NamedExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuRadioItem: import("react").FunctionComponent<Omit<import("@base-ui/react/menu").MenuRadioItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const DropdownMenuItemIndicator: import("react").FunctionComponent<Omit<import("@base-ui/react/menu").MenuCheckboxItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const DropdownMenuLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const DropdownMenuSeparator: import("react").FunctionComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuArrow: import("react").FunctionComponent<MenuArrowProps>;
+export declare function DropdownMenuTrigger({ ...props }: MenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare const DropdownMenuTriggerIcon: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
+export declare const DropdownMenuContent: ({ children, forceMount, keepMounted, side, sideOffset, align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, ...props }: MenuPopupProps & MenuPositionerProps & {
+    /** @deprecated - use keepMounted */
+    forceMount?: boolean;
+    keepMounted?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownMenuItemRightSlot: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DropdownMenu: (<Payload>(props: BaseMenu.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element) & {
+    Content: ({ children, forceMount, keepMounted, side, sideOffset, align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, ...props }: MenuPopupProps & MenuPositionerProps & {
+        /** @deprecated - use keepMounted */
+        forceMount?: boolean;
+        keepMounted?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Trigger: typeof DropdownMenuTrigger;
+    Item: ({ ref: forwardedRef, className, ...props }: DropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    CheckboxItem: import("react").FunctionComponent<Omit<import("@base-ui/react/menu").MenuCheckboxItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    RadioGroup: import("react").NamedExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").FunctionComponent<Omit<import("@base-ui/react/menu").MenuRadioItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    ItemIndicator: import("react").FunctionComponent<Omit<import("@base-ui/react/menu").MenuCheckboxItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+    Separator: import("react").FunctionComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").FunctionComponent<MenuArrowProps>;
+    ItemRightSlot: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    TriggerIcon: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
+    createHandle: typeof BaseMenu.createHandle;
+};

package/dist/components/dropdownMenu/DropdownMenu.js

@@ -0,0 +1,73 @@
+'use client';
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as BaseMenu, } from '@base-ui/react/menu';
+import { clsx } from 'clsx';
+import { withClassName } from '../../hooks/withClassName.js';
+import menuCls from '../primitives/menus.module.css';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './DropdownMenu.module.css';
+import { DropdownTriggerProvider } from './DropdownTriggerContext.js';
+const StyledContent = withClassName(function DropdownMenuContent(props) {
+    return _jsx(BaseMenu.Popup, Object.assign({}, props));
+}, menuCls.popup, cls.content);
+const StyledItemBase = withClassName(BaseMenu.Item, menuCls.item);
+const StyledItem = (_a) => {
+    var { ref: forwardedRef, className } = _a, props = __rest(_a, ["ref", "className"]);
+    return (_jsx(StyledItemBase, Object.assign({}, props, { className: clsx(className), ref: forwardedRef })));
+};
+const StyledCheckboxItem = withClassName(BaseMenu.CheckboxItem, menuCls.item);
+const StyledRadioItem = withClassName(BaseMenu.RadioItem, menuCls.item);
+const StyledLabel = withClassName('span', menuCls.itemText);
+const StyledSeparator = withClassName(BaseMenu.Separator, menuCls.separator);
+const StyledItemIndicator = withClassName(BaseMenu.CheckboxItemIndicator, menuCls.itemIndicator);
+const StyledArrow = withClassName((props) => (_jsx(BaseMenu.Arrow, Object.assign({}, props, { children: _jsx(ArrowSvg, {}) }))), menuCls.arrow);
+const StyledTrigger = withClassName(BaseMenu.Trigger, menuCls.trigger);
+const StyledPortal = BaseMenu.Portal;
+// Exports
+export const DropdownMenuRoot = BaseMenu.Root;
+export const DropdownMenuItem = StyledItem;
+export const DropdownMenuCheckboxItem = StyledCheckboxItem;
+export const DropdownMenuRadioGroup = BaseMenu.RadioGroup;
+export const DropdownMenuRadioItem = StyledRadioItem;
+export const DropdownMenuItemIndicator = StyledItemIndicator;
+export const DropdownMenuLabel = StyledLabel;
+export const DropdownMenuSeparator = StyledSeparator;
+export const DropdownMenuArrow = StyledArrow;
+export function DropdownMenuTrigger(_a) {
+    var props = __rest(_a, []);
+    return (_jsx(DropdownTriggerProvider, { children: _jsx(StyledTrigger, Object.assign({}, props)) }));
+}
+export const DropdownMenuTriggerIcon = withClassName(SlotDiv, menuCls.triggerIcon);
+export const DropdownMenuContent = (_a) => {
+    var { children, forceMount, keepMounted, side, sideOffset = 8, align, alignOffset, anchor, arrowPadding = 2, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod } = _a, props = __rest(_a, ["children", "forceMount", "keepMounted", "side", "sideOffset", "align", "alignOffset", "anchor", "arrowPadding", "collisionAvoidance", "collisionBoundary", "collisionPadding", "sticky", "positionMethod"]);
+    return (_jsx(StyledPortal, { keepMounted: keepMounted !== null && keepMounted !== void 0 ? keepMounted : forceMount, children: _jsx(BaseMenu.Positioner, { sideOffset: sideOffset, side: side, align: align, alignOffset: alignOffset, anchor: anchor, arrowPadding: arrowPadding, collisionAvoidance: collisionAvoidance, collisionBoundary: collisionBoundary, collisionPadding: collisionPadding, sticky: sticky, positionMethod: positionMethod, children: _jsxs(StyledContent, Object.assign({}, props, { children: [_jsx("div", { className: menuCls.itemList, children: children }), _jsx(StyledArrow, {})] })) }) }));
+};
+export const DropdownMenuItemRightSlot = withClassName('div', menuCls.itemRightSlot);
+export const DropdownMenu = Object.assign(DropdownMenuRoot, {
+    Content: DropdownMenuContent,
+    Trigger: DropdownMenuTrigger,
+    Item: StyledItem,
+    CheckboxItem: StyledCheckboxItem,
+    RadioGroup: BaseMenu.RadioGroup,
+    RadioItem: StyledRadioItem,
+    ItemIndicator: StyledItemIndicator,
+    Label: StyledLabel,
+    Separator: StyledSeparator,
+    Arrow: StyledArrow,
+    ItemRightSlot: DropdownMenuItemRightSlot,
+    TriggerIcon: DropdownMenuTriggerIcon,
+    createHandle: BaseMenu.createHandle,
+});
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/components/dropdownMenu/DropdownMenu.js.map

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

package/dist/components/dropdownMenu/DropdownMenu.module.css

@@ -0,0 +1,3 @@
+.content {
+	min-width: 220px;
+}

package/dist/components/dropdownMenu/DropdownMenu.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DropdownMenu } from './DropdownMenu.js';
+declare const meta: Meta<typeof DropdownMenu>;
+export default meta;
+type Story = StoryObj<typeof DropdownMenu>;
+export declare const Default: Story;
+export declare const Sides: Story;

package/dist/components/dropdownMenu/DropdownMenu.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/index.js';
+import { DropdownMenu } from './DropdownMenu.js';
+const meta = {
+    title: 'Components/DropdownMenu',
+    component: DropdownMenu,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(DropdownMenu.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(DropdownMenu.Content, { children: [_jsxs(DropdownMenu.Item, { className: "@mode-attention", children: [_jsx(DropdownMenu.Label, { children: "Item 1" }), _jsx(DropdownMenu.ItemRightSlot, { children: _jsx(Icon, { name: "flag" }) })] }), _jsxs(DropdownMenu.Item, { children: [_jsx(DropdownMenu.Label, { children: "Item 2" }), _jsx(DropdownMenu.ItemRightSlot, { children: _jsx(Icon, { name: "add_person" }) })] })] })] })),
+    },
+};
+export const Sides = {
+    render: (args) => (_jsxs(Box, { col: true, gap: "xl", items: "center", justify: "center", full: true, p: "xl", style: { marginTop: 200 }, children: [_jsxs(DropdownMenu, { open: args.open, children: [_jsx(DropdownMenu.Trigger, { render: _jsx(Button, {}), children: "Top" }), _jsxs(DropdownMenu.Content, { side: "top", children: [_jsx(DropdownMenu.Item, { children: _jsx(DropdownMenu.Label, { children: "Item 1" }) }), _jsx(DropdownMenu.Item, { children: _jsx(DropdownMenu.Label, { children: "Item 2" }) })] })] }), _jsxs(DropdownMenu, { open: args.open, children: [_jsx(DropdownMenu.Trigger, { render: _jsx(Button, {}), children: "Right" }), _jsxs(DropdownMenu.Content, { side: "right", children: [_jsx(DropdownMenu.Item, { children: _jsx(DropdownMenu.Label, { children: "Item 1" }) }), _jsx(DropdownMenu.Item, { children: _jsx(DropdownMenu.Label, { children: "Item 2" }) })] })] }), _jsxs(DropdownMenu, { open: args.open, children: [_jsx(DropdownMenu.Trigger, { render: _jsx(Button, {}), children: "Left" }), _jsxs(DropdownMenu.Content, { side: "left", sideOffset: 8, children: [_jsx(DropdownMenu.Item, { children: _jsx(DropdownMenu.Label, { children: "Item 1" }) }), _jsx(DropdownMenu.Item, { children: _jsx(DropdownMenu.Label, { children: "Item 2" }) })] })] }), _jsxs(DropdownMenu, { open: args.open, children: [_jsx(DropdownMenu.Trigger, { render: _jsx(Button, {}), children: "Bottom" }), _jsxs(DropdownMenu.Content, { side: "bottom", sideOffset: 8, children: [_jsx(DropdownMenu.Item, { children: _jsx(DropdownMenu.Label, { children: "Item 1" }) }), _jsx(DropdownMenu.Item, { children: _jsx(DropdownMenu.Label, { children: "Item 2" }) })] })] })] })),
+};
+//# sourceMappingURL=DropdownMenu.stories.js.map

package/dist/components/dropdownMenu/DropdownMenu.stories.js.map

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

package/dist/components/dropdownMenu/DropdownTriggerContext.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const DropdownTriggerContext = createContext(false);
+export function DropdownTriggerProvider({ children, }) {
+    return (_jsx(DropdownTriggerContext.Provider, { value: true, children: children }));
+}
+export function useIsDropdownTrigger() {
+    return useContext(DropdownTriggerContext);
+}
+//# sourceMappingURL=DropdownTriggerContext.js.map

package/dist/components/dropdownMenu/DropdownTriggerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownTriggerContext.js","sourceRoot":"","sources":["../../../src/components/dropdownMenu/DropdownTriggerContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,sBAAsB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;AAEpD,MAAM,UAAU,uBAAuB,CAAC,EACvC,QAAQ,GAGR;IACA,OAAO,CACN,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAC1C,QAAQ,GACwB,CAClC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,oBAAoB;IACnC,OAAO,UAAU,CAAC,sBAAsB,CAAC,CAAC;AAC3C,CAAC"}

package/dist/components/dropdownMenu/index.js

@@ -0,0 +1,2 @@
+export * from './DropdownMenu.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dropdownMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/components/editableText/EditableText.d.ts

@@ -0,0 +1,18 @@
+import { ChangeEvent, CSSProperties, FocusEvent, KeyboardEvent } from 'react';
+export interface EditableTextProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    editing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+    autoSelect?: boolean;
+    autoFocus?: boolean;
+    onFocus?: (ev: FocusEvent) => void;
+    onBlur?: (ev: FocusEvent) => void;
+    onChange?: (ev: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (ev: KeyboardEvent) => void;
+    onKeyUp?: (ev: KeyboardEvent) => void;
+}
+export declare function EditableText({ value, onValueChange, editing, onEditingChange, className, id, autoSelect, autoFocus, onBlur, onChange, onKeyDown, ...rest }: EditableTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/editableText/EditableText.js

@@ -0,0 +1,51 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { Icon } from '../icon/index.js';
+import { Input } from '../input/index.js';
+import inputCls from '../input/Input.module.css';
+import cls from './EditableText.module.css';
+export function EditableText(_a) {
+    var { value, onValueChange, editing, onEditingChange, className, id, autoSelect, autoFocus, onBlur, onChange, onKeyDown } = _a, rest = __rest(_a, ["value", "onValueChange", "editing", "onEditingChange", "className", "id", "autoSelect", "autoFocus", "onBlur", "onChange", "onKeyDown"]);
+    const [editingInternal, setEditingInternal] = useState(editing || autoFocus);
+    const editingFinal = editing !== null && editing !== void 0 ? editing : editingInternal;
+    const setEditingFinal = onEditingChange !== null && onEditingChange !== void 0 ? onEditingChange : setEditingInternal;
+    const handleChange = useCallback((ev) => {
+        onValueChange(ev.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(ev);
+    }, [onValueChange, onChange]);
+    const handleKeyDown = useCallback((ev) => {
+        if (ev.key === 'Enter') {
+            setEditingFinal(false);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
+    }, [setEditingFinal, onKeyDown]);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (editingFinal && inputRef.current) {
+            // -10... roughly estimated based on default font.
+            inputRef.current.size = Math.max(1, value.length - 5);
+            inputRef.current.focus();
+        }
+    }, [editingFinal, inputRef]);
+    const handleBlur = useCallback((ev) => {
+        setEditingFinal(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
+    }, [setEditingFinal, onBlur]);
+    if (editingFinal) {
+        return (_jsx(Input, Object.assign({ ref: inputRef, value: value, onChange: handleChange, onBlur: handleBlur, className: clsx(cls.input, className), id: id, autoSelect: autoSelect, onKeyDown: handleKeyDown }, rest)));
+    }
+    return (_jsxs("button", Object.assign({ onClick: () => setEditingFinal(true), className: clsx(inputCls.input, cls.button, className), id: id }, rest, { children: [value, _jsx(Icon, { name: "pencil", className: cls.icon })] })));
+}
+//# sourceMappingURL=EditableText.js.map

package/dist/components/editableText/EditableText.js.map

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

package/dist/components/editableText/EditableText.module.css

@@ -0,0 +1,43 @@
+.input {
+	& input {
+		font-size: inherit;
+	}
+}
+
+.button {
+	width: auto;
+	display: inline-flex;
+	align-items: center;
+	text-align: start;
+	font-size: inherit;
+	cursor: pointer;
+
+	@apply --mx-shadow;
+	--mx-shadow-value: none;
+
+	@apply --mx-fg(inherit);
+	@apply --mx-bg(transparent);
+	@apply --mx-borderColor(transparent);
+
+	padding: var(--m-control-padding);
+	gap: var(--m-spacing-sm);
+	border-radius: var(--m-control-radius);
+
+	&:hover,
+	&:focus-visible {
+		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg-faded(80%);
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+}
+
+.icon {
+	opacity: 80%;
+	@apply --mx-stroke(var(--m-color-main-heavy));
+}

package/dist/components/editableText/EditableText.stories.d.ts

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

package/dist/components/editableText/EditableText.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Heading } from '../typography/typography.js';
+import { EditableText } from './EditableText.js';
+const meta = {
+    title: 'Components/EditableText',
+    component: EditableText,
+    argTypes: {},
+    args: {
+        value: 'Hello, world!',
+    },
+    parameters: {
+        controls: { expanded: true },
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        const [value, setValue] = useState(args.value);
+        const [editable, setEditable] = useState(false);
+        return (_jsx(EditableText, Object.assign({}, args, { value: value, onValueChange: setValue, editing: editable, onEditingChange: setEditable, style: { margin: 'auto' } })));
+    },
+};
+export const Title = {
+    render: (args) => {
+        const [value, setValue] = useState(args.value);
+        const [editable, setEditable] = useState(false);
+        return (_jsx(Heading, { children: _jsx(EditableText, Object.assign({}, args, { value: value, onValueChange: setValue, editing: editable, onEditingChange: setEditable, style: { margin: 'auto' } })) }));
+    },
+};
+//# sourceMappingURL=EditableText.stories.js.map

package/dist/components/editableText/EditableText.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.stories.js","sourceRoot":"","sources":["../../../src/components/editableText/EditableText.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACL,KAAK,EAAE,eAAe;KACtB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC5B,MAAM,EAAE,UAAU;KAClB;CACmC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChD,OAAO,CACN,KAAC,YAAY,oBACR,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,QAAQ,EACjB,eAAe,EAAE,WAAW,EAC5B,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IACxB,CACF,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChD,OAAO,CACN,KAAC,OAAO,cACP,KAAC,YAAY,oBACR,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,QAAQ,EACjB,eAAe,EAAE,WAAW,EAC5B,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IACxB,GACO,CACV,CAAC;IACH,CAAC;CACD,CAAC"}

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

@@ -0,0 +1,29 @@
+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<Omit<EmojiPickerListEmojiProps, "color">>;
+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: ({ className, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export interface EmojiPickerProps extends Omit<EmojiPickerRootProps, 'emoji' | 'onEmojiSelect'> {
+    onValueChange: (value: string, label: string) => void;
+    onClear?: () => void;
+}
+export declare const EmojiPicker: (({ onValueChange, onClear, ...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<Omit<EmojiPickerListEmojiProps, "color">>;
+};

package/dist/components/emojiPicker/EmojiPicker.js

@@ -0,0 +1,70 @@
+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 { Icon } from '../icon/Icon.js';
+import inputCls from '../input/Input.module.css';
+import { Spinner } from '../spinner/Spinner.js';
+import cls from './EmojiPicker.module.css';
+export const EmojiPickerRoot = withClassName(Core.Root, '@mode-dense', cls.root);
+export const EmojiPickerSearch = withClassName(Core.Search, cls.search, inputCls.input);
+export const EmojiPickerViewport = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Box, { className: clsx(cls.viewport, className), children: _jsx(Core.Viewport, Object.assign({ className: cls.viewportInner }, props)) }));
+};
+export const EmojiPickerLoading = withClassName(withProps(Core.Loading, {
+    children: _jsx(Spinner, {}),
+}), cls.loading);
+export const EmojiPickerEmpty = withClassName(withProps(Core.Empty, {
+    children: _jsx(_Fragment, { children: "No emoji found" }),
+}), cls.empty);
+export const EmojiPickerCategoryHeader = (props) => (_jsx("div", { className: clsx(cls.categoryHeader, props.className), children: props.category.label }));
+export const EmojiPickerRow = withClassName('div', cls.row);
+export const EmojiPickerEmoji = withClassName((p) => (_jsx(Button, Object.assign({}, p, { emphasis: "ghost", toggled: p.emoji.isActive, toggleMode: "color", size: "small", "aria-label": p.emoji.label, forceIconMode: true, children: _jsx(Button.Icon, { children: p.emoji.emoji }) }))), cls.emoji);
+const defaultListComponents = {
+    CategoryHeader: EmojiPickerCategoryHeader,
+    Row: EmojiPickerRow,
+    Emoji: EmojiPickerEmoji,
+};
+export const EmojiPickerList = ({ className, components, }) => {
+    return (_jsx(Core.List, { className: clsx(cls.list, className), components: components
+            ? Object.assign(Object.assign({}, defaultListComponents), components) : defaultListComponents }));
+};
+export const useEmojiSkinTone = () => useLocalStorage('emoji-skin-tone', undefined, false);
+export const EmojiPickerSkinToneSelector = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const [_, __, options] = useSkinTone();
+    const [skinTone, setSkinTone] = useEmojiSkinTone();
+    return (_jsx(Box, Object.assign({ d: "row", gap: true, className: className }, props, { children: options.map((option) => (_jsx(Button, { emphasis: "ghost", toggled: option.skinTone === skinTone, toggleMode: "color", size: "small", "aria-label": `Skin tone ${option}`, className: cls.skinToneButton, onClick: () => setSkinTone(option.skinTone), forceIconMode: true, children: _jsx(Button.Icon, { children: option.emoji }) }, option.skinTone))) })));
+};
+const EmojiPickerPrefab = (_a) => {
+    var { onValueChange, onClear } = _a, props = __rest(_a, ["onValueChange", "onClear"]);
+    const [skinTone] = useEmojiSkinTone();
+    return (_jsxs(EmojiPickerRoot, Object.assign({}, props, { onEmojiSelect: (emoji) => onValueChange(emoji.emoji, emoji.label), skinTone: skinTone, children: [_jsxs(Box, { col: true, gap: true, items: "start", full: "width", children: [_jsx(EmojiPickerSearch, {}), onClear && (_jsxs(Button, { emphasis: "ghost", size: "small", onClick: () => onClear(), children: [_jsx(Icon, { name: "x" }), "Clear selection"] }))] }), _jsxs(EmojiPickerViewport, { children: [_jsx(EmojiPickerList, {}), _jsx(EmojiPickerLoading, {}), _jsx(EmojiPickerEmpty, {})] }), _jsx(EmojiPickerSkinToneSelector, { className: cls.skinToneSelector })] })));
+};
+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/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/components/emojiPicker/EmojiPicker.module.css

@@ -0,0 +1,84 @@
+.root {
+	height: --fn-literal(368px);
+	width: fit-content;
+	display: flex;
+	flex-direction: column;
+	isolation: isolate;
+	gap: var(--m-spacing-sm);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+}
+
+.search {
+	z-index: 10;
+	min-width: --fn-literal(80px);
+	width: 100%;
+}
+
+.viewport {
+	min-height: 0;
+	flex: 1;
+	overflow: clip;
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	border-radius: var(--m-surface-radius);
+}
+.viewportInner {
+	position: relative;
+	outline: hidden;
+}
+
+.loading {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	@apply --mx-bg(inherit);
+}
+
+.empty {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	@apply --mx-bg(inherit);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: var(--m-text-ambient-weight);
+}
+
+.categoryHeader {
+	position: sticky;
+	top: 0;
+	@apply --mx-bg(inherit);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	padding: var(--m-spacing-sm) var(--m-spacing-md);
+	font-weight: semibold;
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+}
+
+.row {
+	scroll-margin-block: var(--m-spacing-xs);
+	padding-inline: var(--m-spacing-xs);
+}
+
+.emoji {
+	padding: var(--m-spacing-xs);
+	font-size: --fn-literal(20px);
+}
+
+.list {
+	user-select: none;
+	padding-block-end: var(--m-spacing-md);
+}
+
+.skinToneButton {
+	padding: var(--m-spacing-xs);
+	font-size: --fn-literal(20px);
+}
+
+.skinToneSelector {
+	margin-right: auto;
+}