@dalexto/lexsys-registry 0.0.2 → 0.0.3

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 (71) hide show
  1. package/dist/index.js +23 -2
  2. package/dist/items/empty.d.ts +7 -0
  3. package/dist/items/index.d.ts +1 -0
  4. package/package.json +1 -1
  5. package/templates/blocks/AuthForm/AuthForm.tsx +3 -3
  6. package/templates/blocks/AuthForm/AuthForm.variants.ts +3 -3
  7. package/templates/blocks/CommandPalette/CommandPalette.tsx +14 -14
  8. package/templates/blocks/CommandPalette/CommandPalette.types.ts +3 -9
  9. package/templates/blocks/CommandPalette/CommandPalette.variants.ts +13 -14
  10. package/templates/blocks/Empty/Empty.tsx +91 -0
  11. package/templates/blocks/Empty/Empty.types.ts +8 -0
  12. package/templates/blocks/Empty/Empty.variants.ts +51 -0
  13. package/templates/blocks/FormField/FormField.tsx +2 -6
  14. package/templates/blocks/FormField/FormField.variants.ts +2 -2
  15. package/templates/blocks/SettingsPanel/SettingsPanel.tsx +2 -2
  16. package/templates/blocks/SettingsPanel/SettingsPanel.variants.ts +2 -2
  17. package/templates/blocks/Sidebar/Sidebar.tsx +45 -85
  18. package/templates/blocks/Sidebar/Sidebar.types.ts +2 -7
  19. package/templates/blocks/Sidebar/Sidebar.variants.ts +36 -40
  20. package/templates/primitives/Accordion/Accordion.variants.ts +7 -7
  21. package/templates/primitives/Alert/Alert.variants.ts +7 -7
  22. package/templates/primitives/AlertDialog/AlertDialog.variants.ts +16 -16
  23. package/templates/primitives/Autocomplete/Autocomplete.variants.ts +49 -49
  24. package/templates/primitives/Avatar/Avatar.variants.ts +10 -10
  25. package/templates/primitives/Badge/Badge.variants.ts +14 -14
  26. package/templates/primitives/Button/Button.variants.ts +26 -26
  27. package/templates/primitives/Card/Card.tsx +19 -1
  28. package/templates/primitives/Card/Card.types.ts +1 -0
  29. package/templates/primitives/Card/Card.variants.ts +14 -11
  30. package/templates/primitives/Checkbox/Checkbox.variants.ts +11 -15
  31. package/templates/primitives/CheckboxGroup/CheckboxGroup.variants.ts +2 -2
  32. package/templates/primitives/Collapsible/Collapsible.variants.ts +10 -10
  33. package/templates/primitives/Combobox/Combobox.variants.ts +58 -58
  34. package/templates/primitives/ContextMenu/ContextMenu.variants.ts +1 -1
  35. package/templates/primitives/Dialog/Dialog.variants.ts +16 -16
  36. package/templates/primitives/Drawer/Drawer.types.ts +3 -1
  37. package/templates/primitives/Drawer/Drawer.variants.ts +37 -37
  38. package/templates/primitives/Field/Field.variants.ts +22 -22
  39. package/templates/primitives/Fieldset/Fieldset.variants.ts +8 -8
  40. package/templates/primitives/Form/Form.variants.ts +1 -1
  41. package/templates/primitives/Input/Input.variants.ts +11 -11
  42. package/templates/primitives/Menu/Menu.variants.ts +25 -25
  43. package/templates/primitives/Menubar/Menubar.variants.ts +1 -1
  44. package/templates/primitives/Meter/Meter.variants.ts +11 -11
  45. package/templates/primitives/NavigationMenu/NavigationMenu.variants.ts +2 -2
  46. package/templates/primitives/NumberField/NumberField.variants.ts +25 -25
  47. package/templates/primitives/OtpField/OtpField.variants.ts +12 -12
  48. package/templates/primitives/Popover/Popover.variants.ts +18 -20
  49. package/templates/primitives/PreviewCard/PreviewCard.variants.ts +1 -1
  50. package/templates/primitives/Progress/Progress.variants.ts +8 -8
  51. package/templates/primitives/RadioGroup/RadioGroup.variants.ts +14 -14
  52. package/templates/primitives/ScrollArea/ScrollArea.variants.ts +3 -3
  53. package/templates/primitives/Select/Select.tsx +29 -29
  54. package/templates/primitives/Select/Select.types.ts +4 -4
  55. package/templates/primitives/Select/Select.variants.ts +44 -59
  56. package/templates/primitives/Separator/Separator.variants.ts +3 -3
  57. package/templates/primitives/Slider/Slider.tsx +14 -14
  58. package/templates/primitives/Slider/Slider.variants.ts +17 -26
  59. package/templates/primitives/Switch/Switch.types.ts +2 -2
  60. package/templates/primitives/Switch/Switch.variants.ts +13 -13
  61. package/templates/primitives/Tabs/Tabs.variants.ts +8 -8
  62. package/templates/primitives/Textarea/Textarea.variants.ts +11 -11
  63. package/templates/primitives/Toast/Toast.variants.ts +20 -20
  64. package/templates/primitives/Toggle/Toggle.variants.ts +9 -9
  65. package/templates/primitives/ToggleGroup/ToggleGroup.variants.ts +5 -5
  66. package/templates/primitives/Toolbar/Toolbar.variants.ts +18 -18
  67. package/templates/primitives/Tooltip/Tooltip.variants.ts +5 -5
  68. package/templates/styles/theme.css +301 -299
  69. package/templates/styles/tokens.css +1477 -1441
  70. package/templates/templates/DashboardShell/DashboardShell.tsx +10 -10
  71. package/templates/templates/DashboardShell/DashboardShell.variants.ts +10 -10
package/templates/primitives/Combobox/Combobox.variants.ts CHANGED
@@ -8,25 +8,25 @@ import { cva } from "class-variance-authority"
8
8
  import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const comboboxLabelVariants = cva(
11
- "text-(length:--lsys-select-label-font-size) font-(--lsys-select-label-font-weight) leading-(--lsys-select-label-font-line-height) text-(--lsys-select-label-foreground)",
11
+ "text-(length:--lex-select-label-font-size) font-(--lex-select-label-font-weight) leading-(--lex-select-label-font-line-height) text-(--lex-select-label-foreground)",
12
12
  )
13
13
 
14
14
  export const comboboxTriggerVariants = cva(
15
15
  [
16
- "inline-flex w-full min-w-0 items-center justify-between gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
17
- "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
18
- "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
19
- "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
20
- "outline-none data-[focused]:border-(--lsys-select-focus-border-color) data-[focused]:ring-(length:--lsys-select-focus-ring-width) data-[focused]:ring-(--lsys-select-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-select-focus-ring-offset) data-[focused]:ring-offset-(--lsys-select-focus-ring-offset-color)",
21
- "data-[invalid]:border-(--lsys-select-invalid-border-color) data-[invalid]:ring-(length:--lsys-select-invalid-ring-width) data-[invalid]:ring-(--lsys-select-invalid-ring-color)",
22
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
16
+ "inline-flex w-full min-w-0 items-center justify-between gap-(--lex-select-trigger-gap) rounded-(--lex-select-radius) border",
17
+ "border-(--lex-select-border-color) bg-(--lex-select-background) text-(--lex-select-foreground)",
18
+ "font-(family-name:--lex-select-font-family) font-(--lex-select-font-weight) leading-(--lex-select-font-line-height) tracking-(--lex-select-font-letter-spacing)",
19
+ "transition-colors duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
20
+ "outline-none data-[focused]:border-(--lex-select-focus-border-color) data-[focused]:ring-(length:--lex-select-focus-ring-width) data-[focused]:ring-(--lex-select-focus-ring-color) data-[focused]:ring-offset-(length:--lex-select-focus-ring-offset) data-[focused]:ring-offset-(--lex-select-focus-ring-offset-color)",
21
+ "data-[invalid]:border-(--lex-select-invalid-border-color) data-[invalid]:ring-(length:--lex-select-invalid-ring-width) data-[invalid]:ring-(--lex-select-invalid-ring-color)",
22
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
23
23
  ].join(" "),
24
24
  {
25
25
  variants: {
26
26
  size: {
27
- sm: "h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
28
- md: "h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
29
- lg: "h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
27
+ sm: "h-(--lex-select-height-sm) px-(--lex-select-padding-x-sm) text-(length:--lex-select-font-size-sm)",
28
+ md: "h-(--lex-select-height-md) px-(--lex-select-padding-x-md) text-(length:--lex-select-font-size-md)",
29
+ lg: "h-(--lex-select-height-lg) px-(--lex-select-padding-x-lg) text-(length:--lex-select-font-size-lg)",
30
30
  },
31
31
  },
32
32
  defaultVariants: {
@@ -37,20 +37,20 @@ export const comboboxTriggerVariants = cva(
37
37
 
38
38
  export const comboboxInputGroupVariants = cva(
39
39
  [
40
- "inline-flex w-full min-w-0 flex-wrap items-center gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
41
- "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
42
- "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
43
- "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
44
- "outline-none data-[focused]:border-(--lsys-select-focus-border-color) data-[focused]:ring-(length:--lsys-select-focus-ring-width) data-[focused]:ring-(--lsys-select-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-select-focus-ring-offset) data-[focused]:ring-offset-(--lsys-select-focus-ring-offset-color)",
45
- "data-[invalid]:border-(--lsys-select-invalid-border-color) data-[invalid]:ring-(length:--lsys-select-invalid-ring-width) data-[invalid]:ring-(--lsys-select-invalid-ring-color)",
46
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
40
+ "inline-flex w-full min-w-0 flex-wrap items-center gap-(--lex-select-trigger-gap) rounded-(--lex-select-radius) border",
41
+ "border-(--lex-select-border-color) bg-(--lex-select-background) text-(--lex-select-foreground)",
42
+ "font-(family-name:--lex-select-font-family) font-(--lex-select-font-weight) leading-(--lex-select-font-line-height) tracking-(--lex-select-font-letter-spacing)",
43
+ "transition-colors duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
44
+ "outline-none data-[focused]:border-(--lex-select-focus-border-color) data-[focused]:ring-(length:--lex-select-focus-ring-width) data-[focused]:ring-(--lex-select-focus-ring-color) data-[focused]:ring-offset-(length:--lex-select-focus-ring-offset) data-[focused]:ring-offset-(--lex-select-focus-ring-offset-color)",
45
+ "data-[invalid]:border-(--lex-select-invalid-border-color) data-[invalid]:ring-(length:--lex-select-invalid-ring-width) data-[invalid]:ring-(--lex-select-invalid-ring-color)",
46
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
47
47
  ].join(" "),
48
48
  {
49
49
  variants: {
50
50
  size: {
51
- sm: "min-h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
52
- md: "min-h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
53
- lg: "min-h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
51
+ sm: "min-h-(--lex-select-height-sm) px-(--lex-select-padding-x-sm) text-(length:--lex-select-font-size-sm)",
52
+ md: "min-h-(--lex-select-height-md) px-(--lex-select-padding-x-md) text-(length:--lex-select-font-size-md)",
53
+ lg: "min-h-(--lex-select-height-lg) px-(--lex-select-padding-x-lg) text-(length:--lex-select-font-size-lg)",
54
54
  },
55
55
  },
56
56
  defaultVariants: {
@@ -61,18 +61,18 @@ export const comboboxInputGroupVariants = cva(
61
61
 
62
62
  export const comboboxInputVariants = cva(
63
63
  [
64
- "min-w-[4rem] flex-1 border-0 bg-transparent text-(--lsys-select-foreground) outline-none",
65
- "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
66
- "placeholder:text-(--lsys-select-placeholder-color)",
64
+ "min-w-[4rem] flex-1 border-0 bg-transparent text-(--lex-select-foreground) outline-none",
65
+ "font-(family-name:--lex-select-font-family) font-(--lex-select-font-weight) leading-(--lex-select-font-line-height) tracking-(--lex-select-font-letter-spacing)",
66
+ "placeholder:text-(--lex-select-placeholder-color)",
67
67
  "disabled:cursor-not-allowed",
68
68
  disabledStateClasses,
69
69
  ].join(" "),
70
70
  {
71
71
  variants: {
72
72
  size: {
73
- sm: "py-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
74
- md: "py-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
75
- lg: "py-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
73
+ sm: "py-(--lex-select-padding-x-sm) text-(length:--lex-select-font-size-sm)",
74
+ md: "py-(--lex-select-padding-x-md) text-(length:--lex-select-font-size-md)",
75
+ lg: "py-(--lex-select-padding-x-lg) text-(length:--lex-select-font-size-lg)",
76
76
  },
77
77
  },
78
78
  defaultVariants: {
@@ -82,92 +82,92 @@ export const comboboxInputVariants = cva(
82
82
  )
83
83
 
84
84
  export const comboboxValueVariants = cva(
85
- "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lsys-select-placeholder-color)",
85
+ "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lex-select-placeholder-color)",
86
86
  )
87
87
 
88
88
  export const comboboxIconVariants = cva(
89
- "inline-flex size-(--lsys-select-icon-size) shrink-0 items-center justify-center text-(--lsys-select-icon-foreground) transition-transform duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing) data-[open]:rotate-180",
89
+ "inline-flex size-(--lex-select-icon-size) shrink-0 items-center justify-center text-(--lex-select-icon-foreground) transition-transform duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing) data-[open]:rotate-180",
90
90
  )
91
91
 
92
92
  export const comboboxClearVariants = cva(
93
93
  [
94
- "inline-flex size-(--lsys-select-icon-size) shrink-0 items-center justify-center rounded-(--lsys-select-item-radius) text-(--lsys-select-icon-foreground)",
95
- "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
96
- "hover:bg-(--lsys-select-item-highlight-background) hover:text-(--lsys-select-item-highlight-foreground)",
97
- "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
94
+ "inline-flex size-(--lex-select-icon-size) shrink-0 items-center justify-center rounded-(--lex-select-item-radius) text-(--lex-select-icon-foreground)",
95
+ "transition-colors duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
96
+ "hover:bg-(--lex-select-item-highlight-background) hover:text-(--lex-select-item-highlight-foreground)",
97
+ "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lex-opacity-disabled)",
98
98
  ].join(" "),
99
99
  )
100
100
 
101
101
  export const comboboxBackdropVariants = cva(
102
- "fixed inset-0 z-(--lsys-select-backdrop-z-index) bg-(--lsys-select-backdrop-background) opacity-(--lsys-select-backdrop-opacity) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
102
+ "fixed inset-0 z-(--lex-select-backdrop-z-index) bg-(--lex-select-backdrop-background) opacity-(--lex-select-backdrop-opacity) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
103
103
  )
104
104
 
105
105
  export const comboboxPositionerVariants = cva(
106
- "z-(--lsys-select-positioner-z-index)",
106
+ "z-(--lex-select-positioner-z-index)",
107
107
  )
108
108
 
109
109
  export const comboboxPopupVariants = cva(
110
110
  [
111
- "min-w-[var(--anchor-width)] overflow-hidden rounded-(--lsys-select-radius) border",
112
- "border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background) text-(--lsys-select-popup-foreground) shadow-(--lsys-select-popup-shadow)",
111
+ "min-w-[var(--anchor-width)] overflow-hidden rounded-(--lex-select-radius) border",
112
+ "border-(--lex-select-popup-border-color) bg-(--lex-select-popup-background) text-(--lex-select-popup-foreground) shadow-(--lex-select-popup-shadow)",
113
113
  "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
114
- "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
114
+ "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
115
115
  ].join(" "),
116
116
  )
117
117
 
118
118
  export const comboboxListVariants = cva(
119
- "grid max-h-(--lsys-select-popup-max-height) gap-(--lsys-select-list-gap) overflow-y-auto p-(--lsys-select-list-padding)",
119
+ "grid max-h-(--lex-select-popup-max-height) gap-(--lex-select-list-gap) overflow-y-auto p-(--lex-select-list-padding)",
120
120
  )
121
121
 
122
122
  export const comboboxItemVariants = cva(
123
123
  [
124
- "relative flex min-w-0 cursor-default select-none items-center gap-(--lsys-select-item-gap) rounded-(--lsys-select-item-radius) px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y)",
125
- "text-(length:--lsys-select-item-font-size) font-(--lsys-select-item-font-weight) leading-(--lsys-select-item-font-line-height) text-(--lsys-select-item-foreground) outline-none",
126
- "data-[highlighted]:bg-(--lsys-select-item-highlight-background) data-[highlighted]:text-(--lsys-select-item-highlight-foreground)",
127
- "data-[selected]:bg-(--lsys-select-item-selected-background) data-[selected]:text-(--lsys-select-item-selected-foreground)",
128
- "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
124
+ "relative flex min-w-0 cursor-default select-none items-center gap-(--lex-select-item-gap) rounded-(--lex-select-item-radius) px-(--lex-select-item-padding-x) py-(--lex-select-item-padding-y)",
125
+ "text-(length:--lex-select-item-font-size) font-(--lex-select-item-font-weight) leading-(--lex-select-item-font-line-height) text-(--lex-select-item-foreground) outline-none",
126
+ "data-[highlighted]:bg-(--lex-select-item-highlight-background) data-[highlighted]:text-(--lex-select-item-highlight-foreground)",
127
+ "data-[selected]:bg-(--lex-select-item-selected-background) data-[selected]:text-(--lex-select-item-selected-foreground)",
128
+ "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lex-opacity-disabled)",
129
129
  ].join(" "),
130
130
  )
131
131
 
132
132
  export const comboboxItemIndicatorVariants = cva(
133
- "inline-flex size-(--lsys-select-item-indicator-size) shrink-0 items-center justify-center text-current",
133
+ "inline-flex size-(--lex-select-item-indicator-size) shrink-0 items-center justify-center text-current",
134
134
  )
135
135
 
136
136
  export const comboboxArrowVariants = cva(
137
- "size-(--lsys-select-arrow-size) rotate-45 border border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background)",
137
+ "size-(--lex-select-arrow-size) rotate-45 border border-(--lex-select-popup-border-color) bg-(--lex-select-popup-background)",
138
138
  )
139
139
 
140
- export const comboboxGroupVariants = cva("grid gap-(--lsys-select-group-gap)")
140
+ export const comboboxGroupVariants = cva("grid gap-(--lex-select-group-gap)")
141
141
 
142
142
  export const comboboxGroupLabelVariants = cva(
143
- "px-(--lsys-select-item-padding-x) py-(--lsys-select-group-label-padding-y) text-(length:--lsys-select-group-label-font-size) font-(--lsys-select-group-label-font-weight) leading-(--lsys-select-group-label-font-line-height) text-(--lsys-select-group-label-foreground)",
143
+ "px-(--lex-select-item-padding-x) py-(--lex-select-group-label-padding-y) text-(length:--lex-select-group-label-font-size) font-(--lex-select-group-label-font-weight) leading-(--lex-select-group-label-font-line-height) text-(--lex-select-group-label-foreground)",
144
144
  )
145
145
 
146
146
  export const comboboxEmptyVariants = cva(
147
- "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
147
+ "px-(--lex-select-item-padding-x) py-(--lex-select-item-padding-y) text-(length:--lex-select-item-font-size) text-(--lex-select-placeholder-color)",
148
148
  )
149
149
 
150
150
  export const comboboxStatusVariants = cva(
151
- "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
151
+ "px-(--lex-select-item-padding-x) py-(--lex-select-item-padding-y) text-(length:--lex-select-item-font-size) text-(--lex-select-placeholder-color)",
152
152
  )
153
153
 
154
154
  export const comboboxChipsVariants = cva(
155
- "flex min-w-0 flex-1 flex-wrap items-center gap-(--lsys-select-item-gap)",
155
+ "flex min-w-0 flex-1 flex-wrap items-center gap-(--lex-select-item-gap)",
156
156
  )
157
157
 
158
158
  export const comboboxChipVariants = cva(
159
159
  [
160
- "inline-flex max-w-full items-center gap-(--lsys-select-item-gap) rounded-(--lsys-select-item-radius) border border-(--lsys-select-border-color)",
161
- "bg-(--lsys-select-item-selected-background) px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y)",
162
- "text-(length:--lsys-select-item-font-size) font-(--lsys-select-item-font-weight) text-(--lsys-select-item-selected-foreground)",
163
- "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
160
+ "inline-flex max-w-full items-center gap-(--lex-select-item-gap) rounded-(--lex-select-item-radius) border border-(--lex-select-border-color)",
161
+ "bg-(--lex-select-item-selected-background) px-(--lex-select-item-padding-x) py-(--lex-select-item-padding-y)",
162
+ "text-(length:--lex-select-item-font-size) font-(--lex-select-item-font-weight) text-(--lex-select-item-selected-foreground)",
163
+ "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lex-opacity-disabled)",
164
164
  ].join(" "),
165
165
  )
166
166
 
167
167
  export const comboboxChipRemoveVariants = cva(
168
168
  [
169
- "inline-flex size-(--lsys-select-item-indicator-size) shrink-0 items-center justify-center rounded-(--lsys-select-item-radius) text-current",
170
- "hover:bg-(--lsys-select-item-highlight-background) hover:text-(--lsys-select-item-highlight-foreground)",
169
+ "inline-flex size-(--lex-select-item-indicator-size) shrink-0 items-center justify-center rounded-(--lex-select-item-radius) text-current",
170
+ "hover:bg-(--lex-select-item-highlight-background) hover:text-(--lex-select-item-highlight-foreground)",
171
171
  ].join(" "),
172
172
  )
173
173
 
@@ -176,5 +176,5 @@ export const comboboxRowVariants = cva("flex min-w-0 items-center")
176
176
  export const comboboxCollectionVariants = cva("contents")
177
177
 
178
178
  export const comboboxSeparatorVariants = cva(
179
- "mx-(--lsys-select-item-padding-x) my-(--lsys-select-group-label-padding-y) h-(--lsys-separator-thickness) bg-(--lsys-separator-color)",
179
+ "mx-(--lex-select-item-padding-x) my-(--lex-select-group-label-padding-y) h-(--lex-separator-thickness) bg-(--lex-separator-color)",
180
180
  )
package/templates/primitives/ContextMenu/ContextMenu.variants.ts CHANGED
@@ -35,5 +35,5 @@ export const contextMenuSubmenuTriggerIconVariants =
35
35
  menuSubmenuTriggerIconVariants
36
36
 
37
37
  export const contextMenuTriggerVariants = cva(
38
- "outline-none focus-visible:ring-(length:--lsys-menu-focus-ring-width) focus-visible:ring-(--lsys-menu-focus-ring-color)",
38
+ "outline-none focus-visible:ring-(length:--lex-menu-focus-ring-width) focus-visible:ring-(--lex-menu-focus-ring-color)",
39
39
  )
package/templates/primitives/Dialog/Dialog.variants.ts CHANGED
@@ -9,48 +9,48 @@ import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const dialogTriggerVariants = cva(
11
11
  [
12
- "inline-flex h-(--lsys-dialog-trigger-height) items-center justify-center rounded-(--lsys-dialog-trigger-radius)",
13
- "bg-(--lsys-dialog-trigger-background) px-(--lsys-dialog-trigger-padding-x) text-(--lsys-dialog-trigger-foreground)",
14
- "text-(length:--lsys-dialog-trigger-font-size) font-(--lsys-dialog-trigger-font-weight) leading-(--lsys-dialog-trigger-font-line-height)",
15
- "transition-colors duration-(--lsys-dialog-transition-duration) ease-(--lsys-dialog-transition-easing)",
16
- "outline-none hover:bg-(--lsys-dialog-trigger-hover-background) focus-visible:ring-(length:--lsys-dialog-focus-ring-width) focus-visible:ring-(--lsys-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-dialog-focus-ring-offset-color)",
12
+ "inline-flex h-(--lex-dialog-trigger-height) items-center justify-center rounded-(--lex-dialog-trigger-radius)",
13
+ "bg-(--lex-dialog-trigger-background) px-(--lex-dialog-trigger-padding-x) text-(--lex-dialog-trigger-foreground)",
14
+ "text-(length:--lex-dialog-trigger-font-size) font-(--lex-dialog-trigger-font-weight) leading-(--lex-dialog-trigger-font-line-height)",
15
+ "transition-colors duration-(--lex-dialog-transition-duration) ease-(--lex-dialog-transition-easing)",
16
+ "outline-none hover:bg-(--lex-dialog-trigger-hover-background) focus-visible:ring-(length:--lex-dialog-focus-ring-width) focus-visible:ring-(--lex-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lex-dialog-focus-ring-offset) focus-visible:ring-offset-(--lex-dialog-focus-ring-offset-color)",
17
17
  disabledStateClasses,
18
18
  ].join(" "),
19
19
  )
20
20
  export const dialogBackdropVariants = cva(
21
21
  [
22
- "fixed inset-0 z-(--lsys-dialog-backdrop-z-index) bg-(--lsys-dialog-backdrop-background) opacity-(--lsys-dialog-backdrop-opacity)",
22
+ "fixed inset-0 z-(--lex-dialog-backdrop-z-index) bg-(--lex-dialog-backdrop-background) opacity-(--lex-dialog-backdrop-opacity)",
23
23
  "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
24
- "transition-opacity duration-(--lsys-dialog-transition-duration) ease-(--lsys-dialog-transition-easing)",
24
+ "transition-opacity duration-(--lex-dialog-transition-duration) ease-(--lex-dialog-transition-easing)",
25
25
  ].join(" "),
26
26
  )
27
27
 
28
28
  export const dialogViewportVariants = cva(
29
- "fixed inset-0 z-(--lsys-dialog-viewport-z-index) grid place-items-center overflow-y-auto p-(--lsys-dialog-viewport-padding)",
29
+ "fixed inset-0 z-(--lex-dialog-viewport-z-index) grid place-items-center overflow-y-auto p-(--lex-dialog-viewport-padding)",
30
30
  )
31
31
 
32
32
  export const dialogPopupVariants = cva(
33
33
  [
34
- "grid w-[min(calc(100vw-(var(--lsys-dialog-viewport-inset)*2)),var(--lsys-dialog-popup-max-width))] gap-(--lsys-dialog-popup-gap) rounded-(--lsys-dialog-popup-radius) border",
35
- "border-(--lsys-dialog-popup-border-color) bg-(--lsys-dialog-popup-background) p-(--lsys-dialog-popup-padding) text-(--lsys-dialog-popup-foreground) shadow-(--lsys-dialog-popup-shadow)",
34
+ "grid w-[min(calc(100vw-(var(--lex-dialog-viewport-inset)*2)),var(--lex-dialog-popup-max-width))] gap-(--lex-dialog-popup-gap) rounded-(--lex-dialog-popup-radius) border",
35
+ "border-(--lex-dialog-popup-border-color) bg-(--lex-dialog-popup-background) p-(--lex-dialog-popup-padding) text-(--lex-dialog-popup-foreground) shadow-(--lex-dialog-popup-shadow)",
36
36
  "outline-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
37
- "transition-[opacity,transform] duration-(--lsys-dialog-transition-duration) ease-(--lsys-dialog-transition-easing)",
37
+ "transition-[opacity,transform] duration-(--lex-dialog-transition-duration) ease-(--lex-dialog-transition-easing)",
38
38
  ].join(" "),
39
39
  )
40
40
 
41
41
  export const dialogTitleVariants = cva(
42
- "pr-(--lsys-dialog-title-padding-end) text-(length:--lsys-dialog-title-font-size) font-(--lsys-dialog-title-font-weight) leading-(--lsys-dialog-title-font-line-height) text-(--lsys-dialog-title-foreground)",
42
+ "pr-(--lex-dialog-title-padding-end) text-(length:--lex-dialog-title-font-size) font-(--lex-dialog-title-font-weight) leading-(--lex-dialog-title-font-line-height) text-(--lex-dialog-title-foreground)",
43
43
  )
44
44
 
45
45
  export const dialogDescriptionVariants = cva(
46
- "text-(length:--lsys-dialog-description-font-size) font-(--lsys-dialog-description-font-weight) leading-(--lsys-dialog-description-font-line-height) text-(--lsys-dialog-description-foreground)",
46
+ "text-(length:--lex-dialog-description-font-size) font-(--lex-dialog-description-font-weight) leading-(--lex-dialog-description-font-line-height) text-(--lex-dialog-description-foreground)",
47
47
  )
48
48
 
49
49
  export const dialogCloseVariants = cva(
50
50
  [
51
- "absolute right-(--lsys-dialog-close-inset) top-(--lsys-dialog-close-inset) inline-flex size-(--lsys-dialog-close-size) items-center justify-center rounded-(--lsys-dialog-close-radius)",
52
- "text-(--lsys-dialog-close-foreground) outline-none transition-colors duration-(--lsys-dialog-transition-duration) ease-(--lsys-dialog-transition-easing)",
53
- "hover:bg-(--lsys-dialog-close-hover-background) focus-visible:ring-(length:--lsys-dialog-focus-ring-width) focus-visible:ring-(--lsys-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-dialog-focus-ring-offset-color)",
51
+ "absolute right-(--lex-dialog-close-inset) top-(--lex-dialog-close-inset) inline-flex size-(--lex-dialog-close-size) items-center justify-center rounded-(--lex-dialog-close-radius)",
52
+ "text-(--lex-dialog-close-foreground) outline-none transition-colors duration-(--lex-dialog-transition-duration) ease-(--lex-dialog-transition-easing)",
53
+ "hover:bg-(--lex-dialog-close-hover-background) focus-visible:ring-(length:--lex-dialog-focus-ring-width) focus-visible:ring-(--lex-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lex-dialog-focus-ring-offset) focus-visible:ring-offset-(--lex-dialog-focus-ring-offset-color)",
54
54
  disabledStateClasses,
55
55
  ].join(" "),
56
56
  )
package/templates/primitives/Drawer/Drawer.types.ts CHANGED
@@ -11,7 +11,9 @@ import type { Drawer as BaseDrawer } from "@base-ui/react/drawer"
11
11
  export type DrawerSide = "bottom" | "top" | "right" | "left"
12
12
  export type DrawerSize = "sm" | "md" | "lg" | "full"
13
13
 
14
- export type DrawerProps<Payload = unknown> = BaseDrawer.Root.Props<Payload>
14
+ // eslint-disable-next-line @typescript-eslint/no-empty-object-type
15
+ export interface DrawerProps<Payload = unknown> extends BaseDrawer.Root
16
+ .Props<Payload> {}
15
17
  export type DrawerProviderProps = BaseDrawer.Provider.Props
16
18
  export type DrawerPortalProps = BaseDrawer.Portal.Props
17
19
  export type DrawerHandle<Payload = unknown> = BaseDrawer.Handle<Payload>
package/templates/primitives/Drawer/Drawer.variants.ts CHANGED
@@ -9,33 +9,33 @@ import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const drawerTriggerVariants = cva(
11
11
  [
12
- "inline-flex h-(--lsys-drawer-trigger-height) items-center justify-center rounded-(--lsys-drawer-trigger-radius)",
13
- "bg-(--lsys-drawer-trigger-background) px-(--lsys-drawer-trigger-padding-x) text-(--lsys-drawer-trigger-foreground)",
14
- "text-(length:--lsys-drawer-trigger-font-size) font-(--lsys-drawer-trigger-font-weight) leading-(--lsys-drawer-trigger-font-line-height)",
15
- "transition-colors duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing)",
16
- "outline-none hover:bg-(--lsys-drawer-trigger-hover-background) focus-visible:ring-(length:--lsys-drawer-focus-ring-width) focus-visible:ring-(--lsys-drawer-focus-ring-color) focus-visible:ring-offset-(length:--lsys-drawer-focus-ring-offset) focus-visible:ring-offset-(--lsys-drawer-focus-ring-offset-color)",
12
+ "inline-flex h-(--lex-drawer-trigger-height) items-center justify-center rounded-(--lex-drawer-trigger-radius)",
13
+ "bg-(--lex-drawer-trigger-background) px-(--lex-drawer-trigger-padding-x) text-(--lex-drawer-trigger-foreground)",
14
+ "text-(length:--lex-drawer-trigger-font-size) font-(--lex-drawer-trigger-font-weight) leading-(--lex-drawer-trigger-font-line-height)",
15
+ "transition-colors duration-(--lex-drawer-transition-duration) ease-(--lex-drawer-transition-easing)",
16
+ "outline-none hover:bg-(--lex-drawer-trigger-hover-background) focus-visible:ring-(length:--lex-drawer-focus-ring-width) focus-visible:ring-(--lex-drawer-focus-ring-color) focus-visible:ring-offset-(length:--lex-drawer-focus-ring-offset) focus-visible:ring-offset-(--lex-drawer-focus-ring-offset-color)",
17
17
  disabledStateClasses,
18
18
  ].join(" "),
19
19
  )
20
20
 
21
21
  export const drawerIndentBackgroundVariants = cva(
22
- "fixed inset-0 z-(--lsys-drawer-indent-z-index) bg-(--lsys-drawer-indent-background) opacity-0 transition-opacity duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing) data-[active]:opacity-100",
22
+ "fixed inset-0 z-(--lex-drawer-indent-z-index) bg-(--lex-drawer-indent-background) opacity-0 transition-opacity duration-(--lex-drawer-transition-duration) ease-(--lex-drawer-transition-easing) data-[active]:opacity-100",
23
23
  )
24
24
 
25
25
  export const drawerIndentVariants = cva(
26
- "min-h-(--lsys-drawer-viewport-max-height) origin-top overflow-hidden transition-[border-radius,transform] duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing) data-[active]:scale-(--lsys-drawer-indent-scale) data-[active]:rounded-(--lsys-drawer-indent-radius)",
26
+ "min-h-(--lex-drawer-viewport-max-height) origin-top overflow-hidden transition-[border-radius,transform] duration-(--lex-drawer-transition-duration) ease-(--lex-drawer-transition-easing) data-[active]:scale-(--lex-drawer-indent-scale) data-[active]:rounded-(--lex-drawer-indent-radius)",
27
27
  )
28
28
 
29
29
  export const drawerBackdropVariants = cva(
30
30
  [
31
- "fixed inset-0 z-(--lsys-drawer-backdrop-z-index) bg-(--lsys-drawer-backdrop-background) opacity-(--lsys-drawer-backdrop-opacity)",
32
- "transition-opacity duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing)",
31
+ "fixed inset-0 z-(--lex-drawer-backdrop-z-index) bg-(--lex-drawer-backdrop-background) opacity-(--lex-drawer-backdrop-opacity)",
32
+ "transition-opacity duration-(--lex-drawer-transition-duration) ease-(--lex-drawer-transition-easing)",
33
33
  "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
34
34
  ].join(" "),
35
35
  )
36
36
 
37
37
  export const drawerViewportVariants = cva(
38
- "fixed inset-0 z-(--lsys-drawer-viewport-z-index) flex overflow-hidden p-(--lsys-drawer-viewport-padding)",
38
+ "fixed inset-0 z-(--lex-drawer-viewport-z-index) flex overflow-hidden p-(--lex-drawer-viewport-padding)",
39
39
  {
40
40
  variants: {
41
41
  side: {
@@ -53,19 +53,19 @@ export const drawerViewportVariants = cva(
53
53
 
54
54
  export const drawerPopupVariants = cva(
55
55
  [
56
- "relative flex bg-(--lsys-drawer-popup-background) text-(--lsys-drawer-popup-foreground) shadow-(--lsys-drawer-popup-shadow) outline-none",
57
- "border border-(--lsys-drawer-popup-border-color) transition-[opacity,transform] duration-[calc(var(--lsys-drawer-transition-duration)*var(--drawer-swipe-strength,1))] ease-(--lsys-drawer-transition-easing)",
56
+ "relative flex bg-(--lex-drawer-popup-background) text-(--lex-drawer-popup-foreground) shadow-(--lex-drawer-popup-shadow) outline-none",
57
+ "border border-(--lex-drawer-popup-border-color) transition-[opacity,transform] duration-[calc(var(--lex-drawer-transition-duration)*var(--drawer-swipe-strength,1))] ease-(--lex-drawer-transition-easing)",
58
58
  "data-[swiping]:transition-none",
59
59
  ].join(" "),
60
60
  {
61
61
  variants: {
62
62
  side: {
63
63
  bottom:
64
- "max-h-[calc(var(--lsys-drawer-viewport-max-height)-(var(--lsys-drawer-viewport-padding)*2))] w-[min(calc(100vw-(var(--lsys-drawer-viewport-inset)*2)),var(--lsys-drawer-popup-max-width))] translate-y-[calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px))] rounded-t-(--lsys-drawer-popup-radius) data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full",
65
- top: "max-h-[calc(var(--lsys-drawer-viewport-max-height)-(var(--lsys-drawer-viewport-padding)*2))] w-[min(calc(100vw-(var(--lsys-drawer-viewport-inset)*2)),var(--lsys-drawer-popup-max-width))] translate-y-[var(--drawer-swipe-movement-y,0px)] rounded-b-(--lsys-drawer-popup-radius) data-[ending-style]:-translate-y-full data-[starting-style]:-translate-y-full",
64
+ "max-h-[calc(var(--lex-drawer-viewport-max-height)-(var(--lex-drawer-viewport-padding)*2))] w-[min(calc(100vw-(var(--lex-drawer-viewport-inset)*2)),var(--lex-drawer-popup-max-width))] translate-y-[calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px))] rounded-t-(--lex-drawer-popup-radius) data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full",
65
+ top: "max-h-[calc(var(--lex-drawer-viewport-max-height)-(var(--lex-drawer-viewport-padding)*2))] w-[min(calc(100vw-(var(--lex-drawer-viewport-inset)*2)),var(--lex-drawer-popup-max-width))] translate-y-[var(--drawer-swipe-movement-y,0px)] rounded-b-(--lex-drawer-popup-radius) data-[ending-style]:-translate-y-full data-[starting-style]:-translate-y-full",
66
66
  right:
67
- "h-full max-w-[calc(100vw-(var(--lsys-drawer-viewport-inset)*2))] translate-x-[var(--drawer-swipe-movement-x,0px)] rounded-l-(--lsys-drawer-popup-radius) data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full",
68
- left: "h-full max-w-[calc(100vw-(var(--lsys-drawer-viewport-inset)*2))] translate-x-[var(--drawer-swipe-movement-x,0px)] rounded-r-(--lsys-drawer-popup-radius) data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full",
67
+ "h-full max-w-[calc(100vw-(var(--lex-drawer-viewport-inset)*2))] translate-x-[var(--drawer-swipe-movement-x,0px)] rounded-l-(--lex-drawer-popup-radius) data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full",
68
+ left: "h-full max-w-[calc(100vw-(var(--lex-drawer-viewport-inset)*2))] translate-x-[var(--drawer-swipe-movement-x,0px)] rounded-r-(--lex-drawer-popup-radius) data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full",
69
69
  },
70
70
  size: {
71
71
  sm: "",
@@ -78,43 +78,43 @@ export const drawerPopupVariants = cva(
78
78
  {
79
79
  side: ["bottom", "top"],
80
80
  size: "sm",
81
- class: "min-h-(--lsys-drawer-popup-height-sm)",
81
+ class: "min-h-(--lex-drawer-popup-height-sm)",
82
82
  },
83
83
  {
84
84
  side: ["bottom", "top"],
85
85
  size: "md",
86
- class: "min-h-(--lsys-drawer-popup-height-md)",
86
+ class: "min-h-(--lex-drawer-popup-height-md)",
87
87
  },
88
88
  {
89
89
  side: ["bottom", "top"],
90
90
  size: "lg",
91
- class: "min-h-(--lsys-drawer-popup-height-lg)",
91
+ class: "min-h-(--lex-drawer-popup-height-lg)",
92
92
  },
93
93
  {
94
94
  side: ["bottom", "top"],
95
95
  size: "full",
96
96
  class:
97
- "min-h-[calc(var(--lsys-drawer-viewport-max-height)-(var(--lsys-drawer-viewport-padding)*2))]",
97
+ "min-h-[calc(var(--lex-drawer-viewport-max-height)-(var(--lex-drawer-viewport-padding)*2))]",
98
98
  },
99
99
  {
100
100
  side: ["left", "right"],
101
101
  size: "sm",
102
- class: "w-(--lsys-drawer-popup-width-sm)",
102
+ class: "w-(--lex-drawer-popup-width-sm)",
103
103
  },
104
104
  {
105
105
  side: ["left", "right"],
106
106
  size: "md",
107
- class: "w-(--lsys-drawer-popup-width-md)",
107
+ class: "w-(--lex-drawer-popup-width-md)",
108
108
  },
109
109
  {
110
110
  side: ["left", "right"],
111
111
  size: "lg",
112
- class: "w-(--lsys-drawer-popup-width-lg)",
112
+ class: "w-(--lex-drawer-popup-width-lg)",
113
113
  },
114
114
  {
115
115
  side: ["left", "right"],
116
116
  size: "full",
117
- class: "w-[calc(100vw-(var(--lsys-drawer-viewport-inset)*2))]",
117
+ class: "w-[calc(100vw-(var(--lex-drawer-viewport-inset)*2))]",
118
118
  },
119
119
  ],
120
120
  defaultVariants: {
@@ -125,22 +125,22 @@ export const drawerPopupVariants = cva(
125
125
  )
126
126
 
127
127
  export const drawerContentVariants = cva(
128
- "grid flex-1 content-start gap-(--lsys-drawer-content-gap) overflow-auto p-(--lsys-drawer-content-padding)",
128
+ "grid flex-1 content-start gap-(--lex-drawer-content-gap) overflow-auto p-(--lex-drawer-content-padding)",
129
129
  )
130
130
 
131
131
  export const drawerHandleVariants = cva(
132
- "mx-auto mt-(--lsys-drawer-handle-margin-top) h-(--lsys-drawer-handle-height) w-(--lsys-drawer-handle-width) shrink-0 rounded-(--lsys-drawer-handle-radius) bg-(--lsys-drawer-handle-background)",
132
+ "mx-auto mt-(--lex-drawer-handle-margin-top) h-(--lex-drawer-handle-height) w-(--lex-drawer-handle-width) shrink-0 rounded-(--lex-drawer-handle-radius) bg-(--lex-drawer-handle-background)",
133
133
  )
134
134
 
135
135
  export const drawerSwipeAreaVariants = cva(
136
- "fixed z-(--lsys-drawer-handle-z-index) data-[disabled]:pointer-events-none data-[disabled]:opacity-0",
136
+ "fixed z-(--lex-drawer-handle-z-index) data-[disabled]:pointer-events-none data-[disabled]:opacity-0",
137
137
  {
138
138
  variants: {
139
139
  side: {
140
- bottom: "inset-x-0 bottom-0 h-(--lsys-drawer-swipe-area-size)",
141
- top: "inset-x-0 top-0 h-(--lsys-drawer-swipe-area-size)",
142
- right: "inset-y-0 right-0 w-(--lsys-drawer-swipe-area-size)",
143
- left: "inset-y-0 left-0 w-(--lsys-drawer-swipe-area-size)",
140
+ bottom: "inset-x-0 bottom-0 h-(--lex-drawer-swipe-area-size)",
141
+ top: "inset-x-0 top-0 h-(--lex-drawer-swipe-area-size)",
142
+ right: "inset-y-0 right-0 w-(--lex-drawer-swipe-area-size)",
143
+ left: "inset-y-0 left-0 w-(--lex-drawer-swipe-area-size)",
144
144
  },
145
145
  },
146
146
  defaultVariants: {
@@ -150,18 +150,18 @@ export const drawerSwipeAreaVariants = cva(
150
150
  )
151
151
 
152
152
  export const drawerTitleVariants = cva(
153
- "pr-(--lsys-drawer-title-padding-end) text-(length:--lsys-drawer-title-font-size) font-(--lsys-drawer-title-font-weight) leading-(--lsys-drawer-title-font-line-height) text-(--lsys-drawer-title-foreground)",
153
+ "pr-(--lex-drawer-title-padding-end) text-(length:--lex-drawer-title-font-size) font-(--lex-drawer-title-font-weight) leading-(--lex-drawer-title-font-line-height) text-(--lex-drawer-title-foreground)",
154
154
  )
155
155
 
156
156
  export const drawerDescriptionVariants = cva(
157
- "text-(length:--lsys-drawer-description-font-size) font-(--lsys-drawer-description-font-weight) leading-(--lsys-drawer-description-font-line-height) text-(--lsys-drawer-description-foreground)",
157
+ "text-(length:--lex-drawer-description-font-size) font-(--lex-drawer-description-font-weight) leading-(--lex-drawer-description-font-line-height) text-(--lex-drawer-description-foreground)",
158
158
  )
159
159
 
160
160
  export const drawerCloseVariants = cva(
161
161
  [
162
- "absolute right-(--lsys-drawer-close-inset) top-(--lsys-drawer-close-inset) inline-flex size-(--lsys-drawer-close-size) items-center justify-center rounded-(--lsys-drawer-close-radius)",
163
- "text-(--lsys-drawer-close-foreground) outline-none transition-colors duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing)",
164
- "hover:bg-(--lsys-drawer-close-hover-background) focus-visible:ring-(length:--lsys-drawer-focus-ring-width) focus-visible:ring-(--lsys-drawer-focus-ring-color) focus-visible:ring-offset-(length:--lsys-drawer-focus-ring-offset) focus-visible:ring-offset-(--lsys-drawer-focus-ring-offset-color)",
162
+ "absolute right-(--lex-drawer-close-inset) top-(--lex-drawer-close-inset) inline-flex size-(--lex-drawer-close-size) items-center justify-center rounded-(--lex-drawer-close-radius)",
163
+ "text-(--lex-drawer-close-foreground) outline-none transition-colors duration-(--lex-drawer-transition-duration) ease-(--lex-drawer-transition-easing)",
164
+ "hover:bg-(--lex-drawer-close-hover-background) focus-visible:ring-(length:--lex-drawer-focus-ring-width) focus-visible:ring-(--lex-drawer-focus-ring-color) focus-visible:ring-offset-(length:--lex-drawer-focus-ring-offset) focus-visible:ring-offset-(--lex-drawer-focus-ring-offset-color)",
165
165
  disabledStateClasses,
166
166
  ].join(" "),
167
167
  )
@@ -169,7 +169,7 @@ export const drawerCloseVariants = cva(
169
169
  export const drawerCloseInlineVariants = cva(
170
170
  [
171
171
  "relative inline-flex w-auto items-center outline-none",
172
- "focus-visible:ring-(length:--lsys-drawer-focus-ring-width) focus-visible:ring-(--lsys-drawer-focus-ring-color) focus-visible:ring-offset-(length:--lsys-drawer-focus-ring-offset) focus-visible:ring-offset-(--lsys-drawer-focus-ring-offset-color)",
172
+ "focus-visible:ring-(length:--lex-drawer-focus-ring-width) focus-visible:ring-(--lex-drawer-focus-ring-color) focus-visible:ring-offset-(length:--lex-drawer-focus-ring-offset) focus-visible:ring-offset-(--lex-drawer-focus-ring-offset-color)",
173
173
  disabledStateClasses,
174
174
  ].join(" "),
175
175
  )
package/templates/primitives/Field/Field.variants.ts CHANGED
@@ -9,27 +9,27 @@ import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const fieldVariants = cva(
11
11
  [
12
- "grid gap-(--lsys-field-gap) text-(--lsys-field-foreground)",
13
- "data-[disabled]:opacity-(--lsys-opacity-disabled)",
12
+ "grid gap-(--lex-field-gap) text-(--lex-field-foreground)",
13
+ "data-[disabled]:opacity-(--lex-opacity-disabled)",
14
14
  ].join(" "),
15
15
  )
16
16
 
17
17
  export const fieldLabelVariants = cva(
18
18
  [
19
- "w-fit text-(length:--lsys-field-label-font-size) font-(--lsys-field-label-font-weight) leading-(--lsys-field-label-font-line-height) tracking-(--lsys-field-label-font-letter-spacing)",
20
- "text-(--lsys-field-label-foreground) data-[invalid]:text-(--lsys-field-label-invalid-foreground) data-[disabled]:cursor-not-allowed",
19
+ "w-fit text-(length:--lex-field-label-font-size) font-(--lex-field-label-font-weight) leading-(--lex-field-label-font-line-height) tracking-(--lex-field-label-font-letter-spacing)",
20
+ "text-(--lex-field-label-foreground) data-[invalid]:text-(--lex-field-label-invalid-foreground) data-[disabled]:cursor-not-allowed",
21
21
  ].join(" "),
22
22
  )
23
23
 
24
24
  export const fieldControlVariants = cva(
25
25
  [
26
- "flex w-full min-w-0 border bg-(--lsys-field-control-background) text-(--lsys-field-control-foreground)",
27
- "rounded-(--lsys-field-control-radius) border-(--lsys-field-control-border-color)",
28
- "font-(family-name:--lsys-field-control-font-family) font-(--lsys-field-control-font-weight) leading-(--lsys-field-control-font-line-height) tracking-(--lsys-field-control-font-letter-spacing)",
29
- "placeholder:text-(--lsys-field-control-placeholder-color)",
30
- "transition-colors duration-(--lsys-field-transition-duration) ease-(--lsys-field-transition-easing)",
31
- "outline-none focus-visible:border-(--lsys-field-control-focus-border-color) focus-visible:ring-(length:--lsys-field-control-focus-ring-width) focus-visible:ring-(--lsys-field-control-focus-ring-color) focus-visible:ring-offset-(length:--lsys-field-control-focus-ring-offset) focus-visible:ring-offset-(--lsys-field-control-focus-ring-offset-color)",
32
- "data-[invalid]:border-(--lsys-field-control-invalid-border-color) data-[invalid]:ring-(--lsys-field-control-invalid-ring-color) aria-invalid:border-(--lsys-field-control-invalid-border-color) aria-invalid:ring-(--lsys-field-control-invalid-ring-color)",
26
+ "flex w-full min-w-0 border bg-(--lex-field-control-background) text-(--lex-field-control-foreground)",
27
+ "rounded-(--lex-field-control-radius) border-(--lex-field-control-border-color)",
28
+ "font-(family-name:--lex-field-control-font-family) font-(--lex-field-control-font-weight) leading-(--lex-field-control-font-line-height) tracking-(--lex-field-control-font-letter-spacing)",
29
+ "placeholder:text-(--lex-field-control-placeholder-color)",
30
+ "transition-colors duration-(--lex-field-transition-duration) ease-(--lex-field-transition-easing)",
31
+ "outline-none focus-visible:border-(--lex-field-control-focus-border-color) focus-visible:ring-(length:--lex-field-control-focus-ring-width) focus-visible:ring-(--lex-field-control-focus-ring-color) focus-visible:ring-offset-(length:--lex-field-control-focus-ring-offset) focus-visible:ring-offset-(--lex-field-control-focus-ring-offset-color)",
32
+ "data-[invalid]:border-(--lex-field-control-invalid-border-color) data-[invalid]:ring-(--lex-field-control-invalid-ring-color) aria-invalid:border-(--lex-field-control-invalid-border-color) aria-invalid:ring-(--lex-field-control-invalid-ring-color)",
33
33
  "disabled:cursor-not-allowed",
34
34
  disabledStateClasses,
35
35
  ].join(" "),
@@ -38,12 +38,12 @@ export const fieldControlVariants = cva(
38
38
  variant: {
39
39
  default: "",
40
40
  ghost:
41
- "border-transparent bg-transparent focus-visible:bg-(--lsys-field-control-background)",
41
+ "border-transparent bg-transparent focus-visible:bg-(--lex-field-control-background)",
42
42
  },
43
43
  size: {
44
- sm: "h-(--lsys-field-control-height-sm) px-(--lsys-field-control-padding-x-sm) text-(length:--lsys-field-control-font-size-sm)",
45
- md: "h-(--lsys-field-control-height-md) px-(--lsys-field-control-padding-x-md) text-(length:--lsys-field-control-font-size-md)",
46
- lg: "h-(--lsys-field-control-height-lg) px-(--lsys-field-control-padding-x-lg) text-(length:--lsys-field-control-font-size-lg)",
44
+ sm: "h-(--lex-field-control-height-sm) px-(--lex-field-control-padding-x-sm) text-(length:--lex-field-control-font-size-sm)",
45
+ md: "h-(--lex-field-control-height-md) px-(--lex-field-control-padding-x-md) text-(length:--lex-field-control-font-size-md)",
46
+ lg: "h-(--lex-field-control-height-lg) px-(--lex-field-control-padding-x-lg) text-(length:--lex-field-control-font-size-lg)",
47
47
  },
48
48
  },
49
49
  defaultVariants: {
@@ -55,23 +55,23 @@ export const fieldControlVariants = cva(
55
55
 
56
56
  export const fieldDescriptionVariants = cva(
57
57
  [
58
- "m-0 text-(length:--lsys-field-description-font-size) font-(--lsys-field-description-font-weight) leading-(--lsys-field-description-font-line-height) tracking-(--lsys-field-description-font-letter-spacing)",
59
- "text-(--lsys-field-description-foreground) data-[disabled]:opacity-(--lsys-opacity-disabled)",
58
+ "m-0 text-(length:--lex-field-description-font-size) font-(--lex-field-description-font-weight) leading-(--lex-field-description-font-line-height) tracking-(--lex-field-description-font-letter-spacing)",
59
+ "text-(--lex-field-description-foreground) data-[disabled]:opacity-(--lex-opacity-disabled)",
60
60
  ].join(" "),
61
61
  )
62
62
 
63
63
  export const fieldItemVariants = cva(
64
64
  [
65
- "grid gap-(--lsys-field-item-gap)",
66
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
65
+ "grid gap-(--lex-field-item-gap)",
66
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
67
67
  ].join(" "),
68
68
  )
69
69
 
70
70
  export const fieldErrorVariants = cva(
71
71
  [
72
- "m-0 text-(length:--lsys-field-error-font-size) font-(--lsys-field-error-font-weight) leading-(--lsys-field-error-font-line-height) tracking-(--lsys-field-error-font-letter-spacing)",
73
- "text-(--lsys-field-error-foreground) data-[disabled]:opacity-(--lsys-opacity-disabled)",
72
+ "m-0 text-(length:--lex-field-error-font-size) font-(--lex-field-error-font-weight) leading-(--lex-field-error-font-line-height) tracking-(--lex-field-error-font-letter-spacing)",
73
+ "text-(--lex-field-error-foreground) data-[disabled]:opacity-(--lex-opacity-disabled)",
74
74
  "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
75
- "transition-opacity duration-(--lsys-field-transition-duration) ease-(--lsys-field-transition-easing)",
75
+ "transition-opacity duration-(--lex-field-transition-duration) ease-(--lex-field-transition-easing)",
76
76
  ].join(" "),
77
77
  )