refactor: shadcn consistency audit — idioms, calendar v9, registry deps

ROADMAP.md

@@ -127,15 +127,15 @@ twice. Reference sources: `https://ui.shadcn.com/r/styles/base-nova/<name>.json`
 ### 4b. Site foundation (nova)
 
 - [x] Re-vendor the docs site's `components/ui/` from the `base-nova` preset;
-      nova theme adopted. Remaining straggler: `ui/form.tsx` still imports
-      `@radix-ui/react-label`/`react-slot` — replace with Base UI
-      `Field`/`Form` when demo form plumbing is reworked (see 4c).
-- [ ] Remove Radix dependencies from `apps/v4` — **all of them** (re-decided
+      nova theme adopted. The `ui/form.tsx` straggler (Radix label/slot) was
+      replaced with base-nova `field.tsx` in PR #63 (2026-07-16).
+- [x] Remove Radix dependencies from `apps/v4` — **all of them** (re-decided
       2026-07-15 with the clean-cut policy: the earlier "no maintained
       component imports Radix" carve-out for frozen superseded components no
-      longer applies since those are removed rather than frozen). Zero
-      `@radix-ui/*` packages remain after the 4c ports, the superseded-
-      component removal, and the `ui/form.tsx` replacement.
+      longer applies since those are removed rather than frozen). Shipped
+      2026-07-16 (PR #63): zero `@radix-ui/*` packages remain after the 4c
+      ports, the superseded-component removal, and the `ui/form.tsx` →
+      base-nova `field.tsx` replacement.
 - [x] Fix site-header vertical separators — shipped 2026-07-15
       (PR #61, `fix/header-separator`).
 
@@ -176,9 +176,10 @@ demos.
       (PR #62): combobox, date-picker, date/time fields, native-select,
       password-input and all examples migrated; phone-input 4px height
       mismatch fixed; every page browser-verified.
-- [ ] Port each kept component: swap Radix building blocks for Base UI
-      equivalents and apply classes from the `base-nova` sources. Concrete
-      Radix → Base UI swaps (surveyed 2026-07-15):
+- [x] Port each kept component: swap Radix building blocks for Base UI
+      equivalents and apply classes from the `base-nova` sources — shipped
+      2026-07-16 (PR #63). Concrete Radix → Base UI swaps (surveyed
+      2026-07-15):
       - Full primitives: `date-picker-primitive` popover → Base UI Popover;
         `badge-group` + `emoji-picker` toggle-group → Base UI Toggle Group;
         `sortable` portal → React DOM `createPortal`.
@@ -195,14 +196,19 @@ demos.
       registry.json 34 → 26 items; entangled keeper examples rewritten
       against vendored shadcn `kbd`/`button-group`/`attachment`/`combobox`
       (Base UI) in `apps/v4/src/components/ui/`.
-- [ ] Rewrite demos/examples against the nova metrics (adopt Base UI
+- [x] Rewrite demos/examples against the nova metrics (adopt Base UI
       `Field`/`Form` for form plumbing, replacing `ui/form.tsx`); verify
-      every page.
+      every page — shipped 2026-07-16 (PR #63); form demos stay controlled
+      from first render (`field.value ?? null`).
 - [ ] Styling polish during the ports: date/time field segments render
       taller than desired (noted 2026-07-16) — revisit segment height when
       applying nova classes to the field components.
-- [ ] Update registry.json (single style) and install docs after the
-      removals + ports.
+- [x] Update registry.json (single style) and install docs after the
+      removals + ports — done 2026-07-16: internal `registryDependencies`
+      switched from dead self-hosted `https://ui-x.junwen-k.dev/r/*.json`
+      URLs to GitHub-registry addresses (`junwen-k/ui-x/<item>`), registry
+      validated (`shadcn registry validate`, 26 items); `installation.mdx`
+      already documents the `junwen-k/ui-x/<item>` install form.
 
 ### 4d. Docs content — API Reference & Accessibility sections (after ports)
 

apps/v4/registry.json

@@ -8,9 +8,7 @@
       "type": "registry:component",
       "title": "BProgress Provider Next App",
       "description": "A smooth progress bar for page transitions in Next.js apps, using the App Router.",
-      "dependencies": [
-        "@bprogress/next"
-      ],
+      "dependencies": ["@bprogress/next"],
       "files": [
         {
           "path": "src/registry/new-york/components/bprogress-provider-next-app.tsx",
@@ -24,9 +22,7 @@
       "type": "registry:component",
       "title": "BProgress Provider Next Pages",
       "description": "A smooth progress bar for page transitions in Next.js pages, using the Pages Router.",
-      "dependencies": [
-        "@bprogress/next"
-      ],
+      "dependencies": ["@bprogress/next"],
       "files": [
         {
           "path": "src/registry/new-york/components/bprogress-provider-next-pages.tsx",
@@ -40,13 +36,8 @@
       "type": "registry:ui",
       "title": "Date Time Field Primitive",
       "description": "Date Time Field Primitive allows user to enter date and time value.",
-      "dependencies": [
-        "@base-ui/react",
-        "timescape"
-      ],
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/use-timescape.json"
-      ],
+      "dependencies": ["@base-ui/react", "timescape"],
+      "registryDependencies": ["junwen-k/ui-x/use-timescape"],
       "files": [
         {
           "path": "src/registry/new-york/ui/date-time-field-primitive.tsx",
@@ -59,14 +50,8 @@
       "type": "registry:ui",
       "title": "Emoji Picker",
       "description": "A emoji picker is a component that allows users to select an emoji from a list of emojis.",
-      "dependencies": [
-        "@base-ui/react",
-        "frimousse"
-      ],
-      "registryDependencies": [
-        "button",
-        "popover"
-      ],
+      "dependencies": ["@base-ui/react", "frimousse"],
+      "registryDependencies": ["button", "popover"],
       "files": [
         {
           "path": "src/registry/new-york/ui/emoji-picker.tsx",
@@ -79,11 +64,7 @@
       "type": "registry:hook",
       "title": "Use Timescape",
       "description": "A reactive wrapper around Timescape that provides controlled and uncontrolled state management for date/time input.",
-      "dependencies": [
-        "@base-ui/utils",
-        "react-day-picker",
-        "timescape"
-      ],
+      "dependencies": ["@base-ui/utils", "react-day-picker", "timescape"],
       "files": [
         {
           "path": "src/registry/new-york/hooks/use-timescape.ts",
@@ -96,13 +77,8 @@
       "type": "registry:ui",
       "title": "Date Time Range Field Primitive",
       "description": "Date Time Range Field Primitive allows user to enter date and time value for a range of dates.",
-      "dependencies": [
-        "@base-ui/react",
-        "timescape"
-      ],
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/use-timescape.json"
-      ],
+      "dependencies": ["@base-ui/react", "timescape"],
+      "registryDependencies": ["junwen-k/ui-x/use-timescape"],
       "files": [
         {
           "path": "src/registry/new-york/ui/date-time-range-field-primitive.tsx",
@@ -122,8 +98,8 @@
         "react-day-picker"
       ],
       "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/date-time-field-primitive.json",
-        "https://ui-x.junwen-k.dev/r/date-time-range-field-primitive.json"
+        "junwen-k/ui-x/date-time-field-primitive",
+        "junwen-k/ui-x/date-time-range-field-primitive"
       ],
       "files": [
         {
@@ -137,10 +113,7 @@
       "type": "registry:ui",
       "title": "Dropzone Primitive",
       "description": "A dropzone is an area into which one or multiple objects can be dragged and dropped.",
-      "dependencies": [
-        "@base-ui/react",
-        "react-dropzone"
-      ],
+      "dependencies": ["@base-ui/react", "react-dropzone"],
       "files": [
         {
           "path": "src/registry/new-york/ui/dropzone-primitive.tsx",
@@ -153,10 +126,7 @@
       "type": "registry:ui",
       "title": "Password Input Primitive",
       "description": "Password Input provides a way for the user to securely enter a password, with the ability to toggle the visibility of the password.",
-      "dependencies": [
-        "@base-ui/react",
-        "@base-ui/utils"
-      ],
+      "dependencies": ["@base-ui/react", "@base-ui/utils"],
       "files": [
         {
           "path": "src/registry/new-york/ui/password-input-primitive.tsx",
@@ -204,10 +174,7 @@
       "type": "registry:ui",
       "title": "Virtualized",
       "description": "A virtualized component that allows you to efficiently render large lists and tabular data.",
-      "dependencies": [
-        "@base-ui/react",
-        "virtua"
-      ],
+      "dependencies": ["@base-ui/react", "virtua"],
       "files": [
         {
           "path": "src/registry/new-york/ui/virtualized.tsx",
@@ -220,13 +187,8 @@
       "type": "registry:ui",
       "title": "Badge Group",
       "description": "A badge group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.",
-      "dependencies": [
-        "@base-ui/react",
-        "@base-ui/utils"
-      ],
-      "registryDependencies": [
-        "badge"
-      ],
+      "dependencies": ["@base-ui/react", "@base-ui/utils"],
+      "registryDependencies": ["badge"],
       "files": [
         {
           "path": "src/registry/new-york/ui/badge-group.tsx",
@@ -239,13 +201,8 @@
       "type": "registry:ui",
       "title": "Confirmer",
       "description": "Imperative confirm dialog implementation.",
-      "dependencies": [
-        "react-call"
-      ],
-      "registryDependencies": [
-        "alert-dialog",
-        "button"
-      ],
+      "dependencies": ["react-call"],
+      "registryDependencies": ["alert-dialog", "button"],
       "files": [
         {
           "path": "src/registry/new-york/ui/confirmer.tsx",
@@ -258,9 +215,7 @@
       "type": "registry:ui",
       "title": "Date Field",
       "description": "Date Field allows user to enter date value.",
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/date-time-field.json"
-      ],
+      "registryDependencies": ["junwen-k/ui-x/date-time-field"],
       "files": [
         {
           "path": "src/registry/new-york/ui/date-field.tsx",
@@ -275,7 +230,7 @@
       "description": "Date Time Field allows user to enter date and time value.",
       "registryDependencies": [
         "input-group",
-        "https://ui-x.junwen-k.dev/r/date-time-field-primitive.json"
+        "junwen-k/ui-x/date-time-field-primitive"
       ],
       "files": [
         {
@@ -291,8 +246,8 @@
       "description": "Date Time Range Field allows user to enter date and time value for a range of dates.",
       "registryDependencies": [
         "input-group",
-        "https://ui-x.junwen-k.dev/r/date-time-field.json",
-        "https://ui-x.junwen-k.dev/r/date-time-range-field-primitive.json"
+        "junwen-k/ui-x/date-time-field",
+        "junwen-k/ui-x/date-time-range-field-primitive"
       ],
       "files": [
         {
@@ -310,8 +265,8 @@
         "button",
         "input-group",
         "calendar",
-        "https://ui-x.junwen-k.dev/r/date-field.json",
-        "https://ui-x.junwen-k.dev/r/date-picker-primitive.json"
+        "junwen-k/ui-x/date-field",
+        "junwen-k/ui-x/date-picker-primitive"
       ],
       "files": [
         {
@@ -337,12 +292,8 @@
       "type": "registry:ui",
       "title": "Dropzone",
       "description": "A dropzone is an area into which one or multiple objects can be dragged and dropped.",
-      "dependencies": [
-        "@base-ui/react"
-      ],
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/dropzone-primitive.json"
-      ],
+      "dependencies": ["@base-ui/react"],
+      "registryDependencies": ["junwen-k/ui-x/dropzone-primitive"],
       "files": [
         {
           "path": "src/registry/new-york/ui/dropzone.tsx",
@@ -357,7 +308,7 @@
       "description": "Password Input provides a way for the user to securely enter a password, with the ability to toggle the visibility of the password.",
       "registryDependencies": [
         "input-group",
-        "https://ui-x.junwen-k.dev/r/password-input-primitive.json"
+        "junwen-k/ui-x/password-input-primitive"
       ],
       "files": [
         {
@@ -372,7 +323,7 @@
       "title": "Phone Input",
       "description": "Phone Input allows user to enter phone number in E.164 format.",
       "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/phone-input-primitive.json",
+        "junwen-k/ui-x/phone-input-primitive",
         "input",
         "select"
       ],
@@ -388,9 +339,7 @@
       "type": "registry:ui",
       "title": "Time Field",
       "description": "Time Field allows user to enter time value.",
-      "registryDependencies": [
-        "https://ui-x.junwen-k.dev/r/date-time-field.json"
-      ],
+      "registryDependencies": ["junwen-k/ui-x/date-time-field"],
       "files": [
         {
           "path": "src/registry/new-york/ui/time-field.tsx",
@@ -403,9 +352,7 @@
       "type": "registry:ui",
       "title": "Time",
       "description": "Displays a specific time (or datetime).",
-      "dependencies": [
-        "date-fns"
-      ],
+      "dependencies": ["date-fns"],
       "files": [
         {
           "path": "src/registry/new-york/ui/time.tsx",
@@ -418,9 +365,7 @@
       "type": "registry:ui",
       "title": "Timeline",
       "description": "Timeline displays a list of events in chronological order.",
-      "dependencies": [
-        "@base-ui/react"
-      ],
+      "dependencies": ["@base-ui/react"],
       "files": [
         {
           "path": "src/registry/new-york/ui/timeline.tsx",
@@ -433,9 +378,7 @@
       "type": "registry:ui",
       "title": "Wheel Picker",
       "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
-      "dependencies": [
-        "@ncdai/react-wheel-picker"
-      ],
+      "dependencies": ["@ncdai/react-wheel-picker"],
       "files": [
         {
           "path": "src/registry/new-york/ui/wheel-picker.tsx",

apps/v4/src/components/examples/password-input-checkbox.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 
 import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 import {
   PasswordInput,
   PasswordInputInput,
@@ -22,12 +23,7 @@ export default function PasswordInputCheckbox() {
           checked={visible}
           onCheckedChange={(checked) => setVisible(Boolean(checked))}
         />
-        <label
-          htmlFor="toggle-password"
-          className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          Show password
-        </label>
+        <Label htmlFor="toggle-password">Show password</Label>
       </div>
     </div>
   );