@liedsonc/core-auth-kit 0.1.0 → 0.2.0

package/auth-ui/components/password-input.tsx

@@ -1,93 +1,93 @@
-"use client";
-
-import * as React from "react";
-import { Input } from "./ui/input";
-import { Button } from "./ui/button";
-import { cn } from "../utils";
-
-function getStrength(value: string): 0 | 1 | 2 | 3 {
-  if (!value) return 0;
-  let s = 0;
-  if (value.length >= 8) s++;
-  if (value.length >= 12) s++;
-  if (/[A-Z]/.test(value) && /[a-z]/.test(value) && /\d/.test(value)) s++;
-  return Math.min(s, 3) as 0 | 1 | 2 | 3;
-}
-
-export interface PasswordInputProps
-  extends Omit<React.ComponentProps<typeof Input>, "type"> {
-  showStrength?: boolean;
-}
-
-const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
-  ({ className, showStrength = false, ...props }, ref) => {
-    const [show, setShow] = React.useState(false);
-    const [value, setValue] = React.useState("");
-    const id = React.useId();
-    const strength = showStrength ? getStrength(value) : 0;
-
-    return (
-      <div className="space-y-1.5">
-        <div className="relative">
-          <Input
-            ref={ref}
-            type={show ? "text" : "password"}
-            autoComplete="current-password"
-            aria-describedby={showStrength ? `${id}-strength` : undefined}
-            className={cn("pr-10", className)}
-            {...props}
-            value={props.value ?? value}
-            onChange={(e) => {
-              setValue(e.target.value);
-              props.onChange?.(e);
-            }}
-          />
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-            aria-label={show ? "Hide password" : "Show password"}
-            aria-pressed={show}
-            onClick={() => setShow((p) => !p)}
-            tabIndex={-1}
-          >
-            <span className="text-xs font-medium" aria-hidden="true">
-              {show ? "Hide" : "Show"}
-            </span>
-          </Button>
-        </div>
-        {showStrength && value && (
-          <div
-            id={`${id}-strength`}
-            role="progressbar"
-            aria-valuenow={strength}
-            aria-valuemin={0}
-            aria-valuemax={3}
-            aria-label="Password strength"
-            className="flex gap-1"
-          >
-            {[1, 2, 3].map((i) => (
-              <span
-                key={i}
-                className={cn(
-                  "h-1 flex-1 rounded-full",
-                  i <= strength
-                    ? strength === 1
-                      ? "bg-destructive"
-                      : strength === 2
-                        ? "bg-amber-500"
-                        : "bg-green-500"
-                    : "bg-muted"
-                )}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-PasswordInput.displayName = "PasswordInput";
-
-export { PasswordInput };
+"use client";
+
+import * as React from "react";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { cn } from "../utils";
+
+function getStrength(value: string): 0 | 1 | 2 | 3 {
+  if (!value) return 0;
+  let s = 0;
+  if (value.length >= 8) s++;
+  if (value.length >= 12) s++;
+  if (/[A-Z]/.test(value) && /[a-z]/.test(value) && /\d/.test(value)) s++;
+  return Math.min(s, 3) as 0 | 1 | 2 | 3;
+}
+
+export interface PasswordInputProps
+  extends Omit<React.ComponentProps<typeof Input>, "type"> {
+  showStrength?: boolean;
+}
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ className, showStrength = false, ...props }, ref) => {
+    const [show, setShow] = React.useState(false);
+    const [value, setValue] = React.useState("");
+    const id = React.useId();
+    const strength = showStrength ? getStrength(value) : 0;
+
+    return (
+      <div className="space-y-1.5">
+        <div className="relative">
+          <Input
+            ref={ref}
+            type={show ? "text" : "password"}
+            autoComplete="current-password"
+            aria-describedby={showStrength ? `${id}-strength` : undefined}
+            className={cn("pr-10", className)}
+            {...props}
+            value={props.value ?? value}
+            onChange={(e) => {
+              setValue(e.target.value);
+              props.onChange?.(e);
+            }}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+            aria-label={show ? "Hide password" : "Show password"}
+            aria-pressed={show}
+            onClick={() => setShow((p) => !p)}
+            tabIndex={-1}
+          >
+            <span className="text-xs font-medium" aria-hidden="true">
+              {show ? "Hide" : "Show"}
+            </span>
+          </Button>
+        </div>
+        {showStrength && value && (
+          <div
+            id={`${id}-strength`}
+            role="progressbar"
+            aria-valuenow={strength}
+            aria-valuemin={0}
+            aria-valuemax={3}
+            aria-label="Password strength"
+            className="flex gap-1"
+          >
+            {[1, 2, 3].map((i) => (
+              <span
+                key={i}
+                className={cn(
+                  "h-1 flex-1 rounded-full",
+                  i <= strength
+                    ? strength === 1
+                      ? "bg-destructive"
+                      : strength === 2
+                        ? "bg-amber-500"
+                        : "bg-green-500"
+                    : "bg-muted"
+                )}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };

package/auth-ui/components/success-message.tsx

@@ -1,24 +1,24 @@
-"use client";
-
-import { cn } from "../utils";
-
-export function SuccessMessage({
-  children,
-  className,
-  id,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  id?: string;
-}) {
-  if (!children) return null;
-  return (
-    <p
-      id={id}
-      role="status"
-      className={cn("text-sm text-green-600 dark:text-green-400", className)}
-    >
-      {children}
-    </p>
-  );
-}
+"use client";
+
+import { cn } from "../utils";
+
+export function SuccessMessage({
+  children,
+  className,
+  id,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  id?: string;
+}) {
+  if (!children) return null;
+  return (
+    <p
+      id={id}
+      role="status"
+      className={cn("text-sm text-green-600 dark:text-green-400", className)}
+    >
+      {children}
+    </p>
+  );
+}

package/auth-ui/package.json

@@ -1,55 +1,61 @@
-{
-  "name": "@liedsonc/core-auth-kit",
-  "version": "0.1.0",
-  "description": "Production-ready authentication UI package for Next.js App Router",
-  "main": "./index.ts",
-  "types": "./index.ts",
-  "exports": {
-    ".": "./index.ts",
-    "./styles": "./styles/index.css"
-  },
-  "files": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.css"
-  ],
-  "scripts": {
-    "build": "tsc --noEmit",
-    "type-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.5.0"
-  },
-  "peerDependencies": {
-    "next": "^15.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "typescript": "^5.6.0"
-  },
-  "keywords": [
-    "nextjs",
-    "auth",
-    "authentication",
-    "ui",
-    "shadcn",
-    "react",
-    "typescript"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/liedsonc/core-auth-kit.git",
-    "directory": "auth-ui"
-  },
-  "bugs": {
-    "url": "https://github.com/liedsonc/core-auth-kit/issues"
-  },
-    "homepage": "https://github.com/liedsonc/core-auth-kit#readme"
-}
+{
+  "name": "@liedsonc/core-auth-kit",
+  "version": "0.1.0",
+  "description": "Production-ready authentication UI package for Next.js App Router",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./styles": "./styles/index.css"
+  },
+  "bin": {
+    "core-auth-kit": "bin/init.js"
+  },
+  "files": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.css",
+    "**/*.js",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
+    "publish": "npm publish --access public"
+  },
+  "dependencies": {
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.0"
+  },
+  "peerDependencies": {
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "typescript": "^5.6.0"
+  },
+  "keywords": [
+    "nextjs",
+    "auth",
+    "authentication",
+    "ui",
+    "shadcn",
+    "react",
+    "typescript"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liedsonc/core-auth-kit.git",
+    "directory": "auth-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/liedsonc/core-auth-kit/issues"
+  },
+  "homepage": "https://github.com/liedsonc/core-auth-kit#readme"
+}

package/auth-ui/pages/forgot-password/index.tsx

@@ -1,83 +1,83 @@
-"use client";
-
-import Link from "next/link";
-import { useAuth } from "../../hooks/use-auth";
-import { AuthCard } from "../../components/auth-card";
-import { AuthForm } from "../../components/auth-form";
-import { FormField } from "../../components/form-field";
-import { SuccessMessage } from "../../components/success-message";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
-import { useState } from "react";
-
-const successMessage =
-  "If an account exists for this email, you will receive a link to reset your password.";
-
-export function ForgotPasswordPage() {
-  const { forgotPassword, loading, error, clearError } = useAuth();
-  const [email, setEmail] = useState("");
-  const [submitted, setSubmitted] = useState(false);
-  const [fieldError, setFieldError] = useState<string | undefined>();
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    clearError();
-    setFieldError(undefined);
-    if (!email.trim()) {
-      setFieldError("Email is required.");
-      return;
-    }
-    await forgotPassword(email.trim());
-    setSubmitted(true);
-  };
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center p-4">
-      <AuthCard
-        title="Forgot password"
-        subtitle="Enter your email and we'll send you a reset link"
-        footer={
-          <div className="flex w-full justify-center text-sm text-muted-foreground">
-            <Link
-              href="/login"
-              className="underline underline-offset-4 hover:text-foreground"
-            >
-              Back to sign in
-            </Link>
-          </div>
-        }
-      >
-        {submitted ? (
-          <SuccessMessage>{successMessage}</SuccessMessage>
-        ) : (
-          <AuthForm onSubmit={handleSubmit} loading={loading}>
-            {error && (
-              <p role="alert" className="text-sm text-destructive">
-                Something went wrong. Please try again later.
-              </p>
-            )}
-            <FormField label="Email" htmlFor="forgot-email" error={fieldError} required>
-              <Input
-                id="forgot-email"
-                type="email"
-                autoComplete="email"
-                placeholder="you@example.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                disabled={loading}
-                aria-invalid={!!fieldError}
-              />
-            </FormField>
-            <Button type="submit" className="w-full" disabled={loading}>
-              {loading ? (
-                <span className="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-              ) : (
-                "Send reset link"
-              )}
-            </Button>
-          </AuthForm>
-        )}
-      </AuthCard>
-    </div>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import { useAuth } from "../../hooks/use-auth";
+import { AuthCard } from "../../components/auth-card";
+import { AuthForm } from "../../components/auth-form";
+import { FormField } from "../../components/form-field";
+import { SuccessMessage } from "../../components/success-message";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { useState } from "react";
+
+const successMessage =
+  "If an account exists for this email, you will receive a link to reset your password.";
+
+export function ForgotPasswordPage() {
+  const { forgotPassword, loading, error, clearError } = useAuth();
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [fieldError, setFieldError] = useState<string | undefined>();
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    clearError();
+    setFieldError(undefined);
+    if (!email.trim()) {
+      setFieldError("Email is required.");
+      return;
+    }
+    await forgotPassword(email.trim());
+    setSubmitted(true);
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4">
+      <AuthCard
+        title="Forgot password"
+        subtitle="Enter your email and we'll send you a reset link"
+        footer={
+          <div className="flex w-full justify-center text-sm text-muted-foreground">
+            <Link
+              href="/login"
+              className="underline underline-offset-4 hover:text-foreground"
+            >
+              Back to sign in
+            </Link>
+          </div>
+        }
+      >
+        {submitted ? (
+          <SuccessMessage>{successMessage}</SuccessMessage>
+        ) : (
+          <AuthForm onSubmit={handleSubmit} loading={loading}>
+            {error && (
+              <p role="alert" className="text-sm text-destructive">
+                Something went wrong. Please try again later.
+              </p>
+            )}
+            <FormField label="Email" htmlFor="forgot-email" error={fieldError} required>
+              <Input
+                id="forgot-email"
+                type="email"
+                autoComplete="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                disabled={loading}
+                aria-invalid={!!fieldError}
+              />
+            </FormField>
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? (
+                <span className="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+              ) : (
+                "Send reset link"
+              )}
+            </Button>
+          </AuthForm>
+        )}
+      </AuthCard>
+    </div>
+  );
+}