@wordpress/ui 0.4.0 → 1.0.1-next.8fd3f8831.0

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/types.d.ts

@@ -1,8 +1,5 @@
-/**
- * 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.
@@ -13,7 +10,7 @@ export interface StackProps extends ComponentProps<'div'> {
      *
      * @default undefined
      */
-    gap?: SizeToken;
+    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;;;;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"}
+{"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.4.0",
+	"version": "1.0.1-next.8fd3f8831.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.37.0",
-		"@wordpress/private-apis": "^1.37.0",
+		"@wordpress/element": "^6.36.1-next.8fd3f8831.0",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
-		"@wordpress/theme": "^0.4.0"
+		"@wordpress/theme": "^0.4.1-next.8fd3f8831.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -50,5 +57,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
+	"gitHead": "e582b351bc4c4b8734bb087f63a3beec9875c3c7"
 }

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.
+

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

@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import '@wordpress/theme/design-tokens.css';
+
+/**
+ * Internal dependencies
+ */
+import { Badge } from '../index';
+
+const meta: Meta< typeof Badge > = {
+	title: 'Design System/Components/Badge',
+	component: Badge,
+	tags: [ 'status-experimental' ],
+};
+export default meta;
+
+type Story = StoryObj< typeof Badge >;
+
+export const Default: Story = {
+	args: {
+		children: 'Badge',
+	},
+};
+
+export const High: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'high',
+	},
+};
+
+export const Medium: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'medium',
+	},
+};
+
+export const Low: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'low',
+	},
+};
+
+export const Stable: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'stable',
+	},
+};
+
+export const Informational: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'informational',
+	},
+};
+
+export const Draft: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'draft',
+	},
+};
+
+export const None: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'none',
+	},
+};
+
+export const AllIntents: Story = {
+	...Default,
+	render: ( args ) => (
+		<div
+			style={ {
+				display: 'grid',
+				gridTemplateColumns: 'max-content min-content',
+				gap: '1rem',
+				color: 'var(--wpds-color-fg-content-neutral)',
+				backgroundColor: 'var(--wpds-color-bg-surface-neutral-strong)',
+			} }
+		>
+			{ (
+				[
+					'high',
+					'medium',
+					'low',
+					'stable',
+					'informational',
+					'draft',
+					'none',
+				] as const
+			 ).map( ( intent ) => (
+				<Fragment key={ intent }>
+					<div
+						style={ {
+							paddingInlineEnd: '1rem',
+							display: 'flex',
+							alignItems: 'center',
+						} }
+					>
+						{ intent }
+					</div>
+					<div
+						style={ {
+							padding: '0.5rem 1rem',
+							display: 'flex',
+							alignItems: 'center',
+						} }
+					>
+						<Badge { ...args } intent={ intent } />
+					</div>
+				</Fragment>
+			) ) }
+		</div>
+	),
+};

package/src/badge/types.ts

@@ -0,0 +1,25 @@
+/**
+ * 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';
+}

package/src/box/box.tsx

@@ -28,22 +28,20 @@ const capitalize = ( str: string ): string =>
 	str.charAt( 0 ).toUpperCase() + str.slice( 1 );
 
 /**
- * Converts a size value to a CSS design token property reference (with
- * fallback) or a calculated value based on the base unit.
+ * Converts a size token name to a CSS design token property reference (with
+ * fallback).
  *
  * @param property The CSS property name.
  * @param target   The design system token target.
- * @param value    The size value, either a number (multiplier of base unit) or a string (token name).
+ * @param value    The size token name.
  * @return A CSS value string with variable references.
  */
 const getSpacingValue = (
 	property: string,
 	target: string,
-	value: number | string
+	value: string
 ): string =>
-	typeof value === 'number'
-		? `calc(var(--wpds-dimension-base) * ${ value })`
-		: `var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;
+	`var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;
 
 /**
  * Generates CSS styles for properties with optionally directional values,