@fluentui/react-swatch-picker 0.0.0-nightly-20240517-0405.1

package/CHANGELOG.md

@@ -0,0 +1,136 @@
+# Change Log - @fluentui/react-swatch-picker
+
+This log was last generated on Fri, 17 May 2024 04:20:50 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20240517-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v0.0.0-nightly-20240517-0405.1)
+
+Fri, 17 May 2024 04:20:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.6.0..@fluentui/react-swatch-picker_v0.0.0-nightly-20240517-0405.1)
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240517-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/4c363b45d0336c09595c7855916edb8be1147f90) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240517-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/4c363b45d0336c09595c7855916edb8be1147f90) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240517-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/4c363b45d0336c09595c7855916edb8be1147f90) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20240517-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/4c363b45d0336c09595c7855916edb8be1147f90) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20240517-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/4c363b45d0336c09595c7855916edb8be1147f90) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20240517-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/4c363b45d0336c09595c7855916edb8be1147f90) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20240517-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/4c363b45d0336c09595c7855916edb8be1147f90) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240517-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/4c363b45d0336c09595c7855916edb8be1147f90) by beachball)
+
+## [0.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.6.0)
+
+Thu, 16 May 2024 09:25:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.5.0..@fluentui/react-swatch-picker-preview_v0.6.0)
+
+### Minor changes
+
+- feat(react-swatch-picker): added contrast ratio utils ([PR #31358](https://github.com/microsoft/fluentui/pull/31358) by vkozlova@microsoft.com)
+
+### Patches
+
+-  chore: Upgrade react-icons version to 2.0.239 to pick up provider export map fix. ([PR #31287](https://github.com/microsoft/fluentui/pull/31287) by ololubek@microsoft.com)
+
+## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.5.0)
+
+Mon, 13 May 2024 12:34:20 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.3..@fluentui/react-swatch-picker-preview_v0.5.0)
+
+### Minor changes
+
+- feat: Add missing SwatchPicker context exports. ([PR #31328](https://github.com/microsoft/fluentui/pull/31328) by estebanmu@microsoft.com)
+
+## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.3)
+
+Thu, 09 May 2024 19:35:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.2..@fluentui/react-swatch-picker-preview_v0.4.3)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.21.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+
+## [0.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.2)
+
+Mon, 06 May 2024 12:55:02 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.1..@fluentui/react-swatch-picker-preview_v0.4.2)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.1.59 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.37 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.18.0 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-tabster to v9.21.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-utilities to v9.18.8 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+
+## [0.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.1)
+
+Thu, 02 May 2024 11:36:38 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.0..@fluentui/react-swatch-picker-preview_v0.4.1)
+
+### Patches
+
+- chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com)
+- Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+
+## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.0)
+
+Tue, 23 Apr 2024 08:17:48 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.3.0..@fluentui/react-swatch-picker-preview_v0.4.0)
+
+### Minor changes
+
+- fix: BREAKING CHANGE - api changes and fixes ([PR #31097](https://github.com/microsoft/fluentui/pull/31097) by vkozlova@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.58 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.36 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-tabster to v9.20.1 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-utilities to v9.18.7 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+
+## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.3.0)
+
+Wed, 17 Apr 2024 21:53:58 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.2.1..@fluentui/react-swatch-picker-preview_v0.3.0)
+
+### Minor changes
+
+- feat(react-swatch-picker): Added EmptySwatch component ([PR #30953](https://github.com/microsoft/fluentui/pull/30953) by vkozlova@microsoft.com)
+- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+
+### Patches
+
+- fix(react-swatch-picker): colors in HC mode ([PR #31014](https://github.com/microsoft/fluentui/pull/31014) by vkozlova@microsoft.com)
+- fix(react-swatch-picker): a11y attrs for ImageSwatch ([PR #31060](https://github.com/microsoft/fluentui/pull/31060) by vkozlova@microsoft.com)
+- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
+
+## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.2.1)
+
+Tue, 02 Apr 2024 09:48:00 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.2.0..@fluentui/react-swatch-picker-preview_v0.2.1)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.1.57 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.2.0)
+
+Thu, 28 Mar 2024 10:43:54 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.1.0..@fluentui/react-swatch-picker-preview_v0.2.0)
+
+### Minor changes
+
+- feat(react-swatch-picker): changed API in rendering utils ([PR #30868](https://github.com/microsoft/fluentui/pull/30868) by vkozlova@microsoft.com)
+
+## [0.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.1.0)
+
+Wed, 27 Mar 2024 10:29:33 GMT
+
+### Minor changes
+
+- 'feat: release react-swatch-picker to unstable ([PR #30881](https://github.com/microsoft/fluentui/pull/30881) by vkozlova@microsoft.com)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-swatch-picker-preview
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,61 @@
+# @fluentui/react-swatch-picker
+
+**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+The SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.
+The SwatchPicker can be integrated within a popover or used as a standalone feature.
+
+## Usage
+
+To import React SwatchPicker components:
+
+```tsx
+import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';
+```
+
+Simple example of SwatchPicker Usage:
+
+```tsx
+import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';
+
+export const App = () => {
+  const [selectedValue, setSelectedValue] = React.useState('00B053');
+  const [selectedColor, setSelectedColor] = React.useState('#00B053');
+  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {
+    setSelectedValue(data.selectedValue);
+    setSelectedColor(data.selectedColor);
+  };
+
+  return (
+    <>
+      <SwatchPicker aria-label="SwatchPicker default" selectedValue={selectedValue} onSelectionChange={handleSelect}>
+        <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />
+        <ColorSwatch color="#FFC12E" value="FFC12E" aria-label="orange" />
+        <ColorSwatch color="#FEFF37" value="FEFF37" aria-label="yellow" />
+        <ColorSwatch disabled color="#90D057" value="90D057" aria-label="light green" />
+        <ColorSwatch color="#00B053" value="00B053" aria-label="green" />
+        <ColorSwatch color="#00AFED" value="00AFED" aria-label="light blue" />
+        <ColorSwatch color="#006EBD" value="006EBD" aria-label="blue" />
+        <ColorSwatch color="#011F5E" value="011F5E" aria-label="dark blue" />
+        <ColorSwatch color="#712F9E" value="712F9E" aria-label="purple" />
+      </SwatchPicker>
+
+      <div
+        style={{
+          backgroundColor: selectedColor,
+        }}
+      />
+    </>
+  );
+};
+```
+
+## Specification
+
+See the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.
+
+## API
+
+For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).

package/dist/index.d.ts

@@ -0,0 +1,346 @@
+/// <reference types="react" />
+
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * ColorSwatch component is used to render a colors, icons and gradients.
+ */
+export declare const ColorSwatch: ForwardRefComponent<ColorSwatchProps>;
+
+export declare const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots>;
+
+/**
+ * ColorSwatch Props
+ */
+export declare type ColorSwatchProps = ComponentProps<ColorSwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'> & {
+    /**
+     * Border color when contrast is low
+     */
+    borderColor?: string;
+    /**
+     * Swatch color
+     */
+    color: string;
+    /**
+     * Whether the swatch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Swatch value
+     */
+    value: string;
+};
+
+export declare type ColorSwatchSlots = {
+    root: NonNullable<Slot<'button'>>;
+    icon?: Slot<'span'>;
+    disabledIcon?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering ColorSwatch
+ */
+export declare type ColorSwatchState = ComponentState<ColorSwatchSlots> & Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {
+    selected: boolean;
+};
+
+/**
+ * EmptySwatch component is used for adding new color swatches.
+ */
+export declare const EmptySwatch: ForwardRefComponent<EmptySwatchProps>;
+
+export declare const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots>;
+
+/**
+ * EmptySwatch Props
+ */
+export declare type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;
+
+export declare type EmptySwatchSlots = {
+    root: Slot<'button'>;
+};
+
+/**
+ * State used in rendering EmptySwatch
+ */
+export declare type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;
+
+/**
+ * ImageSwatch component is used to render an images, patterns and textures.
+ */
+export declare const ImageSwatch: ForwardRefComponent<ImageSwatchProps>;
+
+export declare const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots>;
+
+/**
+ * ImageSwatch Props
+ */
+export declare type ImageSwatchProps = ComponentProps<ImageSwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'> & {
+    /**
+     * Swatch color
+     */
+    src: string;
+    /**
+     * Swatch value
+     */
+    value: string;
+};
+
+export declare type ImageSwatchSlots = {
+    root: Slot<'button'>;
+};
+
+/**
+ * State used in rendering ImageSwatch
+ */
+export declare type ImageSwatchState = ComponentState<ImageSwatchSlots> & Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {
+    selected: boolean;
+};
+
+/**
+ * Render the final JSX of ColorSwatch
+ */
+export declare const renderColorSwatch_unstable: (state: ColorSwatchState) => JSX.Element;
+
+/**
+ * Render the final JSX of EmptySwatch
+ */
+export declare const renderEmptySwatch_unstable: (state: EmptySwatchState) => JSX.Element;
+
+/**
+ * Render the final JSX of ImageSwatch
+ */
+export declare const renderImageSwatch_unstable: (state: ImageSwatchState) => JSX.Element;
+
+/**
+ * Render the final JSX of SwatchPicker
+ */
+export declare const renderSwatchPicker_unstable: (state: SwatchPickerState, contextValues: SwatchPickerContextValues) => JSX.Element;
+
+export declare const renderSwatchPickerGrid: (props: SwatchPickerGridProps) => JSX.Element[];
+
+/**
+ * Render the final JSX of SwatchPickerRow
+ */
+export declare const renderSwatchPickerRow_unstable: (state: SwatchPickerRowState) => JSX.Element;
+
+export declare const swatchCSSVars: {
+    color: string;
+    borderColor: string;
+};
+
+/**
+ * SwatchPicker component - TODO: add more docs
+ */
+export declare const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
+
+export declare const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots>;
+
+export declare const swatchPickerContextDefaultValue: SwatchPickerContextValue;
+
+/**
+ * The context through which individual color controls communicate with the picker.
+ */
+export declare type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {
+    /**
+     * Whether layout is grid.
+     */
+    isGrid: boolean;
+    /**
+     * @internal
+     * Callback used by ColorSwatch to request a change on it's selected state
+     * Should be used to select ColorSwatch
+     */
+    requestSelectionChange: (event: React_2.MouseEvent<HTMLButtonElement>, data: {
+        selectedValue: string;
+        selectedSwatch: string;
+    }) => void;
+};
+
+export declare type SwatchPickerContextValues = {
+    swatchPicker: SwatchPickerContextValue;
+};
+
+export declare type SwatchPickerGridProps = {
+    items: SwatchProps[];
+    columnCount: number;
+    renderRow?: (props: {
+        children: JSX.Element[];
+        rowId: string | number;
+    }) => JSX.Element;
+    renderSwatch?: (item: SwatchProps) => JSX.Element;
+};
+
+export declare type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;
+
+export declare type SwatchPickerOnSelectionChangeData = EventData<'click', React_2.MouseEvent<HTMLButtonElement>> & {
+    selectedValue: string;
+    selectedSwatch: string;
+};
+
+/**
+ * SwatchPicker Props
+ */
+export declare type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {
+    /**
+     * Default selected value
+     */
+    defaultSelectedValue?: string;
+    /**
+     * Whether SwatchPicker is row or grid
+     */
+    layout?: 'row' | 'grid';
+    /**
+     * Triggers a callback when the value has been changed
+     */
+    onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;
+    /**
+     * Controlled selected value
+     */
+    selectedValue?: string;
+    /**
+     * Swatch size
+     * @defaultvalue 'medium'
+     */
+    size?: 'extra-small' | 'small' | 'medium' | 'large';
+    /**
+     * Swatch shape
+     * @defaultvalue 'square'
+     */
+    shape?: 'rounded' | 'square' | 'circular';
+    /**
+     * Spacing between swatches
+     * @defaultvalue 'medium'
+     */
+    spacing?: 'small' | 'medium';
+};
+
+export declare const SwatchPickerProvider: React_2.Provider<SwatchPickerContextValue> & React_2.FC<React_2.ProviderProps<SwatchPickerContextValue>>;
+
+/**
+ * SwatchPickerRow component is used to render a row of swatches.
+ */
+export declare const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps>;
+
+export declare const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots>;
+
+/**
+ * SwatchPickerRow Props
+ */
+export declare type SwatchPickerRowProps = ComponentProps<SwatchPickerRowSlots>;
+
+export declare type SwatchPickerRowSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering SwatchPickerRow
+ */
+export declare type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;
+
+export declare type SwatchPickerSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering SwatchPicker
+ */
+export declare type SwatchPickerState = ComponentState<SwatchPickerSlots> & SwatchPickerContextValue & Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {
+    isGrid: boolean;
+};
+
+export declare type SwatchProps = ImageSwatchProps | ColorSwatchProps;
+
+/**
+ * Create the state required to render ColorSwatch.
+ *
+ * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
+ * before being passed to renderColorSwatch_unstable.
+ *
+ * @param props - props from this instance of ColorSwatch
+ * @param ref - reference to root HTMLButtonElement of ColorSwatch
+ */
+export declare const useColorSwatch_unstable: (props: ColorSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchState;
+
+/**
+ * Apply styling to the ColorSwatch slots based on the state
+ */
+export declare const useColorSwatchStyles_unstable: (state: ColorSwatchState) => ColorSwatchState;
+
+/**
+ * Create the state required to render EmptySwatch.
+ *
+ * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,
+ * before being passed to renderEmptySwatch_unstable.
+ *
+ * @param props - props from this instance of EmptySwatch
+ * @param ref - reference to root HTMLDivElement of EmptySwatch
+ */
+export declare const useEmptySwatch_unstable: (props: EmptySwatchProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchState;
+
+/**
+ * Apply styling to the EmptySwatch slots based on the state
+ */
+export declare const useEmptySwatchStyles_unstable: (state: EmptySwatchState) => EmptySwatchState;
+
+/**
+ * Create the state required to render ImageSwatch.
+ *
+ * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,
+ * before being passed to renderImageSwatch_unstable.
+ *
+ * @param props - props from this instance of ImageSwatch
+ * @param ref - reference to root HTMLDivElement of ImageSwatch
+ */
+export declare const useImageSwatch_unstable: (props: ImageSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchState;
+
+/**
+ * Apply styling to the ImageSwatch slots based on the state
+ */
+export declare const useImageSwatchStyles_unstable: (state: ImageSwatchState) => ImageSwatchState;
+
+/**
+ * Create the state required to render SwatchPicker.
+ *
+ * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,
+ * before being passed to renderSwatchPicker_unstable.
+ *
+ * @param props - props from this instance of SwatchPicker
+ * @param ref - reference to root HTMLElement of SwatchPicker
+ */
+export declare const useSwatchPicker_unstable: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;
+
+export declare const useSwatchPickerContextValue_unstable: <T>(selector: ContextSelector<SwatchPickerContextValue, T>) => T;
+
+export declare const useSwatchPickerContextValues: (state: SwatchPickerState) => SwatchPickerContextValues;
+
+/**
+ * Create the state required to render SwatchPickerRow.
+ *
+ * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,
+ * before being passed to renderSwatchPickerRow_unstable.
+ *
+ * @param props - props from this instance of SwatchPickerRow
+ * @param ref - reference to root HTMLDivElement of SwatchPickerRow
+ */
+export declare const useSwatchPickerRow_unstable: (props: SwatchPickerRowProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowState;
+
+/**
+ * Apply styling to the SwatchPickerRow slots based on the state
+ */
+export declare const useSwatchPickerRowStyles_unstable: (state: SwatchPickerRowState) => SwatchPickerRowState;
+
+/**
+ * Apply styling to the SwatchPicker slots based on the state
+ */
+export declare const useSwatchPickerStyles_unstable: (state: SwatchPickerState) => SwatchPickerState;
+
+export { }

package/lib/ColorSwatch.js

@@ -0,0 +1 @@
+export * from './components/ColorSwatch/index';

package/lib/ColorSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ColorSwatch.ts"],"sourcesContent":["export * from './components/ColorSwatch/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}

package/lib/EmptySwatch.js

@@ -0,0 +1 @@
+export * from './components/EmptySwatch/index';

package/lib/EmptySwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["EmptySwatch.ts"],"sourcesContent":["export * from './components/EmptySwatch/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}

package/lib/ImageSwatch.js

@@ -0,0 +1 @@
+export * from './components/ImageSwatch/index';

package/lib/ImageSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ImageSwatch.ts"],"sourcesContent":["export * from './components/ImageSwatch/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}

package/lib/SwatchPicker.js

@@ -0,0 +1 @@
+export * from './components/SwatchPicker/index';

package/lib/SwatchPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SwatchPicker.ts"],"sourcesContent":["export * from './components/SwatchPicker/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/SwatchPickerRow.js

@@ -0,0 +1 @@
+export * from './components/SwatchPickerRow/index';

package/lib/SwatchPickerRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SwatchPickerRow.ts"],"sourcesContent":["export * from './components/SwatchPickerRow/index';\n"],"names":[],"mappings":"AAAA,cAAc,qCAAqC"}

package/lib/components/ColorSwatch/ColorSwatch.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useColorSwatch_unstable } from './useColorSwatch';
+import { renderColorSwatch_unstable } from './renderColorSwatch';
+import { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * ColorSwatch component is used to render a colors, icons and gradients.
+ */ export const ColorSwatch = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useColorSwatch_unstable(props, ref);
+    useColorSwatchStyles_unstable(state);
+    useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state);
+    return renderColorSwatch_unstable(state);
+});
+ColorSwatch.displayName = 'ColorSwatch';

package/lib/components/ColorSwatch/ColorSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ColorSwatch.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSwatch_unstable } from './useColorSwatch';\nimport { renderColorSwatch_unstable } from './renderColorSwatch';\nimport { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\nimport type { ColorSwatchProps } from './ColorSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSwatch component is used to render a colors, icons and gradients.\n */\nexport const ColorSwatch: ForwardRefComponent<ColorSwatchProps> = React.forwardRef((props, ref) => {\n  const state = useColorSwatch_unstable(props, ref);\n\n  useColorSwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state);\n\n  return renderColorSwatch_unstable(state);\n});\n\nColorSwatch.displayName = 'ColorSwatch';\n"],"names":["React","useColorSwatch_unstable","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useCustomStyleHook_unstable","ColorSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/ColorSwatch/ColorSwatch.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/ColorSwatch/ColorSwatch.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAyCI"}

package/lib/components/ColorSwatch/index.js

@@ -0,0 +1,5 @@
+export * from './ColorSwatch';
+export * from './ColorSwatch.types';
+export * from './renderColorSwatch';
+export * from './useColorSwatch';
+export * from './useColorSwatchStyles.styles';

package/lib/components/ColorSwatch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ColorSwatch';\nexport * from './ColorSwatch.types';\nexport * from './renderColorSwatch';\nexport * from './useColorSwatch';\nexport * from './useColorSwatchStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

package/lib/components/ColorSwatch/renderColorSwatch.js

@@ -0,0 +1,14 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of ColorSwatch
+ */ export const renderColorSwatch_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.root.children,
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.disabled && state.disabledIcon && /*#__PURE__*/ _jsx(state.disabledIcon, {})
+        ]
+    });
+};

package/lib/components/ColorSwatch/renderColorSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderColorSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ColorSwatchState, ColorSwatchSlots } from './ColorSwatch.types';\n\n/**\n * Render the final JSX of ColorSwatch\n */\nexport const renderColorSwatch_unstable = (state: ColorSwatchState) => {\n  assertSlots<ColorSwatchSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.icon && <state.icon />}\n      {state.disabled && state.disabledIcon && <state.disabledIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorSwatch_unstable","state","root","children","icon","disabled","disabledIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,QAAQ,IAAIJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;AAGlE,EAAE"}