@dalexto/lexsys-registry 0.0.2 → 0.0.4

package/README.md

@@ -4,6 +4,7 @@
 **Type:** Package README
 **Source of truth for:** Package role, public exports, item structure, template sync
 **Verified against:** `packages/registry/src/`
+**Last reviewed:** 2026-05-30
 
 ---
 

package/dist/index.js

@@ -20,7 +20,6 @@ var getInstallLayer = (item) => {
 var accordionRegistryItem = {
   name: "accordion",
   canonicalName: "Accordion",
-  version: "0.0.1",
   type: "component",
   category: "data-display",
   aliases: ["collapse"],
@@ -56,7 +55,6 @@ var accordionRegistryItem = {
 var alertDialogRegistryItem = {
   name: "alert-dialog",
   canonicalName: "AlertDialog",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -93,7 +91,6 @@ var alertDialogRegistryItem = {
 var alertRegistryItem = {
   name: "alert",
   canonicalName: "Alert",
-  version: "0.0.1",
   type: "component",
   category: "feedback",
   aliases: ["notice", "message"],
@@ -124,7 +121,6 @@ var alertRegistryItem = {
 var avatarRegistryItem = {
   name: "avatar",
   canonicalName: "Avatar",
-  version: "0.0.1",
   type: "component",
   category: "data-display",
   aliases: [],
@@ -160,7 +156,6 @@ var avatarRegistryItem = {
 var badgeRegistryItem = {
   name: "badge",
   canonicalName: "Badge",
-  version: "0.0.1",
   type: "component",
   category: "data-display",
   aliases: ["tag", "label"],
@@ -191,7 +186,6 @@ var badgeRegistryItem = {
 var buttonRegistryItem = {
   name: "button",
   canonicalName: "Button",
-  version: "0.0.1",
   type: "component",
   category: "actions",
   aliases: ["btn"],
@@ -227,7 +221,6 @@ var buttonRegistryItem = {
 var cardRegistryItem = {
   name: "card",
   canonicalName: "Card",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: ["panel", "surface"],
@@ -258,7 +251,6 @@ var cardRegistryItem = {
 var checkboxRegistryItem = {
   name: "checkbox",
   canonicalName: "Checkbox",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: ["check"],
@@ -294,7 +286,6 @@ var checkboxRegistryItem = {
 var collapsibleRegistryItem = {
   name: "collapsible",
   canonicalName: "Collapsible",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: [],
@@ -331,7 +322,6 @@ var collapsibleRegistryItem = {
 var contextMenuRegistryItem = {
   name: "context-menu",
   canonicalName: "ContextMenu",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -368,7 +358,6 @@ var contextMenuRegistryItem = {
 var dialogRegistryItem = {
   name: "dialog",
   canonicalName: "Dialog",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -405,7 +394,6 @@ var dialogRegistryItem = {
 var drawerRegistryItem = {
   name: "drawer",
   canonicalName: "Drawer",
-  version: "0.0.2",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -442,7 +430,6 @@ var drawerRegistryItem = {
 var fieldRegistryItem = {
   name: "field",
   canonicalName: "Field",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -478,7 +465,6 @@ var fieldRegistryItem = {
 var fieldsetRegistryItem = {
   name: "fieldset",
   canonicalName: "Fieldset",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -514,7 +500,6 @@ var fieldsetRegistryItem = {
 var formRegistryItem = {
   name: "form",
   canonicalName: "Form",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -550,7 +535,6 @@ var formRegistryItem = {
 var inputRegistryItem = {
   name: "input",
   canonicalName: "Input",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: ["ipt"],
@@ -586,7 +570,6 @@ var inputRegistryItem = {
 var menuRegistryItem = {
   name: "menu",
   canonicalName: "Menu",
-  version: "0.0.2",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -623,7 +606,6 @@ var menuRegistryItem = {
 var menubarRegistryItem = {
   name: "menubar",
   canonicalName: "Menubar",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -659,7 +641,6 @@ var menubarRegistryItem = {
 var meterRegistryItem = {
   name: "meter",
   canonicalName: "Meter",
-  version: "0.0.1",
   type: "component",
   category: "data-display",
   aliases: [],
@@ -695,7 +676,6 @@ var meterRegistryItem = {
 var numberFieldRegistryItem = {
   name: "number-field",
   canonicalName: "NumberField",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -731,7 +711,6 @@ var numberFieldRegistryItem = {
 var navigationMenuRegistryItem = {
   name: "navigation-menu",
   canonicalName: "NavigationMenu",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -768,7 +747,6 @@ var navigationMenuRegistryItem = {
 var popoverRegistryItem = {
   name: "popover",
   canonicalName: "Popover",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -805,7 +783,6 @@ var popoverRegistryItem = {
 var previewCardRegistryItem = {
   name: "preview-card",
   canonicalName: "PreviewCard",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: [],
@@ -841,7 +818,6 @@ var previewCardRegistryItem = {
 var progressRegistryItem = {
   name: "progress",
   canonicalName: "Progress",
-  version: "0.0.2",
   type: "component",
   category: "feedback",
   aliases: ["progress-bar"],
@@ -877,7 +853,6 @@ var progressRegistryItem = {
 var radioGroupRegistryItem = {
   name: "radio-group",
   canonicalName: "RadioGroup",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: ["radio"],
@@ -913,7 +888,6 @@ var radioGroupRegistryItem = {
 var selectRegistryItem = {
   name: "select",
   canonicalName: "Select",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -950,7 +924,6 @@ var selectRegistryItem = {
 var separatorRegistryItem = {
   name: "separator",
   canonicalName: "Separator",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: ["divider"],
@@ -986,7 +959,6 @@ var separatorRegistryItem = {
 var sliderRegistryItem = {
   name: "slider",
   canonicalName: "Slider",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: ["range"],
@@ -1022,7 +994,6 @@ var sliderRegistryItem = {
 var switchRegistryItem = {
   name: "switch",
   canonicalName: "Switch",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: ["toggle-switch"],
@@ -1054,11 +1025,40 @@ var switchRegistryItem = {
   target: "src/components/ui/Switch"
 };
 
+// src/items/table.ts
+var tableRegistryItem = {
+  name: "table",
+  canonicalName: "Table",
+  type: "component",
+  category: "data-display",
+  aliases: [],
+  files: [
+    "primitives/Table/Table.tsx",
+    "primitives/Table/Table.types.ts",
+    "primitives/Table/Table.variants.ts"
+  ],
+  remoteFiles: [
+    {
+      path: "primitives/Table/Table.tsx"
+    },
+    {
+      path: "primitives/Table/Table.types.ts"
+    },
+    {
+      path: "primitives/Table/Table.variants.ts"
+    }
+  ],
+  dependencies: ["class-variance-authority", "clsx", "tailwind-merge"],
+  registryDependencies: [],
+  utilities: ["cn"],
+  styles: ["theme"],
+  target: "src/components/ui/Table"
+};
+
 // src/items/tabs.ts
 var tabsRegistryItem = {
   name: "tabs",
   canonicalName: "Tabs",
-  version: "0.0.1",
   type: "component",
   category: "navigation",
   aliases: ["tab"],
@@ -1094,7 +1094,6 @@ var tabsRegistryItem = {
 var textareaRegistryItem = {
   name: "textarea",
   canonicalName: "Textarea",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1130,7 +1129,6 @@ var textareaRegistryItem = {
 var toastRegistryItem = {
   name: "toast",
   canonicalName: "Toast",
-  version: "0.0.1",
   type: "component",
   category: "feedback",
   aliases: [],
@@ -1167,7 +1165,6 @@ var toastRegistryItem = {
 var toggleGroupRegistryItem = {
   name: "toggle-group",
   canonicalName: "ToggleGroup",
-  version: "0.0.1",
   type: "component",
   category: "actions",
   aliases: [],
@@ -1203,7 +1200,6 @@ var toggleGroupRegistryItem = {
 var toggleRegistryItem = {
   name: "toggle",
   canonicalName: "Toggle",
-  version: "0.0.1",
   type: "component",
   category: "actions",
   aliases: ["toggle-button"],
@@ -1239,7 +1235,6 @@ var toggleRegistryItem = {
 var toolbarRegistryItem = {
   name: "toolbar",
   canonicalName: "Toolbar",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: [],
@@ -1275,7 +1270,6 @@ var toolbarRegistryItem = {
 var tooltipRegistryItem = {
   name: "tooltip",
   canonicalName: "Tooltip",
-  version: "0.0.1",
   type: "component",
   category: "overlays",
   aliases: ["hint"],
@@ -1311,7 +1305,6 @@ var tooltipRegistryItem = {
 var scrollAreaRegistryItem = {
   name: "scroll-area",
   canonicalName: "ScrollArea",
-  version: "0.0.1",
   type: "component",
   category: "layout",
   aliases: ["scroll"],
@@ -1347,7 +1340,6 @@ var scrollAreaRegistryItem = {
 var dashboardShellRegistryItem = {
   name: "dashboard-shell",
   canonicalName: "DashboardShell",
-  version: "0.0.2",
   type: "block",
   category: "layout",
   aliases: ["dashboard-template"],
@@ -1367,7 +1359,6 @@ var dashboardShellRegistryItem = {
 var formFieldRegistryItem = {
   name: "form-field",
   canonicalName: "FormField",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: [],
@@ -1387,7 +1378,6 @@ var formFieldRegistryItem = {
 var settingsPanelRegistryItem = {
   name: "settings-panel",
   canonicalName: "SettingsPanel",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: ["settings-section"],
@@ -1407,7 +1397,6 @@ var settingsPanelRegistryItem = {
 var sidebarRegistryItem = {
   name: "sidebar",
   canonicalName: "Sidebar",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: [],
@@ -1427,7 +1416,6 @@ var sidebarRegistryItem = {
 var autocompleteRegistryItem = {
   name: "autocomplete",
   canonicalName: "Autocomplete",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1464,7 +1452,6 @@ var autocompleteRegistryItem = {
 var checkboxGroupRegistryItem = {
   name: "checkbox-group",
   canonicalName: "CheckboxGroup",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1500,7 +1487,6 @@ var checkboxGroupRegistryItem = {
 var comboboxRegistryItem = {
   name: "combobox",
   canonicalName: "Combobox",
-  version: "0.0.2",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1537,7 +1523,6 @@ var comboboxRegistryItem = {
 var authFormRegistryItem = {
   name: "auth-form",
   canonicalName: "AuthForm",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: ["login-form"],
@@ -1557,7 +1542,6 @@ var authFormRegistryItem = {
 var commandPaletteRegistryItem = {
   name: "command-palette",
   canonicalName: "CommandPalette",
-  version: "0.0.2",
   type: "block",
   category: "blocks",
   aliases: ["command-menu", "kbar"],
@@ -1577,7 +1561,6 @@ var commandPaletteRegistryItem = {
 var otpFieldRegistryItem = {
   name: "otp-field",
   canonicalName: "OtpField",
-  version: "0.0.1",
   type: "component",
   category: "forms",
   aliases: [],
@@ -1609,6 +1592,25 @@ var otpFieldRegistryItem = {
   target: "src/components/ui/OtpField"
 };
 
+// src/items/empty.ts
+var emptyRegistryItem = {
+  name: "empty",
+  canonicalName: "Empty",
+  type: "block",
+  category: "layout",
+  aliases: ["empty-state"],
+  files: [
+    "blocks/Empty/Empty.tsx",
+    "blocks/Empty/Empty.types.ts",
+    "blocks/Empty/Empty.variants.ts"
+  ],
+  dependencies: ["clsx", "tailwind-merge"],
+  registryDependencies: [],
+  utilities: ["cn"],
+  styles: ["theme"],
+  target: "src/components/ui/Empty"
+};
+
 // src/items/index.ts
 var registryItems = [
   accordionRegistryItem,
@@ -1640,6 +1642,7 @@ var registryItems = [
   separatorRegistryItem,
   sliderRegistryItem,
   switchRegistryItem,
+  tableRegistryItem,
   tabsRegistryItem,
   textareaRegistryItem,
   toastRegistryItem,
@@ -1657,7 +1660,8 @@ var registryItems = [
   autocompleteRegistryItem,
   checkboxGroupRegistryItem,
   comboboxRegistryItem,
-  otpFieldRegistryItem
+  otpFieldRegistryItem,
+  emptyRegistryItem
 ];
 
 // src/styles/theme.ts
@@ -1706,9 +1710,6 @@ var validateRegistryItem = (item) => {
   if (isEmpty(item.canonicalName)) {
     throw new Error(`Registry item "${item.name}" has invalid 'canonicalName'`);
   }
-  if (isEmpty(item.version)) {
-    throw new Error(`Registry item "${item.name}" has invalid 'version'`);
-  }
   if (!item.files || !item.files.length) {
     throw new Error(
       `Registry item "${item.name}" must define at least one file`
@@ -2161,4 +2162,4 @@ var registryManifest = {
   utilities: registryUtilities
 };
 
-export { accordionRegistryItem, alertDialogRegistryItem, alertRegistryItem, authFormRegistryItem, autocompleteRegistryItem, avatarRegistryItem, badgeRegistryItem, buttonRegistryItem, cardRegistryItem, checkboxGroupRegistryItem, checkboxRegistryItem, cnRegistryUtility, collapsibleRegistryItem, comboboxRegistryItem, commandPaletteRegistryItem, contextMenuRegistryItem, dashboardShellRegistryItem, dialogRegistryItem, drawerRegistryItem, fieldRegistryItem, fieldsetRegistryItem, formFieldRegistryItem, formRegistryItem, getInstallLayer, inputRegistryItem, menuRegistryItem, menubarRegistryItem, meterRegistryItem, navigationMenuRegistryItem, numberFieldRegistryItem, otpFieldRegistryItem, popoverRegistryItem, previewCardRegistryItem, progressRegistryItem, radioGroupRegistryItem, registryItems, registryManifest, registryStyles, registryUtilities, registryVersion, scrollAreaRegistryItem, selectRegistryItem, separatorRegistryItem, settingsPanelRegistryItem, sidebarRegistryItem, sliderRegistryItem, switchRegistryItem, tabsRegistryItem, textareaRegistryItem, themeRegistryStyle, toastRegistryItem, toggleGroupRegistryItem, toggleRegistryItem, toolbarRegistryItem, tooltipRegistryItem, validateRegistry, validateRegistryItem };
+export { accordionRegistryItem, alertDialogRegistryItem, alertRegistryItem, authFormRegistryItem, autocompleteRegistryItem, avatarRegistryItem, badgeRegistryItem, buttonRegistryItem, cardRegistryItem, checkboxGroupRegistryItem, checkboxRegistryItem, cnRegistryUtility, collapsibleRegistryItem, comboboxRegistryItem, commandPaletteRegistryItem, contextMenuRegistryItem, dashboardShellRegistryItem, dialogRegistryItem, drawerRegistryItem, emptyRegistryItem, fieldRegistryItem, fieldsetRegistryItem, formFieldRegistryItem, formRegistryItem, getInstallLayer, inputRegistryItem, menuRegistryItem, menubarRegistryItem, meterRegistryItem, navigationMenuRegistryItem, numberFieldRegistryItem, otpFieldRegistryItem, popoverRegistryItem, previewCardRegistryItem, progressRegistryItem, radioGroupRegistryItem, registryItems, registryManifest, registryStyles, registryUtilities, registryVersion, scrollAreaRegistryItem, selectRegistryItem, separatorRegistryItem, settingsPanelRegistryItem, sidebarRegistryItem, sliderRegistryItem, switchRegistryItem, tableRegistryItem, tabsRegistryItem, textareaRegistryItem, themeRegistryStyle, toastRegistryItem, toggleGroupRegistryItem, toggleRegistryItem, toolbarRegistryItem, tooltipRegistryItem, validateRegistry, validateRegistryItem };

package/dist/items/empty.d.ts

@@ -0,0 +1,7 @@
+/**
+ * empty.ts
+ *
+ * Registry metadata for the Empty block.
+ */
+import type { RegistryItem } from "../registry.types.js";
+export declare const emptyRegistryItem: RegistryItem;

package/dist/items/index.d.ts

@@ -46,4 +46,6 @@ export { comboboxRegistryItem } from "./combobox.js";
 export { authFormRegistryItem } from "./auth-form.js";
 export { commandPaletteRegistryItem } from "./command-palette.js";
 export { otpFieldRegistryItem } from "./otp-field.js";
+export { emptyRegistryItem } from "./empty.js";
+export { tableRegistryItem } from "./table.js";
 export declare const registryItems: RegistryItem[];

package/dist/items/table.d.ts

@@ -0,0 +1,7 @@
+/**
+ * table.ts
+ *
+ * Registry metadata for the Table component.
+ */
+import type { RegistryItem } from "../registry.types.js";
+export declare const tableRegistryItem: RegistryItem;

package/dist/registry.types.d.ts

@@ -26,7 +26,6 @@ export type RegistryItemCategory = "actions" | "forms" | "overlays" | "navigatio
 export interface RegistryItem {
     name: string;
     canonicalName: string;
-    version: string;
     type: RegistryItemType;
     category: RegistryItemCategory;
     aliases: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dalexto/lexsys-registry",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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,7 @@ import type {
   AuthFormProps,
   AuthFormSubmitProps,
 } from "./AuthForm.types"
-import { authFormFieldsClassName, authFormVariants } from "./AuthForm.variants"
+import { authFormFieldsClassName, authFormClasses } from "./AuthForm.variants"
 import { cn } from "@/lib/utils"
 
 const AuthForm = ({
@@ -35,7 +35,7 @@ const AuthForm = ({
   }
 
   return (
-    <Card className={cn(authFormVariants(), className)} {...cardProps}>
+    <Card className={cn(authFormClasses(), className)} {...cardProps}>
       <form ref={ref} onSubmit={handleSubmit}>
         {children}
       </form>
@@ -71,7 +71,7 @@ const AuthFormFooter = ({ ref, className, ...props }: AuthFormFooterProps) => {
   return (
     <CardFooter
       ref={ref}
-      className={cn("flex-col gap-(--lsys-space-3)", className)}
+      className={cn("flex-col gap-(--lex-space-3)", className)}
       {...props}
     />
   )

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

@@ -4,8 +4,8 @@
  * Variant classes for the AuthForm block.
  */
 
-export const authFormVariants = (): string => {
-  return "lsys-auth-form w-full text-(--lsys-color-text-primary)"
+export const authFormClasses = (): string => {
+  return "lex-auth-form w-full text-(--lex-color-text-primary)"
 }
 
-export const authFormFieldsClassName = "flex flex-col gap-(--lsys-space-4)"
+export const authFormFieldsClassName = "flex flex-col gap-(--lex-space-4)"

package/templates/blocks/CommandPalette/CommandPalette.tsx

@@ -33,13 +33,13 @@ import type {
   CommandPaletteTitleProps,
 } from "./CommandPalette.types"
 import {
-  commandPaletteEmptyClassName,
-  commandPaletteGroupLabelClassName,
-  commandPaletteInputClassName,
-  commandPaletteItemClassName,
-  commandPaletteItemDescriptionClassName,
-  commandPaletteListClassName,
-  commandPaletteRootVariants,
+  commandPaletteEmptyClasses,
+  commandPaletteGroupLabelClasses,
+  commandPaletteInputClasses,
+  commandPaletteItemClasses,
+  commandPaletteItemDescriptionClasses,
+  commandPaletteListClasses,
+  commandPaletteRootClasses,
 } from "./CommandPalette.variants"
 import { cn } from "@/lib/utils"
 
@@ -61,7 +61,7 @@ const CommandPaletteContent = ({
       <DialogViewport>
         <DialogPopup
           ref={ref}
-          className={cn(commandPaletteRootVariants(), className)}
+          className={cn(commandPaletteRootClasses, className)}
           {...props}
         >
           {children}
@@ -116,7 +116,7 @@ const CommandPaletteInput = ({
     <Input
       ref={ref}
       autoFocus
-      className={cn(commandPaletteInputClassName, className)}
+      className={cn(commandPaletteInputClasses, className)}
       aria-label="Search commands"
       {...props}
     />
@@ -138,7 +138,7 @@ const CommandPaletteList = ({
   ...props
 }: CommandPaletteListProps) => {
   return (
-    <ScrollArea className={cn(commandPaletteListClassName, className)}>
+    <ScrollArea className={cn(commandPaletteListClasses, className)}>
       <ScrollAreaViewport>
         <ScrollAreaContent ref={ref} {...props}>
           {children}
@@ -174,7 +174,7 @@ const CommandPaletteGroupLabel = ({
   return (
     <h3
       ref={ref}
-      className={cn(commandPaletteGroupLabelClassName, className)}
+      className={cn(commandPaletteGroupLabelClasses, className)}
       {...props}
     >
       {children}
@@ -196,12 +196,12 @@ const CommandPaletteItem = ({
     <button
       ref={ref}
       type={type}
-      className={cn(commandPaletteItemClassName, className)}
+      className={cn(commandPaletteItemClasses, className)}
       {...props}
     >
       <span>{children}</span>
       {description ? (
-        <span className={commandPaletteItemDescriptionClassName}>
+        <span className={commandPaletteItemDescriptionClasses}>
           {description}
         </span>
       ) : null}
@@ -220,7 +220,7 @@ const CommandPaletteEmpty = ({
   return (
     <p
       ref={ref}
-      className={cn(commandPaletteEmptyClassName, className)}
+      className={cn(commandPaletteEmptyClasses, className)}
       {...props}
     >
       {children}

package/templates/blocks/CommandPalette/CommandPalette.types.ts

@@ -23,9 +23,7 @@ export interface CommandPaletteContentProps extends HTMLAttributes<HTMLDivElemen
   children?: ReactNode
 }
 
-export interface CommandPaletteInputProps extends InputProps {
-  ref?: Ref<HTMLInputElement>
-}
+export type CommandPaletteInputProps = InputProps
 
 export type CommandPaletteSeparatorProps = Record<string, never>
 
@@ -60,14 +58,10 @@ export interface CommandPaletteEmptyProps extends HTMLAttributes<HTMLParagraphEl
   children?: ReactNode
 }
 
-export interface CommandPaletteTitleProps {
+export interface CommandPaletteTitleProps extends HTMLAttributes<HTMLHeadingElement> {
   ref?: Ref<HTMLHeadingElement>
-  className?: string
-  children?: ReactNode
 }
 
-export interface CommandPaletteDescriptionProps {
+export interface CommandPaletteDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
   ref?: Ref<HTMLParagraphElement>
-  className?: string
-  children?: ReactNode
 }