wip

Author: claudemyburgh

AGENTS.md

@@ -212,11 +212,4 @@ Use Wayfinder to generate TypeScript functions for Laravel routes. Import from `
 
 - IMPORTANT: Activate `inertia-react-development` when working with Inertia React client-side patterns.
 
-=== tailwindcss/shadcn rules ===
-
-# TailwindCSS & Shadcn Colors
-
-- NEVER use hardcoded theme colors like `bg-zinc-50`, `dark:bg-black`, `bg-emerald-50/50`, `dark:bg-zinc-950`, `text-emerald-700`, `dark:text-emerald-400`.
-- ALWAYS use semantic Shadcn variables and color tokens defined in `resources/css/app.css` (e.g., `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-muted`, `text-muted-foreground`, `bg-primary`, `text-primary-foreground`, `bg-secondary`, `text-secondary-foreground`, `border-border`, `bg-destructive`, etc.). This ensures layout consistency and automatic compatibility in both light and dark modes.
-
 </laravel-boost-guidelines>

app/Console/Commands/RegistryBuildCommand.php

@@ -236,6 +236,7 @@ public function handle(): int
             'input-currency' => 'A smart text input formatting numeric entries into localized currency notation as you type.',
             'input-number' => 'A numeric spinner input containing up/down stepper buttons and range constraints.',
             'input-phone' => 'A formatted text input enforcing phone masks and raw numeric outputs.',
+            'input-password' => 'A password input field with a toggleable eye icon to show/hide the password text.',
             'input-slug' => 'A reactive field transforming raw keystrokes into clean URL-safe slug strings.',
             'multi-select' => 'A dropdown selector allowing search, selection, and creation of multiple tags.',
             'progress-circle' => 'A clean SVG circular progress meter displaying animated percentage levels.',

bun.lock

@@ -3984,6 +3984,7 @@ className="flex items-center gap-2"
                     'https://ui.test/r/input-phone.json',
                     'https://ui.test/r/input-currency.json',
                     'https://ui.test/r/input-number.json',
+                    'https://ui.test/r/input-password.json',
                     'https://ui.test/r/multi-select.json',
                     'input',
                     'card',
@@ -4009,6 +4010,7 @@ className="flex items-center gap-2"
 import { InputPhone } from \'@/registry/new-york/components/ui/inputs/input-phone\';
 import { InputCurrency } from \'@/registry/new-york/components/ui/inputs/input-currency\';
 import { InputNumber } from \'@/registry/new-york/components/ui/inputs/input-number\';
+import { InputPassword } from \'@/registry/new-york/components/ui/inputs/input-password\';
 import {
     MultiSelect,
     MultiSelectTrigger,
@@ -4032,6 +4034,7 @@ className="flex items-center gap-2"
     const [selectedTags, setSelectedTags] = useState<string[]>([]);
     const [searchFocused, setSearchFocused] = useState(false);
     const [searchValue, setSearchValue] = useState(\'\');
+    const [passwordValue, setPasswordValue] = useState(\'\');
 
     // New component states
     const [phoneValue, setPhoneValue] = useState(\'1234567890\');
@@ -4333,20 +4336,24 @@ className="h-9 w-full text-xs"
                     <CardHeader className="pb-3">
                         <CardTitle className="flex items-center gap-2 text-sm font-bold">
                             <Lock className="size-4 text-chart-1" />
-                            Glow-Border Passcode Field
+                            Password Input
                         </CardTitle>
                         <CardDescription className="text-xs">
-                            Simple passcode field illustrating focused states.
+                            A secure password input field with a toggleable visibility eye icon.
                         </CardDescription>
                     </CardHeader>
-                    <CardContent className="flex flex-1 flex-col justify-center pb-6">
-                        <div className="relative">
-                            <Lock className="absolute top-1/2 left-3 size-3.5 -translate-y-1/2 text-muted-foreground" />
-                            <Input
-                                type="password"
-                                placeholder="••••••••"
-                                className="h-9 border-border/50 bg-card/15 pl-9 text-xs focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20"
-                            />
+                    <CardContent className="flex flex-1 flex-col justify-center space-y-3 pb-6">
+                        <InputPassword
+                            value={passwordValue}
+                            onChange={(e) => setPasswordValue(e.target.value)}
+                            placeholder="••••••••"
+                            className="h-9 w-full text-xs"
+                        />
+                        <div className="truncate rounded border border-border/20 bg-muted/30 p-2.5 font-mono text-[10px] text-muted-foreground">
+                            Value:{\' \'}
+                            <span className="font-bold text-primary">
+                                {passwordValue || \'none\'}
+                            </span>
                         </div>
                     </CardContent>
                 </Card>
@@ -13826,6 +13833,109 @@ className="flex flex-1 cursor-pointer items-center justify-center rounded-br-md
 
 export { InputNumber };
 export type { InputNumberProps };
+',
+                    ],
+                ],
+                'css' => null,
+                'tailwind' => null,
+                'vars_theme' => null,
+                'vars_light' => null,
+                'vars_dark' => null,
+                'font_family' => null,
+                'font_mono' => null,
+                'font_serif' => null,
+                'meta' => [
+                    'category' => 'inputs',
+                    'version' => '1.0.0',
+                ],
+                'docs' => null,
+                'categories' => [
+                    'inputs',
+                ],
+                'extends' => null,
+                'style' => null,
+                'icon_library' => null,
+                'base_color' => null,
+                'theme' => null,
+            ],
+            [
+                'name' => 'input-password',
+                'type' => 'registry:ui',
+                'title' => 'Input Password',
+                'description' => 'A password input field with a toggleable eye icon to show/hide the password text.',
+                'author' => 'designbycode',
+                'dependencies' => [
+                    'lucide-react',
+                ],
+                'devDependencies' => [
+
+                ],
+                'registryDependencies' => [
+                    'input',
+                    'button',
+                    'utils',
+                ],
+                'files' => [
+                    [
+                        'path' => 'resources/js/registry/new-york/components/ui/inputs/input-password.tsx',
+                        'type' => 'registry:ui',
+                        'content' => '\'use client\';
+
+import * as React from \'react\';
+import { Eye, EyeOff } from \'lucide-react\';
+import { Input } from \'@/components/ui/input\';
+import { Button } from \'@/components/ui/button\';
+import { cn } from \'@/lib/utils\';
+
+interface InputPasswordProps extends React.ComponentProps<\'input\'> {
+    /**
+     * Custom class name for the toggle button
+     */
+    toggleClassName?: string;
+}
+
+const InputPassword = React.forwardRef<HTMLInputElement, InputPasswordProps>(
+    ({ className, toggleClassName, ...props }, ref) => {
+        const [showPassword, setShowPassword] = React.useState(false);
+
+        const toggleVisibility = () => {
+            setShowPassword((prev) => !prev);
+        };
+
+        return (
+            <div className="relative w-full">
+                <Input
+                    type={showPassword ? \'text\' : \'password\'}
+                    className={cn(\'pr-10\', className)}
+                    ref={ref}
+                    {...props}
+                />
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className={cn(
+                        \'absolute top-1/2 right-0 size-9 -translate-y-1/2 text-muted-foreground/70 hover:bg-transparent hover:text-foreground cursor-pointer select-none\',
+                        toggleClassName
+                    )}
+                    onClick={toggleVisibility}
+                    aria-label={showPassword ? \'Hide password\' : \'Show password\'}
+                >
+                    {showPassword ? (
+                        <EyeOff className="size-4" />
+                    ) : (
+                        <Eye className="size-4" />
+                    )}
+                </Button>
+            </div>
+        );
+    }
+);
+
+InputPassword.displayName = \'InputPassword\';
+
+export { InputPassword };
+export type { InputPasswordProps };
 ',
                     ],
                 ],

composer.lock

@@ -18,7 +18,7 @@
         "@stylistic/eslint-plugin": "^5.10.0",
         "@types/culori": "^4.0.1",
         "@types/gsap": "^3.0.0",
-        "@types/node": "^22.19.21",
+        "@types/node": "^22.20.0",
         "@types/prismjs": "^1.26.6",
         "@types/three": "^0.184.1",
         "babel-plugin-react-compiler": "^1.0.0",
@@ -30,17 +30,17 @@
         "eslint-plugin-react-hooks": "^7.1.1",
         "prettier": "^3.8.4",
         "prettier-plugin-tailwindcss": "^0.6.14",
-        "typescript-eslint": "^8.61.1"
+        "typescript-eslint": "^8.62.0"
     },
     "dependencies": {
         "@base-ui/react": "^1.6.0",
         "@dnd-kit/react": "^0.5.0",
         "@fontsource/bebas-neue": "^5.2.7",
         "@gsap/react": "^2.1.2",
         "@headlessui/react": "^2.2.10",
-        "@heyputer/puter.js": "^2.5.3",
-        "@inertiajs/react": "^3.4.0",
-        "@inertiajs/vite": "^3.4.0",
+        "@heyputer/puter.js": "^2.5.4",
+        "@inertiajs/react": "^3.5.0",
+        "@inertiajs/vite": "^3.5.0",
         "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-avatar": "^1.2.0",
         "@radix-ui/react-checkbox": "^1.3.5",
@@ -70,22 +70,22 @@
         "input-otp": "^1.4.2",
         "laravel-vite-plugin": "^3.1.0",
         "lucide-react": "^0.475.0",
-        "motion": "^12.40.0",
-        "openai": "^6.44.0",
+        "motion": "^12.42.0",
+        "openai": "^6.45.0",
         "prismjs": "^1.30.0",
         "radix-ui": "^1.6.0",
         "react": "^19.2.7",
         "react-day-picker": "^9.14.0",
         "react-dom": "^19.2.7",
-        "recharts": "^3.8.1",
+        "recharts": "^3.9.0",
         "sonner": "^2.0.7",
         "swiper": "^12.2.0",
         "tailwind-merge": "^3.6.0",
         "tailwindcss": "^4.3.1",
         "three": "^0.184.0",
         "tw-animate-css": "^1.4.0",
         "typescript": "^5.9.3",
-        "vite": "^8.0.16",
+        "vite": "^8.1.0",
         "zustand": "^5.0.14"
     },
     "optionalDependencies": {