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

package/CONTRIBUTING.md

@@ -25,3 +25,28 @@ src/
 
 -   The folder name should match the primary component name
 -   The `index.ts` file should contain only the public API exports for the component(s)
+
+## CSS Architecture
+
+### CSS Layers
+
+We use [CSS cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) to ensure an expected order of precedence in style resolution. All component stylesheets must follow this layering approach to maintain consistency and prevent specificity conflicts.
+
+Every component stylesheet must include the layer definition at the top and wrap all styles within the appropriate layer:
+
+```css
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.stack {
+		display: flex;
+	}
+}
+```
+
+#### CSS Layer Hierarchy
+
+-   **`wp-ui-utilities`** - Shared utility styles (box-sizing, focus rings, resets) that apply before component styles
+-   **`wp-ui-components`** - Default styles for design system components (`.stack`, etc.)
+-   **`wp-ui-compositions`** - Internal compositions that extend base components
+-   **`wp-ui-overrides`** - Last-resort styles to override default rules

package/README.md

@@ -25,7 +25,7 @@ import { Box } from '@wordpress/ui';
 
 function MyComponent() {
 	return (
-		<Box background="neutral" padding="small">
+		<Box background="neutral" padding="sm">
 			Hello World
 		</Box>
 	);

package/build/box/box.js

@@ -0,0 +1,87 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/box/box.tsx
+var box_exports = {};
+__export(box_exports, {
+  Box: () => Box
+});
+module.exports = __toCommonJS(box_exports);
+var import_element = require("@wordpress/element");
+var import_element2 = require("../utils/element");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_RENDER = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props });
+var capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+var getSpacingValue = (property, target, value) => typeof value === "number" ? `calc(var(--wpds-dimension-base) * ${value})` : `var(--wpds-dimension-${property}-${target}-${value}, var(--wpds-dimension-${property}-surface-${value}))`;
+var getDimensionVariantStyles = (property, target, value) => typeof value !== "object" ? { [property]: getSpacingValue(property, target, value) } : Object.keys(value).reduce(
+  (result, key) => ({
+    ...result,
+    [property + capitalize(key)]: getSpacingValue(
+      property,
+      target,
+      value[key]
+    )
+  }),
+  {}
+);
+var Box = (0, import_element.forwardRef)(function Box2({
+  target = "surface",
+  backgroundColor,
+  color,
+  padding,
+  borderRadius,
+  borderWidth,
+  borderColor,
+  render = DEFAULT_RENDER,
+  ...props
+}, ref) {
+  const style = { ...props.style };
+  if (backgroundColor) {
+    style.backgroundColor = `var(--wpds-color-bg-${target}-${backgroundColor}, var(--wpds-color-bg-surface-${backgroundColor}))`;
+  }
+  if (color) {
+    style.color = `var(--wpds-color-fg-${target}-${color}, var(--wpds-color-fg-content-${color}))`;
+  }
+  if (padding) {
+    Object.assign(
+      style,
+      getDimensionVariantStyles("padding", target, padding)
+    );
+  }
+  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 (0, import_element2.renderElement)({
+    render,
+    ref,
+    props: { ...props, style }
+  });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box
+});
+//# sourceMappingURL=box.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA2B;AAM3B,IAAAA,kBAA8B;AAQ7B;AADD,IAAM,iBAAiB,CAAE,UACxB,4CAAC,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,UAAM,2BAAwC,SAASC,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,aAAO,+BAAwB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,EAC1B,CAAE;AACH,CAAE;",
+  "names": ["import_element", "Box"]
+}

package/build/box/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/box/index.ts
+var box_exports = {};
+__export(box_exports, {
+  Box: () => import_box.Box
+});
+module.exports = __toCommonJS(box_exports);
+var import_box = require("./box");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box
+});
+//# sourceMappingURL=index.js.map

package/build/box/index.js.map

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

package/build/box/types.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/box/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/box/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/box/types.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { type ComponentProps } from '../utils/types';\n\ntype SizeToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg';\n\ntype Size = number | SizeToken;\n\ntype BackgroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\ntype ForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\ntype StrokeColor =\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'error'\n\t| 'error-strong'\n\t| 'info'\n\t| 'info-strong'\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-strong'\n\t| 'warning'\n\t| 'warning-strong';\n\ntype DimensionVariant< T > = {\n\tblock?: T;\n\tblockStart?: T;\n\tblockEnd?: T;\n\tinline?: T;\n\tinlineStart?: T;\n\tinlineEnd?: T;\n};\n\nexport interface BoxProps extends ComponentProps< 'div' > {\n\t/**\n\t * The target rendering element design token grouping to use for the box.\n\t */\n\ttarget?: string;\n\n\t/**\n\t * The surface background design token for box background color.\n\t */\n\tbackgroundColor?: BackgroundColor;\n\n\t/**\n\t * The surface foreground design token for box text color.\n\t */\n\tcolor?: ForegroundColor;\n\n\t/**\n\t * The surface spacing design token or base unit multiplier for box padding.\n\t */\n\tpadding?: Size | DimensionVariant< Size >;\n\n\t/**\n\t * The surface border radius design token.\n\t */\n\tborderRadius?: Exclude< SizeToken, '2xs' >;\n\n\t/**\n\t * The surface border width design token.\n\t */\n\tborderWidth?: Exclude< SizeToken, '2xs' >;\n\n\t/**\n\t * The surface border stroke color design token.\n\t */\n\tborderColor?: StrokeColor;\n\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: React.ReactNode;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/index.ts
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./box"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./box")
+});
+//# sourceMappingURL=index.js.map

package/build/index.js.map

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

package/build/lock-unlock.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/lock-unlock.ts
+var lock_unlock_exports = {};
+__export(lock_unlock_exports, {
+  lock: () => lock,
+  unlock: () => unlock
+});
+module.exports = __toCommonJS(lock_unlock_exports);
+var import_private_apis = require("@wordpress/private-apis");
+var { lock, unlock } = (0, import_private_apis.__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"
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  lock,
+  unlock
+});
+//# sourceMappingURL=lock-unlock.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAAiE;AAE1D,IAAM,EAAE,MAAM,OAAO,QAC3B;AAAA,EACC;AAAA,EACA;AACD;",
+  "names": []
+}

package/build/stack/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/stack/index.ts
+var stack_exports = {};
+__export(stack_exports, {
+  Stack: () => import_stack.Stack
+});
+module.exports = __toCommonJS(stack_exports);
+var import_stack = require("./stack");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Stack
+});
+//# sourceMappingURL=index.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAsB;",
+  "names": []
+}

package/build/stack/stack.js

@@ -0,0 +1,75 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/stack/stack.tsx
+var stack_exports = {};
+__export(stack_exports, {
+  Stack: () => Stack
+});
+module.exports = __toCommonJS(stack_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_element2 = require("../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 = (0, import_element.forwardRef)(function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
+  const className = (0, import_clsx.default)(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 (0, import_element2.renderElement)({
+    render,
+    ref,
+    props: { ...props, style, className }
+  });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Stack
+});
+//# sourceMappingURL=stack.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA2B;AAK3B,IAAAA,kBAA8B;;;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,YAAQ,2BAA0C,SAASC,OACvE,EAAE,WAAW,KAAK,OAAO,SAAS,MAAM,QAAQ,GAAG,MAAM,GACzD,KACC;AACD,QAAM,gBAAY,YAAAC,SAAM,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,aAAO,+BAAwB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,OAAO,EAAE,GAAG,OAAO,OAAO,UAAU;AAAA,EACrC,CAAE;AACH,CAAE;",
+  "names": ["import_element", "Stack", "clsx"]
+}

package/build/stack/types.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/stack/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/stack/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stack/types.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { type ComponentProps } from '../utils/types';\n\nexport type SizeToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface StackProps extends ComponentProps< 'div' > {\n\t/**\n\t * The direction of the stack.\n\t */\n\tdirection?: Exclude<\n\t\tReact.CSSProperties[ 'flexDirection' ],\n\t\t'row-reverse' | 'column-reverse'\n\t>;\n\n\t/**\n\t * The amount of space between each child element using design system tokens.\n\t *\n\t * @default undefined\n\t */\n\tgap?: SizeToken;\n\n\t/**\n\t * The alignment of the stack items along the cross axis.\n\t *\n\t * @default 'initial'\n\t */\n\talign?: React.CSSProperties[ 'alignItems' ];\n\n\t/**\n\t * The alignment of the stack items along the main axis.\n\t *\n\t * @default 'initial'\n\t */\n\tjustify?: React.CSSProperties[ 'justifyContent' ];\n\n\t/**\n\t * Whether the stack items should wrap to the next line.\n\t */\n\twrap?: Exclude< React.CSSProperties[ 'flexWrap' ], 'wrap-reverse' >;\n\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: React.ReactNode;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=css-modules.d.js.map

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

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

package/build/types/react.d.js

@@ -0,0 +1,5 @@
+"use strict";
+
+// packages/ui/src/types/react.d.ts
+var import_react = require("react");
+//# sourceMappingURL=react.d.js.map

package/build/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,mBAAO;",
+  "names": []
+}

package/build/utils/element.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/utils/element.ts
+var element_exports = {};
+__export(element_exports, {
+  renderElement: () => renderElement
+});
+module.exports = __toCommonJS(element_exports);
+var import_element = require("@wordpress/element");
+var renderElement = ({
+  render,
+  defaultTagName = "div",
+  props,
+  ref
+}) => {
+  const propsWithRef = ref ? { ...props, ref } : props;
+  if (render === void 0) {
+    return (0, import_element.createElement)(defaultTagName, propsWithRef);
+  } else if (typeof render === "function") {
+    return render(propsWithRef);
+  }
+  return (0, import_element.cloneElement)(render, propsWithRef);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  renderElement
+});
+//# sourceMappingURL=element.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA4C;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,eAAO,8BAAe,gBAAgB,YAAa;AAAA,EACpD,WAAY,OAAO,WAAW,YAAa;AAC1C,WAAO,OAAQ,YAAa;AAAA,EAC7B;AAEA,aAAO,6BAAc,QAAQ,YAAa;AAC3C;",
+  "names": []
+}

package/build/utils/types.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/utils/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/utils/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/types.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\ttype ElementType,\n\ttype ComponentPropsWithoutRef,\n\ttype HTMLAttributes,\n\ttype Ref,\n} from 'react';\n\ntype HTMLAttributesWithRef< T extends ElementType = any > =\n\tHTMLAttributes< T > & { ref?: Ref< T > | undefined };\n\ntype ComponentRenderFn< Props > = (\n\tprops: Props\n) => React.ReactElement< unknown >;\n\nexport type ComponentProps< E extends ElementType > = Omit<\n\tComponentPropsWithoutRef< E >,\n\t'className' | 'children' | 'render'\n> & {\n\t/**\n\t * CSS class name to apply to the component.\n\t */\n\tclassName?: string;\n\n\t/**\n\t * Replaces the component's default HTML element using a given React\n\t * element, or a function that returns a React element.\n\t */\n\trender?:\n\t\t| ComponentRenderFn< HTMLAttributesWithRef >\n\t\t| React.ReactElement< Record< string, unknown > >;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build-module/box/box.js

@@ -0,0 +1,62 @@
+// packages/ui/src/box/box.tsx
+import { forwardRef } from "@wordpress/element";
+import { renderElement } from "../utils/element";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_RENDER = (props) => /* @__PURE__ */ jsx("div", { ...props });
+var capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+var getSpacingValue = (property, target, value) => typeof value === "number" ? `calc(var(--wpds-dimension-base) * ${value})` : `var(--wpds-dimension-${property}-${target}-${value}, var(--wpds-dimension-${property}-surface-${value}))`;
+var getDimensionVariantStyles = (property, target, value) => typeof value !== "object" ? { [property]: getSpacingValue(property, target, value) } : Object.keys(value).reduce(
+  (result, key) => ({
+    ...result,
+    [property + capitalize(key)]: getSpacingValue(
+      property,
+      target,
+      value[key]
+    )
+  }),
+  {}
+);
+var Box = forwardRef(function Box2({
+  target = "surface",
+  backgroundColor,
+  color,
+  padding,
+  borderRadius,
+  borderWidth,
+  borderColor,
+  render = DEFAULT_RENDER,
+  ...props
+}, ref) {
+  const style = { ...props.style };
+  if (backgroundColor) {
+    style.backgroundColor = `var(--wpds-color-bg-${target}-${backgroundColor}, var(--wpds-color-bg-surface-${backgroundColor}))`;
+  }
+  if (color) {
+    style.color = `var(--wpds-color-fg-${target}-${color}, var(--wpds-color-fg-content-${color}))`;
+  }
+  if (padding) {
+    Object.assign(
+      style,
+      getDimensionVariantStyles("padding", target, padding)
+    );
+  }
+  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({
+    render,
+    ref,
+    props: { ...props, style }
+  });
+});
+export {
+  Box
+};
+//# sourceMappingURL=box.js.map