@dalexto/lexsys-registry 0.1.1 → 0.1.3

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

@@ -4,54 +4,441 @@
  * Variant classes for the Sidebar block.
  */
 
-export const sidebarRootClasses = (): string => {
-  return "lex-sidebar w-full shrink-0 md:h-full md:w-auto"
+import { disabledStateClasses } from "@/lib/utils"
+import type { BadgeVariant } from "@/components/primitives/Badge/Badge.types"
+import type { SidebarShellOptions } from "./Sidebar.types"
+
+export const sidebarRootClasses = ({
+  collapsed = false,
+  collapsible = "none",
+  side = "left",
+}: SidebarShellOptions = {}): string => {
+  const classes = [
+    "group/sidebar lex-sidebar w-full shrink-0 md:h-full md:w-auto",
+  ]
+
+  if (collapsible !== "none" && collapsed) {
+    classes.push("lex-sidebar--collapsed")
+  }
+
+  if (collapsible === "offcanvas" && collapsed) {
+    classes.push("lex-sidebar--offcanvas")
+  }
+
+  if (side === "right") {
+    classes.push("lex-sidebar--right")
+  }
+
+  return classes.join(" ")
+}
+
+export const sidebarCollapsedItemClasses = (): string => {
+  return "md:group-data-[collapsed=true]/sidebar:justify-center md:group-data-[collapsed=true]/sidebar:px-2"
+}
+
+export const sidebarCollapsedGroupLabelClasses = (): string => {
+  return "md:group-data-[collapsed=true]/sidebar:hidden"
+}
+
+export const sidebarExpandableClasses = (): string => {
+  return [
+    "sidebar-expandable transition-[opacity,width] duration-(--lex-sidebar-transition-duration) ease-(--lex-sidebar-transition-easing)",
+    "md:group-data-[collapsed=true]/sidebar:hidden",
+  ].join(" ")
+}
+
+export const sidebarCollapsedBrandClasses = (): string => {
+  return "md:group-data-[collapsed=true]/sidebar:justify-center"
+}
+
+export const sidebarCollapsedFooterClasses = (): string => {
+  return "md:group-data-[collapsed=true]/sidebar:justify-center"
+}
+
+export const sidebarDesktopClasses = ({
+  collapsed = false,
+  collapsible = "none",
+  side = "left",
+}: SidebarShellOptions = {}): string => {
+  const classes = [
+    "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-(--lex-sidebar-desktop-border-color)"
+      : "border-e border-(--lex-sidebar-desktop-border-color)",
+  ]
+
+  if (collapsible === "icon" && collapsed) {
+    classes.push("w-(--lex-sidebar-width-collapsed)")
+  } else if (collapsible === "offcanvas" && collapsed) {
+    classes.push(
+      "w-(--lex-sidebar-width-default)",
+      side === "right"
+        ? "translate-x-full rtl:-translate-x-full"
+        : "-translate-x-full rtl:translate-x-full",
+    )
+  } else {
+    classes.push("w-(--lex-sidebar-width-default)")
+  }
+
+  return classes.join(" ")
 }
 
-export const sidebarDesktopClasses = (): string => {
-  return "lex-sidebar__desktop hidden h-full w-[var(--lex-size-sidebar-width,16rem)] shrink-0 border-r border-[var(--lex-border-default)] bg-[var(--lex-color-background-subtle)] md:flex md:flex-col"
+export const sidebarRailClasses = ({
+  side = "left",
+}: SidebarShellOptions = {}): string => {
+  return [
+    "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-(--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 min-w-0 flex-1"
+  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 => {
+  return [
+    "lex-sidebar__input w-full",
+    "md:group-data-[collapsed=true]/sidebar:hidden",
+  ].join(" ")
+}
+
+export const sidebarSeparatorClasses = (): string => {
+  return [
+    "lex-sidebar__separator",
+    "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 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(" ")
+}
+
+export const sidebarItemActionClasses = (showOnHover = true): string => {
+  const classes = [
+    "lex-sidebar__item-action absolute top-1/2 end-1 -translate-y-1/2",
+    "md:group-data-[collapsed=true]/sidebar:hidden",
+  ]
+
+  if (showOnHover) {
+    classes.push(
+      "opacity-0 transition-opacity duration-(--lex-sidebar-transition-duration) ease-(--lex-sidebar-transition-easing)",
+      "group-hover/sidebar-row:opacity-100 focus-visible:opacity-100",
+    )
+  }
+
+  return classes.join(" ")
+}
+
+export const sidebarItemShortcutClasses = (): string => {
+  return [
+    "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-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",
+  ].join(" ")
+}
+
+export const sidebarGroupActionClasses = (): string => {
+  return [
+    "lex-sidebar__group-action shrink-0",
+    "md:group-data-[collapsed=true]/sidebar:hidden",
+  ].join(" ")
 }
 
-export const sidebarNavItemClasses = (active?: boolean): string => {
-  const base = [
+export const sidebarItemBadgeClasses = (): string => {
+  return [
+    "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",
+  ].join(" ")
+}
+
+export const sidebarItemBadgeCollapsedClasses = (): string => {
+  return [
+    "md:group-data-[collapsed=true]/sidebar:h-2 md:group-data-[collapsed=true]/sidebar:min-h-2",
+    "md:group-data-[collapsed=true]/sidebar:w-2 md:group-data-[collapsed=true]/sidebar:min-w-2",
+    "md:group-data-[collapsed=true]/sidebar:px-0",
+    "md:group-data-[collapsed=true]/sidebar:text-[0px] md:group-data-[collapsed=true]/sidebar:leading-(--lex-badge-font-line-height)",
+  ].join(" ")
+}
+
+export const sidebarItemBadgeLabelClasses = (): string => {
+  return "md:group-data-[collapsed=true]/sidebar:sr-only"
+}
+
+const sidebarItemBadgeDotVariantClasses: Record<BadgeVariant, string> = {
+  neutral: "bg-(--lex-badge-neutral-foreground)",
+  primary: "bg-(--lex-badge-primary-background)",
+  success: "bg-(--lex-color-feedback-success-foreground)",
+  warning: "bg-(--lex-color-feedback-warning-foreground)",
+  danger: "bg-(--lex-badge-danger-background)",
+}
+
+export const sidebarItemBadgeDotClasses = (
+  variant: BadgeVariant = "neutral",
+): string => {
+  return [
+    "size-2 rounded-full border-0 p-0",
+    sidebarItemBadgeDotVariantClasses[variant],
+  ].join(" ")
+}
+
+export const sidebarSubListClasses = (): string => {
+  return [
+    "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",
+  ].join(" ")
+}
+
+export const sidebarSubNavItemClasses = (
+  active?: boolean,
+  disabled?: boolean,
+): string => {
+  const base = sidebarNavItemClasses(active, disabled)
+
+  return [
+    base,
+    "ps-[calc(var(--lex-sidebar-item-padding-x)+var(--lex-sidebar-item-sub-indent))]",
+  ].join(" ")
+}
+
+const sidebarNavItemActiveAccentClasses = (): string => {
+  return [
+    "before:absolute before:inset-y-1 before:w-(--lex-sidebar-item-accent-width)",
+    "before:rounded-full before:bg-(--lex-sidebar-item-accent-color) before:content-['']",
+    "before:start-0 group-data-[side=right]/sidebar:before:start-auto",
+    "group-data-[side=right]/sidebar:before:end-0",
+  ].join(" ")
+}
+
+const sidebarNavItemShellBaseClasses = (): string => {
+  return [
     "lex-sidebar__item",
-    "flex w-full items-center rounded-(--lex-menu-item-radius)",
-    "px-(--lex-menu-item-padding-x) py-(--lex-menu-item-padding-y)",
-    "text-(length:--lex-menu-item-font-size) font-(--lex-menu-item-font-weight)",
-    "leading-(--lex-menu-item-font-line-height) text-(--lex-menu-item-foreground)",
-    "no-underline outline-none transition-colors",
-    "focus-visible:ring-(length:--lex-menu-item-focus-ring-width) focus-visible:ring-(--lex-menu-item-focus-ring-color)",
-    "focus-visible:ring-offset-(length:--lex-menu-item-focus-ring-offset) focus-visible:ring-offset-(--lex-menu-item-focus-ring-offset-color)",
+    "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-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 [
+      base,
+      disabledStateClasses,
+      "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",
-      "bg-(--lex-menu-item-checked-background) text-(--lex-menu-item-checked-foreground)",
-      "hover:bg-(--lex-action-primary-hover) hover:text-(--lex-menu-item-checked-foreground)",
+      "bg-(--lex-sidebar-item-background-active) text-(--lex-sidebar-item-foreground-active)",
+      "font-(--lex-sidebar-item-font-weight-active)",
+      sidebarNavItemActiveAccentClasses(),
+      "hover:bg-(--lex-sidebar-item-background-active) hover:text-(--lex-sidebar-item-foreground-active)",
     ].join(" ")
   }
 
   return [
     base,
-    "hover:bg-(--lex-action-secondary-hover) hover:text-(--lex-color-text-primary)",
+    "text-(--lex-sidebar-item-foreground)",
+    "hover:bg-(--lex-sidebar-item-background-hover) hover:text-(--lex-color-text-primary)",
+  ].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 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(),
+  ]
+
+  if (indent) {
+    classes.push(
+      "ps-[calc(var(--lex-sidebar-item-padding-x)+var(--lex-sidebar-item-sub-indent))]",
+    )
+  }
+
+  return classes.join(" ")
+}
+
+export const sidebarItemSkeletonIconClasses = (): string => {
+  return [
+    "lex-sidebar__item-skeleton-icon size-(--lex-sidebar-item-icon-size) shrink-0",
+    "rounded-(--lex-sidebar-item-radius) animate-pulse bg-(--lex-color-background-subtle)",
+  ].join(" ")
+}
+
+export const sidebarItemSkeletonLabelClasses = (): string => {
+  return [
+    "lex-sidebar__item-skeleton-label h-[1em] min-w-0 flex-1",
+    "rounded-(--lex-sidebar-item-radius) animate-pulse bg-(--lex-color-background-subtle)",
+    "md:group-data-[collapsed=true]/sidebar:hidden",
   ].join(" ")
 }
 
@@ -60,21 +447,54 @@ 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 px-[var(--lex-space-3)] py-[var(--lex-space-1)] 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)"
+  return [
+    "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 => {
+  return "group/sidebar-group-collapsible lex-sidebar__group-collapsible"
+}
+
+export const sidebarGroupCollapsibleTriggerClasses = (): string => {
+  return [
+    "lex-sidebar__group-collapsible-trigger",
+    "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-(--lex-sidebar-item-icon-size) [&>svg]:shrink-0 [&>svg]:transition-transform",
+    "group-data-[panel-open]/sidebar-group-collapsible:[&>svg]:rotate-180",
+  ].join(" ")
+}
+
+export const sidebarGroupCollapsiblePanelClasses = (): string => {
+  return "lex-sidebar__group-collapsible-panel p-0"
 }

package/templates/blocks/StatsCard/StatsCard.tsx

@@ -11,7 +11,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/primitives/Card"
+} from "@/components/primitives/Card/Card"
 import type {
   StatsCardContentProps,
   StatsCardDescriptionProps,

package/templates/blocks/StatsCard/StatsCard.types.ts

@@ -12,7 +12,7 @@ import type {
   CardHeaderProps,
   CardProps,
   CardTitleProps,
-} from "@/components/primitives/Card"
+} from "@/components/primitives/Card/Card.types"
 
 export interface StatsCardProps extends Omit<CardProps, "children"> {
   ref?: Ref<HTMLDivElement>

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: {