@dalexto/lexsys-registry 0.0.2 → 0.0.3

package/dist/index.js

@@ -1609,6 +1609,26 @@ var otpFieldRegistryItem = {
   target: "src/components/ui/OtpField"
 };
 
+// src/items/empty.ts
+var emptyRegistryItem = {
+  name: "empty",
+  canonicalName: "Empty",
+  version: "0.0.3",
+  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,
@@ -1657,7 +1677,8 @@ var registryItems = [
   autocompleteRegistryItem,
   checkboxGroupRegistryItem,
   comboboxRegistryItem,
-  otpFieldRegistryItem
+  otpFieldRegistryItem,
+  emptyRegistryItem
 ];
 
 // src/styles/theme.ts
@@ -2161,4 +2182,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, 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,5 @@ 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 declare const registryItems: RegistryItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dalexto/lexsys-registry",
-  "version": "0.0.2",
+  "version": "0.0.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,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
 }

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)"
 }