@nikala-ui/core 0.9.12 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikala-ui/core",
-  "version": "0.9.12",
+  "version": "0.10.1",
   "description": "Core component definitions, design tokens, and registry for Nikala UI",
   "type": "module",
   "private": false,

package/registry/button.json

@@ -8,10 +8,13 @@
     "tailwind-merge",
     "class-variance-authority"
   ],
+  "registryDependencies": [
+    "spinner"
+  ],
   "files": [
     {
       "path": "ui/button.tsx",
-      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Class variance authority configuration for button styling variants and sizes.\n */\nexport const buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90 border border-primary/50\",\n        destructive:\n          \"bg-red-600 text-zinc-50 shadow-sm hover:bg-red-600/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        success: \"*:bg-green-600 text-zinc-50 shadow-sm hover:bg-green-600/90 dark:bg-green-900 dark:text-zinc-50 dark:hover:bg-green-900/90\",\n        warning: \"*:bg-yellow-600 text-zinc-50 shadow-sm hover:bg-yellow-600/90 dark:bg-yellow-900 dark:text-zinc-50 dark:hover:bg-yellow-900/90\",\n        info: \"*:bg-blue-600 text-zinc-50 shadow-sm hover:bg-blue-600/90 dark:bg-blue-900 dark:text-zinc-50 dark:hover:bg-blue-900/90\",\n      },\n      size: {\n        xs: \"h-6 rounded-md px-2 text-xs\",\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Props interface for the Button component extending standard HTML button attributes.\n */\nexport interface ButtonProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  class?: string;\n}\n\n/**\n * Nikala UI Button component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Button: Component<ButtonProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity for destructured props\n  const [local, rest] = splitProps(props, [\"variant\", \"size\", \"class\", \"children\"]);\n\n  return (\n    <button\n      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};",
+      "content": "import { Show, splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\nimport { Spinner } from \"./spinner\";\n\n/**\n * Class variance authority configuration for button styling variants and sizes.\n */\nexport const buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90 border border-primary/50\",\n        destructive:\n          \"bg-red-600 text-zinc-50 shadow-sm hover:bg-red-600/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        success: \"*:bg-green-600 text-zinc-50 shadow-sm hover:bg-green-600/90 dark:bg-green-900 dark:text-zinc-50 dark:hover:bg-green-900/90\",\n        warning: \"*:bg-yellow-600 text-zinc-50 shadow-sm hover:bg-yellow-600/90 dark:bg-yellow-900 dark:text-zinc-50 dark:hover:bg-yellow-900/90\",\n        info: \"*:bg-blue-600 text-zinc-50 shadow-sm hover:bg-blue-600/90 dark:bg-blue-900 dark:text-zinc-50 dark:hover:bg-blue-900/90\",\n      },\n      size: {\n        xs: \"h-6 rounded-md px-2 text-xs\",\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Props interface for the Button component extending standard HTML button attributes.\n */\nexport interface ButtonProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** Shows a loading spinner and prevents repeated clicks while active. */\n  loading?: boolean;\n  class?: string;\n}\n\n/**\n * Nikala UI Button component built for SolidJS with Tailwind CSS v4 styling.\n */\nexport const Button: Component<ButtonProps> = (props) => {\n  // Use splitProps to preserve SolidJS reactivity for destructured props\n  const [local, rest] = splitProps(props, [\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"children\",\n    \"loading\",\n    \"disabled\",\n  ]);\n\n  return (\n    <button\n      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}\n      disabled={local.disabled || local.loading}\n      aria-busy={local.loading ? \"true\" : undefined}\n      {...rest}\n    >\n      <Show when={local.loading}>\n        <Spinner size=\"sm\" class=\"text-current\" />\n      </Show>\n      {local.children}\n    </button>\n  );\n};\n",
       "type": "registry:ui"
     }
   ]

package/registry/create-form.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "hooks/create-form.ts",
-      "content": "import { createSignal, createMemo, type Accessor } from \"solid-js\";\n\nexport type FormErrors<T> = Partial<Record<keyof T, string>>;\nexport type FormTouched<T> = Partial<Record<keyof T, boolean>>;\n\nexport interface CreateFormOptions<T extends Record<string, any>> {\n  /** Initial form field values object */\n  initialValues: T;\n  /** Custom validation function returning error messages object */\n  validate?: (values: T) => FormErrors<T> | Promise<FormErrors<T>>;\n  /** Submit handler callback invoked when validation succeeds */\n  onSubmit?: (values: T) => void | Promise<void>;\n}\n\nexport interface CreateFormReturn<T extends Record<string, any>> {\n  /** Accessor for current form field values */\n  values: Accessor<T>;\n  /** Accessor for form field validation error messages */\n  errors: Accessor<FormErrors<T>>;\n  /** Accessor for form field touched states */\n  touched: Accessor<FormTouched<T>>;\n  /** Accessor indicating if form is currently submitting */\n  isSubmitting: Accessor<boolean>;\n  /** Accessor indicating if form has zero validation errors */\n  isValid: Accessor<boolean>;\n  /** Accessor indicating if form values differ from initial values */\n  isDirty: Accessor<boolean>;\n  /** Update specific form field value */\n  setFieldValue: <K extends keyof T>(field: K, value: T[K]) => void;\n  /** Set specific form field validation error */\n  setFieldError: <K extends keyof T>(field: K, error: string | undefined) => void;\n  /** Set specific form field touched state */\n  setFieldTouched: <K extends keyof T>(field: K, isTouched?: boolean) => void;\n  /** Input change event listener helper factory function */\n  handleChange: <K extends keyof T>(field: K) => (e: Event & { currentTarget: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement }) => void;\n  /** Input blur event listener helper factory function */\n  handleBlur: <K extends keyof T>(field: K) => () => void;\n  /** Form onSubmit event handler */\n  handleSubmit: (e?: Event) => void;\n  /** Reset form values, errors, and touched states to initial values */\n  resetForm: () => void;\n}\n\n/**\n * SolidJS reactive primitive for managing form field state, validation, errors, and submission.\n *\n * @param options Form configuration options including initialValues and validate function.\n */\nexport function createForm<T extends Record<string, any>>(\n  options: CreateFormOptions<T>\n): CreateFormReturn<T> {\n  const initialValues = { ...options.initialValues };\n\n  const [values, setValues] = createSignal<T>({ ...initialValues });\n  const [errors, setErrors] = createSignal<FormErrors<T>>({});\n  const [touched, setTouched] = createSignal<FormTouched<T>>({});\n  const [isSubmitting, setIsSubmitting] = createSignal(false);\n\n  const isDirty = createMemo(() => {\n    const current = values();\n    return Object.keys(initialValues).some((key) => current[key] !== initialValues[key]);\n  });\n\n  const isValid = createMemo(() => {\n    const errs = errors();\n    return Object.keys(errs).length === 0;\n  });\n\n  const runValidation = async (currentValues: T): Promise<FormErrors<T>> => {\n    if (!options.validate) return {};\n    const result = await options.validate(currentValues);\n    const newErrors = result || {};\n    setErrors(() => newErrors);\n    return newErrors;\n  };\n\n  const setFieldValue = <K extends keyof T>(field: K, value: T[K]) => {\n    const next = { ...values(), [field]: value };\n    setValues(() => next);\n    runValidation(next);\n  };\n\n  const setFieldError = <K extends keyof T>(field: K, error: string | undefined) => {\n    setErrors((prev) => {\n      const next = { ...prev };\n      if (error) next[field] = error;\n      else delete next[field];\n      return next;\n    });\n  };\n\n  const setFieldTouched = <K extends keyof T>(field: K, isTouched = true) => {\n    setTouched((prev) => ({ ...prev, [field]: isTouched }));\n  };\n\n  const handleChange = <K extends keyof T>(field: K) => {\n    return (e: Event & { currentTarget: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement }) => {\n      const val = e.currentTarget.value;\n      setFieldValue(field, val as any);\n    };\n  };\n\n  const handleBlur = <K extends keyof T>(field: K) => {\n    return () => {\n      setFieldTouched(field, true);\n    };\n  };\n\n  const handleSubmit = async (e?: Event) => {\n    e?.preventDefault();\n    setIsSubmitting(true);\n\n    // Mark all fields as touched on submit\n    const allTouched = Object.keys(values()).reduce((acc, key) => {\n      acc[key as keyof T] = true;\n      return acc;\n    }, {} as FormTouched<T>);\n    setTouched(() => allTouched);\n\n    const validationErrors = await runValidation(values());\n    if (Object.keys(validationErrors).length === 0) {\n      if (options.onSubmit) {\n        await options.onSubmit(values());\n      }\n    }\n\n    setIsSubmitting(false);\n  };\n\n  const resetForm = () => {\n    setValues(() => ({ ...initialValues }));\n    setErrors(() => ({}));\n    setTouched(() => ({}));\n    setIsSubmitting(false);\n  };\n\n  return {\n    values,\n    errors,\n    touched,\n    isSubmitting,\n    isValid,\n    isDirty,\n    setFieldValue,\n    setFieldError,\n    setFieldTouched,\n    handleChange,\n    handleBlur,\n    handleSubmit,\n    resetForm,\n  };\n}\n",
+      "content": "import { createSignal, createMemo, type Accessor } from \"solid-js\";\n\nexport type FormErrors<T> = Partial<Record<keyof T, string>>;\nexport type FormTouched<T> = Partial<Record<keyof T, boolean>>;\nexport type ValidateOn = \"change\" | \"blur\" | \"submit\";\n\nexport type FormInputEvent = Event & {\n  currentTarget:\n    | HTMLInputElement\n    | HTMLTextAreaElement\n    | HTMLSelectElement;\n};\n\nexport interface CreateFormOptions<T extends Record<string, any>> {\n  /** Initial form field values object */\n  initialValues: T;\n  /** Custom validation function returning error messages object */\n  validate?: (values: T) => FormErrors<T> | Promise<FormErrors<T>>;\n  /** Event that triggers validation. Defaults to \"change\". */\n  validateOn?: ValidateOn;\n  /** Submit handler callback invoked when validation succeeds */\n  onSubmit?: (values: T) => void | Promise<void>;\n}\n\nexport interface CreateFormReturn<T extends Record<string, any>> {\n  /** Accessor for current form field values */\n  values: Accessor<T>;\n  /** Accessor for form field validation error messages */\n  errors: Accessor<FormErrors<T>>;\n  /** Accessor for form field touched states */\n  touched: Accessor<FormTouched<T>>;\n  /** Accessor indicating if form is currently submitting */\n  isSubmitting: Accessor<boolean>;\n  /** Accessor containing an exception thrown by onSubmit, if any */\n  submitError: Accessor<unknown>;\n  /** Accessor indicating if form has zero validation errors */\n  isValid: Accessor<boolean>;\n  /** Accessor indicating if form values differ from initial values */\n  isDirty: Accessor<boolean>;\n  /** Update specific form field value */\n  setFieldValue: <K extends keyof T>(field: K, value: T[K]) => void;\n  /** Set specific form field validation error */\n  setFieldError: <K extends keyof T>(field: K, error: string | undefined) => void;\n  /** Set specific form field touched state */\n  setFieldTouched: <K extends keyof T>(field: K, isTouched?: boolean) => void;\n  /** Input change event listener helper factory function */\n  handleChange: <K extends keyof T>(field: K) => (e: FormInputEvent) => void;\n  /** Input blur event listener helper factory function */\n  handleBlur: <K extends keyof T>(field: K) => () => void;\n  /** Form onSubmit event handler */\n  handleSubmit: (e?: Event) => Promise<void>;\n  /** Reset form values, errors, and touched states to initial values */\n  resetForm: () => void;\n}\n\n/**\n * SolidJS reactive primitive for managing form field state, validation, errors, and submission.\n *\n * @param options Form configuration options including initialValues and validate function.\n */\nexport function createForm<T extends Record<string, any>>(\n  options: CreateFormOptions<T>\n): CreateFormReturn<T> {\n  const initialValues = { ...options.initialValues };\n\n  const [values, setValues] = createSignal<T>({ ...initialValues });\n  const [errors, setErrors] = createSignal<FormErrors<T>>({});\n  const [touched, setTouched] = createSignal<FormTouched<T>>({});\n  const [isSubmitting, setIsSubmitting] = createSignal(false);\n  const [submitError, setSubmitError] = createSignal<unknown>();\n  const validateOn = options.validateOn ?? \"change\";\n  let validationSequence = 0;\n\n  const isDirty = createMemo(() => {\n    const current = values();\n    return Object.keys(initialValues).some((key) => current[key] !== initialValues[key]);\n  });\n\n  const isValid = createMemo(() => {\n    const errs = errors();\n    return Object.keys(errs).length === 0;\n  });\n\n  const runValidation = async (currentValues: T): Promise<FormErrors<T>> => {\n    const sequence = ++validationSequence;\n    if (!options.validate) {\n      setErrors(() => ({}));\n      return {};\n    }\n\n    const result = await options.validate(currentValues);\n    const newErrors = result || {};\n    // Ignore stale async validations that finished after a newer request.\n    if (sequence === validationSequence) {\n      setErrors(() => newErrors);\n    }\n    return newErrors;\n  };\n\n  const setFieldValue = <K extends keyof T>(field: K, value: T[K]) => {\n    const next = { ...values(), [field]: value };\n    setValues(() => next);\n    if (validateOn === \"change\") {\n      void runValidation(next);\n    }\n  };\n\n  const setFieldError = <K extends keyof T>(field: K, error: string | undefined) => {\n    setErrors((prev) => {\n      const next = { ...prev };\n      if (error) next[field] = error;\n      else delete next[field];\n      return next;\n    });\n  };\n\n  const setFieldTouched = <K extends keyof T>(field: K, isTouched = true) => {\n    setTouched((prev) => ({ ...prev, [field]: isTouched }));\n  };\n\n  const handleChange = <K extends keyof T>(field: K) => {\n    return (e: FormInputEvent) => {\n      const target = e.currentTarget;\n      let value: unknown = target.value;\n\n      if (\n        \"checked\" in target &&\n        ((target as HTMLInputElement).type === \"checkbox\" ||\n          (target as HTMLInputElement).type === \"radio\")\n      ) {\n        value = (target as HTMLInputElement).checked;\n      } else if (\"selectedOptions\" in target && target.multiple) {\n        value = Array.from(target.selectedOptions, (option) => option.value);\n      }\n\n      setFieldValue(field, value as T[K]);\n    };\n  };\n\n  const handleBlur = <K extends keyof T>(field: K) => {\n    return () => {\n      setFieldTouched(field, true);\n      if (validateOn === \"blur\") {\n        void runValidation(values());\n      }\n    };\n  };\n\n  const handleSubmit = async (e?: Event) => {\n    e?.preventDefault();\n    setIsSubmitting(true);\n    setSubmitError(undefined);\n\n    // Mark all fields as touched on submit\n    const allTouched = Object.keys(values()).reduce((acc, key) => {\n      acc[key as keyof T] = true;\n      return acc;\n    }, {} as FormTouched<T>);\n    setTouched(() => allTouched);\n\n    try {\n      const validationErrors = await runValidation(values());\n      if (Object.keys(validationErrors).length === 0 && options.onSubmit) {\n        try {\n          await options.onSubmit(values());\n        } catch (error) {\n          setSubmitError(() => error);\n        }\n      }\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const resetForm = () => {\n    setValues(() => ({ ...initialValues }));\n    setErrors(() => ({}));\n    setTouched(() => ({}));\n    setIsSubmitting(false);\n    setSubmitError(undefined);\n    validationSequence += 1;\n  };\n\n  return {\n    values,\n    errors,\n    touched,\n    isSubmitting,\n    submitError,\n    isValid,\n    isDirty,\n    setFieldValue,\n    setFieldError,\n    setFieldTouched,\n    handleChange,\n    handleBlur,\n    handleSubmit,\n    resetForm,\n  };\n}\n",
       "type": "registry:hook"
     }
   ]

package/registry/empty.json

@@ -0,0 +1,17 @@
+{
+  "name": "empty",
+  "title": "Empty",
+  "description": "A compound empty-state layout for collections, search results, and initial application states.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "ui/empty.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface EmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/** A centered layout for empty collections, search results, and initial states. */\nexport const Empty: Component<EmptyProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex min-h-64 w-full flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card/30 p-6 text-center\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface EmptyIconProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const EmptyIcon: Component<EmptyIconProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      class={cn(\n        \"mb-4 flex size-12 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-6\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface EmptyTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {\n  class?: string;\n}\n\nexport const EmptyTitle: Component<EmptyTitleProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <h3\n      class={cn(\"text-lg font-semibold tracking-tight text-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface EmptyDescriptionProps\n  extends JSX.HTMLAttributes<HTMLParagraphElement> {\n  class?: string;\n}\n\nexport const EmptyDescription: Component<EmptyDescriptionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <p\n      class={cn(\"mt-1 max-w-sm text-sm text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface EmptyActionProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\nexport const EmptyAction: Component<EmptyActionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div class={cn(\"mt-5 flex items-center gap-2\", local.class)} {...rest} />\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/field.json

@@ -0,0 +1,20 @@
+{
+  "name": "field",
+  "title": "Field",
+  "description": "A consistent form field layout for labels, descriptions, and validation errors.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "label"
+  ],
+  "files": [
+    {
+      "path": "ui/field.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\nimport { Label, type LabelProps } from \"./label\";\n\nexport interface FieldProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/** A consistent layout wrapper for labels, controls, descriptions, and errors. */\nexport const Field: Component<FieldProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div class={cn(\"grid w-full gap-1.5\", local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n\nexport interface FieldLabelProps extends LabelProps {\n  class?: string;\n  children?: JSX.Element;\n}\n\nexport const FieldLabel: Component<FieldLabelProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <Label class={cn(\"text-sm font-medium\", local.class)} {...rest}>\n      {local.children}\n    </Label>\n  );\n};\n\nexport interface FieldDescriptionProps\n  extends JSX.HTMLAttributes<HTMLParagraphElement> {\n  class?: string;\n}\n\nexport const FieldDescription: Component<FieldDescriptionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <p class={cn(\"text-sm text-muted-foreground\", local.class)} {...rest}>\n      {local.children}\n    </p>\n  );\n};\n\nexport interface FieldErrorProps\n  extends JSX.HTMLAttributes<HTMLParagraphElement> {\n  class?: string;\n}\n\nexport const FieldError: Component<FieldErrorProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <p\n      role=\"alert\"\n      class={cn(\"text-sm font-medium text-destructive\", local.class)}\n      {...rest}\n    >\n      {local.children}\n    </p>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/form-message.json

@@ -0,0 +1,16 @@
+{
+  "name": "form-message",
+  "title": "Form Message",
+  "description": "Validation message helper connected to createForm errors and touched state.",
+  "type": "registry:ui",
+  "registryDependencies": [
+    "field"
+  ],
+  "files": [
+    {
+      "path": "ui/form-message.tsx",
+      "content": "import { Show, splitProps, type JSX } from \"solid-js\";\nimport type { CreateFormReturn } from \"@nikala-ui/hooks\";\nimport { FieldError, type FieldErrorProps } from \"./field\";\n\ntype FormState<T extends Record<string, any>> = Pick<\n  CreateFormReturn<T>,\n  \"errors\" | \"touched\"\n>;\n\nexport interface FormMessageProps<\n  T extends Record<string, any>,\n  K extends keyof T,\n> extends Omit<FieldErrorProps, \"children\"> {\n  form: FormState<T>;\n  name: K;\n  /** Show the message even before the field has been touched. */\n  showUntouched?: boolean;\n}\n\n/** Displays a field's validation error from createForm when it should be visible. */\nexport function FormMessage<\n  T extends Record<string, any>,\n  K extends keyof T,\n>(props: FormMessageProps<T, K>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"form\", \"name\", \"showUntouched\", \"class\"]);\n  const error = () => local.form.errors()[local.name] as string | undefined;\n  const touched = () => local.form.touched()[local.name] === true;\n\n  return (\n    <Show when={error() && (local.showUntouched || touched())}>\n      <FieldError class={local.class} {...rest}>\n        {error()}\n      </FieldError>\n    </Show>\n  );\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/form.json

@@ -0,0 +1,17 @@
+{
+  "name": "form",
+  "title": "Form",
+  "description": "A semantic form layout wrapper designed to work with the createForm hook.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "ui/form.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface FormProps extends JSX.FormHTMLAttributes<HTMLFormElement> {\n  /** Indicates that the form is currently processing a submission. */\n  loading?: boolean;\n  class?: string;\n}\n\n/** A semantic form layout wrapper designed to work with the createForm hook. */\nexport const Form: Component<FormProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"loading\", \"class\"]);\n\n  return (\n    <form\n      aria-busy={local.loading ? \"true\" : undefined}\n      class={cn(\"w-full space-y-5\", local.class)}\n      {...rest}\n    />\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/icon-button.json

@@ -0,0 +1,20 @@
+{
+  "name": "icon-button",
+  "title": "Icon Button",
+  "description": "An accessible square button intended for a single icon action.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/icon-button.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface IconButtonProps\n  extends Omit<ButtonProps, \"size\" | \"children\"> {\n  /** Accessible label for the icon-only button. */\n  label: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n  children?: JSX.Element;\n}\n\n/** An accessible square button intended for a single icon action. */\nexport const IconButton: Component<IconButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"label\", \"size\", \"class\", \"children\"]);\n\n  return (\n    <Button\n      size=\"icon\"\n      aria-label={local.label}\n      class={cn(\n        {\n          \"size-8\": local.size === \"sm\",\n          \"size-9\": !local.size || local.size === \"default\",\n          \"size-10\": local.size === \"lg\",\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </Button>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/index.json

@@ -83,6 +83,9 @@
       "clsx",
       "tailwind-merge",
       "class-variance-authority"
+    ],
+    "registryDependencies": [
+      "spinner"
     ]
   },
   {
@@ -194,6 +197,48 @@
       "scroll-area"
     ]
   },
+  {
+    "name": "empty",
+    "title": "Empty",
+    "description": "A compound empty-state layout for collections, search results, and initial application states.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
+  {
+    "name": "field",
+    "title": "Field",
+    "description": "A consistent form field layout for labels, descriptions, and validation errors.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "label"
+    ]
+  },
+  {
+    "name": "form-message",
+    "title": "Form Message",
+    "description": "Validation message helper connected to createForm errors and touched state.",
+    "type": "registry:ui",
+    "registryDependencies": [
+      "field"
+    ]
+  },
+  {
+    "name": "form",
+    "title": "Form",
+    "description": "A semantic form layout wrapper designed to work with the createForm hook.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
   {
     "name": "hover-card",
     "title": "Hover Card",
@@ -205,6 +250,19 @@
       "@kobalte/core"
     ]
   },
+  {
+    "name": "icon-button",
+    "title": "Icon Button",
+    "description": "An accessible square button intended for a single icon action.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "button"
+    ]
+  },
   {
     "name": "input-group",
     "title": "Input Group",
@@ -423,6 +481,28 @@
       "@kobalte/core"
     ]
   },
+  {
+    "name": "spinner",
+    "title": "Spinner",
+    "description": "An accessible animated loading indicator for asynchronous UI states.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority"
+    ]
+  },
+  {
+    "name": "status",
+    "title": "Status",
+    "description": "A compact semantic status indicator with a color dot and label.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority"
+    ]
+  },
   {
     "name": "switch",
     "title": "Switch",

package/registry/spinner.json

@@ -0,0 +1,18 @@
+{
+  "name": "spinner",
+  "title": "Spinner",
+  "description": "An accessible animated loading indicator for asynchronous UI states.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "ui/spinner.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\nexport const spinnerVariants = cva(\n  \"inline-block animate-spin rounded-full border-2 border-current border-r-transparent text-primary\",\n  {\n    variants: {\n      size: {\n        sm: \"size-3\",\n        default: \"size-4\",\n        lg: \"size-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\nexport interface SpinnerProps\n  extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, \"role\">,\n    VariantProps<typeof spinnerVariants> {\n  /** Accessible text announced while the spinner is active. */\n  label?: string;\n  class?: string;\n}\n\n/** A compact, accessible loading indicator for async UI states. */\nexport const Spinner: Component<SpinnerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"size\", \"label\", \"class\"]);\n\n  return (\n    <span\n      role=\"status\"\n      aria-label={local.label || \"Loading\"}\n      class={cn(spinnerVariants({ size: local.size }), local.class)}\n      {...rest}\n    />\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/status.json

@@ -0,0 +1,18 @@
+{
+  "name": "status",
+  "title": "Status",
+  "description": "A compact semantic status indicator with a color dot and label.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "ui/status.tsx",
+      "content": "import { Show, splitProps, type Component, type JSX } from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/cn\";\n\nexport const statusVariants = cva(\n  \"inline-flex items-center gap-2 text-sm font-medium text-foreground\",\n  {\n    variants: {\n      variant: {\n        neutral: \"text-muted-foreground\",\n        success: \"text-emerald-700 dark:text-emerald-400\",\n        warning: \"text-amber-700 dark:text-amber-400\",\n        error: \"text-destructive\",\n        info: \"text-blue-700 dark:text-blue-400\",\n      },\n      size: {\n        sm: \"text-xs gap-1.5\",\n        default: \"text-sm gap-2\",\n      },\n      bordered: {\n        true: \"rounded-md border px-2 py-1\",\n        false: \"\",\n      },\n      borderVariant: {\n        neutral: \"border-muted-foreground/30\",\n        success: \"border-emerald-500/30\",\n        warning: \"border-amber-500/30\",\n        error: \"border-destructive/30\",\n        info: \"border-blue-500/30\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n      size: \"default\",\n      bordered: false,\n      borderVariant: \"neutral\",\n    },\n  }\n);\n\nexport const statusDotVariants = cva(\"size-2 shrink-0 rounded-lg\", {\n  variants: {\n    variant: {\n      neutral: \"bg-muted-foreground\",\n      success: \"bg-emerald-500\",\n      warning: \"bg-amber-500\",\n      error: \"bg-destructive\",\n      info: \"bg-blue-500\",\n    },\n    size: {\n      sm: \"size-1.5\",\n      default: \"size-2\",\n    },\n    animation: {\n      none: \"\",\n      pulse: \"animate-pulse\",\n      ping: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"neutral\",\n    size: \"default\",\n    animation: \"none\",\n  },\n});\n\nexport interface StatusProps\n  extends JSX.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof statusVariants> {\n  class?: string;\n  animation?: \"none\" | \"pulse\" | \"ping\";\n}\n\n/** A compact status indicator combining a semantic color dot and label. */\nexport const Status: Component<StatusProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"children\",\n    \"animation\",\n    \"bordered\",\n  ]);\n\n  return (\n    <span\n      role=\"status\"\n      class={cn(\n        statusVariants({\n          variant: local.variant,\n          size: local.size,\n          bordered: local.bordered,\n          borderVariant: local.variant,\n        }),\n        local.class\n      )}\n      {...rest}\n    >\n      <span class=\"relative flex shrink-0\" aria-hidden=\"true\">\n        <Show when={local.animation === \"ping\"}>\n          <span\n            class={cn(\n              \"absolute inline-flex size-full animate-ping rounded-lg opacity-75\",\n              statusDotVariants({ variant: local.variant, size: local.size })\n            )}\n          />\n        </Show>\n        <span\n          class={statusDotVariants({\n            variant: local.variant,\n            size: local.size,\n            animation: local.animation === \"ping\" ? \"none\" : local.animation,\n          })}\n        />\n      </span>\n      {local.children}\n    </span>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/src/registry/components/ui/button.tsx

@@ -1,6 +1,7 @@
-import { splitProps, type Component, type JSX } from "solid-js";
+import { Show, splitProps, type Component, type JSX } from "solid-js";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/cn";
+import { Spinner } from "./spinner";
 
 /**
  * Class variance authority configuration for button styling variants and sizes.
@@ -46,6 +47,8 @@ export const buttonVariants = cva(
 export interface ButtonProps
   extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
+  /** Shows a loading spinner and prevents repeated clicks while active. */
+  loading?: boolean;
   class?: string;
 }
 
@@ -54,14 +57,26 @@ export interface ButtonProps
  */
 export const Button: Component<ButtonProps> = (props) => {
   // Use splitProps to preserve SolidJS reactivity for destructured props
-  const [local, rest] = splitProps(props, ["variant", "size", "class", "children"]);
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "size",
+    "class",
+    "children",
+    "loading",
+    "disabled",
+  ]);
 
   return (
     <button
       class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      disabled={local.disabled || local.loading}
+      aria-busy={local.loading ? "true" : undefined}
       {...rest}
     >
+      <Show when={local.loading}>
+        <Spinner size="sm" class="text-current" />
+      </Show>
       {local.children}
     </button>
   );
-};
+};

package/src/registry/components/ui/empty.tsx

@@ -0,0 +1,83 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface EmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/** A centered layout for empty collections, search results, and initial states. */
+export const Empty: Component<EmptyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn(
+        "flex min-h-64 w-full flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card/30 p-6 text-center",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyIconProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const EmptyIcon: Component<EmptyIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      aria-hidden="true"
+      class={cn(
+        "mb-4 flex size-12 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-6",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const EmptyTitle: Component<EmptyTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <h3
+      class={cn("text-lg font-semibold tracking-tight text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyDescriptionProps
+  extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const EmptyDescription: Component<EmptyDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <p
+      class={cn("mt-1 max-w-sm text-sm text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyActionProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const EmptyAction: Component<EmptyActionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div class={cn("mt-5 flex items-center gap-2", local.class)} {...rest} />
+  );
+};

package/src/registry/components/ui/field.tsx

@@ -0,0 +1,67 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+import { Label, type LabelProps } from "./label";
+
+export interface FieldProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/** A consistent layout wrapper for labels, controls, descriptions, and errors. */
+export const Field: Component<FieldProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div class={cn("grid w-full gap-1.5", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};
+
+export interface FieldLabelProps extends LabelProps {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const FieldLabel: Component<FieldLabelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <Label class={cn("text-sm font-medium", local.class)} {...rest}>
+      {local.children}
+    </Label>
+  );
+};
+
+export interface FieldDescriptionProps
+  extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const FieldDescription: Component<FieldDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p class={cn("text-sm text-muted-foreground", local.class)} {...rest}>
+      {local.children}
+    </p>
+  );
+};
+
+export interface FieldErrorProps
+  extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const FieldError: Component<FieldErrorProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p
+      role="alert"
+      class={cn("text-sm font-medium text-destructive", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </p>
+  );
+};

package/src/registry/components/ui/form-message.tsx

@@ -0,0 +1,36 @@
+import { Show, splitProps, type JSX } from "solid-js";
+import type { CreateFormReturn } from "@nikala-ui/hooks";
+import { FieldError, type FieldErrorProps } from "./field";
+
+type FormState<T extends Record<string, any>> = Pick<
+  CreateFormReturn<T>,
+  "errors" | "touched"
+>;
+
+export interface FormMessageProps<
+  T extends Record<string, any>,
+  K extends keyof T,
+> extends Omit<FieldErrorProps, "children"> {
+  form: FormState<T>;
+  name: K;
+  /** Show the message even before the field has been touched. */
+  showUntouched?: boolean;
+}
+
+/** Displays a field's validation error from createForm when it should be visible. */
+export function FormMessage<
+  T extends Record<string, any>,
+  K extends keyof T,
+>(props: FormMessageProps<T, K>): JSX.Element {
+  const [local, rest] = splitProps(props, ["form", "name", "showUntouched", "class"]);
+  const error = () => local.form.errors()[local.name] as string | undefined;
+  const touched = () => local.form.touched()[local.name] === true;
+
+  return (
+    <Show when={error() && (local.showUntouched || touched())}>
+      <FieldError class={local.class} {...rest}>
+        {error()}
+      </FieldError>
+    </Show>
+  );
+}

package/src/registry/components/ui/form.tsx

@@ -0,0 +1,21 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface FormProps extends JSX.FormHTMLAttributes<HTMLFormElement> {
+  /** Indicates that the form is currently processing a submission. */
+  loading?: boolean;
+  class?: string;
+}
+
+/** A semantic form layout wrapper designed to work with the createForm hook. */
+export const Form: Component<FormProps> = (props) => {
+  const [local, rest] = splitProps(props, ["loading", "class"]);
+
+  return (
+    <form
+      aria-busy={local.loading ? "true" : undefined}
+      class={cn("w-full space-y-5", local.class)}
+      {...rest}
+    />
+  );
+};

package/src/registry/components/ui/icon-button.tsx

@@ -0,0 +1,34 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Button, type ButtonProps } from "./button";
+import { cn } from "@/lib/cn";
+
+export interface IconButtonProps
+  extends Omit<ButtonProps, "size" | "children"> {
+  /** Accessible label for the icon-only button. */
+  label: string;
+  size?: "sm" | "default" | "lg";
+  children?: JSX.Element;
+}
+
+/** An accessible square button intended for a single icon action. */
+export const IconButton: Component<IconButtonProps> = (props) => {
+  const [local, rest] = splitProps(props, ["label", "size", "class", "children"]);
+
+  return (
+    <Button
+      size="icon"
+      aria-label={local.label}
+      class={cn(
+        {
+          "size-8": local.size === "sm",
+          "size-9": !local.size || local.size === "default",
+          "size-10": local.size === "lg",
+        },
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </Button>
+  );
+};

package/src/registry/components/ui/spinner.tsx

@@ -0,0 +1,41 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+export const spinnerVariants = cva(
+  "inline-block animate-spin rounded-full border-2 border-current border-r-transparent text-primary",
+  {
+    variants: {
+      size: {
+        sm: "size-3",
+        default: "size-4",
+        lg: "size-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+export interface SpinnerProps
+  extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "role">,
+    VariantProps<typeof spinnerVariants> {
+  /** Accessible text announced while the spinner is active. */
+  label?: string;
+  class?: string;
+}
+
+/** A compact, accessible loading indicator for async UI states. */
+export const Spinner: Component<SpinnerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["size", "label", "class"]);
+
+  return (
+    <span
+      role="status"
+      aria-label={local.label || "Loading"}
+      class={cn(spinnerVariants({ size: local.size }), local.class)}
+      {...rest}
+    />
+  );
+};

package/src/registry/components/ui/status.tsx

@@ -0,0 +1,119 @@
+import { Show, splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+export const statusVariants = cva(
+  "inline-flex items-center gap-2 text-sm font-medium text-foreground",
+  {
+    variants: {
+      variant: {
+        neutral: "text-muted-foreground",
+        success: "text-emerald-700 dark:text-emerald-400",
+        warning: "text-amber-700 dark:text-amber-400",
+        error: "text-destructive",
+        info: "text-blue-700 dark:text-blue-400",
+      },
+      size: {
+        sm: "text-xs gap-1.5",
+        default: "text-sm gap-2",
+      },
+      bordered: {
+        true: "rounded-md border px-2 py-1",
+        false: "",
+      },
+      borderVariant: {
+        neutral: "border-muted-foreground/30",
+        success: "border-emerald-500/30",
+        warning: "border-amber-500/30",
+        error: "border-destructive/30",
+        info: "border-blue-500/30",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "default",
+      bordered: false,
+      borderVariant: "neutral",
+    },
+  }
+);
+
+export const statusDotVariants = cva("size-2 shrink-0 rounded-lg", {
+  variants: {
+    variant: {
+      neutral: "bg-muted-foreground",
+      success: "bg-emerald-500",
+      warning: "bg-amber-500",
+      error: "bg-destructive",
+      info: "bg-blue-500",
+    },
+    size: {
+      sm: "size-1.5",
+      default: "size-2",
+    },
+    animation: {
+      none: "",
+      pulse: "animate-pulse",
+      ping: "",
+    },
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "default",
+    animation: "none",
+  },
+});
+
+export interface StatusProps
+  extends JSX.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof statusVariants> {
+  class?: string;
+  animation?: "none" | "pulse" | "ping";
+}
+
+/** A compact status indicator combining a semantic color dot and label. */
+export const Status: Component<StatusProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "size",
+    "class",
+    "children",
+    "animation",
+    "bordered",
+  ]);
+
+  return (
+    <span
+      role="status"
+      class={cn(
+        statusVariants({
+          variant: local.variant,
+          size: local.size,
+          bordered: local.bordered,
+          borderVariant: local.variant,
+        }),
+        local.class
+      )}
+      {...rest}
+    >
+      <span class="relative flex shrink-0" aria-hidden="true">
+        <Show when={local.animation === "ping"}>
+          <span
+            class={cn(
+              "absolute inline-flex size-full animate-ping rounded-lg opacity-75",
+              statusDotVariants({ variant: local.variant, size: local.size })
+            )}
+          />
+        </Show>
+        <span
+          class={statusDotVariants({
+            variant: local.variant,
+            size: local.size,
+            animation: local.animation === "ping" ? "none" : local.animation,
+          })}
+        />
+      </span>
+      {local.children}
+    </span>
+  );
+};

package/src/registry/metadata.ts

@@ -14,12 +14,50 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     title: "Button",
     description: "An interactive button component with variant and size options.",
     dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+    registryDependencies: ["spinner"],
   },
   input: {
     title: "Input",
     description: "A standard text input field with styling variants.",
     dependencies: ["clsx", "tailwind-merge"],
   },
+  spinner: {
+    title: "Spinner",
+    description: "An accessible animated loading indicator for asynchronous UI states.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  empty: {
+    title: "Empty",
+    description: "A compound empty-state layout for collections, search results, and initial application states.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  status: {
+    title: "Status",
+    description: "A compact semantic status indicator with a color dot and label.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  "icon-button": {
+    title: "Icon Button",
+    description: "An accessible square button intended for a single icon action.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["button"],
+  },
+  form: {
+    title: "Form",
+    description: "A semantic form layout wrapper designed to work with the createForm hook.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  "form-message": {
+    title: "Form Message",
+    description: "Validation message helper connected to createForm errors and touched state.",
+    registryDependencies: ["field"],
+  },
+  field: {
+    title: "Field",
+    description: "A consistent form field layout for labels, descriptions, and validation errors.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["label"],
+  },
   card: {
     title: "Card",
     description: "A versatile container component with header, content, and footer sections.",
@@ -399,4 +437,4 @@ export const HOOK_METADATA: Record<string, ComponentMeta> = {
     title: "createScrollIntoView",
     description: "SolidJS reactive primitive for scrolling a target element into view smooth or auto behavior",
   },
-};
+};