feat: sync label component

.gitignore

@@ -31,6 +31,10 @@ Thumbs.db
 # Claude
 .claude
 logs
+trees/
+
+# Worktree environment configs
+**/.ports.env
 
 app.config.timestamp*
 

apps/docs/app.config.ts

@@ -20,7 +20,10 @@ export default defineConfig(
         }
       },
       vite: {
-        plugins: [tailwindcss()]
+        plugins: [tailwindcss()],
+        server: {
+          port: parseInt(process.env.FRONTEND_PORT || "5173", 10)
+        }
       }
     },
     {

apps/docs/src/config/docs.ts

@@ -63,6 +63,10 @@ export const docsConfig: Config = {
           title: "Input Group",
           href: "/docs/components/input-group"
         },
+        {
+          title: "Label",
+          href: "/docs/components/label"
+        },
         {
           title: "Radio Group",
           href: "/docs/components/radio-group"

apps/docs/src/registry/__index__.tsx

@@ -130,6 +130,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "label": {
+    name: "label",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    component: lazy(() => import("~/registry/ui/label.tsx")),
+    files: [{
+      path: "registry/ui/label.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "input-group": {
     name: "input-group",
     description: "",
@@ -676,6 +690,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "label-demo": {
+    name: "label-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["label","checkbox"],
+    component: lazy(() => import("~/registry/examples/label-demo.tsx")),
+    files: [{
+      path: "registry/examples/label-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "radio-group-demo": {
     name: "radio-group-demo",
     description: "",

apps/docs/src/registry/examples/_registry.ts

@@ -364,6 +364,17 @@ export const examples: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "label-demo",
+    type: "registry:example",
+    registryDependencies: ["label", "checkbox"],
+    files: [
+      {
+        path: "examples/label-demo.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
   {
     name: "radio-group-demo",
     type: "registry:example",

apps/docs/src/registry/examples/label-demo.tsx

@@ -0,0 +1,11 @@
+import { Checkbox } from "~/registry/ui/checkbox"
+import { Label } from "~/registry/ui/label"
+
+export default function LabelDemo() {
+  return (
+    <div class="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label for="terms">Accept terms and conditions</Label>
+    </div>
+  )
+}

apps/docs/src/registry/styles/style-lyra.css

@@ -711,7 +711,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-xs leading-none group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-xs leading-none group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */

apps/docs/src/registry/styles/style-maia.css

@@ -736,7 +736,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-sm leading-none font-medium group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */

apps/docs/src/registry/styles/style-mira.css

@@ -736,7 +736,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-xs/relaxed leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-xs/relaxed leading-none font-medium group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */

apps/docs/src/registry/styles/style-nova.css

@@ -736,7 +736,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-sm leading-none font-medium group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */

apps/docs/src/registry/styles/style-vega.css

@@ -732,7 +732,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-sm leading-none font-medium group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */

apps/docs/src/registry/ui/_registry.ts

@@ -89,6 +89,16 @@ export const ui: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "label",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/label.tsx",
+        type: "registry:ui"
+      }
+    ]
+  },
   {
     name: "input-group",
     type: "registry:ui",

apps/docs/src/registry/ui/label.tsx

@@ -4,11 +4,11 @@ import { splitProps } from "solid-js"
 import { cn } from "~/lib/utils"
 
 const Label: Component<ComponentProps<"label">> = (props) => {
-  const [local, others] = splitProps(props, ["class", "for"])
+  const [local, others] = splitProps(props, ["class"])
   return (
     <label
       class={cn(
-        "flex select-none items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+        "cn-label flex select-none items-center peer-disabled:cursor-not-allowed group-data-disabled:pointer-events-none peer-data-disabled:cursor-not-allowed",
         local.class
       )}
       data-slot="label"

apps/docs/src/routes/docs/components/label.mdx

@@ -0,0 +1,45 @@
+---
+title: Label
+description: Renders an accessible label associated with controls.
+---
+
+::::tab-group[preview]
+:::tab[Preview]
+
+<ComponentPreview name="label-demo" />
+
+:::
+:::tab[Code]
+
+```file="~/registry/examples/label-demo" frame=none showLineNumbers
+
+```
+
+:::
+::::
+
+## Installation
+
+### CLI
+
+```package-exec
+solidui-cli@latest add label
+```
+
+### Manual
+
+Copy and paste the following code into your project.
+
+```file="~/registry/ui/label.tsx" showLineNumbers
+
+```
+
+## Usage
+
+```tsx
+import { Label } from "~/components/ui/label";
+```
+
+```tsx
+<Label for="email">Your email address</Label>
+```

apps/docs/tsconfig.json

@@ -22,10 +22,8 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedIndexedAccess": true,
     "noImplicitOverride": true,
-    // Some stricter flags (disabled by default)
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noPropertyAccessFromIndexSignature": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./src/*"]