@wordpress/ui 0.3.1-next.8b30e05b0.0 → 0.4.0

package/build-module/box/box.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/box/box.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { type BoxProps } from './types';\nimport { renderElement } from '../utils/element';\n\n/**\n * Default render function that renders a div element with the given props.\n *\n * @param props The props to apply to the HTML element.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'div' > ) => (\n\t<div { ...props } />\n);\n\n/**\n * Capitalizes the first character of a string.\n *\n * @param str The string to capitalize.\n * @return The capitalized string.\n */\nconst capitalize = ( str: string ): string =>\n\tstr.charAt( 0 ).toUpperCase() + str.slice( 1 );\n\n/**\n * Converts a size value to a CSS design token property reference (with\n * fallback) or a calculated value based on the base unit.\n *\n * @param property The CSS property name.\n * @param target   The design system token target.\n * @param value    The size value, either a number (multiplier of base unit) or a string (token name).\n * @return A CSS value string with variable references.\n */\nconst getSpacingValue = (\n\tproperty: string,\n\ttarget: string,\n\tvalue: number | string\n): string =>\n\ttypeof value === 'number'\n\t\t? `calc(var(--wpds-dimension-base) * ${ value })`\n\t\t: `var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;\n\n/**\n * Generates CSS styles for properties with optionally directional values,\n * normalizing single values and objects with directional keys for logical\n * properties.\n *\n * @param property The CSS property name from BoxProps.\n * @param target   The design system token target.\n * @param value    The property value (single or object with directional keys).\n * @return A CSSProperties object with the computed styles.\n */\nconst getDimensionVariantStyles = < T extends keyof BoxProps >(\n\tproperty: T,\n\ttarget: string,\n\tvalue: NonNullable< BoxProps[ T ] >\n): React.CSSProperties =>\n\ttypeof value !== 'object'\n\t\t? { [ property ]: getSpacingValue( property, target, value ) }\n\t\t: Object.keys( value ).reduce(\n\t\t\t\t( result, key ) => ( {\n\t\t\t\t\t...result,\n\t\t\t\t\t[ property + capitalize( key ) ]: getSpacingValue(\n\t\t\t\t\t\tproperty,\n\t\t\t\t\t\ttarget,\n\t\t\t\t\t\tvalue[ key ]\n\t\t\t\t\t),\n\t\t\t\t} ),\n\t\t\t\t{} as Record< string, string >\n\t\t  );\n\n/**\n * A low-level visual primitive that provides an interface for applying design\n * token-based customization for background, text, padding, and more.\n */\nexport const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(\n\t{\n\t\ttarget = 'surface',\n\t\tbackgroundColor,\n\t\tcolor,\n\t\tpadding,\n\t\tborderRadius,\n\t\tborderWidth,\n\t\tborderColor,\n\t\trender = DEFAULT_RENDER,\n\t\t...props\n\t},\n\tref\n) {\n\tconst style: React.CSSProperties = { ...props.style };\n\n\tif ( backgroundColor ) {\n\t\tstyle.backgroundColor = `var(--wpds-color-bg-${ target }-${ backgroundColor }, var(--wpds-color-bg-surface-${ backgroundColor }))`;\n\t}\n\n\tif ( color ) {\n\t\tstyle.color = `var(--wpds-color-fg-${ target }-${ color }, var(--wpds-color-fg-content-${ color }))`;\n\t}\n\n\tif ( padding ) {\n\t\tObject.assign(\n\t\t\tstyle,\n\t\t\tgetDimensionVariantStyles( 'padding', target, padding )\n\t\t);\n\t}\n\n\tif ( borderRadius ) {\n\t\tstyle.borderRadius = `var(--wpds-border-radius-${ target }-${ borderRadius }, var(--wpds-border-radius-surface-${ borderRadius }))`;\n\t}\n\n\tif ( borderWidth ) {\n\t\tstyle.borderWidth = `var(--wpds-border-width-${ target }-${ borderWidth }, var(--wpds-border-width-surface-${ borderWidth }))`;\n\t\tstyle.borderStyle = 'solid';\n\t}\n\n\tif ( borderColor ) {\n\t\tstyle.borderColor = `var(--wpds-color-stroke-${ target }-${ borderColor }, var(--wpds-color-stroke-surface-${ borderColor }))`;\n\t}\n\n\treturn renderElement< 'div' >( {\n\t\trender,\n\t\tref,\n\t\tprops: { ...props, style },\n\t} );\n} );\n"],
+  "mappings": ";AAGA,SAAS,kBAAkB;AAM3B,SAAS,qBAAqB;AAQ7B;AADD,IAAM,iBAAiB,CAAE,UACxB,oBAAC,SAAM,GAAG,OAAQ;AASnB,IAAM,aAAa,CAAE,QACpB,IAAI,OAAQ,CAAE,EAAE,YAAY,IAAI,IAAI,MAAO,CAAE;AAW9C,IAAM,kBAAkB,CACvB,UACA,QACA,UAEA,OAAO,UAAU,WACd,qCAAsC,KAAM,MAC5C,wBAAyB,QAAS,IAAK,MAAO,IAAK,KAAM,0BAA2B,QAAS,YAAa,KAAM;AAYpH,IAAM,4BAA4B,CACjC,UACA,QACA,UAEA,OAAO,UAAU,WACd,EAAE,CAAE,QAAS,GAAG,gBAAiB,UAAU,QAAQ,KAAM,EAAE,IAC3D,OAAO,KAAM,KAAM,EAAE;AAAA,EACrB,CAAE,QAAQ,SAAW;AAAA,IACpB,GAAG;AAAA,IACH,CAAE,WAAW,WAAY,GAAI,CAAE,GAAG;AAAA,MACjC;AAAA,MACA;AAAA,MACA,MAAO,GAAI;AAAA,IACZ;AAAA,EACD;AAAA,EACA,CAAC;AACD;AAMG,IAAM,MAAM,WAAwC,SAASA,KACnE;AAAA,EACC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GACA,KACC;AACD,QAAM,QAA6B,EAAE,GAAG,MAAM,MAAM;AAEpD,MAAK,iBAAkB;AACtB,UAAM,kBAAkB,uBAAwB,MAAO,IAAK,eAAgB,iCAAkC,eAAgB;AAAA,EAC/H;AAEA,MAAK,OAAQ;AACZ,UAAM,QAAQ,uBAAwB,MAAO,IAAK,KAAM,iCAAkC,KAAM;AAAA,EACjG;AAEA,MAAK,SAAU;AACd,WAAO;AAAA,MACN;AAAA,MACA,0BAA2B,WAAW,QAAQ,OAAQ;AAAA,IACvD;AAAA,EACD;AAEA,MAAK,cAAe;AACnB,UAAM,eAAe,4BAA6B,MAAO,IAAK,YAAa,sCAAuC,YAAa;AAAA,EAChI;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAC1H,UAAM,cAAc;AAAA,EACrB;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAAA,EAC3H;AAEA,SAAO,cAAwB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,EAC1B,CAAE;AACH,CAAE;",
+  "names": ["Box"]
+}

package/build-module/box/index.js

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

package/build-module/box/index.js.map

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

package/build-module/box/types.js

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

package/build-module/box/types.js.map

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

package/build-module/index.js

@@ -0,0 +1,3 @@
+// packages/ui/src/index.ts
+export * from "./box";
+//# sourceMappingURL=index.js.map

package/build-module/index.js.map

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

package/build-module/lock-unlock.js

@@ -0,0 +1,11 @@
+// packages/ui/src/lock-unlock.ts
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from "@wordpress/private-apis";
+var { lock, unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+  "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
+  "@wordpress/dataviews"
+);
+export {
+  lock,
+  unlock
+};
+//# sourceMappingURL=lock-unlock.js.map

package/build-module/lock-unlock.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/lock-unlock.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/dataviews'\n\t);\n"],
+  "mappings": ";AAGA,SAAS,wDAAwD;AAE1D,IAAM,EAAE,MAAM,OAAO,IAC3B;AAAA,EACC;AAAA,EACA;AACD;",
+  "names": []
+}

package/build-module/stack/index.js

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

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

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

package/build-module/stack/stack.js

@@ -0,0 +1,40 @@
+// packages/ui/src/stack/stack.tsx
+import clsx from "clsx";
+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;
+
+@layer wp-ui-components {
+	.style-module__stack__Gc4EG {
+		display: flex;
+	}
+}
+`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+var style_default = {
+  "stack": "style-module__stack__Gc4EG"
+};
+
+// 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
+  };
+  return renderElement({
+    render,
+    ref,
+    props: { ...props, style, className }
+  });
+});
+export {
+  Stack
+};
+//# sourceMappingURL=stack.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stack/stack.tsx", "../../src/stack/style.module.css"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { renderElement } from '../utils/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 className = clsx( props.className, styles.stack );\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\t...props.style,\n\t};\n\n\treturn renderElement< 'div' >( {\n\t\trender,\n\t\tref,\n\t\tprops: { ...props, style, className },\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__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": ";AAGA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAK3B,SAAS,qBAAqB;;;ACb9B,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;;;ADOO,IAAM,QAAQ,WAA0C,SAASA,OACvE,EAAE,WAAW,KAAK,OAAO,SAAS,MAAM,QAAQ,GAAG,MAAM,GACzD,KACC;AACD,QAAM,YAAY,KAAM,MAAM,WAAW,cAAO,KAAM;AAEtD,QAAM,QAA6B;AAAA,IAClC,KAAK,OAAO,4BAA6B,GAAI;AAAA,IAC7C,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,GAAG,MAAM;AAAA,EACV;AAEA,SAAO,cAAwB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,OAAO,EAAE,GAAG,OAAO,OAAO,UAAU;AAAA,EACrC,CAAE;AACH,CAAE;",
+  "names": ["Stack"]
+}

package/build-module/stack/types.js

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

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

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

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

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

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

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

package/build-module/types/react.d.js

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

package/build-module/types/react.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/types/react.d.ts"],
+  "sourcesContent": ["import 'react';\n\ndeclare module 'react' {\n\tinterface CSSProperties {\n\t\t[ key: `--${ string }` ]: string | number | undefined;\n\t}\n}\n"],
+  "mappings": ";AAAA,OAAO;",
+  "names": []
+}

package/build-module/utils/element.js

@@ -0,0 +1,20 @@
+// packages/ui/src/utils/element.ts
+import { cloneElement, createElement } from "@wordpress/element";
+var renderElement = ({
+  render,
+  defaultTagName = "div",
+  props,
+  ref
+}) => {
+  const propsWithRef = ref ? { ...props, ref } : props;
+  if (render === void 0) {
+    return createElement(defaultTagName, propsWithRef);
+  } else if (typeof render === "function") {
+    return render(propsWithRef);
+  }
+  return cloneElement(render, propsWithRef);
+};
+export {
+  renderElement
+};
+//# sourceMappingURL=element.js.map

package/build-module/utils/element.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/element.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { cloneElement, createElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ComponentProps } from './types';\n\ntype RenderProp< E extends React.ElementType > = NonNullable<\n\tComponentProps< E >[ 'render' ]\n>;\n\n/**\n * Renders an element from a render prop (a component or an element), with\n * merged props and ref.\n *\n * @param options                Render options.\n * @param options.render         The render prop (component or element).\n * @param options.defaultTagName The default tag name to use if no render prop\n *                               is provided.\n * @param options.props          Props to pass to or merge with the element.\n * @param options.ref            Optional ref to attach to the element.\n * @return The rendered element.\n */\nexport const renderElement = < E extends React.ElementType >( {\n\trender,\n\tdefaultTagName = 'div',\n\tprops,\n\tref,\n}: {\n\trender?: RenderProp< E >;\n\tdefaultTagName?: keyof JSX.IntrinsicElements;\n\tprops: Omit< ComponentProps< E >, 'render' >;\n\tref?: React.Ref<\n\t\tE extends keyof HTMLElementTagNameMap\n\t\t\t? HTMLElementTagNameMap[ E ]\n\t\t\t: Element\n\t>;\n} ): React.ReactElement => {\n\tconst propsWithRef = ref ? { ...props, ref } : props;\n\n\tif ( render === undefined ) {\n\t\treturn createElement( defaultTagName, propsWithRef );\n\t} else if ( typeof render === 'function' ) {\n\t\treturn render( propsWithRef );\n\t}\n\n\treturn cloneElement( render, propsWithRef );\n};\n"],
+  "mappings": ";AAGA,SAAS,cAAc,qBAAqB;AAuBrC,IAAM,gBAAgB,CAAiC;AAAA,EAC7D;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AACD,MAS2B;AAC1B,QAAM,eAAe,MAAM,EAAE,GAAG,OAAO,IAAI,IAAI;AAE/C,MAAK,WAAW,QAAY;AAC3B,WAAO,cAAe,gBAAgB,YAAa;AAAA,EACpD,WAAY,OAAO,WAAW,YAAa;AAC1C,WAAO,OAAQ,YAAa;AAAA,EAC7B;AAEA,SAAO,aAAc,QAAQ,YAAa;AAC3C;",
+  "names": []
+}

package/build-module/utils/types.js

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

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

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

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,qGA6Bb,CAAC"}
+{"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"}

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,KAarB,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;;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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=box.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box.test.d.ts","sourceRoot":"","sources":["../../../src/box/test/box.test.tsx"],"names":[],"mappings":""}

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

@@ -6,6 +6,7 @@ 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;
@@ -31,6 +32,18 @@ export interface BoxProps extends ComponentProps<'div'> {
      * The surface spacing design token or base unit multiplier for box padding.
      */
     padding?: Size | DimensionVariant<Size>;
+    /**
+     * The surface border radius design token.
+     */
+    borderRadius?: Exclude<SizeToken, '2xs'>;
+    /**
+     * The surface border width design token.
+     */
+    borderWidth?: Exclude<SizeToken, '2xs'>;
+    /**
+     * The surface border stroke color design token.
+     */
+    borderColor?: StrokeColor;
     /**
      * 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,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,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
+{"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"}

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

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+export { Stack } from './stack';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,7 @@
+import { type StackProps } from './types';
+/**
+ * A flexible layout component using CSS Flexbox for consistent spacing and alignment.
+ * Built on design tokens for predictable spacing values.
+ */
+export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=stack.d.ts.map

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

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

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

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import '@wordpress/theme/design-tokens.css';
+/**
+ * Internal dependencies
+ */
+import { Stack } from '../index';
+declare const meta: Meta<typeof Stack>;
+export default meta;
+type Story = StoryObj<typeof Stack>;
+export declare const Default: Story;
+export declare const Nested: Story;
+//# sourceMappingURL=index.story.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,oCAAoC,CAAC;AAE5C;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAI7B,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KA4DrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC"}

package/build-types/stack/test/stack.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stack.test.d.ts.map

package/build-types/stack/test/stack.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.test.d.ts","sourceRoot":"","sources":["../../../src/stack/test/stack.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import { type ComponentProps } from '../utils/types';
+export type SizeToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface StackProps extends ComponentProps<'div'> {
+    /**
+     * The direction of the stack.
+     */
+    direction?: Exclude<React.CSSProperties['flexDirection'], 'row-reverse' | 'column-reverse'>;
+    /**
+     * The amount of space between each child element using design system tokens.
+     *
+     * @default undefined
+     */
+    gap?: SizeToken;
+    /**
+     * The alignment of the stack items along the cross axis.
+     *
+     * @default 'initial'
+     */
+    align?: React.CSSProperties['alignItems'];
+    /**
+     * The alignment of the stack items along the main axis.
+     *
+     * @default 'initial'
+     */
+    justify?: React.CSSProperties['justifyContent'];
+    /**
+     * Whether the stack items should wrap to the next line.
+     */
+    wrap?: Exclude<React.CSSProperties['flexWrap'], 'wrap-reverse'>;
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/stack/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjE,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC1D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAClB,KAAK,CAAC,aAAa,CAAE,eAAe,CAAE,EACtC,aAAa,GAAG,gBAAgB,CAChC,CAAC;IAEF;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,YAAY,CAAE,CAAC;IAE5C;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,gBAAgB,CAAE,CAAC;IAElD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAE,KAAK,CAAC,aAAa,CAAE,UAAU,CAAE,EAAE,cAAc,CAAE,CAAC;IAEpE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/build-types/utils/element.d.ts

@@ -7,11 +7,19 @@ type RenderProp<E extends React.ElementType> = NonNullable<ComponentProps<E>['re
  * Renders an element from a render prop (a component or an element), with
  * merged props and ref.
  *
- * @param render The render prop (component or element).
- * @param props  Props to pass to or merge with the element.
- * @param ref    Optional ref to attach to the element.
+ * @param options                Render options.
+ * @param options.render         The render prop (component or element).
+ * @param options.defaultTagName The default tag name to use if no render prop
+ *                               is provided.
+ * @param options.props          Props to pass to or merge with the element.
+ * @param options.ref            Optional ref to attach to the element.
  * @return The rendered element.
  */
-export declare const renderElement: <E extends React.ElementType>(render: RenderProp<E>, props: Omit<ComponentProps<E>, "render">, ref?: React.Ref<E extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[E] : Element>) => React.ReactElement;
+export declare const renderElement: <E extends React.ElementType>({ render, defaultTagName, props, ref, }: {
+    render?: RenderProp<E>;
+    defaultTagName?: keyof JSX.IntrinsicElements;
+    props: Omit<ComponentProps<E>, "render">;
+    ref?: React.Ref<E extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[E] : Element>;
+}) => React.ReactElement;
 export {};
 //# sourceMappingURL=element.d.ts.map

package/build-types/utils/element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../src/utils/element.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,UAAU,CAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAK,WAAW,CAC3D,cAAc,CAAE,CAAC,CAAE,CAAE,QAAQ,CAAE,CAC/B,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,GAAK,CAAC,SAAS,KAAK,CAAC,WAAW,EACzD,QAAQ,UAAU,CAAE,CAAC,CAAE,EACvB,OAAO,IAAI,CAAE,cAAc,CAAE,CAAC,CAAE,EAAE,QAAQ,CAAE,EAC5C,MAAM,KAAK,CAAC,GAAG,CACd,CAAC,SAAS,MAAM,qBAAqB,GAClC,qBAAqB,CAAE,CAAC,CAAE,GAC1B,OAAO,CACV,KACC,KAAK,CAAC,YAMR,CAAC"}
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../src/utils/element.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,UAAU,CAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAK,WAAW,CAC3D,cAAc,CAAE,CAAC,CAAE,CAAE,QAAQ,CAAE,CAC/B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAK,CAAC,SAAS,KAAK,CAAC,WAAW,EAAI,yCAK3D;IACF,MAAM,CAAC,EAAE,UAAU,CAAE,CAAC,CAAE,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IAC7C,KAAK,EAAE,IAAI,CAAE,cAAc,CAAE,CAAC,CAAE,EAAE,QAAQ,CAAE,CAAC;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CACd,CAAC,SAAS,MAAM,qBAAqB,GAClC,qBAAqB,CAAE,CAAC,CAAE,GAC1B,OAAO,CACV,CAAC;CACF,KAAI,KAAK,CAAC,YAUV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.3.1-next.8b30e05b0.0",
+	"version": "0.4.0",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,6 +22,8 @@
 		"node": ">=20.10.0",
 		"npm": ">=10.2.3"
 	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
@@ -31,13 +33,15 @@
 		"./package.json": "./package.json"
 	},
 	"wpScript": false,
+	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/element": "^6.36.1-next.8b30e05b0.0",
-		"@wordpress/private-apis": "^1.36.1-next.8b30e05b0.0"
+		"@wordpress/element": "^6.37.0",
+		"@wordpress/private-apis": "^1.37.0",
+		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
-		"@wordpress/theme": "^0.3.1-next.8b30e05b0.0"
+		"@wordpress/theme": "^0.4.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -46,5 +50,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2466f6bc223f8be98c55e1ac7270e8c3e413eaaf"
+	"gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
 }

package/src/box/box.tsx

@@ -84,12 +84,15 @@ export const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(
 		backgroundColor,
 		color,
 		padding,
+		borderRadius,
+		borderWidth,
+		borderColor,
 		render = DEFAULT_RENDER,
 		...props
 	},
 	ref
 ) {
-	const style: React.CSSProperties = {};
+	const style: React.CSSProperties = { ...props.style };
 
 	if ( backgroundColor ) {
 		style.backgroundColor = `var(--wpds-color-bg-${ target }-${ backgroundColor }, var(--wpds-color-bg-surface-${ backgroundColor }))`;
@@ -106,5 +109,22 @@ export const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(
 		);
 	}
 
-	return renderElement< 'div' >( render, { style, ...props }, ref );
+	if ( borderRadius ) {
+		style.borderRadius = `var(--wpds-border-radius-${ target }-${ borderRadius }, var(--wpds-border-radius-surface-${ borderRadius }))`;
+	}
+
+	if ( borderWidth ) {
+		style.borderWidth = `var(--wpds-border-width-${ target }-${ borderWidth }, var(--wpds-border-width-surface-${ borderWidth }))`;
+		style.borderStyle = 'solid';
+	}
+
+	if ( borderColor ) {
+		style.borderColor = `var(--wpds-color-stroke-${ target }-${ borderColor }, var(--wpds-color-stroke-surface-${ borderColor }))`;
+	}
+
+	return renderElement< 'div' >( {
+		render,
+		ref,
+		props: { ...props, style },
+	} );
 } );

package/src/box/stories/index.story.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import '@wordpress/theme/design-tokens.css'; // eslint-disable-line no-restricted-syntax
+import '@wordpress/theme/design-tokens.css';
 
 /**
  * Internal dependencies
@@ -28,6 +28,9 @@ export const Default: Story = {
 		backgroundColor: 'info',
 		color: 'info',
 		padding: 'sm',
+		borderColor: 'brand',
+		borderRadius: 'md',
+		borderWidth: 'sm',
 	},
 	argTypes: {
 		padding: {

package/src/box/test/box.test.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Box } from '../box';
+
+describe( 'Box', () => {
+	it( 'forwards ref', () => {
+		const ref = createRef< HTMLDivElement >();
+
+		render( <Box ref={ ref }>Content</Box> );
+
+		expect( ref.current ).toBeInstanceOf( HTMLDivElement );
+	} );
+
+	it( 'merges props', () => {
+		render(
+			<Box backgroundColor="brand" style={ { width: '10px' } }>
+				Content
+			</Box>
+		);
+
+		const box = screen.getByText( 'Content' );
+
+		expect( box ).toHaveStyle( {
+			'background-color':
+				'var(--wpds-color-bg-surface-brand, var(--wpds-color-bg-surface-brand))',
+			width: '10px',
+		} );
+	} );
+} );

package/src/box/types.ts

@@ -37,6 +37,21 @@ type ForegroundColor =
 	| '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;
@@ -67,6 +82,21 @@ export interface BoxProps extends ComponentProps< 'div' > {
 	 */
 	padding?: Size | DimensionVariant< Size >;
 
+	/**
+	 * The surface border radius design token.
+	 */
+	borderRadius?: Exclude< SizeToken, '2xs' >;
+
+	/**
+	 * The surface border width design token.
+	 */
+	borderWidth?: Exclude< SizeToken, '2xs' >;
+
+	/**
+	 * The surface border stroke color design token.
+	 */
+	borderColor?: StrokeColor;
+
 	/**
 	 * The content to be rendered inside the component.
 	 */

package/src/stack/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Stack } from './stack';