@kismet-ux/constellation 1.1.0 → 1.3.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/form/Checkbox/checkbox.js +2 -0
- package/dist/form/Checkbox/checkbox.js.map +1 -1
- package/dist/form/DatePicker/date-picker.js +2 -0
- package/dist/form/DatePicker/date-picker.js.map +1 -1
- package/dist/form.d.ts +1 -1
- package/dist/{index-CBGZtocA.d.ts → index-BwTP9oMP.d.ts} +1 -1
- package/dist/{index-BeCWb0Ix.d.ts → index-DCtv8Gm1.d.ts} +61 -16
- package/dist/{index-DVEBz660.d.ts → index-h4thndEb.d.ts} +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/layout/AppSidebarHeader/app-sidebar-header.js +2 -0
- package/dist/layout/AppSidebarHeader/app-sidebar-header.js.map +1 -1
- package/dist/layout.d.ts +2 -2
- package/dist/navigation/Sheet/sheet.js +2 -0
- package/dist/navigation/Sheet/sheet.js.map +1 -1
- package/dist/navigation.d.ts +1 -1
- package/dist/settings/AppearanceTabs/appearance-tabs.js +2 -0
- package/dist/settings/AppearanceTabs/appearance-tabs.js.map +1 -1
- package/dist/styles/tokens.d.ts +2 -0
- package/dist/styles/tokens.d.ts.map +1 -0
- package/dist/styles/tokens.js +2 -0
- package/dist/styles/tokens.js.map +1 -0
- package/dist/tokens.css +435 -0
- package/dist/{tooltip-zOT3UHCF.d.ts → tooltip-C25-bG7o.d.ts} +2 -2
- package/dist/ui/Chip/chip-variants.d.ts +6 -1
- package/dist/ui/Chip/chip-variants.d.ts.map +1 -1
- package/dist/ui/Chip/chip-variants.js +19 -2
- package/dist/ui/Chip/chip-variants.js.map +1 -1
- package/dist/ui/Chip/chip.css +97 -47
- package/dist/ui/Chip/chip.d.ts +14 -0
- package/dist/ui/Chip/chip.d.ts.map +1 -1
- package/dist/ui/Chip/chip.js +10 -2
- package/dist/ui/Chip/chip.js.map +1 -1
- package/dist/ui/Chip/chip.module.scss.js +1 -1
- package/dist/ui/StatusDot/index.d.ts +3 -0
- package/dist/ui/StatusDot/index.d.ts.map +1 -0
- package/dist/ui/StatusDot/status-dot-variants.d.ts +7 -0
- package/dist/ui/StatusDot/status-dot-variants.d.ts.map +1 -0
- package/dist/ui/StatusDot/status-dot-variants.js +28 -0
- package/dist/ui/StatusDot/status-dot-variants.js.map +1 -0
- package/dist/ui/StatusDot/status-dot.css +61 -0
- package/dist/ui/StatusDot/status-dot.d.ts +23 -0
- package/dist/ui/StatusDot/status-dot.d.ts.map +1 -0
- package/dist/ui/StatusDot/status-dot.js +23 -0
- package/dist/ui/StatusDot/status-dot.js.map +1 -0
- package/dist/ui/StatusDot/status-dot.module.scss.js +6 -0
- package/dist/ui/StatusDot/status-dot.module.scss.js.map +1 -0
- package/dist/ui/index.d.ts +1 -0
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui.d.ts +2 -2
- package/dist/ui.js +2 -0
- package/dist/ui.js.map +1 -1
- package/package.json +5 -1
package/dist/navigation.d.ts
CHANGED
|
@@ -62,7 +62,7 @@ declare function DropdownMenuSubContent({ className, ...props }: React.HTMLAttri
|
|
|
62
62
|
declare const linkVariants: (props?: ({
|
|
63
63
|
underline?: boolean | null | undefined;
|
|
64
64
|
hover?: "default" | "none" | null | undefined;
|
|
65
|
-
theme?: "
|
|
65
|
+
theme?: "inherit" | "primary" | "secondary" | "success" | "destructive" | "warning" | "info" | "slate" | null | undefined;
|
|
66
66
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
67
67
|
|
|
68
68
|
interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'>, VariantProps<typeof linkVariants> {
|
|
@@ -21,6 +21,8 @@ import '../../ui/Pagination/pagination.js';
|
|
|
21
21
|
import '../../ui/ProgressBar/progress-bar.js';
|
|
22
22
|
import '../../ui/Separator/separator.js';
|
|
23
23
|
import '../../ui/StatCard/stat-card.js';
|
|
24
|
+
import '../../ui/StatusDot/status-dot.js';
|
|
25
|
+
import '../../ui/StatusDot/status-dot-variants.js';
|
|
24
26
|
import '../../ui/StepProgress/step-progress.js';
|
|
25
27
|
import '../../ui/Switch/switch.js';
|
|
26
28
|
import '../../ui/Table/table.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance-tabs.js","sources":["../../../src/settings/AppearanceTabs/appearance-tabs.tsx"],"sourcesContent":["import { type Appearance, useAppearance } from '@constellation/hooks';\nimport { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { type LucideIcon, MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './appearance-tabs.module.scss';\n\ntype AppearanceTabsProps = React.HTMLAttributes<HTMLDivElement> & {\n iconOnly?: boolean;\n};\n\nexport function AppearanceTabs({\n className = '',\n iconOnly = false,\n ...props\n}: AppearanceTabsProps) {\n const { appearance, updateAppearance } = useAppearance();\n\n const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [\n { value: 'light', icon: SunIcon, label: 'Light' },\n { value: 'dark', icon: MoonIcon, label: 'Dark' },\n { value: 'system', icon: MonitorIcon, label: 'System' },\n ];\n\n return (\n <div data-slot={'appearance-tabs'} className={cn(s['tabs-root'], className)} {...props}>\n {tabs.map(({ value, icon: Icon, label }) => (\n <Button\n key={value}\n variant={'ghost'}\n theme={'inherit'}\n rounded\n onClick={() => updateAppearance(value)}\n aria-label={label}\n iconOnly={iconOnly}\n aria-pressed={appearance === value}\n className={cn(s['tab-button'], appearance === value && s['tab-button-active'])}\n title={iconOnly ? label : undefined}\n >\n <Icon />\n {!iconOnly && <span>{label}</span>}\n </Button>\n ))}\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"appearance-tabs.js","sources":["../../../src/settings/AppearanceTabs/appearance-tabs.tsx"],"sourcesContent":["import { type Appearance, useAppearance } from '@constellation/hooks';\nimport { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { type LucideIcon, MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './appearance-tabs.module.scss';\n\ntype AppearanceTabsProps = React.HTMLAttributes<HTMLDivElement> & {\n iconOnly?: boolean;\n};\n\nexport function AppearanceTabs({\n className = '',\n iconOnly = false,\n ...props\n}: AppearanceTabsProps) {\n const { appearance, updateAppearance } = useAppearance();\n\n const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [\n { value: 'light', icon: SunIcon, label: 'Light' },\n { value: 'dark', icon: MoonIcon, label: 'Dark' },\n { value: 'system', icon: MonitorIcon, label: 'System' },\n ];\n\n return (\n <div data-slot={'appearance-tabs'} className={cn(s['tabs-root'], className)} {...props}>\n {tabs.map(({ value, icon: Icon, label }) => (\n <Button\n key={value}\n variant={'ghost'}\n theme={'inherit'}\n rounded\n onClick={() => updateAppearance(value)}\n aria-label={label}\n iconOnly={iconOnly}\n aria-pressed={appearance === value}\n className={cn(s['tab-button'], appearance === value && s['tab-button-active'])}\n title={iconOnly ? label : undefined}\n >\n <Icon />\n {!iconOnly && <span>{label}</span>}\n </Button>\n ))}\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWM,SAAU,cAAc,CAAC,EAC7B,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACY,EAAA;IACpB,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE;AAExD,IAAA,MAAM,IAAI,GAA6D;QACrE,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QACjD,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;QAChD,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;KACxD;IAED,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,WAAA,EAAgB,iBAAiB,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EACnF,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MACrCC,IAAA,CAAC,MAAM,EAAA,EAEL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAA,IAAA,EACP,OAAO,EAAE,MAAM,gBAAgB,CAAC,KAAK,CAAC,gBAC1B,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,UAAU,KAAK,KAAK,EAClC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,UAAU,KAAK,KAAK,IAAI,CAAC,CAAC,mBAAmB,CAAC,CAAC,EAC9E,KAAK,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,EAAA,QAAA,EAAA,CAEnCD,GAAA,CAAC,IAAI,EAAA,EAAA,CAAG,EACP,CAAC,QAAQ,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,KAAK,EAAA,CAAQ,CAAA,EAAA,EAZ7B,KAAK,CAaH,CACV,CAAC,EAAA,CACE;AAEV;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,435 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--font-sans:
|
|
3
|
+
ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
|
|
4
|
+
'Helvetica Neue', Arial, sans-serif;
|
|
5
|
+
--font-serif:
|
|
6
|
+
ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
7
|
+
--font-mono:
|
|
8
|
+
ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
|
9
|
+
--font-weight-default: 400;
|
|
10
|
+
--line-height-default: 1.55;
|
|
11
|
+
--letter-spacing-tight: -0.011em;
|
|
12
|
+
/*******************
|
|
13
|
+
PALETTE - LIGHT MODE
|
|
14
|
+
*******************/
|
|
15
|
+
--text-primary: #151a23;
|
|
16
|
+
--text-secondary: #4a5464;
|
|
17
|
+
--text-heading: #151a23;
|
|
18
|
+
--text-contrast: #ffffff;
|
|
19
|
+
--text-disabled: #5e6a7d;
|
|
20
|
+
--text-focus: rgba(94, 106, 125, 0.25);
|
|
21
|
+
--text-focus-visible: rgba(94, 106, 125, 0.5);
|
|
22
|
+
--text-hover: rgba(94, 106, 125, 0.1);
|
|
23
|
+
--text-outlined-border: rgba(94, 106, 125, 0.5);
|
|
24
|
+
--text-selected: rgba(94, 106, 125, 0.075);
|
|
25
|
+
--inherit-main: #151a23;
|
|
26
|
+
--inherit-dark: #0d1017;
|
|
27
|
+
--inherit-emphasis: #333c4a;
|
|
28
|
+
--inherit-light: #4a5464;
|
|
29
|
+
--inherit-contrast: #ffffff;
|
|
30
|
+
--inherit-focus: rgba(94, 106, 125, 0.25);
|
|
31
|
+
--inherit-focus-visible: rgba(94, 106, 125, 0.5);
|
|
32
|
+
--inherit-hover: rgba(94, 106, 125, 0.1);
|
|
33
|
+
--inherit-outlined-border: rgba(94, 106, 125, 0.5);
|
|
34
|
+
--inherit-selected: rgba(94, 106, 125, 0.075);
|
|
35
|
+
--primary-main: #0284c7;
|
|
36
|
+
--primary-dark: #075985;
|
|
37
|
+
--primary-emphasis: #0369a1;
|
|
38
|
+
--primary-light: #38bdf8;
|
|
39
|
+
--primary-contrast: #ffffff;
|
|
40
|
+
--primary-focus: #bae6fd;
|
|
41
|
+
--primary-focus-visible: #38bdf8;
|
|
42
|
+
--primary-hover: rgba(14, 165, 233, 0.1);
|
|
43
|
+
--primary-outlined-border: #0284c7;
|
|
44
|
+
--primary-selected: rgba(14, 165, 233, 0.075);
|
|
45
|
+
--secondary-main: #8b5cf6;
|
|
46
|
+
--secondary-dark: #462e7b;
|
|
47
|
+
--secondary-emphasis: #6f4ac5;
|
|
48
|
+
--secondary-light: rgba(139, 92, 246, 0.5);
|
|
49
|
+
--secondary-contrast: #ffffff;
|
|
50
|
+
--secondary-focus: rgba(139, 92, 246, 0.25);
|
|
51
|
+
--secondary-focus-visible: rgba(139, 92, 246, 0.5);
|
|
52
|
+
--secondary-hover: rgba(139, 92, 246, 0.1);
|
|
53
|
+
--secondary-outlined-border: #8b5cf6;
|
|
54
|
+
--secondary-selected: rgba(139, 92, 246, 0.075);
|
|
55
|
+
--destructive-main: #c3324b;
|
|
56
|
+
--destructive-dark: #7a202f;
|
|
57
|
+
--destructive-emphasis: #c3324b;
|
|
58
|
+
--destructive-light: rgba(244, 63, 94, 0.75);
|
|
59
|
+
--destructive-contrast: #ffffff;
|
|
60
|
+
--destructive-focus: rgba(244, 63, 94, 0.25);
|
|
61
|
+
--destructive-focus-visible: rgba(244, 63, 94, 0.5);
|
|
62
|
+
--destructive-hover: rgba(244, 63, 94, 0.1);
|
|
63
|
+
--destructive-outlined-border: #f43f5e;
|
|
64
|
+
--destructive-selected: rgba(244, 63, 94, 0.075);
|
|
65
|
+
--warning-main: #cc8d1a;
|
|
66
|
+
--warning-dark: #805810;
|
|
67
|
+
--warning-emphasis: #805810;
|
|
68
|
+
--warning-light: rgba(255, 176, 32, 0.5);
|
|
69
|
+
--warning-contrast: #ffffff;
|
|
70
|
+
--warning-focus: rgba(255, 176, 32, 0.25);
|
|
71
|
+
--warning-focus-visible: rgba(255, 176, 32, 0.5);
|
|
72
|
+
--warning-hover: rgba(255, 176, 32, 0.1);
|
|
73
|
+
--warning-outlined-border: #ffb020;
|
|
74
|
+
--warning-selected: rgba(255, 176, 32, 0.075);
|
|
75
|
+
--success-main: #0d9467;
|
|
76
|
+
--success-dark: #085c40;
|
|
77
|
+
--success-emphasis: #0d9467;
|
|
78
|
+
--success-light: rgba(16, 185, 129, 0.75);
|
|
79
|
+
--success-contrast: #ffffff;
|
|
80
|
+
--success-focus: rgba(16, 185, 129, 0.25);
|
|
81
|
+
--success-focus-visible: rgba(16, 185, 129, 0.5);
|
|
82
|
+
--success-hover: rgba(16, 185, 129, 0.1);
|
|
83
|
+
--success-outlined-border: #0d9467;
|
|
84
|
+
--success-selected: rgba(16, 185, 129, 0.075);
|
|
85
|
+
--info-main: #266c96;
|
|
86
|
+
--info-dark: #123e5a;
|
|
87
|
+
--info-emphasis: #1b5276;
|
|
88
|
+
--info-light: #96c4dd;
|
|
89
|
+
--info-contrast: #ffffff;
|
|
90
|
+
--info-focus: #c8e0ee;
|
|
91
|
+
--info-focus-visible: #5fa6cb;
|
|
92
|
+
--info-hover: rgba(54, 136, 179, 0.1);
|
|
93
|
+
--info-outlined-border: #3688b3;
|
|
94
|
+
--info-selected: rgba(54, 136, 179, 0.075);
|
|
95
|
+
--slate-main: #4a5464;
|
|
96
|
+
--slate-dark: #151a23;
|
|
97
|
+
--slate-emphasis: #1d2430;
|
|
98
|
+
--slate-light: #5e6a7d;
|
|
99
|
+
--slate-contrast: #ffffff;
|
|
100
|
+
--slate-focus: rgba(94, 106, 125, 0.25);
|
|
101
|
+
--slate-focus-visible: rgba(94, 106, 125, 0.5);
|
|
102
|
+
--slate-hover: rgba(94, 106, 125, 0.1);
|
|
103
|
+
--slate-outlined-border: rgba(94, 106, 125, 0.75);
|
|
104
|
+
--slate-selected: rgba(94, 106, 125, 0.05);
|
|
105
|
+
--action-active: #333c4a;
|
|
106
|
+
--action-disabled: rgba(94, 106, 125, 0.5);
|
|
107
|
+
--action-disabled-background: rgba(94, 106, 125, 0.1);
|
|
108
|
+
--action-focus: rgba(94, 106, 125, 0.25);
|
|
109
|
+
--action-hover: rgba(94, 106, 125, 0.075);
|
|
110
|
+
--action-selected: rgba(94, 106, 125, 0.25);
|
|
111
|
+
--avatar-fallback: rgba(94, 106, 125, 0.25);
|
|
112
|
+
--common-black-main: #151a23;
|
|
113
|
+
--common-black-focus: rgba(94, 106, 125, 0.75);
|
|
114
|
+
--common-black-focus-visible: #5e6a7d;
|
|
115
|
+
--common-black-hover: rgba(94, 106, 125, 0.25);
|
|
116
|
+
--common-black-outlined-border: #5e6a7d;
|
|
117
|
+
--common-black-selected: rgba(94, 106, 125, 0.1);
|
|
118
|
+
--common-white-main: #ffffff;
|
|
119
|
+
--common-white-focus: rgba(255, 255, 255, 0.24);
|
|
120
|
+
--common-white-focus-visible: rgba(255, 255, 255, 0.32);
|
|
121
|
+
--common-white-hover: rgba(255, 255, 255, 0.16);
|
|
122
|
+
--common-white-outlined-border: rgba(255, 255, 255, 0.72);
|
|
123
|
+
--common-white-selected: rgba(255, 255, 255, 0.08);
|
|
124
|
+
--background-default: #ffffff;
|
|
125
|
+
--background-contrast: #151a23;
|
|
126
|
+
--background-modal: rgba(21, 26, 35, 0.55);
|
|
127
|
+
--background-darker-12: rgba(51, 60, 74, 0.02);
|
|
128
|
+
--background-darker-25: rgba(51, 60, 74, 0.05);
|
|
129
|
+
--background-darker-50: rgba(51, 60, 74, 0.16);
|
|
130
|
+
--background-darker-75: rgba(51, 60, 74, 0.24);
|
|
131
|
+
--surface: #ffffff;
|
|
132
|
+
--surface-muted: #f7f8f8;
|
|
133
|
+
--overlay-strong: rgba(21, 26, 35, 0.9);
|
|
134
|
+
--border-subtle: rgba(94, 106, 125, 0.25);
|
|
135
|
+
--elevation-outlined: var(--divider);
|
|
136
|
+
--elevation-outlined-dark: var(--divider-dark);
|
|
137
|
+
--background-elevation-0: #ffffff;
|
|
138
|
+
--background-elevation-1: #ffffff;
|
|
139
|
+
--background-elevation-2: #ffffff;
|
|
140
|
+
--background-elevation-3: #ffffff;
|
|
141
|
+
--background-elevation-4: #ffffff;
|
|
142
|
+
--background-elevation-5: #ffffff;
|
|
143
|
+
--background-elevation-6: #ffffff;
|
|
144
|
+
--background-elevation-7: #ffffff;
|
|
145
|
+
--background-elevation-8: #ffffff;
|
|
146
|
+
--background-elevation-9: #ffffff;
|
|
147
|
+
--background-elevation-10: #ffffff;
|
|
148
|
+
--background-elevation-11: #ffffff;
|
|
149
|
+
--background-elevation-12: #ffffff;
|
|
150
|
+
--background-elevation-13: #ffffff;
|
|
151
|
+
--background-elevation-14: #ffffff;
|
|
152
|
+
--background-elevation-15: #ffffff;
|
|
153
|
+
--background-elevation-16: #ffffff;
|
|
154
|
+
--background-elevation-17: #ffffff;
|
|
155
|
+
--background-elevation-18: #ffffff;
|
|
156
|
+
--background-elevation-19: #ffffff;
|
|
157
|
+
--background-elevation-20: #ffffff;
|
|
158
|
+
--background-elevation-21: #ffffff;
|
|
159
|
+
--background-elevation-22: #ffffff;
|
|
160
|
+
--background-elevation-23: #ffffff;
|
|
161
|
+
--background-elevation-24: #ffffff;
|
|
162
|
+
--shadow-elevation-1: 0 1px 1px rgba(0, 0, 0, 0.122), 0 1px 3px 0px rgba(0, 0, 0, 0.052);
|
|
163
|
+
--shadow-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.124), 0 2px 5px 1px rgba(0, 0, 0, 0.053);
|
|
164
|
+
--shadow-elevation-3: 0 2px 3px rgba(0, 0, 0, 0.126), 0 3px 8px 1px rgba(0, 0, 0, 0.055);
|
|
165
|
+
--shadow-elevation-4: 0 2px 4px rgba(0, 0, 0, 0.128), 0 4px 10px 2px rgba(0, 0, 0, 0.057);
|
|
166
|
+
--shadow-elevation-5: 0 3px 5px rgba(0, 0, 0, 0.13), 0 5px 13px 2px rgba(0, 0, 0, 0.059);
|
|
167
|
+
--shadow-elevation-6: 0 3px 6px rgba(0, 0, 0, 0.132), 0 6px 15px 3px rgba(0, 0, 0, 0.06);
|
|
168
|
+
--shadow-elevation-7: 0 4px 7px rgba(0, 0, 0, 0.134), 0 7px 18px 3px rgba(0, 0, 0, 0.062);
|
|
169
|
+
--shadow-elevation-8: 0 4px 8px rgba(0, 0, 0, 0.136), 0 8px 20px 3px rgba(0, 0, 0, 0.064);
|
|
170
|
+
--shadow-elevation-9: 0 5px 9px rgba(0, 0, 0, 0.138), 0 9px 23px 4px rgba(0, 0, 0, 0.065);
|
|
171
|
+
--shadow-elevation-10: 0 5px 10px rgba(0, 0, 0, 0.14), 0 10px 25px 4px rgba(0, 0, 0, 0.067);
|
|
172
|
+
--shadow-elevation-11: 0 6px 11px rgba(0, 0, 0, 0.142), 0 11px 28px 5px rgba(0, 0, 0, 0.069);
|
|
173
|
+
--shadow-elevation-12: 0 6px 12px rgba(0, 0, 0, 0.144), 0 12px 30px 5px rgba(0, 0, 0, 0.07);
|
|
174
|
+
--shadow-elevation-13: 0 7px 13px rgba(0, 0, 0, 0.146), 0 13px 33px 5px rgba(0, 0, 0, 0.072);
|
|
175
|
+
--shadow-elevation-14: 0 7px 14px rgba(0, 0, 0, 0.148), 0 14px 35px 6px rgba(0, 0, 0, 0.074);
|
|
176
|
+
--shadow-elevation-15: 0 8px 15px rgba(0, 0, 0, 0.15), 0 15px 38px 6px rgba(0, 0, 0, 0.076);
|
|
177
|
+
--shadow-elevation-16: 0 8px 16px rgba(0, 0, 0, 0.152), 0 16px 40px 7px rgba(0, 0, 0, 0.077);
|
|
178
|
+
--shadow-elevation-17: 0 9px 17px rgba(0, 0, 0, 0.154), 0 17px 43px 7px rgba(0, 0, 0, 0.079);
|
|
179
|
+
--shadow-elevation-18: 0 9px 18px rgba(0, 0, 0, 0.156), 0 18px 45px 8px rgba(0, 0, 0, 0.081);
|
|
180
|
+
--shadow-elevation-19: 0 10px 19px rgba(0, 0, 0, 0.158), 0 19px 48px 8px rgba(0, 0, 0, 0.082);
|
|
181
|
+
--shadow-elevation-20: 0 10px 20px rgba(0, 0, 0, 0.16), 0 20px 50px 8px rgba(0, 0, 0, 0.084);
|
|
182
|
+
--shadow-elevation-21: 0 11px 21px rgba(0, 0, 0, 0.162), 0 21px 53px 9px rgba(0, 0, 0, 0.086);
|
|
183
|
+
--shadow-elevation-22: 0 11px 22px rgba(0, 0, 0, 0.164), 0 22px 55px 9px rgba(0, 0, 0, 0.087);
|
|
184
|
+
--shadow-elevation-23: 0 12px 23px rgba(0, 0, 0, 0.166), 0 23px 58px 10px rgba(0, 0, 0, 0.089);
|
|
185
|
+
--shadow-elevation-24: 0 12px 24px rgba(0, 0, 0, 0.168), 0 24px 60px 10px rgba(0, 0, 0, 0.091);
|
|
186
|
+
--shadow-xs: 0 1px 2px rgba(21, 26, 35, 0.06);
|
|
187
|
+
--shadow-sm: 0 1px 3px rgba(21, 26, 35, 0.1);
|
|
188
|
+
--z-raised: 10;
|
|
189
|
+
--z-sticky: 20;
|
|
190
|
+
--z-modal: 100;
|
|
191
|
+
--z-popover: 200;
|
|
192
|
+
--z-tooltip: 300;
|
|
193
|
+
--z-toast: 400;
|
|
194
|
+
--radius-xs: 0.25rem;
|
|
195
|
+
--radius-sm: 0.375rem;
|
|
196
|
+
--radius-md: 0.5rem;
|
|
197
|
+
--radius-lg: 0.75rem;
|
|
198
|
+
--radius-xl: 1rem;
|
|
199
|
+
--radius-2xl: 1.5rem;
|
|
200
|
+
--radius-full: 9999px;
|
|
201
|
+
--text-base--line-height: var(--line-height-default);
|
|
202
|
+
--appbar-default-fill: var(--background-default);
|
|
203
|
+
--divider: rgba(94, 106, 125, 0.1);
|
|
204
|
+
--divider-dark: rgba(94, 106, 125, 0.25);
|
|
205
|
+
--input-filled-enabled-fill: var(--action-active);
|
|
206
|
+
--input-filled-hover-fill: var(--action-hover);
|
|
207
|
+
--input-outlined-enabled-border: rgba(94, 106, 125, 0.25);
|
|
208
|
+
--input-outlined-hover-border: rgba(94, 106, 125, 0.75);
|
|
209
|
+
--input-standard-enabled-border: rgba(94, 106, 125, 0.25);
|
|
210
|
+
--input-standard-hover-border: rgba(94, 106, 125, 0.75);
|
|
211
|
+
--link-primary: var(--primary-emphasis);
|
|
212
|
+
--link-primary-hover: var(--action-hover);
|
|
213
|
+
--link-primary-disabled: var(--action-disabled);
|
|
214
|
+
--logo-fill: #151a23;
|
|
215
|
+
--logo-mark: #0284c7;
|
|
216
|
+
--sidebar: #fbfbfc;
|
|
217
|
+
--sidebar-foreground: #151a23;
|
|
218
|
+
--sidebar-primary: #0284c7;
|
|
219
|
+
--sidebar-primary-foreground: #ffffff;
|
|
220
|
+
--sidebar-accent: rgba(14, 165, 233, 0.1);
|
|
221
|
+
--sidebar-accent-foreground: #075985;
|
|
222
|
+
--sidebar-border: rgba(94, 106, 125, 0.1);
|
|
223
|
+
--sidebar-ring: #7dd3fc;
|
|
224
|
+
--dashboard-hex-partial: #bae6fd;
|
|
225
|
+
--size-1: 0.5rem;
|
|
226
|
+
--size-2: 1rem;
|
|
227
|
+
--size-3: 1.5rem;
|
|
228
|
+
--size-4: 2rem;
|
|
229
|
+
--size-5: 2.5rem;
|
|
230
|
+
--size-6: 3rem;
|
|
231
|
+
--size-7: 3.5rem;
|
|
232
|
+
--size-8: 4rem;
|
|
233
|
+
--size-9: 4.5rem;
|
|
234
|
+
--size-10: 5rem;
|
|
235
|
+
--size-11: 5.5rem;
|
|
236
|
+
--size-12: 6rem;
|
|
237
|
+
--appbar-height: 64px;
|
|
238
|
+
--footer-height: 52px;
|
|
239
|
+
--main-body-height: calc(100vh - var(--appbar-height) - var(--footer-height));
|
|
240
|
+
--main-padding-width: var(--size-3);
|
|
241
|
+
--main-padding-height: var(--size-3);
|
|
242
|
+
}
|
|
243
|
+
@media (min-width: 769px) {
|
|
244
|
+
:root {
|
|
245
|
+
--main-padding-width: var(--size-5);
|
|
246
|
+
--main-padding-height: var(--size-6);
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/*******************
|
|
251
|
+
PALETTE - DARK MODE
|
|
252
|
+
*******************/
|
|
253
|
+
.dark {
|
|
254
|
+
--text-primary: rgba(255, 255, 255, 0.92);
|
|
255
|
+
--text-secondary: rgba(255, 255, 255, 0.64);
|
|
256
|
+
--text-heading: #ffffff;
|
|
257
|
+
--text-contrast: #0d1017;
|
|
258
|
+
--text-disabled: var(--action-disabled);
|
|
259
|
+
--text-focus: rgba(255, 255, 255, 0.24);
|
|
260
|
+
--text-focus-visible: rgba(255, 255, 255, 0.32);
|
|
261
|
+
--text-hover: rgba(255, 255, 255, 0.16);
|
|
262
|
+
--text-outlined-border: rgba(255, 255, 255, 0.72);
|
|
263
|
+
--text-selected: rgba(255, 255, 255, 0.12);
|
|
264
|
+
--inherit-main: #ffffff;
|
|
265
|
+
--inherit-dark: rgba(255, 255, 255, 0.8);
|
|
266
|
+
--inherit-emphasis: rgba(255, 255, 255, 0.8);
|
|
267
|
+
--inherit-light: #ffffff;
|
|
268
|
+
--inherit-contrast: #0d1017;
|
|
269
|
+
--inherit-focus: rgba(255, 255, 255, 0.24);
|
|
270
|
+
--inherit-focus-visible: rgba(255, 255, 255, 0.32);
|
|
271
|
+
--inherit-hover: rgba(255, 255, 255, 0.16);
|
|
272
|
+
--inherit-outlined-border: rgba(255, 255, 255, 0.72);
|
|
273
|
+
--inherit-selected: rgba(255, 255, 255, 0.12);
|
|
274
|
+
--primary-main: #0ea5e9;
|
|
275
|
+
--primary-dark: #0369a1;
|
|
276
|
+
--primary-emphasis: #7dd3fc;
|
|
277
|
+
--primary-light: #38bdf8;
|
|
278
|
+
--primary-contrast: #0d1017;
|
|
279
|
+
--primary-focus: #38bdf8;
|
|
280
|
+
--primary-focus-visible: #38bdf8;
|
|
281
|
+
--primary-hover: rgba(125, 211, 252, 0.16);
|
|
282
|
+
--primary-outlined-border: #7dd3fc;
|
|
283
|
+
--primary-selected: rgba(125, 211, 252, 0.12);
|
|
284
|
+
--secondary-main: #8b5cf6;
|
|
285
|
+
--secondary-dark: #462e7b;
|
|
286
|
+
--secondary-emphasis: rgba(139, 92, 246, 0.5);
|
|
287
|
+
--secondary-light: rgba(139, 92, 246, 0.75);
|
|
288
|
+
--secondary-contrast: #ffffff;
|
|
289
|
+
--secondary-focus: rgba(139, 92, 246, 0.5);
|
|
290
|
+
--secondary-focus-visible: rgba(139, 92, 246, 0.5);
|
|
291
|
+
--secondary-hover: rgba(139, 92, 246, 0.1);
|
|
292
|
+
--secondary-outlined-border: rgba(139, 92, 246, 0.5);
|
|
293
|
+
--secondary-selected: rgba(139, 92, 246, 0.075);
|
|
294
|
+
--destructive-main: #f43f5e;
|
|
295
|
+
--destructive-dark: #7a202f;
|
|
296
|
+
--destructive-emphasis: rgba(244, 63, 94, 0.5);
|
|
297
|
+
--destructive-light: rgba(244, 63, 94, 0.75);
|
|
298
|
+
--destructive-contrast: #ffffff;
|
|
299
|
+
--destructive-focus: rgba(244, 63, 94, 0.5);
|
|
300
|
+
--destructive-focus-visible: rgba(244, 63, 94, 0.5);
|
|
301
|
+
--destructive-hover: rgba(244, 63, 94, 0.1);
|
|
302
|
+
--destructive-outlined-border: rgba(244, 63, 94, 0.5);
|
|
303
|
+
--destructive-selected: rgba(244, 63, 94, 0.075);
|
|
304
|
+
--warning-main: #ffb020;
|
|
305
|
+
--warning-dark: #805810;
|
|
306
|
+
--warning-emphasis: rgba(255, 176, 32, 0.5);
|
|
307
|
+
--warning-light: rgba(255, 176, 32, 0.75);
|
|
308
|
+
--warning-contrast: #0d1017;
|
|
309
|
+
--warning-focus: rgba(255, 176, 32, 0.5);
|
|
310
|
+
--warning-focus-visible: rgba(255, 176, 32, 0.5);
|
|
311
|
+
--warning-hover: rgba(255, 176, 32, 0.1);
|
|
312
|
+
--warning-outlined-border: rgba(255, 176, 32, 0.5);
|
|
313
|
+
--warning-selected: rgba(255, 176, 32, 0.075);
|
|
314
|
+
--success-main: #10b981;
|
|
315
|
+
--success-dark: #085c40;
|
|
316
|
+
--success-emphasis: rgba(16, 185, 129, 0.5);
|
|
317
|
+
--success-light: rgba(16, 185, 129, 0.75);
|
|
318
|
+
--success-contrast: #0d1017;
|
|
319
|
+
--success-focus: rgba(16, 185, 129, 0.5);
|
|
320
|
+
--success-focus-visible: rgba(16, 185, 129, 0.5);
|
|
321
|
+
--success-hover: rgba(16, 185, 129, 0.1);
|
|
322
|
+
--success-outlined-border: rgba(16, 185, 129, 0.5);
|
|
323
|
+
--success-selected: rgba(16, 185, 129, 0.075);
|
|
324
|
+
--info-main: #3688b3;
|
|
325
|
+
--info-dark: #1b5276;
|
|
326
|
+
--info-emphasis: #96c4dd;
|
|
327
|
+
--info-light: #7bb6d4;
|
|
328
|
+
--info-contrast: #ffffff;
|
|
329
|
+
--info-focus: #5fa6cb;
|
|
330
|
+
--info-focus-visible: #5fa6cb;
|
|
331
|
+
--info-hover: rgba(54, 136, 179, 0.1);
|
|
332
|
+
--info-outlined-border: #96c4dd;
|
|
333
|
+
--info-selected: rgba(54, 136, 179, 0.075);
|
|
334
|
+
--slate-main: #5e6a7d;
|
|
335
|
+
--slate-dark: #333c4a;
|
|
336
|
+
--slate-emphasis: rgba(255, 255, 255, 0.72);
|
|
337
|
+
--slate-light: rgba(94, 106, 125, 0.75);
|
|
338
|
+
--slate-contrast: #0d1017;
|
|
339
|
+
--slate-focus: rgba(255, 255, 255, 0.24);
|
|
340
|
+
--slate-focus-visible: rgba(255, 255, 255, 0.32);
|
|
341
|
+
--slate-hover: rgba(255, 255, 255, 0.08);
|
|
342
|
+
--slate-outlined-border: rgba(255, 255, 255, 0.4);
|
|
343
|
+
--slate-selected: rgba(255, 255, 255, 0.08);
|
|
344
|
+
--action-active: rgba(255, 255, 255, 0.64);
|
|
345
|
+
--action-disabled: rgba(255, 255, 255, 0.32);
|
|
346
|
+
--action-disabled-background: rgba(255, 255, 255, 0.08);
|
|
347
|
+
--action-focus: rgba(255, 255, 255, 0.24);
|
|
348
|
+
--action-hover: rgba(255, 255, 255, 0.08);
|
|
349
|
+
--action-selected: rgba(255, 255, 255, 0.16);
|
|
350
|
+
--avatar-fallback: rgba(255, 255, 255, 0.16);
|
|
351
|
+
--background-default: #0d1017;
|
|
352
|
+
--background-contrast: #ffffff;
|
|
353
|
+
--background-modal: rgba(0, 0, 0, 0.7);
|
|
354
|
+
--background-darker-12: rgba(0, 0, 0, 0.08);
|
|
355
|
+
--background-darker-25: rgba(0, 0, 0, 0.16);
|
|
356
|
+
--background-darker-50: rgba(0, 0, 0, 0.24);
|
|
357
|
+
--background-darker-75: rgba(0, 0, 0, 0.3);
|
|
358
|
+
--surface: #151a23;
|
|
359
|
+
--surface-muted: #1d2430;
|
|
360
|
+
--overlay-strong: rgba(13, 16, 23, 0.9);
|
|
361
|
+
--border-subtle: rgba(255, 255, 255, 0.12);
|
|
362
|
+
--background-elevation-0: transparent;
|
|
363
|
+
--background-elevation-1: rgba(255, 255, 255, 0.04);
|
|
364
|
+
--background-elevation-2: rgba(255, 255, 255, 0.052);
|
|
365
|
+
--background-elevation-3: rgba(255, 255, 255, 0.064);
|
|
366
|
+
--background-elevation-4: rgba(255, 255, 255, 0.076);
|
|
367
|
+
--background-elevation-5: rgba(255, 255, 255, 0.088);
|
|
368
|
+
--background-elevation-6: rgba(255, 255, 255, 0.1);
|
|
369
|
+
--background-elevation-7: rgba(255, 255, 255, 0.112);
|
|
370
|
+
--background-elevation-8: rgba(255, 255, 255, 0.124);
|
|
371
|
+
--background-elevation-9: rgba(255, 255, 255, 0.136);
|
|
372
|
+
--background-elevation-10: rgba(255, 255, 255, 0.148);
|
|
373
|
+
--background-elevation-11: rgba(255, 255, 255, 0.16);
|
|
374
|
+
--background-elevation-12: rgba(255, 255, 255, 0.172);
|
|
375
|
+
--background-elevation-13: rgba(255, 255, 255, 0.184);
|
|
376
|
+
--background-elevation-14: rgba(255, 255, 255, 0.196);
|
|
377
|
+
--background-elevation-15: rgba(255, 255, 255, 0.208);
|
|
378
|
+
--background-elevation-16: rgba(255, 255, 255, 0.22);
|
|
379
|
+
--background-elevation-17: rgba(255, 255, 255, 0.232);
|
|
380
|
+
--background-elevation-18: rgba(255, 255, 255, 0.244);
|
|
381
|
+
--background-elevation-19: rgba(255, 255, 255, 0.256);
|
|
382
|
+
--background-elevation-20: rgba(255, 255, 255, 0.268);
|
|
383
|
+
--background-elevation-21: rgba(255, 255, 255, 0.28);
|
|
384
|
+
--background-elevation-22: rgba(255, 255, 255, 0.292);
|
|
385
|
+
--background-elevation-23: rgba(255, 255, 255, 0.304);
|
|
386
|
+
--background-elevation-24: rgba(255, 255, 255, 0.316);
|
|
387
|
+
--shadow-elevation-1: 0 1px 1px rgba(0, 0, 0, 0.244), 0 1px 3px 0px rgba(0, 0, 0, 0.123);
|
|
388
|
+
--shadow-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.248), 0 2px 5px 1px rgba(0, 0, 0, 0.127);
|
|
389
|
+
--shadow-elevation-3: 0 2px 3px rgba(0, 0, 0, 0.252), 0 3px 8px 1px rgba(0, 0, 0, 0.13);
|
|
390
|
+
--shadow-elevation-4: 0 2px 4px rgba(0, 0, 0, 0.256), 0 4px 10px 2px rgba(0, 0, 0, 0.134);
|
|
391
|
+
--shadow-elevation-5: 0 3px 5px rgba(0, 0, 0, 0.26), 0 5px 13px 2px rgba(0, 0, 0, 0.137);
|
|
392
|
+
--shadow-elevation-6: 0 3px 6px rgba(0, 0, 0, 0.264), 0 6px 15px 3px rgba(0, 0, 0, 0.14);
|
|
393
|
+
--shadow-elevation-7: 0 4px 7px rgba(0, 0, 0, 0.268), 0 7px 18px 3px rgba(0, 0, 0, 0.144);
|
|
394
|
+
--shadow-elevation-8: 0 4px 8px rgba(0, 0, 0, 0.272), 0 8px 20px 3px rgba(0, 0, 0, 0.147);
|
|
395
|
+
--shadow-elevation-9: 0 5px 9px rgba(0, 0, 0, 0.276), 0 9px 23px 4px rgba(0, 0, 0, 0.151);
|
|
396
|
+
--shadow-elevation-10: 0 5px 10px rgba(0, 0, 0, 0.28), 0 10px 25px 4px rgba(0, 0, 0, 0.154);
|
|
397
|
+
--shadow-elevation-11: 0 6px 11px rgba(0, 0, 0, 0.284), 0 11px 28px 5px rgba(0, 0, 0, 0.157);
|
|
398
|
+
--shadow-elevation-12: 0 6px 12px rgba(0, 0, 0, 0.288), 0 12px 30px 5px rgba(0, 0, 0, 0.161);
|
|
399
|
+
--shadow-elevation-13: 0 7px 13px rgba(0, 0, 0, 0.292), 0 13px 33px 5px rgba(0, 0, 0, 0.164);
|
|
400
|
+
--shadow-elevation-14: 0 7px 14px rgba(0, 0, 0, 0.296), 0 14px 35px 6px rgba(0, 0, 0, 0.168);
|
|
401
|
+
--shadow-elevation-15: 0 8px 15px rgba(0, 0, 0, 0.3), 0 15px 38px 6px rgba(0, 0, 0, 0.171);
|
|
402
|
+
--shadow-elevation-16: 0 8px 16px rgba(0, 0, 0, 0.304), 0 16px 40px 7px rgba(0, 0, 0, 0.174);
|
|
403
|
+
--shadow-elevation-17: 0 9px 17px rgba(0, 0, 0, 0.308), 0 17px 43px 7px rgba(0, 0, 0, 0.178);
|
|
404
|
+
--shadow-elevation-18: 0 9px 18px rgba(0, 0, 0, 0.312), 0 18px 45px 8px rgba(0, 0, 0, 0.181);
|
|
405
|
+
--shadow-elevation-19: 0 10px 19px rgba(0, 0, 0, 0.316), 0 19px 48px 8px rgba(0, 0, 0, 0.185);
|
|
406
|
+
--shadow-elevation-20: 0 10px 20px rgba(0, 0, 0, 0.32), 0 20px 50px 8px rgba(0, 0, 0, 0.188);
|
|
407
|
+
--shadow-elevation-21: 0 11px 21px rgba(0, 0, 0, 0.324), 0 21px 53px 9px rgba(0, 0, 0, 0.191);
|
|
408
|
+
--shadow-elevation-22: 0 11px 22px rgba(0, 0, 0, 0.328), 0 22px 55px 9px rgba(0, 0, 0, 0.195);
|
|
409
|
+
--shadow-elevation-23: 0 12px 23px rgba(0, 0, 0, 0.332), 0 23px 58px 10px rgba(0, 0, 0, 0.198);
|
|
410
|
+
--shadow-elevation-24: 0 12px 24px rgba(0, 0, 0, 0.336), 0 24px 60px 10px rgba(0, 0, 0, 0.202);
|
|
411
|
+
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
412
|
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
413
|
+
--divider: rgba(255, 255, 255, 0.08);
|
|
414
|
+
--divider-dark: rgba(255, 255, 255, 0.16);
|
|
415
|
+
--input-filled-enabled-fill: var(--action-selected);
|
|
416
|
+
--input-filled-hover-fill: var(--action-hover);
|
|
417
|
+
--input-outlined-enabled-border: rgba(255, 255, 255, 0.16);
|
|
418
|
+
--input-outlined-hover-border: rgba(255, 255, 255, 0.32);
|
|
419
|
+
--input-standard-enabled-border: rgba(255, 255, 255, 0.16);
|
|
420
|
+
--input-standard-hover-border: rgba(255, 255, 255, 0.32);
|
|
421
|
+
--link-primary: var(--primary-emphasis);
|
|
422
|
+
--link-primary-hover: var(--primary-emphasis);
|
|
423
|
+
--link-primary-disabled: var(--action-disabled);
|
|
424
|
+
--logo-fill: #ffffff;
|
|
425
|
+
--logo-mark: #7dd3fc;
|
|
426
|
+
--sidebar: #151a23;
|
|
427
|
+
--sidebar-foreground: rgba(255, 255, 255, 0.88);
|
|
428
|
+
--sidebar-primary: #38bdf8;
|
|
429
|
+
--sidebar-primary-foreground: #0d1017;
|
|
430
|
+
--sidebar-accent: rgba(125, 211, 252, 0.14);
|
|
431
|
+
--sidebar-accent-foreground: #7dd3fc;
|
|
432
|
+
--sidebar-border: rgba(255, 255, 255, 0.08);
|
|
433
|
+
--sidebar-ring: #38bdf8;
|
|
434
|
+
--dashboard-hex-partial: rgba(56, 189, 248, 0.6);
|
|
435
|
+
}
|
|
@@ -3,8 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
4
|
|
|
5
5
|
declare const buttonVariants: (props?: ({
|
|
6
|
-
variant?: "
|
|
7
|
-
theme?: "
|
|
6
|
+
variant?: "outlined" | "contained" | "ghost" | null | undefined;
|
|
7
|
+
theme?: "inherit" | "primary" | "secondary" | "success" | "destructive" | "warning" | "info" | "slate" | null | undefined;
|
|
8
8
|
size?: "sm" | "md" | "lg" | "xs" | null | undefined;
|
|
9
9
|
iconOnly?: boolean | null | undefined;
|
|
10
10
|
rounded?: boolean | "extra" | null | undefined;
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
export declare const chipVariants: (props?: ({
|
|
2
2
|
theme?: "inherit" | "primary" | "secondary" | "destructive" | "warning" | "success" | "info" | "slate" | null | undefined;
|
|
3
|
-
|
|
3
|
+
variant?: "solid" | "soft" | "outline" | null | undefined;
|
|
4
|
+
size?: "sm" | "md" | "xs" | "2xs" | null | undefined;
|
|
5
|
+
shape?: "rounded" | "pill" | null | undefined;
|
|
6
|
+
dashed?: boolean | null | undefined;
|
|
7
|
+
mono?: boolean | null | undefined;
|
|
8
|
+
uppercase?: boolean | null | undefined;
|
|
4
9
|
wrap?: boolean | null | undefined;
|
|
5
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
11
|
//# sourceMappingURL=chip-variants.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip-variants.d.ts","sourceRoot":"","sources":["../../../src/ui/Chip/chip-variants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"chip-variants.d.ts","sourceRoot":"","sources":["../../../src/ui/Chip/chip-variants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;8EA0CvB,CAAC"}
|
|
@@ -13,17 +13,34 @@ const chipVariants = cva(s.chip, {
|
|
|
13
13
|
slate: s['chip--slate'],
|
|
14
14
|
inherit: s['chip--inherit'],
|
|
15
15
|
},
|
|
16
|
+
variant: {
|
|
17
|
+
soft: s['chip--soft'],
|
|
18
|
+
outline: s['chip--outline'],
|
|
19
|
+
solid: s['chip--solid'],
|
|
20
|
+
},
|
|
16
21
|
size: {
|
|
22
|
+
'2xs': s['chip--2xs'],
|
|
23
|
+
xs: s['chip--xs'],
|
|
17
24
|
sm: s['chip--sm'],
|
|
18
25
|
md: s['chip--md'],
|
|
19
26
|
},
|
|
20
|
-
|
|
21
|
-
|
|
27
|
+
shape: {
|
|
28
|
+
pill: undefined,
|
|
29
|
+
rounded: s['chip--rounded'],
|
|
22
30
|
},
|
|
31
|
+
dashed: { true: s['chip--dashed'] },
|
|
32
|
+
mono: { true: s['chip--mono'] },
|
|
33
|
+
uppercase: { true: s['chip--uppercase'] },
|
|
34
|
+
wrap: { true: s['chip--wrap'] },
|
|
23
35
|
},
|
|
24
36
|
defaultVariants: {
|
|
25
37
|
theme: 'primary',
|
|
38
|
+
variant: 'soft',
|
|
26
39
|
size: 'md',
|
|
40
|
+
shape: 'pill',
|
|
41
|
+
dashed: false,
|
|
42
|
+
mono: false,
|
|
43
|
+
uppercase: false,
|
|
27
44
|
wrap: false,
|
|
28
45
|
},
|
|
29
46
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip-variants.js","sources":["../../../src/ui/Chip/chip-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport s from './chip.module.scss';\n\nexport const chipVariants = cva(s.chip, {\n variants: {\n theme: {\n primary: s['chip--primary'],\n secondary: s['chip--secondary'],\n destructive: s['chip--destructive'],\n warning: s['chip--warning'],\n success: s['chip--success'],\n info: s['chip--info'],\n slate: s['chip--slate'],\n inherit: s['chip--inherit'],\n },\n size: {\n sm: s['chip--sm'],\n md: s['chip--md'],\n },\n
|
|
1
|
+
{"version":3,"file":"chip-variants.js","sources":["../../../src/ui/Chip/chip-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport s from './chip.module.scss';\n\nexport const chipVariants = cva(s.chip, {\n variants: {\n theme: {\n primary: s['chip--primary'],\n secondary: s['chip--secondary'],\n destructive: s['chip--destructive'],\n warning: s['chip--warning'],\n success: s['chip--success'],\n info: s['chip--info'],\n slate: s['chip--slate'],\n inherit: s['chip--inherit'],\n },\n variant: {\n soft: s['chip--soft'],\n outline: s['chip--outline'],\n solid: s['chip--solid'],\n },\n size: {\n '2xs': s['chip--2xs'],\n xs: s['chip--xs'],\n sm: s['chip--sm'],\n md: s['chip--md'],\n },\n shape: {\n pill: undefined,\n rounded: s['chip--rounded'],\n },\n dashed: { true: s['chip--dashed'] },\n mono: { true: s['chip--mono'] },\n uppercase: { true: s['chip--uppercase'] },\n wrap: { true: s['chip--wrap'] },\n },\n defaultVariants: {\n theme: 'primary',\n variant: 'soft',\n size: 'md',\n shape: 'pill',\n dashed: false,\n mono: false,\n uppercase: false,\n wrap: false,\n },\n});\n"],"names":[],"mappings":";;;MAGa,YAAY,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC;AAC3B,YAAA,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC/B,YAAA,WAAW,EAAE,CAAC,CAAC,mBAAmB,CAAC;AACnC,YAAA,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC;AAC3B,YAAA,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC;AAC3B,YAAA,IAAI,EAAE,CAAC,CAAC,YAAY,CAAC;AACrB,YAAA,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC;AACvB,YAAA,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC;AAC5B,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,CAAC,CAAC,YAAY,CAAC;AACrB,YAAA,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC;AAC3B,YAAA,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC;AACxB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC;AACrB,YAAA,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC;AACjB,YAAA,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC;AACjB,YAAA,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC;AAClB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC;AAC5B,SAAA;QACD,MAAM,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE;QACnC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE;QAC/B,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE;QACzC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE;AAChC,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,IAAI,EAAE,KAAK;AACZ,KAAA;AACF,CAAA;;"}
|