@dalexto/lexsys-registry 0.0.2 → 0.0.4

package/templates/blocks/CommandPalette/CommandPalette.variants.ts

@@ -4,23 +4,22 @@
  * Variant classes for the CommandPalette block.
  */
 
-export const commandPaletteRootVariants = (): string => {
-  return "lsys-command-palette flex flex-col gap-(--lsys-space-2)"
-}
+export const commandPaletteRootClasses =
+  "lex-command-palette flex flex-col gap-(--lex-space-2)"
 
-export const commandPaletteInputClassName = "w-full"
+export const commandPaletteInputClasses = "w-full"
 
-export const commandPaletteListClassName =
-  "flex max-h-(--lsys-size-command-palette-list-max-height,16rem) flex-col"
+export const commandPaletteListClasses =
+  "flex max-h-(--lex-size-command-palette-list-max-height,16rem) flex-col"
 
-export const commandPaletteGroupLabelClassName =
-  "px-(--lsys-space-3) py-(--lsys-space-1) text-(length:--lsys-typography-label-xs-font-size) font-(--lsys-typography-label-xs-font-weight) text-(--lsys-color-text-secondary)"
+export const commandPaletteGroupLabelClasses =
+  "px-(--lex-space-3) py-(--lex-space-1) text-(length:--lex-typography-label-xs-font-size) font-(--lex-typography-label-xs-font-weight) text-(--lex-color-text-secondary)"
 
-export const commandPaletteItemClassName =
-  "flex w-full flex-col items-start gap-(--lsys-space-1) rounded-(--lsys-radius-control) px-(--lsys-space-3) py-(--lsys-space-2) text-left text-(--lsys-color-text-primary) outline-none transition-colors hover:bg-(--lsys-action-secondary-hover) focus-visible:bg-(--lsys-action-secondary-hover)"
+export const commandPaletteItemClasses =
+  "flex w-full flex-col items-start gap-(--lex-space-1) rounded-(--lex-radius-control) px-(--lex-space-3) py-(--lex-space-2) text-left text-(--lex-color-text-primary) outline-none transition-colors hover:bg-(--lex-action-secondary-hover) focus-visible:bg-(--lex-action-secondary-hover)"
 
-export const commandPaletteItemDescriptionClassName =
-  "text-(length:--lsys-typography-body-xs-font-size) text-(--lsys-color-text-secondary)"
+export const commandPaletteItemDescriptionClasses =
+  "text-(length:--lex-typography-body-xs-font-size) text-(--lex-color-text-secondary)"
 
-export const commandPaletteEmptyClassName =
-  "px-(--lsys-space-3) py-(--lsys-space-4) text-(length:--lsys-typography-body-sm-font-size) text-(--lsys-color-text-secondary)"
+export const commandPaletteEmptyClasses =
+  "px-(--lex-space-3) py-(--lex-space-4) text-(length:--lex-typography-body-sm-font-size) text-(--lex-color-text-secondary)"

package/templates/blocks/Empty/Empty.tsx

@@ -0,0 +1,91 @@
+/**
+ * Empty.tsx
+ *
+ * Reference Empty block implementation.
+ * Used for zero-data surfaces: no results, no items, unauthenticated views.
+ */
+
+import { cn } from "@/lib/utils"
+import type {
+  EmptyContentProps,
+  EmptyDescriptionProps,
+  EmptyHeaderProps,
+  EmptyMediaProps,
+  EmptyProps,
+  EmptyTitleProps,
+} from "./Empty.types"
+import {
+  emptyClasses,
+  emptyContentClasses,
+  emptyDescriptionClasses,
+  emptyHeaderClasses,
+  emptyMediaClasses,
+  emptyTitleClasses,
+} from "./Empty.variants"
+
+const Empty = ({ ref, className, ...props }: EmptyProps) => {
+  return <div ref={ref} className={cn(emptyClasses(), className)} {...props} />
+}
+
+Empty.displayName = "Empty"
+
+const EmptyHeader = ({ ref, className, ...props }: EmptyHeaderProps) => {
+  return (
+    <div ref={ref} className={cn(emptyHeaderClasses(), className)} {...props} />
+  )
+}
+
+EmptyHeader.displayName = "EmptyHeader"
+
+const EmptyMedia = ({ ref, className, ...props }: EmptyMediaProps) => {
+  return (
+    <div ref={ref} className={cn(emptyMediaClasses(), className)} {...props} />
+  )
+}
+
+EmptyMedia.displayName = "EmptyMedia"
+
+const EmptyTitle = ({ ref, className, ...props }: EmptyTitleProps) => {
+  return (
+    <h3 ref={ref} className={cn(emptyTitleClasses(), className)} {...props} />
+  )
+}
+
+EmptyTitle.displayName = "EmptyTitle"
+
+const EmptyDescription = ({
+  ref,
+  className,
+  ...props
+}: EmptyDescriptionProps) => {
+  return (
+    <p
+      ref={ref}
+      className={cn(emptyDescriptionClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+EmptyDescription.displayName = "EmptyDescription"
+
+const EmptyContent = ({ ref, className, ...props }: EmptyContentProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(emptyContentClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+EmptyContent.displayName = "EmptyContent"
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+}

package/templates/blocks/Empty/Empty.types.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react"
+
+export type EmptyProps = ComponentPropsWithRef<"div">
+export type EmptyHeaderProps = ComponentPropsWithRef<"div">
+export type EmptyMediaProps = ComponentPropsWithRef<"div">
+export type EmptyTitleProps = ComponentPropsWithRef<"h3">
+export type EmptyDescriptionProps = ComponentPropsWithRef<"p">
+export type EmptyContentProps = ComponentPropsWithRef<"div">

package/templates/blocks/Empty/Empty.variants.ts

@@ -0,0 +1,51 @@
+/**
+ * Empty.variants.ts
+ *
+ * Variant classes for the Empty block.
+ */
+
+export const emptyClasses = (): string => {
+  return [
+    "lex-empty",
+    "flex w-full flex-col items-center justify-center text-center",
+    "gap-(--lex-empty-gap) p-(--lex-empty-padding)",
+  ].join(" ")
+}
+
+export const emptyHeaderClasses = (): string => {
+  return [
+    "lex-empty__header",
+    "flex flex-col items-center",
+    "gap-(--lex-empty-header-gap)",
+  ].join(" ")
+}
+
+export const emptyMediaClasses = (): string => {
+  return [
+    "lex-empty__media",
+    "flex items-center justify-center",
+    "size-(--lex-empty-media-size) text-(--lex-empty-media-foreground)",
+  ].join(" ")
+}
+
+export const emptyTitleClasses = (): string => {
+  return [
+    "lex-empty__title",
+    "text-(length:--lex-empty-title-font-size) font-(--lex-empty-title-font-weight)",
+    "leading-(--lex-empty-title-font-line-height) text-(--lex-empty-title-foreground)",
+    "m-0",
+  ].join(" ")
+}
+
+export const emptyDescriptionClasses = (): string => {
+  return [
+    "lex-empty__description",
+    "text-(length:--lex-empty-description-font-size)",
+    "leading-(--lex-empty-description-font-line-height) text-(--lex-empty-description-foreground)",
+    "m-0",
+  ].join(" ")
+}
+
+export const emptyContentClasses = (): string => {
+  return "lex-empty__content flex items-center justify-center gap-(--lex-empty-gap)"
+}

package/templates/blocks/FormField/FormField.tsx

@@ -20,16 +20,12 @@ import type {
   FormFieldLabelProps,
   FormFieldProps,
 } from "./FormField.types"
-import { formFieldVariants } from "./FormField.variants"
+import { formFieldClasses } from "./FormField.variants"
 import { cn } from "@/lib/utils"
 
 const FormField = ({ ref, className, ...props }: FormFieldProps) => {
   return (
-    <Field
-      ref={ref}
-      className={cn(formFieldVariants(), className)}
-      {...props}
-    />
+    <Field ref={ref} className={cn(formFieldClasses(), className)} {...props} />
   )
 }
 

package/templates/blocks/FormField/FormField.variants.ts

@@ -4,6 +4,6 @@
  * Variant classes for the FormField block.
  */
 
-export const formFieldVariants = (): string => {
-  return "lsys-form-field flex flex-col gap-[var(--lsys-space-2)]"
+export const formFieldClasses = (): string => {
+  return "lex-form-field flex flex-col gap-[var(--lex-space-2)]"
 }

package/templates/blocks/SettingsPanel/SettingsPanel.tsx

@@ -20,7 +20,7 @@ import type {
   SettingsPanelProps,
   SettingsPanelTitleProps,
 } from "./SettingsPanel.types"
-import { settingsPanelVariants } from "./SettingsPanel.variants"
+import { settingsPanelClasses } from "./SettingsPanel.variants"
 import { cn } from "@/lib/utils"
 
 const SettingsPanel = ({
@@ -34,7 +34,7 @@ const SettingsPanel = ({
     <Card
       ref={ref}
       variant={variant}
-      className={cn(settingsPanelVariants(), className)}
+      className={cn(settingsPanelClasses(), className)}
       {...cardProps}
     >
       {children}

package/templates/blocks/SettingsPanel/SettingsPanel.variants.ts

@@ -4,6 +4,6 @@
  * Variant classes for the SettingsPanel block.
  */
 
-export const settingsPanelVariants = (): string => {
-  return "lsys-settings-panel w-full text-(--lsys-color-text-primary)"
+export const settingsPanelClasses = (): string => {
+  return "lex-settings-panel w-full text-(--lex-color-text-primary)"
 }

package/templates/blocks/Sidebar/Sidebar.tsx

@@ -33,59 +33,39 @@ import type {
   SidebarItemButtonProps,
   SidebarItemLinkProps,
   SidebarItemProps,
-  SidebarItemSize,
-  SidebarItemVariant,
   SidebarListProps,
   SidebarMobileHeaderProps,
   SidebarProps,
   SidebarTriggerProps,
 } from "./Sidebar.types"
 import {
-  sidebarBrandVariants,
-  sidebarDesktopVariants,
-  sidebarDrawerFooterVariants,
-  sidebarFooterVariants,
-  sidebarGroupContentVariants,
-  sidebarGroupLabelVariants,
-  sidebarGroupVariants,
-  sidebarMainVariants,
-  sidebarMobileHeaderVariants,
-  sidebarMobileTriggerVariants,
-  sidebarNavItemVariants,
-  sidebarNavListVariants,
-  sidebarNavVariants,
-  sidebarRootVariants,
+  sidebarBrandClasses,
+  sidebarDesktopClasses,
+  sidebarDrawerFooterClasses,
+  sidebarFooterClasses,
+  sidebarGroupContentClasses,
+  sidebarGroupLabelClasses,
+  sidebarGroupClasses,
+  sidebarMainClasses,
+  sidebarMobileHeaderClasses,
+  sidebarNavItemClasses,
+  sidebarNavListClasses,
+  sidebarNavClasses,
+  sidebarRootClasses,
 } from "./Sidebar.variants"
 import { cn } from "@/lib/utils"
 
-interface SidebarContextValue {
-  itemVariant: SidebarItemVariant
-  itemSize: SidebarItemSize
-}
-
 interface SidebarMobileContextValue {
   closeOnSelect: boolean
 }
 
-const SidebarContext = createContext<SidebarContextValue>({
-  itemVariant: "ghost",
-  itemSize: "sm",
-})
-
 const SidebarMobileContext = createContext<SidebarMobileContextValue>({
   closeOnSelect: false,
 })
 
 const useSidebarMobileContext = () => useContext(SidebarMobileContext)
 
-const Sidebar = ({
-  ref,
-  className,
-  itemVariant = "ghost",
-  itemSize = "sm",
-  children,
-  ...props
-}: SidebarProps) => {
+const Sidebar = ({ ref, className, children, ...props }: SidebarProps) => {
   const sidebarBody = (
     <SidebarMobileContext.Provider value={{ closeOnSelect: false }}>
       {children}
@@ -95,7 +75,7 @@ const Sidebar = ({
   const drawerBody = (
     <SidebarMobileContext.Provider value={{ closeOnSelect: true }}>
       {children}
-      <div className={sidebarDrawerFooterVariants()}>
+      <div className={sidebarDrawerFooterClasses()}>
         <DrawerClose render={<Button variant="secondary" size="sm" />}>
           Close
         </DrawerClose>
@@ -104,38 +84,26 @@ const Sidebar = ({
   )
 
   return (
-    <SidebarContext.Provider value={{ itemVariant, itemSize }}>
-      <aside
-        ref={ref}
-        className={cn(sidebarRootVariants(), className)}
-        {...props}
-      >
-        <div className={sidebarDesktopVariants()}>{sidebarBody}</div>
-
-        <div className={sidebarMobileTriggerVariants()}>
-          <Drawer swipeDirection="left">
-            <DrawerTrigger render={<Button variant="secondary" size="sm" />}>
-              Open navigation
-            </DrawerTrigger>
-            <DrawerPortal>
-              <DrawerBackdrop />
-              <DrawerViewport side="left">
-                <DrawerPopup side="left" size="sm">
-                  <DrawerClose aria-label="Close navigation" />
-                  <DrawerContent className={sidebarMainVariants()}>
-                    <DrawerTitle className="sr-only">Navigation</DrawerTitle>
-                    <DrawerDescription className="sr-only">
-                      Application navigation links
-                    </DrawerDescription>
-                    {drawerBody}
-                  </DrawerContent>
-                </DrawerPopup>
-              </DrawerViewport>
-            </DrawerPortal>
-          </Drawer>
-        </div>
-      </aside>
-    </SidebarContext.Provider>
+    <aside ref={ref} className={cn(sidebarRootClasses(), className)} {...props}>
+      <Drawer swipeDirection="left">
+        <div className={sidebarDesktopClasses()}>{sidebarBody}</div>
+        <DrawerPortal>
+          <DrawerBackdrop />
+          <DrawerViewport side="left">
+            <DrawerPopup side="left" size="sm">
+              <DrawerClose aria-label="Close navigation" />
+              <DrawerContent className={sidebarMainClasses()}>
+                <DrawerTitle className="sr-only">Navigation</DrawerTitle>
+                <DrawerDescription className="sr-only">
+                  Application navigation links
+                </DrawerDescription>
+                {drawerBody}
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
+      </Drawer>
+    </aside>
   )
 }
 
@@ -148,7 +116,7 @@ const SidebarHeader = ({
   ...props
 }: SidebarHeaderProps) => {
   return (
-    <div ref={ref} className={cn(sidebarBrandVariants(), className)} {...props}>
+    <div ref={ref} className={cn(sidebarBrandClasses(), className)} {...props}>
       {children}
     </div>
   )
@@ -163,7 +131,7 @@ const SidebarContent = ({
   ...props
 }: SidebarContentProps) => {
   return (
-    <ScrollArea className={sidebarNavVariants()}>
+    <ScrollArea className={sidebarNavClasses()}>
       <ScrollAreaViewport>
         <ScrollAreaContent>
           <nav
@@ -189,11 +157,7 @@ const SidebarFooter = ({
   ...props
 }: SidebarFooterProps) => {
   return (
-    <div
-      ref={ref}
-      className={cn(sidebarFooterVariants(), className)}
-      {...props}
-    >
+    <div ref={ref} className={cn(sidebarFooterClasses(), className)} {...props}>
       {children}
     </div>
   )
@@ -237,7 +201,7 @@ const SidebarMobileHeader = ({
   return (
     <div
       ref={ref}
-      className={cn(sidebarMobileHeaderVariants(), className)}
+      className={cn(sidebarMobileHeaderClasses(), className)}
       {...props}
     >
       {children}
@@ -254,7 +218,7 @@ const SidebarGroup = ({
   ...props
 }: SidebarGroupProps) => {
   return (
-    <div ref={ref} className={cn(sidebarGroupVariants(), className)} {...props}>
+    <div ref={ref} className={cn(sidebarGroupClasses(), className)} {...props}>
       {children}
     </div>
   )
@@ -271,7 +235,7 @@ const SidebarGroupLabel = ({
   return (
     <div
       ref={ref}
-      className={cn(sidebarGroupLabelVariants(), className)}
+      className={cn(sidebarGroupLabelClasses(), className)}
       {...props}
     >
       {children}
@@ -290,7 +254,7 @@ const SidebarGroupContent = ({
   return (
     <div
       ref={ref}
-      className={cn(sidebarGroupContentVariants(), className)}
+      className={cn(sidebarGroupContentClasses(), className)}
       {...props}
     >
       {children}
@@ -307,11 +271,7 @@ const SidebarList = ({
   ...props
 }: SidebarListProps) => {
   return (
-    <ul
-      ref={ref}
-      className={cn(sidebarNavListVariants(), className)}
-      {...props}
-    >
+    <ul ref={ref} className={cn(sidebarNavListClasses(), className)} {...props}>
       {children}
     </ul>
   )
@@ -342,7 +302,7 @@ const SidebarItemLink = ({
   ...props
 }: SidebarItemLinkProps) => {
   const { closeOnSelect } = useSidebarMobileContext()
-  const linkClassName = cn(sidebarNavItemVariants(active), className)
+  const linkClassName = cn(sidebarNavItemClasses(active), className)
 
   if (!closeOnSelect) {
     return (
@@ -373,7 +333,7 @@ const SidebarItemButton = ({
   ...props
 }: SidebarItemButtonProps) => {
   const { closeOnSelect } = useSidebarMobileContext()
-  const buttonClassName = cn(sidebarNavItemVariants(active), className)
+  const buttonClassName = cn(sidebarNavItemClasses(active), className)
 
   if (!closeOnSelect) {
     return (

package/templates/blocks/Sidebar/Sidebar.types.ts

@@ -14,14 +14,9 @@ import type {
 } from "react"
 import type { ButtonProps } from "../../primitives/Button/Button.types"
 
-export type SidebarItemVariant = ButtonProps["variant"]
-export type SidebarItemSize = ButtonProps["size"]
-
 export interface SidebarProps extends HTMLAttributes<HTMLElement> {
   ref?: Ref<HTMLElement>
   className?: string
-  itemVariant?: SidebarItemVariant
-  itemSize?: SidebarItemSize
   children?: ReactNode
 }
 
@@ -31,8 +26,8 @@ export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode
 }
 
-export interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {
-  ref?: Ref<HTMLDivElement>
+export interface SidebarContentProps extends HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLElement>
   className?: string
   children?: ReactNode
 }

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

@@ -4,81 +4,77 @@
  * Variant classes for the Sidebar block.
  */
 
-export const sidebarRootVariants = (): string => {
-  return "lsys-sidebar w-full shrink-0 md:h-full md:w-auto"
+export const sidebarRootClasses = (): string => {
+  return "lex-sidebar w-full shrink-0 md:h-full md:w-auto"
 }
 
-export const sidebarDesktopVariants = (): string => {
-  return "lsys-sidebar__desktop hidden h-full w-[var(--lsys-size-sidebar-width,16rem)] shrink-0 border-r border-[var(--lsys-border-default)] bg-[var(--lsys-color-background-subtle)] md:flex md:flex-col"
+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 sidebarMobileTriggerVariants = (): string => {
-  return "lsys-sidebar__mobile-trigger sticky top-0 z-(--lsys-z-index-local) border-b border-[var(--lsys-border-default)] bg-[var(--lsys-color-background-base)] p-[var(--lsys-space-2)] md:hidden"
+export const sidebarMobileHeaderClasses = (): string => {
+  return "lex-sidebar__mobile-header min-w-0 flex-1"
 }
 
-export const sidebarMobileHeaderVariants = (): string => {
-  return "lsys-sidebar__mobile-header min-w-0 flex-1"
+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)]"
 }
 
-export const sidebarBrandVariants = (): string => {
-  return "lsys-sidebar__brand border-b border-[var(--lsys-border-default)] px-[var(--lsys-space-4)] py-[var(--lsys-space-3)]"
+export const sidebarNavClasses = (): string => {
+  return "lex-sidebar__nav min-h-0 flex-1 p-[var(--lex-space-2)]"
 }
 
-export const sidebarNavVariants = (): string => {
-  return "lsys-sidebar__nav min-h-0 flex-1 p-[var(--lsys-space-2)]"
+export const sidebarNavListClasses = (): string => {
+  return "lex-sidebar__list m-0 flex list-none flex-col gap-[var(--lex-space-1)] p-0"
 }
 
-export const sidebarNavListVariants = (): string => {
-  return "lsys-sidebar__list m-0 flex list-none flex-col gap-[var(--lsys-space-1)] p-0"
-}
-
-export const sidebarNavItemVariants = (active?: boolean): string => {
+export const sidebarNavItemClasses = (active?: boolean): string => {
   const base = [
-    "lsys-sidebar__item",
-    "flex w-full items-center rounded-(--lsys-menu-item-radius)",
-    "px-(--lsys-menu-item-padding-x) py-(--lsys-menu-item-padding-y)",
-    "text-(length:--lsys-menu-item-font-size) font-(--lsys-menu-item-font-weight)",
-    "leading-(--lsys-menu-item-font-line-height) text-(--lsys-menu-item-foreground)",
+    "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:--lsys-menu-item-focus-ring-width) focus-visible:ring-(--lsys-menu-item-focus-ring-color)",
-    "focus-visible:ring-offset-(length:--lsys-menu-item-focus-ring-offset) focus-visible:ring-offset-(--lsys-menu-item-focus-ring-offset-color)",
+    "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)",
   ].join(" ")
 
   if (active) {
     return [
       base,
-      "lsys-sidebar__item--active",
-      "bg-(--lsys-menu-item-checked-background) text-(--lsys-menu-item-checked-foreground)",
-      "hover:bg-(--lsys-action-primary-hover) hover:text-(--lsys-menu-item-checked-foreground)",
+      "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)",
     ].join(" ")
   }
 
   return [
     base,
-    "hover:bg-(--lsys-action-secondary-hover) hover:text-(--lsys-color-text-primary)",
+    "hover:bg-(--lex-action-secondary-hover) hover:text-(--lex-color-text-primary)",
   ].join(" ")
 }
 
-export const sidebarMainVariants = (): string => {
-  return "lsys-sidebar__drawer-content flex h-full min-h-0 flex-col"
+export const sidebarMainClasses = (): string => {
+  return "lex-sidebar__drawer-content flex h-full min-h-0 flex-col"
 }
 
-export const sidebarDrawerFooterVariants = (): string => {
-  return "lsys-sidebar__drawer-footer border-t border-[var(--lsys-border-default)] p-[var(--lsys-space-2)]"
+export const sidebarDrawerFooterClasses = (): string => {
+  return "lex-sidebar__drawer-footer border-t border-[var(--lex-border-default)] p-[var(--lex-space-2)]"
 }
 
-export const sidebarFooterVariants = (): string => {
-  return "lsys-sidebar__footer border-t border-[var(--lsys-border-default)] p-[var(--lsys-space-2)]"
+export const sidebarFooterClasses = (): string => {
+  return "lex-sidebar__footer border-t border-[var(--lex-border-default)] p-[var(--lex-space-2)]"
 }
 
-export const sidebarGroupVariants = (): string => {
-  return "lsys-sidebar__group flex flex-col gap-[var(--lsys-space-1)]"
+export const sidebarGroupClasses = (): string => {
+  return "lex-sidebar__group flex flex-col gap-[var(--lex-space-1)]"
 }
 
-export const sidebarGroupLabelVariants = (): string => {
-  return "lsys-sidebar__group-label px-[var(--lsys-space-3)] py-[var(--lsys-space-1)] text-(length:--lsys-menu-group-label-font-size) font-(--lsys-menu-group-label-font-weight) leading-(--lsys-menu-group-label-font-line-height) text-(--lsys-menu-group-label-foreground)"
+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)"
 }
 
-export const sidebarGroupContentVariants = (): string => {
-  return "lsys-sidebar__group-content flex flex-col gap-[var(--lsys-space-1)]"
+export const sidebarGroupContentClasses = (): string => {
+  return "lex-sidebar__group-content flex flex-col gap-[var(--lex-space-1)]"
 }