@wordpress/components 23.3.6 → 23.3.7

package/build-types/dimension-control/types.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import type { IconType } from '../icon';
+export type Size = {
+    /**
+     * Human-readable name of the size.
+     */
+    name: string;
+    /**
+     * Short unique identifying name of the size.
+     */
+    slug: string;
+};
+export type DimensionControlProps = {
+    /**
+     * Label for the control.
+     */
+    label: string;
+    /**
+     * An array of sizes to choose from.
+     *
+     * @default DEFAULT_SIZES
+     *
+     * @see packages/components/src/dimension-control/sizes.ts
+     */
+    sizes?: Size[];
+    /**
+     * Optional icon rendered in front on the label.
+     */
+    icon?: IconType;
+    /**
+     * Used to externally control the current value of the control.
+     */
+    value?: string;
+    /**
+     * Function called with the control's internal state changes. The `value` property is equal to a given size slug.
+     */
+    onChange?: (value?: string) => void;
+    /**
+     * CSS class applied to `SelectControl`.
+     *
+     * @default ''
+     */
+    className?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/dimension-control/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/dimension-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG;IAClB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,CAAC,EAAE,MAAM,KAAM,IAAI,CAAC;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}

package/build-types/duotone-picker/color-list-picker/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ColorListPickerProps } from './types';
+declare function ColorListPicker({ colors, labels, value, disableCustomColors, enableAlpha, onChange, }: ColorListPickerProps): JSX.Element;
+export default ColorListPicker;
+//# sourceMappingURL=index.d.ts.map

package/build-types/duotone-picker/color-list-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/duotone-picker/color-list-picker/index.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAoB,MAAM,SAAS,CAAC;AA4CtE,iBAAS,eAAe,CAAE,EACzB,MAAM,EACN,MAAM,EACN,KAAU,EACV,mBAAmB,EACnB,WAAW,EACX,QAAQ,GACR,EAAE,oBAAoB,eAqBtB;AAED,eAAe,eAAe,CAAC"}

package/build-types/duotone-picker/color-list-picker/types.d.ts

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+export type ColorListPickerProps = {
+    /**
+     * A list of predefined colors. Each color is an object with a `name` and a
+     * `color` value.
+     * The `name` is a string used to identify the color in the UI.
+     * The `color` is a valid CSS color string.
+     */
+    colors: Array<{
+        name: string;
+        color: NonNullable<CSSProperties['color']>;
+    }>;
+    /**
+     * A list of labels for each of the options displayed in the UI.
+     */
+    labels: Array<string>;
+    /**
+     * An array containing the currently selected colors.
+     */
+    value?: Array<string>;
+    /**
+     * Controls whether the custom color picker is displayed.
+     */
+    disableCustomColors?: boolean;
+    /**
+     * Controls whether the ColorPalette should show an alpha channel control.
+     */
+    enableAlpha?: boolean;
+    /**
+     * A function that receives the updated color value.
+     */
+    onChange: (newValue: Array<string | undefined>) => void;
+};
+export type ColorOptionProps = Pick<ColorListPickerProps, 'colors' | 'disableCustomColors' | 'enableAlpha'> & {
+    label: ColorListPickerProps['labels'][number];
+    value: string | undefined;
+    onChange: (newValue: string | undefined) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/duotone-picker/color-list-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/duotone-picker/color-list-picker/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,oBAAoB,GAAG;IAClC;;;;;OAKG;IACH,MAAM,EAAE,KAAK,CAAE;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,WAAW,CAAE,aAAa,CAAE,OAAO,CAAE,CAAE,CAAC;KAC/C,CAAE,CAAC;IACJ;;OAEG;IACH,MAAM,EAAE,KAAK,CAAE,MAAM,CAAE,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAE,MAAM,CAAE,CAAC;IACxB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,CAAE,QAAQ,EAAE,KAAK,CAAE,MAAM,GAAG,SAAS,CAAE,KAAM,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAClC,oBAAoB,EACpB,QAAQ,GAAG,qBAAqB,GAAG,aAAa,CAChD,GAAG;IACH,KAAK,EAAE,oBAAoB,CAAE,QAAQ,CAAE,CAAE,MAAM,CAAE,CAAC;IAClD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;CACnD,CAAC"}

package/build-types/duotone-picker/custom-duotone-bar.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export default function CustomDuotoneBar({ value, onChange, }: {
+    value?: string[];
+    onChange: (value?: string[]) => void;
+}): JSX.Element;
+//# sourceMappingURL=custom-duotone-bar.d.ts.map

package/build-types/duotone-picker/custom-duotone-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-duotone-bar.d.ts","sourceRoot":"","sources":["../../src/duotone-picker/custom-duotone-bar.tsx"],"names":[],"mappings":";AAaA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAE,EACzC,KAAK,EACL,QAAQ,GACR,EAAE;IACF,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAM,IAAI,CAAC;CACvC,eAiBA"}

package/build-types/duotone-picker/duotone-picker.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import type { DuotonePickerProps } from './types';
+/**
+ * ```jsx
+ * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const DUOTONE_PALETTE = [
+ * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
+ * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
+ * ];
+ *
+ * const COLOR_PALETTE = [
+ * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
+ * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+ * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
+ * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+ * ];
+ *
+ * const Example = () => {
+ * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
+ * 	return (
+ * 		<>
+ * 			<DuotonePicker
+ * 				duotonePalette={ DUOTONE_PALETTE }
+ * 				colorPalette={ COLOR_PALETTE }
+ * 				value={ duotone }
+ * 				onChange={ setDuotone }
+ * 			/>
+ * 			<DuotoneSwatch values={ duotone } />
+ * 		</>
+ * 	);
+ * };
+ * ```
+ */
+declare function DuotonePicker({ clearable, unsetable, colorPalette, duotonePalette, disableCustomColors, disableCustomDuotone, value, onChange, }: DuotonePickerProps): JSX.Element;
+export default DuotonePicker;
+//# sourceMappingURL=duotone-picker.d.ts.map

package/build-types/duotone-picker/duotone-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"duotone-picker.d.ts","sourceRoot":"","sources":["../../src/duotone-picker/duotone-picker.tsx"],"names":[],"mappings":";AAqBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,aAAa,CAAE,EACvB,SAAgB,EAChB,SAAgB,EAChB,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,KAAK,EACL,QAAQ,GACR,EAAE,kBAAkB,eA2GpB;AAED,eAAe,aAAa,CAAC"}

package/build-types/duotone-picker/duotone-swatch.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { DuotoneSwatchProps } from './types';
+declare function DuotoneSwatch({ values }: DuotoneSwatchProps): JSX.Element;
+export default DuotoneSwatch;
+//# sourceMappingURL=duotone-swatch.d.ts.map

package/build-types/duotone-picker/duotone-swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"duotone-swatch.d.ts","sourceRoot":"","sources":["../../src/duotone-picker/duotone-swatch.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,iBAAS,aAAa,CAAE,EAAE,MAAM,EAAE,EAAE,kBAAkB,eAQrD;AAED,eAAe,aAAa,CAAC"}

package/build-types/duotone-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DuotonePicker } from './duotone-picker';
+export { default as DuotoneSwatch } from './duotone-swatch';
+//# sourceMappingURL=index.d.ts.map

package/build-types/duotone-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/duotone-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/build-types/duotone-picker/stories/duotone-picker.d.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { DuotonePicker } from '..';
+declare const meta: ComponentMeta<typeof DuotonePicker>;
+export default meta;
+export declare const Default: ComponentStory<typeof DuotonePicker>;
+//# sourceMappingURL=duotone-picker.d.ts.map

package/build-types/duotone-picker/stories/duotone-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"duotone-picker.d.ts","sourceRoot":"","sources":["../../../src/duotone-picker/stories/duotone-picker.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAGnC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,aAAa,CAW9C,CAAC;AACF,eAAe,IAAI,CAAC;AAwCpB,eAAO,MAAM,OAAO,sCAAsB,CAAC"}

package/build-types/duotone-picker/stories/duotone-swatch.d.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { DuotoneSwatch } from '..';
+declare const meta: ComponentMeta<typeof DuotoneSwatch>;
+export default meta;
+export declare const Default: ComponentStory<typeof DuotoneSwatch>;
+export declare const SingleColor: ComponentStory<typeof DuotoneSwatch>;
+export declare const Null: ComponentStory<typeof DuotoneSwatch>;
+//# sourceMappingURL=duotone-swatch.d.ts.map

package/build-types/duotone-picker/stories/duotone-swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"duotone-swatch.d.ts","sourceRoot":"","sources":["../../../src/duotone-picker/stories/duotone-swatch.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,aAAa,CAO9C,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,sCAAsB,CAAC;AAK3C,eAAO,MAAM,WAAW,sCAAsB,CAAC;AAK/C,eAAO,MAAM,IAAI,sCAAsB,CAAC"}

package/build-types/duotone-picker/types.d.ts

@@ -0,0 +1,60 @@
+export type DuotonePickerProps = {
+    /**
+     * Whether there should be a button to clear the duotone value.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Whether there should be an `unset` option.
+     *
+     * @default true
+     */
+    unsetable?: boolean;
+    /**
+     * Array of color presets of the form `{ color: '#000000', name: 'Black', slug: 'black' }`.
+     */
+    colorPalette: Color[];
+    /**
+     * Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }`.
+     */
+    duotonePalette: DuotoneColor[];
+    /**
+     * Whether custom colors should be disabled.
+     *
+     * @default false
+     */
+    disableCustomColors?: boolean;
+    /**
+     * Whether custom duotone values should be disabled.
+     *
+     * @default false
+     */
+    disableCustomDuotone?: boolean;
+    /**
+     * An array of colors for the duotone effect.
+     */
+    value?: string[] | 'unset';
+    /**
+     * Callback which is called when the duotone colors change.
+     */
+    onChange: (value: DuotonePickerProps['value'] | undefined) => void;
+};
+type Color = {
+    color: string;
+    name: string;
+    slug: string;
+};
+type DuotoneColor = {
+    colors: string[];
+    name: string;
+    slug: string;
+};
+export type DuotoneSwatchProps = {
+    /**
+     * An array of colors to show or `null` to show the placeholder swatch icon.
+     */
+    values?: string[] | null;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/build-types/duotone-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/duotone-picker/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB;;OAEG;IACH,cAAc,EAAE,YAAY,EAAE,CAAC;IAC/B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAE,KAAK,EAAE,kBAAkB,CAAE,OAAO,CAAE,GAAG,SAAS,KAAM,IAAI,CAAC;CACvE,CAAC;AAEF,KAAK,KAAK,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,KAAK,YAAY,GAAG;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;CACzB,CAAC"}

package/build-types/duotone-picker/utils.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Internal dependencies
+ */
+import type { DuotonePickerProps } from './types';
+/**
+ * Object representation for a color.
+ *
+ * @typedef {Object} RGBColor
+ * @property {number} r Red component of the color in the range [0,1].
+ * @property {number} g Green component of the color in the range [0,1].
+ * @property {number} b Blue component of the color in the range [0,1].
+ */
+/**
+ * Calculate the brightest and darkest values from a color palette.
+ *
+ * @param palette Color palette for the theme.
+ *
+ * @return Tuple of the darkest color and brightest color.
+ */
+export declare function getDefaultColors(palette: DuotonePickerProps['colorPalette']): string[];
+/**
+ * Generate a duotone gradient from a list of colors.
+ *
+ * @param colors CSS color strings.
+ * @param angle  CSS gradient angle.
+ *
+ * @return  CSS gradient string for the duotone swatch.
+ */
+export declare function getGradientFromCSSColors(colors?: string[], angle?: string): string;
+/**
+ * Convert a color array to an array of color stops.
+ *
+ * @param colors CSS colors array
+ *
+ * @return Color stop information.
+ */
+export declare function getColorStopsFromColors(colors: string[]): {
+    position: number;
+    color: string;
+}[];
+/**
+ * Convert a color stop array to an array colors.
+ *
+ * @param colorStops Color stop information.
+ *
+ * @return CSS colors array.
+ */
+export declare function getColorsFromColorStops(colorStops?: {
+    position: number;
+    color: string;
+}[]): string[];
+//# sourceMappingURL=utils.d.ts.map

package/build-types/duotone-picker/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/duotone-picker/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAIlD;;;;;;;GAOG;AAEH;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,OAAO,EAAE,kBAAkB,CAAE,cAAc,CAAE,YAuB7C;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,GAAE,MAAM,EAAO,EACrB,KAAK,SAAU,UASf;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,MAAM,EAAE,MAAM,EAAE;;;IAKxD;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACtC,UAAU,GAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAO,YAGtD"}

package/build-types/experiments.d.ts

@@ -0,0 +1,4 @@
+export const lock: (object: any, privateData: any) => void;
+export const unlock: (object: any) => any;
+export const experiments: {};
+//# sourceMappingURL=experiments.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"experiments.d.ts","sourceRoot":"","sources":["../src/experiments.js"],"names":[],"mappings":";;AAiBA,6BAA8B"}

package/build-types/flyout/context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @type {import('react').Context<import('./types').Context>}
+ */
+export const FlyoutContext: import('react').Context<import('./types').Context>;
+export function useFlyoutContext(): import("./types").Context;
+//# sourceMappingURL=context.d.ts.map

package/build-types/flyout/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/flyout/context.js"],"names":[],"mappings":"AAKA;;GAEG;AACH,4BAFU,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,SAAS,EAAE,OAAO,CAAC,CAEX;AAC1C,8DAA0D"}

package/build-types/flyout/flyout/component.d.ts

@@ -0,0 +1,21 @@
+export default ConnectedFlyout;
+/**
+ * `Flyout` is a component to render a floating content modal.
+ * It is similar in purpose to a tooltip, but renders content of any sort,
+ * not only simple text.
+ *
+ * @example
+ * ```jsx
+ * import { Button, __experimentalFlyout as Flyout, __experimentalText as } from '@wordpress/components';
+ *
+ * function Example() {
+ * 	return (
+ * 		<Flyout trigger={ <Button>Show/Hide content</Button> }>
+ *			<Text>Code is Poetry</Text>
+ * 		</Flyout>
+ * 	);
+ * }
+ * ```
+ */
+declare const ConnectedFlyout: import("../../ui/context").WordPressComponent<"div", import("../types").Props, false>;
+//# sourceMappingURL=component.d.ts.map

package/build-types/flyout/flyout/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/flyout/flyout/component.js"],"names":[],"mappings":";AA0FA;;;;;;;;;;;;;;;;;GAiBG;AACH,qHAA2D"}