@dalexto/lexsys-registry 0.1.1 → 0.1.3

package/dist/index.js

@@ -1503,10 +1503,19 @@ var sidebarRegistryItem = {
   files: [
     "blocks/Sidebar/Sidebar.tsx",
     "blocks/Sidebar/Sidebar.types.ts",
-    "blocks/Sidebar/Sidebar.variants.ts"
+    "blocks/Sidebar/Sidebar.variants.ts",
+    "blocks/Sidebar/Sidebar.utils.ts"
+  ],
+  dependencies: ["@base-ui/react", "clsx", "lucide-react", "tailwind-merge"],
+  registryDependencies: [
+    "badge",
+    "button",
+    "collapsible",
+    "drawer",
+    "input",
+    "scroll-area",
+    "separator"
   ],
-  dependencies: ["clsx", "tailwind-merge"],
-  registryDependencies: ["button", "drawer", "scroll-area"],
   utilities: ["cn"],
   styles: ["theme"],
   target: "src/components/ui/Sidebar"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dalexto/lexsys-registry",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Install metadata and templates for the Lexsys registry-first UI framework",
   "type": "module",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "node": ">=24 <25"
   },
   "devDependencies": {
-    "@types/node": "^25.9.1"
+    "@types/node": "^25.9.2"
   },
   "scripts": {
     "build": "tsup && tsc -p tsconfig.json --emitDeclarationOnly --outDir dist",

package/templates/blocks/AuthForm/AuthForm.tsx

@@ -10,8 +10,8 @@ import {
   CardContent,
   CardFooter,
   CardHeader,
-} from "@/components/primitives/Card"
-import { Button } from "@/components/primitives/Button"
+} from "@/components/primitives/Card/Card"
+import { Button } from "@/components/primitives/Button/Button"
 import type {
   AuthFormContentProps,
   AuthFormFooterProps,
@@ -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.types.ts

@@ -5,13 +5,13 @@
  */
 
 import type { FormEventHandler, ReactNode, Ref } from "react"
-import type { CardProps } from "@/components/primitives/Card"
-import type { ButtonProps } from "@/components/primitives/Button"
+import type { CardProps } from "@/components/primitives/Card/Card.types"
+import type { ButtonProps } from "@/components/primitives/Button/Button.types"
 import type {
   CardContentProps,
   CardFooterProps,
   CardHeaderProps,
-} from "@/components/primitives/Card"
+} from "@/components/primitives/Card/Card.types"
 
 export interface AuthFormProps extends Omit<
   CardProps,

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

@@ -12,17 +12,18 @@ import {
   DialogPortal,
   DialogTitle,
   DialogViewport,
-} from "@/components/primitives/Dialog"
+} from "@/components/primitives/Dialog/Dialog"
 import {
+  Combobox,
   ComboboxInput,
   ComboboxInputGroup,
-} from "@/components/primitives/Combobox"
-import { Separator } from "@/components/primitives/Separator"
+} from "@/components/primitives/Combobox/Combobox"
+import { Separator } from "@/components/primitives/Separator/Separator"
 import {
   ScrollArea,
   ScrollAreaContent,
   ScrollAreaViewport,
-} from "@/components/primitives/ScrollArea"
+} from "@/components/primitives/ScrollArea/ScrollArea"
 import type {
   CommandPaletteContentProps,
   CommandPaletteDescriptionProps,
@@ -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.types.ts

@@ -10,8 +10,8 @@ import type {
   ReactNode,
   Ref,
 } from "react"
-import type { DialogProps } from "@/components/primitives/Dialog"
-import type { ComboboxInputProps } from "@/components/primitives/Combobox"
+import type { DialogProps } from "@/components/primitives/Dialog/Dialog.types"
+import type { ComboboxInputProps } from "@/components/primitives/Combobox/Combobox.types"
 
 export interface CommandPaletteProps extends DialogProps {
   children?: ReactNode

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

@@ -12,7 +12,7 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/primitives/Pagination"
+} from "@/components/primitives/Pagination/Pagination"
 import {
   Table,
   TableBody,
@@ -22,7 +22,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/primitives/Table"
+} from "@/components/primitives/Table/Table"
 import type {
   DataTableBodyProps,
   DataTableCaptionProps,

package/templates/blocks/DataTable/DataTable.types.ts

@@ -13,7 +13,7 @@ import type {
   PaginationNextProps,
   PaginationPreviousProps,
   PaginationProps,
-} from "@/components/primitives/Pagination"
+} from "@/components/primitives/Pagination/Pagination.types"
 import type {
   TableBodyProps,
   TableCaptionProps,
@@ -23,7 +23,7 @@ import type {
   TableHeaderProps,
   TableProps,
   TableRowProps,
-} from "@/components/primitives/Table"
+} from "@/components/primitives/Table/Table.types"
 
 export interface DataTableProps extends HTMLAttributes<HTMLDivElement> {
   ref?: Ref<HTMLDivElement>

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

@@ -4,14 +4,14 @@
  * Reference FilterToolbar block — compound Toolbar filter row.
  */
 
-import { Button } from "@/components/primitives/Button"
-import { Input } from "@/components/primitives/Input"
+import { Button } from "@/components/primitives/Button/Button"
+import { Input } from "@/components/primitives/Input/Input"
 import {
   Select,
   SelectTrigger,
   SelectValue,
-} from "@/components/primitives/Select"
-import { Toolbar, ToolbarGroup } from "@/components/primitives/Toolbar"
+} from "@/components/primitives/Select/Select"
+import { Toolbar, ToolbarGroup } from "@/components/primitives/Toolbar/Toolbar"
 import type {
   FilterToolbarButtonProps,
   FilterToolbarGroupProps,
@@ -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.types.ts

@@ -4,17 +4,17 @@
  * Public types for the FilterToolbar block.
  */
 
-import type { ButtonProps } from "@/components/primitives/Button"
-import type { InputProps } from "@/components/primitives/Input"
+import type { ButtonProps } from "@/components/primitives/Button/Button.types"
+import type { InputProps } from "@/components/primitives/Input/Input.types"
 import type {
   SelectProps,
   SelectTriggerProps,
   SelectValueProps,
-} from "@/components/primitives/Select"
+} from "@/components/primitives/Select/Select.types"
 import type {
   ToolbarGroupProps,
   ToolbarProps,
-} from "@/components/primitives/Toolbar"
+} from "@/components/primitives/Toolbar/Toolbar.types"
 
 export type FilterToolbarProps = ToolbarProps
 

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

@@ -11,7 +11,7 @@ import {
   FieldError,
   FieldItem,
   FieldLabel,
-} from "@/components/primitives/Field"
+} from "@/components/primitives/Field/Field"
 import type {
   FormFieldControlProps,
   FormFieldDescriptionProps,

package/templates/blocks/FormField/FormField.types.ts

@@ -11,7 +11,7 @@ import type {
   FieldItemProps,
   FieldLabelProps,
   FieldProps,
-} from "@/components/primitives/Field"
+} from "@/components/primitives/Field/Field.types"
 
 export type FormFieldProps = FieldProps
 

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

@@ -4,7 +4,7 @@
  * Reference PageHeader block — compound page title surface with breadcrumb and actions.
  */
 
-import { Button } from "@/components/primitives/Button"
+import { Button } from "@/components/primitives/Button/Button"
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -12,7 +12,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/primitives/Breadcrumb"
+} from "@/components/primitives/Breadcrumb/Breadcrumb"
 import type {
   PageHeaderActionProps,
   PageHeaderActionsProps,

package/templates/blocks/PageHeader/PageHeader.types.ts

@@ -5,7 +5,7 @@
  */
 
 import type { HTMLAttributes, ReactNode, Ref } from "react"
-import type { ButtonProps } from "@/components/primitives/Button"
+import type { ButtonProps } from "@/components/primitives/Button/Button.types"
 import type {
   BreadcrumbItemProps,
   BreadcrumbLinkProps,
@@ -13,7 +13,7 @@ import type {
   BreadcrumbPageProps,
   BreadcrumbProps,
   BreadcrumbSeparatorProps,
-} from "@/components/primitives/Breadcrumb"
+} from "@/components/primitives/Breadcrumb/Breadcrumb.types"
 
 export interface PageHeaderProps extends HTMLAttributes<HTMLElement> {
   ref?: Ref<HTMLElement>

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

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

package/templates/blocks/SettingsPanel/SettingsPanel.types.ts

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