@a-type/ui 1.4.1 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/actions/ActionButton.js +1 -1
- package/dist/cjs/components/actions/ActionButton.js.map +1 -1
- package/dist/cjs/components/avatar/Avatar.js +3 -3
- package/dist/cjs/components/avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/button/classes.js +5 -5
- package/dist/cjs/components/button/classes.js.map +1 -1
- package/dist/cjs/components/camera/Camera.js +1 -1
- package/dist/cjs/components/camera/Camera.js.map +1 -1
- package/dist/cjs/components/card/Card.js +4 -4
- package/dist/cjs/components/card/Card.js.map +1 -1
- package/dist/cjs/components/checkbox/Checkbox.js +1 -1
- package/dist/cjs/components/checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/chip/Chip.js +1 -1
- package/dist/cjs/components/chip/Chip.js.map +1 -1
- package/dist/cjs/components/datePicker/DatePicker.js +1 -1
- package/dist/cjs/components/datePicker/DatePicker.js.map +1 -1
- package/dist/cjs/components/dialog/Dialog.js +1 -1
- package/dist/cjs/components/dialog/Dialog.js.map +1 -1
- package/dist/cjs/components/imageUploader/ImageUploader.js +1 -1
- package/dist/cjs/components/imageUploader/ImageUploader.js.map +1 -1
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.js.map +1 -1
- package/dist/cjs/components/navBar/NavBar.js +3 -3
- package/dist/cjs/components/navBar/NavBar.js.map +1 -1
- package/dist/cjs/components/note/Note.js +1 -1
- package/dist/cjs/components/note/Note.js.map +1 -1
- package/dist/cjs/components/numberStepper/NumberStepper.js +1 -1
- package/dist/cjs/components/numberStepper/NumberStepper.js.map +1 -1
- package/dist/cjs/components/popover/Popover.js +1 -1
- package/dist/cjs/components/popover/Popover.js.map +1 -1
- package/dist/cjs/components/progress/Progress.js +2 -2
- package/dist/cjs/components/progress/Progress.js.map +1 -1
- package/dist/cjs/components/select/Select.js +2 -2
- package/dist/cjs/components/select/Select.js.map +1 -1
- package/dist/cjs/components/skeletons/skeletons.js +2 -2
- package/dist/cjs/components/skeletons/skeletons.js.map +1 -1
- package/dist/cjs/components/slider/Slider.js +3 -3
- package/dist/cjs/components/slider/Slider.js.map +1 -1
- package/dist/cjs/components/switch/Switch.js +2 -2
- package/dist/cjs/components/switch/Switch.js.map +1 -1
- package/dist/cjs/components/tabs/tabs.js +1 -1
- package/dist/cjs/components/tabs/tabs.js.map +1 -1
- package/dist/cjs/components/textArea/TextArea.js +1 -1
- package/dist/cjs/components/textArea/TextArea.js.map +1 -1
- package/dist/cjs/components/tooltip/Tooltip.js +1 -1
- package/dist/cjs/themes.stories.js +8 -5
- package/dist/cjs/themes.stories.js.map +1 -1
- package/dist/cjs/uno.preset.d.ts +4 -2
- package/dist/cjs/uno.preset.js +26 -7
- package/dist/cjs/uno.preset.js.map +1 -1
- package/dist/css/main.css +2 -2
- package/dist/esm/components/actions/ActionButton.js +1 -1
- package/dist/esm/components/actions/ActionButton.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.js +3 -3
- package/dist/esm/components/avatar/Avatar.js.map +1 -1
- package/dist/esm/components/button/classes.js +5 -5
- package/dist/esm/components/button/classes.js.map +1 -1
- package/dist/esm/components/camera/Camera.js +1 -1
- package/dist/esm/components/camera/Camera.js.map +1 -1
- package/dist/esm/components/card/Card.js +4 -4
- package/dist/esm/components/card/Card.js.map +1 -1
- package/dist/esm/components/checkbox/Checkbox.js +1 -1
- package/dist/esm/components/checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/chip/Chip.js +1 -1
- package/dist/esm/components/chip/Chip.js.map +1 -1
- package/dist/esm/components/datePicker/DatePicker.js +1 -1
- package/dist/esm/components/datePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/dialog/Dialog.js +1 -1
- package/dist/esm/components/dialog/Dialog.js.map +1 -1
- package/dist/esm/components/imageUploader/ImageUploader.js +1 -1
- package/dist/esm/components/imageUploader/ImageUploader.js.map +1 -1
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/navBar/NavBar.js +3 -3
- package/dist/esm/components/navBar/NavBar.js.map +1 -1
- package/dist/esm/components/note/Note.js +1 -1
- package/dist/esm/components/note/Note.js.map +1 -1
- package/dist/esm/components/numberStepper/NumberStepper.js +1 -1
- package/dist/esm/components/numberStepper/NumberStepper.js.map +1 -1
- package/dist/esm/components/popover/Popover.js +1 -1
- package/dist/esm/components/popover/Popover.js.map +1 -1
- package/dist/esm/components/progress/Progress.js +2 -2
- package/dist/esm/components/progress/Progress.js.map +1 -1
- package/dist/esm/components/select/Select.js +2 -2
- package/dist/esm/components/select/Select.js.map +1 -1
- package/dist/esm/components/skeletons/skeletons.js +2 -2
- package/dist/esm/components/skeletons/skeletons.js.map +1 -1
- package/dist/esm/components/slider/Slider.js +3 -3
- package/dist/esm/components/slider/Slider.js.map +1 -1
- package/dist/esm/components/switch/Switch.js +2 -2
- package/dist/esm/components/switch/Switch.js.map +1 -1
- package/dist/esm/components/tabs/tabs.js +1 -1
- package/dist/esm/components/tabs/tabs.js.map +1 -1
- package/dist/esm/components/textArea/TextArea.js +1 -1
- package/dist/esm/components/textArea/TextArea.js.map +1 -1
- package/dist/esm/components/tooltip/Tooltip.js +1 -1
- package/dist/esm/themes.stories.js +4 -1
- package/dist/esm/themes.stories.js.map +1 -1
- package/dist/esm/uno.preset.d.ts +4 -2
- package/dist/esm/uno.preset.js +26 -7
- package/dist/esm/uno.preset.js.map +1 -1
- package/package.json +1 -1
- package/src/components/actions/ActionButton.tsx +1 -2
- package/src/components/avatar/Avatar.tsx +3 -3
- package/src/components/button/classes.tsx +5 -5
- package/src/components/camera/Camera.tsx +1 -1
- package/src/components/card/Card.tsx +4 -4
- package/src/components/checkbox/Checkbox.tsx +1 -1
- package/src/components/chip/Chip.tsx +1 -1
- package/src/components/datePicker/DatePicker.tsx +1 -1
- package/src/components/dialog/Dialog.tsx +2 -2
- package/src/components/imageUploader/ImageUploader.tsx +1 -1
- package/src/components/input/Input.tsx +1 -1
- package/src/components/navBar/NavBar.tsx +4 -4
- package/src/components/note/Note.tsx +2 -2
- package/src/components/numberStepper/NumberStepper.tsx +1 -1
- package/src/components/popover/Popover.tsx +1 -1
- package/src/components/progress/Progress.tsx +2 -2
- package/src/components/select/Select.tsx +2 -2
- package/src/components/skeletons/skeletons.tsx +2 -2
- package/src/components/slider/Slider.tsx +3 -3
- package/src/components/switch/Switch.tsx +2 -2
- package/src/components/tabs/tabs.tsx +1 -1
- package/src/components/textArea/TextArea.tsx +1 -1
- package/src/components/tooltip/Tooltip.tsx +1 -1
- package/src/themes.stories.tsx +44 -0
- package/src/uno.preset.ts +31 -7
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
+
import { ActionBar, ActionButton } from './components/actions/index.js';
|
|
4
5
|
import { Button } from './components/button/index.js';
|
|
5
6
|
import { Card } from './components/card/index.js';
|
|
7
|
+
import { Icon } from './components/icon/index.js';
|
|
8
|
+
import { AvatarList, Dialog, Tooltip } from './components/index.js';
|
|
6
9
|
import { Input } from './components/input/index.js';
|
|
7
10
|
import { Tabs } from './components/tabs/tabs.js';
|
|
8
11
|
import { TextArea } from './components/textArea/index.js';
|
|
@@ -15,7 +18,7 @@ const meta = {
|
|
|
15
18
|
};
|
|
16
19
|
export default meta;
|
|
17
20
|
function DemoUI({ className }) {
|
|
18
|
-
return (_jsxs("div", { className: clsx('grid gap-2 grid-cols-3', className), children: [_jsxs("div", { className: "col", children: [_jsx(Button, { color: "primary", children: "Primary" }), _jsx(Button, { color: "accent", children: "Accent" }), _jsx(Button, { children: "Default" }), _jsx(Button, { size: "small", color: "destructive", children: "Destructive" }), _jsx(Button, { size: "small", color: "ghostDestructive", children: "Ghost Destructive" })] }), _jsxs("div", { className: "col", children: [_jsx(Input, { placeholder: "Placeholder" }), _jsx(TextArea, { placeholder: "Placeholder" })] }), _jsx("div", { children: _jsxs(Card, { children: [_jsxs(Card.Main, { children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" })] }), _jsx(Card.Footer, { children: _jsx(Card.Actions, { children: _jsx(Button, { size: "small", children: "Action 1" }) }) })] }) }), _jsx("div", { children: _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" })] }) })] }));
|
|
21
|
+
return (_jsxs("div", { className: clsx('grid gap-2 grid-cols-3', className), children: [_jsxs("div", { className: "col", children: [_jsx(Button, { color: "primary", children: "Primary" }), _jsx(Button, { color: "accent", children: "Accent" }), _jsx(Button, { children: "Default" }), _jsx(Button, { color: "contrast", children: "Contrast" }), _jsx(Button, { color: "ghost", children: "Ghost" }), _jsx(Button, { color: "ghostAccent", children: "Ghost Accent" }), _jsx(Button, { size: "small", color: "destructive", children: "Destructive" }), _jsx(Button, { size: "small", color: "ghostDestructive", children: "Ghost Destructive" })] }), _jsxs("div", { className: "col", children: [_jsx(Input, { placeholder: "Placeholder" }), _jsx(TextArea, { placeholder: "Placeholder" })] }), _jsx("div", { children: _jsxs(Card, { children: [_jsxs(Card.Main, { children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" })] }), _jsx(Card.Footer, { children: _jsx(Card.Actions, { children: _jsx(Button, { size: "small", children: "Action 1" }) }) })] }) }), _jsx("div", { children: _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" })] }) }), _jsx("div", { children: _jsxs(ActionBar, { children: [_jsxs(ActionButton, { children: [_jsx(Icon, { name: "placeholder" }), "Hello"] }), _jsxs(ActionButton, { color: "primary", children: [_jsx(Icon, { name: "placeholder" }), "World"] })] }) }), _jsx("div", { children: _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" })] }) }), _jsx("div", { children: _jsx(Tooltip, { content: "Hello World", children: _jsx(Button, { children: "Hover me" }) }) }), _jsx("div", { children: _jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { asChild: true, children: _jsx(Button, { children: "Click" }) }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello there" }), _jsx(Dialog.Description, { children: "Im a dialog" }), _jsx(Dialog.Actions, { children: _jsx(Dialog.Close, { children: "Close" }) })] })] }) })] }));
|
|
19
22
|
}
|
|
20
23
|
export const Default = {
|
|
21
24
|
render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.stories.js","sourceRoot":"","sources":["../../src/themes.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,SAAS,MAAM,CAAC,EAAE,SAAS,EAA0B;IACpD,OAAO,CACN,eAAK,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,SAAS,CAAC,aACxD,eAAK,SAAS,EAAC,KAAK,aACnB,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,wBAAiB,EACxC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,0BAAiB,EACxB,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,aAAa,4BAE/B,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,kBAAkB,kCAEpC,IACJ,EACN,eAAK,SAAS,EAAC,KAAK,aACnB,KAAC,KAAK,IAAC,WAAW,EAAC,aAAa,GAAG,EACnC,KAAC,QAAQ,IAAC,WAAW,EAAC,aAAa,GAAG,IACjC,EACN,wBACC,MAAC,IAAI,eACJ,MAAC,IAAI,CAAC,IAAI,eACT,KAAC,IAAI,CAAC,KAAK,6BAAwB,EACnC,KAAC,IAAI,CAAC,OAAO,+BAA4B,IAC9B,EACZ,KAAC,IAAI,CAAC,MAAM,cACX,KAAC,IAAI,CAAC,OAAO,cACZ,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,yBAAkB,GACxB,GACF,IACR,GACF,EACN,wBACC,MAAC,IAAI,IAAC,YAAY,EAAC,MAAM,aACxB,MAAC,IAAI,CAAC,IAAI,eACT,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,EAC/C,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,IACpC,EACZ,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,8BAA6B,EACvD,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,8BAA6B,IACjD,GACF,IACD,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,OAAO,KAAC,MAAM,KAAG,CAAC;IACnB,CAAC;CACD,CAAC"}
|
|
1
|
+
{"version":3,"file":"themes.stories.js","sourceRoot":"","sources":["../../src/themes.stories.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/uno.preset.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { Preset } from 'unocss';
|
|
2
|
-
export default function presetAglio({
|
|
3
|
-
|
|
2
|
+
export default function presetAglio({ scale, interFontLocation, colorRanges, borderScale, roundedness, }?: {
|
|
3
|
+
scale?: 'sm' | 'md' | 'lg';
|
|
4
4
|
interFontLocation?: string;
|
|
5
5
|
colorRanges?: {
|
|
6
6
|
light: [number, number];
|
|
7
7
|
dark: [number, number];
|
|
8
8
|
};
|
|
9
|
+
borderScale?: number;
|
|
10
|
+
roundedness?: number;
|
|
9
11
|
}): Preset;
|
package/dist/esm/uno.preset.js
CHANGED
|
@@ -1,10 +1,22 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { entriesToCss, toArray } from '@unocss/core';
|
|
3
3
|
import { presetUno } from 'unocss';
|
|
4
|
-
|
|
4
|
+
const spacing = {
|
|
5
|
+
sm: 0.125,
|
|
6
|
+
md: 0.25,
|
|
7
|
+
lg: 0.33333,
|
|
8
|
+
};
|
|
9
|
+
const roundedScaling = {
|
|
10
|
+
sm: 1,
|
|
11
|
+
md: 1,
|
|
12
|
+
lg: 1.25,
|
|
13
|
+
};
|
|
14
|
+
export default function presetAglio({ scale = 'md', interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf', colorRanges = {
|
|
5
15
|
light: [90, 40],
|
|
6
16
|
dark: [0, 60],
|
|
7
|
-
}, } = {}) {
|
|
17
|
+
}, borderScale = 1, roundedness = 1, } = {}) {
|
|
18
|
+
const spacingIncrement = spacing[scale];
|
|
19
|
+
roundedness *= roundedScaling[scale];
|
|
8
20
|
const lightColors = generateColors(...colorRanges.light);
|
|
9
21
|
const darkColors = generateColors(...colorRanges.dark);
|
|
10
22
|
return {
|
|
@@ -81,10 +93,17 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
81
93
|
},
|
|
82
94
|
spacing: makeSpacing(spacingIncrement),
|
|
83
95
|
borderRadius: {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
96
|
+
xs: `${0.25 * roundedness}rem`,
|
|
97
|
+
sm: `${0.5 * roundedness}rem`,
|
|
98
|
+
md: `${roundedness}rem`,
|
|
99
|
+
lg: `${roundedness * 1.25}rem`,
|
|
100
|
+
xl: `${roundedness * 1.5}rem`,
|
|
101
|
+
full: roundedness === 0 ? '0px' : '9999px',
|
|
102
|
+
},
|
|
103
|
+
lineWidth: {
|
|
104
|
+
DEFAULT: `${borderScale}px`,
|
|
105
|
+
none: '0',
|
|
106
|
+
thick: `${2 * borderScale}px`,
|
|
88
107
|
},
|
|
89
108
|
width: {
|
|
90
109
|
content: '700px',
|
|
@@ -350,7 +369,7 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
350
369
|
},
|
|
351
370
|
],
|
|
352
371
|
shortcuts: {
|
|
353
|
-
'border-default': 'border border-
|
|
372
|
+
'border-default': 'border border-solid border-black',
|
|
354
373
|
'border-light': 'border border-solid border-gray5',
|
|
355
374
|
'flex-1-0-0': 'flex-grow-1 flex-shrink-0 flex-basis-0',
|
|
356
375
|
'flex-0-0-auto': 'flex-grow-0 flex-shrink-0 flex-basis-auto',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uno.preset.js","sourceRoot":"","sources":["../../src/uno.preset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAA4B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EACnC,
|
|
1
|
+
{"version":3,"file":"uno.preset.js","sourceRoot":"","sources":["../../src/uno.preset.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -43,8 +43,7 @@ export function ActionButton({
|
|
|
43
43
|
<Button
|
|
44
44
|
size="small"
|
|
45
45
|
className={classNames(
|
|
46
|
-
'
|
|
47
|
-
'hover:bg-gray2',
|
|
46
|
+
'layer-variants:(border-gray7 font-normal whitespace-nowrap m-2 flex flex-row gap-2 items-center py-0.25 rounded-md mx-1)',
|
|
48
47
|
className,
|
|
49
48
|
)}
|
|
50
49
|
asChild={asChild}
|
|
@@ -22,7 +22,7 @@ export function Avatar({
|
|
|
22
22
|
<div
|
|
23
23
|
data-pop={popIn}
|
|
24
24
|
className={classNames(
|
|
25
|
-
'layer-components:(flex items-center justify-center rounded-
|
|
25
|
+
'layer-components:(flex items-center justify-center rounded-lg border-default overflow-hidden w-24px h-24px select-none relative bg-white flex-shrink-0)',
|
|
26
26
|
popIn &&
|
|
27
27
|
'layer-variants:(animate-pop-in-from-half animate-ease-springy animate-duration-200)',
|
|
28
28
|
empty && 'layer-components(border-dashed bg-gray2)',
|
|
@@ -46,7 +46,7 @@ function AvatarContent({
|
|
|
46
46
|
if (imageSrc) {
|
|
47
47
|
return (
|
|
48
48
|
<img
|
|
49
|
-
className="w-full h-full object-cover rounded-
|
|
49
|
+
className="w-full h-full object-cover rounded-lg"
|
|
50
50
|
referrerPolicy="no-referrer"
|
|
51
51
|
crossOrigin="anonymous"
|
|
52
52
|
src={imageSrc}
|
|
@@ -55,7 +55,7 @@ function AvatarContent({
|
|
|
55
55
|
);
|
|
56
56
|
}
|
|
57
57
|
return (
|
|
58
|
-
<div className="color-black items-center justify-center flex text-sm font-bold rounded-
|
|
58
|
+
<div className="color-black items-center justify-center flex text-sm font-bold rounded-lg">
|
|
59
59
|
{name?.charAt(0) || '?'}
|
|
60
60
|
</div>
|
|
61
61
|
);
|
|
@@ -13,7 +13,7 @@ export function getButtonClassName({
|
|
|
13
13
|
align?: ButtonProps['align'];
|
|
14
14
|
}) {
|
|
15
15
|
return classNames(
|
|
16
|
-
'layer-components:(px-4 py-2 bg-[var(--bg)] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-sans border border-solid border-transparent rounded-
|
|
16
|
+
'layer-components:(px-4 py-2 bg-[var(--bg)] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-sans border border-solid border-transparent rounded-lg cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 whitespace-nowrap)',
|
|
17
17
|
'layer-components:hover:(bg-[var(--hover)] ring-4 ring-[var(--hover)])',
|
|
18
18
|
'layer-components:focus:outline-off',
|
|
19
19
|
'layer-components:focus-visible:(outline-off ring-6 ring-[var(--focus,var(--hover))])',
|
|
@@ -43,15 +43,15 @@ const colors = {
|
|
|
43
43
|
ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg:transparent] [--hover:rgb(from_var(--color-attention-light)_r_g_b/0.25)] [--focus:var(--color-attention-light)] [--active:var(--color-attention-light)] color-attention-dark)`,
|
|
44
44
|
ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:([--bg:transparent] [--hover:rgb(from_var(--color-accent-light)_r_g_b/0.25)] [--focus:var(--color-accent-light)] [--active:var(--color-accent-light)] color-accent-dark)`,
|
|
45
45
|
contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] [--hover:var(--color-gray-7)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-6)] color-white border-black)`,
|
|
46
|
-
unstyled: `layer-variants:(bg-transparent hover:(bg-transparent) focus:(bg-transparent) active:(bg-transparent) color-inherit border-none shadow-none hover:(shadow-none) focus:(shadow-none) active:(shadow-none) p-0 items-start font-inherit font-normal rounded-
|
|
46
|
+
unstyled: `layer-variants:(bg-transparent hover:(bg-transparent) focus:(bg-transparent) active:(bg-transparent) color-inherit border-none shadow-none hover:(shadow-none) focus:(shadow-none) active:(shadow-none) p-0 items-start font-inherit font-normal rounded-none text-size-inherit transition-none)`,
|
|
47
47
|
};
|
|
48
48
|
|
|
49
49
|
const sizes = {
|
|
50
50
|
default: '',
|
|
51
|
-
small: 'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-
|
|
52
|
-
icon: 'layer-variants:[&.size-icon]:(p-2.35 text-sm rounded-
|
|
51
|
+
small: 'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-md)',
|
|
52
|
+
icon: 'layer-variants:[&.size-icon]:(p-2.35 text-sm rounded-lg)',
|
|
53
53
|
'icon-small':
|
|
54
|
-
'layer-variants:[&.size-icon-small]:(p-2 text-xs rounded-
|
|
54
|
+
'layer-variants:[&.size-icon-small]:(p-2 text-xs rounded-lg -m-y-0.5)',
|
|
55
55
|
};
|
|
56
56
|
|
|
57
57
|
const toggledClass =
|
|
@@ -213,7 +213,7 @@ export function CameraShutterButton({
|
|
|
213
213
|
|
|
214
214
|
const StyledShutterButton = withClassName(
|
|
215
215
|
'button',
|
|
216
|
-
'absolute bottom-3 left-1/2 -translate-x-1/2 w-16 h-16 bg-white rounded-
|
|
216
|
+
'absolute bottom-3 left-1/2 -translate-x-1/2 w-16 h-16 bg-white rounded-lg cursor-pointer border-2 border-black border-solid ring-2 ring-white opacity-80',
|
|
217
217
|
'hover:bg-gray-1 hover:opacity-100',
|
|
218
218
|
'focus-visible:bg-gray-2',
|
|
219
219
|
'focus:ring-primary focus:outline-none focus:opacity-100',
|
|
@@ -7,7 +7,7 @@ import { SlotDiv } from '../utility/SlotDiv.js';
|
|
|
7
7
|
|
|
8
8
|
export const CardRoot = withClassName(
|
|
9
9
|
'div',
|
|
10
|
-
'layer-components:(flex flex-col border-light rounded-
|
|
10
|
+
'layer-components:(flex flex-col border-light rounded-lg text-lg overflow-hidden h-max-content relative bg-gray-1 text-black shadow-sm)',
|
|
11
11
|
'layer-variants:[&[data-borderless=true]]:(border-none shadow-md)',
|
|
12
12
|
);
|
|
13
13
|
|
|
@@ -36,7 +36,7 @@ export function CardMain({
|
|
|
36
36
|
<Comp
|
|
37
37
|
ref={ref}
|
|
38
38
|
className={classNames(
|
|
39
|
-
'layer-components:(flex flex-col items-start gap-1 transition pb-2 flex-1 min-h-40px bg-transparent border-none text-start text-inherit text-sm relative z-1 p-0 font-sans outline-none rounded-t-
|
|
39
|
+
'layer-components:(flex flex-col items-start gap-1 transition pb-2 flex-1 min-h-40px bg-transparent border-none text-start text-inherit text-sm relative z-1 p-0 font-sans outline-none rounded-t-lg)',
|
|
40
40
|
!!compact && 'layer-variants:(pb-0)',
|
|
41
41
|
isInteractive &&
|
|
42
42
|
classNames(
|
|
@@ -87,12 +87,12 @@ export const CardFooter = withClassName(
|
|
|
87
87
|
|
|
88
88
|
export const CardActions = withClassName(
|
|
89
89
|
'div',
|
|
90
|
-
'layer-components:(ml-0 mr-auto flex flex-row gap-2 items-center bg-white rounded-
|
|
90
|
+
'layer-components:(ml-0 mr-auto flex flex-row gap-2 items-center bg-white rounded-lg p-0 border border-solid border-grayDarkBlend)',
|
|
91
91
|
);
|
|
92
92
|
|
|
93
93
|
export const CardMenu = withClassName(
|
|
94
94
|
'div',
|
|
95
|
-
'layer-components:(mr-0 ml-auto my-auto flex flex-row gap-1 items-center bg-overlay py-0.5 rounded-
|
|
95
|
+
'layer-components:(mr-0 ml-auto my-auto flex flex-row gap-1 items-center bg-overlay py-0.5 rounded-lg p-0)',
|
|
96
96
|
);
|
|
97
97
|
|
|
98
98
|
export const cardGridColumns = {
|
|
@@ -9,7 +9,7 @@ import { withClassName } from '../../hooks/withClassName.js';
|
|
|
9
9
|
export const CheckboxRoot = withClassName(
|
|
10
10
|
CheckboxPrimitive.Root,
|
|
11
11
|
classNames(
|
|
12
|
-
'layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border-default transition rounded-
|
|
12
|
+
'layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border-default transition rounded-lg shadow-sm)',
|
|
13
13
|
'layer-components:focus-visible:(outline-off shadow-focus)',
|
|
14
14
|
'layer-components:[&[data-state=checked]]:(bg-primary-light border-primary-dark)',
|
|
15
15
|
'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]',
|
|
@@ -20,7 +20,7 @@ export function Chip({
|
|
|
20
20
|
<Component
|
|
21
21
|
ref={ref}
|
|
22
22
|
className={classNames(
|
|
23
|
-
'inline-flex flex-row gap-1 items-center whitespace-nowrap border-light border-solid border
|
|
23
|
+
'inline-flex flex-row gap-1 items-center whitespace-nowrap border-light border-solid border rounded-lg px-2 py-1 text-black',
|
|
24
24
|
{
|
|
25
25
|
'bg-primary-wash': color === 'primary',
|
|
26
26
|
'bg-accent-wash': color === 'accent',
|
|
@@ -221,7 +221,7 @@ const CalendarDay = withClassName(
|
|
|
221
221
|
'[&[data-range-end]]:(bg-accent-light rounded-r rounded-l-none z-1)',
|
|
222
222
|
'disabled:(opacity-50 cursor-default)',
|
|
223
223
|
// today dot
|
|
224
|
-
"[&[data-today]]:before:(content-[''] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-
|
|
224
|
+
"[&[data-today]]:before:(content-[''] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-lg bg-primary)",
|
|
225
225
|
'[&[data-top-edge]]:(border-t-gray-5)',
|
|
226
226
|
'[&[data-bottom-edge]]:(border-b-gray-5)',
|
|
227
227
|
'[&[data-first-column]]:(border-l-gray-5)',
|
|
@@ -184,11 +184,11 @@ export const DialogSwipeHandle = function DialogSwipeHandle({
|
|
|
184
184
|
ref={finalRef}
|
|
185
185
|
{...props}
|
|
186
186
|
className={classNames(
|
|
187
|
-
'absolute top-0 left-50% transform-gpu -translate-x-1/2 w-20% py-2 rounded-
|
|
187
|
+
'absolute top-0 left-50% transform-gpu -translate-x-1/2 w-20% py-2 rounded-lg cursor-grab sm:hidden touch-none',
|
|
188
188
|
className,
|
|
189
189
|
)}
|
|
190
190
|
>
|
|
191
|
-
<div className="w-full h-[4px] bg-gray-4 rounded-
|
|
191
|
+
<div className="w-full h-[4px] bg-gray-4 rounded-lg" />
|
|
192
192
|
</div>
|
|
193
193
|
);
|
|
194
194
|
};
|
|
@@ -182,7 +182,7 @@ export function ImageUploader({
|
|
|
182
182
|
<Button
|
|
183
183
|
color="ghost"
|
|
184
184
|
size="icon"
|
|
185
|
-
className="absolute top-2 right-2 w-32px h-32px border-none p-2 cursor-pointer bg-white color-black rounded-
|
|
185
|
+
className="absolute top-2 right-2 w-32px h-32px border-none p-2 cursor-pointer bg-white color-black rounded-lg transition-colors shadow-sm"
|
|
186
186
|
onClick={() => onChange(null)}
|
|
187
187
|
>
|
|
188
188
|
<Icon name="x" />
|
|
@@ -4,7 +4,7 @@ import { ChangeEvent, ComponentProps, FocusEvent, useCallback } from 'react';
|
|
|
4
4
|
import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
|
|
5
5
|
|
|
6
6
|
export const inputClassName = classNames(
|
|
7
|
-
'layer-components:(px-5 py-
|
|
7
|
+
'layer-components:(px-5 py-1.25 text-md font-sans rounded-xl bg-white select-auto min-w-60px color-black border-solid border border-gray-5 shadow-sm-inset)',
|
|
8
8
|
'layer-components:focus:(outline-none bg-gray-1 ring-4 ring-white)',
|
|
9
9
|
'layer-components:focus-visible:(outline-none ring-gray-dark-blend)',
|
|
10
10
|
'layer-components:disabled:(bg-transparent border-gray-5 placeholder-gray-7 shadow-none)',
|
|
@@ -43,7 +43,7 @@ export const NavBarItem = function NavBarItem({
|
|
|
43
43
|
|
|
44
44
|
export const NavBarItemIconWrapper = withClassName(
|
|
45
45
|
'div',
|
|
46
|
-
'layer-components:(relative flex) layer-components:sm:(p-6px rounded-
|
|
46
|
+
'layer-components:(relative flex) layer-components:sm:(p-6px rounded-lg bg-gray-blend)',
|
|
47
47
|
'layer-variants:sm:[*[data-active=true]_&]:bg-primary-light',
|
|
48
48
|
);
|
|
49
49
|
|
|
@@ -86,14 +86,14 @@ export const NavBarItemIcon = function NavBarItemIcon({
|
|
|
86
86
|
|
|
87
87
|
export const NavBarItemPip = withClassName(
|
|
88
88
|
'div',
|
|
89
|
-
'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-
|
|
89
|
+
'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-lg bg-attention shadow-sm)',
|
|
90
90
|
);
|
|
91
91
|
|
|
92
92
|
export const NavBarRoot = withClassName(
|
|
93
93
|
'div',
|
|
94
|
-
'layer-components:(grid [grid-auto-columns:1fr] [grid-auto-flow:column] justify-items-center w-full rounded-
|
|
94
|
+
'layer-components:(grid [grid-auto-columns:1fr] [grid-auto-flow:column] justify-items-center w-full rounded-none overflow-hidden z-50 p-1 h-auto)',
|
|
95
95
|
'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
|
|
96
|
-
'layer-components:sm:(bg-transparent flex flex-col rounded-
|
|
96
|
+
'layer-components:sm:(bg-transparent flex flex-col rounded-none border-none border-transparent shadow-none h-min-content overflow-y-auto overflow-x-hidden justify-start items-stretch gap-2 pb-10)',
|
|
97
97
|
);
|
|
98
98
|
|
|
99
99
|
export const NavBar = Object.assign(NavBarRoot, {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
1
|
import classNames from 'clsx';
|
|
2
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
5
|
children?: ReactNode;
|
|
@@ -12,7 +12,7 @@ export function Note({ className, children, ...rest }: NoteProps) {
|
|
|
12
12
|
{children}
|
|
13
13
|
<div className="w-20px h-[calc(100%-18px)] absolute bottom--0.5px right--20px border-0 border-solid border-primary-dark border-r border-b bg-primary-wash">
|
|
14
14
|
<div
|
|
15
|
-
className={`absolute top--20px left-0
|
|
15
|
+
className={`absolute top--20px left-0 border0px border-0 border-solid border-transparent border-b-primary-dark border-l-primary-dark after:(content-[""] absolute top--7px left--9px border-8px border-solid border-transparent border-b-primary-wash border-l-primary-wash)`}
|
|
16
16
|
/>
|
|
17
17
|
</div>
|
|
18
18
|
</div>
|
|
@@ -67,7 +67,7 @@ export function NumberStepper({
|
|
|
67
67
|
return (
|
|
68
68
|
<div
|
|
69
69
|
className={classNames(
|
|
70
|
-
'layer-components:(flex items-center border-solid border
|
|
70
|
+
'layer-components:(flex items-center border-solid border border-gray-5 rounded-lg overflow-hidden w-min-content flex-shrink-0 bg-white shadow-sm)',
|
|
71
71
|
disabled &&
|
|
72
72
|
'layer-variants:(border-gray-dark-blend bg-transparent shadow-none)',
|
|
73
73
|
{
|
|
@@ -26,7 +26,7 @@ const StyledArrow = withClassName(
|
|
|
26
26
|
|
|
27
27
|
const StyledClose = withClassName(
|
|
28
28
|
PopoverPrimitive.Close,
|
|
29
|
-
'layer-components:([all:unset] [font-family:inherit] rounded-
|
|
29
|
+
'layer-components:([all:unset] [font-family:inherit] rounded-lg h-25px w-25px inline-flex items-center justify-center color-dark-blend absolute top-5px right-5px hover:bg-light-blend focus:shadow-focus)',
|
|
30
30
|
);
|
|
31
31
|
|
|
32
32
|
// Exports
|
|
@@ -3,11 +3,11 @@ import { withClassName } from '../../hooks.js';
|
|
|
3
3
|
|
|
4
4
|
export const ProgressRoot = withClassName(
|
|
5
5
|
ProgressPrimitive.Root,
|
|
6
|
-
'layer-components:(w-full relative overflow-hidden border border-default rounded-
|
|
6
|
+
'layer-components:(w-full relative overflow-hidden border border-default rounded-lg)',
|
|
7
7
|
);
|
|
8
8
|
export const ProgressIndicator = withClassName(
|
|
9
9
|
ProgressPrimitive.Indicator,
|
|
10
|
-
'layer-components:(bg-primary w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-
|
|
10
|
+
'layer-components:(bg-primary w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-lg transition-transform)',
|
|
11
11
|
'layer-components:[&[data-state=complete]]:(bg-accent)',
|
|
12
12
|
'layer-variants:[&[data-color=accent]]:(bg-accent)',
|
|
13
13
|
);
|
|
@@ -147,7 +147,7 @@ export const SelectContent = withPassthroughNativeRender(
|
|
|
147
147
|
<SelectPrimitive.Portal>
|
|
148
148
|
<SelectPrimitive.Content
|
|
149
149
|
className={classNames(
|
|
150
|
-
'layer-components:(overflow-hidden bg-white rounded-lg border border-solid border
|
|
150
|
+
'layer-components:(overflow-hidden bg-white rounded-lg border border-solid border border-black z-menu shadow-lg)',
|
|
151
151
|
'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]',
|
|
152
152
|
'layer-components:[&[data-state=open]]:animate-popover-in',
|
|
153
153
|
'layer-components:[&[data-state=closed]]:animate-popover-out',
|
|
@@ -185,7 +185,7 @@ export const NativeSelect = ({
|
|
|
185
185
|
<div className={classNames('relative', className)}>
|
|
186
186
|
<select
|
|
187
187
|
className={classNames(
|
|
188
|
-
'appearance-none font-inherit bg-white inline-flex items-center justify-center rounded-
|
|
188
|
+
'appearance-none font-inherit bg-white inline-flex items-center justify-center rounded-lg px-3 py-1 pr-8 text-sm gap-2 color-black border-solid border border-gray5 hover:border-gray7 focus:outline-none focus-visible:shadow-focus [&[data-placeholder]]:color-gray8',
|
|
189
189
|
)}
|
|
190
190
|
{...props}
|
|
191
191
|
ref={forwardedRef}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
1
|
import classNames from 'clsx';
|
|
2
|
+
import { useState } from 'react';
|
|
3
3
|
|
|
4
4
|
export const TextSkeleton = ({
|
|
5
5
|
maxLength,
|
|
@@ -15,7 +15,7 @@ export const TextSkeleton = ({
|
|
|
15
15
|
return (
|
|
16
16
|
<span
|
|
17
17
|
className={classNames(
|
|
18
|
-
'w-full h-full rounded-
|
|
18
|
+
'w-full h-full rounded-md bg-gradient-to-r from-gray1 via-gray2 to-gray1 [background-size:400%_400%] max-w-full animate-skeleton animate-duration-1200 animate-ease-in-out animate-iteration-infinite animate-alternate',
|
|
19
19
|
className,
|
|
20
20
|
)}
|
|
21
21
|
style={{
|
|
@@ -7,16 +7,16 @@ export const SliderRoot = withClassName(
|
|
|
7
7
|
);
|
|
8
8
|
export const SliderTrack = withClassName(
|
|
9
9
|
SliderPrimitive.Track,
|
|
10
|
-
'layer-components:(bg-transparent relative grow rounded-
|
|
10
|
+
'layer-components:(bg-transparent relative grow rounded-lg h-9px border borderpx border-solid border-black)',
|
|
11
11
|
);
|
|
12
12
|
export const SliderRange = withClassName(
|
|
13
13
|
SliderPrimitive.Range,
|
|
14
|
-
'layer-components:(absolute bg-accent rounded-
|
|
14
|
+
'layer-components:(absolute bg-accent rounded-lg h-full)',
|
|
15
15
|
'layer-variants:[&[data-color=primary]]:bg-primary',
|
|
16
16
|
);
|
|
17
17
|
export const SliderThumb = withClassName(
|
|
18
18
|
SliderPrimitive.Thumb,
|
|
19
|
-
'layer-components:(block w-5 h-5 bg-white shadow-sm rounded-
|
|
19
|
+
'layer-components:(block w-5 h-5 bg-white shadow-sm rounded-lg ring-2 ring-black touch-none transition-all)',
|
|
20
20
|
'layer-components:hover:(shadow-md)',
|
|
21
21
|
'layer-components:active:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 bg-accent-light)',
|
|
22
22
|
'layer-components:focus-visible:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 outline-none bg-accent-light)',
|
|
@@ -3,12 +3,12 @@ import { withClassName } from '../../hooks/withClassName.js';
|
|
|
3
3
|
|
|
4
4
|
const SwitchRoot = withClassName(
|
|
5
5
|
Root,
|
|
6
|
-
'unset w-42px h-25px bg-white rounded-
|
|
6
|
+
'unset w-42px h-25px bg-white rounded-lg relative transition-color border-default flex-shrink-0 focus-visible:shadow-focus [&[data-state=checked]]:bg-accent',
|
|
7
7
|
);
|
|
8
8
|
|
|
9
9
|
const SwitchThumb = withClassName(
|
|
10
10
|
Thumb,
|
|
11
|
-
'block w-21px h-21px bg-white rounded-
|
|
11
|
+
'block w-21px h-21px bg-white rounded-lg border-default transition-transform will-change-transform [&[data-state=checked]]:translate-x-19px',
|
|
12
12
|
);
|
|
13
13
|
|
|
14
14
|
export const Switch = Object.assign(
|
|
@@ -10,7 +10,7 @@ export const TabsList = withClassName(
|
|
|
10
10
|
|
|
11
11
|
export const TabsTrigger = withClassName(
|
|
12
12
|
TabsPrimitive.Trigger,
|
|
13
|
-
'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-
|
|
13
|
+
'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border border font-semibold text-gray-7 border-gray-7 border-solid transition-colors cursor-pointer select-none font-sans flex-shrink-0)',
|
|
14
14
|
'hover:bg-primary-light focus-visible:(focus-ring focus-ring-primary-dark outline-off bg-primary-light border-primary-dark) [&[data-state=active]]:(font-semibold bg-primary-light border-primary-light text-black cursor-default hover:bg-primary-light relative z-1)',
|
|
15
15
|
);
|
|
16
16
|
|
|
@@ -97,7 +97,7 @@ export const TextArea = function TextArea({
|
|
|
97
97
|
className={classNames(
|
|
98
98
|
inputClassName,
|
|
99
99
|
'layer-components:([font-family:inherit] text-inherit overflow-hidden resize-none)',
|
|
100
|
-
'layer-variants:(rounded-
|
|
100
|
+
'layer-variants:(rounded-lg px-4 py-4)',
|
|
101
101
|
{
|
|
102
102
|
'layer-components:[resize:vertical]': !autoSize,
|
|
103
103
|
'layer-components:[resize:none]': autoSize,
|
|
@@ -12,7 +12,7 @@ function Content({
|
|
|
12
12
|
<TooltipPrimitive.Portal>
|
|
13
13
|
<TooltipPrimitive.Content
|
|
14
14
|
className={classNames(
|
|
15
|
-
'layer-components:(relative rounded-
|
|
15
|
+
'layer-components:(relative rounded-sm py-2 px-3 bg-black text-white text-sm leading-tight shadow-sm select-none hidden z-tooltip sm:display-initial)',
|
|
16
16
|
'[&[data-state=delayed-open]]:display-initial',
|
|
17
17
|
'[&[data-state=instant-open]]:display-initial',
|
|
18
18
|
'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
|
package/src/themes.stories.tsx
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
+
import { ActionBar, ActionButton } from './components/actions/index.js';
|
|
3
4
|
import { Button } from './components/button/index.js';
|
|
4
5
|
import { Card } from './components/card/index.js';
|
|
6
|
+
import { Icon } from './components/icon/index.js';
|
|
7
|
+
import { AvatarList, Dialog, Tooltip } from './components/index.js';
|
|
5
8
|
import { Input } from './components/input/index.js';
|
|
6
9
|
import { Tabs } from './components/tabs/tabs.js';
|
|
7
10
|
import { TextArea } from './components/textArea/index.js';
|
|
@@ -25,6 +28,9 @@ function DemoUI({ className }: { className?: string }) {
|
|
|
25
28
|
<Button color="primary">Primary</Button>
|
|
26
29
|
<Button color="accent">Accent</Button>
|
|
27
30
|
<Button>Default</Button>
|
|
31
|
+
<Button color="contrast">Contrast</Button>
|
|
32
|
+
<Button color="ghost">Ghost</Button>
|
|
33
|
+
<Button color="ghostAccent">Ghost Accent</Button>
|
|
28
34
|
<Button size="small" color="destructive">
|
|
29
35
|
Destructive
|
|
30
36
|
</Button>
|
|
@@ -59,6 +65,44 @@ function DemoUI({ className }: { className?: string }) {
|
|
|
59
65
|
<Tabs.Content value="tab2">Tab 2 Content</Tabs.Content>
|
|
60
66
|
</Tabs>
|
|
61
67
|
</div>
|
|
68
|
+
<div>
|
|
69
|
+
<ActionBar>
|
|
70
|
+
<ActionButton>
|
|
71
|
+
<Icon name="placeholder" />
|
|
72
|
+
Hello
|
|
73
|
+
</ActionButton>
|
|
74
|
+
<ActionButton color="primary">
|
|
75
|
+
<Icon name="placeholder" />
|
|
76
|
+
World
|
|
77
|
+
</ActionButton>
|
|
78
|
+
</ActionBar>
|
|
79
|
+
</div>
|
|
80
|
+
<div>
|
|
81
|
+
<AvatarList count={3}>
|
|
82
|
+
<AvatarList.Item index={0} name="John Doe" />
|
|
83
|
+
<AvatarList.Item index={1} name="Jane Doe" />
|
|
84
|
+
<AvatarList.Item index={2} name="John Smith" />
|
|
85
|
+
</AvatarList>
|
|
86
|
+
</div>
|
|
87
|
+
<div>
|
|
88
|
+
<Tooltip content="Hello World">
|
|
89
|
+
<Button>Hover me</Button>
|
|
90
|
+
</Tooltip>
|
|
91
|
+
</div>
|
|
92
|
+
<div>
|
|
93
|
+
<Dialog>
|
|
94
|
+
<Dialog.Trigger asChild>
|
|
95
|
+
<Button>Click</Button>
|
|
96
|
+
</Dialog.Trigger>
|
|
97
|
+
<Dialog.Content>
|
|
98
|
+
<Dialog.Title>Hello there</Dialog.Title>
|
|
99
|
+
<Dialog.Description>Im a dialog</Dialog.Description>
|
|
100
|
+
<Dialog.Actions>
|
|
101
|
+
<Dialog.Close>Close</Dialog.Close>
|
|
102
|
+
</Dialog.Actions>
|
|
103
|
+
</Dialog.Content>
|
|
104
|
+
</Dialog>
|
|
105
|
+
</div>
|
|
62
106
|
</div>
|
|
63
107
|
);
|
|
64
108
|
}
|