@nikala-ui/core 0.10.1 → 0.11.0-nightly.b01fa01

package/registry/toggle-group.json

@@ -0,0 +1,21 @@
+{
+  "name": "toggle-group",
+  "title": "Toggle Group",
+  "description": "A set of two-state buttons that can be toggled on or off with single or multiple selection modes.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority"
+  ],
+  "registryDependencies": [
+    "create-controllable-signal"
+  ],
+  "files": [
+    {
+      "path": "ui/toggle-group.tsx",
+      "content": "import {\n  createContext,\n  useContext,\n  splitProps,\n  type Component,\n  type JSX,\n  type Accessor,\n} from \"solid-js\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { createControllableSignal } from \"@/hooks/create-controllable-signal\";\nimport { cn } from \"@/lib/cn\";\n\nexport const toggleGroupItemVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-border bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-3 min-w-9\",\n        sm: \"h-8 px-2 text-xs min-w-8\",\n        lg: \"h-10 px-3 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\ninterface ToggleGroupContextValue {\n  type: \"single\" | \"multiple\";\n  value: Accessor<any>;\n  onItemSelect: (itemValue: string) => void;\n  variant: Accessor<\"default\" | \"outline\">;\n  size: Accessor<\"default\" | \"sm\" | \"lg\">;\n  disabled: Accessor<boolean>;\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue>();\n\nexport interface ToggleGroupProps<T extends \"single\" | \"multiple\" = \"single\">\n  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\">,\n    VariantProps<typeof toggleGroupItemVariants> {\n  /** Mode of selection: single choice or multiple choices */\n  type?: T;\n  /** Controlled value: string for 'single', string[] for 'multiple' */\n  value?: T extends \"multiple\" ? string[] : string;\n  /** Uncontrolled default value */\n  defaultValue?: T extends \"multiple\" ? string[] : string;\n  /** Callback fired when selection changes */\n  onChange?: (value: T extends \"multiple\" ? string[] : string) => void;\n  /** Layout orientation */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Disables all buttons in the group */\n  disabled?: boolean;\n  class?: string;\n  children?: JSX.Element;\n}\n\n/**\n * Root container for grouping connected toggle items with shared single/multiple selection state.\n */\nexport const ToggleGroup = <T extends \"single\" | \"multiple\" = \"single\">(\n  props: ToggleGroupProps<T>\n) => {\n  const [local, rest] = splitProps(props, [\n    \"type\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"orientation\",\n    \"variant\",\n    \"size\",\n    \"disabled\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const type = () => local.type ?? (\"single\" as T);\n  const variant = () => local.variant ?? \"default\";\n  const size = () => local.size ?? \"default\";\n  const disabled = () => local.disabled ?? false;\n  const orientation = () => local.orientation ?? \"horizontal\";\n\n  const [currentValue, setCurrentValue] = createControllableSignal<any>({\n    value: () => local.value,\n    defaultValue: local.defaultValue ?? (type() === \"multiple\" ? [] : undefined),\n    onChange: (val) => local.onChange?.(val),\n  });\n\n  const onItemSelect = (itemValue: string) => {\n    if (disabled()) return;\n\n    if (type() === \"multiple\") {\n      const currentList = Array.isArray(currentValue()) ? currentValue() : [];\n      if (currentList.includes(itemValue)) {\n        setCurrentValue(currentList.filter((v: string) => v !== itemValue));\n      } else {\n        setCurrentValue([...currentList, itemValue]);\n      }\n    } else {\n      const current = currentValue();\n      if (current === itemValue) {\n        setCurrentValue(undefined);\n      } else {\n        setCurrentValue(itemValue);\n      }\n    }\n  };\n\n  const contextValue: ToggleGroupContextValue = {\n    type: type(),\n    value: currentValue,\n    onItemSelect,\n    variant,\n    size,\n    disabled,\n  };\n\n  return (\n    <ToggleGroupContext.Provider value={contextValue}>\n      <div\n        role=\"group\"\n        data-orientation={orientation()}\n        class={cn(\n          \"flex items-center justify-center gap-1 rounded-lg\",\n          orientation() === \"vertical\" ? \"flex-col\" : \"flex-row\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n};\n\nexport interface ToggleGroupItemProps\n  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof toggleGroupItemVariants> {\n  /** Unique value representing this toggle item within the group */\n  value: string;\n  class?: string;\n  children?: JSX.Element;\n}\n\n/**\n * Individual toggle button item within a ToggleGroup.\n */\nexport const ToggleGroupItem: Component<ToggleGroupItemProps> = (props) => {\n  const context = useContext(ToggleGroupContext);\n\n  if (!context) {\n    throw new Error(\"ToggleGroupItem must be used within a ToggleGroup\");\n  }\n\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"variant\",\n    \"size\",\n    \"disabled\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const isSelected = () => {\n    const groupValue = context.value();\n    if (context.type === \"multiple\") {\n      return Array.isArray(groupValue) && groupValue.includes(local.value);\n    }\n    return groupValue === local.value;\n  };\n\n  const isDisabled = () => local.disabled || context.disabled();\n  const itemVariant = () => local.variant || context.variant();\n  const itemSize = () => local.size || context.size();\n\n  return (\n    <button\n      type=\"button\"\n      role={context.type === \"single\" ? \"radio\" : \"checkbox\"}\n      aria-checked={isSelected()}\n      data-state={isSelected() ? \"on\" : \"off\"}\n      disabled={isDisabled()}\n      onClick={() => context.onItemSelect(local.value)}\n      class={cn(\n        toggleGroupItemVariants({\n          variant: itemVariant(),\n          size: itemSize(),\n        }),\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/updater-modal.json

@@ -0,0 +1,26 @@
+{
+  "name": "updater-modal",
+  "title": "Updater Modal",
+  "description": "An automated application auto-updater dialog for Tauri v2 with release notes preview, download progress bar, and relaunch actions.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "lucide-solid"
+  ],
+  "registryDependencies": [
+    "dialog",
+    "button",
+    "badge",
+    "progress",
+    "alert",
+    "create-app-updater"
+  ],
+  "files": [
+    {
+      "path": "ui/updater-modal.tsx",
+      "content": "import {\n  Show,\n  splitProps,\n  type Component,\n  type ParentComponent,\n  type JSX,\n} from \"solid-js\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n} from \"@/components/ui/dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Alert, AlertTitle, AlertDescription } from \"@/components/ui/alert\";\nimport type {\n  CreateAppUpdaterReturn,\n  UpdateManifestInfo,\n  UpdateProgressInfo,\n} from \"@/hooks/create-app-updater\";\nimport {\n  Download,\n  RotateCcw,\n  CheckCircle2,\n  AlertTriangle,\n  ArrowRight,\n  Package,\n} from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\n\nfunction formatBytes(bytes: number): string {\n  if (!bytes || bytes === 0) return \"0 MB\";\n  const mb = bytes / (1024 * 1024);\n  return `${mb.toFixed(1)} MB`;\n}\n\n/* --- 1. Sub-components for Clean Modularity & Zero Repetition --- */\n\nexport interface UpdaterHeaderProps {\n  appName: string;\n  status: string;\n  info?: UpdateManifestInfo | null;\n}\n\nexport const UpdaterHeader: Component<UpdaterHeaderProps> = (props) => (\n  <DialogHeader class=\"space-y-1.5 text-left\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"size-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center\">\n        <Package class=\"size-4\" />\n      </div>\n      <Show when={props.info?.version}>\n        <div class=\"flex items-center gap-1.5 text-xs font-mono\">\n          <span class=\"text-muted-foreground\">{props.info?.currentVersion || \"v1.0.0\"}</span>\n          <ArrowRight class=\"size-3 text-muted-foreground\" />\n          <Badge variant=\"default\" class=\"text-xs px-1.5 py-0 bg-primary text-primary-foreground font-semibold\">\n            {props.info?.version}\n          </Badge>\n        </div>\n      </Show>\n    </div>\n\n    <DialogTitle class=\"text-base font-bold tracking-tight text-foreground\">\n      {props.status === \"downloaded\"\n        ? \"Update Ready to Install\"\n        : props.status === \"downloading\"\n        ? \"Downloading Update...\"\n        : props.status === \"up-to-date\"\n        ? \"Up to Date\"\n        : `New Update Available for ${props.appName}`}\n    </DialogTitle>\n\n    <DialogDescription class=\"text-xs text-muted-foreground leading-relaxed\">\n      {props.status === \"downloaded\"\n        ? \"The update has been downloaded and verified. Restart to apply changes.\"\n        : props.status === \"downloading\"\n        ? \"Please wait while update packages are being downloaded.\"\n        : props.status === \"up-to-date\"\n        ? `${props.appName} is running on the latest version.`\n        : \"A new version with features and bug fixes is ready to install.\"}\n    </DialogDescription>\n  </DialogHeader>\n);\n\nexport interface UpdaterReleaseNotesProps {\n  body?: string;\n  date?: string;\n}\n\nexport const UpdaterReleaseNotes: Component<UpdaterReleaseNotesProps> = (props) => (\n  <div class=\"space-y-1\">\n    <div class=\"flex items-center justify-between text-xs text-muted-foreground font-medium\">\n      <span>Release Notes</span>\n      <Show when={props.date}>\n        <span class=\"text-[11px] font-mono\">{props.date}</span>\n      </Show>\n    </div>\n    <pre class=\"max-h-28 overflow-y-auto rounded-md border border-border bg-black/5 dark:bg-black/50 p-2.5 text-xs text-foreground font-mono whitespace-pre-wrap leading-relaxed select-text shadow-inner\">\n      {props.body}\n    </pre>\n  </div>\n);\n\nexport interface UpdaterProgressBarProps {\n  progress: UpdateProgressInfo;\n}\n\nexport const UpdaterProgressBar: Component<UpdaterProgressBarProps> = (props) => (\n  <div class=\"space-y-1.5 py-1\">\n    <div class=\"flex items-center justify-between text-xs font-mono\">\n      <span class=\"text-muted-foreground font-sans\">Progress</span>\n      <span class=\"font-semibold text-primary\">{props.progress.percentage}%</span>\n    </div>\n    <Progress value={props.progress.percentage} class=\"h-1.5\" />\n    <div class=\"flex items-center justify-between text-[11px] font-mono text-muted-foreground\">\n      <span>{formatBytes(props.progress.downloaded)}</span>\n      <span>{formatBytes(props.progress.total)}</span>\n    </div>\n  </div>\n);\n\n/* --- 2. Main UpdaterModal Compound Component --- */\n\nexport interface UpdaterModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  updater: CreateAppUpdaterReturn;\n  appName?: string;\n  class?: string;\n}\n\nexport const UpdaterModal: Component<UpdaterModalProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"open\",\n    \"onOpenChange\",\n    \"updater\",\n    \"appName\",\n    \"class\",\n  ]);\n\n  const appName = () => local.appName || \"Nikala Desktop\";\n  const status = () => local.updater.status();\n  const info = () => local.updater.updateInfo();\n  const progress = () => local.updater.progress();\n  const error = () => local.updater.error();\n\n  return (\n    <Dialog open={local.open} onOpenChange={local.onOpenChange}>\n      <DialogContent class={cn(\"sm:max-w-sm\", local.class)}>\n        {/* Header */}\n        <UpdaterHeader\n          appName={appName()}\n          status={status()}\n          info={info()}\n        />\n\n        {/* Error Alert */}\n        <Show when={error()}>\n          <Alert variant=\"destructive\" class=\"py-2 text-xs\">\n            <AlertTriangle class=\"size-3.5\" />\n            <AlertTitle class=\"font-semibold text-xs\">Update Failed</AlertTitle>\n            <AlertDescription class=\"text-[11px]\">{error()}</AlertDescription>\n          </Alert>\n        </Show>\n\n        {/* Release Notes */}\n        <Show when={info()?.body && (status() === \"available\" || status() === \"downloading\")}>\n          <UpdaterReleaseNotes body={info()?.body} date={info()?.date} />\n        </Show>\n\n        {/* Progress Bar */}\n        <Show when={status() === \"downloading\"}>\n          <UpdaterProgressBar progress={progress()} />\n        </Show>\n\n        {/* Success Callout */}\n        <Show when={status() === \"downloaded\"}>\n          <div class=\"flex items-center gap-2.5 p-2.5 rounded-md border border-primary/30 bg-primary/5 text-xs text-foreground\">\n            <CheckCircle2 class=\"size-4 text-primary shrink-0\" />\n            <p class=\"font-medium text-foreground text-xs\">Package downloaded & verified.</p>\n          </div>\n        </Show>\n\n        {/* Actions Footer */}\n        <DialogFooter class=\"flex-row items-center justify-end gap-1.5 pt-1\">\n          <Show when={status() === \"available\" || status() === \"error\"}>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => local.onOpenChange(false)}\n              class=\"text-xs h-7.5 px-3 cursor-pointer\"\n            >\n              Later\n            </Button>\n            <Button\n              variant=\"default\"\n              size=\"sm\"\n              onClick={() => local.updater.downloadAndInstall()}\n              class=\"text-xs h-7.5 px-3 gap-1.5 cursor-pointer font-medium\"\n            >\n              <Download class=\"size-3.5\" />\n              <span>Update Now</span>\n            </Button>\n          </Show>\n\n          <Show when={status() === \"downloading\"}>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              disabled\n              class=\"text-xs h-7.5 w-full opacity-70 justify-center\"\n            >\n              Downloading ({progress().percentage}%)\n            </Button>\n          </Show>\n\n          <Show when={status() === \"downloaded\"}>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => local.onOpenChange(false)}\n              class=\"text-xs h-7.5 px-3 cursor-pointer\"\n            >\n              Later\n            </Button>\n            <Button\n              variant=\"default\"\n              size=\"sm\"\n              onClick={() => local.updater.relaunch()}\n              class=\"text-xs h-7.5 px-3 gap-1.5 cursor-pointer font-semibold shadow-xs\"\n            >\n              <RotateCcw class=\"size-3.5\" />\n              <span>Relaunch</span>\n            </Button>\n          </Show>\n\n          <Show when={status() === \"up-to-date\" || status() === \"idle\"}>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => local.onOpenChange(false)}\n              class=\"text-xs h-7.5 px-3 cursor-pointer\"\n            >\n              Close\n            </Button>\n          </Show>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/src/registry/blocks/forgot-password-01.tsx

@@ -0,0 +1,141 @@
+import { createSignal, Show, type Component } from "solid-js";
+import { createForm } from "@nikala-ui/hooks";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "../components/ui/card";
+import { Form } from "../components/ui/form";
+import { Field, FieldLabel } from "../components/ui/field";
+import { FormMessage } from "../components/ui/form-message";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+import { Lock, Mail, ArrowLeft, ArrowRight, CheckCircle2, RotateCcw } from "lucide-solid";
+
+export const ForgotPassword01: Component = () => {
+  const [sent, setSent] = createSignal(false);
+  const [submittedEmail, setSubmittedEmail] = createSignal("");
+
+  const form = createForm({
+    initialValues: {
+      email: "",
+    },
+    validate: (values) => {
+      const errors: Record<string, string> = {};
+      if (!values.email.trim()) {
+        errors.email = "Email is required";
+      } else if (!values.email.includes("@")) {
+        errors.email = "Please enter a valid email address";
+      }
+      return errors;
+    },
+    onSubmit: async (values) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      setSubmittedEmail(values.email);
+      setSent(true);
+    },
+  });
+
+  const isFormValid = () =>
+    form.values().email.trim() !== "" && form.values().email.includes("@");
+
+  const handleReset = () => {
+    setSent(false);
+    form.resetForm();
+  };
+
+  return (
+    <div class="@container w-full min-h-[520px] flex items-center justify-center p-4 sm:p-6 md:p-10">
+      <Card class="w-full max-w-md border-border shadow-md bg-card">
+        {/* Card Header */}
+        <CardHeader class="space-y-2 text-center pb-4">
+          <div class="mx-auto size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-1 shadow-2xs">
+            <Show when={sent()} fallback={<Lock class="size-6" />}>
+              <Mail class="size-6" />
+            </Show>
+          </div>
+          <CardTitle class="text-2xl font-bold tracking-tight">
+            {sent() ? "Check your email" : "Reset your password"}
+          </CardTitle>
+          <CardDescription class="text-xs sm:text-sm">
+            {sent()
+              ? `We have sent a secure password reset link to ${submittedEmail()}`
+              : "Enter the email associated with your account and we will send you a reset link"}
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent class="space-y-4">
+          <Show
+            when={sent()}
+            fallback={
+              <Form onSubmit={form.handleSubmit} loading={form.isSubmitting()} class="space-y-4">
+                <Field>
+                  <FieldLabel for="fp-email" class="text-xs sm:text-sm">Email address</FieldLabel>
+                  <Input
+                    id="fp-email"
+                    type="email"
+                    placeholder="name@company.com"
+                    value={form.values().email}
+                    onInput={form.handleChange("email")}
+                    onBlur={form.handleBlur("email")}
+                    autocomplete="email"
+                  />
+                  <FormMessage form={form} name="email" />
+                </Field>
+
+                <Button
+                  type="submit"
+                  class="w-full font-medium"
+                  disabled={form.isSubmitting() || !isFormValid()}
+                >
+                  <Show when={form.isSubmitting()} fallback={<>Send Reset Link <ArrowRight class="ml-2 size-4" /></>}>
+                    Sending instructions...
+                  </Show>
+                </Button>
+              </Form>
+            }
+          >
+            <div class="space-y-4">
+              <Alert class="bg-emerald-500/10 border-emerald-500/30 text-emerald-500 py-3">
+                <CheckCircle2 class="size-4 text-emerald-500 shrink-0" />
+                <AlertTitle class="text-xs font-semibold text-foreground">Instructions Sent</AlertTitle>
+                <AlertDescription class="text-[11px] text-muted-foreground">
+                  If an account exists for <span class="font-medium text-foreground font-mono">{submittedEmail()}</span>, you will receive an email shortly.
+                </AlertDescription>
+              </Alert>
+
+              <div class="flex items-center justify-between text-xs text-muted-foreground pt-1">
+                <span>Didn't get the email?</span>
+                <Button
+                  variant="link"
+                  size="sm"
+                  type="button"
+                  onClick={handleReset}
+                  class="h-auto p-0 text-xs text-primary font-semibold gap-1 cursor-pointer"
+                >
+                  <RotateCcw class="size-3" /> Try another email
+                </Button>
+              </div>
+            </div>
+          </Show>
+        </CardContent>
+
+        {/* Card Footer */}
+        <CardFooter class="justify-center border-t border-border/50 py-4 text-xs text-muted-foreground">
+          <a
+            href="/blocks/login-01"
+            class="inline-flex items-center gap-1.5 text-foreground hover:text-primary transition-colors font-medium"
+          >
+            <ArrowLeft class="size-3.5" /> Back to sign in
+          </a>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export default ForgotPassword01;

package/src/registry/blocks/hero-01.tsx

@@ -0,0 +1,28 @@
+import { Component } from "solid-js";
+import { Button } from "../components/ui/button";
+import { Badge } from "../components/ui/badge";
+import { ArrowRight } from "lucide-solid";
+
+export default function Hero01() {
+  return (
+    <section class="w-full py-12 md:py-24 lg:py-32 flex flex-col items-center justify-center text-center">
+      <Badge variant="secondary" class="mb-4">
+        Nikala UI Blocks
+      </Badge>
+      <h1 class="text-4xl font-bold tracking-tight sm:text-6xl text-foreground max-w-3xl">
+        Build faster with copy-paste SolidJS blocks
+      </h1>
+      <p class="mt-6 text-lg text-muted-foreground max-w-2xl">
+        Pre-designed, fully responsive marketing and application blocks built natively for Tailwind CSS v4.
+      </p>
+      <div class="mt-8 flex items-center gap-4">
+        <Button size="lg">
+          Get Started <ArrowRight class="ml-2 size-4" />
+        </Button>
+        <Button variant="outline" size="lg">
+          Documentation
+        </Button>
+      </div>
+    </section>
+  );
+}

package/src/registry/blocks/login-01.tsx

@@ -0,0 +1,231 @@
+import { createSignal, Show, type Component } from "solid-js";
+import { createForm } from "@nikala-ui/hooks";
+import { Form } from "../components/ui/form";
+import { Field, FieldLabel } from "../components/ui/field";
+import { FormMessage } from "../components/ui/form-message";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Checkbox } from "../components/ui/checkbox";
+import { Label } from "../components/ui/label";
+import { Separator } from "../components/ui/separator";
+import { Eye, EyeOff, Sparkles, ArrowRight } from "lucide-solid";
+
+export const Login01: Component = () => {
+  const [showPassword, setShowPassword] = createSignal(false);
+
+  const form = createForm({
+    initialValues: {
+      email: "",
+      password: "",
+      rememberMe: true,
+    },
+    validate: (values) => {
+      const errors: Record<string, string> = {};
+      if (!values.email) {
+        errors.email = "Email is required";
+      } else if (!values.email.includes("@")) {
+        errors.email = "Please enter a valid email address";
+      }
+      if (!values.password) {
+        errors.password = "Password is required";
+      }
+      return errors;
+    },
+    onSubmit: async (values) => {
+      // Simulate API request
+      await new Promise((resolve) => setTimeout(resolve, 1200));
+    },
+  });
+
+  const isFormValid = () =>
+    form.values().email.trim() !== "" &&
+    form.values().email.includes("@") &&
+    form.values().password.trim() !== "";
+
+  return (
+    <div class="@container w-full min-h-[560px] @5xl:min-h-[700px] grid grid-cols-1 @5xl:grid-cols-2 bg-background text-foreground rounded-lg border border-border overflow-hidden shadow-xs">
+      {/* Left Column: Login Form */}
+      <div class="flex flex-col justify-between p-6 @md:p-10 @5xl:p-12 w-full">
+        {/* Brand Header */}
+        <div class="flex items-center gap-2.5">
+          <div class="size-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground font-bold text-sm shadow-2xs shrink-0">
+            N
+          </div>
+          <span class="font-bold text-lg tracking-tight">Nikala UI</span>
+        </div>
+
+        {/* Form Container */}
+        <div class="mx-auto w-full max-w-sm my-auto py-6 @md:py-8">
+          <div class="space-y-1.5 text-left mb-6">
+            <h1 class="text-2xl @md:text-3xl font-bold tracking-tight text-foreground">
+              Welcome back
+            </h1>
+            <p class="text-xs @md:text-sm text-muted-foreground">
+              Enter your credentials to access your account dashboard
+            </p>
+          </div>
+
+          {/* Social OAuth Buttons */}
+          <div class="grid grid-cols-1 @xs:grid-cols-2 gap-2.5 mb-6">
+            <Button variant="outline" class="w-full justify-center text-xs @md:text-sm h-9">
+              <svg class="size-4 mr-2 shrink-0" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+              </svg>
+              GitHub
+            </Button>
+            <Button variant="outline" class="w-full justify-center text-xs @md:text-sm h-9">
+              <svg class="size-4 mr-2 shrink-0" viewBox="0 0 24 24">
+                <path
+                  fill="#4285F4"
+                  d="M23.745 12.27c0-.7-.06-1.4-.19-2.07H12v4.51h6.6c-.29 1.52-1.14 2.82-2.4 3.68v3.05h3.88c2.27-2.09 3.66-5.17 3.66-9.17z"
+                />
+                <path
+                  fill="#34A853"
+                  d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.88-3.05c-1.08.72-2.45 1.16-4.05 1.16-3.12 0-5.77-2.1-6.72-4.93H1.25v3.15C3.26 21.36 7.33 24 12 24z"
+                />
+                <path
+                  fill="#FBBC05"
+                  d="M5.28 14.27c-.25-.72-.38-1.49-.38-2.27s.13-1.55.38-2.27V6.58H1.25C.45 8.18 0 10.03 0 12s.45 3.82 1.25 5.42l4.03-3.15z"
+                />
+                <path
+                  fill="#EA4335"
+                  d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.33 0 3.26 2.64 1.25 6.58l4.03 3.15c.95-2.83 3.6-4.98 6.72-4.98z"
+                />
+              </svg>
+              Google
+            </Button>
+          </div>
+
+          <div class="relative mb-6">
+            <div class="absolute inset-0 flex items-center">
+              <Separator />
+            </div>
+            <div class="relative flex justify-center text-xs uppercase">
+              <span class="bg-background px-3 text-muted-foreground font-medium text-[11px]">
+                Or continue with email
+              </span>
+            </div>
+          </div>
+
+          {/* Form with Nikala UI Form & Field ecosystem */}
+          <Form onSubmit={form.handleSubmit} loading={form.isSubmitting()} class="space-y-4">
+            <Field>
+              <FieldLabel for="login-email" class="text-xs @md:text-sm">Email address</FieldLabel>
+              <Input
+                id="login-email"
+                type="email"
+                placeholder="name@company.com"
+                value={form.values().email}
+                onInput={form.handleChange("email")}
+                onBlur={form.handleBlur("email")}
+                autocomplete="email"
+              />
+              <FormMessage form={form} name="email" />
+            </Field>
+
+            <Field>
+              <div class="flex items-center justify-between">
+                <FieldLabel for="login-password" class="text-xs @md:text-sm">Password</FieldLabel>
+                <a
+                  href="/blocks/forgot-password-01"
+                  class="text-[11px] @md:text-xs text-primary font-medium hover:underline"
+                >
+                  Forgot password?
+                </a>
+              </div>
+              <div class="relative">
+                <Input
+                  id="login-password"
+                  type={showPassword() ? "text" : "password"}
+                  placeholder="••••••••"
+                  value={form.values().password}
+                  onInput={form.handleChange("password")}
+                  onBlur={form.handleBlur("password")}
+                  autocomplete="current-password"
+                  class="pr-10"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword())}
+                  class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors p-1 cursor-pointer"
+                  aria-label={showPassword() ? "Hide password" : "Show password"}
+                >
+                  <Show when={showPassword()} fallback={<Eye class="size-4" />}>
+                    <EyeOff class="size-4" />
+                  </Show>
+                </button>
+              </div>
+              <FormMessage form={form} name="password" />
+            </Field>
+
+            <div class="flex items-center space-x-2 pt-1">
+              <Checkbox
+                id="remember"
+                checked={form.values().rememberMe}
+                onChange={(checked) => form.setFieldValue("rememberMe", checked)}
+              />
+              <Label
+                for="remember"
+                class="text-xs font-normal text-muted-foreground cursor-pointer select-none"
+              >
+                Remember me for 30 days
+              </Label>
+            </div>
+
+            <Button
+              type="submit"
+              class="w-full mt-2 font-medium"
+              disabled={form.isSubmitting() || !isFormValid()}
+            >
+              <Show when={form.isSubmitting()} fallback={<>Sign In <ArrowRight class="ml-2 size-4" /></>}>
+                Signing in...
+              </Show>
+            </Button>
+          </Form>
+
+          <p class="text-center text-xs text-muted-foreground mt-6">
+            Don't have an account?{" "}
+            <a href="/blocks/register-01" class="text-primary font-semibold hover:underline">
+              Sign up
+            </a>
+          </p>
+        </div>
+
+        {/* Footer info */}
+        <div class="text-center @md:text-left text-xs text-muted-foreground pt-4 @md:pt-0">
+          By signing in, you agree to our{" "}
+          <a href="#terms" class="underline hover:text-foreground">Terms of Service</a>{" "}
+          and{" "}
+          <a href="#privacy" class="underline hover:text-foreground">Privacy Policy</a>.
+        </div>
+      </div>
+
+      {/* Right Column: Hero Visual & Art / Testimonial Showcase */}
+      <div class="hidden @5xl:flex relative flex-col justify-between p-10 bg-muted/40 border-l border-border overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-tr from-primary/10 via-transparent to-primary/5 pointer-events-none" />
+
+        <div class="relative z-10 flex items-center gap-2 text-sm font-semibold text-foreground/80">
+          <Sparkles class="size-4 text-primary" />
+          <span>Production Ready SolidJS UI</span>
+        </div>
+
+        <div class="relative z-10 max-w-md space-y-6">
+          <blockquote class="text-xl @md:text-2xl font-semibold tracking-tight text-foreground leading-snug">
+            "Nikala UI transformed the way our team builds web applications with SolidJS. Fine-grained reactivity meets Tailwind v4 simplicity."
+          </blockquote>
+          <div class="space-y-1">
+            <p class="text-sm font-semibold text-foreground">Davit Kakhidze</p>
+            <p class="text-xs text-muted-foreground">Head of Engineering at Studio</p>
+          </div>
+        </div>
+
+        <div class="relative z-10 flex items-center justify-between text-xs text-muted-foreground">
+          <span>Honoring Niko Pirosmani</span>
+          <span>© 2026 Nikala UI</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login01;

package/src/registry/blocks/otp-verification-01.tsx

@@ -0,0 +1,170 @@
+import { createSignal, onMount, onCleanup, Show, type Component } from "solid-js";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "../components/ui/card";
+import { Form } from "../components/ui/form";
+import { Button } from "../components/ui/button";
+import { PinInput, PinInputInput } from "../components/ui/pin-input";
+import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+import { Badge } from "../components/ui/badge";
+import { KeyRound, Mail, CheckCircle2, RotateCcw, ArrowRight } from "lucide-solid";
+
+export const OtpVerification01: Component = () => {
+  const [code, setCode] = createSignal("");
+  const [loading, setLoading] = createSignal(false);
+  const [verified, setVerified] = createSignal(false);
+  const [countdown, setCountdown] = createSignal(59);
+  const [canResend, setCanResend] = createSignal(false);
+
+  let timerId: ReturnType<typeof setInterval> | undefined;
+
+  const startCountdown = () => {
+    setCountdown(59);
+    setCanResend(false);
+    clearInterval(timerId);
+    timerId = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timerId);
+          setCanResend(true);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+  };
+
+  onMount(() => {
+    startCountdown();
+  });
+
+  onCleanup(() => {
+    clearInterval(timerId);
+  });
+
+  const handleVerify = (e: Event) => {
+    e.preventDefault();
+    if (code().length < 6) return;
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      setVerified(true);
+    }, 1200);
+  };
+
+  const handleResend = () => {
+    if (!canResend()) return;
+    setCode("");
+    startCountdown();
+  };
+
+  return (
+    <div class="@container w-full min-h-[500px] flex items-center justify-center p-4 sm:p-6 md:p-10">
+      <Card class="w-full max-w-md border-border shadow-md bg-card">
+        {/* Card Header */}
+        <CardHeader class="space-y-2 text-center pb-4">
+          <div class="mx-auto size-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-1 shadow-2xs">
+            <KeyRound class="size-6" />
+          </div>
+          <div class="flex items-center justify-center gap-2">
+            <CardTitle class="text-2xl font-bold tracking-tight">Two-Factor Auth</CardTitle>
+            <Badge variant="secondary" class="text-[10px] px-1.5 py-0 font-mono">
+              2FA
+            </Badge>
+          </div>
+          <CardDescription class="text-xs sm:text-sm">
+            Enter the 6-digit security code sent to your registered email address
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent class="space-y-6">
+          {/* Info Alert */}
+          <Alert class="bg-muted/40 border-border/70 py-2.5">
+            <Mail class="size-4 text-primary shrink-0" />
+            <AlertTitle class="text-xs font-semibold">Verification Code Sent</AlertTitle>
+            <AlertDescription class="text-[11px] text-muted-foreground">
+              Sent to <span class="font-medium text-foreground font-mono">dev***@nikala.dev</span>
+            </AlertDescription>
+          </Alert>
+
+          {/* Form */}
+          <Form onSubmit={handleVerify} loading={loading()} class="space-y-6">
+            {/* Responsive 6-Digit PinInput */}
+            <div class="flex flex-col items-center justify-center space-y-2 w-full">
+              <PinInput
+                value={code()}
+                onValueChange={setCode}
+                length={6}
+                type="numeric"
+                class="justify-center items-center gap-1.5 @sm:gap-2.5 max-w-full"
+              >
+                <PinInputInput index={0} class="h-9 w-9 @sm:h-11 @sm:w-11 text-sm @sm:text-base font-semibold" />
+                <PinInputInput index={1} class="h-9 w-9 @sm:h-11 @sm:w-11 text-sm @sm:text-base font-semibold" />
+                <PinInputInput index={2} class="h-9 w-9 @sm:h-11 @sm:w-11 text-sm @sm:text-base font-semibold" />
+                <PinInputInput index={3} class="h-9 w-9 @sm:h-11 @sm:w-11 text-sm @sm:text-base font-semibold" />
+                <PinInputInput index={4} class="h-9 w-9 @sm:h-11 @sm:w-11 text-sm @sm:text-base font-semibold" />
+                <PinInputInput index={5} class="h-9 w-9 @sm:h-11 @sm:w-11 text-sm @sm:text-base font-semibold" />
+              </PinInput>
+
+              <Show when={verified()}>
+                <div class="flex items-center gap-1.5 text-xs text-emerald-500 font-medium pt-1">
+                  <CheckCircle2 class="size-3.5" />
+                  <span>Code verified successfully!</span>
+                </div>
+              </Show>
+            </div>
+
+            {/* Countdown / Resend Action */}
+            <div class="flex items-center justify-between text-xs text-muted-foreground px-1">
+              <span>Didn't receive code?</span>
+              <Show
+                when={canResend()}
+                fallback={
+                  <span class="font-mono text-primary text-[11px]">
+                    Resend in 00:{countdown() < 10 ? `0${countdown()}` : countdown()}s
+                  </span>
+                }
+              >
+                <Button
+                  variant="link"
+                  size="sm"
+                  type="button"
+                  onClick={handleResend}
+                  class="h-auto p-0 text-xs text-primary font-semibold gap-1"
+                >
+                  <RotateCcw class="size-3" /> Resend Code
+                </Button>
+              </Show>
+            </div>
+
+            {/* Submit Button */}
+            <Button
+              type="submit"
+              class="w-full font-medium"
+              disabled={loading() || code().length < 6 || verified()}
+            >
+              <Show when={loading()} fallback={<>Verify Account <ArrowRight class="ml-2 size-4" /></>}>
+                Verifying...
+              </Show>
+            </Button>
+          </Form>
+        </CardContent>
+
+        {/* Card Footer */}
+        <CardFooter class="justify-center border-t border-border/50 py-4 text-xs text-muted-foreground">
+          Need help?{" "}
+          <a href="#support" class="text-primary font-semibold hover:underline ml-1">
+            Contact Security Team
+          </a>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export default OtpVerification01;