@a-type/ui 6.0.30 → 6.0.31

package/dist/themes.stories.js

@@ -23,14 +23,14 @@ export default meta;
 export function DemoUI({ className, style, }) {
     const nextWeek = new Date();
     nextWeek.setDate(nextWeek.getDate() + 7);
-    return (_jsxs(PageRoot, { "data-testid": "demo", className: className, style: style, children: [_jsx(PageContent, { children: _jsxs("div", { className: cls.grid, children: [_jsxs(Box, { gap: true, wrap: true, p: true, children: [_jsx(Button, { emphasis: "primary", children: "Primary" }), _jsx(Button, { className: "@mode-accent", emphasis: "primary", children: "Accent" }), _jsx(Button, { children: "Default" }), _jsx(Button, { className: "@mode-inverted", children: "Contrast" }), _jsx(Button, { className: "@mode-attention", emphasis: "primary", children: "Destructive" }), _jsx(Button, { emphasis: "ghost", children: "Ghost" }), _jsx(Button, { className: "@mode-accent", emphasis: "ghost", children: "Ghost Accent" }), _jsx(Button, { size: "small", className: "@mode-attention", emphasis: "primary", children: "Destructive Small" }), _jsx(Button, { size: "small", className: "@mode-attention", emphasis: "ghost", children: "Ghost Destructive Small" })] }), _jsxs(Box, { gap: true, wrap: true, p: true, items: "start", children: [_jsx(Input, { placeholder: "Placeholder" }), _jsx(TextArea, { placeholder: "Placeholder" }), _jsxs(Box, { d: "row", gap: true, items: "center", children: [_jsx(Checkbox, { defaultChecked: true }), _jsx("span", { children: "Checkbox" })] }), _jsxs(ToggleGroup, { defaultValue: ['1'], children: [_jsx(ToggleGroup.Item, { value: "1", children: "Toggle 1" }), _jsx(ToggleGroup.Item, { value: "2", children: "Toggle 2" })] })] }), _jsxs(Box, { layout: "start safe-center", d: "col", gap: true, p: true, style: { maxHeight: 200 }, overflow: "auto-y", children: [_jsx(Heading, { emphasis: "primary", children: "Heading 1" }), _jsx(Heading, { emphasis: "secondary", children: "Heading 2" }), _jsx(Heading, { emphasis: "ambient", children: "Heading 3" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(TextSkeleton, { maxLength: 30 }), _jsx(TextSkeleton, { maxLength: 10 })] }), _jsxs(Box, { d: "col", gap: true, children: [_jsxs(Card, { children: [_jsxs(Card.Main, { onClick: () => { }, children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" }), _jsx(Card.Content, { unstyled: true, children: _jsxs(Chip, { children: [_jsx(Icon, { name: "clock" }), " 2 hrs"] }) })] }), _jsx(Card.Footer, { children: _jsxs(Card.Actions, { children: [_jsx(Button, { size: "small", children: "Action 1" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }), _jsxs(Card, { children: [_jsxs(Card.Main, { compact: true, onClick: () => { }, children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" }), _jsx(Card.Content, { unstyled: true, children: _jsxs(Chip, { children: [_jsx(Icon, { name: "clock" }), " 2 hrs"] }) })] }), _jsx(Card.Footer, { children: _jsxs(Card.Actions, { children: [_jsx(Button, { size: "small", children: "Action 1" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })] }), _jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", children: "Tab 1 Content" }), _jsx(Tabs.Content, { value: "tab2", children: "Tab 2 Content" })] }), _jsxs(ActionBar, { children: [_jsxs(ActionButton, { children: [_jsx(Icon, { name: "placeholder" }), "Hello"] }), _jsxs(ActionButton, { color: "primary", children: [_jsx(Icon, { name: "placeholder" }), "World"] }), _jsx(ActionButton, { children: _jsx(Icon, { name: "placeholder" }) })] }), _jsxs(AvatarList, { count: 3, children: [_jsx(AvatarList.Item, { index: 0, name: "John Doe" }), _jsx(AvatarList.Item, { index: 1, name: "Jane Doe" }), _jsx(AvatarList.Item, { index: 2, name: "John Smith" })] }), _jsxs(ContextMenu, { children: [_jsx(ContextMenu.Trigger, { render: _jsx(Tooltip, { content: "Hello World" }), children: _jsx(Button, { children: "Hover or right click" }) }), _jsxs(ContextMenu.Content, { children: [_jsx(ContextMenu.Item, { children: "Item 1" }), _jsx(ContextMenu.Item, { children: "Item 2" }), _jsx(ContextMenu.Item, { children: "Item 3" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenu.Trigger, { render: _jsx(Button, {}), style: { margin: 'auto' }, children: "Dropdown" }), _jsxs(DropdownMenu.Content, { children: [_jsx(DropdownMenu.Item, { children: "Item 1" }), _jsx(DropdownMenu.Item, { children: "Item 2" }), _jsx(DropdownMenu.Item, { children: "Item 3" }), _jsx(DropdownMenu.Item, { disabled: true, children: "Disabled Item" }), _jsx(DropdownMenu.Separator, {}), _jsx(DropdownMenu.Item, { children: "Item 4" }), _jsx(DropdownMenu.Item, { children: "Item 5" }), _jsx(DropdownMenu.Item, { children: "Item 6" }), _jsxs(DropdownMenu.Item, { children: ["With icon", _jsx(DropdownMenu.ItemRightSlot, { children: _jsx(Icon, { name: "flag" }) })] })] })] }), _jsxs(Select, { value: "1", itemToStringLabel: (i) => `Item ${i}`, children: [_jsx(Select.Trigger, {}), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: "1", children: "Item 1" }), _jsx(Select.Item, { value: "2", children: "Item 2" }), _jsx(Select.Item, { value: "3", children: "Item 3" }), _jsx(Select.Item, { value: "4", children: "Item 4" }), _jsx(Select.Item, { value: "5", children: "Item 5" }), _jsx(Select.Item, { value: "6", children: "Item 6" }), _jsx(Select.Item, { value: "7", children: "Item 7" }), _jsx(Select.Item, { value: "8", children: "Item 8" }), _jsx(Select.Item, { value: "9", children: "Item 9" }), _jsx(Select.Item, { value: "10", children: "Item 10" })] })] }), _jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Click" }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello there" }), _jsx(Dialog.Description, { children: "Im a dialog" }), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, { children: "Close" }), _jsx(Button, { color: "primary", children: "Action" })] })] })] }), _jsx(DateRangePicker, { style: { gridColumn: 'span 2' }, value: {
+    return (_jsxs(PageRoot, { "data-testid": "demo", className: className, style: style, children: [_jsx(PageContent, { children: _jsxs("div", { className: cls.grid, children: [_jsxs(Box, { gap: true, wrap: true, p: true, children: [_jsx(Button, { emphasis: "primary", children: "Primary" }), _jsx(Button, { className: "@mode-accent", emphasis: "primary", children: "Accent" }), _jsx(Button, { children: "Default" }), _jsx(Button, { className: "@mode-inverted", children: "Contrast" }), _jsx(Button, { className: "@mode-attention", emphasis: "primary", children: "Destructive" }), _jsx(Button, { emphasis: "ghost", children: "Ghost" }), _jsx(Button, { className: "@mode-accent", emphasis: "ghost", children: "Ghost Accent" }), _jsx(Button, { size: "small", className: "@mode-attention", emphasis: "primary", children: "Destructive Small" }), _jsx(Button, { size: "small", className: "@mode-attention", emphasis: "ghost", children: "Ghost Destructive Small" })] }), _jsxs(Box, { gap: true, wrap: true, p: true, items: "start", children: [_jsx(Input, { placeholder: "Placeholder" }), _jsx(TextArea, { placeholder: "Placeholder" }), _jsxs(Box, { gap: true, items: "center", children: [_jsx(Checkbox, { defaultChecked: true }), _jsx("span", { children: "Checkbox" })] }), _jsxs(ToggleGroup, { defaultValue: ['1'], children: [_jsx(ToggleGroup.Item, { value: "1", children: "Toggle 1" }), _jsx(ToggleGroup.Item, { value: "2", children: "Toggle 2" })] })] }), _jsxs(Box, { layout: "start safe-center", col: true, gap: true, p: true, style: { maxHeight: 200 }, overflow: "auto-y", children: [_jsx(Heading, { emphasis: "primary", children: "Heading 1" }), _jsx(Heading, { emphasis: "secondary", children: "Heading 2" }), _jsx(Heading, { emphasis: "ambient", children: "Heading 3" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(TextSkeleton, { maxLength: 30 }), _jsx(TextSkeleton, { maxLength: 10 })] }), _jsxs(Box, { col: true, gap: true, children: [_jsxs(Card, { children: [_jsxs(Card.Main, { onClick: () => { }, children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" }), _jsx(Card.Content, { unstyled: true, children: _jsxs(Chip, { children: [_jsx(Icon, { name: "clock" }), " 2 hrs"] }) })] }), _jsx(Card.Footer, { children: _jsxs(Card.Actions, { children: [_jsx(Button, { size: "small", children: "Action 1" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }), _jsxs(Card, { children: [_jsxs(Card.Main, { compact: true, onClick: () => { }, children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" }), _jsx(Card.Content, { unstyled: true, children: _jsxs(Chip, { children: [_jsx(Icon, { name: "clock" }), " 2 hrs"] }) })] }), _jsx(Card.Footer, { children: _jsxs(Card.Actions, { children: [_jsx(Button, { size: "small", children: "Action 1" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })] }), _jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", children: "Tab 1 Content" }), _jsx(Tabs.Content, { value: "tab2", children: "Tab 2 Content" })] }), _jsxs(ActionBar, { children: [_jsxs(ActionButton, { children: [_jsx(Icon, { name: "placeholder" }), "Hello"] }), _jsxs(ActionButton, { color: "primary", children: [_jsx(Icon, { name: "placeholder" }), "World"] }), _jsx(ActionButton, { children: _jsx(Icon, { name: "placeholder" }) })] }), _jsxs(AvatarList, { count: 3, children: [_jsx(AvatarList.Item, { index: 0, name: "John Doe" }), _jsx(AvatarList.Item, { index: 1, name: "Jane Doe" }), _jsx(AvatarList.Item, { index: 2, name: "John Smith" })] }), _jsxs(ContextMenu, { children: [_jsx(ContextMenu.Trigger, { render: _jsx(Tooltip, { content: "Hello World" }), children: _jsx(Button, { children: "Hover or right click" }) }), _jsxs(ContextMenu.Content, { children: [_jsx(ContextMenu.Item, { children: "Item 1" }), _jsx(ContextMenu.Item, { children: "Item 2" }), _jsx(ContextMenu.Item, { children: "Item 3" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenu.Trigger, { render: _jsx(Button, {}), style: { margin: 'auto' }, children: "Dropdown" }), _jsxs(DropdownMenu.Content, { children: [_jsx(DropdownMenu.Item, { children: "Item 1" }), _jsx(DropdownMenu.Item, { children: "Item 2" }), _jsx(DropdownMenu.Item, { children: "Item 3" }), _jsx(DropdownMenu.Item, { disabled: true, children: "Disabled Item" }), _jsx(DropdownMenu.Separator, {}), _jsx(DropdownMenu.Item, { children: "Item 4" }), _jsx(DropdownMenu.Item, { children: "Item 5" }), _jsx(DropdownMenu.Item, { children: "Item 6" }), _jsxs(DropdownMenu.Item, { children: ["With icon", _jsx(DropdownMenu.ItemRightSlot, { children: _jsx(Icon, { name: "flag" }) })] })] })] }), _jsxs(Select, { value: "1", itemToStringLabel: (i) => `Item ${i}`, children: [_jsx(Select.Trigger, {}), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: "1", children: "Item 1" }), _jsx(Select.Item, { value: "2", children: "Item 2" }), _jsx(Select.Item, { value: "3", children: "Item 3" }), _jsx(Select.Item, { value: "4", children: "Item 4" }), _jsx(Select.Item, { value: "5", children: "Item 5" }), _jsx(Select.Item, { value: "6", children: "Item 6" }), _jsx(Select.Item, { value: "7", children: "Item 7" }), _jsx(Select.Item, { value: "8", children: "Item 8" }), _jsx(Select.Item, { value: "9", children: "Item 9" }), _jsx(Select.Item, { value: "10", children: "Item 10" })] })] }), _jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Click" }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello there" }), _jsx(Dialog.Description, { children: "Im a dialog" }), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, { children: "Close" }), _jsx(Button, { color: "primary", children: "Action" })] })] })] }), _jsx(DateRangePicker, { style: { gridColumn: 'span 2' }, value: {
                                 start: new Date(),
                                 end: nextWeek,
-                            }, onChange: () => { } }), _jsx(Progress, { value: 50, style: { margin: 'auto' } }), _jsx(Slider, { defaultValue: 50, min: 0, max: 100 }), _jsxs(Box, { surface: "primary", p: true, gap: true, d: "col", children: [_jsx(Heading, { emphasis: "primary", children: "Primary surface" }), _jsx(Heading, { emphasis: "secondary", children: "Primary surface" }), _jsx(Heading, { emphasis: "ambient", children: "Primary surface" }), _jsx("div", { children: "Primary surface" }), _jsx(Button, { emphasis: "ghost", children: "Ghost" })] }), _jsxs(Box, { surface: "primary", color: "accent", p: true, d: "col", style: { maxHeight: 200 }, overflow: "auto-y", children: [_jsx(Heading, { emphasis: "primary", children: "Accent surface" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(TextSkeleton, { maxLength: 30 }), _jsx(TextSkeleton, { maxLength: 10 }), "Accent surface"] }), _jsx(Box, { surface: "secondary", p: true, d: "col", children: "Secondary surface" }), _jsx(Box, { surface: "ambient", p: true, d: "col", children: "Ambient surface" }), _jsxs(Box, { surface: true, color: "attention", p: true, d: "col", children: [_jsx(H2, { children: "Attention surface" }), _jsx(H3, { children: "Attention surface" }), "Attention surface", _jsx(Button, { emphasis: "ghost", children: "Ghost" })] }), _jsx(Box, { children: _jsx(Note, { children: "Note note" }) }), _jsx(Box, { justify: "start", items: "start", children: _jsxs(HorizontalList, { openDirection: "down", children: [_jsx(Button, { size: "small", children: "One" }), _jsx(Button, { size: "small", children: "Two" }), _jsx(Button, { size: "small", children: "Three" }), _jsx(Button, { size: "small", children: "Four" }), _jsx(Button, { size: "small", children: "Five" }), _jsx(Button, { size: "small", children: "Six" }), _jsx(Button, { size: "small", children: "Seven" }), _jsx(Button, { size: "small", children: "Eight" }), _jsx(Button, { size: "small", children: "Nine" }), _jsx(Button, { size: "small", children: "Ten" }), _jsx(Button, { size: "small", children: "Eleven" })] }) }), _jsx(ImageUploader, { style: { height: 200 }, value: null, onChange: () => { } })] }) }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "neutral", children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Neutral" })] }), _jsxs(NavBarItem, { color: "neutral", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
+                            }, onChange: () => { } }), _jsx(Progress, { value: 50, style: { margin: 'auto' } }), _jsx(Slider, { defaultValue: 50, min: 0, max: 100 }), _jsxs(Box, { surface: "primary", p: true, gap: true, col: true, children: [_jsx(Heading, { emphasis: "primary", children: "Primary surface" }), _jsx(Heading, { emphasis: "secondary", children: "Primary surface" }), _jsx(Heading, { emphasis: "ambient", children: "Primary surface" }), _jsx("div", { children: "Primary surface" }), _jsx(Button, { emphasis: "ghost", children: "Ghost" })] }), _jsxs(Box, { surface: "primary", color: "accent", p: true, col: true, style: { maxHeight: 200 }, overflow: "auto-y", children: [_jsx(Heading, { emphasis: "primary", children: "Accent surface" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(TextSkeleton, { maxLength: 30 }), _jsx(TextSkeleton, { maxLength: 10 }), "Accent surface"] }), _jsx(Box, { surface: "secondary", p: true, col: true, children: "Secondary surface" }), _jsx(Box, { surface: "ambient", p: true, col: true, children: "Ambient surface" }), _jsxs(Box, { surface: true, color: "attention", p: true, col: true, children: [_jsx(H2, { children: "Attention surface" }), _jsx(H3, { children: "Attention surface" }), "Attention surface", _jsx(Button, { emphasis: "ghost", children: "Ghost" })] }), _jsx(Box, { children: _jsx(Note, { children: "Note note" }) }), _jsx(Box, { justify: "start", items: "start", children: _jsxs(HorizontalList, { openDirection: "down", children: [_jsx(Button, { size: "small", children: "One" }), _jsx(Button, { size: "small", children: "Two" }), _jsx(Button, { size: "small", children: "Three" }), _jsx(Button, { size: "small", children: "Four" }), _jsx(Button, { size: "small", children: "Five" }), _jsx(Button, { size: "small", children: "Six" }), _jsx(Button, { size: "small", children: "Seven" }), _jsx(Button, { size: "small", children: "Eight" }), _jsx(Button, { size: "small", children: "Nine" }), _jsx(Button, { size: "small", children: "Ten" }), _jsx(Button, { size: "small", children: "Eleven" })] }) }), _jsx(ImageUploader, { style: { height: 200 }, value: null, onChange: () => { } })] }) }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "neutral", children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Neutral" })] }), _jsxs(NavBarItem, { color: "neutral", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
 }
 export const Nesting = {
     render() {
-        return (_jsxs(Box, { d: "col", p: true, gap: true, children: [_jsx(Box, { d: "row", gap: true, surface: "primary", children: _jsx(Button, { color: "primary", children: "Root theme" }) }), _jsx(DemoUI, { className: "@mode-eggplant override-dark", style: { flex: 1 } })] }));
+        return (_jsxs(Box, { col: true, p: true, gap: true, children: [_jsx(Box, { gap: true, surface: "primary", children: _jsx(Button, { color: "primary", children: "Root theme" }) }), _jsx(DemoUI, { className: "@mode-eggplant override-dark", style: { flex: 1 } })] }));
     },
 };
 export const Custom = {
@@ -45,7 +45,7 @@ export const Custom = {
                 [$userColorSaturation]: Math.random(),
             });
         };
-        return (_jsxs(Box, { d: "col", full: true, gap: true, items: "stretch", style: theme, children: [_jsx(Button, { onClick: reroll, children: "Reroll" }), _jsx(DemoUI, { className: "@mode-user" })] }));
+        return (_jsxs(Box, { col: true, full: true, gap: true, items: "stretch", style: theme, children: [_jsx(Button, { onClick: reroll, children: "Reroll" }), _jsx(DemoUI, { className: "@mode-user" })] }));
     },
 };
 //# sourceMappingURL=themes.stories.js.map

package/dist/themes.stories.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.30",
+  "version": "6.0.31",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@a-type/utils": "^1.1.9",
-    "@arbor-css/core": "^0.0.133",
-    "@arbor-css/postcss": "^0.0.133",
+    "@arbor-css/core": "^0.0.135",
+    "@arbor-css/postcss": "^0.0.135",
     "@base-ui/react": "^1.4.1",
     "@use-gesture/react": "^10.3.1",
     "browser-image-resizer": "^2.4.1",

package/src/arbor/arbor.ts

@@ -266,17 +266,19 @@ export function presetAtype<
 				}),
 				hover: create('hover', {
 					definition: (css) => css`
-						&:hover {
-							${base.mixins.bgHeavier.apply({ '--step': 1 })}
-							${base.mixins.ring.apply({
-								'--ring': base.functions.ring.compute({
-									'--color': $.mixins.bg.ref,
-									'--size': '4px',
-								}),
-							})}
+						@media (hover: hover) and (pointer: fine) {
+							&:hover {
+								${base.mixins.bgHeavier.apply({ '--step': 1 })}
+								${base.mixins.ring.apply({
+									'--ring': base.functions.ring.compute({
+										'--color': $.mixins.bg.ref,
+										'--size': '4px',
+									}),
+								})}
 
-							&[data-emphasis="primary"] {
-								${base.mixins.bgLighter.apply({ '--step': 1 })}
+								&[data-emphasis="primary"] {
+									${base.mixins.bgLighter.apply({ '--step': 1 })}
+								}
 							}
 						}
 					`,

package/src/colors.stories.tsx

@@ -60,10 +60,10 @@ export const Default: Story = {
 			<Box col>
 				<input type="color" className="sticky top-0 z-1" />
 				<Box full>
-					<Box d="col" grow p surface="ambient">
+					<Box col grow p surface="ambient">
 						{ranges}
 					</Box>
-					<Box d="col" className="@mode-dark" surface="ambient" grow p>
+					<Box col className="@mode-dark" surface="ambient" grow p>
 						{ranges}
 					</Box>
 				</Box>
@@ -120,7 +120,7 @@ export const Modifiers: Story = {
 			: {};
 		return (
 			<Box col>
-				<ModifierRange className="@mode-salt" />
+				<ModifierRange className="@mode-neutral" />
 				<ModifierRange className="@mode-lemon" />
 				<ModifierRange className="@mode-leek" />
 				<ModifierRange className="@mode-tomato" />

package/src/components/box/Box.module.css

@@ -3,17 +3,15 @@
 		display: flex;
 		position: relative;
 
-		&[data-direction='row'] {
-			flex-direction: row;
-		}
-		&[data-direction='col'] {
-			flex-direction: column;
-		}
-		&[data-direction='row-reverse'] {
+		flex-direction: row;
+		&[data-reverse] {
 			flex-direction: row-reverse;
 		}
-		&[data-direction='col-reverse'] {
-			flex-direction: column-reverse;
+		&[data-col] {
+			flex-direction: column;
+			&[data-reverse] {
+				flex-direction: column-reverse;
+			}
 		}
 
 		&[data-wrap='wrap'],
@@ -197,12 +195,16 @@
 			@apply --mx-bg-faded(80%);
 			@apply --mx-borderColor-faded(80%);
 		}
+		&[data-dim='true'] {
+			@apply --mx-fg-lighter(2.5);
+		}
 
 		&[data-grow='true'] {
 			flex-grow: 1;
 		}
 		&[data-shrink='true'] {
 			flex-shrink: 1;
+			min-width: 0;
 		}
 
 		@apply --mx-shadow;

package/src/components/box/Box.stories.tsx

@@ -5,6 +5,7 @@ import { Progress } from '../progress/Progress.js';
 import { Slider } from '../slider/Slider.js';
 import { Switch } from '../switch/Switch.js';
 import { ToggleGroup } from '../toggleGroup/toggleGroup.js';
+import { Text } from '../typography/typography.js';
 import { Box } from './Box.js';
 
 const meta = {
@@ -152,3 +153,18 @@ export const Surfaces: Story = {
 		);
 	},
 };
+
+export const DimComparison: Story = {
+	render(args) {
+		return (
+			<Box gap>
+				<Box surface="ambient" dim>
+					Dimmed box
+				</Box>
+				<Box surface="ambient">
+					<Text dim>Dimmed text</Text>
+				</Box>
+			</Box>
+		);
+	},
+};

package/src/components/box/Box.tsx

@@ -21,27 +21,84 @@ 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';
+	/**
+	 * Apply flex-direction: column - default is row
+	 */
 	col?: boolean;
+	/**
+	 * Reverse flex direction
+	 */
+	reverse?: boolean;
+	/**
+	 * Adjust align-items
+	 */
 	items?: BoxAlignment;
+	/**
+	 * Adjust justify-content
+	 */
 	justify?: BoxJustification;
-	layout?: `${BoxAlignment} ${BoxJustification}`;
+	/**
+	 * Apply both align-items and justify-content together
+	 */
+	layout?:
+		| `${BoxAlignment} ${BoxJustification}`
+		| `${BoxAlignment & BoxJustification}`;
+	/**
+	 * Adjust gap
+	 */
 	gap?: BoxSpacingSize | boolean;
+	/**
+	 * Add flex-wrap
+	 */
 	wrap?: boolean;
+	/**
+	 * Adjust padding
+	 */
 	p?: BoxSpacingSize | boolean;
+	/**
+	 * Apply surface intents
+	 */
 	surface?: boolean | 'ambient' | 'secondary' | 'primary';
+	/**
+	 * Add a default border
+	 */
 	border?: boolean;
+	/**
+	 * Add 100% w/h
+	 */
 	full?: boolean | 'width' | 'height';
+	/**
+	 * Control overflow / scroll
+	 */
 	overflow?: 'hidden' | 'clip' | 'auto' | 'auto-x' | 'auto-y';
+	/**
+	 * Apply flex-grow
+	 */
 	grow?: boolean;
+	/**
+	 * Apply flex-shrink and min-width
+	 */
+	shrink?: boolean;
+	/**
+	 * Add shadow
+	 */
 	elevated?: ShadowValue;
 	/** @deprecated - use round */
 	rounded?: 'xs' | 'sm' | 'md' | 'lg' | boolean;
+	/**
+	 * Adust border radius
+	 */
 	round?: 'xs' | 'sm' | 'md' | 'lg' | boolean;
 	ref?: Ref<HTMLDivElement>;
 	container?: boolean;
+	/**
+	 * Adds transparency
+	 */
 	glass?: boolean;
+	/**
+	 * Applies a gray foreground color
+	 */
+	dim?: boolean;
 	self?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
 }
 
@@ -49,13 +106,12 @@ export function Box({
 	className,
 	items: itemsSolo,
 	justify: justifySolo,
-	layout: align,
+	layout,
 	gap,
 	wrap,
 	p,
 	col,
-	d = col ? 'col' : undefined,
-	direction = d,
+	reverse,
 	style,
 	container,
 	surface,
@@ -64,16 +120,18 @@ export function Box({
 	full,
 	overflow,
 	grow,
+	shrink,
 	elevated,
 	rounded = surface ? true : undefined,
 	round = rounded,
 	glass,
+	dim,
 	self,
 	ref,
 	...rest
 }: BoxProps) {
-	const items = itemsSolo ?? align?.split(' ')[0];
-	const justify = justifySolo ?? align?.split(' ')[1];
+	const items = itemsSolo ?? layout?.split(' ')[0];
+	const justify = justifySolo ?? layout?.split(' ')[1] ?? layout;
 	const [inset, elevation, up] = parseElevated(elevated);
 
 	const main = (
@@ -81,13 +139,9 @@ export function Box({
 			ref={ref}
 			{...rest}
 			style={style}
-			className={clsx(
-				'layer-components:relative layer-components:flex',
-				color && `@mode-${color}`,
-				cls.root,
-				className,
-			)}
-			data-direction={direction}
+			className={clsx(color && `@mode-${color}`, cls.root, className)}
+			data-col={col ? '' : undefined}
+			data-reverse={reverse ? '' : undefined}
 			data-gap={gap}
 			data-items={items}
 			data-justify={justify}
@@ -99,12 +153,14 @@ export function Box({
 			data-full={full}
 			data-overflow={overflow}
 			data-grow={grow}
+			data-shrink={shrink}
 			data-elevated={elevation}
 			data-shadow-up={up}
 			data-shadow-inset={inset}
 			data-container={container}
 			data-glass={glass}
 			data-self={self}
+			data-dim={dim}
 		/>
 	);
 

package/src/components/emojiPicker/EmojiPicker.tsx

@@ -110,7 +110,7 @@ export const EmojiPickerSkinToneSelector = ({
 	const [skinTone, setSkinTone] = useEmojiSkinTone();
 
 	return (
-		<Box d="row" gap className={className} {...props}>
+		<Box gap className={className} {...props}>
 			{options.map((option) => (
 				<Button
 					key={option.skinTone}

package/src/components/peek/Peek.stories.tsx

@@ -20,7 +20,7 @@ export const Default: Story = {
 	render(args) {
 		return (
 			<Peek {...args}>
-				<Box d="col">
+				<Box col>
 					<P>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
 						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

package/src/components/tooltip/Tooltip.stories.tsx

@@ -61,7 +61,7 @@ export const Customized: Story = {
 			open
 			{...args}
 			content={
-				<Box d="col" p>
+				<Box col p>
 					Some content
 				</Box>
 			}

package/src/components/typography/typography.module.css

@@ -50,7 +50,7 @@
 		text-wrap: wrap;
 	}
 	&[data-dim] {
-		@apply --mx-fg(var(--m-color-neutral-heavy));
+		@apply --mx-fg-lighter(2.5);
 	}
 
 	&[data-color='neutral'] {

package/src/themes.stories.tsx

@@ -94,7 +94,7 @@ export function DemoUI({
 					<Box gap wrap p items="start">
 						<Input placeholder="Placeholder" />
 						<TextArea placeholder="Placeholder" />
-						<Box d="row" gap items="center">
+						<Box gap items="center">
 							<Checkbox defaultChecked />
 							<span>Checkbox</span>
 						</Box>
@@ -105,7 +105,7 @@ export function DemoUI({
 					</Box>
 					<Box
 						layout="start safe-center"
-						d="col"
+						col
 						gap
 						p
 						style={{ maxHeight: 200 }}
@@ -121,7 +121,7 @@ export function DemoUI({
 						<TextSkeleton maxLength={30} />
 						<TextSkeleton maxLength={10} />
 					</Box>
-					<Box d="col" gap>
+					<Box col gap>
 						<Card>
 							<Card.Main onClick={() => {}}>
 								<Card.Title>Card Title</Card.Title>
@@ -257,7 +257,7 @@ export function DemoUI({
 					/>
 					<Progress value={50} style={{ margin: 'auto' }} />
 					<Slider defaultValue={50} min={0} max={100} />
-					<Box surface="primary" p gap d="col">
+					<Box surface="primary" p gap col>
 						<Heading emphasis="primary">Primary surface</Heading>
 						<Heading emphasis="secondary">Primary surface</Heading>
 						<Heading emphasis="ambient">Primary surface</Heading>
@@ -268,7 +268,7 @@ export function DemoUI({
 						surface="primary"
 						color="accent"
 						p
-						d="col"
+						col
 						style={{ maxHeight: 200 }}
 						overflow="auto-y"
 					>
@@ -289,13 +289,13 @@ export function DemoUI({
 						<TextSkeleton maxLength={10} />
 						Accent surface
 					</Box>
-					<Box surface="secondary" p d="col">
+					<Box surface="secondary" p col>
 						Secondary surface
 					</Box>
-					<Box surface="ambient" p d="col">
+					<Box surface="ambient" p col>
 						Ambient surface
 					</Box>
-					<Box surface color="attention" p d="col">
+					<Box surface color="attention" p col>
 						<H2>Attention surface</H2>
 						<H3>Attention surface</H3>
 						Attention surface
@@ -363,8 +363,8 @@ export function DemoUI({
 export const Nesting: Story = {
 	render() {
 		return (
-			<Box d="col" p gap>
-				<Box d="row" gap surface="primary">
+			<Box col p gap>
+				<Box gap surface="primary">
 					<Button color="primary">Root theme</Button>
 				</Box>
 				<DemoUI className="@mode-eggplant override-dark" style={{ flex: 1 }} />
@@ -386,7 +386,7 @@ export const Custom: Story = {
 			});
 		};
 		return (
-			<Box d="col" full gap items="stretch" style={theme as any}>
+			<Box col full gap items="stretch" style={theme as any}>
 				<Button onClick={reroll}>Reroll</Button>
 				<DemoUI className="@mode-user" />
 			</Box>