@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.
Files changed (54) hide show
  1. package/dist/form/Checkbox/checkbox.js +2 -0
  2. package/dist/form/Checkbox/checkbox.js.map +1 -1
  3. package/dist/form/DatePicker/date-picker.js +2 -0
  4. package/dist/form/DatePicker/date-picker.js.map +1 -1
  5. package/dist/form.d.ts +1 -1
  6. package/dist/{index-CBGZtocA.d.ts → index-BwTP9oMP.d.ts} +1 -1
  7. package/dist/{index-BeCWb0Ix.d.ts → index-DCtv8Gm1.d.ts} +61 -16
  8. package/dist/{index-DVEBz660.d.ts → index-h4thndEb.d.ts} +1 -1
  9. package/dist/index.d.ts +6 -6
  10. package/dist/index.js +2 -0
  11. package/dist/index.js.map +1 -1
  12. package/dist/layout/AppSidebarHeader/app-sidebar-header.js +2 -0
  13. package/dist/layout/AppSidebarHeader/app-sidebar-header.js.map +1 -1
  14. package/dist/layout.d.ts +2 -2
  15. package/dist/navigation/Sheet/sheet.js +2 -0
  16. package/dist/navigation/Sheet/sheet.js.map +1 -1
  17. package/dist/navigation.d.ts +1 -1
  18. package/dist/settings/AppearanceTabs/appearance-tabs.js +2 -0
  19. package/dist/settings/AppearanceTabs/appearance-tabs.js.map +1 -1
  20. package/dist/styles/tokens.d.ts +2 -0
  21. package/dist/styles/tokens.d.ts.map +1 -0
  22. package/dist/styles/tokens.js +2 -0
  23. package/dist/styles/tokens.js.map +1 -0
  24. package/dist/tokens.css +435 -0
  25. package/dist/{tooltip-zOT3UHCF.d.ts → tooltip-C25-bG7o.d.ts} +2 -2
  26. package/dist/ui/Chip/chip-variants.d.ts +6 -1
  27. package/dist/ui/Chip/chip-variants.d.ts.map +1 -1
  28. package/dist/ui/Chip/chip-variants.js +19 -2
  29. package/dist/ui/Chip/chip-variants.js.map +1 -1
  30. package/dist/ui/Chip/chip.css +97 -47
  31. package/dist/ui/Chip/chip.d.ts +14 -0
  32. package/dist/ui/Chip/chip.d.ts.map +1 -1
  33. package/dist/ui/Chip/chip.js +10 -2
  34. package/dist/ui/Chip/chip.js.map +1 -1
  35. package/dist/ui/Chip/chip.module.scss.js +1 -1
  36. package/dist/ui/StatusDot/index.d.ts +3 -0
  37. package/dist/ui/StatusDot/index.d.ts.map +1 -0
  38. package/dist/ui/StatusDot/status-dot-variants.d.ts +7 -0
  39. package/dist/ui/StatusDot/status-dot-variants.d.ts.map +1 -0
  40. package/dist/ui/StatusDot/status-dot-variants.js +28 -0
  41. package/dist/ui/StatusDot/status-dot-variants.js.map +1 -0
  42. package/dist/ui/StatusDot/status-dot.css +61 -0
  43. package/dist/ui/StatusDot/status-dot.d.ts +23 -0
  44. package/dist/ui/StatusDot/status-dot.d.ts.map +1 -0
  45. package/dist/ui/StatusDot/status-dot.js +23 -0
  46. package/dist/ui/StatusDot/status-dot.js.map +1 -0
  47. package/dist/ui/StatusDot/status-dot.module.scss.js +6 -0
  48. package/dist/ui/StatusDot/status-dot.module.scss.js.map +1 -0
  49. package/dist/ui/index.d.ts +1 -0
  50. package/dist/ui/index.d.ts.map +1 -1
  51. package/dist/ui.d.ts +2 -2
  52. package/dist/ui.js +2 -0
  53. package/dist/ui.js.map +1 -1
  54. package/package.json +5 -1
@@ -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?: "destructive" | "inherit" | "primary" | "secondary" | "warning" | "success" | "info" | "slate" | null | undefined;
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;"}
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,2 @@
1
+ import './tokens.scss';
2
+ //# sourceMappingURL=tokens.d.ts.map
@@ -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,2 @@
1
+ import '../tokens.css';
2
+ //# sourceMappingURL=tokens.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -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?: "contained" | "outlined" | "ghost" | null | undefined;
7
- theme?: "destructive" | "inherit" | "primary" | "secondary" | "warning" | "success" | "info" | "slate" | null | undefined;
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
- size?: "sm" | "md" | null | undefined;
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;;;;8EAyBvB,CAAC"}
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
- wrap: {
21
- true: s['chip--wrap'],
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 wrap: {\n true: s['chip--wrap'],\n },\n },\n defaultVariants: {\n theme: 'primary',\n size: 'md',\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,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC;AACjB,YAAA,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC;AAClB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,CAAC,CAAC,YAAY,CAAC;AACtB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,IAAI,EAAE,KAAK;AACZ,KAAA;AACF,CAAA;;"}
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;;"}