@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/Card/Card.variants.ts CHANGED
@@ -8,19 +8,19 @@ import { cva } from "class-variance-authority"
8
8
 
9
9
  export const cardVariants = cva(
10
10
  [
11
- "rounded-(--lsys-card-radius) border border-(--lsys-card-border-color)",
12
- "bg-(--lsys-card-background) text-(--lsys-card-foreground) transition-colors",
13
- "duration-(--lsys-card-transition-duration) ease-(--lsys-card-transition-easing)",
11
+ "rounded-(--lex-card-radius) border border-(--lex-card-border-color)",
12
+ "bg-(--lex-card-background) text-(--lex-card-foreground) transition-colors",
13
+ "duration-(--lex-card-transition-duration) ease-(--lex-card-transition-easing)",
14
14
  ].join(" "),
15
15
  {
16
16
  variants: {
17
17
  variant: {
18
18
  surface: "",
19
- muted: "bg-(--lsys-card-muted-background)",
19
+ muted: "bg-(--lex-card-muted-background)",
20
20
  default: "",
21
- outlined: "border-(--lsys-border-strong)",
21
+ outlined: "border-(--lex-border-strong)",
22
22
  elevated:
23
- "border-transparent shadow-(--lsys-elevation-shadow-raised-box-shadow)",
23
+ "border-transparent shadow-(--lex-elevation-shadow-raised-box-shadow)",
24
24
  ghost: "border-transparent bg-transparent shadow-none",
25
25
  },
26
26
  },
@@ -31,16 +31,19 @@ export const cardVariants = cva(
31
31
  )
32
32
 
33
33
  export const cardHeaderClassName =
34
- "grid gap-(--lsys-card-gap-sm) p-(--lsys-card-padding) pb-(--lsys-card-header-padding-bottom)"
34
+ "grid grid-cols-[1fr_auto] items-start gap-x-(--lex-card-gap-md) gap-y-(--lex-card-gap-sm) p-(--lex-card-padding) pb-(--lex-card-header-padding-bottom)"
35
35
 
36
36
  export const cardTitleClassName =
37
- "text-(length:--lsys-card-title-font-size) font-(--lsys-card-title-font-weight) leading-(--lsys-card-title-font-line-height) tracking-(--lsys-card-title-font-letter-spacing) text-(--lsys-card-title-foreground)"
37
+ "col-start-1 text-(length:--lex-card-title-font-size) font-(--lex-card-title-font-weight) leading-(--lex-card-title-font-line-height) tracking-(--lex-card-title-font-letter-spacing) text-(--lex-card-title-foreground)"
38
38
 
39
39
  export const cardDescriptionClassName =
40
- "text-(length:--lsys-card-description-font-size) leading-(--lsys-card-description-font-line-height) text-(--lsys-card-description-foreground)"
40
+ "col-start-1 text-(length:--lex-card-description-font-size) leading-(--lex-card-description-font-line-height) text-(--lex-card-description-foreground)"
41
41
 
42
42
  export const cardContentClassName =
43
- "p-(--lsys-card-padding) pt-(--lsys-card-content-padding-top) text-(length:--lsys-card-content-font-size) leading-(--lsys-card-content-font-line-height)"
43
+ "p-(--lex-card-padding) pt-(--lex-card-content-padding-top) text-(length:--lex-card-content-font-size) leading-(--lex-card-content-font-line-height)"
44
44
 
45
45
  export const cardFooterClassName =
46
- "flex items-center gap-(--lsys-card-gap-md) p-(--lsys-card-padding) pt-(--lsys-card-footer-padding-top)"
46
+ "flex items-center gap-(--lex-card-gap-md) p-(--lex-card-padding) pt-(--lex-card-footer-padding-top)"
47
+
48
+ export const cardActionClassName =
49
+ "col-start-2 row-start-1 row-span-2 flex items-center gap-(--lex-card-gap-sm)"
package/templates/primitives/Checkbox/Checkbox.variants.ts CHANGED
@@ -8,20 +8,20 @@ import { cva } from "class-variance-authority"
8
8
 
9
9
  export const checkboxVariants = cva(
10
10
  [
11
- "inline-flex shrink-0 items-center justify-center rounded-(--lsys-checkbox-radius) border",
12
- "border-(--lsys-checkbox-border-color) bg-(--lsys-checkbox-background) text-(--lsys-checkbox-foreground)",
13
- "transition-colors duration-(--lsys-checkbox-transition-duration) ease-(--lsys-checkbox-transition-easing)",
14
- "outline-none data-[checked]:border-(--lsys-checkbox-checked-border-color) data-[checked]:bg-(--lsys-checkbox-checked-background) data-[checked]:text-(--lsys-checkbox-checked-foreground)",
15
- "data-[indeterminate]:border-(--lsys-checkbox-checked-border-color) data-[indeterminate]:bg-(--lsys-checkbox-checked-background)",
16
- "data-[focused]:ring-(length:--lsys-checkbox-focus-ring-width) data-[focused]:ring-(--lsys-checkbox-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-checkbox-focus-ring-offset) data-[focused]:ring-offset-(--lsys-checkbox-focus-ring-offset-color)",
17
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
11
+ "inline-flex shrink-0 items-center justify-center rounded-(--lex-checkbox-radius) border",
12
+ "border-(--lex-checkbox-border-color) bg-(--lex-checkbox-background) text-(--lex-checkbox-foreground)",
13
+ "transition-colors duration-(--lex-checkbox-transition-duration) ease-(--lex-checkbox-transition-easing)",
14
+ "outline-none data-[checked]:border-(--lex-checkbox-checked-border-color) data-[checked]:bg-(--lex-checkbox-checked-background) data-[checked]:text-(--lex-checkbox-checked-foreground)",
15
+ "data-[indeterminate]:border-(--lex-checkbox-checked-border-color) data-[indeterminate]:bg-(--lex-checkbox-checked-background)",
16
+ "data-[focused]:ring-(length:--lex-checkbox-focus-ring-width) data-[focused]:ring-(--lex-checkbox-focus-ring-color) data-[focused]:ring-offset-(length:--lex-checkbox-focus-ring-offset) data-[focused]:ring-offset-(--lex-checkbox-focus-ring-offset-color)",
17
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
18
18
  ].join(" "),
19
19
  {
20
20
  variants: {
21
21
  size: {
22
- sm: "size-(--lsys-checkbox-size-sm) text-(length:--lsys-checkbox-indicator-font-size-sm)",
23
- md: "size-(--lsys-checkbox-size-md) text-(length:--lsys-checkbox-indicator-font-size-md)",
24
- lg: "size-(--lsys-checkbox-size-lg) text-(length:--lsys-checkbox-indicator-font-size-lg)",
22
+ sm: "size-(--lex-checkbox-size-sm) text-(length:--lex-checkbox-indicator-font-size-sm)",
23
+ md: "size-(--lex-checkbox-size-md) text-(length:--lex-checkbox-indicator-font-size-md)",
24
+ lg: "size-(--lex-checkbox-size-lg) text-(length:--lex-checkbox-indicator-font-size-lg)",
25
25
  },
26
26
  },
27
27
  defaultVariants: {
@@ -30,10 +30,6 @@ export const checkboxVariants = cva(
30
30
  },
31
31
  )
32
32
 
33
- export const checkboxLabelVariants = cva(
34
- "inline-flex items-center gap-(--lsys-checkbox-label-gap) text-(length:--lsys-checkbox-label-font-size) font-(--lsys-checkbox-label-font-weight) leading-(--lsys-checkbox-label-font-line-height) text-(--lsys-checkbox-label-foreground)",
35
- )
36
-
37
33
  export const checkboxIndicatorVariants = cva(
38
- "leading-(--lsys-checkbox-label-font-line-height)",
34
+ "leading-(--lex-checkbox-label-font-line-height)",
39
35
  )
package/templates/primitives/CheckboxGroup/CheckboxGroup.variants.ts CHANGED
@@ -8,8 +8,8 @@ import { cva } from "class-variance-authority"
8
8
 
9
9
  export const checkboxGroupVariants = cva(
10
10
  [
11
- "grid gap-(--lsys-checkbox-label-gap) text-(length:--lsys-checkbox-label-font-size) font-(--lsys-checkbox-label-font-weight) leading-(--lsys-checkbox-label-font-line-height) text-(--lsys-checkbox-label-foreground)",
12
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
11
+ "grid gap-(--lex-checkbox-label-gap) text-(length:--lex-checkbox-label-font-size) font-(--lex-checkbox-label-font-weight) leading-(--lex-checkbox-label-font-line-height) text-(--lex-checkbox-label-foreground)",
12
+ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
13
13
  ].join(" "),
14
14
  {
15
15
  variants: {
package/templates/primitives/Collapsible/Collapsible.variants.ts CHANGED
@@ -8,12 +8,12 @@ import { cva } from "class-variance-authority"
8
8
  import { disabledStateClasses } from "@/lib/utils"
9
9
 
10
10
  export const collapsibleVariants = cva(
11
- "grid rounded-(--lsys-collapsible-radius) text-(--lsys-collapsible-foreground)",
11
+ "grid rounded-(--lex-collapsible-radius) text-(--lex-collapsible-foreground)",
12
12
  {
13
13
  variants: {
14
14
  variant: {
15
15
  surface:
16
- "border border-(--lsys-collapsible-border-color) bg-(--lsys-collapsible-background)",
16
+ "border border-(--lex-collapsible-border-color) bg-(--lex-collapsible-background)",
17
17
  plain: "bg-transparent",
18
18
  },
19
19
  },
@@ -25,20 +25,20 @@ export const collapsibleVariants = cva(
25
25
 
26
26
  export const collapsibleTriggerVariants = cva(
27
27
  [
28
- "flex w-full items-center justify-between gap-(--lsys-collapsible-trigger-gap) px-(--lsys-collapsible-trigger-padding-x) py-(--lsys-collapsible-trigger-padding-y) text-left",
29
- "text-(length:--lsys-collapsible-trigger-font-size) font-(--lsys-collapsible-trigger-font-weight) leading-(--lsys-collapsible-trigger-font-line-height)",
30
- "transition-colors duration-(--lsys-collapsible-transition-duration) ease-(--lsys-collapsible-transition-easing)",
31
- "outline-none hover:bg-(--lsys-collapsible-trigger-background-hover) focus-visible:ring-(length:--lsys-collapsible-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-collapsible-focus-ring-color)",
28
+ "flex w-full items-center justify-between gap-(--lex-collapsible-trigger-gap) px-(--lex-collapsible-trigger-padding-x) py-(--lex-collapsible-trigger-padding-y) text-left",
29
+ "text-(length:--lex-collapsible-trigger-font-size) font-(--lex-collapsible-trigger-font-weight) leading-(--lex-collapsible-trigger-font-line-height)",
30
+ "transition-colors duration-(--lex-collapsible-transition-duration) ease-(--lex-collapsible-transition-easing)",
31
+ "outline-none hover:bg-(--lex-collapsible-trigger-background-hover) focus-visible:ring-(length:--lex-collapsible-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-collapsible-focus-ring-color)",
32
32
  disabledStateClasses,
33
- "[&>svg]:size-(--lsys-collapsible-trigger-icon-size) [&>svg]:transition-transform data-[panel-open]:[&>svg]:rotate-45",
33
+ "[&>svg]:size-(--lex-collapsible-trigger-icon-size) [&>svg]:transition-transform data-[panel-open]:[&>svg]:rotate-45",
34
34
  ].join(" "),
35
35
  )
36
36
 
37
37
  export const collapsiblePanelVariants = cva(
38
38
  [
39
- "overflow-hidden px-(--lsys-collapsible-panel-padding-x) pb-(--lsys-collapsible-panel-padding-bottom)",
40
- "text-(length:--lsys-collapsible-panel-font-size) leading-(--lsys-collapsible-panel-font-line-height) text-(--lsys-collapsible-panel-foreground)",
41
- "transition-[height,opacity] duration-(--lsys-collapsible-transition-duration) ease-(--lsys-collapsible-transition-easing)",
39
+ "overflow-hidden px-(--lex-collapsible-panel-padding-x) pb-(--lex-collapsible-panel-padding-bottom)",
40
+ "text-(length:--lex-collapsible-panel-font-size) leading-(--lex-collapsible-panel-font-line-height) text-(--lex-collapsible-panel-foreground)",
41
+ "transition-[height,opacity] duration-(--lex-collapsible-transition-duration) ease-(--lex-collapsible-transition-easing)",
42
42
  "data-[starting-style]:h-0 data-[starting-style]:opacity-0 data-[ending-style]:h-0 data-[ending-style]:opacity-0",
43
43
  ].join(" "),
44
44
  )
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>