@a-type/ui 5.0.21 → 6.0.0

package/dist/components/autocomplete/Autocomplete.stories.d.ts

@@ -0,0 +1,52 @@
+import type { StoryObj } from '@storybook/react-vite';
+interface Args {
+    arrow?: boolean;
+    autoHighlight?: boolean;
+    keepHighlight?: boolean;
+    highlightItemOnHover?: boolean;
+}
+declare const meta: {
+    title: string;
+    argTypes: {
+        arrow: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        autoHighlight: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        keepHighlight: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        highlightItemOnHover: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+    };
+    args: {
+        arrow: false;
+        autoHighlight: false;
+        keepHighlight: false;
+        highlightItemOnHover: true;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<Args>;
+export interface Item {
+    id: string;
+    label: string;
+}
+export declare const Default: Story;
+export declare const Grouped: Story;
+export declare const NotPopover: Story;

package/dist/components/autocomplete/Autocomplete.stories.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { Autocomplete } from './Autocomplete.js';
+const meta = {
+    title: 'Components/Autocomplete',
+    argTypes: {
+        arrow: {
+            control: 'boolean',
+            description: 'Whether to show the arrow on the autocomplete popup.',
+            defaultValue: false,
+        },
+        autoHighlight: {
+            control: 'boolean',
+            description: 'If true, the first item will be automatically highlighted when the list opens.',
+            defaultValue: false,
+        },
+        keepHighlight: {
+            control: 'boolean',
+            description: 'If true, the highlighted item will be kept when the list is reopened.',
+            defaultValue: false,
+        },
+        highlightItemOnHover: {
+            control: 'boolean',
+            description: 'If true, items will be highlighted when hovered with the mouse.',
+            defaultValue: false,
+        },
+    },
+    args: {
+        arrow: false,
+        autoHighlight: false,
+        keepHighlight: false,
+        highlightItemOnHover: true,
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const items = [
+    { id: 'apple', label: 'Apple' },
+    { id: 'banana', label: 'Banana' },
+    { id: 'cherry', label: 'Cherry' },
+    { id: 'date', label: 'Date' },
+    { id: 'elderberry', label: 'Elderberry' },
+    { id: 'fig', label: 'Fig' },
+    { id: 'grape', label: 'Grape' },
+    { id: 'honeydew', label: 'Honeydew' },
+];
+const ExampleAutocomplete = Autocomplete.create();
+export const Default = {
+    render({ arrow, autoHighlight, keepHighlight, highlightItemOnHover }) {
+        const [value, setValue] = useState('');
+        return (_jsxs(ExampleAutocomplete, { value: value, onValueChange: setValue, items: items, autoHighlight: autoHighlight, keepHighlight: keepHighlight, highlightItemOnHover: highlightItemOnHover, children: [_jsx(ExampleAutocomplete.Input, { icon: _jsx(Icon, { name: "food" }), style: { width: 200 } }), _jsxs(ExampleAutocomplete.Content, { arrow: arrow, children: [_jsx(ExampleAutocomplete.List, { children: (item) => (_jsx(ExampleAutocomplete.Item, { value: item.id, children: item.label }, item.id)) }), _jsx(ExampleAutocomplete.Empty, { children: "No results found." })] })] }));
+    },
+};
+const groupedItems = [
+    {
+        category: 'Fruits',
+        items: [
+            { id: 'apple', label: 'Apple' },
+            { id: 'banana', label: 'Banana' },
+            { id: 'cherry', label: 'Cherry' },
+        ],
+    },
+    {
+        category: 'Berries',
+        items: [
+            { id: 'strawberry', label: 'Strawberry' },
+            { id: 'blueberry', label: 'Blueberry' },
+            { id: 'raspberry', label: 'Raspberry' },
+        ],
+    },
+];
+const GroupedAutocomplete = Autocomplete.createGrouped();
+export const Grouped = {
+    render({ arrow, autoHighlight, keepHighlight, highlightItemOnHover }) {
+        const [value, setValue] = useState(undefined);
+        return (_jsxs(GroupedAutocomplete, { value: value, onValueChange: setValue, items: groupedItems, autoHighlight: autoHighlight, keepHighlight: keepHighlight, highlightItemOnHover: highlightItemOnHover, children: [_jsx(GroupedAutocomplete.Input, {}), _jsxs(GroupedAutocomplete.Content, { arrow: arrow, children: [_jsx(GroupedAutocomplete.List, { children: (group) => (_jsxs(GroupedAutocomplete.Group, { children: [_jsx(GroupedAutocomplete.GroupLabel, { children: group.category }), _jsx(GroupedAutocomplete.GroupList, { children: group.items.map((item) => (_jsx(GroupedAutocomplete.Item, { value: item.id, children: item.label }, item.id))) })] }, group.category)) }), _jsx(GroupedAutocomplete.Empty, { children: "No results found." }), _jsx(GroupedAutocomplete.Separator, {}), _jsx(GroupedAutocomplete.Details, { children: "Select your favorite fruit or berry." })] })] }));
+    },
+};
+export const NotPopover = {
+    render({ autoHighlight, keepHighlight, highlightItemOnHover }) {
+        const [value, setValue] = useState(undefined);
+        return (_jsx(GroupedAutocomplete, { value: value, onValueChange: setValue, items: groupedItems, autoHighlight: autoHighlight, keepHighlight: keepHighlight, highlightItemOnHover: highlightItemOnHover, children: _jsxs(Box, { border: true, p: true, surface: "ambient", col: true, children: [_jsx(GroupedAutocomplete.Input, { disableCaret: true, style: { width: '100%' }, disableClear: true, children: _jsx(Button, { size: "small", emphasis: "primary", style: { aspectRatio: '1', height: '100%' }, children: _jsx(Icon, { name: "plus" }) }) }), _jsx(GroupedAutocomplete.List, { children: (group) => (_jsxs(GroupedAutocomplete.Group, { children: [_jsx(GroupedAutocomplete.GroupLabel, { children: group.category }), _jsx(GroupedAutocomplete.GroupList, { children: group.items.map((item) => (_jsx(GroupedAutocomplete.Item, { value: item.id, children: item.label }, item.id))) })] }, group.category)) }), _jsx(GroupedAutocomplete.Empty, { children: "No results found." })] }) }));
+    },
+};
+//# sourceMappingURL=Autocomplete.stories.js.map

package/dist/components/autocomplete/Autocomplete.stories.js.map

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

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,13 @@
+import { AvatarRootProps as BaseAvatarProps } from '@base-ui/react/avatar';
+import { CSSProperties, HTMLProps } from 'react';
+export interface AvatarProps extends BaseAvatarProps {
+    className?: string;
+    /** @deprecated */
+    popIn?: boolean;
+    style?: CSSProperties;
+    imageSrc?: string | null;
+    name?: string;
+    crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
+    size?: string | number;
+}
+export declare function Avatar({ className, imageSrc, name, crossOrigin, style, size, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,23 @@
+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 { Avatar as BaseAvatar, } from '@base-ui/react/avatar';
+import classNames from 'clsx';
+import { Icon } from '../icon/index.js';
+import cls from './Avatar.module.css';
+export function Avatar(_a) {
+    var { className, imageSrc, name, crossOrigin, style, size } = _a, rest = __rest(_a, ["className", "imageSrc", "name", "crossOrigin", "style", "size"]);
+    const empty = !name && !imageSrc;
+    const sizeStyle = { '--avatar-size': size };
+    return (_jsxs(BaseAvatar.Root, Object.assign({ className: classNames(cls.root, className), "data-empty": empty, style: size ? Object.assign(Object.assign({}, sizeStyle), style) : style }, rest, { children: [imageSrc && (_jsx(BaseAvatar.Image, { className: cls.image, referrerPolicy: "no-referrer", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture`, crossOrigin: crossOrigin })), name && (_jsx(BaseAvatar.Fallback, { className: cls.fallback, children: name.charAt(0).toUpperCase() })), empty && _jsx(Icon, { name: "profile" })] })));
+}
+//# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,MAAM,IAAI,UAAU,GAEpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAatC,MAAM,UAAU,MAAM,CAAC,EAQT;QARS,EACtB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,KAAK,EACL,IAAI,OAES,EADV,IAAI,cAPe,iEAQtB,CADO;IAEP,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACjC,MAAM,SAAS,GAAG,EAAE,eAAe,EAAE,IAAI,EAAmB,CAAC;IAC7D,OAAO,CACN,MAAC,UAAU,CAAC,IAAI,kBACf,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,gBAC9B,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,CAAC,iCAAM,SAAS,GAAK,KAAK,EAAG,CAAC,CAAC,KAAK,IAC5C,IAAI,eAEP,QAAQ,IAAI,CACZ,KAAC,UAAU,CAAC,KAAK,IAChB,SAAS,EAAE,GAAG,CAAC,KAAK,EACpB,cAAc,EAAC,aAAa,EAC5B,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,oBAAoB,EAC1C,WAAW,EAAE,WAAW,GACvB,CACF,EACA,IAAI,IAAI,CACR,KAAC,UAAU,CAAC,QAAQ,IAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,YAC1C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GACR,CACtB,EACA,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,KAChB,CAClB,CAAC;AACH,CAAC"}

package/dist/components/avatar/Avatar.module.css

@@ -0,0 +1,35 @@
+.root {
+	position: relative;
+	aspect-ratio: 1/1;
+	width: --fn-literal(var(--avatar-size, 24px));
+	height: --fn-literal(var(--avatar-size, 24px));
+	display: flex;
+	flex-shrink: 0;
+	user-select: none;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+
+	@apply --mx-bg(var(--m-color-neutral-paper));
+
+	border-width: var(--m-lineWidth-sm);
+	border-style: solid;
+	border-color: var(--m-color-neutral-ink);
+
+	border-radius: var(--m-radius-lg);
+
+	&[data-empty='true'] {
+		border-style: dashed;
+		@apply --mx-bg(var(--m-color-neutral-light));
+	}
+}
+
+.image {
+	object-fit: cover;
+	width: 100%;
+	height: 100%;
+}
+
+.fallback {
+	font-size: --fn-literal(calc(0.5px * var(--avatar-size, 24px)));
+}

package/dist/components/avatar/Avatar.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Avatar } from './Avatar.js';
+declare const meta: {
+    title: string;
+    component: typeof Avatar;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Default: Story;
+export declare const WithImage: Story;
+export declare const WithName: Story;
+export declare const FailedImage: Story;
+export declare const Empty: Story;

package/dist/components/avatar/Avatar.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar } from './Avatar.js';
+const meta = {
+    title: 'Components/Avatar',
+    component: Avatar,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return _jsx(Avatar, Object.assign({}, args));
+    },
+};
+export const WithImage = {
+    args: {
+        imageSrc: 'https://i.pravatar.cc/300',
+        name: 'John Doe',
+    },
+};
+export const WithName = {
+    args: {
+        name: 'Jane Smith',
+    },
+};
+export const FailedImage = {
+    args: {
+        imageSrc: 'http://localhost:3333/nonexistent.jpg',
+        name: 'Fallback User',
+    },
+};
+export const Empty = {
+    args: {
+        name: undefined,
+        imageSrc: undefined,
+    },
+};
+//# sourceMappingURL=Avatar.stories.js.map

package/dist/components/avatar/Avatar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;IAC7B,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC/B,IAAI,EAAE;QACL,QAAQ,EAAE,2BAA2B;QACrC,IAAI,EAAE,UAAU;KAChB;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,IAAI,EAAE;QACL,IAAI,EAAE,YAAY;KAClB;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IACjC,IAAI,EAAE;QACL,QAAQ,EAAE,uCAAuC;QACjD,IAAI,EAAE,eAAe;KACrB;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,IAAI,EAAE;QACL,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,SAAS;KACnB;CACD,CAAC"}

package/dist/components/avatar/AvatarList.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { AvatarProps } from './Avatar.js';
+export declare function AvatarListRoot({ children, count, size, className, ...rest }: {
+    children: ReactNode;
+    count: number;
+    size?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarListItemRoot({ index, children, className, }: {
+    index: number;
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarListItem({ index, className, ...rest }: {
+    index: number;
+    popIn?: boolean;
+    className?: string;
+} & AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare const AvatarList: typeof AvatarListRoot & {
+    Item: typeof AvatarListItem;
+    ItemRoot: typeof AvatarListItemRoot;
+};

package/dist/components/avatar/AvatarList.js

@@ -0,0 +1,47 @@
+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 { createContext, useContext } from 'react';
+import { Avatar } from './Avatar.js';
+const AvatarListContext = createContext({
+    size: 24,
+});
+export function AvatarListRoot(_a) {
+    var { children, count, size = 24, className } = _a, rest = __rest(_a, ["children", "count", "size", "className"]);
+    const width = count > 0 ? size + (count - 1) * ((size * 2) / 3) : 0;
+    return (_jsx(AvatarListContext.Provider, { value: { size }, children: _jsx("div", Object.assign({ className: className, style: {
+                position: 'relative',
+                flexBasis: 'auto',
+                width,
+                minWidth: width,
+                height: size,
+            } }, rest, { children: children })) }));
+}
+export function AvatarListItemRoot({ index, children, className, }) {
+    const { size } = useContext(AvatarListContext);
+    return (_jsx("div", { className: className, style: {
+            position: 'absolute',
+            left: index === 0 ? 0 : index * ((size * 2) / 3),
+            zIndex: index,
+            top: 0,
+        }, children: children }));
+}
+export function AvatarListItem(_a) {
+    var { index, className } = _a, rest = __rest(_a, ["index", "className"]);
+    const { size } = useContext(AvatarListContext);
+    return (_jsx(AvatarListItemRoot, { index: index, className: className, children: _jsx(Avatar, Object.assign({ style: { width: size, height: size } }, rest)) }));
+}
+export const AvatarList = Object.assign(AvatarListRoot, {
+    Item: AvatarListItem,
+    ItemRoot: AvatarListItemRoot,
+});
+//# sourceMappingURL=AvatarList.js.map

package/dist/components/avatar/AvatarList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarList.js","sourceRoot":"","sources":["../../../src/components/avatar/AvatarList.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAa,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAe,MAAM,aAAa,CAAC;AAElD,MAAM,iBAAiB,GAAG,aAAa,CAAmB;IACzD,IAAI,EAAE,EAAE;CACR,CAAC,CAAC;AAEH,MAAM,UAAU,cAAc,CAAC,EAW9B;QAX8B,EAC9B,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,OAOT,EANG,IAAI,cALuB,0CAM9B,CADO;IAOP,MAAM,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpE,OAAO,CACN,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAC1C,4BACC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;gBACN,QAAQ,EAAE,UAAU;gBACpB,SAAS,EAAE,MAAM;gBACjB,KAAK;gBACL,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,IAAI;aACZ,IACG,IAAI,cAEP,QAAQ,IACJ,GACsB,CAC7B,CAAC;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,SAAS,GAKT;IACA,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC/C,OAAO,CACN,cACC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACN,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;YAChD,MAAM,EAAE,KAAK;YACb,GAAG,EAAE,CAAC;SACN,YAEA,QAAQ,GACJ,CACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAQhB;QARgB,EAC9B,KAAK,EACL,SAAS,OAMK,EALX,IAAI,cAHuB,sBAI9B,CADO;IAMP,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC/C,OAAO,CACN,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,YACrD,KAAC,MAAM,kBAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAM,IAAI,EAAI,GACtC,CACrB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IACvD,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,kBAAkB;CAC5B,CAAC,CAAC"}

package/dist/components/avatar/index.js

@@ -0,0 +1,3 @@
+export * from './Avatar.js';
+export * from './AvatarList.js';
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/box/Box.d.ts

@@ -0,0 +1,33 @@
+import { Ref } from 'react';
+import { SlotDivProps } from '../utility/SlotDiv.js';
+export type BoxAlignment = 'center' | 'stretch' | 'start' | 'end';
+export type BoxJustification = 'center' | 'safe-center' | 'start' | 'stretch' | 'between' | 'around' | 'end';
+export type BoxSpacingSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ShadowSize = 'sm' | 'md' | 'lg' | 'xl';
+type MaybeMinus = '' | '-';
+type MaybeUp = '' | '-up';
+type ShadowValue = `${MaybeMinus}${ShadowSize}${MaybeUp}`;
+export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
+    className?: string;
+    direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
+    d?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
+    col?: boolean;
+    items?: BoxAlignment;
+    justify?: BoxJustification;
+    layout?: `${BoxAlignment} ${BoxJustification}`;
+    gap?: BoxSpacingSize | boolean;
+    wrap?: boolean;
+    p?: BoxSpacingSize | boolean;
+    surface?: boolean | 'ambient' | 'secondary' | 'primary';
+    border?: boolean;
+    full?: boolean | 'width' | 'height';
+    overflow?: 'hidden' | 'clip' | 'auto' | 'auto-x' | 'auto-y';
+    grow?: boolean;
+    elevated?: ShadowValue;
+    rounded?: 'xs' | 'sm' | 'md' | 'lg' | boolean;
+    ref?: Ref<HTMLDivElement>;
+    container?: boolean;
+    glass?: boolean;
+}
+export declare function Box({ className, items: itemsSolo, justify: justifySolo, layout: align, gap, wrap, p, col, d, direction, style, container, surface, color, border, full, overflow, grow, elevated, rounded, glass, ref, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/box/Box.js

@@ -0,0 +1,38 @@
+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 clsx from 'clsx';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './Box.module.css';
+export function Box(_a) {
+    var { className, items: itemsSolo, justify: justifySolo, layout: align, gap, wrap, p, col, d = col ? 'col' : undefined, direction = d, style, container, surface, color, border, full, overflow, grow, elevated, rounded = surface ? true : undefined, glass, ref } = _a, rest = __rest(_a, ["className", "items", "justify", "layout", "gap", "wrap", "p", "col", "d", "direction", "style", "container", "surface", "color", "border", "full", "overflow", "grow", "elevated", "rounded", "glass", "ref"]);
+    const items = itemsSolo !== null && itemsSolo !== void 0 ? itemsSolo : align === null || align === void 0 ? void 0 : align.split(' ')[0];
+    const justify = justifySolo !== null && justifySolo !== void 0 ? justifySolo : align === null || align === void 0 ? void 0 : align.split(' ')[1];
+    const [inset, elevation, up] = parseElevated(elevated);
+    const main = (_jsx(SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: clsx('layer-components:relative layer-components:flex', color && `@mode-${color}`, cls.root, className), "data-direction": direction, "data-gap": gap, "data-items": items, "data-justify": justify, "data-wrap": wrap, "data-p": p, "data-rounded": rounded, "data-surface": surface, "data-border": border, "data-full": full, "data-overflow": overflow, "data-grow": grow, "data-elevated": elevation, "data-shadow-up": up, "data-shadow-inset": inset, "data-container": container, "data-glass": glass })));
+    return main;
+}
+function parseElevated(elevated) {
+    if (!elevated)
+        return [false, false, false];
+    const match = elevated.match(/^(-)?(sm|md|lg|xl)(-up)?$/);
+    if (!match) {
+        console.warn(`Invalid elevated value: ${elevated}. Expected format: "[-]size[-up]", where size is one of "sm", "md", "lg", "xl".`);
+        return [false, false, false];
+    }
+    const [, minus, size, up] = match;
+    const inset = minus === '-';
+    const elevation = size;
+    const isUp = up === '-up';
+    return [inset, elevation, isUp];
+}
+//# sourceMappingURL=Box.js.map

package/dist/components/box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/components/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAgB,MAAM,uBAAuB,CAAC;AAC9D,OAAO,GAAG,MAAM,kBAAkB,CAAC;AAyCnC,MAAM,UAAU,GAAG,CAAC,EAwBT;QAxBS,EACnB,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,KAAK,EACb,GAAG,EACH,IAAI,EACJ,CAAC,EACD,GAAG,EACH,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC3B,SAAS,GAAG,CAAC,EACb,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACpC,KAAK,EACL,GAAG,OAEO,EADP,IAAI,cAvBY,+MAwBnB,CADO;IAEP,MAAM,KAAK,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,IAAI,GAAG,CACZ,KAAC,OAAO,kBACP,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACd,iDAAiD,EACjD,KAAK,IAAI,SAAS,KAAK,EAAE,EACzB,GAAG,CAAC,IAAI,EACR,SAAS,CACT,oBACe,SAAS,cACf,GAAG,gBACD,KAAK,kBACH,OAAO,eACV,IAAI,YACP,CAAC,kBACK,OAAO,kBACP,OAAO,iBACR,MAAM,eACR,IAAI,mBACA,QAAQ,eACZ,IAAI,mBACA,SAAS,oBACR,EAAE,uBACC,KAAK,oBACR,SAAS,gBACb,KAAK,IAChB,CACF,CAAC;IAEF,OAAO,IAAI,CAAC;AACb,CAAC;AAED,SAAS,aAAa,CAAC,QAAsB;IAC5C,IAAI,CAAC,QAAQ;QAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU,CAAC;IAErD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IAC1D,IAAI,CAAC,KAAK,EAAE,CAAC;QACZ,OAAO,CAAC,IAAI,CACX,2BAA2B,QAAQ,iFAAiF,CACpH,CAAC;QACF,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU,CAAC;IACvC,CAAC;IAED,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC;IAClC,MAAM,KAAK,GAAG,KAAK,KAAK,GAAG,CAAC;IAC5B,MAAM,SAAS,GAAG,IAAkB,CAAC;IACrC,MAAM,IAAI,GAAG,EAAE,KAAK,KAAK,CAAC;IAE1B,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAU,CAAC;AAC1C,CAAC"}