@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/dist/hooks/useForkRef.cjs

@@ -0,0 +1,27 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/hooks/useForkRef.ts
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const useForkRef = (...refs) => {
+	/**
+	* This will create a new function if the refs passed to this hook change and are all defined.
+	* This means react will call the old forkRef with `null` and the new forkRef
+	* with the ref. Cleanup naturally emerges from this behavior.
+	*/
+	return (0, react.useMemo)(() => {
+		if (refs.every((ref) => ref == null)) return null;
+		return (instance) => {
+			refs.forEach((ref) => {
+				setRef(ref, instance);
+			});
+		};
+	}, [refs]);
+};
+
+//#endregion
+exports.useForkRef = useForkRef;

package/dist/hooks/useForkRef.d.cts

@@ -0,0 +1,7 @@
+import { Ref, RefCallback } from "react";
+
+//#region src/hooks/useForkRef.d.ts
+declare const useForkRef: <Instance>(...refs: Array<Ref<Instance> | undefined>) => RefCallback<Instance> | null;
+//#endregion
+export { useForkRef };
+//# sourceMappingURL=useForkRef.d.cts.map

package/dist/hooks/useForkRef.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForkRef.d.cts","names":[],"sources":["../../src/hooks/useForkRef.ts"],"sourcesContent":[],"mappings":";;;cAca,gCACF,MAAM,IAAI,2BAClB,YAAY"}

package/dist/hooks/useForkRef.d.ts

@@ -0,0 +1,7 @@
+import { Ref, RefCallback } from "react";
+
+//#region src/hooks/useForkRef.d.ts
+declare const useForkRef: <Instance>(...refs: Array<Ref<Instance> | undefined>) => RefCallback<Instance> | null;
+//#endregion
+export { useForkRef };
+//# sourceMappingURL=useForkRef.d.ts.map

package/dist/hooks/useForkRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForkRef.d.ts","names":[],"sources":["../../src/hooks/useForkRef.ts"],"sourcesContent":[],"mappings":";;;cAca,gCACF,MAAM,IAAI,2BAClB,YAAY"}

package/dist/hooks/useForkRef.js

@@ -0,0 +1,27 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { useMemo } from "react";
+
+//#region src/hooks/useForkRef.ts
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const useForkRef = (...refs) => {
+	/**
+	* This will create a new function if the refs passed to this hook change and are all defined.
+	* This means react will call the old forkRef with `null` and the new forkRef
+	* with the ref. Cleanup naturally emerges from this behavior.
+	*/
+	return useMemo(() => {
+		if (refs.every((ref) => ref == null)) return null;
+		return (instance) => {
+			refs.forEach((ref) => {
+				setRef(ref, instance);
+			});
+		};
+	}, [refs]);
+};
+
+//#endregion
+export { useForkRef };
+//# sourceMappingURL=useForkRef.js.map

package/dist/hooks/useForkRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForkRef.js","names":[],"sources":["../../src/hooks/useForkRef.ts"],"sourcesContent":["import type { MutableRefObject, Ref, RefCallback } from 'react';\nimport { useMemo } from 'react';\n\nconst setRef = <T>(\n  ref: MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,\n  value: T | null,\n) => {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref) {\n    ref.current = value;\n  }\n};\n\nexport const useForkRef = <Instance>(\n  ...refs: Array<Ref<Instance> | undefined>\n): RefCallback<Instance> | null => {\n  /**\n   * This will create a new function if the refs passed to this hook change and are all defined.\n   * This means react will call the old forkRef with `null` and the new forkRef\n   * with the ref. Cleanup naturally emerges from this behavior.\n   */\n  return useMemo(() => {\n    if (refs.every((ref) => ref == null)) {\n      return null;\n    }\n\n    return (instance) => {\n      refs.forEach((ref) => {\n        setRef(ref, instance);\n      });\n    };\n  }, [refs]);\n};\n"],"mappings":";;;;AAGA,MAAM,UACJ,KACA,UACG;AACH,KAAI,OAAO,QAAQ,WACjB,KAAI,MAAM;UACD,IACT,KAAI,UAAU;;AAIlB,MAAa,cACX,GAAG,SAC8B;;;;;;AAMjC,QAAO,cAAc;AACnB,MAAI,KAAK,OAAO,QAAQ,OAAO,KAAK,CAClC,QAAO;AAGT,UAAQ,aAAa;AACnB,QAAK,SAAS,QAAQ;AACpB,WAAO,KAAK,SAAS;KACrB;;IAEH,CAAC,KAAK,CAAC"}

package/dist/hooks/useNestedBorderRadius.cjs

@@ -0,0 +1,80 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+
+//#region src/hooks/useNestedBorderRadius.ts
+/**
+* 🐍 Generate border radius that works nicely with the parents border-radius
+*
+* When nesting elements with border radius, using the same radius value for both
+* parent and child creates an awkward visual gap in the corners (known as the "snake belly" effect).
+*
+* The solution is to make the inner element's border radius smaller than the parent's
+* by subtracting the spacing between elements. This creates a smooth transition between the nested elements.
+*
+* For common spacing values ('px', 0.5, 1, 2, 2.5, 3, 3.5, 4), we use calc() to subtract the spacing.
+* For other cases, we use simpler Tailwind classes that work well visually.
+*
+* We use CSS max() to ensure the border radius never gets too small, which is especially
+* important for small spacing values. For example, with spacing=2px and a large border radius,
+* the calculated value might become too small to look good. max() ensures we maintain
+* a minimum border radius that scales with the parent's border radius size.
+*
+* @example
+* Parent: border-radius: 8px, spacing: 4px
+* Child: max(2px, calc(8px - 4px)) // Ensures minimum of 2px
+*
+* @link https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners
+*/
+const useNestedBorderRadius = ({ borderRadius, spacing }) => {
+	if (spacing === void 0 || spacing === "0") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))]";
+		case "md": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))]";
+	}
+	if (spacing === "px" || spacing === "0.5") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_2px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))]";
+	}
+	if (spacing === "1" || spacing === "1.5") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_4px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_4px)]";
+	}
+	if (spacing === "2" || spacing === "2.5") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_8px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_8px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_8px)]";
+	}
+	if (spacing === "3" || spacing === "3.5") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-md)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-md)_-_6px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))] [&>*:last-child]:rounded-b-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))]";
+	}
+	if (spacing === "4") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_16px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_16px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))]";
+	}
+	switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))] [&>*:last-child]:rounded-b-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))]";
+	}
+};
+
+//#endregion
+exports.useNestedBorderRadius = useNestedBorderRadius;

package/dist/hooks/useNestedBorderRadius.d.cts

@@ -0,0 +1,38 @@
+import { BorderRadius } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+
+//#region src/hooks/useNestedBorderRadius.d.ts
+
+/**
+ * 🐍 Generate border radius that works nicely with the parents border-radius
+ *
+ * When nesting elements with border radius, using the same radius value for both
+ * parent and child creates an awkward visual gap in the corners (known as the "snake belly" effect).
+ *
+ * The solution is to make the inner element's border radius smaller than the parent's
+ * by subtracting the spacing between elements. This creates a smooth transition between the nested elements.
+ *
+ * For common spacing values ('px', 0.5, 1, 2, 2.5, 3, 3.5, 4), we use calc() to subtract the spacing.
+ * For other cases, we use simpler Tailwind classes that work well visually.
+ *
+ * We use CSS max() to ensure the border radius never gets too small, which is especially
+ * important for small spacing values. For example, with spacing=2px and a large border radius,
+ * the calculated value might become too small to look good. max() ensures we maintain
+ * a minimum border radius that scales with the parent's border radius size.
+ *
+ * @example
+ * Parent: border-radius: 8px, spacing: 4px
+ * Child: max(2px, calc(8px - 4px)) // Ensures minimum of 2px
+ *
+ * @link https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners
+ */
+declare const useNestedBorderRadius: ({
+  borderRadius,
+  spacing
+}: {
+  borderRadius: BorderRadius;
+  spacing?: string;
+}) => "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_4px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_4px)]" | "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))]" | "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_8px))]" | "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_8px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_8px)]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))]" | "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))]" | "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-md)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-md)_-_6px))]" | "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))]" | "[&>*:first-child]:rounded-t-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))] [&>*:last-child]:rounded-b-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))]" | "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))]" | "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_16px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_16px))]" | "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))]" | "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))]" | "[&>*:first-child]:rounded-t-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))] [&>*:last-child]:rounded-b-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))]" | undefined;
+//#endregion
+export { useNestedBorderRadius };
+//# sourceMappingURL=useNestedBorderRadius.d.cts.map

package/dist/hooks/useNestedBorderRadius.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNestedBorderRadius.d.cts","names":[],"sources":["../../src/hooks/useNestedBorderRadius.ts"],"sourcesContent":[],"mappings":";;;;;;;;AA0BA,CAAA,CAAA,CAAA,IAAA,CAAA,OAAA,CAAA,QAAA,CAAA,IAAA,CAAA,MAAA,CAAA,MAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,IAAA,CAAA,MAAA,CAAA,KAAA,CAAA,GAAA,CAAA;;;;;;;;;;;;;;;;;;;;cAAa;;;;gBAIG"}

package/dist/hooks/useNestedBorderRadius.d.ts

@@ -0,0 +1,38 @@
+import { BorderRadius } from "../tokens/types.js";
+import "../tokens/index.js";
+
+//#region src/hooks/useNestedBorderRadius.d.ts
+
+/**
+ * 🐍 Generate border radius that works nicely with the parents border-radius
+ *
+ * When nesting elements with border radius, using the same radius value for both
+ * parent and child creates an awkward visual gap in the corners (known as the "snake belly" effect).
+ *
+ * The solution is to make the inner element's border radius smaller than the parent's
+ * by subtracting the spacing between elements. This creates a smooth transition between the nested elements.
+ *
+ * For common spacing values ('px', 0.5, 1, 2, 2.5, 3, 3.5, 4), we use calc() to subtract the spacing.
+ * For other cases, we use simpler Tailwind classes that work well visually.
+ *
+ * We use CSS max() to ensure the border radius never gets too small, which is especially
+ * important for small spacing values. For example, with spacing=2px and a large border radius,
+ * the calculated value might become too small to look good. max() ensures we maintain
+ * a minimum border radius that scales with the parent's border radius size.
+ *
+ * @example
+ * Parent: border-radius: 8px, spacing: 4px
+ * Child: max(2px, calc(8px - 4px)) // Ensures minimum of 2px
+ *
+ * @link https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners
+ */
+declare const useNestedBorderRadius: ({
+  borderRadius,
+  spacing
+}: {
+  borderRadius: BorderRadius;
+  spacing?: string;
+}) => "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))]" | "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))]" | "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_4px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_4px)]" | "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))]" | "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_8px))]" | "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))]" | "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_8px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_8px)]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))]" | "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))]" | "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-md)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-md)_-_6px))]" | "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))]" | "[&>*:first-child]:rounded-t-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))] [&>*:last-child]:rounded-b-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))]" | "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))]" | "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))]" | "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_16px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_16px))]" | "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))]" | "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))]" | "[&>*:first-child]:rounded-t-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))] [&>*:last-child]:rounded-b-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))]" | undefined;
+//#endregion
+export { useNestedBorderRadius };
+//# sourceMappingURL=useNestedBorderRadius.d.ts.map

package/dist/hooks/useNestedBorderRadius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNestedBorderRadius.d.ts","names":[],"sources":["../../src/hooks/useNestedBorderRadius.ts"],"sourcesContent":[],"mappings":";;;;;;;;AA0BA,CAAA,CAAA,CAAA,IAAA,CAAA,OAAA,CAAA,QAAA,CAAA,IAAA,CAAA,MAAA,CAAA,MAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,IAAA,CAAA,MAAA,CAAA,KAAA,CAAA,GAAA,CAAA;;;;;;;;;;;;;;;;;;;;cAAa;;;;gBAIG"}

package/dist/hooks/useNestedBorderRadius.js

@@ -0,0 +1,80 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+//#region src/hooks/useNestedBorderRadius.ts
+/**
+* 🐍 Generate border radius that works nicely with the parents border-radius
+*
+* When nesting elements with border radius, using the same radius value for both
+* parent and child creates an awkward visual gap in the corners (known as the "snake belly" effect).
+*
+* The solution is to make the inner element's border radius smaller than the parent's
+* by subtracting the spacing between elements. This creates a smooth transition between the nested elements.
+*
+* For common spacing values ('px', 0.5, 1, 2, 2.5, 3, 3.5, 4), we use calc() to subtract the spacing.
+* For other cases, we use simpler Tailwind classes that work well visually.
+*
+* We use CSS max() to ensure the border radius never gets too small, which is especially
+* important for small spacing values. For example, with spacing=2px and a large border radius,
+* the calculated value might become too small to look good. max() ensures we maintain
+* a minimum border radius that scales with the parent's border radius size.
+*
+* @example
+* Parent: border-radius: 8px, spacing: 4px
+* Child: max(2px, calc(8px - 4px)) // Ensures minimum of 2px
+*
+* @link https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners
+*/
+const useNestedBorderRadius = ({ borderRadius, spacing }) => {
+	if (spacing === void 0 || spacing === "0") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))]";
+		case "md": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))]";
+	}
+	if (spacing === "px" || spacing === "0.5") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_2px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))]";
+	}
+	if (spacing === "1" || spacing === "1.5") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_4px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_4px)]";
+	}
+	if (spacing === "2" || spacing === "2.5") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_8px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_8px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_8px)]";
+	}
+	if (spacing === "3" || spacing === "3.5") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-md)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-md)_-_6px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))] [&>*:last-child]:rounded-b-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))]";
+	}
+	if (spacing === "4") switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_16px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_16px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))]";
+	}
+	switch (borderRadius) {
+		case "xs": return "[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]";
+		case "sm": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]";
+		case "md": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]";
+		case "lg": return "[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]";
+		case "xl": return "[&>*:first-child]:rounded-t-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))] [&>*:last-child]:rounded-b-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))]";
+	}
+};
+
+//#endregion
+export { useNestedBorderRadius };
+//# sourceMappingURL=useNestedBorderRadius.js.map

package/dist/hooks/useNestedBorderRadius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNestedBorderRadius.js","names":[],"sources":["../../src/hooks/useNestedBorderRadius.ts"],"sourcesContent":["import type { BorderRadius } from '@yahoo/uds/tokens';\n\n/**\n * 🐍 Generate border radius that works nicely with the parents border-radius\n *\n * When nesting elements with border radius, using the same radius value for both\n * parent and child creates an awkward visual gap in the corners (known as the \"snake belly\" effect).\n *\n * The solution is to make the inner element's border radius smaller than the parent's\n * by subtracting the spacing between elements. This creates a smooth transition between the nested elements.\n *\n * For common spacing values ('px', 0.5, 1, 2, 2.5, 3, 3.5, 4), we use calc() to subtract the spacing.\n * For other cases, we use simpler Tailwind classes that work well visually.\n *\n * We use CSS max() to ensure the border radius never gets too small, which is especially\n * important for small spacing values. For example, with spacing=2px and a large border radius,\n * the calculated value might become too small to look good. max() ensures we maintain\n * a minimum border radius that scales with the parent's border radius size.\n *\n * @example\n * Parent: border-radius: 8px, spacing: 4px\n * Child: max(2px, calc(8px - 4px)) // Ensures minimum of 2px\n *\n * @link https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners\n */\n\nexport const useNestedBorderRadius = ({\n  borderRadius,\n  spacing,\n}: {\n  borderRadius: BorderRadius;\n  spacing?: string;\n}) => {\n  // Handle undefined or zero spacing\n  if (spacing === undefined || spacing === '0') {\n    switch (borderRadius) {\n      case 'xs':\n        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))]';\n      case 'sm':\n        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))]';\n      case 'md':\n        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))]';\n      case 'lg':\n        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))]';\n      case 'xl':\n        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))]';\n    }\n  }\n\n  if (spacing === 'px' || spacing === '0.5') {\n    switch (borderRadius) {\n      case 'xs':\n        return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))]';\n      case 'sm':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))]';\n      case 'md':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_2px))]';\n      case 'lg':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))]';\n      case 'xl':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))]';\n    }\n  }\n\n  if (spacing === '1' || spacing === '1.5') {\n    switch (borderRadius) {\n      case 'xs':\n        return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]';\n      case 'sm':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]';\n      case 'md':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]';\n      case 'lg':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]';\n      case 'xl':\n        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_4px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_4px)]';\n    }\n  }\n\n  if (spacing === '2' || spacing === '2.5') {\n    switch (borderRadius) {\n      case 'xs':\n        return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))]';\n      case 'sm':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))]';\n      case 'md':\n        return '[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_8px))]';\n      case 'lg':\n        return '[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))]';\n      case 'xl':\n        return '[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_8px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_8px)]';\n    }\n  }\n\n  if (spacing === '3' || spacing === '3.5') {\n    switch (borderRadius) {\n      case 'xs':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))]';\n      case 'sm':\n        return '[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))]';\n      case 'md':\n        return '[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-md)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-md)_-_6px))]';\n      case 'lg':\n        return '[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))]';\n      case 'xl':\n        return '[&>*:first-child]:rounded-t-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))] [&>*:last-child]:rounded-b-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))]';\n    }\n  }\n\n  if (spacing === '4') {\n    switch (borderRadius) {\n      case 'xs':\n        return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))]';\n      case 'sm':\n        return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))]';\n      case 'md':\n        return '[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_16px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_16px))]';\n      case 'lg':\n        return '[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))]';\n      case 'xl':\n        return '[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))]';\n    }\n  }\n\n  // Fallback for other spacing values\n  switch (borderRadius) {\n    case 'xs':\n      return '[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]';\n    case 'sm':\n      return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]';\n    case 'md':\n      return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]';\n    case 'lg':\n      return '[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]';\n    case 'xl':\n      return '[&>*:first-child]:rounded-t-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))] [&>*:last-child]:rounded-b-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))]';\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,yBAAyB,EACpC,cACA,cAII;AAEJ,KAAI,YAAY,UAAa,YAAY,IACvC,SAAQ,cAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;;AAIb,KAAI,YAAY,QAAQ,YAAY,MAClC,SAAQ,cAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;;AAIb,KAAI,YAAY,OAAO,YAAY,MACjC,SAAQ,cAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;;AAIb,KAAI,YAAY,OAAO,YAAY,MACjC,SAAQ,cAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;;AAIb,KAAI,YAAY,OAAO,YAAY,MACjC,SAAQ,cAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;;AAIb,KAAI,YAAY,IACd,SAAQ,cAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;;AAKb,SAAQ,cAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO"}

package/dist/hooks/useRtl.cjs

@@ -0,0 +1,48 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/hooks/useRtl.ts
+/**
+* Gets the current RTL state from document direction
+*/
+const getDocumentDirection = () => {
+	if (typeof document === "undefined") return false;
+	return getComputedStyle(document.documentElement).direction === "rtl";
+};
+/**
+* Creates a mutation observer to watch for direction changes
+*/
+const createDirectionObserver = (callback) => {
+	const observer = new MutationObserver((mutations) => {
+		if (mutations.some((mutation) => mutation.type === "attributes" && mutation.attributeName === "dir")) callback();
+	});
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["dir"]
+	});
+	return observer;
+};
+/**
+* Hook to detect RTL context from document direction or explicit override
+* @default reads from document direction
+*/
+const useRtl = (options) => {
+	const [isRtl, setIsRtl] = (0, react.useState)(getDocumentDirection);
+	(0, react.useEffect)(() => {
+		if (options?.explicit) {
+			setIsRtl(options.explicit);
+			return;
+		}
+		const observer = createDirectionObserver(() => {
+			setIsRtl(getDocumentDirection());
+		});
+		return () => observer.disconnect();
+	}, [options?.explicit]);
+	return isRtl;
+};
+
+//#endregion
+exports.createDirectionObserver = createDirectionObserver;
+exports.getDocumentDirection = getDocumentDirection;
+exports.useRtl = useRtl;

package/dist/hooks/useRtl.d.cts

@@ -0,0 +1,21 @@
+//#region src/hooks/useRtl.d.ts
+interface UseRtlOptions {
+  /** Optional explicit RTL value that takes precedence over detected direction */
+  explicit?: boolean;
+}
+/**
+ * Gets the current RTL state from document direction
+ */
+declare const getDocumentDirection: () => boolean;
+/**
+ * Creates a mutation observer to watch for direction changes
+ */
+declare const createDirectionObserver: (callback: () => void) => MutationObserver;
+/**
+ * Hook to detect RTL context from document direction or explicit override
+ * @default reads from document direction
+ */
+declare const useRtl: (options?: UseRtlOptions) => boolean;
+//#endregion
+export { createDirectionObserver, getDocumentDirection, useRtl };
+//# sourceMappingURL=useRtl.d.cts.map

package/dist/hooks/useRtl.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRtl.d.cts","names":[],"sources":["../../src/hooks/useRtl.ts"],"sourcesContent":[],"mappings":";UAEU,aAAA;EAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,QAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,KAAA,CAAA,UAAA,CAAA,IAAA,CAAA,QAAA,CAAA,SAAA,CAAA,CAAA;EAQG,QAAA,CAAA,CAAA,CAAA,OAAA;AAWb;AAuBA,CAAA,CAAA;;;cAlCa;;;;cAWA,mDAAkD;;;;;cAuBlD,mBAAoB"}

package/dist/hooks/useRtl.d.ts

@@ -0,0 +1,21 @@
+//#region src/hooks/useRtl.d.ts
+interface UseRtlOptions {
+  /** Optional explicit RTL value that takes precedence over detected direction */
+  explicit?: boolean;
+}
+/**
+ * Gets the current RTL state from document direction
+ */
+declare const getDocumentDirection: () => boolean;
+/**
+ * Creates a mutation observer to watch for direction changes
+ */
+declare const createDirectionObserver: (callback: () => void) => MutationObserver;
+/**
+ * Hook to detect RTL context from document direction or explicit override
+ * @default reads from document direction
+ */
+declare const useRtl: (options?: UseRtlOptions) => boolean;
+//#endregion
+export { createDirectionObserver, getDocumentDirection, useRtl };
+//# sourceMappingURL=useRtl.d.ts.map

package/dist/hooks/useRtl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRtl.d.ts","names":[],"sources":["../../src/hooks/useRtl.ts"],"sourcesContent":[],"mappings":";UAEU,aAAA;EAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,QAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,KAAA,CAAA,UAAA,CAAA,IAAA,CAAA,QAAA,CAAA,SAAA,CAAA,CAAA;EAQG,QAAA,CAAA,CAAA,CAAA,OAAA;AAWb;AAuBA,CAAA,CAAA;;;cAlCa;;;;cAWA,mDAAkD;;;;;cAuBlD,mBAAoB"}

package/dist/hooks/useRtl.js

@@ -0,0 +1,46 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { useEffect, useState } from "react";
+
+//#region src/hooks/useRtl.ts
+/**
+* Gets the current RTL state from document direction
+*/
+const getDocumentDirection = () => {
+	if (typeof document === "undefined") return false;
+	return getComputedStyle(document.documentElement).direction === "rtl";
+};
+/**
+* Creates a mutation observer to watch for direction changes
+*/
+const createDirectionObserver = (callback) => {
+	const observer = new MutationObserver((mutations) => {
+		if (mutations.some((mutation) => mutation.type === "attributes" && mutation.attributeName === "dir")) callback();
+	});
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["dir"]
+	});
+	return observer;
+};
+/**
+* Hook to detect RTL context from document direction or explicit override
+* @default reads from document direction
+*/
+const useRtl = (options) => {
+	const [isRtl, setIsRtl] = useState(getDocumentDirection);
+	useEffect(() => {
+		if (options?.explicit) {
+			setIsRtl(options.explicit);
+			return;
+		}
+		const observer = createDirectionObserver(() => {
+			setIsRtl(getDocumentDirection());
+		});
+		return () => observer.disconnect();
+	}, [options?.explicit]);
+	return isRtl;
+};
+
+//#endregion
+export { createDirectionObserver, getDocumentDirection, useRtl };
+//# sourceMappingURL=useRtl.js.map

package/dist/hooks/useRtl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRtl.js","names":[],"sources":["../../src/hooks/useRtl.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ninterface UseRtlOptions {\n  /** Optional explicit RTL value that takes precedence over detected direction */\n  explicit?: boolean;\n}\n\n/**\n * Gets the current RTL state from document direction\n */\nexport const getDocumentDirection = (): boolean => {\n  if (typeof document === 'undefined') {\n    return false;\n  }\n  const direction = getComputedStyle(document.documentElement).direction;\n  return direction === 'rtl';\n};\n\n/**\n * Creates a mutation observer to watch for direction changes\n */\nexport const createDirectionObserver = (callback: () => void): MutationObserver => {\n  const observer = new MutationObserver((mutations) => {\n    const hasDirectionChange = mutations.some(\n      (mutation) => mutation.type === 'attributes' && mutation.attributeName === 'dir',\n    );\n\n    if (hasDirectionChange) {\n      callback();\n    }\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['dir'],\n  });\n\n  return observer;\n};\n\n/**\n * Hook to detect RTL context from document direction or explicit override\n * @default reads from document direction\n */\nexport const useRtl = (options?: UseRtlOptions): boolean => {\n  const [isRtl, setIsRtl] = useState(getDocumentDirection);\n\n  useEffect(() => {\n    // Handle explicit RTL override\n    if (options?.explicit) {\n      setIsRtl(options.explicit);\n      return;\n    }\n\n    // Watch for direction changes in document\n    const observer = createDirectionObserver(() => {\n      setIsRtl(getDocumentDirection());\n    });\n\n    return () => observer.disconnect();\n  }, [options?.explicit]);\n\n  return isRtl;\n};\n"],"mappings":";;;;;;;AAUA,MAAa,6BAAsC;AACjD,KAAI,OAAO,aAAa,YACtB,QAAO;AAGT,QADkB,iBAAiB,SAAS,gBAAgB,CAAC,cACxC;;;;;AAMvB,MAAa,2BAA2B,aAA2C;CACjF,MAAM,WAAW,IAAI,kBAAkB,cAAc;AAKnD,MAJ2B,UAAU,MAClC,aAAa,SAAS,SAAS,gBAAgB,SAAS,kBAAkB,MAC5E,CAGC,WAAU;GAEZ;AAEF,UAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB,CAAC,MAAM;EACzB,CAAC;AAEF,QAAO;;;;;;AAOT,MAAa,UAAU,YAAqC;CAC1D,MAAM,CAAC,OAAO,YAAY,SAAS,qBAAqB;AAExD,iBAAgB;AAEd,MAAI,SAAS,UAAU;AACrB,YAAS,QAAQ,SAAS;AAC1B;;EAIF,MAAM,WAAW,8BAA8B;AAC7C,YAAS,sBAAsB,CAAC;IAChC;AAEF,eAAa,SAAS,YAAY;IACjC,CAAC,SAAS,SAAS,CAAC;AAEvB,QAAO"}