@dalexto/lexsys-registry 0.0.2 → 0.0.4

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/Table/Table.tsx

@@ -0,0 +1,121 @@
+/**
+ * Table.tsx
+ *
+ * Reference Table component implementation.
+ */
+
+import type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableCellProps,
+  TableFooterProps,
+  TableHeadProps,
+  TableHeaderProps,
+  TableProps,
+  TableRowProps,
+} from "./Table.types"
+import {
+  tableBodyClassName,
+  tableCaptionClassName,
+  tableCellClassName,
+  tableFooterClassName,
+  tableHeadClassName,
+  tableHeaderClassName,
+  tableRowClassName,
+  tableVariants,
+  tableWrapperClassName,
+} from "./Table.variants"
+import { cn } from "@/lib/utils"
+
+const Table = ({ ref, variant, className, ...props }: TableProps) => {
+  return (
+    <div className={tableWrapperClassName}>
+      <table
+        ref={ref}
+        className={cn(tableVariants({ variant }), className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+Table.displayName = "Table"
+
+const TableHeader = ({ ref, className, ...props }: TableHeaderProps) => {
+  return (
+    <thead
+      ref={ref}
+      className={cn(tableHeaderClassName, className)}
+      {...props}
+    />
+  )
+}
+
+TableHeader.displayName = "TableHeader"
+
+const TableBody = ({ ref, className, ...props }: TableBodyProps) => {
+  return (
+    <tbody ref={ref} className={cn(tableBodyClassName, className)} {...props} />
+  )
+}
+
+TableBody.displayName = "TableBody"
+
+const TableFooter = ({ ref, className, ...props }: TableFooterProps) => {
+  return (
+    <tfoot
+      ref={ref}
+      className={cn(tableFooterClassName, className)}
+      {...props}
+    />
+  )
+}
+
+TableFooter.displayName = "TableFooter"
+
+const TableRow = ({ ref, className, ...props }: TableRowProps) => {
+  return (
+    <tr ref={ref} className={cn(tableRowClassName, className)} {...props} />
+  )
+}
+
+TableRow.displayName = "TableRow"
+
+const TableHead = ({ ref, className, ...props }: TableHeadProps) => {
+  return (
+    <th ref={ref} className={cn(tableHeadClassName, className)} {...props} />
+  )
+}
+
+TableHead.displayName = "TableHead"
+
+const TableCell = ({ ref, className, ...props }: TableCellProps) => {
+  return (
+    <td ref={ref} className={cn(tableCellClassName, className)} {...props} />
+  )
+}
+
+TableCell.displayName = "TableCell"
+
+const TableCaption = ({ ref, className, ...props }: TableCaptionProps) => {
+  return (
+    <caption
+      ref={ref}
+      className={cn(tableCaptionClassName, className)}
+      {...props}
+    />
+  )
+}
+
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/templates/primitives/Table/Table.types.ts

@@ -0,0 +1,68 @@
+import type { Ref } from "react"
+/**
+ * Table.types.ts
+ *
+ * Public and internal types for Table component.
+ */
+
+import type {
+  HTMLAttributes,
+  TableHTMLAttributes,
+  TdHTMLAttributes,
+  ThHTMLAttributes,
+} from "react"
+
+export type TableVariant = "default" | "striped" | "bordered"
+
+export interface TableProps extends Omit<
+  TableHTMLAttributes<HTMLTableElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableElement>
+  variant?: TableVariant
+  className?: string
+}
+
+export interface TableSectionProps extends Omit<
+  HTMLAttributes<HTMLTableSectionElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableSectionElement>
+  className?: string
+}
+
+export type TableHeaderProps = TableSectionProps
+export type TableBodyProps = TableSectionProps
+export type TableFooterProps = TableSectionProps
+
+export interface TableRowProps extends Omit<
+  HTMLAttributes<HTMLTableRowElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableRowElement>
+  className?: string
+}
+
+export interface TableHeadProps extends Omit<
+  ThHTMLAttributes<HTMLTableCellElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableCellElement>
+  className?: string
+}
+
+export interface TableCellProps extends Omit<
+  TdHTMLAttributes<HTMLTableCellElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableCellElement>
+  className?: string
+}
+
+export interface TableCaptionProps extends Omit<
+  HTMLAttributes<HTMLTableCaptionElement>,
+  "className"
+> {
+  ref?: Ref<HTMLTableCaptionElement>
+  className?: string
+}

package/templates/primitives/Table/Table.variants.ts

@@ -0,0 +1,51 @@
+/**
+ * Table.variants.ts
+ *
+ * Defines Table visual slots using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const tableVariants = cva(
+  [
+    "w-full caption-bottom border-collapse text-(length:--lex-table-cell-font-size)",
+    "text-(--lex-table-foreground)",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "",
+        striped:
+          "[&_tbody_tr:nth-child(even)]:bg-(--lex-table-row-striped-background)",
+        bordered:
+          "border border-(--lex-table-border-color) [&_th]:border [&_td]:border [&_th]:border-(--lex-table-border-color) [&_td]:border-(--lex-table-border-color)",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export const tableWrapperClassName = "relative w-full overflow-x-auto"
+
+export const tableCaptionClassName =
+  "mt-(--lex-table-cell-padding-y) text-(length:--lex-table-caption-font-size) leading-(--lex-table-caption-font-line-height) text-(--lex-table-caption-foreground)"
+
+export const tableHeaderClassName =
+  "[&_tr]:border-b [&_tr]:border-(--lex-table-border-color)"
+
+export const tableBodyClassName =
+  "[&_tr:last-child]:border-0 [&_tr]:border-b [&_tr]:border-(--lex-table-border-color)"
+
+export const tableFooterClassName =
+  "border-t border-(--lex-table-border-color) bg-(--lex-table-footer-background) font-medium [&_tr]:last:border-b-0"
+
+export const tableRowClassName =
+  "border-b border-(--lex-table-border-color) transition-colors hover:bg-(--lex-table-head-background)/50 data-[state=selected]:bg-(--lex-table-head-background)"
+
+export const tableHeadClassName =
+  "h-10 px-(--lex-table-cell-padding-x) py-(--lex-table-cell-padding-y) text-left align-middle font-(--lex-table-head-font-weight) text-(length:--lex-table-head-font-size) leading-(--lex-table-head-font-line-height) text-(--lex-table-head-foreground) [&:has([role=checkbox])]:pr-0"
+
+export const tableCellClassName =
+  "px-(--lex-table-cell-padding-x) py-(--lex-table-cell-padding-y) align-middle leading-(--lex-table-cell-font-line-height) [&:has([role=checkbox])]:pr-0"

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)",
 )