@wordpress/ui 0.3.1-next.6deb34194.0 → 1.0.1-next.738bb1424.0

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

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

package/build-module/stack/stack.js

@@ -1,7 +1,7 @@
 // packages/ui/src/stack/stack.tsx
 import clsx from "clsx";
 import { forwardRef } from "@wordpress/element";
-import { renderElement } from "../utils/element";
+import { renderElement } from "../utils/element.js";
 
 // packages/ui/src/stack/style.module.css
 var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
@@ -18,27 +18,10 @@ var style_default = {
 };
 
 // packages/ui/src/stack/stack.tsx
-var TOKEN_NAMES = /* @__PURE__ */ new Set([
-  "2xs",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl"
-]);
-function getNormalizedGap(gap) {
-  if (typeof gap === "number") {
-    return `calc( ${gap} * var( --wpds-dimension-base ) )`;
-  }
-  if (TOKEN_NAMES.has(gap)) {
-    return `var(--wpds-dimension-gap-${gap})`;
-  }
-  return String(gap);
-}
-var Stack = forwardRef(function Stack2({ direction, gap = 0, align, justify, wrap, render, ...props }, ref) {
+var Stack = forwardRef(function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
   const className = clsx(props.className, style_default.stack);
   const style = {
-    gap: getNormalizedGap(gap),
+    gap: gap && `var(--wpds-dimension-gap-${gap})`,
     alignItems: align,
     justifyContent: justify,
     flexDirection: direction,
@@ -52,7 +35,6 @@ var Stack = forwardRef(function Stack2({ direction, gap = 0, align, justify, wra
   });
 });
 export {
-  Stack,
-  getNormalizedGap
+  Stack
 };
 //# sourceMappingURL=stack.js.map

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

@@ -1,7 +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, type SizeToken } from './types';\nimport styles from './style.module.css';\n\n/**\n * Set of token names for gap spacing.\n */\nconst TOKEN_NAMES = new Set< SizeToken >( [\n\t'2xs',\n\t'xs',\n\t'sm',\n\t'md',\n\t'lg',\n\t'xl',\n] );\n\n/**\n * Normalizes the gap value. When given a positive number, it will be converted\n * to a CSS calculation. When given a string, it will be returned as is.\n *\n * @param gap The gap value to normalize.\n *\n * @return The normalized gap value.\n */\nexport function getNormalizedGap(\n\tgap: number | SizeToken | React.CSSProperties[ 'gap' ]\n): string {\n\tif ( typeof gap === 'number' ) {\n\t\treturn `calc( ${ gap } * var( --wpds-dimension-base ) )`;\n\t}\n\n\tif ( TOKEN_NAMES.has( gap as SizeToken ) ) {\n\t\treturn `var(--wpds-dimension-gap-${ gap })`;\n\t}\n\n\treturn String( gap );\n}\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 = 0, 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: getNormalizedGap( 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;;;ADMA,IAAM,cAAc,oBAAI,IAAkB;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,CAAE;AAUK,SAAS,iBACf,KACS;AACT,MAAK,OAAO,QAAQ,UAAW;AAC9B,WAAO,SAAU,GAAI;AAAA,EACtB;AAEA,MAAK,YAAY,IAAK,GAAiB,GAAI;AAC1C,WAAO,4BAA6B,GAAI;AAAA,EACzC;AAEA,SAAO,OAAQ,GAAI;AACpB;AAMO,IAAM,QAAQ,WAA0C,SAASA,OACvE,EAAE,WAAW,MAAM,GAAG,OAAO,SAAS,MAAM,QAAQ,GAAG,MAAM,GAC7D,KACC;AACD,QAAM,YAAY,KAAM,MAAM,WAAW,cAAO,KAAM;AAEtD,QAAM,QAA6B;AAAA,IAClC,KAAK,iBAAkB,GAAI;AAAA,IAC3B,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;",
+  "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-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":"AAUA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AA2D1C;;;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,22 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+import '@wordpress/theme/design-tokens.css';
+/**
+ * Internal dependencies
+ */
+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;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,oCAAoC,CAAC;AAE5C;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAI7B,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,KA8CxB,CAAC"}

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

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+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;;GAEG;AACH,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.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":"AAKA;;GAEG;AACH,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAkExC;;;GAGG;AACH,eAAO,MAAM,GAAG,qGAiDb,CAAC"}

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

@@ -1,14 +1,5 @@
-/**
- * External dependencies
- */
 import { type Meta, type StoryObj } from '@storybook/react';
-/**
- * WordPress dependencies
- */
 import '@wordpress/theme/design-tokens.css';
-/**
- * Internal dependencies
- */
 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,kBAAkB,CAAC;AAE5D,OAAO,oCAAoC,CAAC;AAC5C,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/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/index.d.ts

@@ -1,2 +1,4 @@
 export * from './box';
+export * from './badge';
+export * from './stack';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

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

@@ -1,13 +1,4 @@
-import { type StackProps, type SizeToken } from './types';
-/**
- * Normalizes the gap value. When given a positive number, it will be converted
- * to a CSS calculation. When given a string, it will be returned as is.
- *
- * @param gap The gap value to normalize.
- *
- * @return The normalized gap value.
- */
-export declare function getNormalizedGap(gap: number | SizeToken | React.CSSProperties['gap']): string;
+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.

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

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/stack/stack.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAe1D;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC/B,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,aAAa,CAAE,KAAK,CAAE,GACpD,MAAM,CAUR;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAoBf,CAAC"}
+{"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.map

@@ -1 +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,KAwErB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC"}
+{"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/types.d.ts

@@ -1,20 +1,16 @@
-/**
- * Internal dependencies
- */
+import { type GapSize } from '@wordpress/theme';
 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. As a number, it is a
-     * multiple of the design system grid spacing.
+     * The amount of space between each child element using design system tokens.
      *
-     * @default 'initial'
+     * @default undefined
      */
-    gap?: number | SizeToken | React.CSSProperties['gap'];
+    gap?: GapSize;
     /**
      * The alignment of the stack items along the cross axis.
      *

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

@@ -1 +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;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,aAAa,CAAE,KAAK,CAAE,CAAC;IAExD;;;;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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/stack/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,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,OAAO,CAAC;IAEd;;;;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/test/index.test.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.3.1-next.6deb34194.0",
+	"version": "1.0.1-next.738bb1424.0",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,13 +22,21 @@
 		"node": ">=20.10.0",
 		"npm": ">=10.2.3"
 	},
-	"main": "build/index.js",
+	"files": [
+		"src",
+		"build",
+		"build-module",
+		"build-types",
+		"*.md"
+	],
+	"type": "module",
+	"main": "build/index.cjs",
 	"module": "build-module/index.js",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
-			"default": "./build/index.js"
+			"default": "./build/index.cjs"
 		},
 		"./package.json": "./package.json"
 	},
@@ -36,12 +44,11 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/element": "^6.36.1-next.6deb34194.0",
-		"@wordpress/private-apis": "^1.36.1-next.6deb34194.0",
+		"@wordpress/element": "^6.36.1-next.738bb1424.0",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
-		"@wordpress/theme": "^0.3.1-next.6deb34194.0"
+		"@wordpress/theme": "^0.4.1-next.738bb1424.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -50,5 +57,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "457096e9e9b3896d2d4fe54fc19d7fb571ee9a44"
+	"gitHead": "ab1b004c0d61c295aa34bc86ea07f979343983ce"
 }

package/src/badge/badge.tsx

@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Box } from '../box';
+import { type BoxProps } from '../box/types';
+import { type BadgeProps } from './types';
+
+/**
+ * Default render function that renders a span element with the given props.
+ *
+ * @param props The props to apply to the HTML element.
+ */
+const DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'span' > ) => (
+	<span { ...props } />
+);
+
+/**
+ * Maps intent values to Box backgroundColor and color props.
+ * Uses strong emphasis styles (as emphasis prop has been removed).
+ * @param intent
+ */
+const getIntentStyles = (
+	intent: BadgeProps[ 'intent' ]
+): Partial< BoxProps > => {
+	switch ( intent ) {
+		case 'high':
+			return {
+				backgroundColor: 'error',
+				color: 'error',
+			};
+		case 'medium':
+			return {
+				backgroundColor: 'warning',
+				color: 'warning',
+			};
+		case 'low':
+			return {
+				backgroundColor: 'caution',
+				color: 'caution',
+			};
+		case 'stable':
+			return {
+				backgroundColor: 'success',
+				color: 'success',
+			};
+		case 'informational':
+			return {
+				backgroundColor: 'info',
+				color: 'info',
+			};
+		case 'draft':
+			return {
+				backgroundColor: 'neutral-weak',
+				color: 'neutral',
+			};
+		case 'none':
+		default:
+			return {
+				backgroundColor: 'neutral',
+				color: 'neutral-weak',
+			};
+	}
+};
+
+/**
+ * A badge component for displaying labels with semantic intent.
+ * Built on the Box primitive for consistent theming and accessibility.
+ */
+export const Badge = forwardRef< HTMLDivElement, BadgeProps >( function Badge(
+	{ children, intent = 'none', render = DEFAULT_RENDER, ...props },
+	ref
+) {
+	const intentStyles = getIntentStyles( intent );
+
+	return (
+		<Box
+			{ ...intentStyles }
+			padding={ { inline: 'xs', block: '2xs' } }
+			borderRadius="lg"
+			render={ render }
+			style={ {
+				fontFamily: 'var(--wpds-font-family-body)',
+				fontSize: 'var(--wpds-font-size-small)',
+				fontWeight: '400',
+				lineHeight: 'var(--wpds-font-line-height-x-small)',
+				...props.style,
+			} }
+			ref={ ref }
+		>
+			{ children }
+		</Box>
+	);
+} );

package/src/badge/index.ts

@@ -0,0 +1 @@
+export { Badge } from './badge';

package/src/badge/stories/choosing-intent.mdx

@@ -0,0 +1,112 @@
+import { Meta } from '@storybook/blocks';
+import { Badge } from '../index';
+
+<Meta title="Design System/Components/Badge/Choosing intent" />
+
+# Choosing intent
+
+<div style={ { padding: '2rem', display: 'flex', justifyContent: 'center', gap: '0.5rem', flexWrap: 'wrap', border: '1px solid #e0e0e0', borderRadius: '0.5rem' } }>
+	<Badge intent="high">high</Badge>
+	<Badge intent="medium">medium</Badge>
+	<Badge intent="low">low</Badge>
+	<Badge intent="stable">stable</Badge>
+	<Badge intent="informational">informational</Badge>
+	<Badge intent="draft">draft</Badge>
+	<Badge intent="none">none</Badge>
+</div>
+
+It can be difficult to determine which badge intent to use because the component's properties are not tied to any specific product view. Those properties should be balanced against the requirements of the view in which the badge appears, all while keeping an eye on high-level consistency (global statuses that appear across multiple views).
+
+Here is a decision tree to help identify which badge to use.
+
+## 1. Ask first: should this draw the eye?
+
+If the user scans this screen, should their attention be drawn to this badge?
+
+-   If **no** → use `none` (or even just plain text; no badge), even if the state is positive or "stable".
+-   If **yes** → pick an intent based on how important the action or awareness is.
+
+## 2. High / Medium / Low = action priority
+
+Use when there's something for the user to act on.
+
+### `high` – Critical / top priority
+
+* Needs attention as soon as possible
+* _E.g. "Payment declined", "Security issue"_
+
+<Badge intent="high">Payment declined</Badge> <Badge intent="high">Security issue</Badge>
+
+### `medium` – Important / blocks progress
+
+* Blocks a key task, should be handled soon
+* _E.g. "Approval required", "Review needed"_
+
+<Badge intent="medium">Approval required</Badge> <Badge intent="medium">Review needed</Badge>
+
+### `low` – Worth noticing / non‑urgent
+
+* Good to be aware of; action may be optional or later
+* _E.g. "Pending", "Queued", "Minor issues", "Optional setup"_
+
+<Badge intent="low">Pending</Badge> <Badge intent="low">Queued</Badge>
+
+## 3. Informational / draft = special non-final states
+
+### `informational` – Notable, no action / fix needed
+
+* Context only; no clear action
+* _E.g. "Scheduled", "Beta", "Internal only"_
+
+<Badge intent="informational">Scheduled</Badge> <Badge intent="informational">Beta</Badge>
+
+### `draft` – Not final / work in progress
+
+* _E.g. "Draft", "Unpublished", "Work in progress"_
+
+<Badge intent="draft">Draft</Badge> <Badge intent="draft">Unpublished</Badge>
+
+## 4. Stable / none = normal states
+
+### `stable` – Positive / "healthy" state
+
+* Use when confirming success or "all good" is important in that view
+* _E.g. "Healthy", "Active", "Live"_
+
+<Badge intent="stable">Healthy</Badge> <Badge intent="stable">Active</Badge>
+
+### `none` – Default for normal / background states
+
+* Especially in dense lists where too much color creates visual noise
+* _E.g. "Inactive", "Expired"_
+
+<Badge intent="none">Inactive</Badge> <Badge intent="none">Expired</Badge>
+
+## Examples
+
+### Comment status:
+
+-   "Approved" → `none`: <Badge intent="none">Approved</Badge>
+-   "Approval required" → `medium`: <Badge intent="medium">Approval required</Badge>
+
+### Page status:
+
+-   "Published" → `none`: <Badge intent="none">Published</Badge>
+-   "Pending" → `low`: <Badge intent="low">Pending</Badge>
+-   "Draft" → `draft`: <Badge intent="draft">Draft</Badge>
+-   "Scheduled" → `informational`: <Badge intent="informational">Scheduled</Badge>
+-   "Private" → `informational`: <Badge intent="informational">Private</Badge>
+
+### Plugin status:
+
+-   "Active" → `stable`: <Badge intent="stable">Active</Badge>
+-   "Inactive" → `none`: <Badge intent="none">Inactive</Badge>
+
+## 5. When in doubt…
+
+Use the least attention‑grabbing intent that still:
+
+-   Makes it clear what needs attention,
+-   Marks what isn't final, or
+-   Confirms a key success state in that context.
+