@agentero/design-system 0.22.2 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.22.2",
+	"version": "0.23.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -61,6 +61,10 @@
 			"types": "./src/hover-card/index.d.ts",
 			"import": "./src/hover-card/index.js"
 		},
+		"./label": {
+			"types": "./src/label/index.d.ts",
+			"import": "./src/label/index.js"
+		},
 		"./loading": {
 			"types": "./src/loading/index.d.ts",
 			"import": "./src/loading/index.js"
@@ -132,6 +136,7 @@
 		"@radix-ui/react-dialog": "^1.1.19",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-hover-card": "^1.1.19",
+		"@radix-ui/react-label": "^2.1.11",
 		"@radix-ui/react-popover": "^1.1.15",
 		"@radix-ui/react-progress": "^1.1.12",
 		"@radix-ui/react-separator": "^1.1.8",

package/src/label/index.d.ts

@@ -0,0 +1,2 @@
+export { Label, labelRecipe } from './label';
+export type { LabelProps, LabelVariants } from './label';

package/src/label/index.js

@@ -0,0 +1,2 @@
+import { Label as e, labelRecipe as t } from "./label.js";
+export { e as Label, t as labelRecipe };

package/src/label/label.d.ts

@@ -0,0 +1,61 @@
+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`. */
+export declare const labelRecipe: import('tailwind-variants').TVReturnType<{
+    optional: {
+        true: {
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    text: string;
+    required: string;
+}, undefined, {
+    optional: {
+        true: {
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    text: string;
+    required: string;
+}, import('tailwind-variants').TVReturnType<{
+    optional: {
+        true: {
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    text: string;
+    required: string;
+}, undefined, unknown, unknown, undefined>>;
+export type LabelVariants = VariantProps<typeof labelRecipe>;
+export type LabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root> & LabelVariants & {
+    /** Appends a muted " (optional)" suffix. Ignored when `required` is set. */
+    optional?: boolean;
+    /** Appends a decorative asterisk. Mark the control itself `required` too — the asterisk is `aria-hidden`. */
+    required?: boolean;
+};
+/**
+ * Accessible caption for a form control, built on Radix's Label primitive so it
+ * associates with the control via `htmlFor` and does not select text on
+ * double-click.
+ *
+ * Keep it text-only. Nesting an interactive element (a help tooltip trigger, a
+ * button) inside a `<label>` gives that element the label's accessible name and
+ * makes a click focus the control — render it as a sibling instead.
+ *
+ * @summary Accessible caption for a form control
+ *
+ * @example
+ * <Label htmlFor="phone" optional>Phone number</Label>
+ * <Input id="phone" type="tel" />
+ */
+export declare const Label: {
+    ({ className, children, optional, required, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/label/label.js

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

package/src/popover/popover.js

@@ -34,7 +34,7 @@ var s = n.Portal, c = e({ base: [
 	"data-[state=open]:data-[side=top]:animate-dropdown-slide-in-from-bottom",
 	"data-[state=closed]:animate-dropdown-slide-out",
 	"motion-reduce:animate-none!"
-] }), l = ({ className: e, sideOffset: r = 1, ...i }) => /* @__PURE__ */ t(n.Portal, { children: /* @__PURE__ */ t(n.Content, {
+] }), l = ({ className: e, sideOffset: r = 8, ...i }) => /* @__PURE__ */ t(n.Portal, { children: /* @__PURE__ */ t(n.Content, {
 	"data-slot": "popover-content",
 	sideOffset: r,
 	className: c({ className: e }),