@wordpress/ui 0.6.1-next.v.0 → 0.7.0

package/build-types/form/primitives/select/stories/index.story.d.ts

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import '@wordpress/theme/design-tokens.css';
 import { Select } from '../../../..';
 declare const meta: Meta<typeof Select.Root>;
 export default meta;

package/build-types/form/primitives/select/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/select/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAAC,IAAI,CAQnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,MAAM,CAAC,IAAI,CAAE,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAcF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAaF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAwCtC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAc9B,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/select/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAAC,IAAI,CAQnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,MAAM,CAAC,IAAI,CAAE,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAcF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAaF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAwCtC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAc9B,CAAC"}

package/build-types/form/primitives/textarea/index.d.ts

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

package/build-types/form/primitives/textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/build-types/form/primitives/textarea/stories/index.story.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from '../index';
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithOverflow: Story;
+/**
+ * When `rows` is set to `1`, the textarea will have the same footprint as a default `Input`.
+ */
+export declare const WithOneRow: Story;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/form/primitives/textarea/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/textarea/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAGhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,QAAQ,CAAE,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC"}

package/build-types/form/primitives/textarea/test/index.test.d.ts

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

package/build-types/form/primitives/textarea/test/index.test.d.ts.map

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

package/build-types/form/primitives/textarea/textarea.d.ts

@@ -0,0 +1,4 @@
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("../../../utils/types").ComponentProps<"textarea">, "defaultValue" | "disabled" | "value" | "rows"> & Pick<import("../input/types").InputProps, "defaultValue" | "disabled" | "value" | "onValueChange"> & {
+    rows?: React.ComponentProps<"textarea">["rows"];
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=textarea.d.ts.map

package/build-types/form/primitives/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/textarea/textarea.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,QAAQ;;uDA8BpB,CAAC"}

package/build-types/form/primitives/textarea/types.d.ts

@@ -0,0 +1,11 @@
+import type { InputProps } from '../input/types';
+import type { ComponentProps } from '../../../utils/types';
+export type TextareaProps = Omit<ComponentProps<'textarea'>, 'disabled' | 'rows' | 'value' | 'defaultValue'> & Pick<InputProps, 'value' | 'defaultValue' | 'onValueChange' | 'disabled'> & {
+    /**
+     * The number of rows the textarea should contain.
+     *
+     * @default 4
+     */
+    rows?: React.ComponentProps<'textarea'>['rows'];
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/form/primitives/textarea/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,CAC/B,cAAc,CAAE,UAAU,CAAE,EAC5B,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,CAC9C,GACA,IAAI,CACH,UAAU,EACV,OAAO,GAAG,cAAc,GAAG,eAAe,GAAG,UAAU,CACvD,GAAG;IACH;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAE,UAAU,CAAE,CAAE,MAAM,CAAE,CAAC;CACpD,CAAC"}

package/build-types/icon-button/icon-button.d.ts

@@ -0,0 +1,13 @@
+/**
+ * An icon-only button with automatic tooltip and optimized styling.
+ * Inherits all Button props while providing icon-specific enhancements.
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<import("../button/types").ButtonProps, "children"> & {
+    label: string;
+    icon: import("../icon/types").IconProps["icon"];
+    shortcut?: {
+        displayShortcut: string;
+        ariaKeyShortcut: string;
+    };
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=icon-button.d.ts.map

package/build-types/icon-button/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/icon-button/icon-button.tsx"],"names":[],"mappings":"AAQA;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;qDAoDtB,CAAC"}

package/build-types/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './icon-button';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/build-types/icon-button/stories/index.story.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IconButton } from '../index';
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Default: Story;
+export declare const Outline: Story;
+export declare const Minimal: Story;
+export declare const Neutral: Story;
+export declare const NeutralOutline: Story;
+export declare const Disabled: Story;
+export declare const WithDifferentIcons: Story;
+/**
+ * The pressed state is only available for buttons with `tone="neutral"` and
+ * `variant="minimal"` and can be toggled via the `aria-pressed` HTML attribute.
+ */
+export declare const Pressed: Story;
+export declare const WithShortcut: Story;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/icon-button/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/icon-button/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAY5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,UAAU,CAQlC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,UAAU,CAAE,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmBhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAOF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC"}

package/build-types/icon-button/test/index.test.d.ts

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

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

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

package/build-types/icon-button/types.d.ts

@@ -0,0 +1,36 @@
+import { type ButtonProps } from '../button/types';
+import { type IconProps } from '../icon/types';
+export type IconButtonProps = Omit<ButtonProps, 'children'> & {
+    /**
+     * A label describing the button's action, shown as a tooltip and to
+     * assistive technology.
+     */
+    label: string;
+    /**
+     * The icon to display in the button.
+     */
+    icon: IconProps['icon'];
+    /**
+     * The keyboard shortcut associated with this button. When provided, the
+     * shortcut is displayed in the tooltip and announced to assistive technology.
+     *
+     * **Note**: This prop is for display and accessibility purposes only — the
+     * consumer is responsible for implementing the actual keyboard event handler.
+     */
+    shortcut?: {
+        /**
+         * The human-readable representation of the shortcut, displayed in the
+         * tooltip. Use platform-appropriate symbols (e.g., "⌘S" on macOS,
+         * "Ctrl+S" on Windows).
+         */
+        displayShortcut: string;
+        /**
+         * The shortcut in a format compatible with the
+         * [aria-keyshortcuts](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-keyshortcuts)
+         * attribute. Use "+" to separate keys and standard key names
+         * (e.g., "Meta+S", "Control+Shift+P").
+         */
+        ariaKeyShortcut: string;
+    };
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/icon-button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE,GAAG;IAC/D;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAE,MAAM,CAAE,CAAC;IAE1B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE;QACV;;;;WAIG;QACH,eAAe,EAAE,MAAM,CAAC;QACxB;;;;;WAKG;QACH,eAAe,EAAE,MAAM,CAAC;KACxB,CAAC;CACF,CAAC"}

package/build-types/index.d.ts

@@ -1,9 +1,11 @@
 export * from './badge';
-export * from './box';
 export * from './button';
+export * as Dialog from './dialog';
 export * from './form/primitives';
 export * from './icon';
+export * from './icon-button';
 export * from './stack';
+export * as Tabs from './tabs';
 export * as Tooltip from './tooltip';
 export * from './visually-hidden';
 //# 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,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,cAAc,mBAAmB,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,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAG7B,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"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAG7B,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/tabs/index.d.ts

@@ -0,0 +1,6 @@
+import { List } from './list';
+import { Panel } from './panel';
+import { Root } from './root';
+import { Tab } from './tab';
+export { Root, List, Panel, Tab };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC"}

package/build-types/tabs/list.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Groups the individual tab buttons.
+ *
+ * `Tabs` is a collection of React components that combine to render
+ * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+ */
+export declare const List: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "className" | "children" | "render"> & {
+    className?: string;
+    render?: ((props: import("react").HTMLAttributes<any> & {
+        ref?: import("react").Ref<any> | undefined;
+    }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
+} & {
+    children?: import("react").ReactNode;
+    variant?: "minimal" | "default";
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=list.d.ts.map

package/build-types/tabs/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/tabs/list.tsx"],"names":[],"mappings":"AAUA;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;;kDAiHhB,CAAC"}

package/build-types/tabs/panel.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A panel displayed when the corresponding tab is active.
+ *
+ * `Tabs` is a collection of React components that combine to render
+ * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+ */
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsPanelProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "className" | "children" | "render"> & {
+    className?: string;
+    render?: ((props: import("react").HTMLAttributes<any> & {
+        ref?: import("react").Ref<any> | undefined;
+    }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=panel.d.ts.map

package/build-types/tabs/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/tabs/panel.tsx"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;;;;;;kDAUjB,CAAC"}

package/build-types/tabs/root.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Groups the tabs and the corresponding panels.
+ *
+ * `Tabs` is a collection of React components that combine to render
+ * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+ */
+export declare const Root: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsRootProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "className" | "children" | "render"> & {
+    className?: string;
+    render?: ((props: import("react").HTMLAttributes<any> & {
+        ref?: import("react").Ref<any> | undefined;
+    }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=root.d.ts.map

package/build-types/tabs/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tabs/root.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;kDAIhB,CAAC"}

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tabs } from '../..';
+declare const meta: Meta<typeof Tabs.Root>;
+export default meta;
+export declare const Default: StoryObj<typeof Tabs.Root>;
+export declare const Minimal: StoryObj<typeof Tabs.Root>;
+export declare const SizeAndOverflowPlayground: StoryObj<typeof Tabs.Root>;
+export declare const Vertical: StoryObj<typeof Tabs.Root>;
+export declare const WithDisabledTab: StoryObj<typeof Tabs.Root>;
+export declare const WithTabIconsAndTooltips: StoryObj<typeof Tabs.Root>;
+export declare const WithPanelsAlwaysMounted: StoryObj<typeof Tabs.Root>;
+export declare const WithNonFocusablePanels: StoryObj<typeof Tabs.Root>;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/tabs/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tabs/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,IAAI,EAAW,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAAC,IAAI,CAQjC,CAAC;AACF,eAAe,IAAI,CAAC;AAUpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAsB/C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAsB/C,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAqHjE,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAWhD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAyBvD,CAAC;AAgCF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAsC/D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAsB/D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAqC9D,CAAC"}

package/build-types/tabs/tab.d.ts

@@ -0,0 +1,15 @@
+/**
+ * An individual interactive tab button that toggles the corresponding panel.
+ *
+ * `Tabs` is a collection of React components that combine to render
+ * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+ */
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps & import("react").RefAttributes<Element>, "ref">, "className" | "children" | "render"> & {
+    className?: string;
+    render?: ((props: import("react").HTMLAttributes<any> & {
+        ref?: import("react").Ref<any> | undefined;
+    }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=tab.d.ts.map

package/build-types/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tabs/tab.tsx"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,eAAO,MAAM,GAAG;;;;;;;qDAcb,CAAC"}

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

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

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

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

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { Tabs as _Tabs } from '@base-ui/react/tabs';
+import type { ComponentProps } from '../utils/types';
+export type TabRootProps = ComponentProps<typeof _Tabs.Root> & {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+};
+export type TabListProps = ComponentProps<typeof _Tabs.List> & {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+    /**
+     * The visual variant of the tab list.
+     * @default "default"
+     */
+    variant?: 'minimal' | 'default';
+};
+export type TabProps = ComponentProps<typeof _Tabs.Tab> & {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+};
+export type TabPanelProps = ComponentProps<typeof _Tabs.Panel> & {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,IAAI,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,IAAI,CAAE,GAAG;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,IAAI,CAAE,GAAG;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,GAAG,CAAE,GAAG;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,KAAK,CAAE,GAAG;IAClE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.6.1-next.v.0+5aba098fc",
+	"version": "0.7.0",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,19 +44,21 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@base-ui/react": "^1.0.0",
-		"@wordpress/a11y": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/element": "^6.39.1-next.v.0+5aba098fc",
-		"@wordpress/i18n": "^6.12.1-next.v.0+5aba098fc",
-		"@wordpress/icons": "^11.6.1-next.v.0+5aba098fc",
-		"@wordpress/primitives": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/private-apis": "^1.39.1-next.v.0+5aba098fc",
-		"@wordpress/theme": "^0.6.1-next.v.0+5aba098fc",
+		"@wordpress/a11y": "^4.40.0",
+		"@wordpress/compose": "^7.40.0",
+		"@wordpress/element": "^6.40.0",
+		"@wordpress/i18n": "^6.13.0",
+		"@wordpress/icons": "^11.7.0",
+		"@wordpress/keycodes": "^4.40.0",
+		"@wordpress/primitives": "^4.40.0",
+		"@wordpress/private-apis": "^1.40.0",
+		"@wordpress/theme": "^0.7.0",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
 		"@storybook/addon-docs": "^10.1.11",
 		"@storybook/react-vite": "^10.1.11",
-		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
 		"@types/node": "^20.17.10",
 		"storybook": "^10.1.11"
@@ -68,5 +70,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d730f9e00f5462d1b9d2660632850f5f43ccff44"
+	"gitHead": "376124aa10dbc2cc0c81c964ec00b99fcfee5382"
 }

package/src/badge/badge.tsx

@@ -1,88 +1,29 @@
+import { useRender, mergeProps } from '@base-ui/react';
+import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
-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.
- */
-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).
- */
-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',
-			};
-	}
-};
+import styles from './style.module.css';
 
 /**
  * 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 },
+export const Badge = forwardRef< HTMLSpanElement, BadgeProps >( function Badge(
+	{ children, intent = 'none', render, className, ...props },
 	ref
 ) {
-	const intentStyles = getIntentStyles( intent );
+	const element = useRender( {
+		render,
+		defaultTagName: 'span',
+		ref,
+		props: mergeProps< 'span' >( props, {
+			className: clsx(
+				styles.badge,
+				styles[ `is-${ intent }-intent` ],
+				className
+			),
+			children,
+		} ),
+	} );
 
-	return (
-		<Box
-			{ ...intentStyles }
-			padding={ { inline: 'xs', block: '2xs' } }
-			borderRadius="lg"
-			render={ render }
-			style={ {
-				fontFamily: 'var(--wpds-font-family-body)',
-				fontSize: 'var(--wpds-font-size-sm)',
-				fontWeight: 'var(--wpds-font-weight-regular)',
-				lineHeight: 'var(--wpds-font-line-height-xs)',
-				...props.style,
-			} }
-			ref={ ref }
-		>
-			{ children }
-		</Box>
-	);
+	return element;
 } );

package/src/badge/stories/choosing-intent.story.tsx

@@ -7,7 +7,7 @@ const meta: Meta< typeof Badge > = {
 	component: Badge,
 	decorators: [
 		( Story ) => (
-			<Stack direction="row" gap="xs" wrap="wrap">
+			<Stack direction="row" gap="sm" wrap="wrap">
 				<Story />
 			</Stack>
 		),

package/src/badge/style.module.css

@@ -0,0 +1,48 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.badge {
+		padding-inline: var(--wpds-dimension-padding-sm);
+		padding-block: var(--wpds-dimension-padding-xs);
+		border-radius: var(--wpds-border-radius-lg);
+		font-family: var(--wpds-font-family-body);
+		font-size: var(--wpds-font-size-sm);
+		font-weight: var(--wpds-font-weight-regular);
+		line-height: var(--wpds-font-line-height-xs);
+	}
+
+	.is-high-intent {
+		background-color: var(--wpds-color-bg-surface-error);
+		color: var(--wpds-color-fg-content-error);
+	}
+
+	.is-medium-intent {
+		background-color: var(--wpds-color-bg-surface-warning);
+		color: var(--wpds-color-fg-content-warning);
+	}
+
+	.is-low-intent {
+		background-color: var(--wpds-color-bg-surface-caution);
+		color: var(--wpds-color-fg-content-caution);
+	}
+
+	.is-stable-intent {
+		background-color: var(--wpds-color-bg-surface-success);
+		color: var(--wpds-color-fg-content-success);
+	}
+
+	.is-informational-intent {
+		background-color: var(--wpds-color-bg-surface-info);
+		color: var(--wpds-color-fg-content-info);
+	}
+
+	.is-draft-intent {
+		background-color: var(--wpds-color-bg-surface-neutral-weak);
+		color: var(--wpds-color-fg-content-neutral);
+	}
+
+	.is-none-intent {
+		background-color: var(--wpds-color-bg-surface-neutral);
+		color: var(--wpds-color-fg-content-neutral-weak);
+	}
+}

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

@@ -1,4 +1,4 @@
-import { Fragment, useState } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cog } from '@wordpress/icons';
 import { Button } from '../index';
@@ -166,8 +166,7 @@ export const Loading: Story = {
 
 /**
  * The pressed state is only available for buttons with `tone="neutral"` and
- * `variant="minimal"`. This represents a toggle button that is currently in an
- * active/pressed state.
+ * `variant="minimal"` and can be toggled via the `aria-pressed` HTML attribute.
  */
 export const Pressed: Story = {
 	...Default,
@@ -175,18 +174,6 @@ export const Pressed: Story = {
 		...Default.args,
 		tone: 'neutral',
 		variant: 'minimal',
-	},
-	render: ( args ) => {
-		const [ isPressed, setIsPressed ] = useState( true );
-
-		return (
-			<Button
-				{ ...args }
-				aria-pressed={ isPressed }
-				onClick={ () => setIsPressed( ! isPressed ) }
-			>
-				Button
-			</Button>
-		);
+		'aria-pressed': true,
 	},
 };