@dalexto/lexsys-registry 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dalexto/lexsys-registry",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Install metadata and templates for the Lexsys registry-first UI framework",
   "type": "module",
   "license": "MIT",

package/templates/blocks/AuthForm/AuthForm.tsx

@@ -19,7 +19,11 @@ import type {
   AuthFormProps,
   AuthFormSubmitProps,
 } from "./AuthForm.types"
-import { authFormFieldsClassName, authFormClasses } from "./AuthForm.variants"
+import {
+  authFormClasses,
+  authFormContentClasses,
+  authFormFooterClasses,
+} from "./AuthForm.variants"
 import { cn } from "@/lib/utils"
 
 const AuthForm = ({
@@ -59,7 +63,7 @@ const AuthFormContent = ({
   return (
     <CardContent
       ref={ref}
-      className={cn(authFormFieldsClassName, className)}
+      className={cn(authFormContentClasses(), className)}
       {...props}
     />
   )
@@ -71,7 +75,7 @@ const AuthFormFooter = ({ ref, className, ...props }: AuthFormFooterProps) => {
   return (
     <CardFooter
       ref={ref}
-      className={cn("flex-col gap-(--lex-space-3)", className)}
+      className={cn(authFormFooterClasses(), className)}
       {...props}
     />
   )

package/templates/blocks/AuthForm/AuthForm.variants.ts

@@ -5,7 +5,13 @@
  */
 
 export const authFormClasses = (): string => {
-  return "lex-auth-form w-full text-(--lex-color-text-primary)"
+  return "lex-auth-form w-full text-(--lex-auth-form-root-foreground)"
 }
 
-export const authFormFieldsClassName = "flex flex-col gap-(--lex-space-4)"
+export const authFormContentClasses = (): string => {
+  return "flex flex-col gap-(--lex-auth-form-content-gap)"
+}
+
+export const authFormFooterClasses = (): string => {
+  return "flex-col gap-(--lex-auth-form-footer-gap)"
+}

package/templates/blocks/CommandPalette/CommandPalette.tsx

@@ -14,6 +14,7 @@ import {
   DialogViewport,
 } from "@/components/primitives/Dialog/Dialog"
 import {
+  Combobox,
   ComboboxInput,
   ComboboxInputGroup,
 } from "@/components/primitives/Combobox/Combobox"
@@ -116,14 +117,16 @@ const CommandPaletteInput = ({
   ...props
 }: CommandPaletteInputProps) => {
   return (
-    <ComboboxInputGroup className={cn(commandPaletteInputClasses, className)}>
-      <ComboboxInput
-        ref={ref}
-        autoFocus
-        aria-label="Search commands"
-        {...props}
-      />
-    </ComboboxInputGroup>
+    <Combobox>
+      <ComboboxInputGroup className={cn(commandPaletteInputClasses, className)}>
+        <ComboboxInput
+          ref={ref}
+          autoFocus
+          aria-label="Search commands"
+          {...props}
+        />
+      </ComboboxInputGroup>
+    </Combobox>
   )
 }
 

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

@@ -5,21 +5,21 @@
  */
 
 export const commandPaletteRootClasses =
-  "lex-command-palette flex flex-col gap-(--lex-space-2)"
+  "lex-command-palette flex flex-col gap-(--lex-command-palette-root-gap)"
 
 export const commandPaletteInputClasses = "w-full"
 
 export const commandPaletteListClasses =
-  "flex max-h-(--lex-size-command-palette-list-max-height,16rem) flex-col"
+  "flex max-h-(--lex-command-palette-list-max-height) flex-col"
 
 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)"
+  "px-(--lex-command-palette-group-label-padding-x) py-(--lex-command-palette-group-label-padding-y) text-(length:--lex-typography-label-xs-font-size) font-(--lex-typography-label-xs-font-weight) text-(--lex-color-text-secondary)"
 
 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)"
+  "flex w-full flex-col items-start gap-(--lex-command-palette-item-gap) rounded-(--lex-command-palette-item-radius) px-(--lex-command-palette-item-padding-x) py-(--lex-command-palette-item-padding-y) text-left text-(--lex-command-palette-item-foreground) outline-none transition-colors hover:bg-(--lex-command-palette-item-hover-background) focus-visible:bg-(--lex-command-palette-item-hover-background)"
 
 export const commandPaletteItemDescriptionClasses =
-  "text-(length:--lex-typography-body-xs-font-size) text-(--lex-color-text-secondary)"
+  "text-(length:--lex-typography-body-xs-font-size) text-(--lex-command-palette-item-description-foreground)"
 
 export const commandPaletteEmptyClasses =
-  "px-(--lex-space-3) py-(--lex-space-4) text-(length:--lex-typography-body-sm-font-size) text-(--lex-color-text-secondary)"
+  "px-(--lex-command-palette-empty-padding-x) py-(--lex-command-palette-empty-padding-y) text-(length:--lex-typography-body-sm-font-size) text-(--lex-color-text-secondary)"

package/templates/blocks/DataTable/DataTable.variants.ts

@@ -5,15 +5,16 @@
  */
 
 export const dataTableClasses = (): string => {
-  return ["lex-data-table", "flex w-full flex-col gap-(--lex-space-4)"].join(
-    " ",
-  )
+  return [
+    "lex-data-table",
+    "flex w-full flex-col gap-(--lex-data-table-root-gap)",
+  ].join(" ")
 }
 
 export const dataTableFooterClasses = (): string => {
   return [
     "lex-data-table__footer",
-    "flex flex-col gap-(--lex-space-3)",
+    "flex flex-col gap-(--lex-data-table-footer-gap)",
     "sm:flex-row sm:items-center sm:justify-between",
   ].join(" ")
 }

package/templates/blocks/FilterToolbar/FilterToolbar.tsx

@@ -23,6 +23,7 @@ import type {
 } from "./FilterToolbar.types"
 import {
   filterToolbarClasses,
+  filterToolbarGroupClasses,
   filterToolbarSearchClasses,
   filterToolbarSelectTriggerClasses,
 } from "./FilterToolbar.variants"
@@ -51,7 +52,13 @@ const FilterToolbarGroup = ({
   className,
   ...props
 }: FilterToolbarGroupProps) => {
-  return <ToolbarGroup ref={ref} className={className} {...props} />
+  return (
+    <ToolbarGroup
+      ref={ref}
+      className={cn(filterToolbarGroupClasses(), className)}
+      {...props}
+    />
+  )
 }
 
 FilterToolbarGroup.displayName = "FilterToolbarGroup"

package/templates/blocks/FilterToolbar/FilterToolbar.variants.ts

@@ -7,11 +7,17 @@
 export const filterToolbarClasses = (): string => {
   return [
     "lex-filter-toolbar",
-    "flex flex-wrap items-center gap-(--lex-space-2)",
-    "rounded-(--lex-radius-control)",
-    "border border-(--lex-border-default)",
-    "bg-(--lex-color-background-subtle)",
-    "p-(--lex-space-2)",
+    "flex flex-wrap items-center gap-(--lex-toolbar-root-gap)",
+    "rounded-(--lex-toolbar-radius)",
+    "border border-(--lex-toolbar-root-border-color)",
+    "bg-(--lex-toolbar-root-background)",
+    "p-(--lex-toolbar-root-padding)",
+  ].join(" ")
+}
+
+export const filterToolbarGroupClasses = (): string => {
+  return [
+    "lex-filter-toolbar__group flex flex-wrap items-center gap-(--lex-toolbar-group-gap)",
   ].join(" ")
 }
 

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

@@ -5,5 +5,5 @@
  */
 
 export const formFieldClasses = (): string => {
-  return "lex-form-field flex flex-col gap-[var(--lex-space-2)]"
+  return "lex-form-field flex flex-col gap-(--lex-form-field-root-gap)"
 }

package/templates/blocks/PageHeader/PageHeader.variants.ts

@@ -7,17 +7,18 @@
 export const pageHeaderClasses = (): string => {
   return [
     "lex-page-header",
-    "flex flex-col gap-(--lex-space-4)",
-    "border-b border-(--lex-border-default) pb-(--lex-space-4)",
+    "flex flex-col gap-(--lex-page-header-root-gap)",
+    "border-b border-(--lex-page-header-root-border-color)",
+    "pb-(--lex-page-header-root-padding-bottom)",
   ].join(" ")
 }
 
 export const pageHeaderTopClasses = (): string => {
-  return "lex-page-header__top flex flex-col gap-(--lex-space-3)"
+  return "lex-page-header__top flex flex-col gap-(--lex-page-header-top-gap)"
 }
 
 export const pageHeaderHeadingClasses = (): string => {
-  return "lex-page-header__heading flex flex-col gap-(--lex-space-1)"
+  return "lex-page-header__heading flex flex-col gap-(--lex-page-header-heading-gap)"
 }
 
 export const pageHeaderTitleClasses = (): string => {
@@ -40,7 +41,7 @@ export const pageHeaderDescriptionClasses = (): string => {
 }
 
 export const pageHeaderActionsClasses = (): string => {
-  return "lex-page-header__actions flex flex-wrap items-center gap-(--lex-space-2)"
+  return "lex-page-header__actions flex flex-wrap items-center gap-(--lex-page-header-actions-gap)"
 }
 
 export const pageHeaderBreadcrumbClasses = (): string => {

package/templates/blocks/Sidebar/Sidebar.tsx

@@ -60,9 +60,13 @@ import type {
   SidebarHeaderProps,
   SidebarGroupActionProps,
   SidebarItemActionProps,
+  SidebarItemAdornmentsProps,
+  SidebarItemTrailingProps,
   SidebarItemBadgeProps,
   SidebarItemButtonProps,
+  SidebarItemExpandTriggerProps,
   SidebarItemIconProps,
+  SidebarItemRowProps,
   SidebarItemLinkProps,
   SidebarItemProps,
   SidebarItemShortcutProps,
@@ -96,8 +100,12 @@ import {
   sidebarGroupClasses,
   sidebarItemActionClasses,
   sidebarItemBadgeClasses,
+  sidebarItemDisclosureRowClasses,
   sidebarItemIconClasses,
+  sidebarItemRowClasses,
+  sidebarItemTrailingClasses,
   sidebarItemShortcutClasses,
+  sidebarNavItemExpandTriggerClasses,
   sidebarItemBadgeCollapsedClasses,
   sidebarItemBadgeDotClasses,
   sidebarItemBadgeLabelClasses,
@@ -108,8 +116,10 @@ import {
   sidebarInputClasses,
   sidebarSeparatorClasses,
   sidebarMainClasses,
+  sidebarMobileBarClasses,
   sidebarMobileHeaderClasses,
   sidebarNavItemClasses,
+  sidebarNavItemDisclosureLeadClasses,
   sidebarNavListClasses,
   sidebarNavClasses,
   sidebarSubListClasses,
@@ -463,7 +473,7 @@ const Sidebar = ({
         swipeDirection={side === "right" ? "right" : "left"}
       >
         {mobileHeader.length > 0 ? (
-          <div className="flex items-center gap-3 border-b border-[var(--lex-border-default)] bg-[var(--lex-color-background-base)] px-[var(--lex-space-4)] py-[var(--lex-space-3)] md:hidden">
+          <div className={cn(sidebarMobileBarClasses(), "md:hidden")}>
             {mobileHeader}
           </div>
         ) : null}
@@ -883,6 +893,7 @@ const SidebarItemLink = ({
   ref,
   active,
   disabled,
+  chrome = "default",
   className,
   children,
   onClick,
@@ -892,7 +903,9 @@ const SidebarItemLink = ({
   const inheritedDisabled = useSidebarItemDisabled()
   const isDisabled = resolveSidebarNavItemDisabled(disabled, inheritedDisabled)
   const linkClassName = cn(
-    sidebarNavItemClasses(active, isDisabled),
+    chrome === "disclosureLead"
+      ? sidebarNavItemDisclosureLeadClasses(active, isDisabled)
+      : sidebarNavItemClasses(active, isDisabled),
     sidebarCollapsedItemClasses(),
     className,
   )
@@ -1077,6 +1090,92 @@ const SidebarItemIcon = ({
 
 SidebarItemIcon.displayName = "SidebarItemIcon"
 
+const SidebarItemRow = ({
+  ref,
+  variant = "default",
+  className,
+  children,
+  ...props
+}: SidebarItemRowProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        variant === "disclosure"
+          ? sidebarItemDisclosureRowClasses()
+          : sidebarItemRowClasses(),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+SidebarItemRow.displayName = "SidebarItemRow"
+
+const SidebarItemTrailing = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarItemTrailingProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(sidebarItemTrailingClasses(), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+SidebarItemTrailing.displayName = "SidebarItemTrailing"
+
+/** @deprecated Use `SidebarItemTrailing` inside the item shell. */
+const SidebarItemAdornments = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarItemAdornmentsProps) => {
+  return (
+    <SidebarItemTrailing ref={ref} className={className} {...props}>
+      {children}
+    </SidebarItemTrailing>
+  )
+}
+
+SidebarItemAdornments.displayName = "SidebarItemAdornments"
+
+const SidebarItemExpandTrigger = ({
+  ref,
+  variant = "default",
+  className,
+  open = false,
+  children,
+  type = "button",
+  ...props
+}: SidebarItemExpandTriggerProps) => {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(
+        sidebarNavItemExpandTriggerClasses(open, variant),
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <ChevronDown aria-hidden />}
+    </button>
+  )
+}
+
+SidebarItemExpandTrigger.displayName = "SidebarItemExpandTrigger"
+
 const SidebarItemAction = ({
   ref,
   showOnHover = true,
@@ -1270,6 +1369,10 @@ export {
   SidebarItemSkeleton,
   SidebarItemBadge,
   SidebarItemIcon,
+  SidebarItemRow,
+  SidebarItemTrailing,
+  SidebarItemAdornments,
+  SidebarItemExpandTrigger,
   SidebarItemAction,
   SidebarItemShortcut,
   SidebarGroupAction,
@@ -1285,3 +1388,13 @@ export {
 }
 
 export type { SidebarNavActiveOptions } from "./Sidebar.types.js"
+export {
+  sidebarItemRowClasses,
+  sidebarItemDisclosureRowClasses,
+  sidebarItemTrailingClasses,
+  sidebarItemAdornmentsClasses,
+  sidebarMobileBarClasses,
+  sidebarNavItemRowLeadClasses,
+  sidebarNavItemDisclosureLeadClasses,
+  sidebarNavItemExpandTriggerClasses,
+} from "./Sidebar.variants.js"

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

@@ -132,6 +132,11 @@ export interface SidebarItemLinkProps extends AnchorHTMLAttributes<HTMLAnchorEle
   ref?: Ref<HTMLAnchorElement>
   active?: boolean
   disabled?: boolean
+  /**
+   * Background chrome owner. `disclosureLead` defers hover/active fill to
+   * `SidebarItemRow variant="disclosure"`.
+   */
+  chrome?: "default" | "disclosureLead"
   className?: string
   children?: ReactNode
 }
@@ -192,6 +197,31 @@ export interface SidebarItemBadgeProps extends BadgeProps {
   dot?: boolean
 }
 
+export interface SidebarItemRowProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  /** `disclosure` paints one shared row shell for link lead + expand trigger. */
+  variant?: "default" | "disclosure"
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarItemTrailingProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+/** @deprecated Place `SidebarItemTrailing` inside `SidebarItemLink` / `SidebarItemButton`. */
+export type SidebarItemAdornmentsProps = SidebarItemTrailingProps
+
+export interface SidebarItemExpandTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  ref?: Ref<HTMLButtonElement>
+  /** `disclosure` suppresses per-cell hover fill — row shell owns chrome. */
+  variant?: "default" | "disclosure"
+  className?: string
+  open?: boolean
+}
+
 export interface SidebarItemIconProps extends HTMLAttributes<HTMLSpanElement> {
   ref?: Ref<HTMLSpanElement>
   className?: string