@dalexto/lexsys-registry 0.0.2

package/templates/blocks/AuthForm/AuthForm.tsx

@@ -0,0 +1,109 @@
+/**
+ * AuthForm.tsx
+ *
+ * Reference AuthForm block — compound Card form shell for auth screens.
+ */
+
+import type { FormEvent } from "react"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "../../primitives/Card/Card"
+import { Button } from "../../primitives/Button/Button"
+import type {
+  AuthFormContentProps,
+  AuthFormFooterProps,
+  AuthFormHeaderProps,
+  AuthFormProps,
+  AuthFormSubmitProps,
+} from "./AuthForm.types"
+import { authFormFieldsClassName, authFormVariants } from "./AuthForm.variants"
+import { cn } from "@/lib/utils"
+
+const AuthForm = ({
+  ref,
+  className,
+  onSubmit,
+  children,
+  ...cardProps
+}: AuthFormProps) => {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    onSubmit?.(event)
+  }
+
+  return (
+    <Card className={cn(authFormVariants(), className)} {...cardProps}>
+      <form ref={ref} onSubmit={handleSubmit}>
+        {children}
+      </form>
+    </Card>
+  )
+}
+
+AuthForm.displayName = "AuthForm"
+
+const AuthFormHeader = ({ ref, className, ...props }: AuthFormHeaderProps) => {
+  return <CardHeader ref={ref} className={className} {...props} />
+}
+
+AuthFormHeader.displayName = "AuthFormHeader"
+
+const AuthFormContent = ({
+  ref,
+  className,
+  ...props
+}: AuthFormContentProps) => {
+  return (
+    <CardContent
+      ref={ref}
+      className={cn(authFormFieldsClassName, className)}
+      {...props}
+    />
+  )
+}
+
+AuthFormContent.displayName = "AuthFormContent"
+
+const AuthFormFooter = ({ ref, className, ...props }: AuthFormFooterProps) => {
+  return (
+    <CardFooter
+      ref={ref}
+      className={cn("flex-col gap-(--lsys-space-3)", className)}
+      {...props}
+    />
+  )
+}
+
+AuthFormFooter.displayName = "AuthFormFooter"
+
+const AuthFormSubmit = ({
+  isLoading = false,
+  disabled,
+  children = "Submit",
+  ...props
+}: AuthFormSubmitProps) => {
+  return (
+    <Button
+      type="submit"
+      className="w-full"
+      isLoading={isLoading}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}
+
+AuthFormSubmit.displayName = "AuthFormSubmit"
+
+export {
+  AuthForm,
+  AuthFormHeader,
+  AuthFormContent,
+  AuthFormFooter,
+  AuthFormSubmit,
+}

package/templates/blocks/AuthForm/AuthForm.types.ts

@@ -0,0 +1,34 @@
+/**
+ * AuthForm.types.ts
+ *
+ * Public types for the AuthForm block.
+ */
+
+import type { FormEventHandler, ReactNode, Ref } from "react"
+import type { CardProps } from "../../primitives/Card/Card.types"
+import type { ButtonProps } from "../../primitives/Button/Button.types"
+import type {
+  CardContentProps,
+  CardFooterProps,
+  CardHeaderProps,
+} from "../../primitives/Card/Card.types"
+
+export interface AuthFormProps extends Omit<
+  CardProps,
+  "children" | "ref" | "onSubmit"
+> {
+  ref?: Ref<HTMLFormElement>
+  className?: CardProps["className"]
+  onSubmit?: FormEventHandler<HTMLFormElement>
+  children?: ReactNode
+}
+
+export type AuthFormHeaderProps = CardHeaderProps
+
+export type AuthFormContentProps = CardContentProps
+
+export type AuthFormFooterProps = CardFooterProps
+
+export interface AuthFormSubmitProps extends Omit<ButtonProps, "type"> {
+  isLoading?: boolean
+}

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

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

package/templates/blocks/CommandPalette/CommandPalette.tsx

@@ -0,0 +1,245 @@
+/**
+ * CommandPalette.tsx
+ *
+ * Reference CommandPalette block — compound Dialog command surface.
+ */
+
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogDescription,
+  DialogPopup,
+  DialogPortal,
+  DialogTitle,
+  DialogViewport,
+} from "../../primitives/Dialog/Dialog"
+import { Input } from "../../primitives/Input/Input"
+import { Separator } from "../../primitives/Separator/Separator"
+import {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaViewport,
+} from "../../primitives/ScrollArea/ScrollArea"
+import type {
+  CommandPaletteContentProps,
+  CommandPaletteDescriptionProps,
+  CommandPaletteEmptyProps,
+  CommandPaletteGroupLabelProps,
+  CommandPaletteGroupProps,
+  CommandPaletteInputProps,
+  CommandPaletteItemProps,
+  CommandPaletteListProps,
+  CommandPaletteProps,
+  CommandPaletteTitleProps,
+} from "./CommandPalette.types"
+import {
+  commandPaletteEmptyClassName,
+  commandPaletteGroupLabelClassName,
+  commandPaletteInputClassName,
+  commandPaletteItemClassName,
+  commandPaletteItemDescriptionClassName,
+  commandPaletteListClassName,
+  commandPaletteRootVariants,
+} from "./CommandPalette.variants"
+import { cn } from "@/lib/utils"
+
+const CommandPalette = ({ children, ...props }: CommandPaletteProps) => {
+  return <Dialog {...props}>{children}</Dialog>
+}
+
+CommandPalette.displayName = "CommandPalette"
+
+const CommandPaletteContent = ({
+  ref,
+  className,
+  children,
+  ...props
+}: CommandPaletteContentProps) => {
+  return (
+    <DialogPortal>
+      <DialogBackdrop />
+      <DialogViewport>
+        <DialogPopup
+          ref={ref}
+          className={cn(commandPaletteRootVariants(), className)}
+          {...props}
+        >
+          {children}
+        </DialogPopup>
+      </DialogViewport>
+    </DialogPortal>
+  )
+}
+
+CommandPaletteContent.displayName = "CommandPaletteContent"
+
+const CommandPaletteTitle = ({
+  ref,
+  className,
+  children,
+  ...props
+}: CommandPaletteTitleProps) => {
+  return (
+    <DialogTitle ref={ref} className={className} {...props}>
+      {children}
+    </DialogTitle>
+  )
+}
+
+CommandPaletteTitle.displayName = "CommandPaletteTitle"
+
+const CommandPaletteDescription = ({
+  ref,
+  className,
+  children,
+  ...props
+}: CommandPaletteDescriptionProps) => {
+  return (
+    <DialogDescription
+      ref={ref}
+      className={cn("sr-only", className)}
+      {...props}
+    >
+      {children}
+    </DialogDescription>
+  )
+}
+
+CommandPaletteDescription.displayName = "CommandPaletteDescription"
+
+const CommandPaletteInput = ({
+  ref,
+  className,
+  ...props
+}: CommandPaletteInputProps) => {
+  return (
+    <Input
+      ref={ref}
+      autoFocus
+      className={cn(commandPaletteInputClassName, className)}
+      aria-label="Search commands"
+      {...props}
+    />
+  )
+}
+
+CommandPaletteInput.displayName = "CommandPaletteInput"
+
+const CommandPaletteSeparator = () => {
+  return <Separator />
+}
+
+CommandPaletteSeparator.displayName = "CommandPaletteSeparator"
+
+const CommandPaletteList = ({
+  ref,
+  className,
+  children,
+  ...props
+}: CommandPaletteListProps) => {
+  return (
+    <ScrollArea className={cn(commandPaletteListClassName, className)}>
+      <ScrollAreaViewport>
+        <ScrollAreaContent ref={ref} {...props}>
+          {children}
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+    </ScrollArea>
+  )
+}
+
+CommandPaletteList.displayName = "CommandPaletteList"
+
+const CommandPaletteGroup = ({
+  ref,
+  className,
+  children,
+  ...props
+}: CommandPaletteGroupProps) => {
+  return (
+    <section ref={ref} className={className} {...props}>
+      {children}
+    </section>
+  )
+}
+
+CommandPaletteGroup.displayName = "CommandPaletteGroup"
+
+const CommandPaletteGroupLabel = ({
+  ref,
+  className,
+  children,
+  ...props
+}: CommandPaletteGroupLabelProps) => {
+  return (
+    <h3
+      ref={ref}
+      className={cn(commandPaletteGroupLabelClassName, className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  )
+}
+
+CommandPaletteGroupLabel.displayName = "CommandPaletteGroupLabel"
+
+const CommandPaletteItem = ({
+  ref,
+  description,
+  className,
+  children,
+  type = "button",
+  ...props
+}: CommandPaletteItemProps) => {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(commandPaletteItemClassName, className)}
+      {...props}
+    >
+      <span>{children}</span>
+      {description ? (
+        <span className={commandPaletteItemDescriptionClassName}>
+          {description}
+        </span>
+      ) : null}
+    </button>
+  )
+}
+
+CommandPaletteItem.displayName = "CommandPaletteItem"
+
+const CommandPaletteEmpty = ({
+  ref,
+  className,
+  children = "No commands found.",
+  ...props
+}: CommandPaletteEmptyProps) => {
+  return (
+    <p
+      ref={ref}
+      className={cn(commandPaletteEmptyClassName, className)}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
+CommandPaletteEmpty.displayName = "CommandPaletteEmpty"
+
+export {
+  CommandPalette,
+  CommandPaletteContent,
+  CommandPaletteTitle,
+  CommandPaletteDescription,
+  CommandPaletteInput,
+  CommandPaletteSeparator,
+  CommandPaletteList,
+  CommandPaletteGroup,
+  CommandPaletteGroupLabel,
+  CommandPaletteItem,
+  CommandPaletteEmpty,
+}

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

@@ -0,0 +1,73 @@
+/**
+ * CommandPalette.types.ts
+ *
+ * Public types for the CommandPalette block.
+ */
+
+import type {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+} from "react"
+import type { DialogProps } from "../../primitives/Dialog/Dialog.types"
+import type { InputProps } from "../../primitives/Input/Input.types"
+
+export interface CommandPaletteProps extends DialogProps {
+  children?: ReactNode
+}
+
+export interface CommandPaletteContentProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface CommandPaletteInputProps extends InputProps {
+  ref?: Ref<HTMLInputElement>
+}
+
+export type CommandPaletteSeparatorProps = Record<string, never>
+
+export interface CommandPaletteListProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface CommandPaletteGroupProps extends HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface CommandPaletteGroupLabelProps extends HTMLAttributes<HTMLHeadingElement> {
+  ref?: Ref<HTMLHeadingElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface CommandPaletteItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  ref?: Ref<HTMLButtonElement>
+  description?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export interface CommandPaletteEmptyProps extends HTMLAttributes<HTMLParagraphElement> {
+  ref?: Ref<HTMLParagraphElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface CommandPaletteTitleProps {
+  ref?: Ref<HTMLHeadingElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface CommandPaletteDescriptionProps {
+  ref?: Ref<HTMLParagraphElement>
+  className?: string
+  children?: ReactNode
+}

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

@@ -0,0 +1,26 @@
+/**
+ * CommandPalette.variants.ts
+ *
+ * Variant classes for the CommandPalette block.
+ */
+
+export const commandPaletteRootVariants = (): string => {
+  return "lsys-command-palette flex flex-col gap-(--lsys-space-2)"
+}
+
+export const commandPaletteInputClassName = "w-full"
+
+export const commandPaletteListClassName =
+  "flex max-h-(--lsys-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 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 commandPaletteItemDescriptionClassName =
+  "text-(length:--lsys-typography-body-xs-font-size) text-(--lsys-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)"

package/templates/blocks/FormField/FormField.tsx

@@ -0,0 +1,83 @@
+/**
+ * FormField.tsx
+ *
+ * Reference FormField block — compound re-export of Field primitives with block styling.
+ */
+
+import {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldItem,
+  FieldLabel,
+} from "../../primitives/Field/Field"
+import type {
+  FormFieldControlProps,
+  FormFieldDescriptionProps,
+  FormFieldErrorProps,
+  FormFieldItemProps,
+  FormFieldLabelProps,
+  FormFieldProps,
+} from "./FormField.types"
+import { formFieldVariants } from "./FormField.variants"
+import { cn } from "@/lib/utils"
+
+const FormField = ({ ref, className, ...props }: FormFieldProps) => {
+  return (
+    <Field
+      ref={ref}
+      className={cn(formFieldVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+FormField.displayName = "FormField"
+
+const FormFieldItem = ({ ref, className, ...props }: FormFieldItemProps) => {
+  return <FieldItem ref={ref} className={className} {...props} />
+}
+
+FormFieldItem.displayName = "FormFieldItem"
+
+const FormFieldLabel = ({ ref, className, ...props }: FormFieldLabelProps) => {
+  return <FieldLabel ref={ref} className={className} {...props} />
+}
+
+FormFieldLabel.displayName = "FormFieldLabel"
+
+const FormFieldControl = ({
+  ref,
+  className,
+  ...props
+}: FormFieldControlProps) => {
+  return <FieldControl ref={ref} className={className} {...props} />
+}
+
+FormFieldControl.displayName = "FormFieldControl"
+
+const FormFieldDescription = ({
+  ref,
+  className,
+  ...props
+}: FormFieldDescriptionProps) => {
+  return <FieldDescription ref={ref} className={className} {...props} />
+}
+
+FormFieldDescription.displayName = "FormFieldDescription"
+
+const FormFieldError = ({ ref, className, ...props }: FormFieldErrorProps) => {
+  return <FieldError ref={ref} className={className} {...props} />
+}
+
+FormFieldError.displayName = "FormFieldError"
+
+export {
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormFieldControl,
+  FormFieldDescription,
+  FormFieldError,
+}

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

@@ -0,0 +1,26 @@
+/**
+ * FormField.types.ts
+ *
+ * Public types for the FormField block.
+ */
+
+import type {
+  FieldControlProps,
+  FieldDescriptionProps,
+  FieldErrorProps,
+  FieldItemProps,
+  FieldLabelProps,
+  FieldProps,
+} from "../../primitives/Field/Field.types"
+
+export type FormFieldProps = FieldProps
+
+export type FormFieldItemProps = FieldItemProps
+
+export type FormFieldLabelProps = FieldLabelProps
+
+export type FormFieldControlProps = FieldControlProps
+
+export type FormFieldDescriptionProps = FieldDescriptionProps
+
+export type FormFieldErrorProps = FieldErrorProps

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

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