@dalexto/lexsys-registry 0.0.2 → 0.0.4

package/templates/primitives/NumberField/NumberField.variants.ts

@@ -8,22 +8,22 @@ import { cva } from "class-variance-authority"
 import { disabledStateClasses } from "@/lib/utils"
 
 export const numberFieldVariants = cva(
-  "grid gap-(--lsys-number-field-gap) text-(--lsys-number-field-foreground) data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  "grid gap-(--lex-number-field-gap) text-(--lex-number-field-foreground) data-[disabled]:opacity-(--lex-opacity-disabled)",
 )
 
 export const numberFieldGroupVariants = cva(
   [
-    "inline-flex w-full min-w-0 items-stretch overflow-hidden rounded-(--lsys-number-field-radius)",
-    "border border-(--lsys-number-field-border-color) bg-(--lsys-number-field-background)",
-    "transition-colors duration-(--lsys-number-field-transition-duration) ease-(--lsys-number-field-transition-easing)",
-    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+    "inline-flex w-full min-w-0 items-stretch overflow-hidden rounded-(--lex-number-field-radius)",
+    "border border-(--lex-number-field-border-color) bg-(--lex-number-field-background)",
+    "transition-colors duration-(--lex-number-field-transition-duration) ease-(--lex-number-field-transition-easing)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "h-(--lsys-number-field-height-sm)",
-        md: "h-(--lsys-number-field-height-md)",
-        lg: "h-(--lsys-number-field-height-lg)",
+        sm: "h-(--lex-number-field-height-sm)",
+        md: "h-(--lex-number-field-height-md)",
+        lg: "h-(--lex-number-field-height-lg)",
       },
     },
     defaultVariants: {
@@ -34,19 +34,19 @@ export const numberFieldGroupVariants = cva(
 
 export const numberFieldInputVariants = cva(
   [
-    "min-w-0 flex-1 border-0 bg-transparent text-(--lsys-number-field-input-foreground)",
-    "font-(family-name:--lsys-number-field-input-font-family) font-(--lsys-number-field-input-font-weight) leading-(--lsys-number-field-input-font-line-height) tracking-(--lsys-number-field-input-font-letter-spacing)",
-    "placeholder:text-(--lsys-number-field-input-placeholder-color)",
-    "outline-none focus-visible:ring-(length:--lsys-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-number-field-focus-ring-color)",
-    "aria-invalid:ring-(length:--lsys-number-field-invalid-ring-width) aria-invalid:ring-inset aria-invalid:ring-(--lsys-number-field-invalid-ring-color) data-[invalid]:ring-(length:--lsys-number-field-invalid-ring-width) data-[invalid]:ring-inset data-[invalid]:ring-(--lsys-number-field-invalid-ring-color)",
+    "min-w-0 flex-1 border-0 bg-transparent text-(--lex-number-field-input-foreground)",
+    "font-(family-name:--lex-number-field-input-font-family) font-(--lex-number-field-input-font-weight) leading-(--lex-number-field-input-font-line-height) tracking-(--lex-number-field-input-font-letter-spacing)",
+    "placeholder:text-(--lex-number-field-input-placeholder-color)",
+    "outline-none focus-visible:ring-(length:--lex-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-number-field-focus-ring-color)",
+    "aria-invalid:ring-(length:--lex-number-field-invalid-ring-width) aria-invalid:ring-inset aria-invalid:ring-(--lex-number-field-invalid-ring-color) data-[invalid]:ring-(length:--lex-number-field-invalid-ring-width) data-[invalid]:ring-inset data-[invalid]:ring-(--lex-number-field-invalid-ring-color)",
     "disabled:cursor-not-allowed data-[disabled]:cursor-not-allowed",
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "px-(--lsys-number-field-input-padding-x-sm) text-(length:--lsys-number-field-input-font-size-sm)",
-        md: "px-(--lsys-number-field-input-padding-x-md) text-(length:--lsys-number-field-input-font-size-md)",
-        lg: "px-(--lsys-number-field-input-padding-x-lg) text-(length:--lsys-number-field-input-font-size-lg)",
+        sm: "px-(--lex-number-field-input-padding-x-sm) text-(length:--lex-number-field-input-font-size-sm)",
+        md: "px-(--lex-number-field-input-padding-x-md) text-(length:--lex-number-field-input-font-size-md)",
+        lg: "px-(--lex-number-field-input-padding-x-lg) text-(length:--lex-number-field-input-font-size-lg)",
       },
     },
     defaultVariants: {
@@ -57,10 +57,10 @@ export const numberFieldInputVariants = cva(
 
 export const numberFieldButtonVariants = cva(
   [
-    "inline-flex shrink-0 select-none items-center justify-center border-(--lsys-number-field-stepper-border-color)",
-    "bg-(--lsys-number-field-stepper-background) text-(--lsys-number-field-stepper-foreground)",
-    "font-(--lsys-number-field-stepper-font-weight) transition-colors duration-(--lsys-number-field-transition-duration) ease-(--lsys-number-field-transition-easing)",
-    "hover:bg-(--lsys-number-field-stepper-hover-background) focus-visible:outline-none focus-visible:ring-(length:--lsys-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-number-field-focus-ring-color)",
+    "inline-flex shrink-0 select-none items-center justify-center border-(--lex-number-field-stepper-border-color)",
+    "bg-(--lex-number-field-stepper-background) text-(--lex-number-field-stepper-foreground)",
+    "font-(--lex-number-field-stepper-font-weight) transition-colors duration-(--lex-number-field-transition-duration) ease-(--lex-number-field-transition-easing)",
+    "hover:bg-(--lex-number-field-stepper-hover-background) focus-visible:outline-none focus-visible:ring-(length:--lex-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-number-field-focus-ring-color)",
     "disabled:cursor-not-allowed",
     disabledStateClasses,
   ].join(" "),
@@ -71,9 +71,9 @@ export const numberFieldButtonVariants = cva(
         increment: "border-l",
       },
       size: {
-        sm: "w-(--lsys-number-field-stepper-width-sm) text-(length:--lsys-number-field-stepper-font-size-sm)",
-        md: "w-(--lsys-number-field-stepper-width-md) text-(length:--lsys-number-field-stepper-font-size-md)",
-        lg: "w-(--lsys-number-field-stepper-width-lg) text-(length:--lsys-number-field-stepper-font-size-lg)",
+        sm: "w-(--lex-number-field-stepper-width-sm) text-(length:--lex-number-field-stepper-font-size-sm)",
+        md: "w-(--lex-number-field-stepper-width-md) text-(length:--lex-number-field-stepper-font-size-md)",
+        lg: "w-(--lex-number-field-stepper-width-lg) text-(length:--lex-number-field-stepper-font-size-lg)",
       },
     },
     defaultVariants: {
@@ -84,9 +84,9 @@ export const numberFieldButtonVariants = cva(
 )
 
 export const numberFieldScrubAreaVariants = cva(
-  "w-fit cursor-ew-resize text-(length:--lsys-number-field-scrub-font-size) font-(--lsys-number-field-scrub-font-weight) text-(--lsys-number-field-scrub-foreground)",
+  "w-fit cursor-ew-resize text-(length:--lex-number-field-scrub-font-size) font-(--lex-number-field-scrub-font-weight) text-(--lex-number-field-scrub-foreground)",
 )
 
 export const numberFieldScrubAreaCursorVariants = cva(
-  "size-(--lsys-number-field-scrub-cursor-size) rounded-(--lsys-number-field-scrub-cursor-radius) bg-(--lsys-number-field-scrub-cursor-background)",
+  "size-(--lex-number-field-scrub-cursor-size) rounded-(--lex-number-field-scrub-cursor-radius) bg-(--lex-number-field-scrub-cursor-background)",
 )

package/templates/primitives/OtpField/OtpField.variants.ts

@@ -9,19 +9,19 @@ import { disabledStateClasses, invalidStateClasses } from "@/lib/utils"
 
 export const otpFieldVariants = cva(
   [
-    "inline-flex items-center gap-(--lsys-input-padding-x-sm) text-(--lsys-field-foreground)",
-    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+    "inline-flex items-center gap-(--lex-input-padding-x-sm) text-(--lex-field-foreground)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
   ].join(" "),
 )
 
 export const otpFieldInputVariants = cva(
   [
-    "flex shrink-0 items-center justify-center border bg-(--lsys-input-background) text-center text-(--lsys-input-foreground)",
-    "rounded-(--lsys-input-radius) border-(--lsys-input-border-color)",
-    "font-(family-name:--lsys-input-font-family) font-(--lsys-input-font-weight) leading-(--lsys-input-font-line-height) tracking-(--lsys-input-font-letter-spacing)",
-    "transition-colors duration-(--lsys-input-transition-duration) ease-(--lsys-input-transition-easing)",
-    "outline-none focus-visible:border-(--lsys-input-focus-border-color) focus-visible:ring-(length:--lsys-input-focus-ring-width) focus-visible:ring-(--lsys-input-focus-ring-color) focus-visible:ring-offset-(length:--lsys-input-focus-ring-offset) focus-visible:ring-offset-(--lsys-input-focus-ring-offset-color)",
-    "data-[filled]:border-(--lsys-input-focus-border-color)",
+    "flex shrink-0 items-center justify-center border bg-(--lex-input-background) text-center text-(--lex-input-foreground)",
+    "rounded-(--lex-input-radius) border-(--lex-input-border-color)",
+    "font-(family-name:--lex-input-font-family) font-(--lex-input-font-weight) leading-(--lex-input-font-line-height) tracking-(--lex-input-font-letter-spacing)",
+    "transition-colors duration-(--lex-input-transition-duration) ease-(--lex-input-transition-easing)",
+    "outline-none focus-visible:border-(--lex-input-focus-border-color) focus-visible:ring-(length:--lex-input-focus-ring-width) focus-visible:ring-(--lex-input-focus-ring-color) focus-visible:ring-offset-(length:--lex-input-focus-ring-offset) focus-visible:ring-offset-(--lex-input-focus-ring-offset-color)",
+    "data-[filled]:border-(--lex-input-focus-border-color)",
     "disabled:cursor-not-allowed",
     disabledStateClasses,
     invalidStateClasses,
@@ -29,9 +29,9 @@ export const otpFieldInputVariants = cva(
   {
     variants: {
       size: {
-        sm: "size-(--lsys-input-height-sm) text-(length:--lsys-input-font-size-sm)",
-        md: "size-(--lsys-input-height-md) text-(length:--lsys-input-font-size-md)",
-        lg: "size-(--lsys-input-height-lg) text-(length:--lsys-input-font-size-lg)",
+        sm: "size-(--lex-input-height-sm) text-(length:--lex-input-font-size-sm)",
+        md: "size-(--lex-input-height-md) text-(length:--lex-input-font-size-md)",
+        lg: "size-(--lex-input-height-lg) text-(length:--lex-input-font-size-lg)",
       },
     },
     defaultVariants: {
@@ -41,5 +41,5 @@ export const otpFieldInputVariants = cva(
 )
 
 export const otpFieldSeparatorVariants = cva(
-  "select-none text-(length:--lsys-input-font-size-md) font-(--lsys-input-font-weight) text-(--lsys-input-placeholder-color)",
+  "select-none text-(length:--lex-input-font-size-md) font-(--lex-input-font-weight) text-(--lex-input-placeholder-color)",
 )

package/templates/primitives/Popover/Popover.variants.ts

@@ -9,60 +9,58 @@ import { disabledStateClasses } from "@/lib/utils"
 
 export const popoverTriggerVariants = cva(
   [
-    "inline-flex h-(--lsys-popover-trigger-height) items-center justify-center rounded-(--lsys-popover-trigger-radius)",
-    "border border-(--lsys-popover-trigger-border-color) bg-(--lsys-popover-trigger-background) px-(--lsys-popover-trigger-padding-x) text-(--lsys-popover-trigger-foreground)",
-    "text-(length:--lsys-popover-trigger-font-size) font-(--lsys-popover-trigger-font-weight) leading-(--lsys-popover-trigger-font-line-height)",
-    "transition-colors duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
-    "outline-none hover:bg-(--lsys-popover-trigger-hover-background) focus-visible:ring-(length:--lsys-popover-focus-ring-width) focus-visible:ring-(--lsys-popover-focus-ring-color) focus-visible:ring-offset-(length:--lsys-popover-focus-ring-offset) focus-visible:ring-offset-(--lsys-popover-focus-ring-offset-color)",
+    "inline-flex h-(--lex-popover-trigger-height) items-center justify-center rounded-(--lex-popover-trigger-radius)",
+    "border border-(--lex-popover-trigger-border-color) bg-(--lex-popover-trigger-background) px-(--lex-popover-trigger-padding-x) text-(--lex-popover-trigger-foreground)",
+    "text-(length:--lex-popover-trigger-font-size) font-(--lex-popover-trigger-font-weight) leading-(--lex-popover-trigger-font-line-height)",
+    "transition-colors duration-(--lex-popover-transition-duration) ease-(--lex-popover-transition-easing)",
+    "outline-none hover:bg-(--lex-popover-trigger-hover-background) focus-visible:ring-(length:--lex-popover-focus-ring-width) focus-visible:ring-(--lex-popover-focus-ring-color) focus-visible:ring-offset-(length:--lex-popover-focus-ring-offset) focus-visible:ring-offset-(--lex-popover-focus-ring-offset-color)",
     disabledStateClasses,
   ].join(" "),
 )
 
 export const popoverBackdropVariants = cva(
   [
-    "fixed inset-0 z-(--lsys-popover-backdrop-z-index) bg-(--lsys-popover-backdrop-background) opacity-(--lsys-popover-backdrop-opacity)",
+    "fixed inset-0 z-(--lex-popover-backdrop-z-index) bg-(--lex-popover-backdrop-background) opacity-(--lex-popover-backdrop-opacity)",
     "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
-    "transition-opacity duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
+    "transition-opacity duration-(--lex-popover-transition-duration) ease-(--lex-popover-transition-easing)",
   ].join(" "),
 )
 
 export const popoverPositionerVariants = cva(
-  "z-(--lsys-popover-positioner-z-index) outline-none data-[anchor-hidden]:hidden",
+  "z-(--lex-popover-positioner-z-index) outline-none data-[anchor-hidden]:hidden",
 )
 
 export const popoverPopupVariants = cva(
   [
-    "grid w-[min(calc(100vw-(var(--lsys-popover-popup-inset)*2)),var(--lsys-popover-popup-max-width))] gap-(--lsys-popover-popup-gap) rounded-(--lsys-popover-popup-radius) border",
-    "border-(--lsys-popover-popup-border-color) bg-(--lsys-popover-popup-background) p-(--lsys-popover-popup-padding) text-(--lsys-popover-popup-foreground) shadow-(--lsys-popover-popup-shadow)",
+    "grid w-[min(calc(100vw-(var(--lex-popover-popup-inset)*2)),var(--lex-popover-popup-max-width))] gap-(--lex-popover-popup-gap) rounded-(--lex-popover-popup-radius) border",
+    "border-(--lex-popover-popup-border-color) bg-(--lex-popover-popup-background) p-(--lex-popover-popup-padding) text-(--lex-popover-popup-foreground) shadow-(--lex-popover-popup-shadow)",
     "outline-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
-    "transition-[opacity,transform] duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
+    "transition-[opacity,transform] duration-(--lex-popover-transition-duration) ease-(--lex-popover-transition-easing)",
   ].join(" "),
 )
 
 export const popoverArrowVariants = cva(
   [
-    "size-(--lsys-popover-arrow-size) rotate-45 border border-(--lsys-popover-popup-border-color) bg-(--lsys-popover-popup-background)",
+    "size-(--lex-popover-arrow-size) rotate-45 border border-(--lex-popover-popup-border-color) bg-(--lex-popover-popup-background)",
     "data-[side=bottom]:-translate-y-1/2 data-[side=left]:translate-x-1/2 data-[side=right]:-translate-x-1/2 data-[side=top]:translate-y-1/2",
   ].join(" "),
 )
 
 export const popoverTitleVariants = cva(
-  "pr-(--lsys-popover-title-padding-end) text-(length:--lsys-popover-title-font-size) font-(--lsys-popover-title-font-weight) leading-(--lsys-popover-title-font-line-height) text-(--lsys-popover-title-foreground)",
+  "pr-(--lex-popover-title-padding-end) text-(length:--lex-popover-title-font-size) font-(--lex-popover-title-font-weight) leading-(--lex-popover-title-font-line-height) text-(--lex-popover-title-foreground)",
 )
 
 export const popoverDescriptionVariants = cva(
-  "text-(length:--lsys-popover-description-font-size) font-(--lsys-popover-description-font-weight) leading-(--lsys-popover-description-font-line-height) text-(--lsys-popover-description-foreground)",
+  "text-(length:--lex-popover-description-font-size) font-(--lex-popover-description-font-weight) leading-(--lex-popover-description-font-line-height) text-(--lex-popover-description-foreground)",
 )
 
 export const popoverCloseVariants = cva(
   [
-    "absolute right-(--lsys-popover-close-inset) top-(--lsys-popover-close-inset) inline-flex size-(--lsys-popover-close-size) items-center justify-center rounded-(--lsys-popover-close-radius)",
-    "text-(--lsys-popover-close-foreground) outline-none transition-colors duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
-    "hover:bg-(--lsys-popover-close-hover-background) focus-visible:ring-(length:--lsys-popover-focus-ring-width) focus-visible:ring-(--lsys-popover-focus-ring-color) focus-visible:ring-offset-(length:--lsys-popover-focus-ring-offset) focus-visible:ring-offset-(--lsys-popover-focus-ring-offset-color)",
+    "absolute right-(--lex-popover-close-inset) top-(--lex-popover-close-inset) inline-flex size-(--lex-popover-close-size) items-center justify-center rounded-(--lex-popover-close-radius)",
+    "text-(--lex-popover-close-foreground) outline-none transition-colors duration-(--lex-popover-transition-duration) ease-(--lex-popover-transition-easing)",
+    "hover:bg-(--lex-popover-close-hover-background) focus-visible:ring-(length:--lex-popover-focus-ring-width) focus-visible:ring-(--lex-popover-focus-ring-color) focus-visible:ring-offset-(length:--lex-popover-focus-ring-offset) focus-visible:ring-offset-(--lex-popover-focus-ring-offset-color)",
     disabledStateClasses,
   ].join(" "),
 )
 
-export const popoverViewportVariants = cva(
-  "grid gap-(--lsys-popover-popup-gap)",
-)
+export const popoverViewportVariants = cva("grid gap-(--lex-popover-popup-gap)")

package/templates/primitives/PreviewCard/PreviewCard.variants.ts

@@ -20,5 +20,5 @@ export const previewCardArrowVariants = popoverArrowVariants
 export const previewCardViewportVariants = popoverViewportVariants
 
 export const previewCardTriggerVariants = cva(
-  "inline-flex outline-none focus-visible:ring-(length:--lsys-popover-focus-ring-width) focus-visible:ring-(--lsys-popover-focus-ring-color)",
+  "inline-flex outline-none focus-visible:ring-(length:--lex-popover-focus-ring-width) focus-visible:ring-(--lex-popover-focus-ring-color)",
 )

package/templates/primitives/Progress/Progress.variants.ts

@@ -7,17 +7,17 @@
 import { cva } from "class-variance-authority"
 
 export const progressVariants = cva(
-  "grid gap-(--lsys-progress-gap) text-(length:--lsys-progress-label-font-size) leading-(--lsys-progress-label-font-line-height) text-(--lsys-progress-label-foreground)",
+  "grid gap-(--lex-progress-gap) text-(length:--lex-progress-label-font-size) leading-(--lex-progress-label-font-line-height) text-(--lex-progress-label-foreground)",
 )
 
 export const progressTrackVariants = cva(
-  "overflow-hidden rounded-(--lsys-progress-track-radius) bg-(--lsys-progress-track-background)",
+  "overflow-hidden rounded-(--lex-progress-track-radius) bg-(--lex-progress-track-background)",
   {
     variants: {
       size: {
-        sm: "h-(--lsys-progress-track-height-sm)",
-        md: "h-(--lsys-progress-track-height-md)",
-        lg: "h-(--lsys-progress-track-height-lg)",
+        sm: "h-(--lex-progress-track-height-sm)",
+        md: "h-(--lex-progress-track-height-md)",
+        lg: "h-(--lex-progress-track-height-lg)",
       },
     },
     defaultVariants: {
@@ -27,13 +27,13 @@ export const progressTrackVariants = cva(
 )
 
 export const progressIndicatorVariants = cva(
-  "h-full bg-(--lsys-progress-indicator-background) transition-transform duration-(--lsys-progress-transition-duration) ease-(--lsys-progress-transition-easing) data-[indeterminate]:animate-pulse",
+  "h-full bg-(--lex-progress-indicator-background) transition-transform duration-(--lex-progress-transition-duration) ease-(--lex-progress-transition-easing) data-[indeterminate]:animate-pulse",
 )
 
 export const progressLabelVariants = cva(
-  "text-(--lsys-progress-label-foreground)",
+  "text-(--lex-progress-label-foreground)",
 )
 
 export const progressValueVariants = cva(
-  "font-(--lsys-meter-value-font-weight) text-(--lsys-meter-value-foreground)",
+  "font-(--lex-meter-value-font-weight) text-(--lex-meter-value-foreground)",
 )

package/templates/primitives/RadioGroup/RadioGroup.variants.ts

@@ -6,7 +6,7 @@
 
 import { cva } from "class-variance-authority"
 
-export const radioGroupVariants = cva("grid gap-(--lsys-radio-group-gap)", {
+export const radioGroupVariants = cva("grid gap-(--lex-radio-group-gap)", {
   variants: {
     orientation: {
       horizontal: "grid-flow-col justify-start",
@@ -20,19 +20,19 @@ export const radioGroupVariants = cva("grid gap-(--lsys-radio-group-gap)", {
 
 export const radioGroupItemVariants = cva(
   [
-    "inline-flex shrink-0 items-center justify-center rounded-(--lsys-radio-group-item-radius) border",
-    "border-(--lsys-radio-group-item-border-color) bg-(--lsys-radio-group-item-background) text-(--lsys-radio-group-item-foreground)",
-    "transition-colors duration-(--lsys-radio-group-transition-duration) ease-(--lsys-radio-group-transition-easing)",
-    "outline-none data-[checked]:border-(--lsys-radio-group-item-checked-border-color)",
-    "data-[focused]:ring-(length:--lsys-radio-group-focus-ring-width) data-[focused]:ring-(--lsys-radio-group-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-radio-group-focus-ring-offset) data-[focused]:ring-offset-(--lsys-radio-group-focus-ring-offset-color)",
-    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+    "inline-flex shrink-0 items-center justify-center rounded-(--lex-radio-group-item-radius) border",
+    "border-(--lex-radio-group-item-border-color) bg-(--lex-radio-group-item-background) text-(--lex-radio-group-item-foreground)",
+    "transition-colors duration-(--lex-radio-group-transition-duration) ease-(--lex-radio-group-transition-easing)",
+    "outline-none data-[checked]:border-(--lex-radio-group-item-checked-border-color)",
+    "data-[focused]:ring-(length:--lex-radio-group-focus-ring-width) data-[focused]:ring-(--lex-radio-group-focus-ring-color) data-[focused]:ring-offset-(length:--lex-radio-group-focus-ring-offset) data-[focused]:ring-offset-(--lex-radio-group-focus-ring-offset-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "size-(--lsys-radio-group-item-size-sm)",
-        md: "size-(--lsys-radio-group-item-size-md)",
-        lg: "size-(--lsys-radio-group-item-size-lg)",
+        sm: "size-(--lex-radio-group-item-size-sm)",
+        md: "size-(--lex-radio-group-item-size-md)",
+        lg: "size-(--lex-radio-group-item-size-lg)",
       },
     },
     defaultVariants: {
@@ -42,15 +42,15 @@ export const radioGroupItemVariants = cva(
 )
 
 export const radioGroupLabelVariants = cva(
-  "inline-flex items-center gap-(--lsys-radio-group-label-gap) text-(length:--lsys-radio-group-label-font-size) font-(--lsys-radio-group-label-font-weight) leading-(--lsys-radio-group-label-font-line-height) text-(--lsys-radio-group-label-foreground)",
+  "inline-flex items-center gap-(--lex-radio-group-label-gap) text-(length:--lex-radio-group-label-font-size) font-(--lex-radio-group-label-font-weight) leading-(--lex-radio-group-label-font-line-height) text-(--lex-radio-group-label-foreground)",
 )
 
 export const radioGroupIndicatorVariants = cva("rounded-full bg-current", {
   variants: {
     size: {
-      sm: "size-(--lsys-radio-group-indicator-size-sm)",
-      md: "size-(--lsys-radio-group-indicator-size-md)",
-      lg: "size-(--lsys-radio-group-indicator-size-lg)",
+      sm: "size-(--lex-radio-group-indicator-size-sm)",
+      md: "size-(--lex-radio-group-indicator-size-md)",
+      lg: "size-(--lex-radio-group-indicator-size-lg)",
     },
   },
   defaultVariants: {

package/templates/primitives/ScrollArea/ScrollArea.variants.ts

@@ -20,9 +20,9 @@ export const scrollAreaScrollbarVariants = cva(
     variants: {
       orientation: {
         vertical:
-          "h-full w-(--lsys-scroll-area-scrollbar-size) border-l border-l-transparent p-(--lsys-scroll-area-scrollbar-padding)",
+          "h-full w-(--lex-scroll-area-scrollbar-size) border-l border-l-transparent p-(--lex-scroll-area-scrollbar-padding)",
         horizontal:
-          "h-(--lsys-scroll-area-scrollbar-size) flex-col border-t border-t-transparent p-(--lsys-scroll-area-scrollbar-padding)",
+          "h-(--lex-scroll-area-scrollbar-size) flex-col border-t border-t-transparent p-(--lex-scroll-area-scrollbar-padding)",
       },
     },
     defaultVariants: {
@@ -32,7 +32,7 @@ export const scrollAreaScrollbarVariants = cva(
 )
 
 export const scrollAreaThumbVariants = cva(
-  "relative flex-1 rounded-(--lsys-scroll-area-thumb-radius) bg-(--lsys-scroll-area-thumb-background)",
+  "relative flex-1 rounded-(--lex-scroll-area-thumb-radius) bg-(--lex-scroll-area-thumb-background)",
 )
 
 export const scrollAreaCornerVariants = cva("bg-transparent")

package/templates/primitives/Select/Select.tsx

@@ -27,21 +27,21 @@ import type {
   SelectValueProps,
 } from "./Select.types"
 import {
-  selectArrowVariants,
-  selectBackdropVariants,
-  selectGroupLabelVariants,
-  selectGroupVariants,
-  selectIconVariants,
-  selectItemIndicatorVariants,
-  selectItemTextVariants,
-  selectItemVariants,
-  selectLabelVariants,
-  selectListVariants,
-  selectPopupVariants,
-  selectPositionerVariants,
-  selectScrollArrowVariants,
+  selectArrowClasses,
+  selectBackdropClasses,
+  selectGroupClasses,
+  selectGroupLabelClasses,
+  selectIconClasses,
+  selectItemClasses,
+  selectItemIndicatorClasses,
+  selectItemTextClasses,
+  selectListClasses,
+  selectPopupClasses,
+  selectPositionerClasses,
+  selectScrollArrowClasses,
   selectTriggerVariants,
-  selectValueVariants,
+  selectValueClasses,
+  selectLabelClasses,
 } from "./Select.variants"
 import { mergeClassName } from "@/lib/utils"
 import { overlayPositionerSideOffset } from "@/lib/utils"
@@ -58,7 +58,7 @@ const SelectLabel = ({ ref, className, ...props }: SelectLabelProps) => {
   return (
     <BaseSelect.Label
       ref={ref}
-      className={mergeClassName(selectLabelVariants(), className)}
+      className={mergeClassName(selectLabelClasses, className)}
       {...props}
     />
   )
@@ -87,7 +87,7 @@ const SelectValue = ({ ref, className, ...props }: SelectValueProps) => {
   return (
     <BaseSelect.Value
       ref={ref}
-      className={mergeClassName(selectValueVariants(), className)}
+      className={mergeClassName(selectValueClasses, className)}
       {...props}
     />
   )
@@ -104,7 +104,7 @@ const SelectIcon = ({
   return (
     <BaseSelect.Icon
       ref={ref}
-      className={mergeClassName(selectIconVariants(), className)}
+      className={mergeClassName(selectIconClasses, className)}
       {...props}
     >
       {children ?? <ChevronDown aria-hidden="true" size={16} />}
@@ -124,7 +124,7 @@ const SelectBackdrop = ({ ref, className, ...props }: SelectBackdropProps) => {
   return (
     <BaseSelect.Backdrop
       ref={ref}
-      className={mergeClassName(selectBackdropVariants(), className)}
+      className={mergeClassName(selectBackdropClasses, className)}
       {...props}
     />
   )
@@ -144,7 +144,7 @@ const SelectPositioner = ({
       ref={ref}
       alignItemWithTrigger={alignItemWithTrigger}
       sideOffset={sideOffset}
-      className={mergeClassName(selectPositionerVariants(), className)}
+      className={mergeClassName(selectPositionerClasses, className)}
       {...props}
     />
   )
@@ -156,7 +156,7 @@ const SelectPopup = ({ ref, className, ...props }: SelectPopupProps) => {
   return (
     <BaseSelect.Popup
       ref={ref}
-      className={mergeClassName(selectPopupVariants(), className)}
+      className={mergeClassName(selectPopupClasses, className)}
       {...props}
     />
   )
@@ -168,7 +168,7 @@ const SelectList = ({ ref, className, ...props }: SelectListProps) => {
   return (
     <BaseSelect.List
       ref={ref}
-      className={mergeClassName(selectListVariants(), className)}
+      className={mergeClassName(selectListClasses, className)}
       {...props}
     />
   )
@@ -180,7 +180,7 @@ const SelectItem = ({ ref, className, ...props }: SelectItemProps) => {
   return (
     <BaseSelect.Item
       ref={ref}
-      className={mergeClassName(selectItemVariants(), className)}
+      className={mergeClassName(selectItemClasses, className)}
       {...props}
     />
   )
@@ -197,7 +197,7 @@ const SelectItemIndicator = ({
   return (
     <BaseSelect.ItemIndicator
       ref={ref}
-      className={mergeClassName(selectItemIndicatorVariants(), className)}
+      className={mergeClassName(selectItemIndicatorClasses, className)}
       {...props}
     >
       {children ?? <Check aria-hidden="true" size={14} />}
@@ -211,7 +211,7 @@ const SelectItemText = ({ ref, className, ...props }: SelectItemTextProps) => {
   return (
     <BaseSelect.ItemText
       ref={ref}
-      className={mergeClassName(selectItemTextVariants(), className)}
+      className={mergeClassName(selectItemTextClasses, className)}
       {...props}
     />
   )
@@ -223,7 +223,7 @@ const SelectArrow = ({ ref, className, ...props }: SelectArrowProps) => {
   return (
     <BaseSelect.Arrow
       ref={ref}
-      className={mergeClassName(selectArrowVariants(), className)}
+      className={mergeClassName(selectArrowClasses, className)}
       {...props}
     />
   )
@@ -240,7 +240,7 @@ const SelectScrollUpArrow = ({
   return (
     <BaseSelect.ScrollUpArrow
       ref={ref}
-      className={mergeClassName(selectScrollArrowVariants(), className)}
+      className={mergeClassName(selectScrollArrowClasses, className)}
       {...props}
     >
       {children ?? <ChevronUp aria-hidden="true" size={16} />}
@@ -259,7 +259,7 @@ const SelectScrollDownArrow = ({
   return (
     <BaseSelect.ScrollDownArrow
       ref={ref}
-      className={mergeClassName(selectScrollArrowVariants(), className)}
+      className={mergeClassName(selectScrollArrowClasses, className)}
       {...props}
     >
       {children ?? <ChevronDown aria-hidden="true" size={16} />}
@@ -273,7 +273,7 @@ const SelectGroup = ({ ref, className, ...props }: SelectGroupProps) => {
   return (
     <BaseSelect.Group
       ref={ref}
-      className={mergeClassName(selectGroupVariants(), className)}
+      className={mergeClassName(selectGroupClasses, className)}
       {...props}
     />
   )
@@ -289,7 +289,7 @@ const SelectGroupLabel = ({
   return (
     <BaseSelect.GroupLabel
       ref={ref}
-      className={mergeClassName(selectGroupLabelVariants(), className)}
+      className={mergeClassName(selectGroupLabelClasses, className)}
       {...props}
     />
   )

package/templates/primitives/Select/Select.types.ts

@@ -9,10 +9,11 @@ import type { Select as BaseSelect } from "@base-ui/react/select"
 
 export type SelectSize = "sm" | "md" | "lg"
 
-export type SelectProps<
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface SelectProps<
   Value = string,
   Multiple extends boolean | undefined = false,
-> = BaseSelect.Root.Props<Value, Multiple>
+> extends BaseSelect.Root.Props<Value, Multiple> {}
 
 export type SelectLabelProps = BaseSelect.Label.Props & {
   ref?: Ref<HTMLDivElement>
@@ -47,9 +48,8 @@ export type SelectListProps = BaseSelect.List.Props
 
 export interface SelectItemProps extends Omit<
   BaseSelect.Item.Props,
-  "className" | "ref"
+  "className"
 > {
-  ref?: Ref<HTMLDivElement>
   className?: BaseSelect.Item.Props["className"]
 }