@agentero/design-system 0.34.0 → 0.34.1

package/mcp/manifests/components.html

@@ -594,7 +594,7 @@
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>3.8s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>5.0s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -7972,8 +7972,12 @@ required?: boolean = false</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Optional field with a muted suffix</div>
-              <div class="hint">Appends a muted &quot; (optional)&quot; suffix for fields that can be left blank.</div>
-              <pre><code>const Optional = () =&gt; &lt;Label optional&gt;Phone number&lt;/Label&gt;;</code></pre>
+              <div class="hint">Appends a muted &quot; (optional)&quot; suffix for fields that can be left blank. The
+suffix is real text, so it is part of the control&#39;s accessible name.</div>
+              <pre><code>const Optional = () =&gt; &lt;&gt;
+    &lt;Label optional htmlFor=&quot;phone&quot;&gt;Phone number&lt;/Label&gt;
+    &lt;input id=&quot;phone&quot; type=&quot;tel&quot; className={inputRecipe()} /&gt;
+&lt;/&gt;;</code></pre>
             </div>
             <div class="note ok">
               <div class="row">

package/mcp/manifests/components.json

@@ -7133,8 +7133,8 @@
         {
           "id": "components-label--optional",
           "name": "Optional",
-          "snippet": "const Optional = () => <Label optional>Phone number</Label>;",
-          "description": "Appends a muted \" (optional)\" suffix for fields that can be left blank.",
+          "snippet": "const Optional = () => <>\n    <Label optional htmlFor=\"phone\">Phone number</Label>\n    <input id=\"phone\" type=\"tel\" className={inputRecipe()} />\n</>;",
+          "description": "Appends a muted \" (optional)\" suffix for fields that can be left blank. The\nsuffix is real text, so it is part of the control's accessible name.",
           "summary": "Optional field with a muted suffix"
         },
         {
@@ -9867,6 +9867,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3754
+    "durationMs": 5001
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.34.0",
+	"version": "0.34.1",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/label/label.d.ts

@@ -1,36 +1,48 @@
 import { ComponentPropsWithRef } from 'react';
 import { VariantProps } from 'tailwind-variants';
 import * as LabelPrimitive from '@radix-ui/react-label';
-/** Style recipe for Label. Slots: `root`, `text`, `required`. */
+/** Style recipe for Label. Slots: `root`, `text`, `optional`, `required`. */
 export declare const labelRecipe: import('tailwind-variants').TVReturnType<{
-    optional: {
-        true: {
-            text: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            text?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            required?: import('tailwind-merge').ClassNameValue;
+            optional?: import('tailwind-merge').ClassNameValue;
         };
     };
-}, {
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            text?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            required?: import('tailwind-merge').ClassNameValue;
+            optional?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
     root: string;
     text: string;
+    optional: string;
     required: string;
 }, undefined, {
-    optional: {
-        true: {
-            text: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            text?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            required?: import('tailwind-merge').ClassNameValue;
+            optional?: import('tailwind-merge').ClassNameValue;
         };
     };
-}, {
+} | {}, {
     root: string;
     text: string;
+    optional: string;
     required: string;
-}, import('tailwind-variants').TVReturnType<{
-    optional: {
-        true: {
-            text: string;
-        };
-    };
-}, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     root: string;
     text: string;
+    optional: string;
     required: string;
 }, undefined, unknown, unknown, undefined>>;
 export type LabelVariants = VariantProps<typeof labelRecipe>;

package/src/label/label.js

@@ -2,33 +2,33 @@
 import { cn as e } from "../../lib/utils.js";
 import { useLabelContext as t } from "./context.js";
 import { tv as n } from "tailwind-variants";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-label";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-label";
 //#region src/label/label.tsx
-var o = n({
-	slots: {
-		root: "flex flex-wrap gap-1 py-0.25 text-sm font-semibold text-text-input-normal",
-		text: "align-middle",
-		required: "align-middle text-text-input-destructive"
-	},
-	variants: { optional: { true: { text: "after:font-normal after:text-text-input-placeholder after:content-[\"_(optional)\"]" } } },
-	defaultVariants: { optional: !1 }
-}), s = (n) => {
-	let { className: s, children: c, optional: l = !1, required: u = !1, ...d } = t(n), f = o({ optional: l && !u });
-	return /* @__PURE__ */ i(a.Root, {
+var s = n({ slots: {
+	root: "flex flex-wrap gap-1 py-0.25 text-sm font-semibold text-text-input-normal",
+	text: "align-middle",
+	optional: "font-normal text-text-input-placeholder",
+	required: "align-middle text-text-input-destructive"
+} }), c = (n) => {
+	let { className: c, children: l, optional: u = !1, required: d = !1, ...f } = t(n), p = u && !d, m = s();
+	return /* @__PURE__ */ a(o.Root, {
 		"data-slot": "label",
-		className: e(f.root(), s),
-		...d,
-		children: [/* @__PURE__ */ r("span", {
-			className: f.text(),
-			children: c
-		}), u && /* @__PURE__ */ r("span", {
+		className: e(m.root(), c),
+		...f,
+		children: [/* @__PURE__ */ a("span", {
+			className: m.text(),
+			children: [l, p && /* @__PURE__ */ a(r, { children: [" ", /* @__PURE__ */ i("span", {
+				className: m.optional(),
+				children: "(optional)"
+			})] })]
+		}), d && /* @__PURE__ */ i("span", {
 			"aria-hidden": !0,
-			className: f.required(),
+			className: m.required(),
 			children: "*"
 		})]
 	});
 };
-s.displayName = "Label";
+c.displayName = "Label";
 //#endregion
-export { s as Label, o as labelRecipe };
+export { c as Label, s as labelRecipe };