@nikala-ui/docs 0.12.0

package/dist/vendor/core-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/dist/vendor/core-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/dist/vendor/core-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/dist/vendor/core-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;