@wordpress/ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,27 @@
+import type { Input } from '@base-ui/react/input';
+import type { InputLayoutProps } from '../input-layout/types';
+import type { ComponentProps } from '../../../utils/types';
+export type InputProps = Omit<ComponentProps<typeof Input>, 'value' | 'defaultValue' | 'type' | 'disabled' | 'prefix' | 'size'> & Pick<InputLayoutProps, 'prefix' | 'suffix'> & {
+    /**
+     * Whether the field is disabled.
+     */
+    disabled?: boolean;
+} & {
+    /**
+     * The type of the input element.
+     */
+    type?: Input.Props['type'];
+    /**
+     * The default value to use in uncontrolled mode.
+     */
+    defaultValue?: Input.Props['defaultValue'];
+    /**
+     * The value to use in controlled mode.
+     */
+    value?: Input.Props['value'];
+    /**
+     * The size of the field.
+     */
+    size?: Exclude<InputLayoutProps['size'], 'small'>;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,UAAU,GAAG,IAAI,CAC5B,cAAc,CAAE,OAAO,KAAK,CAAE,EAC9B,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAClE,GACA,IAAI,CAAE,gBAAgB,EAAE,QAAQ,GAAG,QAAQ,CAAE,GAAG;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG;IACH;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,KAAK,CAAE,MAAM,CAAE,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,KAAK,CAAE,cAAc,CAAE,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAE,OAAO,CAAE,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAE,gBAAgB,CAAE,MAAM,CAAE,EAAE,OAAO,CAAE,CAAC;CACtD,CAAC"}

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"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/build-types/form/primitives/input-layout/index.d.ts

@@ -0,0 +1,4 @@
+export declare const InputLayout: import("react").ForwardRefExoticComponent<import("./types").InputLayoutProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Slot: import("react").ForwardRefExoticComponent<import("./types").InputLayoutSlotProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/input-layout/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW;;CAErB,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { InputLayoutProps } from './types';
+/**
+ * A low-level component that handles the visual layout of an input-like field,
+ * including disabled states and standard prefix/suffix slots.
+ */
+export declare const InputLayout: import("react").ForwardRefExoticComponent<InputLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=input-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-layout.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/input-layout/input-layout.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGhD;;;GAGG;AACH,eAAO,MAAM,WAAW,6GAqCvB,CAAC"}

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

@@ -0,0 +1,6 @@
+import type { InputLayoutSlotProps } from './types';
+/**
+ * A layout helper to add paddings in a prefix or suffix.
+ */
+export declare const InputLayoutSlot: import("react").ForwardRefExoticComponent<InputLayoutSlotProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=slot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/input-layout/slot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAGpD;;GAEG;AACH,eAAO,MAAM,eAAe,iHA2BzB,CAAC"}

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { InputLayout } from '../../../..';
+declare const meta: Meta<typeof InputLayout>;
+export default meta;
+type Story = StoryObj<typeof InputLayout>;
+export declare const Default: Story;
+/**
+ * By default, the `prefix` and `suffix` slots are rendered with no padding.
+ */
+export declare const WithPrefix: Story;
+/**
+ * The `InputLayout.Slot` component can be used to add standard padding in
+ * the `prefix` or `suffix` slot.
+ *
+ * The `padding="minimal"` setting will work best when the slot content is a button or icon.
+ */
+export declare const WithPaddedPrefix: Story;
+export declare const Compact: Story;
+/**
+ * The `small` size is intended only for rare cases like the trigger
+ * button of a low-profile `select` element.
+ */
+export declare const Small: Story;
+//# sourceMappingURL=index.story.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/input-layout/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAMnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,WAAW,CAAE,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,41 @@
+export interface InputLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix'> {
+    /**
+     * Whether the field should be visually styled as disabled.
+     */
+    visuallyDisabled?: boolean;
+    /**
+     * The size of the field.
+     *
+     * @default 'default'
+     */
+    size?: 'default' | 'compact' | 'small';
+    /**
+     * Whether the field should hide the border.
+     */
+    isBorderless?: boolean;
+    /**
+     * Element to render before the input.
+     */
+    prefix?: React.ReactNode;
+    /**
+     * Element to render after the input.
+     */
+    suffix?: React.ReactNode;
+}
+export type InputLayoutSlotType = 'prefix' | 'suffix';
+export interface InputLayoutSlotProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'type'> {
+    /**
+     * The type of the slot.
+     *
+     * When not provided, the type will be automatically inferred from the
+     * `InputLayout` context if the slot is used within a `prefix` or `suffix`.
+     */
+    type?: InputLayoutSlotType;
+    /**
+     * The padding of the slot.
+     *
+     * `minimal` will work best when the slot content is a button or icon.
+     */
+    padding?: 'default' | 'minimal';
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/input-layout/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAChB,SAAQ,IAAI,CAAE,KAAK,CAAC,cAAc,CAAE,cAAc,CAAE,EAAE,QAAQ,CAAE;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACvC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtD,MAAM,WAAW,oBAChB,SAAQ,IAAI,CAAE,KAAK,CAAC,cAAc,CAAE,cAAc,CAAE,EAAE,MAAM,CAAE;IAC9D;;;;;OAKG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAChC"}

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

@@ -0,0 +1,14 @@
+import type { IconProps } from './types';
+/**
+ * Renders an SVG icon with a 24px default size.
+ *
+ * If no `fill` colors are explicitly set on the icon itself, it will be rendered with a `currentColor` fill.
+ *
+ * ```jsx
+ * import { wordpress } from '@wordpress/icons';
+ *
+ * <Icon icon={ wordpress } />
+ * ```
+ */
+export declare const Icon: import("react").ForwardRefExoticComponent<Omit<IconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/icon/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,kHAcd,CAAC"}

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

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

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

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

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon } from '../index';
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Default: Story;
+/**
+ * Explicit `fill` colors in the icon will be preserved.
+ */
+export declare const WithIntrinsicFillColor: Story;
+//# sourceMappingURL=index.story.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/icon/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAgB5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAYpC,CAAC"}

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

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

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

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

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

@@ -0,0 +1,15 @@
+export type IconProps = React.ComponentProps<'svg'> & {
+    /**
+     * The icon to render, which must be an svg element or an `SVG` from `@wordpress/primitives`.
+     *
+     * In most cases, you should use an icon from
+     * [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).
+     */
+    icon: React.ReactElement<React.ComponentProps<'svg'>>;
+    /**
+     * The size (width and height) of the icon.
+     * @default 24
+     */
+    size?: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/icon/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAE,KAAK,CAAE,GAAG;IACvD;;;;;OAKG;IACH,IAAI,EAAE,KAAK,CAAC,YAAY,CAAE,KAAK,CAAC,cAAc,CAAE,KAAK,CAAE,CAAE,CAAC;IAC1D;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC"}

package/build-types/index.d.ts

@@ -1,2 +1,8 @@
+export * from './badge';
 export * from './box';
+export * from './button';
+export * from './form/primitives';
+export * from './icon';
+export * from './stack';
+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,OAAO,CAAC"}
+{"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,cAAc,mBAAmB,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stack/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/stack/stack.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAoBf,CAAC"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/stack/stack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAmBf,CAAC"}

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

@@ -1,14 +1,4 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryObj } from '@storybook/react';
-/**
- * WordPress dependencies
- */
-import '@wordpress/theme/design-tokens.css';
-/**
- * Internal dependencies
- */
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Stack } from '../index';
 declare const meta: Meta<typeof Stack>;
 export default meta;

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,oCAAoC,CAAC;AAE5C;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAI7B,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,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;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"}

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/build-types/visually-hidden/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/build-types/visually-hidden/stories/index.story.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { VisuallyHidden } from '../';
+declare const meta: Meta<typeof VisuallyHidden>;
+export default meta;
+type Story = StoryObj<typeof VisuallyHidden>;
+export declare const Default: Story;
+//# sourceMappingURL=index.story.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CAGtC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,cAAc,CAAE,CAAC;AAE/C,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/build-types/visually-hidden/test/visually-hidden.test.d.ts

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

package/build-types/visually-hidden/test/visually-hidden.test.d.ts.map

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

package/build-types/visually-hidden/types.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from '../utils/types';
+export interface VisuallyHiddenProps extends ComponentProps<'div'> {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/visually-hidden/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAE,KAAK,CAAE;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/build-types/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,7 @@
+import type { VisuallyHiddenProps } from './types';
+/**
+ * Visually hides content while keeping it accessible to screen readers.
+ * Useful when providing context that's only meaningful to assistive technology.
+ */
+export declare const VisuallyHidden: import("react").ForwardRefExoticComponent<VisuallyHiddenProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=visually-hidden.d.ts.map

package/build-types/visually-hidden/visually-hidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/visually-hidden.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD;;;GAGG;AACH,eAAO,MAAM,cAAc,gHAa1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,13 +22,20 @@
 		"node": ">=20.10.0",
 		"npm": ">=10.2.3"
 	},
-	"main": "build/index.js",
-	"module": "build-module/index.js",
+	"files": [
+		"src",
+		"build",
+		"build-module",
+		"build-types",
+		"*.md"
+	],
+	"main": "build/index.cjs",
+	"module": "build-module/index.mjs",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
-			"import": "./build-module/index.js",
-			"default": "./build/index.js"
+			"import": "./build-module/index.mjs",
+			"default": "./build/index.cjs"
 		},
 		"./package.json": "./package.json"
 	},
@@ -36,12 +43,22 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/element": "^6.37.0",
-		"@wordpress/private-apis": "^1.37.0",
+		"@base-ui/react": "^1.0.0",
+		"@wordpress/a11y": "^4.38.0",
+		"@wordpress/element": "^6.38.0",
+		"@wordpress/i18n": "^6.11.0",
+		"@wordpress/icons": "^11.5.0",
+		"@wordpress/primitives": "^4.38.0",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
-		"@wordpress/theme": "^0.4.0"
+		"@storybook/addon-docs": "^10.1.11",
+		"@storybook/react-vite": "^10.1.11",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@types/jest": "^29.5.14",
+		"@types/node": "^20.17.10",
+		"@wordpress/theme": "^0.5.0",
+		"storybook": "^10.1.11"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -50,5 +67,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
+	"gitHead": "50c4c0f51e4797c217946ce42adfaa5eb026f33f"
 }

package/src/badge/badge.tsx

@@ -0,0 +1,88 @@
+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',
+			};
+	}
+};
+
+/**
+ * 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-sm)',
+				fontWeight: 'var(--wpds-font-weight-regular)',
+				lineHeight: 'var(--wpds-font-line-height-xs)',
+				...props.style,
+			} }
+			ref={ ref }
+		>
+			{ children }
+		</Box>
+	);
+} );

package/src/badge/index.ts

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