@dalexto/lexsys-registry 0.1.2 → 0.1.3

package/templates/blocks/Sidebar/Sidebar.variants.ts

@@ -61,11 +61,11 @@ export const sidebarDesktopClasses = ({
   side = "left",
 }: SidebarShellOptions = {}): string => {
   const classes = [
-    "lex-sidebar__desktop hidden h-full shrink-0 bg-[var(--lex-color-background-subtle)] md:flex md:flex-col",
+    "lex-sidebar__desktop hidden h-full shrink-0 bg-(--lex-sidebar-desktop-background) md:flex md:flex-col",
     "overflow-hidden transition-[width,transform] duration-(--lex-sidebar-transition-duration) ease-(--lex-sidebar-transition-easing) motion-reduce:transition-none",
     side === "right"
-      ? "border-s border-[var(--lex-border-default)]"
-      : "border-e border-[var(--lex-border-default)]",
+      ? "border-s border-(--lex-sidebar-desktop-border-color)"
+      : "border-e border-(--lex-sidebar-desktop-border-color)",
   ]
 
   if (collapsible === "icon" && collapsed) {
@@ -91,21 +91,34 @@ export const sidebarRailClasses = ({
     "lex-sidebar__rail absolute inset-y-0 hidden w-4 md:block",
     side === "right" ? "-start-2" : "-end-2",
     "cursor-pointer border-0 bg-transparent p-0 outline-none",
-    "after:absolute after:inset-y-0 after:w-px after:bg-[var(--lex-border-default)]",
+    "after:absolute after:inset-y-0 after:w-px after:bg-(--lex-sidebar-desktop-border-color)",
     side === "right" ? "after:start-2" : "after:end-2",
   ].join(" ")
 }
 
+export const sidebarMobileBarClasses = (): string => {
+  return [
+    "lex-sidebar__mobile-bar flex items-center",
+    "gap-(--lex-sidebar-mobile-bar-gap)",
+    "border-b border-(--lex-sidebar-mobile-bar-border-color)",
+    "bg-(--lex-sidebar-mobile-bar-background)",
+    "px-(--lex-sidebar-mobile-bar-padding-x) py-(--lex-sidebar-mobile-bar-padding-y)",
+  ].join(" ")
+}
+
 export const sidebarMobileHeaderClasses = (): string => {
-  return "lex-sidebar__mobile-header flex min-w-0 flex-1 items-center gap-3"
+  return "lex-sidebar__mobile-header flex min-w-0 flex-1 items-center gap-(--lex-sidebar-mobile-bar-gap)"
 }
 
 export const sidebarBrandClasses = (): string => {
-  return "lex-sidebar__brand border-b border-[var(--lex-border-default)] px-[var(--lex-space-4)] py-[var(--lex-space-3)]"
+  return [
+    "lex-sidebar__brand border-b border-(--lex-sidebar-brand-border-color)",
+    "px-(--lex-sidebar-brand-padding-x) py-(--lex-sidebar-brand-padding-y)",
+  ].join(" ")
 }
 
 export const sidebarNavClasses = (): string => {
-  return "lex-sidebar__nav min-h-0 flex-1 p-[var(--lex-space-2)]"
+  return "lex-sidebar__nav min-h-0 flex-1 p-(--lex-sidebar-nav-padding)"
 }
 
 export const sidebarInputClasses = (): string => {
@@ -118,26 +131,93 @@ export const sidebarInputClasses = (): string => {
 export const sidebarSeparatorClasses = (): string => {
   return [
     "lex-sidebar__separator",
-    "mx-[var(--lex-space-2)] w-auto",
-    "my-[var(--lex-space-1)]",
+    "mx-(--lex-sidebar-separator-margin-x) w-auto",
+    "my-(--lex-sidebar-separator-margin-y)",
   ].join(" ")
 }
 
 export const sidebarNavListClasses = (): string => {
-  return "lex-sidebar__list m-0 flex list-none flex-col gap-[var(--lex-space-1)] p-0"
+  return "lex-sidebar__list m-0 flex list-none flex-col gap-(--lex-sidebar-list-gap) p-0"
 }
 
 export const sidebarItemClasses = (): string => {
   return [
-    "lex-sidebar__row group/sidebar-row relative flex items-center",
-    "[&>:first-child]:min-w-0 [&>:first-child]:flex-1",
+    "lex-sidebar__row group/sidebar-row relative flex flex-col items-stretch",
+    "[&>:first-child]:min-w-0",
+    "[&>.lex-sidebar__item-row]:min-w-0",
     "has-[.lex-sidebar__item-action]:[&>:first-child]:pe-8",
   ].join(" ")
 }
 
+export const sidebarItemRowClasses = (): string => {
+  return [
+    "lex-sidebar__item-row flex w-full min-h-(--lex-sidebar-item-height-min) items-stretch",
+  ].join(" ")
+}
+
+export const sidebarItemDisclosureRowClasses = (): string => {
+  return [
+    "lex-sidebar__item-row lex-sidebar__item-row--disclosure group/sidebar-item-row",
+    "flex w-full min-h-(--lex-sidebar-item-height-min) items-stretch overflow-hidden",
+    "rounded-(--lex-sidebar-item-radius)",
+    "transition-colors duration-(--lex-sidebar-transition-duration) ease-(--lex-sidebar-transition-easing)",
+    "hover:bg-(--lex-sidebar-item-background-hover)",
+    "has-[.lex-sidebar__item--active]:bg-(--lex-sidebar-item-background-active)",
+    "has-[.lex-sidebar__item--active]:text-(--lex-sidebar-item-foreground-active)",
+    "has-[.lex-sidebar__item--active]:[&_.lex-sidebar__item-expand]:text-(--lex-sidebar-item-foreground-active)",
+  ].join(" ")
+}
+
+export const sidebarItemTrailingClasses = (): string => {
+  return [
+    "lex-sidebar__item-trailing ms-auto flex shrink-0 items-center gap-(--lex-sidebar-item-gap)",
+    "md:group-data-[collapsed=true]/sidebar:hidden",
+  ].join(" ")
+}
+
+/** @deprecated Prefer `sidebarItemTrailingClasses` inside the item shell. */
+export const sidebarItemAdornmentsClasses = (): string => {
+  return sidebarItemTrailingClasses()
+}
+
+export const sidebarNavItemRowLeadClasses = (
+  active?: boolean,
+  disabled?: boolean,
+): string => {
+  return sidebarNavItemDisclosureLeadClasses(active, disabled)
+}
+
+export const sidebarNavItemExpandTriggerClasses = (
+  open = false,
+  variant: "default" | "disclosure" = "default",
+): string => {
+  const classes = [
+    "lex-sidebar__item-expand flex shrink-0 items-center justify-center",
+    "min-h-(--lex-sidebar-item-height-min) w-(--lex-sidebar-item-height-min)",
+    "rounded-(--lex-sidebar-item-radius) rounded-s-none",
+    "text-(--lex-sidebar-item-foreground)",
+    "transition-colors duration-(--lex-sidebar-transition-duration) ease-(--lex-sidebar-transition-easing)",
+    "focus-visible:outline-none focus-visible:ring-(length:--lex-sidebar-item-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-sidebar-item-focus-ring-color)",
+    "[&>svg]:size-(--lex-sidebar-item-icon-size) [&>svg]:shrink-0 [&>svg]:transition-transform",
+    open ? "[&>svg]:rotate-180" : "",
+  ]
+
+  if (variant === "disclosure") {
+    classes.push("hover:bg-transparent")
+  } else {
+    classes.push(
+      "hover:bg-(--lex-sidebar-item-background-hover) hover:text-(--lex-color-text-primary)",
+    )
+  }
+
+  return classes.join(" ")
+}
+
 export const sidebarItemIconClasses = (): string => {
   return [
     "lex-sidebar__item-icon flex size-(--lex-sidebar-item-icon-size) shrink-0 items-center justify-center",
+    "transition-[width,height] duration-(--lex-sidebar-transition-duration) ease-(--lex-sidebar-transition-easing)",
+    "md:group-data-[collapsed=true]/sidebar:size-(--lex-sidebar-item-icon-size-collapsed)",
     "[&_svg]:size-full",
   ].join(" ")
 }
@@ -160,9 +240,10 @@ export const sidebarItemActionClasses = (showOnHover = true): string => {
 
 export const sidebarItemShortcutClasses = (): string => {
   return [
-    "lex-sidebar__item-shortcut ms-auto shrink-0",
+    "lex-sidebar__item-shortcut inline-flex shrink-0 items-center justify-center",
+    "h-(--lex-sidebar-item-adornment-height) min-w-(--lex-sidebar-item-adornment-height)",
     "rounded-(--lex-sidebar-item-radius) border border-[var(--lex-border-default)]",
-    "px-(--lex-space-control-x-xs) py-(--lex-space-control-y-xs)",
+    "px-(--lex-sidebar-item-shortcut-padding-x)",
     "text-(length:--lex-sidebar-item-font-size) font-(--lex-sidebar-item-font-weight)",
     "leading-(--lex-sidebar-item-font-line-height) text-(--lex-sidebar-item-foreground)",
     "md:group-data-[collapsed=true]/sidebar:hidden",
@@ -178,7 +259,7 @@ export const sidebarGroupActionClasses = (): string => {
 
 export const sidebarItemBadgeClasses = (): string => {
   return [
-    "lex-sidebar__item-badge shrink-0",
+    "lex-sidebar__item-badge inline-flex shrink-0 items-center self-center",
     "max-w-(--lex-sidebar-item-badge-max-width) truncate",
     "md:group-data-[collapsed=true]/sidebar:absolute md:group-data-[collapsed=true]/sidebar:top-1",
     "md:group-data-[collapsed=true]/sidebar:end-1 md:group-data-[collapsed=true]/sidebar:max-w-none",
@@ -217,7 +298,7 @@ export const sidebarItemBadgeDotClasses = (
 
 export const sidebarSubListClasses = (): string => {
   return [
-    "lex-sidebar__sub-list m-0 flex list-none flex-col gap-[var(--lex-space-1)] p-0",
+    "lex-sidebar__sub-list m-0 flex list-none flex-col gap-(--lex-sidebar-list-gap) p-0",
     "ms-[calc(var(--lex-sidebar-item-padding-x)+(var(--lex-sidebar-item-icon-size)/2))]",
     "border-s border-[var(--lex-border-default)] ps-(--lex-sidebar-item-sub-indent)",
     "md:group-data-[collapsed=true]/sidebar:hidden",
@@ -245,21 +326,24 @@ const sidebarNavItemActiveAccentClasses = (): string => {
   ].join(" ")
 }
 
-export const sidebarNavItemClasses = (
-  active?: boolean,
-  disabled?: boolean,
-): string => {
-  const base = [
+const sidebarNavItemShellBaseClasses = (): string => {
+  return [
     "lex-sidebar__item",
-    "relative flex min-w-0 flex-1 items-center gap-(--lex-sidebar-item-gap)",
+    "relative flex min-h-(--lex-sidebar-item-height-min) w-full min-w-0 items-center gap-(--lex-sidebar-item-gap)",
     "rounded-(--lex-sidebar-item-radius)",
     "px-(--lex-sidebar-item-padding-x) py-(--lex-sidebar-item-padding-y)",
     "text-(length:--lex-sidebar-item-font-size) font-(--lex-sidebar-item-font-weight)",
     "leading-(--lex-sidebar-item-font-line-height)",
     "no-underline outline-none transition-colors duration-(--lex-sidebar-transition-duration) ease-(--lex-sidebar-transition-easing)",
-    "focus-visible:ring-(length:--lex-sidebar-item-focus-ring-width) focus-visible:ring-(--lex-sidebar-item-focus-ring-color)",
-    "focus-visible:ring-offset-(length:--lex-sidebar-item-focus-ring-offset) focus-visible:ring-offset-(--lex-sidebar-item-focus-ring-offset-color)",
+    "focus-visible:ring-(length:--lex-sidebar-item-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-sidebar-item-focus-ring-color)",
   ].join(" ")
+}
+
+export const sidebarNavItemClasses = (
+  active?: boolean,
+  disabled?: boolean,
+): string => {
+  const base = sidebarNavItemShellBaseClasses()
 
   if (disabled) {
     return [
@@ -289,9 +373,46 @@ export const sidebarNavItemClasses = (
   ].join(" ")
 }
 
+export const sidebarNavItemDisclosureLeadClasses = (
+  active?: boolean,
+  disabled?: boolean,
+): string => {
+  const base = sidebarNavItemShellBaseClasses()
+
+  if (disabled) {
+    return [
+      base,
+      disabledStateClasses,
+      "min-w-0 flex-1 rounded-e-none bg-transparent",
+      "cursor-not-allowed text-(--lex-color-text-disabled)",
+      "hover:bg-transparent hover:text-(--lex-color-text-disabled)",
+      "data-[disabled]:text-(--lex-color-text-disabled)",
+    ].join(" ")
+  }
+
+  if (active) {
+    return [
+      base,
+      "lex-sidebar__item--active",
+      "min-w-0 flex-1 rounded-e-none bg-transparent",
+      "text-(--lex-sidebar-item-foreground-active)",
+      "font-(--lex-sidebar-item-font-weight-active)",
+      sidebarNavItemActiveAccentClasses(),
+      "hover:bg-transparent hover:text-(--lex-sidebar-item-foreground-active)",
+    ].join(" ")
+  }
+
+  return [
+    base,
+    "min-w-0 flex-1 rounded-e-none bg-transparent",
+    "text-(--lex-sidebar-item-foreground)",
+    "hover:bg-transparent hover:text-(--lex-sidebar-item-foreground)",
+  ].join(" ")
+}
+
 export const sidebarItemSkeletonClasses = (indent = false): string => {
   const classes = [
-    "lex-sidebar__item-skeleton flex w-full min-w-0 flex-1 items-center gap-(--lex-sidebar-item-gap)",
+    "lex-sidebar__item-skeleton flex min-h-(--lex-sidebar-item-height-min) w-full min-w-0 flex-1 items-center gap-(--lex-sidebar-item-gap)",
     "rounded-(--lex-sidebar-item-radius)",
     "px-(--lex-sidebar-item-padding-x) py-(--lex-sidebar-item-padding-y)",
     sidebarCollapsedItemClasses(),
@@ -326,28 +447,34 @@ export const sidebarMainClasses = (): string => {
 }
 
 export const sidebarDrawerFooterClasses = (): string => {
-  return "lex-sidebar__drawer-footer border-t border-[var(--lex-border-default)] p-[var(--lex-space-2)]"
+  return [
+    "lex-sidebar__drawer-footer border-t border-(--lex-sidebar-drawer-footer-border-color)",
+    "p-(--lex-sidebar-drawer-footer-padding)",
+  ].join(" ")
 }
 
 export const sidebarFooterClasses = (): string => {
-  return "lex-sidebar__footer border-t border-[var(--lex-border-default)] p-[var(--lex-space-2)]"
+  return [
+    "lex-sidebar__footer border-t border-(--lex-sidebar-footer-border-color)",
+    "p-(--lex-sidebar-footer-padding)",
+  ].join(" ")
 }
 
 export const sidebarGroupClasses = (): string => {
-  return "lex-sidebar__group flex flex-col gap-[var(--lex-space-1)]"
+  return "lex-sidebar__group flex flex-col gap-(--lex-sidebar-group-gap)"
 }
 
 export const sidebarGroupLabelClasses = (): string => {
   return [
-    "lex-sidebar__group-label flex items-center justify-between gap-[var(--lex-space-2)]",
-    "px-[var(--lex-space-3)] py-[var(--lex-space-1)]",
+    "lex-sidebar__group-label flex items-center justify-between gap-(--lex-sidebar-group-label-gap)",
+    "px-(--lex-sidebar-group-label-padding-x) py-(--lex-sidebar-group-label-padding-y)",
     "text-(length:--lex-menu-group-label-font-size) font-(--lex-menu-group-label-font-weight)",
     "leading-(--lex-menu-group-label-font-line-height) text-(--lex-menu-group-label-foreground)",
   ].join(" ")
 }
 
 export const sidebarGroupContentClasses = (): string => {
-  return "lex-sidebar__group-content flex flex-col gap-[var(--lex-space-1)]"
+  return "lex-sidebar__group-content flex flex-col gap-(--lex-sidebar-group-gap)"
 }
 
 export const sidebarGroupCollapsibleClasses = (): string => {
@@ -357,13 +484,13 @@ export const sidebarGroupCollapsibleClasses = (): string => {
 export const sidebarGroupCollapsibleTriggerClasses = (): string => {
   return [
     "lex-sidebar__group-collapsible-trigger",
-    "flex min-w-0 flex-1 items-center gap-[var(--lex-space-2)] text-left outline-none",
+    "flex min-w-0 flex-1 items-center gap-(--lex-sidebar-group-collapsible-trigger-gap) text-left outline-none",
     "text-(length:--lex-menu-group-label-font-size) font-(--lex-menu-group-label-font-weight)",
     "leading-(--lex-menu-group-label-font-line-height) text-(--lex-menu-group-label-foreground)",
     "transition-colors duration-(--lex-sidebar-transition-duration) ease-(--lex-sidebar-transition-easing)",
     "hover:text-(--lex-menu-group-label-foreground)",
     "focus-visible:ring-(length:--lex-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lex-focus-ring-color)",
-    "[&>svg]:ms-auto [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-transform",
+    "[&>svg]:ms-auto [&>svg]:size-(--lex-sidebar-item-icon-size) [&>svg]:shrink-0 [&>svg]:transition-transform",
     "group-data-[panel-open]/sidebar-group-collapsible:[&>svg]:rotate-180",
   ].join(" ")
 }

package/templates/blocks/StatsCard/StatsCard.variants.ts

@@ -11,10 +11,10 @@ export const statsCardClasses = (): string => {
 export const statsCardValueClasses = (): string => {
   return [
     "lex-stats-card__value",
-    "text-(length:--lex-typography-heading-md-font-size)",
-    "font-(--lex-typography-heading-md-font-weight)",
-    "leading-(--lex-typography-heading-md-font-line-height)",
-    "text-(--lex-color-text-primary)",
+    "text-(length:--lex-stats-card-value-font-size)",
+    "font-(--lex-stats-card-value-font-weight)",
+    "leading-(--lex-stats-card-value-font-line-height)",
+    "text-(--lex-stats-card-value-foreground)",
     "m-0",
   ].join(" ")
 }
@@ -22,7 +22,8 @@ export const statsCardValueClasses = (): string => {
 export const statsCardTrendClasses = (): string => {
   return [
     "lex-stats-card__trend",
-    "text-(length:--lex-typography-body-xs-font-size)",
-    "text-(--lex-color-text-secondary)",
+    "text-(length:--lex-stats-card-trend-font-size)",
+    "leading-(--lex-stats-card-trend-font-line-height)",
+    "text-(--lex-stats-card-trend-foreground)",
   ].join(" ")
 }

package/templates/primitives/DatePicker/DatePicker.tsx

@@ -28,6 +28,7 @@ import {
   datePickerDayVariants,
   datePickerGridVariants,
   datePickerHeaderVariants,
+  datePickerInputEmbeddedClasses,
   datePickerMonthLabelVariants,
   datePickerNavButtonVariants,
   datePickerWeekdayVariants,
@@ -102,9 +103,18 @@ DatePickerTrigger.displayName = "DatePickerTrigger"
 const DatePickerInput = ({
   ref,
   className,
+  embedded = false,
+  size,
   ...props
 }: DatePickerInputProps) => {
-  return <Input ref={ref} className={className} {...props} />
+  return (
+    <Input
+      ref={ref}
+      size={size ?? (embedded ? "sm" : undefined)}
+      className={cn(embedded && datePickerInputEmbeddedClasses(), className)}
+      {...props}
+    />
+  )
 }
 
 DatePickerInput.displayName = "DatePickerInput"

package/templates/primitives/DatePicker/DatePicker.types.ts

@@ -16,7 +16,10 @@ export type DatePickerProps<Payload = unknown> = PopoverProps<Payload>
 export type DatePickerTriggerProps<Payload = unknown> =
   PopoverTriggerProps<Payload>
 
-export type DatePickerInputProps = InputProps
+export interface DatePickerInputProps extends InputProps {
+  /** Flat chrome for toolbar/filter row slots — no outer border. */
+  embedded?: boolean
+}
 
 export interface DatePickerContentProps extends Omit<
   HTMLAttributes<HTMLDivElement>,

package/templates/primitives/DatePicker/DatePicker.variants.ts

@@ -9,6 +9,15 @@ import { disabledStateClasses } from "@/lib/utils"
 
 export const datePickerContentVariants = cva("p-0")
 
+export const datePickerInputEmbeddedClasses = (): string => {
+  return [
+    "h-(--lex-date-picker-trigger-input-embedded-height)",
+    "border-0 bg-(--lex-date-picker-trigger-input-embedded-background) shadow-none",
+    "px-(--lex-date-picker-trigger-input-embedded-padding-x)",
+    "focus-visible:border-0 focus-visible:ring-0",
+  ].join(" ")
+}
+
 export const datePickerCalendarVariants = cva(
   "flex w-(--lex-date-picker-calendar-width) flex-col gap-(--lex-date-picker-calendar-gap) rounded-(--lex-date-picker-calendar-radius) border border-(--lex-date-picker-calendar-border-color) bg-(--lex-date-picker-calendar-background) p-(--lex-date-picker-calendar-padding) text-(--lex-date-picker-calendar-foreground)",
 )
@@ -32,7 +41,7 @@ export const datePickerNavButtonVariants = cva(
 )
 
 export const datePickerWeekdaysVariants = cva(
-  "grid grid-cols-7 gap-(--lex-space-1)",
+  "grid grid-cols-7 gap-(--lex-date-picker-calendar-grid-gap)",
 )
 
 export const datePickerWeekdayVariants = cva(
@@ -40,7 +49,7 @@ export const datePickerWeekdayVariants = cva(
 )
 
 export const datePickerGridVariants = cva(
-  "grid grid-cols-7 gap-(--lex-space-1)",
+  "grid grid-cols-7 gap-(--lex-date-picker-calendar-grid-gap)",
 )
 
 export const datePickerDayVariants = cva(

package/templates/primitives/Toolbar/Toolbar.variants.ts

@@ -73,8 +73,10 @@ export const toolbarSeparatorVariants = cva(
   {
     variants: {
       orientation: {
-        horizontal: "mx-(--lex-space-1) h-(--lex-separator-thickness) w-full",
-        vertical: "my-(--lex-space-1) h-full w-(--lex-separator-thickness)",
+        horizontal:
+          "mx-(--lex-toolbar-separator-margin) h-(--lex-separator-thickness) w-full",
+        vertical:
+          "my-(--lex-toolbar-separator-margin) h-full w-(--lex-separator-thickness)",
       },
     },
     defaultVariants: {

package/templates/styles/theme.css

@@ -3,7 +3,7 @@
  *
  * Generated by @dalexto/lexsys-tokens.
  * Manual changes will be overwritten.
- * Last generated: 2026-06-06T23:24:29.234Z
+ * Last generated: 2026-06-07T16:48:33.996Z
  */
 
 :root {
@@ -72,6 +72,11 @@
   --spacing-twix-selection-control-sm: var(--lex-size-selection-control-sm);
   --spacing-twix-selection-control-md: var(--lex-size-selection-control-md);
   --spacing-twix-selection-control-lg: var(--lex-size-selection-control-lg);
+  --spacing-twix-icon-xs: var(--lex-size-icon-xs);
+  --spacing-twix-icon-sm: var(--lex-size-icon-sm);
+  --spacing-twix-icon-md: var(--lex-size-icon-md);
+  --spacing-twix-icon-lg: var(--lex-size-icon-lg);
+  --spacing-twix-icon-xl: var(--lex-size-icon-xl);
   --spacing-twix-area-swipe-sm: var(--lex-size-area-swipe-sm);
   --spacing-twix-area-swipe-md: var(--lex-size-area-swipe-md);
   --spacing-twix-area-swipe-lg: var(--lex-size-area-swipe-lg);