@a-type/ui 5.0.22 → 6.0.0

package/dist/components/card/Card.js

@@ -0,0 +1,78 @@
+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 { useRender } from '@base-ui/react/use-render';
+import classNames from 'clsx';
+import { withClassName, withProps } from '../../hooks.js';
+import { Box } from '../box/Box.js';
+import { Masonry } from '../masonry/masonry.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './Card.module.css';
+export const CardRoot = withClassName(withProps(Box, { col: true }), cls.root);
+export function CardMain(_a) {
+    var { className, compact, nonInteractive, ref, style, children, visuallyDisabled, visuallyFocused, render } = _a, rest = __rest(_a, ["className", "compact", "nonInteractive", "ref", "style", "children", "visuallyDisabled", "visuallyFocused", "render"]);
+    const isInteractive = !nonInteractive && (!!render || !!rest.onClick);
+    const rootProps = Object.assign(Object.assign({}, rest), { className: classNames(cls.main, className), style,
+        children });
+    const root = useRender({
+        defaultTagName: isInteractive ? 'button' : 'div',
+        props: rootProps,
+        ref,
+        render,
+        state: {
+            interactive: !!isInteractive,
+            compact: !!compact,
+            'focus-visible': !!visuallyFocused,
+            disabled: !!visuallyDisabled,
+        },
+    });
+    return root;
+}
+export const CardTitle = withClassName(withProps(Box, {
+    surface: 'ambient',
+    gap: 'sm',
+    col: true,
+    rounded: 'sm',
+}), cls.title);
+const CardContentRoot = withClassName(withProps(Box, {
+    surface: 'ambient',
+    glass: true,
+    col: true,
+    gap: 'sm',
+    rounded: 'sm',
+}), '@mode-dense', cls.content);
+export function CardContent(_a) {
+    var { unstyled, ref } = _a, rest = __rest(_a, ["unstyled", "ref"]);
+    return (_jsx(CardContentRoot, Object.assign({ ref: ref, "data-unstyled": unstyled || undefined }, rest)));
+}
+export const CardImage = withClassName(SlotDiv, cls.image);
+export const CardFooter = withClassName('div', '@mode-dense', cls.footer);
+export const CardActions = withClassName('div', cls.actions);
+export const CardMenu = withClassName('div', cls.menu);
+export const cardGridColumns = {
+    default: (size) => (size < 480 ? 1 : size < 800 ? 2 : 3),
+    small: (size) => size < 320 ? 1 : size < 480 ? 2 : size < 800 ? 3 : 4,
+};
+export const CardGrid = ({ children, className, columns = cardGridColumns.default, gap, }) => {
+    return (_jsx(Masonry, { className: className, columns: columns, gap: gap, children: children }));
+};
+export const Card = Object.assign(CardRoot, {
+    Main: CardMain,
+    Title: CardTitle,
+    Content: CardContent,
+    Image: CardImage,
+    Footer: CardFooter,
+    Actions: CardActions,
+    Menu: CardMenu,
+    Grid: CardGrid,
+});
+//# sourceMappingURL=Card.js.map

package/dist/components/card/Card.js.map

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

package/dist/components/card/Card.module.css

@@ -0,0 +1,175 @@
+.root {
+	position: relative;
+	height: max-content;
+	display: flex;
+	flex-direction: column;
+	overflow: clip;
+
+	@apply --mx-shadow(var(--m-shadow-sm));
+	@apply --mx-surface-ambient;
+	@apply --mx-borderColor-faded(50%);
+	border-width: var(--m-lineWidth-sm);
+	border-radius: var(--m-surface-radius);
+
+	font-size: var(--m-text-secondary-size);
+	line-height: var(--m-text-secondary-lineHeight);
+	font-weight: var(--m-text-secondary-weight);
+
+	padding: 0;
+
+	&[data-borderless='true'] {
+		--mx-shadow-value: var(--m-shadow-md);
+		border-width: 0;
+	}
+}
+
+.main {
+	position: relative;
+	z-index: 1;
+	min-height: --fn-literal(40px);
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	align-items: start;
+	gap: var(--m-spacing-xs);
+
+	text-align: start;
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: var(--m-text-ambient-weight);
+
+	padding: var(--m-spacing-md);
+	padding-bottom: var(--m-spacing-xs);
+	gap: var(--m-spacing-sm);
+	&[data-compact='true'] {
+		padding-bottom: 0;
+	}
+
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	@apply --mx-bg(transparent);
+
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+	border-width: 0;
+
+	&[data-interactive] {
+		cursor: pointer;
+
+		&:hover,
+		&:focus-visible,
+		&[data-focus-visible] {
+			@apply --mx-fg(var(--m-color-neutral-ink));
+			@apply --mx-bg(--fn-color-faded(var(--m-color-neutral-ink), 10%));
+		}
+
+		&:focus {
+			outline: none;
+		}
+		&:focus-visible,
+		&[data-focus-visible] {
+			@apply --mx-ring(inset 0 0 0 2px var(--m-color-neutral-ink));
+		}
+
+		&:disabled,
+		&[data-disabled] {
+			cursor: default;
+		}
+	}
+}
+
+.title {
+	z-index: 1;
+	padding: var(--m-spacing-xs) var(--m-spacing-md);
+
+	font-size: var(--m-text-primary-size);
+	line-height: var(--m-text-primary-lineHeight);
+	font-weight: var(--m-text-primary-weight);
+
+	[data-compact] & {
+		font-size: var(--m-text-ambient-size);
+	}
+
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: clip;
+	max-width: 100%;
+	display: block;
+}
+
+.content {
+	z-index: 1;
+
+	padding: var(--m-spacing-sm) var(--m-spacing-md);
+
+	font-size: var(--m-text-ambient-size);
+	line-height: 1;
+	font-weight: var(--m-text-ambient-weight);
+
+	[data-compact] & {
+		padding: 0 var(--m-spacing-xs);
+		margin: 0 var(--m-spacing-sm);
+	}
+
+	&[data-unstyled] {
+		background-color: unset;
+		padding: 0;
+		border-width: 0;
+	}
+}
+
+.image {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	top: 0;
+	z-index: 0;
+	height: 100%;
+	width: 100%;
+
+	background-size: cover;
+	background-position: center;
+	object-fit: cover;
+}
+
+.footer {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-direction: row;
+	flex-shrink: 0;
+	padding: var(--m-spacing-md);
+}
+
+.actions {
+	display: flex;
+	flex-direction: row;
+	gap: var(--m-spacing-sm);
+	align-items: center;
+
+	margin: auto auto auto --fn-literal(0px);
+	padding: 0;
+
+	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
+	/* @apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+	border-width: var(--m-lineWidth-sm); */
+	border-radius: var(--m-action-radius);
+}
+
+.menu {
+	margin: auto;
+	margin-right: 0;
+	padding: 0;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	gap: var(--m-spacing-xs);
+
+	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
+	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+	border-width: var(--m-lineWidth-sm);
+	border-radius: var(--m-action-radius);
+}

package/dist/components/card/Card.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { CardRoot } from './Card.js';
+declare const meta: {
+    title: string;
+    component: import("react").FunctionComponent<import("../box/Box.js").BoxProps>;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardRoot>;
+export declare const Default: Story;
+export declare const Compact: Story;
+export declare const NonInteractive: Story;
+export declare const AsChild: Story;
+export declare const AsChildNonInteractive: Story;
+export declare const Grid: Story;
+export declare const GridCompact: Story;
+export declare const VisuallyFocused: Story;
+export declare const CardsInBox: Story;

package/dist/components/card/Card.stories.js

@@ -0,0 +1,70 @@
+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/index.js';
+import { Icon } from '../icon/index.js';
+import { Card, CardActions, CardContent, CardFooter, cardGridColumns, CardImage, CardMain, CardMenu, CardRoot, CardTitle, } from './Card.js';
+const meta = {
+    title: 'Components/Card',
+    component: CardRoot,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'stretch',
+            gap: 'var(--m-spacing-md)',
+        }, children: [_jsxs(CardRoot, Object.assign({}, args, { style: { minHeight: '20vh' }, children: [_jsx(CardImage, { render: _jsx("img", { src: "https://resources.biscuits.club/images/pashka.jpg" }) }), _jsxs(CardMain, { onClick: () => alert('clicked'), children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff you'd have on a card. Maybe a time?" }), _jsx(CardContent, { children: "More things, if you want." })] }), _jsxs(CardFooter, { children: [_jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { size: "small", color: "primary", children: _jsx(Icon, { name: "placeholder" }) })] }), _jsx(CardMenu, { children: _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "dots" }) }) })] })] })), _jsxs(CardRoot, Object.assign({}, args, { style: { maxWidth: 300 }, children: [_jsxs(CardMain, { onClick: () => alert('clicked'), children: [_jsx(CardTitle, { children: "Card Title which is very long and would normally wrap" }), _jsx(CardContent, { children: "Other stuff" }), _jsx(CardContent, { unstyled: true, children: "Styling optional" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }))] })),
+};
+export const Compact = {
+    render: () => (_jsxs(CardRoot, { children: [_jsxs(CardMain, { compact: true, children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" }), _jsx(CardContent, { children: "More things, if you want." })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })),
+};
+export const NonInteractive = {
+    render: () => (_jsxs(CardRoot, { children: [_jsxs(CardMain, { children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })),
+};
+export const AsChild = {
+    render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, { render: _jsxs("a", { href: "#here", children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }) }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })),
+};
+export const AsChildNonInteractive = {
+    render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, { nonInteractive: true, render: _jsxs("button", { children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }) }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })),
+};
+export const Grid = {
+    render: () => {
+        const [sizes, setSizes] = useState(() => Array.from({ length: 40 }, () => 50 + Math.floor(Math.random() * 300)));
+        const remove = (index) => setSizes((v) => v.filter((_, i) => i !== index));
+        const resize = (index) => setSizes((v) => {
+            const size = 50 + Math.floor(Math.random() * 300);
+            return v.map((s, i) => (i === index ? size : s));
+        });
+        return (_jsx(Card.Grid, { children: sizes.map((size, i) => (_jsx(GridCard, { size: size, remove: () => remove(i), resize: () => resize(i) }, i))) }));
+    },
+};
+export const GridCompact = {
+    render: () => {
+        const [sizes, setSizes] = useState(() => Array.from({ length: 40 }, () => 50 + Math.floor(Math.random() * 300)));
+        const remove = (index) => setSizes((v) => v.filter((_, i) => i !== index));
+        return (_jsx(Card.Grid, { columns: cardGridColumns.small, children: sizes.map((size, i) => (_jsx(GridCard, { size: size, remove: () => remove(i) }, i))) }));
+    },
+};
+function GridCard({ size, remove, resize, }) {
+    return (_jsxs(CardRoot, { style: { height: size }, children: [_jsx(CardMain, { children: _jsx(CardTitle, { children: size }) }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", onClick: remove, children: "Delete" }), resize && (_jsx(Button, { size: "small", onClick: resize, children: "Resize" }))] }) })] }));
+}
+export const VisuallyFocused = {
+    render: () => (_jsxs(CardRoot, { children: [_jsxs(CardMain, { visuallyFocused: true, onClick: () => { }, children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })),
+};
+export const CardsInBox = {
+    render() {
+        return (_jsxs("div", { style: {
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'row',
+                gap: 'var(--m-spacing-lg)',
+            }, children: [_jsx("div", { style: { flex: 1 }, children: _jsxs(CardRoot, { children: [_jsxs(CardMain, { onClick: () => { }, children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", size: "small", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }) }), _jsxs(Box, { p: true, gap: true, col: true, grow: true, children: [_jsxs(CardRoot, { children: [_jsxs(CardMain, { onClick: () => { }, children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", size: "small", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }), _jsxs(CardRoot, { children: [_jsxs(CardMain, { onClick: () => { }, children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", size: "small", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })] })] }));
+    },
+};
+//# sourceMappingURL=Card.stories.js.map

package/dist/components/card/Card.stories.js.map

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

package/dist/components/card/index.js

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

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

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

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,31 @@
+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 { Checkbox as BaseCheckbox, } from '@base-ui/react/checkbox';
+import classNames from 'clsx';
+import { Icon } from '../icon/Icon.js';
+import cls from './Checkbox.module.css';
+export function CheckboxRoot(_a) {
+    var { className, checkedMode = 'prominent' } = _a, props = __rest(_a, ["className", "checkedMode"]);
+    return (_jsx(BaseCheckbox.Root, Object.assign({}, props, { className: classNames(cls.root, className), "data-checked-mode": checkedMode })));
+}
+export function CheckboxIndicator(_a) {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (_jsx(BaseCheckbox.Indicator, Object.assign({ className: classNames(cls.indicator, className) }, props, { children: children !== null && children !== void 0 ? children : _jsx(Icon, { name: "check", size: 16 }) })));
+}
+export const Checkbox = Object.assign(function Checkbox(props) {
+    return (_jsx(CheckboxRoot, Object.assign({}, props, { children: _jsx(CheckboxIndicator, {}) })));
+}, {
+    Root: CheckboxRoot,
+    Indicator: CheckboxIndicator,
+});
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,QAAQ,IAAI,YAAY,GAGxB,MAAM,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAaxC,MAAM,UAAU,YAAY,CAAC,EAIb;QAJa,EAC5B,SAAS,EACT,WAAW,GAAG,WAAW,OAEV,EADZ,KAAK,cAHoB,4BAI5B,CADQ;IAER,OAAO,CACN,KAAC,YAAY,CAAC,IAAI,oBACb,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,uBACvB,WAAW,IAC7B,CACF,CAAC;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAIT;QAJS,EACjC,QAAQ,EACR,SAAS,OAEe,EADrB,KAAK,cAHyB,yBAIjC,CADQ;IAER,OAAO,CACN,KAAC,YAAY,CAAC,SAAS,kBACtB,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,IAC3C,KAAK,cAER,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAI,IACpB,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CACpC,SAAS,QAAQ,CAAC,KAAoB;IACrC,OAAO,CACN,KAAC,YAAY,oBAAK,KAAK,cACtB,KAAC,iBAAiB,KAAG,IACP,CACf,CAAC;AACH,CAAC,EACD;IACC,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,iBAAiB;CAC5B,CACD,CAAC"}

package/dist/components/checkbox/Checkbox.module.css

@@ -0,0 +1,74 @@
+@keyframes checkbox-fade {
+	from {
+		background-color: var(--mx-bg-ref);
+		opacity: 1;
+	}
+	to {
+		background-color: transparent;
+		opacity: 0.9;
+		border-color: transparent;
+		box-shadow: none;
+	}
+}
+
+.root {
+	position: relative;
+	display: block;
+	flex-shrink: 0;
+
+	--size: 28px;
+	height: var(--size);
+	width: var(--size);
+
+	cursor: pointer;
+
+	transition: var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	@apply --mx-bg(var(--m-control-bg));
+	@apply --mx-borderColor(var(--m-control-borderColor));
+	border-radius: var(--m-control-radius);
+	border-width: var(--m-lineWidth-md);
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+
+	&:hover:not(:disabled) {
+		@apply --mx-bg-lighter(2);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
+	}
+
+	&:active:not(:disabled) {
+		@apply --mx-bg-heavier(1);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
+	}
+
+	&:disabled {
+		box-shadow: none;
+		@apply --mx-bg(transparent);
+		@apply --mx-borderColor(var(--m-color-neutral-light));
+	}
+
+	&[data-checked] {
+		@apply --mx-bg(var(--m-color-main));
+		@apply --mx-borderColor(var(--m-color-main-ink));
+
+		&[data-checked-mode='faded'] {
+			animation-name: checkbox-fade;
+			animation-duration: 5s;
+			animation-fill-mode: forwards;
+		}
+	}
+}
+
+.indicator {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: var(--m-color-main-ink);
+}

package/dist/components/checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Checkbox } from './Checkbox.js';
+declare const meta: {
+    title: string;
+    component: ((props: import("./Checkbox.js").CheckboxProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: typeof import("./Checkbox.js").CheckboxRoot;
+        Indicator: typeof import("./Checkbox.js").CheckboxIndicator;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;

package/dist/components/checkbox/Checkbox.stories.js

@@ -0,0 +1,12 @@
+import { Checkbox } from './Checkbox.js';
+const meta = {
+    title: 'Components/Checkbox',
+    component: Checkbox,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {};
+//# sourceMappingURL=Checkbox.stories.js.map

package/dist/components/checkbox/Checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}

package/dist/components/checkbox/index.js

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

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

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

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'react';
+import { SlotDivProps } from '../utility/SlotDiv.js';
+export interface ChipProps extends SlotDivProps {
+    ref?: Ref<any>;
+}
+export declare function Chip({ className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/chip/Chip.js

@@ -0,0 +1,20 @@
+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 classNames from 'clsx';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './Chip.module.css';
+export function Chip(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (_jsx(SlotDiv, Object.assign({ className: classNames('@mode-denser', cls.root, className), role: rest.onClick ? 'button' : undefined }, rest)));
+}
+//# sourceMappingURL=Chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,OAAO,EAAgB,MAAM,uBAAuB,CAAC;AAC9D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAMpC,MAAM,UAAU,IAAI,CAAC,EAAiC;QAAjC,EAAE,SAAS,OAAsB,EAAjB,IAAI,cAApB,aAAsB,CAAF;IACxC,OAAO,CACN,KAAC,OAAO,kBACP,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAC1D,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IACrC,IAAI,EACP,CACF,CAAC;AACH,CAAC"}

package/dist/components/chip/Chip.module.css

@@ -0,0 +1,22 @@
+.root {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--m-spacing-xs);
+	white-space: nowrap;
+
+	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-fg(contrast-color(var(--mx-bg-ref)));
+	@apply --mx-borderColor(var(--m-color-main-heavy));
+
+	border-width: var(--m-lineWidth-sm);
+	border-radius: var(--m-action-radius);
+
+	font-size: var(--m-text-ambient-size);
+	line-height: normal;
+	font-weight: var(--m-text-ambient-weight);
+	font-family: var(--m-text-ambient-font);
+
+	&:not(:is(button)) {
+		padding: var(--m-action-padding);
+	}
+}

package/dist/components/chip/Chip.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Chip } from './Chip.js';
+declare const meta: {
+    title: string;
+    component: typeof Chip;
+    args: {
+        children: string;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Chip>;
+export declare const Default: Story;
+export declare const Colors: Story;
+export declare const AsButton: Story;

package/dist/components/chip/Chip.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Chip } from './Chip.js';
+const meta = {
+    title: 'Components/Chip',
+    component: Chip,
+    args: {
+        children: 'Chip',
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return _jsx(Chip, Object.assign({}, args));
+    },
+};
+export const Colors = {
+    render() {
+        return (_jsxs("div", { style: { display: 'flex', gap: '12px' }, children: [_jsx(Chip, { className: "@mode-neutral", children: "Gray" }), _jsx(Chip, { children: "Primary" }), _jsx(Chip, { className: "@mode-accent", children: "Accent" }), _jsx(Chip, { className: "@mode-attention", children: "Attention" }), _jsx(Chip, { className: "@mode-success", children: "Success" }), _jsx(Chip, { className: "@mode-lemon", children: "Lemon" }), _jsx(Chip, { className: "@mode-leek", children: "Leek" }), _jsx(Chip, { className: "@mode-tomato", children: "Tomato" }), _jsx(Chip, { className: "@mode-blueberry", children: "Blueberry" }), _jsx(Chip, { className: "@mode-eggplant", children: "Eggplant" })] }));
+    },
+};
+export const AsButton = {
+    render(args) {
+        return (_jsxs(Box, { gap: true, items: "center", children: [_jsx(Button, { render: _jsx(Chip, { color: "primary", children: "Clickable Chip" }) }), _jsx(Chip, Object.assign({}, args, { children: "Non-clickable Chip" }))] }));
+    },
+};
+//# sourceMappingURL=Chip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/Chip.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACL,QAAQ,EAAE,MAAM;KAChB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,IAAI,oBAAK,IAAI,EAAI,CAAC;IAC3B,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC5B,MAAM;QACL,OAAO,CACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,aAC3C,KAAC,IAAI,IAAC,SAAS,EAAC,eAAe,qBAAY,EAC3C,KAAC,IAAI,0BAAe,EACpB,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,uBAAc,EAC5C,KAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,0BAAiB,EAClD,KAAC,IAAI,IAAC,SAAS,EAAC,eAAe,wBAAe,EAC9C,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,sBAAa,EAC1C,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,qBAAY,EACxC,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,uBAAc,EAC5C,KAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,0BAAiB,EAClD,KAAC,IAAI,IAAC,SAAS,EAAC,gBAAgB,yBAAgB,IAC3C,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,KAAK,EAAC,QAAQ,aACtB,KAAC,MAAM,IAAC,MAAM,EAAE,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,+BAAsB,GAAI,EAC/D,KAAC,IAAI,oBAAK,IAAI,sCAA2B,IACpC,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/chip/index.js

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