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

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,

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

@@ -1,16 +1,6 @@
-/**
- * External dependencies
- */
 import { type Meta, type StoryObj } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
+import { type PaddingSize } from '@wordpress/theme';
 import '@wordpress/theme/design-tokens.css';
-
-/**
- * Internal dependencies
- */
 import { Box } from '../box';
 
 const meta: Meta< typeof Box > = {
@@ -35,7 +25,7 @@ export const Default: Story = {
 	argTypes: {
 		padding: {
 			control: 'select',
-			options: [ '2xs', 'xs', 'sm', 'md', 'lg', 1, 2, 3, 4 ],
+			options: [ '2xs', 'xs', 'sm', 'md', 'lg' ] satisfies PaddingSize[],
 		},
 	},
 };

package/src/box/types.ts

@@ -1,57 +1,14 @@
-/**
- * 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;
@@ -65,37 +22,37 @@ 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/src/index.ts

@@ -1 +1,3 @@
 export * from './box';
+export * from './badge';
+export * from './stack';

package/src/stack/index.ts

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

package/src/stack/stack.tsx

@@ -12,55 +12,21 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { renderElement } from '../utils/element';
-import { type StackProps, type SizeToken } from './types';
+import { type StackProps } from './types';
 import styles from './style.module.css';
 
-/**
- * Set of token names for gap spacing.
- */
-const TOKEN_NAMES = new Set< SizeToken >( [
-	'2xs',
-	'xs',
-	'sm',
-	'md',
-	'lg',
-	'xl',
-] );
-
-/**
- * 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 function getNormalizedGap(
-	gap: number | SizeToken | React.CSSProperties[ 'gap' ]
-): string {
-	if ( typeof gap === 'number' ) {
-		return `calc( ${ gap } * var( --wpds-dimension-base ) )`;
-	}
-
-	if ( TOKEN_NAMES.has( gap as SizeToken ) ) {
-		return `var(--wpds-dimension-gap-${ gap })`;
-	}
-
-	return String( gap );
-}
-
 /**
  * A flexible layout component using CSS Flexbox for consistent spacing and alignment.
  * Built on design tokens for predictable spacing values.
  */
 export const Stack = forwardRef< HTMLDivElement, StackProps >( function Stack(
-	{ direction, gap = 0, align, justify, wrap, render, ...props },
+	{ direction, gap, align, justify, wrap, render, ...props },
 	ref
 ) {
 	const className = clsx( props.className, styles.stack );
 
 	const style: React.CSSProperties = {
-		gap: getNormalizedGap( gap ),
+		gap: gap && `var(--wpds-dimension-gap-${ gap })`,
 		alignItems: align,
 		justifyContent: justify,
 		flexDirection: direction,

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

@@ -48,18 +48,6 @@ export const Default: Story = {
 		),
 	},
 	argTypes: {
-		gap: {
-			control: {
-				type: 'select',
-			},
-			options: [ 0, 1, 2, 3, 4, '2xs', 'xs', 'sm', 'md', 'lg', 'xl' ],
-			table: {
-				type: {
-					summary:
-						'number | "2xs" | "xs" | "sm" | "md" | "lg" | "xl"',
-				},
-			},
-		},
 		align: {
 			options: [
 				'center',
@@ -121,7 +109,7 @@ export const Nested: Story = {
 					<DemoBox />
 				</Stack>
 				<DemoBox variant="lg" />
-				<Stack gap={ 0 } direction="column">
+				<Stack direction="column">
 					<DemoBox />
 					<DemoBox />
 				</Stack>

package/src/stack/test/stack.test.tsx

@@ -11,27 +11,7 @@ import { createRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Stack, getNormalizedGap } from '../stack';
-
-describe( 'getNormalizedGap', () => {
-	it( 'should return the gap as a CSS calculation when the gap is a positive number', () => {
-		const result = getNormalizedGap( 1 );
-
-		expect( result ).toBe( 'calc( 1 * var( --wpds-dimension-base ) )' );
-	} );
-
-	it( 'should return the CSS variable reference to a token value', () => {
-		const result = getNormalizedGap( 'md' );
-
-		expect( result ).toBe( 'var(--wpds-dimension-gap-md)' );
-	} );
-
-	it( 'should return the gap as a literal value when the gap is a string', () => {
-		const result = getNormalizedGap( '10px' );
-
-		expect( result ).toBe( '10px' );
-	} );
-} );
+import { Stack } from '../stack';
 
 describe( 'Stack', () => {
 	it( 'forwards ref', () => {

package/src/stack/types.ts

@@ -1,10 +1,6 @@
-/**
- * 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.
@@ -15,12 +11,11 @@ export interface StackProps extends ComponentProps< 'div' > {
 	>;
 
 	/**
-	 * 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/src/test/index.test.ts

@@ -0,0 +1,22 @@
+import { join, dirname, basename } from 'node:path';
+import { readFile } from 'node:fs/promises';
+import glob from 'fast-glob';
+
+describe( 'index', () => {
+	it( 'should export something from each component', async () => {
+		// As described in the CONTRIBUTING.md file, each component should be
+		// exported from an index.ts in its implementation directory.
+		const components = await glob( '*/index.ts', {
+			cwd: join( __dirname, '..' ),
+		} );
+		const directories = components.map( ( c ) => basename( dirname( c ) ) );
+		const index = await readFile(
+			join( __dirname, '../index.ts' ),
+			'utf-8'
+		);
+
+		for ( const directory of directories ) {
+			expect( index ).toContain( `'./${ directory }'` );
+		}
+	} );
+} );

package/build/box/box.js.map

@@ -1,7 +0,0 @@
-{
-  "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/types.js.map

@@ -1,7 +0,0 @@
-{
-  "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.map

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

package/build/lock-unlock.js.map

@@ -1,7 +0,0 @@
-{
-  "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.map

@@ -1,7 +0,0 @@
-{
-  "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.map

@@ -1,7 +0,0 @@
-{
-  "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;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;;;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,YAAQ,2BAA0C,SAASC,OACvE,EAAE,WAAW,MAAM,GAAG,OAAO,SAAS,MAAM,QAAQ,GAAG,MAAM,GAC7D,KACC;AACD,QAAM,gBAAY,YAAAC,SAAM,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,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.map

@@ -1,7 +0,0 @@
-{
-  "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. As a number, it is a\n\t * multiple of the design system grid spacing.\n\t *\n\t * @default 'initial'\n\t */\n\tgap?: number | SizeToken | React.CSSProperties[ 'gap' ];\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

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

package/build-module/lock-unlock.js

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

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

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

package/build-types/lock-unlock.d.ts

@@ -1,2 +0,0 @@
-export declare const lock: (object: unknown, privateData: unknown) => void, unlock: <T = any>(object: unknown) => T;
-//# sourceMappingURL=lock-unlock.d.ts.map

package/build-types/lock-unlock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lock-unlock.d.ts","sourceRoot":"","sources":["../src/lock-unlock.ts"],"names":[],"mappings":"AAKA,eAAO,MAAQ,IAAI,mDAAE,MAAM,iCAIzB,CAAC"}

package/src/lock-unlock.ts

@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
-
-export const { lock, unlock } =
-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
-		'@wordpress/dataviews'
-	);

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-	"$schema": "https://json.schemastore.org/tsconfig.json",
-	"extends": "../../tsconfig.base.json",
-	"compilerOptions": {
-		"types": [ "node", "jest", "@testing-library/jest-dom" ]
-	},
-	"references": [
-		{ "path": "../element" },
-		{ "path": "../private-apis" },
-		{ "path": "../theme" }
-	],
-	"exclude": []
-}