@wordpress/ui 0.4.0 → 0.5.0

package/build-module/form/primitives/input-layout/slot.mjs

@@ -0,0 +1,130 @@
+// packages/ui/src/form/primitives/input-layout/slot.tsx
+import clsx from "clsx";
+import { forwardRef } from "@wordpress/element";
+
+// packages/ui/src/form/primitives/input-layout/style.module.css
+var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.style-module__input-layout__yyuq- {
+		/* TODO: Use padding tokens */
+		--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);
+
+		display: flex;
+		height: 40px;
+		background-color: var(--wpds-color-bg-interactive-neutral-weak);
+		border-width: var(--wpds-border-width-surface-xs);
+		border-style: solid;
+		border-color: var(--wpds-color-stroke-interactive-neutral);
+		border-radius: var(--wpds-border-radius-surface-sm);
+		font-family: var(--wpds-font-family-body);
+		font-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */
+		line-height: 1;
+		color: var(--wpds-color-fg-interactive-neutral);
+
+		@media (min-width: 600px) {
+			font-size: var(--wpds-font-size-md);
+		}
+
+		&.style-module__is-size-compact__DIB6h {
+			/* TODO: Use padding tokens */
+			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			height: 32px;
+		}
+
+		&.style-module__is-size-small__7WfNo {
+			/* TODO: Use padding tokens */
+			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			height: 24px;
+		}
+
+		&.style-module__is-disabled__b7cQR {
+			background-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);
+			border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
+			color: var(--wpds-color-fg-interactive-neutral-disabled);
+
+			@media (forced-colors: active) {
+				border-color: GrayText;
+				color: GrayText;
+			}
+		}
+
+		&.style-module__is-borderless__gJcnB {
+			border-color: transparent;
+		}
+
+		/* Don't show focus ring when the focus is in the prefix or suffix slots */
+		&:has(.style-module__input-layout-slot__DXr61:focus-within) {
+			outline: none;
+		}
+
+		&:hover:not(.style-module__is-disabled__b7cQR, .style-module__is-borderless__gJcnB) {
+			border-color: var(--wpds-color-stroke-interactive-neutral-active);
+		}
+	}
+
+	.style-module__input-layout-slot__DXr61 {
+		display: flex;
+		align-items: center;
+
+		&.style-module__is-padding-minimal__DJUmg {
+			--wp-ui-input-layout-prefix-padding-start:
+				calc(var(--wp-ui-input-layout-padding-inline) -
+				var(--wpds-dimension-base));
+			--wp-ui-input-layout-suffix-padding-end:
+				calc(var(--wp-ui-input-layout-padding-inline) -
+				var(--wpds-dimension-base));
+		}
+
+		&.style-module__is-prefix__ezQzb {
+			padding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));
+		}
+
+		&.style-module__is-suffix__R6el3 {
+			padding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));
+		}
+	}
+}
+`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+var style_default = {
+  "input-layout": "style-module__input-layout__yyuq-",
+  "is-size-compact": "style-module__is-size-compact__DIB6h",
+  "is-size-small": "style-module__is-size-small__7WfNo",
+  "is-disabled": "style-module__is-disabled__b7cQR",
+  "is-borderless": "style-module__is-borderless__gJcnB",
+  "input-layout-slot": "style-module__input-layout-slot__DXr61",
+  "is-padding-minimal": "style-module__is-padding-minimal__DJUmg",
+  "is-prefix": "style-module__is-prefix__ezQzb",
+  "is-suffix": "style-module__is-suffix__R6el3"
+};
+
+// packages/ui/src/form/primitives/input-layout/slot.tsx
+import { useInputLayoutSlotContext } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+var InputLayoutSlot = forwardRef(function InputLayoutSlot2({ type: typeProp, padding = "default", ...restProps }, ref) {
+  const typeContext = useInputLayoutSlotContext();
+  const type = typeProp ?? typeContext;
+  if (!type) {
+    throw new Error(
+      "InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot."
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        style_default["input-layout-slot"],
+        style_default[`is-${type}`],
+        style_default[`is-padding-${padding}`]
+      ),
+      ...restProps
+    }
+  );
+});
+InputLayoutSlot.displayName = "InputLayout.Slot";
+export {
+  InputLayoutSlot
+};
+//# sourceMappingURL=slot.mjs.map

package/build-module/form/primitives/input-layout/slot.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/form/primitives/input-layout/slot.tsx", "../../../../src/form/primitives/input-layout/style.module.css"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.css';\nimport type { InputLayoutSlotProps } from './types';\nimport { useInputLayoutSlotContext } from './context';\n\n/**\n * A layout helper to add paddings in a prefix or suffix.\n */\nexport const InputLayoutSlot = forwardRef<\n\tHTMLDivElement,\n\tInputLayoutSlotProps\n>( function InputLayoutSlot(\n\t{ type: typeProp, padding = 'default', ...restProps },\n\tref\n) {\n\tconst typeContext = useInputLayoutSlotContext();\n\tconst type = typeProp ?? typeContext;\n\n\tif ( ! type ) {\n\t\tthrow new Error(\n\t\t\t'InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tstyles[ 'input-layout-slot' ],\n\t\t\t\tstyles[ `is-${ type }` ],\n\t\t\t\tstyles[ `is-padding-${ padding }` ]\n\t\t\t) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n\nInputLayoutSlot.displayName = 'InputLayout.Slot';\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-components {\n\t.style-module__input-layout__yyuq- {\n\t\t/* TODO: Use padding tokens */\n\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);\n\n\t\tdisplay: flex;\n\t\theight: 40px;\n\t\tbackground-color: var(--wpds-color-bg-interactive-neutral-weak);\n\t\tborder-width: var(--wpds-border-width-surface-xs);\n\t\tborder-style: solid;\n\t\tborder-color: var(--wpds-color-stroke-interactive-neutral);\n\t\tborder-radius: var(--wpds-border-radius-surface-sm);\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */\n\t\tline-height: 1;\n\t\tcolor: var(--wpds-color-fg-interactive-neutral);\n\n\t\t@media (min-width: 600px) {\n\t\t\tfont-size: var(--wpds-font-size-md);\n\t\t}\n\n\t\t&.style-module__is-size-compact__DIB6h {\n\t\t\t/* TODO: Use padding tokens */\n\t\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);\n\t\t\theight: 32px;\n\t\t}\n\n\t\t&.style-module__is-size-small__7WfNo {\n\t\t\t/* TODO: Use padding tokens */\n\t\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);\n\t\t\theight: 24px;\n\t\t}\n\n\t\t&.style-module__is-disabled__b7cQR {\n\t\t\tbackground-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t\tborder-color: var(--wpds-color-stroke-interactive-neutral-disabled);\n\t\t\tcolor: var(--wpds-color-fg-interactive-neutral-disabled);\n\n\t\t\t@media (forced-colors: active) {\n\t\t\t\tborder-color: GrayText;\n\t\t\t\tcolor: GrayText;\n\t\t\t}\n\t\t}\n\n\t\t&.style-module__is-borderless__gJcnB {\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t/* Don't show focus ring when the focus is in the prefix or suffix slots */\n\t\t&:has(.style-module__input-layout-slot__DXr61:focus-within) {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:hover:not(.style-module__is-disabled__b7cQR, .style-module__is-borderless__gJcnB) {\n\t\t\tborder-color: var(--wpds-color-stroke-interactive-neutral-active);\n\t\t}\n\t}\n\n\t.style-module__input-layout-slot__DXr61 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&.style-module__is-padding-minimal__DJUmg {\n\t\t\t--wp-ui-input-layout-prefix-padding-start:\n\t\t\t\tcalc(var(--wp-ui-input-layout-padding-inline) -\n\t\t\t\tvar(--wpds-dimension-base));\n\t\t\t--wp-ui-input-layout-suffix-padding-end:\n\t\t\t\tcalc(var(--wp-ui-input-layout-padding-inline) -\n\t\t\t\tvar(--wpds-dimension-base));\n\t\t}\n\n\t\t&.style-module__is-prefix__ezQzb {\n\t\t\tpadding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));\n\t\t}\n\n\t\t&.style-module__is-suffix__R6el3 {\n\t\t\tpadding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));\n\t\t}\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"input-layout\": \"style-module__input-layout__yyuq-\",\n  \"is-size-compact\": \"style-module__is-size-compact__DIB6h\",\n  \"is-size-small\": \"style-module__is-size-small__7WfNo\",\n  \"is-disabled\": \"style-module__is-disabled__b7cQR\",\n  \"is-borderless\": \"style-module__is-borderless__gJcnB\",\n  \"input-layout-slot\": \"style-module__input-layout-slot__DXr61\",\n  \"is-padding-minimal\": \"style-module__is-padding-minimal__DJUmg\",\n  \"is-prefix\": \"style-module__is-prefix__ezQzb\",\n  \"is-suffix\": \"style-module__is-suffix__R6el3\"\n};"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACD3B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmFZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,aAAa;AACf;;;AD7FA,SAAS,iCAAiC;AAsBxC;AAjBK,IAAM,kBAAkB,WAG5B,SAASA,iBACX,EAAE,MAAM,UAAU,UAAU,WAAW,GAAG,UAAU,GACpD,KACC;AACD,QAAM,cAAc,0BAA0B;AAC9C,QAAM,OAAO,YAAY;AAEzB,MAAK,CAAE,MAAO;AACb,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAY;AAAA,QACX,cAAQ,mBAAoB;AAAA,QAC5B,cAAQ,MAAO,IAAK,EAAG;AAAA,QACvB,cAAQ,cAAe,OAAQ,EAAG;AAAA,MACnC;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;AAEF,gBAAgB,cAAc;",
+  "names": ["InputLayoutSlot"]
+}

package/build-module/form/primitives/input-layout/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/form/primitives/input-layout/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/icon/icon.mjs

@@ -0,0 +1,21 @@
+// packages/ui/src/icon/icon.tsx
+import { forwardRef } from "@wordpress/element";
+import { SVG } from "@wordpress/primitives";
+import { jsx } from "react/jsx-runtime";
+var Icon = forwardRef(function Icon2({ icon, size = 24, ...restProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    SVG,
+    {
+      ref,
+      fill: "currentColor",
+      ...icon.props,
+      ...restProps,
+      width: size,
+      height: size
+    }
+  );
+});
+export {
+  Icon
+};
+//# sourceMappingURL=icon.mjs.map

package/build-module/icon/icon.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/icon/icon.tsx"],
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { SVG } from '@wordpress/primitives';\nimport type { IconProps } from './types';\n\n/**\n * Renders an SVG icon with a 24px default size.\n *\n * If no `fill` colors are explicitly set on the icon itself, it will be rendered with a `currentColor` fill.\n *\n * ```jsx\n * import { wordpress } from '@wordpress/icons';\n *\n * <Icon icon={ wordpress } />\n * ```\n */\nexport const Icon = forwardRef< SVGSVGElement, IconProps >( function Icon(\n\t{ icon, size = 24, ...restProps },\n\tref\n) {\n\treturn (\n\t\t<SVG\n\t\t\tref={ ref }\n\t\t\tfill=\"currentColor\"\n\t\t\t{ ...icon.props }\n\t\t\t{ ...restProps }\n\t\t\twidth={ size }\n\t\t\theight={ size }\n\t\t/>\n\t);\n} );\n"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AAmBlB;AALK,IAAM,OAAO,WAAwC,SAASA,MACpE,EAAE,MAAM,OAAO,IAAI,GAAG,UAAU,GAChC,KACC;AACD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACH,GAAG,KAAK;AAAA,MACR,GAAG;AAAA,MACL,OAAQ;AAAA,MACR,QAAS;AAAA;AAAA,EACV;AAEF,CAAE;",
+  "names": ["Icon"]
+}

package/build-module/icon/index.mjs

@@ -0,0 +1,6 @@
+// packages/ui/src/icon/index.ts
+import { Icon } from "./icon.mjs";
+export {
+  Icon
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/icon/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/icon/index.ts"],
+  "sourcesContent": ["export { Icon } from './icon';\n"],
+  "mappings": ";AAAA,SAAS,YAAY;",
+  "names": []
+}

package/build-module/icon/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/icon/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/index.mjs

@@ -0,0 +1,9 @@
+// packages/ui/src/index.ts
+export * from "./badge/index.mjs";
+export * from "./box/index.mjs";
+export * from "./button/index.mjs";
+export * from "./form/primitives/index.mjs";
+export * from "./icon/index.mjs";
+export * from "./stack/index.mjs";
+export * from "./visually-hidden/index.mjs";
+//# sourceMappingURL=index.mjs.map

package/build-module/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export * from './badge';\nexport * from './box';\nexport * from './button';\nexport * from './form/primitives';\nexport * from './icon';\nexport * from './stack';\nexport * from './visually-hidden';\n"],
+  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/build-module/stack/index.mjs

@@ -0,0 +1,6 @@
+// packages/ui/src/stack/index.ts
+import { Stack } from "./stack.mjs";
+export {
+  Stack
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/stack/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stack/index.ts"],
+  "sourcesContent": ["export { Stack } from './stack';\n"],
+  "mappings": ";AAAA,SAAS,aAAa;",
+  "names": []
+}

package/build-module/stack/{stack.js → stack.mjs}

@@ -1,7 +1,6 @@
 // packages/ui/src/stack/stack.tsx
-import clsx from "clsx";
+import { useRender, mergeProps } from "@base-ui/react";
 import { forwardRef } from "@wordpress/element";
-import { renderElement } from "../utils/element";
 
 // packages/ui/src/stack/style.module.css
 var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
@@ -19,22 +18,21 @@ var style_default = {
 
 // packages/ui/src/stack/stack.tsx
 var Stack = forwardRef(function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
-  const className = clsx(props.className, style_default.stack);
   const style = {
     gap: gap && `var(--wpds-dimension-gap-${gap})`,
     alignItems: align,
     justifyContent: justify,
     flexDirection: direction,
-    flexWrap: wrap,
-    ...props.style
+    flexWrap: wrap
   };
-  return renderElement({
+  const element = useRender({
     render,
     ref,
-    props: { ...props, style, className }
+    props: mergeProps(props, { style, className: style_default.stack })
   });
+  return element;
 });
 export {
   Stack
 };
-//# sourceMappingURL=stack.js.map
+//# sourceMappingURL=stack.mjs.map

package/build-module/stack/stack.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stack/stack.tsx", "../../src/stack/style.module.css"],
+  "sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport { type StackProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A flexible layout component using CSS Flexbox for consistent spacing and alignment.\n * Built on design tokens for predictable spacing values.\n */\nexport const Stack = forwardRef< HTMLDivElement, StackProps >( function Stack(\n\t{ direction, gap, align, justify, wrap, render, ...props },\n\tref\n) {\n\tconst style: React.CSSProperties = {\n\t\tgap: gap && `var(--wpds-dimension-gap-${ gap })`,\n\t\talignItems: align,\n\t\tjustifyContent: justify,\n\t\tflexDirection: direction,\n\t\tflexWrap: wrap,\n\t};\n\n\tconst element = useRender( {\n\t\trender,\n\t\tref,\n\t\tprops: mergeProps< 'div' >( props, { style, className: styles.stack } ),\n\t} );\n\n\treturn element;\n} );\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-components {\n\t.style-module__stack__Gc4EG {\n\t\tdisplay: flex;\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"stack\": \"style-module__stack__Gc4EG\"\n};"],
+  "mappings": ";AAAA,SAAS,WAAW,kBAAkB;AACtC,SAAS,kBAAkB;;;ACD3B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,SAAS;AACX;;;ADLO,IAAM,QAAQ,WAA0C,SAASA,OACvE,EAAE,WAAW,KAAK,OAAO,SAAS,MAAM,QAAQ,GAAG,MAAM,GACzD,KACC;AACD,QAAM,QAA6B;AAAA,IAClC,KAAK,OAAO,4BAA6B,GAAI;AAAA,IAC7C,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,EACX;AAEA,QAAM,UAAU,UAAW;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,OAAO,WAAqB,OAAO,EAAE,OAAO,WAAW,cAAO,MAAM,CAAE;AAAA,EACvE,CAAE;AAEF,SAAO;AACR,CAAE;",
+  "names": ["Stack"]
+}

package/build-module/stack/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/stack/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/types/css-modules.d.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=css-modules.d.mjs.map

package/build-module/types/css-modules.d.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/types/{react.d.js → react.d.mjs}

@@ -1,3 +1,3 @@
 // packages/ui/src/types/react.d.ts
 import "react";
-//# sourceMappingURL=react.d.js.map
+//# sourceMappingURL=react.d.mjs.map

package/build-module/utils/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/utils/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/visually-hidden/index.mjs

@@ -0,0 +1,6 @@
+// packages/ui/src/visually-hidden/index.ts
+import { VisuallyHidden } from "./visually-hidden.mjs";
+export {
+  VisuallyHidden
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/visually-hidden/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/visually-hidden/index.ts"],
+  "sourcesContent": ["export { VisuallyHidden } from './visually-hidden';\n"],
+  "mappings": ";AAAA,SAAS,sBAAsB;",
+  "names": []
+}

package/build-module/visually-hidden/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/visually-hidden/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/visually-hidden/visually-hidden.mjs

@@ -0,0 +1,44 @@
+// packages/ui/src/visually-hidden/visually-hidden.tsx
+import { mergeProps, useRender } from "@base-ui/react";
+import { forwardRef } from "@wordpress/element";
+
+// packages/ui/src/visually-hidden/style.module.css
+var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.style-module__visually-hidden__83ueL {
+		border: 0;
+		clip-path: inset(50%);
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: absolute;
+		width: 1px;
+		word-wrap: normal;
+	}
+}
+`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+var style_default = {
+  "visually-hidden": "style-module__visually-hidden__83ueL"
+};
+
+// packages/ui/src/visually-hidden/visually-hidden.tsx
+var VisuallyHidden = forwardRef(
+  function VisuallyHidden2({ render, ...restProps }, ref) {
+    const element = useRender({
+      render,
+      ref,
+      props: mergeProps(
+        { className: style_default["visually-hidden"] },
+        restProps
+      )
+    });
+    return element;
+  }
+);
+export {
+  VisuallyHidden
+};
+//# sourceMappingURL=visually-hidden.mjs.map

package/build-module/visually-hidden/visually-hidden.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/visually-hidden/visually-hidden.tsx", "../../src/visually-hidden/style.module.css"],
+  "sourcesContent": ["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport type { VisuallyHiddenProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * Visually hides content while keeping it accessible to screen readers.\n * Useful when providing context that's only meaningful to assistive technology.\n */\nexport const VisuallyHidden = forwardRef< HTMLDivElement, VisuallyHiddenProps >(\n\tfunction VisuallyHidden( { render, ...restProps }, ref ) {\n\t\tconst element = useRender( {\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >(\n\t\t\t\t{ className: styles[ 'visually-hidden' ] },\n\t\t\t\trestProps\n\t\t\t),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-components {\n\t.style-module__visually-hidden__83ueL {\n\t\tborder: 0;\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t\tposition: absolute;\n\t\twidth: 1px;\n\t\tword-wrap: normal;\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"visually-hidden\": \"style-module__visually-hidden__83ueL\"\n};"],
+  "mappings": ";AAAA,SAAS,YAAY,iBAAiB;AACtC,SAAS,kBAAkB;;;ACD3B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,mBAAmB;AACrB;;;ADbO,IAAM,iBAAiB;AAAA,EAC7B,SAASA,gBAAgB,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAM;AACxD,UAAM,UAAU,UAAW;AAAA,MAC1B;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACN,EAAE,WAAW,cAAQ,iBAAkB,EAAE;AAAA,QACzC;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO;AAAA,EACR;AACD;",
+  "names": ["VisuallyHidden"]
+}

package/build-types/badge/badge.d.ts

@@ -0,0 +1,7 @@
+import { type BadgeProps } from './types';
+/**
+ * A badge component for displaying labels with semantic intent.
+ * Built on the Box primitive for consistent theming and accessibility.
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=badge.d.ts.map

package/build-types/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAwD1C;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAwBf,CAAC"}

package/build-types/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './badge';
+//# sourceMappingURL=index.d.ts.map

package/build-types/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/build-types/badge/stories/index.story.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from '../index';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const High: Story;
+export declare const Medium: Story;
+export declare const Low: Story;
+export declare const Stable: Story;
+export declare const Informational: Story;
+export declare const Draft: Story;
+export declare const None: Story;
+export declare const AllIntents: Story;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/badge/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/badge/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAG7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAMjB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA6CxB,CAAC"}

package/build-types/badge/types.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentProps } from '../utils/types';
+export interface BadgeProps extends ComponentProps<'span'> {
+    /**
+     * The text to display in the badge.
+     */
+    children: string;
+    /**
+     * The semantic intent of the badge, communicating its meaning through color.
+     *
+     * @default "none"
+     */
+    intent?: 'high' | 'medium' | 'low' | 'stable' | 'informational' | 'draft' | 'none';
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/badge/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,MAAM,CAAE;IAC3D;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EACJ,MAAM,GACN,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,eAAe,GACf,OAAO,GACP,MAAM,CAAC;CACV"}

package/build-types/box/box.d.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { type BoxProps } from './types';
 /**
  * A low-level visual primitive that provides an interface for applying design

package/build-types/box/box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../src/box/box.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAoExC;;;GAGG;AACH,eAAO,MAAM,GAAG,qGAiDb,CAAC"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../src/box/box.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AA4DxC;;;GAGG;AACH,eAAO,MAAM,GAAG,qGAmDb,CAAC"}

package/build-types/box/stories/index.story.d.ts

@@ -1,14 +1,4 @@
-/**
- * External dependencies
- */
-import { type Meta, type StoryObj } from '@storybook/react';
-/**
- * WordPress dependencies
- */
-import '@wordpress/theme/design-tokens.css';
-/**
- * Internal dependencies
- */
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Box } from '../box';
 declare const meta: Meta<typeof Box>;
 export default meta;

package/build-types/box/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/box/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5D;;GAEG;AACH,OAAO,oCAAoC,CAAC;AAE5C;;GAEG;AACH,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,GAAG,CAI3B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,GAAG,CAAE,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAUhC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/box/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,GAAG,CAG3B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,GAAG,CAAE,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAUhC,CAAC"}

package/build-types/box/types.d.ts

@@ -1,12 +1,5 @@
-/**
- * Internal dependencies
- */
+import { type PaddingSize, type BorderRadiusSize, type BorderWidthSize, type Target, type SurfaceBackgroundColor, type ContentForegroundColor, type SurfaceStrokeColor } from '@wordpress/theme';
 import { type ComponentProps } from '../utils/types';
-type SizeToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
-type Size = number | SizeToken;
-type BackgroundColor = 'neutral' | 'neutral-strong' | 'neutral-weak' | 'brand' | 'success' | 'success-weak' | 'info' | 'info-weak' | 'warning' | 'warning-weak' | 'caution' | 'caution-weak' | 'error' | 'error-weak';
-type ForegroundColor = 'neutral' | 'neutral-weak' | 'success' | 'success-weak' | 'info' | 'info-weak' | 'warning' | 'warning-weak' | 'caution' | 'caution-weak' | 'error' | 'error-weak';
-type StrokeColor = 'brand' | 'brand-strong' | 'error' | 'error-strong' | 'info' | 'info-strong' | 'neutral' | 'neutral-strong' | 'neutral-weak' | 'success' | 'success-strong' | 'warning' | 'warning-strong';
 type DimensionVariant<T> = {
     block?: T;
     blockStart?: T;
@@ -19,31 +12,31 @@ export interface BoxProps extends ComponentProps<'div'> {
     /**
      * The target rendering element design token grouping to use for the box.
      */
-    target?: string;
+    target?: Target;
     /**
      * The surface background design token for box background color.
      */
-    backgroundColor?: BackgroundColor;
+    backgroundColor?: SurfaceBackgroundColor;
     /**
      * The surface foreground design token for box text color.
      */
-    color?: ForegroundColor;
+    color?: ContentForegroundColor;
     /**
      * The surface spacing design token or base unit multiplier for box padding.
      */
-    padding?: Size | DimensionVariant<Size>;
+    padding?: PaddingSize | DimensionVariant<PaddingSize>;
     /**
      * The surface border radius design token.
      */
-    borderRadius?: Exclude<SizeToken, '2xs'>;
+    borderRadius?: BorderRadiusSize;
     /**
      * The surface border width design token.
      */
-    borderWidth?: Exclude<SizeToken, '2xs'>;
+    borderWidth?: BorderWidthSize;
     /**
      * The surface border stroke color design token.
      */
-    borderColor?: StrokeColor;
+    borderColor?: SurfaceStrokeColor;
     /**
      * The content to be rendered inside the component.
      */

package/build-types/box/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/box/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,KAAK,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,KAAK,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/B,KAAK,eAAe,GACjB,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB,KAAK,eAAe,GACjB,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB,KAAK,WAAW,GACb,OAAO,GACP,cAAc,GACd,OAAO,GACP,cAAc,GACd,MAAM,GACN,aAAa,GACb,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,SAAS,GACT,gBAAgB,GAChB,SAAS,GACT,gBAAgB,CAAC;AAEpB,KAAK,gBAAgB,CAAE,CAAC,IAAK;IAC5B,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB,SAAS,CAAC,EAAE,CAAC,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAE,KAAK,CAAE;IACxD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,gBAAgB,CAAE,IAAI,CAAE,CAAC;IAE1C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAE,SAAS,EAAE,KAAK,CAAE,CAAC;IAE3C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAE,SAAS,EAAE,KAAK,CAAE,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/box/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,MAAM,EACX,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,KAAK,gBAAgB,CAAE,CAAC,IAAK;IAC5B,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB,SAAS,CAAC,EAAE,CAAC,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAE,KAAK,CAAE;IACxD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,eAAe,CAAC,EAAE,sBAAsB,CAAC;IAEzC;;OAEG;IACH,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,gBAAgB,CAAE,WAAW,CAAE,CAAC;IAExD;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAEhC;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/build-types/button/button.d.ts

@@ -0,0 +1,3 @@
+import { type ButtonProps } from './types';
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=button.d.ts.map

package/build-types/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAK3C,eAAO,MAAM,MAAM,2GA8ClB,CAAC"}

package/build-types/button/icon.d.ts

@@ -0,0 +1,10 @@
+import { type IconProps } from '../icon/types';
+interface ButtonIconProps extends IconProps {
+    /**
+     * The icon to display, from the `@wordpress/icons` package.
+     */
+    icon: IconProps['icon'];
+}
+export declare const ButtonIcon: import("react").ForwardRefExoticComponent<Omit<ButtonIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export {};
+//# sourceMappingURL=icon.d.ts.map

package/build-types/button/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/button/icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,UAAU,eAAgB,SAAQ,SAAS;IAC1C;;OAEG;IACH,IAAI,EAAE,SAAS,CAAE,MAAM,CAAE,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,wHAYtB,CAAC"}