@dalexto/lexsys-registry 0.0.2 → 0.0.4

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 (77) hide show
  1. package/README.md +1 -0
  2. package/dist/index.js +53 -52
  3. package/dist/items/empty.d.ts +7 -0
  4. package/dist/items/index.d.ts +2 -0
  5. package/dist/items/table.d.ts +7 -0
  6. package/dist/registry.types.d.ts +0 -1
  7. package/package.json +1 -1
  8. package/templates/blocks/AuthForm/AuthForm.tsx +3 -3
  9. package/templates/blocks/AuthForm/AuthForm.variants.ts +3 -3
  10. package/templates/blocks/CommandPalette/CommandPalette.tsx +14 -14
  11. package/templates/blocks/CommandPalette/CommandPalette.types.ts +3 -9
  12. package/templates/blocks/CommandPalette/CommandPalette.variants.ts +13 -14
  13. package/templates/blocks/Empty/Empty.tsx +91 -0
  14. package/templates/blocks/Empty/Empty.types.ts +8 -0
  15. package/templates/blocks/Empty/Empty.variants.ts +51 -0
  16. package/templates/blocks/FormField/FormField.tsx +2 -6
  17. package/templates/blocks/FormField/FormField.variants.ts +2 -2
  18. package/templates/blocks/SettingsPanel/SettingsPanel.tsx +2 -2
  19. package/templates/blocks/SettingsPanel/SettingsPanel.variants.ts +2 -2
  20. package/templates/blocks/Sidebar/Sidebar.tsx +45 -85
  21. package/templates/blocks/Sidebar/Sidebar.types.ts +2 -7
  22. package/templates/blocks/Sidebar/Sidebar.variants.ts +36 -40
  23. package/templates/primitives/Accordion/Accordion.variants.ts +7 -7
  24. package/templates/primitives/Alert/Alert.variants.ts +7 -7
  25. package/templates/primitives/AlertDialog/AlertDialog.variants.ts +16 -16
  26. package/templates/primitives/Autocomplete/Autocomplete.variants.ts +49 -49
  27. package/templates/primitives/Avatar/Avatar.variants.ts +10 -10
  28. package/templates/primitives/Badge/Badge.variants.ts +14 -14
  29. package/templates/primitives/Button/Button.variants.ts +26 -26
  30. package/templates/primitives/Card/Card.tsx +19 -1
  31. package/templates/primitives/Card/Card.types.ts +1 -0
  32. package/templates/primitives/Card/Card.variants.ts +14 -11
  33. package/templates/primitives/Checkbox/Checkbox.variants.ts +11 -15
  34. package/templates/primitives/CheckboxGroup/CheckboxGroup.variants.ts +2 -2
  35. package/templates/primitives/Collapsible/Collapsible.variants.ts +10 -10
  36. package/templates/primitives/Combobox/Combobox.variants.ts +58 -58
  37. package/templates/primitives/ContextMenu/ContextMenu.variants.ts +1 -1
  38. package/templates/primitives/Dialog/Dialog.variants.ts +16 -16
  39. package/templates/primitives/Drawer/Drawer.types.ts +3 -1
  40. package/templates/primitives/Drawer/Drawer.variants.ts +37 -37
  41. package/templates/primitives/Field/Field.variants.ts +22 -22
  42. package/templates/primitives/Fieldset/Fieldset.variants.ts +8 -8
  43. package/templates/primitives/Form/Form.variants.ts +1 -1
  44. package/templates/primitives/Input/Input.variants.ts +11 -11
  45. package/templates/primitives/Menu/Menu.variants.ts +25 -25
  46. package/templates/primitives/Menubar/Menubar.variants.ts +1 -1
  47. package/templates/primitives/Meter/Meter.variants.ts +11 -11
  48. package/templates/primitives/NavigationMenu/NavigationMenu.variants.ts +2 -2
  49. package/templates/primitives/NumberField/NumberField.variants.ts +25 -25
  50. package/templates/primitives/OtpField/OtpField.variants.ts +12 -12
  51. package/templates/primitives/Popover/Popover.variants.ts +18 -20
  52. package/templates/primitives/PreviewCard/PreviewCard.variants.ts +1 -1
  53. package/templates/primitives/Progress/Progress.variants.ts +8 -8
  54. package/templates/primitives/RadioGroup/RadioGroup.variants.ts +14 -14
  55. package/templates/primitives/ScrollArea/ScrollArea.variants.ts +3 -3
  56. package/templates/primitives/Select/Select.tsx +29 -29
  57. package/templates/primitives/Select/Select.types.ts +4 -4
  58. package/templates/primitives/Select/Select.variants.ts +44 -59
  59. package/templates/primitives/Separator/Separator.variants.ts +3 -3
  60. package/templates/primitives/Slider/Slider.tsx +14 -14
  61. package/templates/primitives/Slider/Slider.variants.ts +17 -26
  62. package/templates/primitives/Switch/Switch.types.ts +2 -2
  63. package/templates/primitives/Switch/Switch.variants.ts +13 -13
  64. package/templates/primitives/Table/Table.tsx +121 -0
  65. package/templates/primitives/Table/Table.types.ts +68 -0
  66. package/templates/primitives/Table/Table.variants.ts +51 -0
  67. package/templates/primitives/Tabs/Tabs.variants.ts +8 -8
  68. package/templates/primitives/Textarea/Textarea.variants.ts +11 -11
  69. package/templates/primitives/Toast/Toast.variants.ts +20 -20
  70. package/templates/primitives/Toggle/Toggle.variants.ts +9 -9
  71. package/templates/primitives/ToggleGroup/ToggleGroup.variants.ts +5 -5
  72. package/templates/primitives/Toolbar/Toolbar.variants.ts +18 -18
  73. package/templates/primitives/Tooltip/Tooltip.variants.ts +5 -5
  74. package/templates/styles/theme.css +301 -299
  75. package/templates/styles/tokens.css +1495 -1441
  76. package/templates/templates/DashboardShell/DashboardShell.tsx +10 -10
  77. package/templates/templates/DashboardShell/DashboardShell.variants.ts +10 -10
package/templates/primitives/Accordion/Accordion.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 accordionVariants = cva(
11
- "grid overflow-hidden rounded-(--lsys-accordion-radius) border border-(--lsys-accordion-border-color) bg-(--lsys-accordion-background) text-(--lsys-accordion-foreground)",
11
+ "grid overflow-hidden rounded-(--lex-accordion-radius) border border-(--lex-accordion-border-color) bg-(--lex-accordion-background) text-(--lex-accordion-foreground)",
12
12
  )
13
13
 
14
14
  export const accordionItemVariants = cva(
15
- "border-b border-(--lsys-accordion-item-border-color) last:border-b-0",
15
+ "border-b border-(--lex-accordion-item-border-color) last:border-b-0",
16
16
  )
17
17
 
18
18
  export const accordionHeaderVariants = cva("flex")
19
19
 
20
20
  export const accordionTriggerVariants = cva(
21
21
  [
22
- "flex w-full items-center justify-between px-(--lsys-accordion-trigger-padding-x) py-(--lsys-accordion-trigger-padding-y) text-left",
23
- "text-(length:--lsys-accordion-trigger-font-size) font-(--lsys-accordion-trigger-font-weight) leading-(--lsys-accordion-trigger-font-line-height) text-(--lsys-accordion-foreground)",
24
- "transition-colors duration-(--lsys-accordion-transition-duration) ease-(--lsys-accordion-transition-easing)",
25
- "outline-none hover:bg-(--lsys-accordion-trigger-background-hover) focus-visible:ring-(length:--lsys-accordion-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-accordion-focus-ring-color)",
22
+ "flex w-full items-center justify-between px-(--lex-accordion-trigger-padding-x) py-(--lex-accordion-trigger-padding-y) text-left",
23
+ "text-(length:--lex-accordion-trigger-font-size) font-(--lex-accordion-trigger-font-weight) leading-(--lex-accordion-trigger-font-line-height) text-(--lex-accordion-foreground)",
24
+ "transition-colors duration-(--lex-accordion-transition-duration) ease-(--lex-accordion-transition-easing)",
25
+ "outline-none hover:bg-(--lex-accordion-trigger-background-hover) focus-visible:ring-(length:--lex-accordion-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-accordion-focus-ring-color)",
26
26
  disabledStateClasses,
27
27
  ].join(" "),
28
28
  )
29
29
 
30
30
  export const accordionPanelVariants = cva(
31
- "px-(--lsys-accordion-panel-padding-x) pb-(--lsys-accordion-panel-padding-bottom) text-(length:--lsys-accordion-panel-font-size) leading-(--lsys-accordion-panel-font-line-height) text-(--lsys-accordion-panel-foreground)",
31
+ "px-(--lex-accordion-panel-padding-x) pb-(--lex-accordion-panel-padding-bottom) text-(length:--lex-accordion-panel-font-size) leading-(--lex-accordion-panel-font-line-height) text-(--lex-accordion-panel-foreground)",
32
32
  )
package/templates/primitives/Alert/Alert.variants.ts CHANGED
@@ -7,18 +7,18 @@
7
7
  import { cva } from "class-variance-authority"
8
8
 
9
9
  const neutralVariant =
10
- "border-(--lsys-alert-neutral-border-color) bg-(--lsys-alert-neutral-background) text-(--lsys-alert-neutral-foreground)"
10
+ "border-(--lex-alert-neutral-border-color) bg-(--lex-alert-neutral-background) text-(--lex-alert-neutral-foreground)"
11
11
 
12
12
  const primaryVariant =
13
- "border-(--lsys-alert-primary-border-color) bg-(--lsys-alert-primary-background) text-(--lsys-alert-primary-foreground)"
13
+ "border-(--lex-alert-primary-border-color) bg-(--lex-alert-primary-background) text-(--lex-alert-primary-foreground)"
14
14
 
15
15
  const dangerVariant =
16
- "border-(--lsys-alert-danger-border-color) bg-(--lsys-alert-danger-background) text-(--lsys-alert-danger-foreground)"
16
+ "border-(--lex-alert-danger-border-color) bg-(--lex-alert-danger-background) text-(--lex-alert-danger-foreground)"
17
17
 
18
18
  export const alertVariants = cva(
19
19
  [
20
- "grid gap-(--lsys-alert-gap) rounded-(--lsys-alert-radius) border p-(--lsys-alert-padding)",
21
- "transition-colors duration-(--lsys-alert-transition-duration) ease-(--lsys-alert-transition-easing)",
20
+ "grid gap-(--lex-alert-gap) rounded-(--lex-alert-radius) border p-(--lex-alert-padding)",
21
+ "transition-colors duration-(--lex-alert-transition-duration) ease-(--lex-alert-transition-easing)",
22
22
  ].join(" "),
23
23
  {
24
24
  variants: {
@@ -35,7 +35,7 @@ export const alertVariants = cva(
35
35
  )
36
36
 
37
37
  export const alertTitleClassName =
38
- "text-(length:--lsys-alert-title-font-size) font-(--lsys-alert-title-font-weight) leading-(--lsys-alert-title-font-line-height)"
38
+ "text-(length:--lex-alert-title-font-size) font-(--lex-alert-title-font-weight) leading-(--lex-alert-title-font-line-height)"
39
39
 
40
40
  export const alertDescriptionClassName =
41
- "text-(length:--lsys-alert-description-font-size) leading-(--lsys-alert-description-font-line-height) text-(--lsys-alert-description-foreground)"
41
+ "text-(length:--lex-alert-description-font-size) leading-(--lex-alert-description-font-line-height) text-(--lex-alert-description-foreground)"
package/templates/primitives/AlertDialog/AlertDialog.variants.ts CHANGED
@@ -9,49 +9,49 @@ import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const alertDialogTriggerVariants = cva(
11
11
  [
12
- "inline-flex h-(--lsys-alert-dialog-trigger-height) items-center justify-center rounded-(--lsys-alert-dialog-trigger-radius)",
13
- "bg-(--lsys-alert-dialog-trigger-background) px-(--lsys-alert-dialog-trigger-padding-x) text-(--lsys-alert-dialog-trigger-foreground)",
14
- "text-(length:--lsys-alert-dialog-trigger-font-size) font-(--lsys-alert-dialog-trigger-font-weight) leading-(--lsys-alert-dialog-trigger-font-line-height)",
15
- "transition-colors duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
16
- "outline-none hover:bg-(--lsys-alert-dialog-trigger-hover-background) focus-visible:ring-(length:--lsys-alert-dialog-focus-ring-width) focus-visible:ring-(--lsys-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-alert-dialog-focus-ring-offset-color)",
12
+ "inline-flex h-(--lex-alert-dialog-trigger-height) items-center justify-center rounded-(--lex-alert-dialog-trigger-radius)",
13
+ "bg-(--lex-alert-dialog-trigger-background) px-(--lex-alert-dialog-trigger-padding-x) text-(--lex-alert-dialog-trigger-foreground)",
14
+ "text-(length:--lex-alert-dialog-trigger-font-size) font-(--lex-alert-dialog-trigger-font-weight) leading-(--lex-alert-dialog-trigger-font-line-height)",
15
+ "transition-colors duration-(--lex-alert-dialog-transition-duration) ease-(--lex-alert-dialog-transition-easing)",
16
+ "outline-none hover:bg-(--lex-alert-dialog-trigger-hover-background) focus-visible:ring-(length:--lex-alert-dialog-focus-ring-width) focus-visible:ring-(--lex-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lex-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lex-alert-dialog-focus-ring-offset-color)",
17
17
  disabledStateClasses,
18
18
  ].join(" "),
19
19
  )
20
20
 
21
21
  export const alertDialogBackdropVariants = cva(
22
22
  [
23
- "fixed inset-0 z-(--lsys-alert-dialog-backdrop-z-index) bg-(--lsys-alert-dialog-backdrop-background) opacity-(--lsys-alert-dialog-backdrop-opacity)",
23
+ "fixed inset-0 z-(--lex-alert-dialog-backdrop-z-index) bg-(--lex-alert-dialog-backdrop-background) opacity-(--lex-alert-dialog-backdrop-opacity)",
24
24
  "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
25
- "transition-opacity duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
25
+ "transition-opacity duration-(--lex-alert-dialog-transition-duration) ease-(--lex-alert-dialog-transition-easing)",
26
26
  ].join(" "),
27
27
  )
28
28
 
29
29
  export const alertDialogViewportVariants = cva(
30
- "fixed inset-0 z-(--lsys-alert-dialog-viewport-z-index) grid place-items-center overflow-y-auto p-(--lsys-alert-dialog-viewport-padding)",
30
+ "fixed inset-0 z-(--lex-alert-dialog-viewport-z-index) grid place-items-center overflow-y-auto p-(--lex-alert-dialog-viewport-padding)",
31
31
  )
32
32
 
33
33
  export const alertDialogPopupVariants = cva(
34
34
  [
35
- "grid w-[min(calc(100vw-(var(--lsys-alert-dialog-viewport-inset)*2)),var(--lsys-alert-dialog-popup-max-width))] gap-(--lsys-alert-dialog-popup-gap) rounded-(--lsys-alert-dialog-popup-radius) border",
36
- "border-(--lsys-alert-dialog-popup-border-color) bg-(--lsys-alert-dialog-popup-background) p-(--lsys-alert-dialog-popup-padding) text-(--lsys-alert-dialog-popup-foreground) shadow-(--lsys-alert-dialog-popup-shadow)",
35
+ "grid w-[min(calc(100vw-(var(--lex-alert-dialog-viewport-inset)*2)),var(--lex-alert-dialog-popup-max-width))] gap-(--lex-alert-dialog-popup-gap) rounded-(--lex-alert-dialog-popup-radius) border",
36
+ "border-(--lex-alert-dialog-popup-border-color) bg-(--lex-alert-dialog-popup-background) p-(--lex-alert-dialog-popup-padding) text-(--lex-alert-dialog-popup-foreground) shadow-(--lex-alert-dialog-popup-shadow)",
37
37
  "outline-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
38
- "transition-[opacity,transform] duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
38
+ "transition-[opacity,transform] duration-(--lex-alert-dialog-transition-duration) ease-(--lex-alert-dialog-transition-easing)",
39
39
  ].join(" "),
40
40
  )
41
41
 
42
42
  export const alertDialogTitleVariants = cva(
43
- "pr-(--lsys-alert-dialog-title-padding-end) text-(length:--lsys-alert-dialog-title-font-size) font-(--lsys-alert-dialog-title-font-weight) leading-(--lsys-alert-dialog-title-font-line-height) text-(--lsys-alert-dialog-title-foreground)",
43
+ "pr-(--lex-alert-dialog-title-padding-end) text-(length:--lex-alert-dialog-title-font-size) font-(--lex-alert-dialog-title-font-weight) leading-(--lex-alert-dialog-title-font-line-height) text-(--lex-alert-dialog-title-foreground)",
44
44
  )
45
45
 
46
46
  export const alertDialogDescriptionVariants = cva(
47
- "text-(length:--lsys-alert-dialog-description-font-size) font-(--lsys-alert-dialog-description-font-weight) leading-(--lsys-alert-dialog-description-font-line-height) text-(--lsys-alert-dialog-description-foreground)",
47
+ "text-(length:--lex-alert-dialog-description-font-size) font-(--lex-alert-dialog-description-font-weight) leading-(--lex-alert-dialog-description-font-line-height) text-(--lex-alert-dialog-description-foreground)",
48
48
  )
49
49
 
50
50
  export const alertDialogCloseVariants = cva(
51
51
  [
52
- "absolute right-(--lsys-alert-dialog-close-inset) top-(--lsys-alert-dialog-close-inset) inline-flex size-(--lsys-alert-dialog-close-size) items-center justify-center rounded-(--lsys-alert-dialog-close-radius)",
53
- "text-(--lsys-alert-dialog-close-foreground) outline-none transition-colors duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
54
- "hover:bg-(--lsys-alert-dialog-close-hover-background) focus-visible:ring-(length:--lsys-alert-dialog-focus-ring-width) focus-visible:ring-(--lsys-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-alert-dialog-focus-ring-offset-color)",
52
+ "absolute right-(--lex-alert-dialog-close-inset) top-(--lex-alert-dialog-close-inset) inline-flex size-(--lex-alert-dialog-close-size) items-center justify-center rounded-(--lex-alert-dialog-close-radius)",
53
+ "text-(--lex-alert-dialog-close-foreground) outline-none transition-colors duration-(--lex-alert-dialog-transition-duration) ease-(--lex-alert-dialog-transition-easing)",
54
+ "hover:bg-(--lex-alert-dialog-close-hover-background) focus-visible:ring-(length:--lex-alert-dialog-focus-ring-width) focus-visible:ring-(--lex-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lex-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lex-alert-dialog-focus-ring-offset-color)",
55
55
  disabledStateClasses,
56
56
  ].join(" "),
57
57
  )
package/templates/primitives/Autocomplete/Autocomplete.variants.ts CHANGED
@@ -9,20 +9,20 @@ import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const autocompleteTriggerVariants = cva(
11
11
  [
12
- "inline-flex w-full min-w-0 items-center justify-between gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
13
- "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
14
- "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
15
- "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
16
- "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)",
17
- "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)",
18
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
12
+ "inline-flex w-full min-w-0 items-center justify-between gap-(--lex-select-trigger-gap) rounded-(--lex-select-radius) border",
13
+ "border-(--lex-select-border-color) bg-(--lex-select-background) text-(--lex-select-foreground)",
14
+ "font-(family-name:--lex-select-font-family) font-(--lex-select-font-weight) leading-(--lex-select-font-line-height) tracking-(--lex-select-font-letter-spacing)",
15
+ "transition-colors duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
16
+ "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)",
17
+ "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)",
18
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
19
19
  ].join(" "),
20
20
  {
21
21
  variants: {
22
22
  size: {
23
- sm: "h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
24
- md: "h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
25
- lg: "h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
23
+ sm: "h-(--lex-select-height-sm) px-(--lex-select-padding-x-sm) text-(length:--lex-select-font-size-sm)",
24
+ md: "h-(--lex-select-height-md) px-(--lex-select-padding-x-md) text-(length:--lex-select-font-size-md)",
25
+ lg: "h-(--lex-select-height-lg) px-(--lex-select-padding-x-lg) text-(length:--lex-select-font-size-lg)",
26
26
  },
27
27
  },
28
28
  defaultVariants: {
@@ -33,20 +33,20 @@ export const autocompleteTriggerVariants = cva(
33
33
 
34
34
  export const autocompleteInputGroupVariants = cva(
35
35
  [
36
- "inline-flex w-full min-w-0 items-center gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
37
- "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
38
- "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
39
- "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
40
- "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)",
41
- "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)",
42
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
36
+ "inline-flex w-full min-w-0 items-center gap-(--lex-select-trigger-gap) rounded-(--lex-select-radius) border",
37
+ "border-(--lex-select-border-color) bg-(--lex-select-background) text-(--lex-select-foreground)",
38
+ "font-(family-name:--lex-select-font-family) font-(--lex-select-font-weight) leading-(--lex-select-font-line-height) tracking-(--lex-select-font-letter-spacing)",
39
+ "transition-colors duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
40
+ "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)",
41
+ "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)",
42
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
43
43
  ].join(" "),
44
44
  {
45
45
  variants: {
46
46
  size: {
47
- sm: "h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
48
- md: "h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
49
- lg: "h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
47
+ sm: "h-(--lex-select-height-sm) px-(--lex-select-padding-x-sm) text-(length:--lex-select-font-size-sm)",
48
+ md: "h-(--lex-select-height-md) px-(--lex-select-padding-x-md) text-(length:--lex-select-font-size-md)",
49
+ lg: "h-(--lex-select-height-lg) px-(--lex-select-padding-x-lg) text-(length:--lex-select-font-size-lg)",
50
50
  },
51
51
  },
52
52
  defaultVariants: {
@@ -57,18 +57,18 @@ export const autocompleteInputGroupVariants = cva(
57
57
 
58
58
  export const autocompleteInputVariants = cva(
59
59
  [
60
- "min-w-0 flex-1 border-0 bg-transparent text-(--lsys-select-foreground) outline-none",
61
- "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
62
- "placeholder:text-(--lsys-select-placeholder-color)",
60
+ "min-w-0 flex-1 border-0 bg-transparent text-(--lex-select-foreground) outline-none",
61
+ "font-(family-name:--lex-select-font-family) font-(--lex-select-font-weight) leading-(--lex-select-font-line-height) tracking-(--lex-select-font-letter-spacing)",
62
+ "placeholder:text-(--lex-select-placeholder-color)",
63
63
  "disabled:cursor-not-allowed",
64
64
  disabledStateClasses,
65
65
  ].join(" "),
66
66
  {
67
67
  variants: {
68
68
  size: {
69
- sm: "text-(length:--lsys-select-font-size-sm)",
70
- md: "text-(length:--lsys-select-font-size-md)",
71
- lg: "text-(length:--lsys-select-font-size-lg)",
69
+ sm: "text-(length:--lex-select-font-size-sm)",
70
+ md: "text-(length:--lex-select-font-size-md)",
71
+ lg: "text-(length:--lex-select-font-size-lg)",
72
72
  },
73
73
  },
74
74
  defaultVariants: {
@@ -78,71 +78,71 @@ export const autocompleteInputVariants = cva(
78
78
  )
79
79
 
80
80
  export const autocompleteValueVariants = cva(
81
- "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lsys-select-placeholder-color)",
81
+ "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lex-select-placeholder-color)",
82
82
  )
83
83
 
84
84
  export const autocompleteIconVariants = cva(
85
- "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",
85
+ "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",
86
86
  )
87
87
 
88
88
  export const autocompleteClearVariants = cva(
89
89
  [
90
- "inline-flex size-(--lsys-select-icon-size) shrink-0 items-center justify-center rounded-(--lsys-select-item-radius) text-(--lsys-select-icon-foreground)",
91
- "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
92
- "hover:bg-(--lsys-select-item-highlight-background) hover:text-(--lsys-select-item-highlight-foreground)",
93
- "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
90
+ "inline-flex size-(--lex-select-icon-size) shrink-0 items-center justify-center rounded-(--lex-select-item-radius) text-(--lex-select-icon-foreground)",
91
+ "transition-colors duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
92
+ "hover:bg-(--lex-select-item-highlight-background) hover:text-(--lex-select-item-highlight-foreground)",
93
+ "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lex-opacity-disabled)",
94
94
  ].join(" "),
95
95
  )
96
96
 
97
97
  export const autocompleteBackdropVariants = cva(
98
- "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",
98
+ "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",
99
99
  )
100
100
 
101
101
  export const autocompletePositionerVariants = cva(
102
- "z-(--lsys-select-positioner-z-index)",
102
+ "z-(--lex-select-positioner-z-index)",
103
103
  )
104
104
 
105
105
  export const autocompletePopupVariants = cva(
106
106
  [
107
- "min-w-[var(--anchor-width)] overflow-hidden rounded-(--lsys-select-radius) border",
108
- "border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background) text-(--lsys-select-popup-foreground) shadow-(--lsys-select-popup-shadow)",
107
+ "min-w-[var(--anchor-width)] overflow-hidden rounded-(--lex-select-radius) border",
108
+ "border-(--lex-select-popup-border-color) bg-(--lex-select-popup-background) text-(--lex-select-popup-foreground) shadow-(--lex-select-popup-shadow)",
109
109
  "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
110
- "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
110
+ "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
111
111
  ].join(" "),
112
112
  )
113
113
 
114
114
  export const autocompleteListVariants = cva(
115
- "grid max-h-(--lsys-select-popup-max-height) gap-(--lsys-select-list-gap) overflow-y-auto p-(--lsys-select-list-padding)",
115
+ "grid max-h-(--lex-select-popup-max-height) gap-(--lex-select-list-gap) overflow-y-auto p-(--lex-select-list-padding)",
116
116
  )
117
117
 
118
118
  export const autocompleteItemVariants = cva(
119
119
  [
120
- "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)",
121
- "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",
122
- "data-[highlighted]:bg-(--lsys-select-item-highlight-background) data-[highlighted]:text-(--lsys-select-item-highlight-foreground)",
123
- "data-[selected]:bg-(--lsys-select-item-selected-background) data-[selected]:text-(--lsys-select-item-selected-foreground)",
124
- "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
120
+ "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)",
121
+ "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",
122
+ "data-[highlighted]:bg-(--lex-select-item-highlight-background) data-[highlighted]:text-(--lex-select-item-highlight-foreground)",
123
+ "data-[selected]:bg-(--lex-select-item-selected-background) data-[selected]:text-(--lex-select-item-selected-foreground)",
124
+ "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lex-opacity-disabled)",
125
125
  ].join(" "),
126
126
  )
127
127
 
128
128
  export const autocompleteArrowVariants = cva(
129
- "size-(--lsys-select-arrow-size) rotate-45 border border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background)",
129
+ "size-(--lex-select-arrow-size) rotate-45 border border-(--lex-select-popup-border-color) bg-(--lex-select-popup-background)",
130
130
  )
131
131
 
132
132
  export const autocompleteGroupVariants = cva(
133
- "grid gap-(--lsys-select-group-gap)",
133
+ "grid gap-(--lex-select-group-gap)",
134
134
  )
135
135
 
136
136
  export const autocompleteGroupLabelVariants = cva(
137
- "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)",
137
+ "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)",
138
138
  )
139
139
 
140
140
  export const autocompleteEmptyVariants = cva(
141
- "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
141
+ "px-(--lex-select-item-padding-x) py-(--lex-select-item-padding-y) text-(length:--lex-select-item-font-size) text-(--lex-select-placeholder-color)",
142
142
  )
143
143
 
144
144
  export const autocompleteStatusVariants = cva(
145
- "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
145
+ "px-(--lex-select-item-padding-x) py-(--lex-select-item-padding-y) text-(length:--lex-select-item-font-size) text-(--lex-select-placeholder-color)",
146
146
  )
147
147
 
148
148
  export const autocompleteRowVariants = cva("flex min-w-0 items-center")
@@ -150,5 +150,5 @@ export const autocompleteRowVariants = cva("flex min-w-0 items-center")
150
150
  export const autocompleteCollectionVariants = cva("contents")
151
151
 
152
152
  export const autocompleteSeparatorVariants = cva(
153
- "mx-(--lsys-select-item-padding-x) my-(--lsys-select-group-label-padding-y) h-(--lsys-separator-thickness) bg-(--lsys-separator-color)",
153
+ "mx-(--lex-select-item-padding-x) my-(--lex-select-group-label-padding-y) h-(--lex-separator-thickness) bg-(--lex-separator-color)",
154
154
  )
package/templates/primitives/Avatar/Avatar.variants.ts CHANGED
@@ -8,20 +8,20 @@ import { cva } from "class-variance-authority"
8
8
 
9
9
  export const avatarVariants = cva(
10
10
  [
11
- "inline-flex shrink-0 items-center justify-center overflow-hidden border border-(--lsys-avatar-border-color)",
12
- "bg-(--lsys-avatar-background) text-(--lsys-avatar-foreground)",
13
- "font-(--lsys-avatar-font-weight) leading-(--lsys-avatar-font-line-height)",
11
+ "inline-flex shrink-0 items-center justify-center overflow-hidden border border-(--lex-avatar-border-color)",
12
+ "bg-(--lex-avatar-background) text-(--lex-avatar-foreground)",
13
+ "font-(--lex-avatar-font-weight) leading-(--lex-avatar-font-line-height)",
14
14
  ].join(" "),
15
15
  {
16
16
  variants: {
17
17
  size: {
18
- sm: "size-(--lsys-avatar-size-sm) text-(length:--lsys-avatar-font-size-sm)",
19
- md: "size-(--lsys-avatar-size-md) text-(length:--lsys-avatar-font-size-md)",
20
- lg: "size-(--lsys-avatar-size-lg) text-(length:--lsys-avatar-font-size-lg)",
18
+ sm: "size-(--lex-avatar-size-sm) text-(length:--lex-avatar-font-size-sm)",
19
+ md: "size-(--lex-avatar-size-md) text-(length:--lex-avatar-font-size-md)",
20
+ lg: "size-(--lex-avatar-size-lg) text-(length:--lex-avatar-font-size-lg)",
21
21
  },
22
22
  shape: {
23
- circle: "rounded-(--lsys-avatar-radius-circle)",
24
- square: "rounded-(--lsys-avatar-radius-square)",
23
+ circle: "rounded-(--lex-avatar-radius-circle)",
24
+ square: "rounded-(--lex-avatar-radius-square)",
25
25
  },
26
26
  },
27
27
  defaultVariants: {
@@ -32,9 +32,9 @@ export const avatarVariants = cva(
32
32
  )
33
33
 
34
34
  export const avatarImageVariants = cva(
35
- "size-full object-cover transition-opacity duration-(--lsys-avatar-transition-duration) ease-(--lsys-avatar-transition-easing) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
35
+ "size-full object-cover transition-opacity duration-(--lex-avatar-transition-duration) ease-(--lex-avatar-transition-easing) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
36
36
  )
37
37
 
38
38
  export const avatarFallbackVariants = cva(
39
- "flex size-full items-center justify-center bg-(--lsys-avatar-fallback-background) text-(--lsys-avatar-fallback-foreground)",
39
+ "flex size-full items-center justify-center bg-(--lex-avatar-fallback-background) text-(--lex-avatar-fallback-foreground)",
40
40
  )
package/templates/primitives/Badge/Badge.variants.ts CHANGED
@@ -7,40 +7,40 @@
7
7
  import { cva } from "class-variance-authority"
8
8
 
9
9
  const neutralSolid =
10
- "border-(--lsys-badge-neutral-border-color) bg-(--lsys-badge-neutral-background) text-(--lsys-badge-neutral-foreground)"
10
+ "border-(--lex-badge-neutral-border-color) bg-(--lex-badge-neutral-background) text-(--lex-badge-neutral-foreground)"
11
11
 
12
12
  const neutralOutline =
13
- "border-(--lsys-badge-neutral-border-color) bg-(--lsys-badge-outline-background) text-(--lsys-badge-neutral-foreground)"
13
+ "border-(--lex-badge-neutral-border-color) bg-(--lex-badge-outline-background) text-(--lex-badge-neutral-foreground)"
14
14
 
15
15
  const primarySolid =
16
- "border-(--lsys-badge-primary-border-color) bg-(--lsys-badge-primary-background) text-(--lsys-badge-primary-foreground)"
16
+ "border-(--lex-badge-primary-border-color) bg-(--lex-badge-primary-background) text-(--lex-badge-primary-foreground)"
17
17
 
18
18
  const primaryOutline =
19
- "border-(--lsys-badge-primary-border-color) bg-(--lsys-badge-outline-background) text-(--lsys-badge-primary-border-color)"
19
+ "border-(--lex-badge-primary-border-color) bg-(--lex-badge-outline-background) text-(--lex-badge-primary-border-color)"
20
20
 
21
21
  const dangerSolid =
22
- "border-(--lsys-badge-danger-border-color) bg-(--lsys-badge-danger-background) text-(--lsys-badge-danger-foreground)"
22
+ "border-(--lex-badge-danger-border-color) bg-(--lex-badge-danger-background) text-(--lex-badge-danger-foreground)"
23
23
 
24
24
  const dangerOutline =
25
- "border-(--lsys-badge-danger-border-color) bg-(--lsys-badge-outline-background) text-(--lsys-badge-danger-border-color)"
25
+ "border-(--lex-badge-danger-border-color) bg-(--lex-badge-outline-background) text-(--lex-badge-danger-border-color)"
26
26
 
27
27
  const successSolid =
28
- "border-(--lsys-color-feedback-success-foreground) bg-(--lsys-color-feedback-success-background) text-(--lsys-color-feedback-success-foreground)"
28
+ "border-(--lex-color-feedback-success-foreground) bg-(--lex-color-feedback-success-background) text-(--lex-color-feedback-success-foreground)"
29
29
 
30
30
  const successOutline =
31
- "border-(--lsys-color-feedback-success-foreground) bg-(--lsys-badge-outline-background) text-(--lsys-color-feedback-success-foreground)"
31
+ "border-(--lex-color-feedback-success-foreground) bg-(--lex-badge-outline-background) text-(--lex-color-feedback-success-foreground)"
32
32
 
33
33
  const warningSolid =
34
- "border-(--lsys-color-feedback-warning-foreground) bg-(--lsys-color-feedback-warning-background) text-(--lsys-color-feedback-warning-foreground)"
34
+ "border-(--lex-color-feedback-warning-foreground) bg-(--lex-color-feedback-warning-background) text-(--lex-color-feedback-warning-foreground)"
35
35
 
36
36
  const warningOutline =
37
- "border-(--lsys-color-feedback-warning-foreground) bg-(--lsys-badge-outline-background) text-(--lsys-color-feedback-warning-foreground)"
37
+ "border-(--lex-color-feedback-warning-foreground) bg-(--lex-badge-outline-background) text-(--lex-color-feedback-warning-foreground)"
38
38
 
39
39
  export const badgeVariants = cva(
40
40
  [
41
41
  "inline-flex items-center justify-center whitespace-nowrap border",
42
- "rounded-(--lsys-badge-radius) font-(--lsys-badge-font-weight) leading-(--lsys-badge-font-line-height)",
43
- "transition-colors duration-(--lsys-badge-transition-duration) ease-(--lsys-badge-transition-easing)",
42
+ "rounded-(--lex-badge-radius) font-(--lex-badge-font-weight) leading-(--lex-badge-font-line-height)",
43
+ "transition-colors duration-(--lex-badge-transition-duration) ease-(--lex-badge-transition-easing)",
44
44
  ].join(" "),
45
45
  {
46
46
  variants: {
@@ -56,8 +56,8 @@ export const badgeVariants = cva(
56
56
  outline: "",
57
57
  },
58
58
  size: {
59
- sm: "h-(--lsys-badge-height-sm) px-(--lsys-badge-padding-x-sm) text-(length:--lsys-badge-font-size-sm)",
60
- md: "h-(--lsys-badge-height-md) px-(--lsys-badge-padding-x-md) text-(length:--lsys-badge-font-size-md)",
59
+ sm: "h-(--lex-badge-height-sm) px-(--lex-badge-padding-x-sm) text-(length:--lex-badge-font-size-sm)",
60
+ md: "h-(--lex-badge-height-md) px-(--lex-badge-padding-x-md) text-(length:--lex-badge-font-size-md)",
61
61
  },
62
62
  },
63
63
  compoundVariants: [
package/templates/primitives/Button/Button.variants.ts CHANGED
@@ -10,54 +10,54 @@ import { busyStateClasses, disabledStateClasses } from "@/lib/utils"
10
10
  export const buttonVariants = cva(
11
11
  [
12
12
  "inline-flex items-center justify-center whitespace-nowrap border border-transparent",
13
- "rounded-(--lsys-button-radius) font-(family-name:--lsys-button-font-family) font-(--lsys-button-font-weight)",
14
- "transition-colors duration-(--lsys-button-transition-duration) ease-(--lsys-button-transition-easing)",
15
- "outline-none focus-visible:ring-(length:--lsys-button-focus-ring-width) focus-visible:ring-(--lsys-button-focus-ring-color) focus-visible:ring-offset-(length:--lsys-button-focus-ring-offset) focus-visible:ring-offset-(--lsys-button-focus-ring-offset-color)",
13
+ "rounded-(--lex-button-radius) font-(family-name:--lex-button-font-family) font-(--lex-button-font-weight)",
14
+ "transition-colors duration-(--lex-button-transition-duration) ease-(--lex-button-transition-easing)",
15
+ "outline-none focus-visible:ring-(length:--lex-button-focus-ring-width) focus-visible:ring-(--lex-button-focus-ring-color) focus-visible:ring-offset-(length:--lex-button-focus-ring-offset) focus-visible:ring-offset-(--lex-button-focus-ring-offset-color)",
16
16
  disabledStateClasses,
17
17
  busyStateClasses,
18
- "text-(length:--lsys-button-font-size-md)",
19
- "leading-(--lsys-button-font-line-height)",
20
- "tracking-(--lsys-button-font-letter-spacing)",
18
+ "text-(length:--lex-button-font-size-md)",
19
+ "leading-(--lex-button-font-line-height)",
20
+ "tracking-(--lex-button-font-letter-spacing)",
21
21
  ].join(" "),
22
22
  {
23
23
  variants: {
24
24
  variant: {
25
25
  primary:
26
- "border-(--lsys-button-primary-border-color) bg-(--lsys-button-primary-background) text-(--lsys-button-primary-foreground) hover:bg-(--lsys-button-primary-hover-background)",
26
+ "border-(--lex-button-primary-border-color) bg-(--lex-button-primary-background) text-(--lex-button-primary-foreground) hover:bg-(--lex-button-primary-hover-background)",
27
27
  secondary:
28
- "border-(--lsys-button-secondary-border-color) bg-(--lsys-button-secondary-background) text-(--lsys-button-secondary-foreground) hover:bg-(--lsys-button-secondary-hover-background)",
28
+ "border-(--lex-button-secondary-border-color) bg-(--lex-button-secondary-background) text-(--lex-button-secondary-foreground) hover:bg-(--lex-button-secondary-hover-background)",
29
29
  ghost:
30
- "border-transparent bg-transparent text-(--lsys-button-secondary-foreground) hover:bg-(--lsys-button-secondary-hover-background)",
30
+ "border-transparent bg-transparent text-(--lex-button-secondary-foreground) hover:bg-(--lex-button-secondary-hover-background)",
31
31
  outline:
32
- "border-(--lsys-button-secondary-border-color) bg-transparent text-(--lsys-button-secondary-foreground) hover:bg-(--lsys-button-secondary-hover-background)",
32
+ "border-(--lex-button-secondary-border-color) bg-transparent text-(--lex-button-secondary-foreground) hover:bg-(--lex-button-secondary-hover-background)",
33
33
  danger:
34
- "border-(--lsys-button-danger-border-color) bg-(--lsys-button-danger-background) text-(--lsys-button-danger-foreground) hover:bg-(--lsys-button-danger-hover-background)",
34
+ "border-(--lex-button-danger-border-color) bg-(--lex-button-danger-background) text-(--lex-button-danger-foreground) hover:bg-(--lex-button-danger-hover-background)",
35
35
  },
36
36
  size: {
37
37
  xs: [
38
- "h-(--lsys-button-height-xs)",
39
- "px-(--lsys-button-padding-x-xs)",
40
- "text-(length:--lsys-button-font-size-xs)",
38
+ "h-(--lex-button-height-xs)",
39
+ "px-(--lex-button-padding-x-xs)",
40
+ "text-(length:--lex-button-font-size-xs)",
41
41
  ],
42
42
  sm: [
43
- "h-(--lsys-button-height-sm)",
44
- "px-(--lsys-button-padding-x-sm)",
45
- "text-(length:--lsys-button-font-size-sm)",
43
+ "h-(--lex-button-height-sm)",
44
+ "px-(--lex-button-padding-x-sm)",
45
+ "text-(length:--lex-button-font-size-sm)",
46
46
  ],
47
47
  md: [
48
- "h-(--lsys-button-height-md)",
49
- "px-(--lsys-button-padding-x-md)",
50
- "text-(length:--lsys-button-font-size-md)",
48
+ "h-(--lex-button-height-md)",
49
+ "px-(--lex-button-padding-x-md)",
50
+ "text-(length:--lex-button-font-size-md)",
51
51
  ],
52
52
  lg: [
53
- "h-(--lsys-button-height-lg)",
54
- "px-(--lsys-button-padding-x-lg)",
55
- "text-(length:--lsys-button-font-size-lg)",
53
+ "h-(--lex-button-height-lg)",
54
+ "px-(--lex-button-padding-x-lg)",
55
+ "text-(length:--lex-button-font-size-lg)",
56
56
  ],
57
57
  xl: [
58
- "h-(--lsys-button-height-xl)",
59
- "px-(--lsys-button-padding-x-xl)",
60
- "text-(length:--lsys-button-font-size-xl)",
58
+ "h-(--lex-button-height-xl)",
59
+ "px-(--lex-button-padding-x-xl)",
60
+ "text-(length:--lex-button-font-size-xl)",
61
61
  ],
62
62
  },
63
63
  },
package/templates/primitives/Card/Card.tsx CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
 
7
7
  import type {
8
+ CardActionProps,
8
9
  CardContentProps,
9
10
  CardDescriptionProps,
10
11
  CardFooterProps,
@@ -13,6 +14,7 @@ import type {
13
14
  CardTitleProps,
14
15
  } from "./Card.types"
15
16
  import {
17
+ cardActionClassName,
16
18
  cardContentClassName,
17
19
  cardDescriptionClassName,
18
20
  cardFooterClassName,
@@ -82,4 +84,20 @@ const CardFooter = ({ ref, className, ...props }: CardFooterProps) => {
82
84
 
83
85
  CardFooter.displayName = "CardFooter"
84
86
 
85
- export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
87
+ const CardAction = ({ ref, className, ...props }: CardActionProps) => {
88
+ return (
89
+ <div ref={ref} className={cn(cardActionClassName, className)} {...props} />
90
+ )
91
+ }
92
+
93
+ CardAction.displayName = "CardAction"
94
+
95
+ export {
96
+ Card,
97
+ CardHeader,
98
+ CardTitle,
99
+ CardDescription,
100
+ CardContent,
101
+ CardFooter,
102
+ CardAction,
103
+ }
package/templates/primitives/Card/Card.types.ts CHANGED
@@ -52,3 +52,4 @@ export interface CardDescriptionProps extends Omit<
52
52
 
53
53
  export type CardContentProps = CardSectionProps
54
54
  export type CardFooterProps = CardSectionProps
55
+ export type CardActionProps = CardSectionProps