@promakeai/cli 0.4.6 → 0.4.8

package/dist/registry/reset-password-page-split.json

@@ -23,7 +23,7 @@
       "path": "reset-password-page-split/reset-password-page-split.tsx",
       "type": "registry:page",
       "target": "$modules$/reset-password-page-split/reset-password-page-split.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useSearchParams } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { KeyRound, ArrowLeft, CheckCircle } from \"lucide-react\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\n\r\ninterface ResetPasswordPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function ResetPasswordPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: ResetPasswordPageSplitProps) {\r\n  const { t } = useTranslation(\"reset-password-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Reset Password\") });\r\n  const navigate = useNavigate();\r\n  const [searchParams] = useSearchParams();\r\n  const { resetPassword } = useAuth();\r\n\r\n  // Get code and username from URL params\r\n  const code = searchParams.get(\"code\") || \"\";\r\n  const username = searchParams.get(\"username\") || searchParams.get(\"email\") || \"\";\r\n\r\n  const [password, setPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [isSuccess, setIsSuccess] = useState(false);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (password !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    // Validate we have required params\r\n    if (!code || !username) {\r\n      setError(t(\"invalidLink\", \"Invalid or expired reset link. Please request a new one.\"));\r\n      return;\r\n    }\r\n\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await resetPassword(username, code, password);\r\n\r\n      setIsSuccess(true);\r\n      toast.success(t(\"passwordResetSuccess\", \"Password reset successfully!\"));\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"resetPasswordError\", \"Failed to reset password. Please try again.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  // Success state\r\n  if (isSuccess) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div className=\"flex justify-center\">\r\n              <div className=\"w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center\">\r\n                <CheckCircle className=\"w-8 h-8 text-green-600 dark:text-green-400\" />\r\n              </div>\r\n            </div>\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight\">\r\n                {t(\"passwordReset\", \"Password Reset!\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"passwordResetDescription\", \"Your password has been reset successfully. You can now log in with your new password.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/login\")} className=\"w-full\">\r\n              {t(\"goToLogin\", \"Go to Login\")}\r\n            </Button>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Reset password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n\r\n  // Invalid link state\r\n  if (!code || !username) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight text-red-600\">\r\n                {t(\"invalidLinkTitle\", \"Invalid Reset Link\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"invalidLinkDescription\", \"This password reset link is invalid or has expired. Please request a new one.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/forgot-password\")} className=\"w-full\">\r\n              {t(\"requestNewLink\", \"Request New Link\")}\r\n            </Button>\r\n\r\n            <Link\r\n              to=\"/login\"\r\n              className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n            >\r\n              <ArrowLeft className=\"w-4 h-4\" />\r\n              {t(\"backToLogin\", \"Back to login\")}\r\n            </Link>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Reset password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n      <div className=\"flex items-center justify-center px-4 py-12\">\r\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\r\n          <Logo />\r\n          <hr />\r\n\r\n          <div className=\"flex justify-center\">\r\n            <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center\">\r\n              <KeyRound className=\"w-6 h-6 text-primary\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"text-center\">\r\n            <h1 className=\"text-xl font-bold tracking-tight\">\r\n              {t(\"title\", \"Reset Password\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground mt-1\">\r\n              {t(\"subtitle\", \"Enter your new password below\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"password\">{t(\"newPassword\", \"New Password\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"password\"\r\n                type=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"confirm-password\">{t(\"confirmPassword\", \"Confirm Password\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"confirm-password\"\r\n                type=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={confirmPassword}\r\n                onChange={(e) => setConfirmPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"resetting\", \"Resetting...\")}\r\n                </>\r\n              ) : (\r\n                t(\"resetPassword\", \"Reset Password\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <Link\r\n            to=\"/login\"\r\n            className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n          >\r\n            <ArrowLeft className=\"w-4 h-4\" />\r\n            {t(\"backToLogin\", \"Back to login\")}\r\n          </Link>\r\n\r\n          <hr />\r\n          <p className=\"text-sm text-muted-foreground\">\r\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div className=\"hidden p-4 md:block\">\r\n        <img\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          width=\"1920\"\r\n          height=\"1080\"\r\n          alt={t(\"imageAlt\", \"Reset password background\")}\r\n          src={image}\r\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n        />\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default ResetPasswordPageSplit;\r\n"
+      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useSearchParams } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { KeyRound, ArrowLeft, CheckCircle } from \"lucide-react\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\nimport { FormField } from \"@/components/FormField\";\r\nimport { PasswordInput } from \"@/components/PasswordInput\";\r\n\r\ninterface ResetPasswordPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function ResetPasswordPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: ResetPasswordPageSplitProps) {\r\n  const { t } = useTranslation(\"reset-password-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Reset Password\") });\r\n  const navigate = useNavigate();\r\n  const [searchParams] = useSearchParams();\r\n  const { resetPassword } = useAuth();\r\n\r\n  // Get code and username from URL params\r\n  const code = searchParams.get(\"code\") || \"\";\r\n  const username = searchParams.get(\"username\") || searchParams.get(\"email\") || \"\";\r\n\r\n  const [password, setPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [isSuccess, setIsSuccess] = useState(false);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (password !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    // Validate we have required params\r\n    if (!code || !username) {\r\n      setError(t(\"invalidLink\", \"Invalid or expired reset link. Please request a new one.\"));\r\n      return;\r\n    }\r\n\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await resetPassword(username, code, password);\r\n\r\n      setIsSuccess(true);\r\n      toast.success(t(\"passwordResetSuccess\", \"Password reset successfully!\"));\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"resetPasswordError\", \"Failed to reset password. Please try again.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  // Success state\r\n  if (isSuccess) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div className=\"flex justify-center\">\r\n              <div className=\"w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center\">\r\n                <CheckCircle className=\"w-8 h-8 text-green-600 dark:text-green-400\" />\r\n              </div>\r\n            </div>\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight\">\r\n                {t(\"passwordReset\", \"Password Reset!\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"passwordResetDescription\", \"Your password has been reset successfully. You can now log in with your new password.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/login\")} className=\"w-full\">\r\n              {t(\"goToLogin\", \"Go to Login\")}\r\n            </Button>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Reset password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n\r\n  // Invalid link state\r\n  if (!code || !username) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight text-red-600\">\r\n                {t(\"invalidLinkTitle\", \"Invalid Reset Link\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"invalidLinkDescription\", \"This password reset link is invalid or has expired. Please request a new one.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/forgot-password\")} className=\"w-full\">\r\n              {t(\"requestNewLink\", \"Request New Link\")}\r\n            </Button>\r\n\r\n            <Link\r\n              to=\"/login\"\r\n              className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n            >\r\n              <ArrowLeft className=\"w-4 h-4\" />\r\n              {t(\"backToLogin\", \"Back to login\")}\r\n            </Link>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Reset password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  } \r\n\r\n  return (\r\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n      <div className=\"flex items-center justify-center px-4 py-12\">\r\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\r\n          <Logo />\r\n          <hr />\r\n\r\n          <div className=\"flex justify-center\">\r\n            <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center\">\r\n              <KeyRound className=\"w-6 h-6 text-primary\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"text-center\">\r\n            <h1 className=\"text-xl font-bold tracking-tight\">\r\n              {t(\"title\", \"Reset Password\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground mt-1\">\r\n              {t(\"subtitle\", \"Enter your new password below\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"newPassword\", \"New Password\")} htmlFor=\"password\" required>\r\n              <PasswordInput\r\n                required\r\n                id=\"password\"\r\n                name=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n              </FormField>\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"confirmPassword\", \"Confirm Password\")} htmlFor=\"confirm-password\" required>\r\n              <PasswordInput\r\n                required\r\n                id=\"confirm-password\"\r\n                name=\"confirm-password\"\r\n                autoComplete=\"confirm-password\"\r\n                placeholder=\"••••••••\"\r\n                value={confirmPassword}\r\n                onChange={(e) => setConfirmPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n              </FormField>\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"resetting\", \"Resetting...\")}\r\n                </>\r\n              ) : (\r\n                t(\"resetPassword\", \"Reset Password\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <Link\r\n            to=\"/login\"\r\n            className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n          >\r\n            <ArrowLeft className=\"w-4 h-4\" />\r\n            {t(\"backToLogin\", \"Back to login\")}\r\n          </Link>\r\n\r\n          <hr />\r\n          <p className=\"text-sm text-muted-foreground\">\r\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div className=\"hidden p-4 md:block\">\r\n        <img\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          width=\"1920\"\r\n          height=\"1080\"\r\n          alt={t(\"imageAlt\", \"Reset password background\")}\r\n          src={image}\r\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n        />\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default ResetPasswordPageSplit;\r\n"
     },
     {
       "path": "reset-password-page-split/lang/en.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/cli",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "type": "module",
   "bin": {
     "promake": "dist/index.js"

package/template/README.md

@@ -1,73 +1,73 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(["dist"]),
-  {
-    files: ["**/*.{ts,tsx}"],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-]);
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from "eslint-plugin-react-x";
-import reactDom from "eslint-plugin-react-dom";
-
-export default defineConfig([
-  globalIgnores(["dist"]),
-  {
-    files: ["**/*.{ts,tsx}"],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs["recommended-typescript"],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-]);
-```
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+]);
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from "eslint-plugin-react-x";
+import reactDom from "eslint-plugin-react-dom";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs["recommended-typescript"],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+]);
+```

package/template/src/PasswordInput.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Eye, EyeOff } from "lucide-react";
+
+interface PasswordInputProps {
+  id?: string;
+  name?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  required?: boolean;
+  autoComplete?: string;
+  className?: string;
+  disabled?: boolean;
+  minLength?: number;
+}
+
+export function PasswordInput({
+  id = "password",
+  name = "password",
+  value,
+  onChange,
+  placeholder = "Enter password",
+  required = false,
+  autoComplete = "current-password",
+  disabled = false,
+  minLength = undefined,
+  className = "",
+}: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+      <div className="relative">
+        <Input
+          id={id}
+          name={name}
+          type={showPassword ? "text" : "password"}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          required={required}
+          className={`mt-1 pr-10 ${className}`}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          minLength={minLength}
+        />
+        <button
+          type="button"
+          onClick={() => setShowPassword(!showPassword)}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          aria-label={showPassword ? "Hide password" : "Show password"}
+        >
+          {showPassword ? (
+            <EyeOff className="w-4 h-4" />
+          ) : (
+            <Eye className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+  );
+}

package/template/src/components/FormField.tsx

@@ -1,15 +1,17 @@
 import { Stack } from "./Stack";
 import { Label } from "./ui/label";
 
+// FormField.tsx
 export interface FormFieldProps {
-  label: string;
+  label: React.ReactNode;
   htmlFor?: string;
   error?: string;
   required?: boolean;
   description?: string;
   children: React.ReactNode;
-  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12; // Stack gap override
+  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12;
   className?: string;
+  labelAction?: React.ReactNode; // YENİ
 }
 
 export function FormField({ 
@@ -21,12 +23,16 @@ export function FormField({
   description,
   gap = 2,
   className,
+  labelAction, // YENİ
 }: FormFieldProps) {
   return (
     <Stack gap={gap} className={className}>
-      <Label htmlFor={htmlFor}>
-        {label} {required && <span className="text-destructive">*</span>}
-      </Label>
+      <div className="flex items-center justify-between">
+        <Label htmlFor={htmlFor}>
+          {label} {required && <span className="text-destructive">*</span>}
+        </Label>
+        {labelAction}
+      </div>
       {children}
       {description && (
         <p className="text-sm text-muted-foreground">