@dalexto/lexsys-registry 0.0.2 → 0.0.3

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"]
 }
 

package/templates/primitives/Select/Select.variants.ts

@@ -6,26 +6,25 @@
 
 import { cva } from "class-variance-authority"
 
-export const selectLabelVariants = cva(
-  "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)",
-)
+export const selectLabelClasses =
+  "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)"
 
 export const selectTriggerVariants = cva(
   [
-    "inline-flex w-full min-w-0 items-center justify-between gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
-    "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
-    "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
-    "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
-    "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)",
-    "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)",
-    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+    "inline-flex w-full min-w-0 items-center justify-between gap-(--lex-select-trigger-gap) rounded-(--lex-select-radius) border",
+    "border-(--lex-select-border-color) bg-(--lex-select-background) text-(--lex-select-foreground)",
+    "font-(family-name:--lex-select-font-family) font-(--lex-select-font-weight) leading-(--lex-select-font-line-height) tracking-(--lex-select-font-letter-spacing)",
+    "transition-colors duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
+    "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)",
+    "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)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
-        md: "h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
-        lg: "h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
+        sm: "h-(--lex-select-height-sm) px-(--lex-select-padding-x-sm) text-(length:--lex-select-font-size-sm)",
+        md: "h-(--lex-select-height-md) px-(--lex-select-padding-x-md) text-(length:--lex-select-font-size-md)",
+        lg: "h-(--lex-select-height-lg) px-(--lex-select-padding-x-lg) text-(length:--lex-select-font-size-lg)",
       },
     },
     defaultVariants: {
@@ -34,61 +33,47 @@ export const selectTriggerVariants = cva(
   },
 )
 
-export const selectValueVariants = cva(
-  "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lsys-select-placeholder-color)",
-)
+export const selectValueClasses =
+  "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lex-select-placeholder-color)"
 
-export const selectIconVariants = cva(
-  "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",
-)
+export const selectIconClasses =
+  "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"
 
-export const selectBackdropVariants = cva(
-  "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",
-)
+export const selectBackdropClasses =
+  "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"
 
-export const selectPositionerVariants = cva(
-  "z-(--lsys-select-positioner-z-index)",
-)
+export const selectPositionerClasses = "z-(--lex-select-positioner-z-index)"
 
-export const selectPopupVariants = cva(
-  [
-    "min-w-[var(--anchor-width)] overflow-hidden rounded-(--lsys-select-radius) border",
-    "border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background) text-(--lsys-select-popup-foreground) shadow-(--lsys-select-popup-shadow)",
-    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
-    "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
-  ].join(" "),
-)
+export const selectPopupClasses = [
+  "min-w-[var(--anchor-width)] overflow-hidden rounded-(--lex-select-radius) border",
+  "border-(--lex-select-popup-border-color) bg-(--lex-select-popup-background) text-(--lex-select-popup-foreground) shadow-(--lex-select-popup-shadow)",
+  "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+  "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
+].join(" ")
 
-export const selectListVariants = cva(
-  "grid max-h-(--lsys-select-popup-max-height) gap-(--lsys-select-list-gap) overflow-y-auto p-(--lsys-select-list-padding)",
-)
+export const selectListClasses =
+  "grid max-h-(--lex-select-popup-max-height) gap-(--lex-select-list-gap) overflow-y-auto p-(--lex-select-list-padding)"
 
-export const selectItemVariants = cva(
-  [
-    "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)",
-    "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",
-    "data-[highlighted]:bg-(--lsys-select-item-highlight-background) data-[highlighted]:text-(--lsys-select-item-highlight-foreground)",
-    "data-[selected]:bg-(--lsys-select-item-selected-background) data-[selected]:text-(--lsys-select-item-selected-foreground)",
-    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
-  ].join(" "),
-)
+export const selectItemClasses = [
+  "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)",
+  "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",
+  "data-[highlighted]:bg-(--lex-select-item-highlight-background) data-[highlighted]:text-(--lex-select-item-highlight-foreground)",
+  "data-[selected]:bg-(--lex-select-item-selected-background) data-[selected]:text-(--lex-select-item-selected-foreground)",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lex-opacity-disabled)",
+].join(" ")
 
-export const selectItemIndicatorVariants = cva(
-  "inline-flex size-(--lsys-select-item-indicator-size) shrink-0 items-center justify-center text-current",
-)
+export const selectItemIndicatorClasses =
+  "inline-flex size-(--lex-select-item-indicator-size) shrink-0 items-center justify-center text-current"
 
-export const selectItemTextVariants = cva("min-w-0 flex-1 truncate")
+export const selectItemTextClasses = "min-w-0 flex-1 truncate"
 
-export const selectArrowVariants = cva(
-  "size-(--lsys-select-arrow-size) rotate-45 border border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background)",
-)
+export const selectArrowClasses =
+  "size-(--lex-select-arrow-size) rotate-45 border border-(--lex-select-popup-border-color) bg-(--lex-select-popup-background)"
 
-export const selectScrollArrowVariants = cva(
-  "flex h-(--lsys-select-scroll-arrow-height) items-center justify-center text-(--lsys-select-icon-foreground)",
-)
+export const selectScrollArrowClasses =
+  "flex h-(--lex-select-scroll-arrow-height) items-center justify-center text-(--lex-select-icon-foreground)"
 
-export const selectGroupVariants = cva("grid gap-(--lsys-select-group-gap)")
+export const selectGroupClasses = "grid gap-(--lex-select-group-gap)"
 
-export const selectGroupLabelVariants = cva(
-  "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)",
-)
+export const selectGroupLabelClasses =
+  "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)"

package/templates/primitives/Separator/Separator.variants.ts

@@ -6,11 +6,11 @@
 
 import { cva } from "class-variance-authority"
 
-export const separatorVariants = cva("shrink-0 bg-(--lsys-separator-color)", {
+export const separatorVariants = cva("shrink-0 bg-(--lex-separator-color)", {
   variants: {
     orientation: {
-      horizontal: "h-(--lsys-separator-thickness) w-full",
-      vertical: "h-full w-(--lsys-separator-thickness)",
+      horizontal: "h-(--lex-separator-thickness) w-full",
+      vertical: "h-full w-(--lex-separator-thickness)",
     },
   },
   defaultVariants: {

package/templates/primitives/Slider/Slider.tsx

@@ -15,13 +15,13 @@ import type {
   SliderValueProps,
 } from "./Slider.types"
 import {
-  sliderControlVariants,
-  sliderIndicatorVariants,
-  sliderLabelVariants,
-  sliderThumbVariants,
-  sliderTrackVariants,
-  sliderValueVariants,
-  sliderVariants,
+  sliderClasses,
+  sliderControlClasses,
+  sliderIndicatorClasses,
+  sliderLabelClasses,
+  sliderThumbClasses,
+  sliderTrackClasses,
+  sliderValueClasses,
 } from "./Slider.variants"
 import { mergeClassName } from "@/lib/utils"
 
@@ -29,7 +29,7 @@ const Slider = ({ ref, className, children, ...props }: SliderProps) => {
   return (
     <BaseSlider.Root
       ref={ref}
-      className={mergeClassName(sliderVariants(), className)}
+      className={mergeClassName(sliderClasses, className)}
       {...props}
     >
       {children}
@@ -46,7 +46,7 @@ const SliderControl = ({
 }: SliderControlProps) => {
   return (
     <BaseSlider.Control
-      className={mergeClassName(sliderControlVariants(), className)}
+      className={mergeClassName(sliderControlClasses, className)}
       {...props}
     >
       {children}
@@ -59,7 +59,7 @@ SliderControl.displayName = "SliderControl"
 const SliderTrack = ({ className, children, ...props }: SliderTrackProps) => {
   return (
     <BaseSlider.Track
-      className={mergeClassName(sliderTrackVariants(), className)}
+      className={mergeClassName(sliderTrackClasses, className)}
       {...props}
     >
       {children}
@@ -72,7 +72,7 @@ SliderTrack.displayName = "SliderTrack"
 const SliderIndicator = ({ className, ...props }: SliderIndicatorProps) => {
   return (
     <BaseSlider.Indicator
-      className={mergeClassName(sliderIndicatorVariants(), className)}
+      className={mergeClassName(sliderIndicatorClasses, className)}
       {...props}
     />
   )
@@ -83,7 +83,7 @@ SliderIndicator.displayName = "SliderIndicator"
 const SliderThumb = ({ className, ...props }: SliderThumbProps) => {
   return (
     <BaseSlider.Thumb
-      className={mergeClassName(sliderThumbVariants(), className)}
+      className={mergeClassName(sliderThumbClasses, className)}
       {...props}
     />
   )
@@ -94,7 +94,7 @@ SliderThumb.displayName = "SliderThumb"
 const SliderLabel = ({ className, ...props }: SliderLabelProps) => {
   return (
     <BaseSlider.Label
-      className={mergeClassName(sliderLabelVariants(), className)}
+      className={mergeClassName(sliderLabelClasses, className)}
       {...props}
     />
   )
@@ -105,7 +105,7 @@ SliderLabel.displayName = "SliderLabel"
 const SliderValue = ({ className, ...props }: SliderValueProps) => {
   return (
     <BaseSlider.Value
-      className={mergeClassName(sliderValueVariants(), className)}
+      className={mergeClassName(sliderValueClasses, className)}
       {...props}
     />
   )

package/templates/primitives/Slider/Slider.variants.ts

@@ -4,35 +4,26 @@
  * Defines visual variants using class composition.
  */
 
-import { cva } from "class-variance-authority"
+export const sliderClasses = "grid gap-(--lex-slider-gap)"
 
-export const sliderVariants = cva("grid gap-(--lsys-slider-gap)")
+export const sliderControlClasses =
+  "relative flex touch-none items-center py-(--lex-slider-control-padding-y) data-[disabled]:opacity-(--lex-opacity-disabled)"
 
-export const sliderControlVariants = cva(
-  "relative flex touch-none items-center py-(--lsys-slider-control-padding-y) data-[disabled]:opacity-(--lsys-opacity-disabled)",
-)
+export const sliderTrackClasses =
+  "relative h-(--lex-slider-track-height) w-full overflow-hidden rounded-(--lex-slider-track-radius) bg-(--lex-slider-track-background)"
 
-export const sliderTrackVariants = cva(
-  "relative h-(--lsys-slider-track-height) w-full overflow-hidden rounded-(--lsys-slider-track-radius) bg-(--lsys-slider-track-background)",
-)
+export const sliderIndicatorClasses =
+  "h-full bg-(--lex-slider-indicator-background)"
 
-export const sliderIndicatorVariants = cva(
-  "h-full bg-(--lsys-slider-indicator-background)",
-)
+export const sliderThumbClasses = [
+  "block size-(--lex-slider-thumb-size) rounded-(--lex-slider-thumb-radius) border border-(--lex-slider-thumb-border-color) bg-(--lex-slider-thumb-background) shadow-sm",
+  "outline-none transition-colors duration-(--lex-slider-transition-duration) ease-(--lex-slider-transition-easing)",
+  "focus-visible:ring-(length:--lex-slider-focus-ring-width) focus-visible:ring-(--lex-slider-focus-ring-color) focus-visible:ring-offset-(length:--lex-slider-focus-ring-offset) focus-visible:ring-offset-(--lex-slider-focus-ring-offset-color)",
+  "data-[disabled]:cursor-not-allowed",
+].join(" ")
 
-export const sliderThumbVariants = cva(
-  [
-    "block size-(--lsys-slider-thumb-size) rounded-(--lsys-slider-thumb-radius) border border-(--lsys-slider-thumb-border-color) bg-(--lsys-slider-thumb-background) shadow-sm",
-    "outline-none transition-colors duration-(--lsys-slider-transition-duration) ease-(--lsys-slider-transition-easing)",
-    "focus-visible:ring-(length:--lsys-slider-focus-ring-width) focus-visible:ring-(--lsys-slider-focus-ring-color) focus-visible:ring-offset-(length:--lsys-slider-focus-ring-offset) focus-visible:ring-offset-(--lsys-slider-focus-ring-offset-color)",
-    "data-[disabled]:cursor-not-allowed",
-  ].join(" "),
-)
+export const sliderLabelClasses =
+  "font-(--lex-meter-label-font-weight) text-(length:--lex-meter-label-font-size) leading-(--lex-meter-label-font-line-height) text-(--lex-meter-label-foreground)"
 
-export const sliderLabelVariants = cva(
-  "font-(--lsys-meter-label-font-weight) text-(length:--lsys-meter-label-font-size) leading-(--lsys-meter-label-font-line-height) text-(--lsys-meter-label-foreground)",
-)
-
-export const sliderValueVariants = cva(
-  "font-(--lsys-meter-value-font-weight) text-(--lsys-meter-value-foreground)",
-)
+export const sliderValueClasses =
+  "font-(--lex-meter-value-font-weight) text-(--lex-meter-value-foreground)"

package/templates/primitives/Switch/Switch.types.ts

@@ -13,7 +13,7 @@ export interface SwitchProps extends Omit<
   BaseSwitch.Root.Props,
   "className" | "children"
 > {
-  ref?: Ref<HTMLElement>
+  ref?: Ref<HTMLButtonElement>
   size?: SwitchSize
   className?: BaseSwitch.Root.Props["className"]
   children?: BaseSwitch.Root.Props["children"]
@@ -23,7 +23,7 @@ export interface SwitchThumbProps extends Omit<
   BaseSwitch.Thumb.Props,
   "className"
 > {
-  ref?: Ref<HTMLElement>
+  ref?: Ref<HTMLSpanElement>
   size?: SwitchSize
   className?: BaseSwitch.Thumb.Props["className"]
 }

package/templates/primitives/Switch/Switch.variants.ts

@@ -8,18 +8,18 @@ import { cva } from "class-variance-authority"
 
 export const switchVariants = cva(
   [
-    "inline-flex shrink-0 cursor-pointer items-center rounded-(--lsys-switch-radius) border border-transparent bg-(--lsys-switch-background) p-(--lsys-switch-padding)",
-    "transition-colors duration-(--lsys-switch-transition-duration) ease-(--lsys-switch-transition-easing)",
-    "outline-none data-[checked]:bg-(--lsys-switch-checked-background)",
-    "data-[focused]:ring-(length:--lsys-switch-focus-ring-width) data-[focused]:ring-(--lsys-switch-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-switch-focus-ring-offset) data-[focused]:ring-offset-(--lsys-switch-focus-ring-offset-color)",
-    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+    "inline-flex shrink-0 cursor-pointer items-center rounded-(--lex-switch-radius) border border-transparent bg-(--lex-switch-background) p-(--lex-switch-padding)",
+    "transition-colors duration-(--lex-switch-transition-duration) ease-(--lex-switch-transition-easing)",
+    "outline-none data-[checked]:bg-(--lex-switch-checked-background)",
+    "data-[focused]:ring-(length:--lex-switch-focus-ring-width) data-[focused]:ring-(--lex-switch-focus-ring-color) data-[focused]:ring-offset-(length:--lex-switch-focus-ring-offset) data-[focused]:ring-offset-(--lex-switch-focus-ring-offset-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "h-(--lsys-switch-height-sm) w-(--lsys-switch-width-sm)",
-        md: "h-(--lsys-switch-height-md) w-(--lsys-switch-width-md)",
-        lg: "h-(--lsys-switch-height-lg) w-(--lsys-switch-width-lg)",
+        sm: "h-(--lex-switch-height-sm) w-(--lex-switch-width-sm)",
+        md: "h-(--lex-switch-height-md) w-(--lex-switch-width-md)",
+        lg: "h-(--lex-switch-height-lg) w-(--lex-switch-width-lg)",
       },
     },
     defaultVariants: {
@@ -30,15 +30,15 @@ export const switchVariants = cva(
 
 export const switchThumbVariants = cva(
   [
-    "block rounded-(--lsys-switch-thumb-radius) bg-(--lsys-switch-thumb-background) shadow-sm ring-0",
-    "transition-transform duration-(--lsys-switch-transition-duration) ease-(--lsys-switch-transition-easing)",
+    "block rounded-(--lex-switch-thumb-radius) bg-(--lex-switch-thumb-background) shadow-sm ring-0",
+    "transition-transform duration-(--lex-switch-transition-duration) ease-(--lex-switch-transition-easing)",
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "size-(--lsys-switch-thumb-size-sm) data-[checked]:translate-x-(--lsys-switch-thumb-translate-sm)",
-        md: "size-(--lsys-switch-thumb-size-md) data-[checked]:translate-x-(--lsys-switch-thumb-translate-md)",
-        lg: "size-(--lsys-switch-thumb-size-lg) data-[checked]:translate-x-(--lsys-switch-thumb-translate-lg)",
+        sm: "size-(--lex-switch-thumb-size-sm) data-[checked]:translate-x-(--lex-switch-thumb-translate-sm)",
+        md: "size-(--lex-switch-thumb-size-md) data-[checked]:translate-x-(--lex-switch-thumb-translate-md)",
+        lg: "size-(--lex-switch-thumb-size-lg) data-[checked]:translate-x-(--lex-switch-thumb-translate-lg)",
       },
     },
     defaultVariants: {

package/templates/primitives/Tabs/Tabs.variants.ts

@@ -7,23 +7,23 @@
 import { cva } from "class-variance-authority"
 import { disabledStateClasses } from "@/lib/utils"
 
-export const tabsRootVariants = cva("grid gap-(--lsys-tabs-gap)")
+export const tabsRootVariants = cva("grid gap-(--lex-tabs-gap)")
 
 export const tabsListVariants = cva(
-  "inline-flex w-fit items-center rounded-(--lsys-tabs-list-radius) bg-(--lsys-tabs-list-background) p-(--lsys-tabs-list-padding)",
+  "inline-flex w-fit items-center rounded-(--lex-tabs-list-radius) bg-(--lex-tabs-list-background) p-(--lex-tabs-list-padding)",
 )
 
 export const tabsTabVariants = cva(
   [
-    "inline-flex items-center justify-center rounded-(--lsys-tabs-tab-radius) px-(--lsys-tabs-tab-padding-x) py-(--lsys-tabs-tab-padding-y)",
-    "text-(length:--lsys-tabs-tab-font-size) font-(--lsys-tabs-tab-font-weight) leading-(--lsys-tabs-tab-font-line-height) text-(--lsys-tabs-tab-foreground)",
-    "transition-colors duration-(--lsys-tabs-transition-duration) ease-(--lsys-tabs-transition-easing)",
-    "outline-none data-[active]:bg-(--lsys-tabs-tab-active-background) data-[active]:text-(--lsys-tabs-tab-active-foreground) data-[active]:shadow-sm",
-    "focus-visible:ring-(length:--lsys-tabs-focus-ring-width) focus-visible:ring-(--lsys-tabs-focus-ring-color)",
+    "inline-flex items-center justify-center rounded-(--lex-tabs-tab-radius) px-(--lex-tabs-tab-padding-x) py-(--lex-tabs-tab-padding-y)",
+    "text-(length:--lex-tabs-tab-font-size) font-(--lex-tabs-tab-font-weight) leading-(--lex-tabs-tab-font-line-height) text-(--lex-tabs-tab-foreground)",
+    "transition-colors duration-(--lex-tabs-transition-duration) ease-(--lex-tabs-transition-easing)",
+    "outline-none data-[active]:bg-(--lex-tabs-tab-active-background) data-[active]:text-(--lex-tabs-tab-active-foreground) data-[active]:shadow-sm",
+    "focus-visible:ring-(length:--lex-tabs-focus-ring-width) focus-visible:ring-(--lex-tabs-focus-ring-color)",
     disabledStateClasses,
   ].join(" "),
 )
 
 export const tabsPanelVariants = cva(
-  "text-(length:--lsys-tabs-panel-font-size) leading-(--lsys-tabs-panel-font-line-height) text-(--lsys-tabs-panel-foreground) outline-none focus-visible:ring-(length:--lsys-tabs-focus-ring-width) focus-visible:ring-(--lsys-tabs-focus-ring-color)",
+  "text-(length:--lex-tabs-panel-font-size) leading-(--lex-tabs-panel-font-line-height) text-(--lex-tabs-panel-foreground) outline-none focus-visible:ring-(length:--lex-tabs-focus-ring-width) focus-visible:ring-(--lex-tabs-focus-ring-color)",
 )