@dalexto/lexsys-registry 0.0.2 → 0.0.3

package/templates/primitives/Autocomplete/Autocomplete.variants.ts

@@ -9,20 +9,20 @@ import { disabledStateClasses } from "@/lib/utils"
 
 export const autocompleteTriggerVariants = 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: {
@@ -33,20 +33,20 @@ export const autocompleteTriggerVariants = cva(
 
 export const autocompleteInputGroupVariants = cva(
   [
-    "inline-flex w-full min-w-0 items-center 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 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: {
@@ -57,18 +57,18 @@ export const autocompleteInputGroupVariants = cva(
 
 export const autocompleteInputVariants = cva(
   [
-    "min-w-0 flex-1 border-0 bg-transparent text-(--lsys-select-foreground) outline-none",
-    "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
-    "placeholder:text-(--lsys-select-placeholder-color)",
+    "min-w-0 flex-1 border-0 bg-transparent text-(--lex-select-foreground) outline-none",
+    "font-(family-name:--lex-select-font-family) font-(--lex-select-font-weight) leading-(--lex-select-font-line-height) tracking-(--lex-select-font-letter-spacing)",
+    "placeholder:text-(--lex-select-placeholder-color)",
     "disabled:cursor-not-allowed",
     disabledStateClasses,
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "text-(length:--lsys-select-font-size-sm)",
-        md: "text-(length:--lsys-select-font-size-md)",
-        lg: "text-(length:--lsys-select-font-size-lg)",
+        sm: "text-(length:--lex-select-font-size-sm)",
+        md: "text-(length:--lex-select-font-size-md)",
+        lg: "text-(length:--lex-select-font-size-lg)",
       },
     },
     defaultVariants: {
@@ -78,71 +78,71 @@ export const autocompleteInputVariants = cva(
 )
 
 export const autocompleteValueVariants = cva(
-  "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lsys-select-placeholder-color)",
+  "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lex-select-placeholder-color)",
 )
 
 export const autocompleteIconVariants = 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",
+  "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 autocompleteClearVariants = cva(
   [
-    "inline-flex size-(--lsys-select-icon-size) shrink-0 items-center justify-center rounded-(--lsys-select-item-radius) text-(--lsys-select-icon-foreground)",
-    "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
-    "hover:bg-(--lsys-select-item-highlight-background) hover:text-(--lsys-select-item-highlight-foreground)",
-    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
+    "inline-flex size-(--lex-select-icon-size) shrink-0 items-center justify-center rounded-(--lex-select-item-radius) text-(--lex-select-icon-foreground)",
+    "transition-colors duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
+    "hover:bg-(--lex-select-item-highlight-background) hover:text-(--lex-select-item-highlight-foreground)",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lex-opacity-disabled)",
   ].join(" "),
 )
 
 export const autocompleteBackdropVariants = 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",
+  "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 autocompletePositionerVariants = cva(
-  "z-(--lsys-select-positioner-z-index)",
+  "z-(--lex-select-positioner-z-index)",
 )
 
 export const autocompletePopupVariants = 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)",
+    "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-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+    "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lex-select-transition-duration) ease-(--lex-select-transition-easing)",
   ].join(" "),
 )
 
 export const autocompleteListVariants = cva(
-  "grid max-h-(--lsys-select-popup-max-height) gap-(--lsys-select-list-gap) overflow-y-auto p-(--lsys-select-list-padding)",
+  "grid max-h-(--lex-select-popup-max-height) gap-(--lex-select-list-gap) overflow-y-auto p-(--lex-select-list-padding)",
 )
 
 export const autocompleteItemVariants = 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)",
+    "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 autocompleteArrowVariants = cva(
-  "size-(--lsys-select-arrow-size) rotate-45 border border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background)",
+  "size-(--lex-select-arrow-size) rotate-45 border border-(--lex-select-popup-border-color) bg-(--lex-select-popup-background)",
 )
 
 export const autocompleteGroupVariants = cva(
-  "grid gap-(--lsys-select-group-gap)",
+  "grid gap-(--lex-select-group-gap)",
 )
 
 export const autocompleteGroupLabelVariants = 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)",
+  "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)",
 )
 
 export const autocompleteEmptyVariants = cva(
-  "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
+  "px-(--lex-select-item-padding-x) py-(--lex-select-item-padding-y) text-(length:--lex-select-item-font-size) text-(--lex-select-placeholder-color)",
 )
 
 export const autocompleteStatusVariants = cva(
-  "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
+  "px-(--lex-select-item-padding-x) py-(--lex-select-item-padding-y) text-(length:--lex-select-item-font-size) text-(--lex-select-placeholder-color)",
 )
 
 export const autocompleteRowVariants = cva("flex min-w-0 items-center")
@@ -150,5 +150,5 @@ export const autocompleteRowVariants = cva("flex min-w-0 items-center")
 export const autocompleteCollectionVariants = cva("contents")
 
 export const autocompleteSeparatorVariants = cva(
-  "mx-(--lsys-select-item-padding-x) my-(--lsys-select-group-label-padding-y) h-(--lsys-separator-thickness) bg-(--lsys-separator-color)",
+  "mx-(--lex-select-item-padding-x) my-(--lex-select-group-label-padding-y) h-(--lex-separator-thickness) bg-(--lex-separator-color)",
 )

package/templates/primitives/Avatar/Avatar.variants.ts

@@ -8,20 +8,20 @@ import { cva } from "class-variance-authority"
 
 export const avatarVariants = cva(
   [
-    "inline-flex shrink-0 items-center justify-center overflow-hidden border border-(--lsys-avatar-border-color)",
-    "bg-(--lsys-avatar-background) text-(--lsys-avatar-foreground)",
-    "font-(--lsys-avatar-font-weight) leading-(--lsys-avatar-font-line-height)",
+    "inline-flex shrink-0 items-center justify-center overflow-hidden border border-(--lex-avatar-border-color)",
+    "bg-(--lex-avatar-background) text-(--lex-avatar-foreground)",
+    "font-(--lex-avatar-font-weight) leading-(--lex-avatar-font-line-height)",
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "size-(--lsys-avatar-size-sm) text-(length:--lsys-avatar-font-size-sm)",
-        md: "size-(--lsys-avatar-size-md) text-(length:--lsys-avatar-font-size-md)",
-        lg: "size-(--lsys-avatar-size-lg) text-(length:--lsys-avatar-font-size-lg)",
+        sm: "size-(--lex-avatar-size-sm) text-(length:--lex-avatar-font-size-sm)",
+        md: "size-(--lex-avatar-size-md) text-(length:--lex-avatar-font-size-md)",
+        lg: "size-(--lex-avatar-size-lg) text-(length:--lex-avatar-font-size-lg)",
       },
       shape: {
-        circle: "rounded-(--lsys-avatar-radius-circle)",
-        square: "rounded-(--lsys-avatar-radius-square)",
+        circle: "rounded-(--lex-avatar-radius-circle)",
+        square: "rounded-(--lex-avatar-radius-square)",
       },
     },
     defaultVariants: {
@@ -32,9 +32,9 @@ export const avatarVariants = cva(
 )
 
 export const avatarImageVariants = cva(
-  "size-full object-cover transition-opacity duration-(--lsys-avatar-transition-duration) ease-(--lsys-avatar-transition-easing) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+  "size-full object-cover transition-opacity duration-(--lex-avatar-transition-duration) ease-(--lex-avatar-transition-easing) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
 )
 
 export const avatarFallbackVariants = cva(
-  "flex size-full items-center justify-center bg-(--lsys-avatar-fallback-background) text-(--lsys-avatar-fallback-foreground)",
+  "flex size-full items-center justify-center bg-(--lex-avatar-fallback-background) text-(--lex-avatar-fallback-foreground)",
 )

package/templates/primitives/Badge/Badge.variants.ts

@@ -7,40 +7,40 @@
 import { cva } from "class-variance-authority"
 
 const neutralSolid =
-  "border-(--lsys-badge-neutral-border-color) bg-(--lsys-badge-neutral-background) text-(--lsys-badge-neutral-foreground)"
+  "border-(--lex-badge-neutral-border-color) bg-(--lex-badge-neutral-background) text-(--lex-badge-neutral-foreground)"
 
 const neutralOutline =
-  "border-(--lsys-badge-neutral-border-color) bg-(--lsys-badge-outline-background) text-(--lsys-badge-neutral-foreground)"
+  "border-(--lex-badge-neutral-border-color) bg-(--lex-badge-outline-background) text-(--lex-badge-neutral-foreground)"
 
 const primarySolid =
-  "border-(--lsys-badge-primary-border-color) bg-(--lsys-badge-primary-background) text-(--lsys-badge-primary-foreground)"
+  "border-(--lex-badge-primary-border-color) bg-(--lex-badge-primary-background) text-(--lex-badge-primary-foreground)"
 
 const primaryOutline =
-  "border-(--lsys-badge-primary-border-color) bg-(--lsys-badge-outline-background) text-(--lsys-badge-primary-border-color)"
+  "border-(--lex-badge-primary-border-color) bg-(--lex-badge-outline-background) text-(--lex-badge-primary-border-color)"
 
 const dangerSolid =
-  "border-(--lsys-badge-danger-border-color) bg-(--lsys-badge-danger-background) text-(--lsys-badge-danger-foreground)"
+  "border-(--lex-badge-danger-border-color) bg-(--lex-badge-danger-background) text-(--lex-badge-danger-foreground)"
 
 const dangerOutline =
-  "border-(--lsys-badge-danger-border-color) bg-(--lsys-badge-outline-background) text-(--lsys-badge-danger-border-color)"
+  "border-(--lex-badge-danger-border-color) bg-(--lex-badge-outline-background) text-(--lex-badge-danger-border-color)"
 
 const successSolid =
-  "border-(--lsys-color-feedback-success-foreground) bg-(--lsys-color-feedback-success-background) text-(--lsys-color-feedback-success-foreground)"
+  "border-(--lex-color-feedback-success-foreground) bg-(--lex-color-feedback-success-background) text-(--lex-color-feedback-success-foreground)"
 
 const successOutline =
-  "border-(--lsys-color-feedback-success-foreground) bg-(--lsys-badge-outline-background) text-(--lsys-color-feedback-success-foreground)"
+  "border-(--lex-color-feedback-success-foreground) bg-(--lex-badge-outline-background) text-(--lex-color-feedback-success-foreground)"
 
 const warningSolid =
-  "border-(--lsys-color-feedback-warning-foreground) bg-(--lsys-color-feedback-warning-background) text-(--lsys-color-feedback-warning-foreground)"
+  "border-(--lex-color-feedback-warning-foreground) bg-(--lex-color-feedback-warning-background) text-(--lex-color-feedback-warning-foreground)"
 
 const warningOutline =
-  "border-(--lsys-color-feedback-warning-foreground) bg-(--lsys-badge-outline-background) text-(--lsys-color-feedback-warning-foreground)"
+  "border-(--lex-color-feedback-warning-foreground) bg-(--lex-badge-outline-background) text-(--lex-color-feedback-warning-foreground)"
 
 export const badgeVariants = cva(
   [
     "inline-flex items-center justify-center whitespace-nowrap border",
-    "rounded-(--lsys-badge-radius) font-(--lsys-badge-font-weight) leading-(--lsys-badge-font-line-height)",
-    "transition-colors duration-(--lsys-badge-transition-duration) ease-(--lsys-badge-transition-easing)",
+    "rounded-(--lex-badge-radius) font-(--lex-badge-font-weight) leading-(--lex-badge-font-line-height)",
+    "transition-colors duration-(--lex-badge-transition-duration) ease-(--lex-badge-transition-easing)",
   ].join(" "),
   {
     variants: {
@@ -56,8 +56,8 @@ export const badgeVariants = cva(
         outline: "",
       },
       size: {
-        sm: "h-(--lsys-badge-height-sm) px-(--lsys-badge-padding-x-sm) text-(length:--lsys-badge-font-size-sm)",
-        md: "h-(--lsys-badge-height-md) px-(--lsys-badge-padding-x-md) text-(length:--lsys-badge-font-size-md)",
+        sm: "h-(--lex-badge-height-sm) px-(--lex-badge-padding-x-sm) text-(length:--lex-badge-font-size-sm)",
+        md: "h-(--lex-badge-height-md) px-(--lex-badge-padding-x-md) text-(length:--lex-badge-font-size-md)",
       },
     },
     compoundVariants: [

package/templates/primitives/Button/Button.variants.ts

@@ -10,54 +10,54 @@ import { busyStateClasses, disabledStateClasses } from "@/lib/utils"
 export const buttonVariants = cva(
   [
     "inline-flex items-center justify-center whitespace-nowrap border border-transparent",
-    "rounded-(--lsys-button-radius) font-(family-name:--lsys-button-font-family) font-(--lsys-button-font-weight)",
-    "transition-colors duration-(--lsys-button-transition-duration) ease-(--lsys-button-transition-easing)",
-    "outline-none focus-visible:ring-(length:--lsys-button-focus-ring-width) focus-visible:ring-(--lsys-button-focus-ring-color) focus-visible:ring-offset-(length:--lsys-button-focus-ring-offset) focus-visible:ring-offset-(--lsys-button-focus-ring-offset-color)",
+    "rounded-(--lex-button-radius) font-(family-name:--lex-button-font-family) font-(--lex-button-font-weight)",
+    "transition-colors duration-(--lex-button-transition-duration) ease-(--lex-button-transition-easing)",
+    "outline-none focus-visible:ring-(length:--lex-button-focus-ring-width) focus-visible:ring-(--lex-button-focus-ring-color) focus-visible:ring-offset-(length:--lex-button-focus-ring-offset) focus-visible:ring-offset-(--lex-button-focus-ring-offset-color)",
     disabledStateClasses,
     busyStateClasses,
-    "text-(length:--lsys-button-font-size-md)",
-    "leading-(--lsys-button-font-line-height)",
-    "tracking-(--lsys-button-font-letter-spacing)",
+    "text-(length:--lex-button-font-size-md)",
+    "leading-(--lex-button-font-line-height)",
+    "tracking-(--lex-button-font-letter-spacing)",
   ].join(" "),
   {
     variants: {
       variant: {
         primary:
-          "border-(--lsys-button-primary-border-color) bg-(--lsys-button-primary-background) text-(--lsys-button-primary-foreground) hover:bg-(--lsys-button-primary-hover-background)",
+          "border-(--lex-button-primary-border-color) bg-(--lex-button-primary-background) text-(--lex-button-primary-foreground) hover:bg-(--lex-button-primary-hover-background)",
         secondary:
-          "border-(--lsys-button-secondary-border-color) bg-(--lsys-button-secondary-background) text-(--lsys-button-secondary-foreground) hover:bg-(--lsys-button-secondary-hover-background)",
+          "border-(--lex-button-secondary-border-color) bg-(--lex-button-secondary-background) text-(--lex-button-secondary-foreground) hover:bg-(--lex-button-secondary-hover-background)",
         ghost:
-          "border-transparent bg-transparent text-(--lsys-button-secondary-foreground) hover:bg-(--lsys-button-secondary-hover-background)",
+          "border-transparent bg-transparent text-(--lex-button-secondary-foreground) hover:bg-(--lex-button-secondary-hover-background)",
         outline:
-          "border-(--lsys-button-secondary-border-color) bg-transparent text-(--lsys-button-secondary-foreground) hover:bg-(--lsys-button-secondary-hover-background)",
+          "border-(--lex-button-secondary-border-color) bg-transparent text-(--lex-button-secondary-foreground) hover:bg-(--lex-button-secondary-hover-background)",
         danger:
-          "border-(--lsys-button-danger-border-color) bg-(--lsys-button-danger-background) text-(--lsys-button-danger-foreground) hover:bg-(--lsys-button-danger-hover-background)",
+          "border-(--lex-button-danger-border-color) bg-(--lex-button-danger-background) text-(--lex-button-danger-foreground) hover:bg-(--lex-button-danger-hover-background)",
       },
       size: {
         xs: [
-          "h-(--lsys-button-height-xs)",
-          "px-(--lsys-button-padding-x-xs)",
-          "text-(length:--lsys-button-font-size-xs)",
+          "h-(--lex-button-height-xs)",
+          "px-(--lex-button-padding-x-xs)",
+          "text-(length:--lex-button-font-size-xs)",
         ],
         sm: [
-          "h-(--lsys-button-height-sm)",
-          "px-(--lsys-button-padding-x-sm)",
-          "text-(length:--lsys-button-font-size-sm)",
+          "h-(--lex-button-height-sm)",
+          "px-(--lex-button-padding-x-sm)",
+          "text-(length:--lex-button-font-size-sm)",
         ],
         md: [
-          "h-(--lsys-button-height-md)",
-          "px-(--lsys-button-padding-x-md)",
-          "text-(length:--lsys-button-font-size-md)",
+          "h-(--lex-button-height-md)",
+          "px-(--lex-button-padding-x-md)",
+          "text-(length:--lex-button-font-size-md)",
         ],
         lg: [
-          "h-(--lsys-button-height-lg)",
-          "px-(--lsys-button-padding-x-lg)",
-          "text-(length:--lsys-button-font-size-lg)",
+          "h-(--lex-button-height-lg)",
+          "px-(--lex-button-padding-x-lg)",
+          "text-(length:--lex-button-font-size-lg)",
         ],
         xl: [
-          "h-(--lsys-button-height-xl)",
-          "px-(--lsys-button-padding-x-xl)",
-          "text-(length:--lsys-button-font-size-xl)",
+          "h-(--lex-button-height-xl)",
+          "px-(--lex-button-padding-x-xl)",
+          "text-(length:--lex-button-font-size-xl)",
         ],
       },
     },

package/templates/primitives/Card/Card.tsx

@@ -5,6 +5,7 @@
  */
 
 import type {
+  CardActionProps,
   CardContentProps,
   CardDescriptionProps,
   CardFooterProps,
@@ -13,6 +14,7 @@ import type {
   CardTitleProps,
 } from "./Card.types"
 import {
+  cardActionClassName,
   cardContentClassName,
   cardDescriptionClassName,
   cardFooterClassName,
@@ -82,4 +84,20 @@ const CardFooter = ({ ref, className, ...props }: CardFooterProps) => {
 
 CardFooter.displayName = "CardFooter"
 
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
+const CardAction = ({ ref, className, ...props }: CardActionProps) => {
+  return (
+    <div ref={ref} className={cn(cardActionClassName, className)} {...props} />
+  )
+}
+
+CardAction.displayName = "CardAction"
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardAction,
+}

package/templates/primitives/Card/Card.types.ts

@@ -52,3 +52,4 @@ export interface CardDescriptionProps extends Omit<
 
 export type CardContentProps = CardSectionProps
 export type CardFooterProps = CardSectionProps
+export type CardActionProps = CardSectionProps

package/templates/primitives/Card/Card.variants.ts

@@ -8,19 +8,19 @@ import { cva } from "class-variance-authority"
 
 export const cardVariants = cva(
   [
-    "rounded-(--lsys-card-radius) border border-(--lsys-card-border-color)",
-    "bg-(--lsys-card-background) text-(--lsys-card-foreground) transition-colors",
-    "duration-(--lsys-card-transition-duration) ease-(--lsys-card-transition-easing)",
+    "rounded-(--lex-card-radius) border border-(--lex-card-border-color)",
+    "bg-(--lex-card-background) text-(--lex-card-foreground) transition-colors",
+    "duration-(--lex-card-transition-duration) ease-(--lex-card-transition-easing)",
   ].join(" "),
   {
     variants: {
       variant: {
         surface: "",
-        muted: "bg-(--lsys-card-muted-background)",
+        muted: "bg-(--lex-card-muted-background)",
         default: "",
-        outlined: "border-(--lsys-border-strong)",
+        outlined: "border-(--lex-border-strong)",
         elevated:
-          "border-transparent shadow-(--lsys-elevation-shadow-raised-box-shadow)",
+          "border-transparent shadow-(--lex-elevation-shadow-raised-box-shadow)",
         ghost: "border-transparent bg-transparent shadow-none",
       },
     },
@@ -31,16 +31,19 @@ export const cardVariants = cva(
 )
 
 export const cardHeaderClassName =
-  "grid gap-(--lsys-card-gap-sm) p-(--lsys-card-padding) pb-(--lsys-card-header-padding-bottom)"
+  "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)"
 
 export const cardTitleClassName =
-  "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)"
+  "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)"
 
 export const cardDescriptionClassName =
-  "text-(length:--lsys-card-description-font-size) leading-(--lsys-card-description-font-line-height) text-(--lsys-card-description-foreground)"
+  "col-start-1 text-(length:--lex-card-description-font-size) leading-(--lex-card-description-font-line-height) text-(--lex-card-description-foreground)"
 
 export const cardContentClassName =
-  "p-(--lsys-card-padding) pt-(--lsys-card-content-padding-top) text-(length:--lsys-card-content-font-size) leading-(--lsys-card-content-font-line-height)"
+  "p-(--lex-card-padding) pt-(--lex-card-content-padding-top) text-(length:--lex-card-content-font-size) leading-(--lex-card-content-font-line-height)"
 
 export const cardFooterClassName =
-  "flex items-center gap-(--lsys-card-gap-md) p-(--lsys-card-padding) pt-(--lsys-card-footer-padding-top)"
+  "flex items-center gap-(--lex-card-gap-md) p-(--lex-card-padding) pt-(--lex-card-footer-padding-top)"
+
+export const cardActionClassName =
+  "col-start-2 row-start-1 row-span-2 flex items-center gap-(--lex-card-gap-sm)"

package/templates/primitives/Checkbox/Checkbox.variants.ts

@@ -8,20 +8,20 @@ import { cva } from "class-variance-authority"
 
 export const checkboxVariants = cva(
   [
-    "inline-flex shrink-0 items-center justify-center rounded-(--lsys-checkbox-radius) border",
-    "border-(--lsys-checkbox-border-color) bg-(--lsys-checkbox-background) text-(--lsys-checkbox-foreground)",
-    "transition-colors duration-(--lsys-checkbox-transition-duration) ease-(--lsys-checkbox-transition-easing)",
-    "outline-none data-[checked]:border-(--lsys-checkbox-checked-border-color) data-[checked]:bg-(--lsys-checkbox-checked-background) data-[checked]:text-(--lsys-checkbox-checked-foreground)",
-    "data-[indeterminate]:border-(--lsys-checkbox-checked-border-color) data-[indeterminate]:bg-(--lsys-checkbox-checked-background)",
-    "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)",
-    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+    "inline-flex shrink-0 items-center justify-center rounded-(--lex-checkbox-radius) border",
+    "border-(--lex-checkbox-border-color) bg-(--lex-checkbox-background) text-(--lex-checkbox-foreground)",
+    "transition-colors duration-(--lex-checkbox-transition-duration) ease-(--lex-checkbox-transition-easing)",
+    "outline-none data-[checked]:border-(--lex-checkbox-checked-border-color) data-[checked]:bg-(--lex-checkbox-checked-background) data-[checked]:text-(--lex-checkbox-checked-foreground)",
+    "data-[indeterminate]:border-(--lex-checkbox-checked-border-color) data-[indeterminate]:bg-(--lex-checkbox-checked-background)",
+    "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)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "size-(--lsys-checkbox-size-sm) text-(length:--lsys-checkbox-indicator-font-size-sm)",
-        md: "size-(--lsys-checkbox-size-md) text-(length:--lsys-checkbox-indicator-font-size-md)",
-        lg: "size-(--lsys-checkbox-size-lg) text-(length:--lsys-checkbox-indicator-font-size-lg)",
+        sm: "size-(--lex-checkbox-size-sm) text-(length:--lex-checkbox-indicator-font-size-sm)",
+        md: "size-(--lex-checkbox-size-md) text-(length:--lex-checkbox-indicator-font-size-md)",
+        lg: "size-(--lex-checkbox-size-lg) text-(length:--lex-checkbox-indicator-font-size-lg)",
       },
     },
     defaultVariants: {
@@ -30,10 +30,6 @@ export const checkboxVariants = cva(
   },
 )
 
-export const checkboxLabelVariants = cva(
-  "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)",
-)
-
 export const checkboxIndicatorVariants = cva(
-  "leading-(--lsys-checkbox-label-font-line-height)",
+  "leading-(--lex-checkbox-label-font-line-height)",
 )

package/templates/primitives/CheckboxGroup/CheckboxGroup.variants.ts

@@ -8,8 +8,8 @@ import { cva } from "class-variance-authority"
 
 export const checkboxGroupVariants = cva(
   [
-    "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)",
-    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+    "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)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lex-opacity-disabled)",
   ].join(" "),
   {
     variants: {

package/templates/primitives/Collapsible/Collapsible.variants.ts

@@ -8,12 +8,12 @@ import { cva } from "class-variance-authority"
 import { disabledStateClasses } from "@/lib/utils"
 
 export const collapsibleVariants = cva(
-  "grid rounded-(--lsys-collapsible-radius) text-(--lsys-collapsible-foreground)",
+  "grid rounded-(--lex-collapsible-radius) text-(--lex-collapsible-foreground)",
   {
     variants: {
       variant: {
         surface:
-          "border border-(--lsys-collapsible-border-color) bg-(--lsys-collapsible-background)",
+          "border border-(--lex-collapsible-border-color) bg-(--lex-collapsible-background)",
         plain: "bg-transparent",
       },
     },
@@ -25,20 +25,20 @@ export const collapsibleVariants = cva(
 
 export const collapsibleTriggerVariants = cva(
   [
-    "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",
-    "text-(length:--lsys-collapsible-trigger-font-size) font-(--lsys-collapsible-trigger-font-weight) leading-(--lsys-collapsible-trigger-font-line-height)",
-    "transition-colors duration-(--lsys-collapsible-transition-duration) ease-(--lsys-collapsible-transition-easing)",
-    "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)",
+    "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",
+    "text-(length:--lex-collapsible-trigger-font-size) font-(--lex-collapsible-trigger-font-weight) leading-(--lex-collapsible-trigger-font-line-height)",
+    "transition-colors duration-(--lex-collapsible-transition-duration) ease-(--lex-collapsible-transition-easing)",
+    "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)",
     disabledStateClasses,
-    "[&>svg]:size-(--lsys-collapsible-trigger-icon-size) [&>svg]:transition-transform data-[panel-open]:[&>svg]:rotate-45",
+    "[&>svg]:size-(--lex-collapsible-trigger-icon-size) [&>svg]:transition-transform data-[panel-open]:[&>svg]:rotate-45",
   ].join(" "),
 )
 
 export const collapsiblePanelVariants = cva(
   [
-    "overflow-hidden px-(--lsys-collapsible-panel-padding-x) pb-(--lsys-collapsible-panel-padding-bottom)",
-    "text-(length:--lsys-collapsible-panel-font-size) leading-(--lsys-collapsible-panel-font-line-height) text-(--lsys-collapsible-panel-foreground)",
-    "transition-[height,opacity] duration-(--lsys-collapsible-transition-duration) ease-(--lsys-collapsible-transition-easing)",
+    "overflow-hidden px-(--lex-collapsible-panel-padding-x) pb-(--lex-collapsible-panel-padding-bottom)",
+    "text-(length:--lex-collapsible-panel-font-size) leading-(--lex-collapsible-panel-font-line-height) text-(--lex-collapsible-panel-foreground)",
+    "transition-[height,opacity] duration-(--lex-collapsible-transition-duration) ease-(--lex-collapsible-transition-easing)",
     "data-[starting-style]:h-0 data-[starting-style]:opacity-0 data-[ending-style]:h-0 data-[ending-style]:opacity-0",
   ].join(" "),
 )