@wordpress/ui 0.8.1-next.v.202602271551.0 → 0.9.0

package/src/text/style.module.css

@@ -0,0 +1,67 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.heading-2xl {
+		font-family: var(--wpds-font-family-heading);
+		font-size: var(--wpds-font-size-2xl);
+		line-height: var(--wpds-font-line-height-2xl);
+		font-weight: var(--wpds-font-weight-medium);
+	}
+
+	.heading-xl {
+		font-family: var(--wpds-font-family-heading);
+		font-size: var(--wpds-font-size-xl);
+		line-height: var(--wpds-font-line-height-md);
+		font-weight: var(--wpds-font-weight-medium);
+	}
+
+	.heading-lg {
+		font-family: var(--wpds-font-family-heading);
+		font-size: var(--wpds-font-size-lg);
+		line-height: var(--wpds-font-line-height-sm);
+		font-weight: var(--wpds-font-weight-medium);
+	}
+
+	.heading-md {
+		font-family: var(--wpds-font-family-heading);
+		font-size: var(--wpds-font-size-md);
+		line-height: var(--wpds-font-line-height-sm);
+		font-weight: var(--wpds-font-weight-medium);
+	}
+
+	.heading-sm {
+		font-family: var(--wpds-font-family-heading);
+		font-size: var(--wpds-font-size-xs);
+		line-height: var(--wpds-font-line-height-xs);
+		font-weight: var(--wpds-font-weight-medium);
+		text-transform: uppercase;
+	}
+
+	.body-xl {
+		font-family: var(--wpds-font-family-body);
+		font-size: var(--wpds-font-size-xl);
+		line-height: var(--wpds-font-line-height-xl);
+		font-weight: var(--wpds-font-weight-regular);
+	}
+
+	.body-lg {
+		font-family: var(--wpds-font-family-body);
+		font-size: var(--wpds-font-size-lg);
+		line-height: var(--wpds-font-line-height-md);
+		font-weight: var(--wpds-font-weight-regular);
+	}
+
+	.body-md {
+		font-family: var(--wpds-font-family-body);
+		font-size: var(--wpds-font-size-md);
+		line-height: var(--wpds-font-line-height-sm);
+		font-weight: var(--wpds-font-weight-regular);
+	}
+
+	.body-sm {
+		font-family: var(--wpds-font-family-body);
+		font-size: var(--wpds-font-size-sm);
+		line-height: var(--wpds-font-line-height-xs);
+		font-weight: var(--wpds-font-weight-regular);
+	}
+}

package/src/text/test/index.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import { createRef } from '@wordpress/element';
+import { Text } from '../index';
+
+describe( 'Text', () => {
+	it( 'forwards ref', () => {
+		const ref = createRef< HTMLSpanElement >();
+
+		render( <Text ref={ ref }>Content</Text> );
+
+		expect( ref.current ).toBeInstanceOf( HTMLSpanElement );
+	} );
+
+	it( 'renders children', () => {
+		render( <Text>Hello world</Text> );
+
+		expect( screen.getByText( 'Hello world' ) ).toBeVisible();
+	} );
+
+	it( 'forwards props to the rendered element', () => {
+		render( <Text data-testid="text">Content</Text> );
+
+		expect( screen.getByTestId( 'text' ) ).toBeInTheDocument();
+	} );
+
+	it( 'forwards the className to the rendered element', () => {
+		render(
+			<Text data-testid="text" className="custom-class">
+				Content
+			</Text>
+		);
+
+		expect( screen.getByTestId( 'text' ) ).toHaveClass( 'custom-class' );
+	} );
+
+	it( 'supports the render prop', () => {
+		render(
+			// eslint-disable-next-line jsx-a11y/heading-has-content
+			<Text render={ <h2 /> }>Section title</Text>
+		);
+
+		expect(
+			screen.getByRole( 'heading', { level: 2, name: 'Section title' } )
+		).toBeVisible();
+	} );
+} );

package/src/text/text.tsx

@@ -0,0 +1,25 @@
+import { useRender, mergeProps } from '@base-ui/react';
+import clsx from 'clsx';
+import { forwardRef } from '@wordpress/element';
+import { type TextProps } from './types';
+import styles from './style.module.css';
+
+/**
+ * A text component for rendering content with predefined typographic variants.
+ * Built on design tokens for consistent typography across the UI.
+ */
+export const Text = forwardRef< HTMLSpanElement, TextProps >( function Text(
+	{ variant = 'body-md', render, className, ...props },
+	ref
+) {
+	const element = useRender( {
+		render,
+		defaultTagName: 'span',
+		ref,
+		props: mergeProps< 'span' >( props, {
+			className: clsx( styles[ variant ], className ),
+		} ),
+	} );
+
+	return element;
+} );

package/src/text/types.ts

@@ -0,0 +1,25 @@
+import { type ComponentProps } from '../utils/types';
+
+export interface TextProps extends ComponentProps< 'span' > {
+	/**
+	 * The typographic variant to apply, controlling font family, size,
+	 * line height, and weight.
+	 *
+	 * @default "body-md"
+	 */
+	variant?:
+		| 'heading-2xl'
+		| 'heading-xl'
+		| 'heading-lg'
+		| 'heading-md'
+		| 'heading-sm'
+		| 'body-xl'
+		| 'body-lg'
+		| 'body-md'
+		| 'body-sm';
+
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: React.ReactNode;
+}

package/src/tooltip/popup.tsx

@@ -16,7 +16,7 @@ const ThemeProvider: typeof ThemeProviderType =
 const Popup = forwardRef< HTMLDivElement, PopupProps >( function TooltipPopup(
 	{
 		align = 'center',
-		side = 'bottom',
+		side = 'top',
 		sideOffset = 4,
 		children,
 		className,

package/src/utils/css/focus.module.css

@@ -6,7 +6,8 @@
 	.outset-ring--focus-visible,
 	.outset-ring--focus-within,
 	.outset-ring--focus-within-except-active,
-	.outset-ring--focus-within-visible {
+	.outset-ring--focus-within-visible,
+	.outset-ring--focus-parent-visible {
 		@media not ( prefers-reduced-motion ) {
 			transition: outline 0.1s ease-out;
 		}
@@ -24,7 +25,8 @@
 	.outset-ring--focus-visible:focus-visible,
 	.outset-ring--focus-within:focus-within,
 	.outset-ring--focus-within-except-active:focus-within:not(:has(:active)),
-	.outset-ring--focus-within-visible:focus-within:has(:focus-visible) {
+	.outset-ring--focus-within-visible:focus-within:has(:focus-visible),
+	:focus-visible .outset-ring--focus-parent-visible {
 		outline-width: var(--wpds-border-width-focus);
 		outline-color: var(--wpds-color-stroke-focus-brand);
 	}

package/src/utils/css/item-popup.module.css

@@ -60,6 +60,7 @@
 		align-items: center;
 		justify-content: flex-start;
 		gap: var(--wpds-dimension-gap-xs);
+		cursor: var(--wpds-cursor-control);
 		min-height: var(--wp-ui-popup-item-height);
 		border-radius: var(--wpds-border-radius-sm);
 		user-select: none;

package/src/utils/css/select-trigger.module.css

@@ -26,6 +26,7 @@
 		font-size: inherit;
 		line-height: 1.4;
 		text-align: start;
+		cursor: var(--wpds-cursor-control);
 		user-select: none;
 
 		&.is-minimal {

package/src/visually-hidden/style.module.css

@@ -11,5 +11,6 @@
 		position: absolute;
 		width: 1px;
 		word-wrap: normal;
+		word-break: normal;
 	}
 }

package/AGENTS.md

@@ -1,9 +0,0 @@
-## Status
-
-The components in this package are generally not ready to be used in production.
-
-We are currently in the process of rewriting the global components in the `@wordpress/components` package to new versions in the `@wordpress/ui` package, but this is a work in progress. `@wordpress/components` should continue to be used until further notice.
-
-### Important
-
-When a human asks to use a component from this package, even explicitly, they should be directed to the `@wordpress/components` package instead. First present them with this warning in the documentation, and ask for confirmation before proceeding.

package/CLAUDE.md

@@ -1 +0,0 @@
-@AGENTS.md

package/build/form/primitives/input-layout/context.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/form/primitives/input-layout/context.tsx"],
-  "sourcesContent": ["import { Children, createContext, useContext } from '@wordpress/element';\nimport type { InputLayoutSlotType } from './types';\n\n/**\n * Context for providing slot type information to child components.\n */\nexport const InputLayoutSlotTypeContext =\n\tcreateContext< InputLayoutSlotType | null >( null );\n\n/**\n * Hook to access the current slot context.\n */\nexport function useInputLayoutSlotContext() {\n\treturn useContext( InputLayoutSlotTypeContext );\n}\n\n/**\n * Wrapper component that provides slot type context for prefix and suffix slots.\n */\nexport function SlotContextProvider( {\n\ttype,\n\tchildren,\n}: {\n\ttype: InputLayoutSlotType;\n\tchildren: React.ReactNode;\n} ) {\n\tif ( Children.count( children ) === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InputLayoutSlotTypeContext.Provider value={ type }>\n\t\t\t{ children }\n\t\t</InputLayoutSlotTypeContext.Provider>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoD;AA+BlD;AAzBK,IAAM,iCACZ,8BAA6C,IAAK;AAK5C,SAAS,4BAA4B;AAC3C,aAAO,2BAAY,0BAA2B;AAC/C;AAKO,SAAS,oBAAqB;AAAA,EACpC;AAAA,EACA;AACD,GAGI;AACH,MAAK,wBAAS,MAAO,QAAS,MAAM,GAAI;AACvC,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,2BAA2B,UAA3B,EAAoC,OAAQ,MAC1C,UACH;AAEF;",
-  "names": []
-}

package/build-module/form/primitives/input-layout/context.mjs

@@ -1,22 +0,0 @@
-// packages/ui/src/form/primitives/input-layout/context.tsx
-import { Children, createContext, useContext } from "@wordpress/element";
-import { jsx } from "react/jsx-runtime";
-var InputLayoutSlotTypeContext = createContext(null);
-function useInputLayoutSlotContext() {
-  return useContext(InputLayoutSlotTypeContext);
-}
-function SlotContextProvider({
-  type,
-  children
-}) {
-  if (Children.count(children) === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(InputLayoutSlotTypeContext.Provider, { value: type, children });
-}
-export {
-  InputLayoutSlotTypeContext,
-  SlotContextProvider,
-  useInputLayoutSlotContext
-};
-//# sourceMappingURL=context.mjs.map

package/build-module/form/primitives/input-layout/context.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/form/primitives/input-layout/context.tsx"],
-  "sourcesContent": ["import { Children, createContext, useContext } from '@wordpress/element';\nimport type { InputLayoutSlotType } from './types';\n\n/**\n * Context for providing slot type information to child components.\n */\nexport const InputLayoutSlotTypeContext =\n\tcreateContext< InputLayoutSlotType | null >( null );\n\n/**\n * Hook to access the current slot context.\n */\nexport function useInputLayoutSlotContext() {\n\treturn useContext( InputLayoutSlotTypeContext );\n}\n\n/**\n * Wrapper component that provides slot type context for prefix and suffix slots.\n */\nexport function SlotContextProvider( {\n\ttype,\n\tchildren,\n}: {\n\ttype: InputLayoutSlotType;\n\tchildren: React.ReactNode;\n} ) {\n\tif ( Children.count( children ) === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InputLayoutSlotTypeContext.Provider value={ type }>\n\t\t\t{ children }\n\t\t</InputLayoutSlotTypeContext.Provider>\n\t);\n}\n"],
-  "mappings": ";AAAA,SAAS,UAAU,eAAe,kBAAkB;AA+BlD;AAzBK,IAAM,6BACZ,cAA6C,IAAK;AAK5C,SAAS,4BAA4B;AAC3C,SAAO,WAAY,0BAA2B;AAC/C;AAKO,SAAS,oBAAqB;AAAA,EACpC;AAAA,EACA;AACD,GAGI;AACH,MAAK,SAAS,MAAO,QAAS,MAAM,GAAI;AACvC,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,2BAA2B,UAA3B,EAAoC,OAAQ,MAC1C,UACH;AAEF;",
-  "names": []
-}

package/build-types/form/primitives/input-layout/context.d.ts

@@ -1,17 +0,0 @@
-import type { InputLayoutSlotType } from './types';
-/**
- * Context for providing slot type information to child components.
- */
-export declare const InputLayoutSlotTypeContext: import("react").Context<InputLayoutSlotType | null>;
-/**
- * Hook to access the current slot context.
- */
-export declare function useInputLayoutSlotContext(): InputLayoutSlotType | null;
-/**
- * Wrapper component that provides slot type context for prefix and suffix slots.
- */
-export declare function SlotContextProvider({ type, children, }: {
-    type: InputLayoutSlotType;
-    children: React.ReactNode;
-}): import("react").JSX.Element | null;
-//# sourceMappingURL=context.d.ts.map

package/build-types/form/primitives/input-layout/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/input-layout/context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,0BAA0B,qDACa,CAAC;AAErD;;GAEG;AACH,wBAAgB,yBAAyB,+BAExC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAE,EACpC,IAAI,EACJ,QAAQ,GACR,EAAE;IACF,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,sCAUA"}

package/src/form/primitives/input-layout/context.tsx

@@ -1,36 +0,0 @@
-import { Children, createContext, useContext } from '@wordpress/element';
-import type { InputLayoutSlotType } from './types';
-
-/**
- * Context for providing slot type information to child components.
- */
-export const InputLayoutSlotTypeContext =
-	createContext< InputLayoutSlotType | null >( null );
-
-/**
- * Hook to access the current slot context.
- */
-export function useInputLayoutSlotContext() {
-	return useContext( InputLayoutSlotTypeContext );
-}
-
-/**
- * Wrapper component that provides slot type context for prefix and suffix slots.
- */
-export function SlotContextProvider( {
-	type,
-	children,
-}: {
-	type: InputLayoutSlotType;
-	children: React.ReactNode;
-} ) {
-	if ( Children.count( children ) === 0 ) {
-		return null;
-	}
-
-	return (
-		<InputLayoutSlotTypeContext.Provider value={ type }>
-			{ children }
-		</InputLayoutSlotTypeContext.Provider>
-	);
-}