@fluentui/react-swatch-picker 9.5.4 → 9.6.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-swatch-picker
 
-This log was last generated on Wed, 24 Jun 2026 11:03:46 GMT and should not be manually modified.
+<!-- This log was last generated on Tue, 11 Aug 2026 17:16:02 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.6.0)
+
+Tue, 11 Aug 2026 17:16:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.5.4..@fluentui/react-swatch-picker_v9.6.0)
+
+### Minor changes
+
+- feat: expose headless base APIs ([PR #36534](https://github.com/microsoft/fluentui/pull/36534) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-field to v9.5.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.17 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+### Patches
+
+- fix: Move ColorSwatch styling out of the headless base hook. ([PR #36550](https://github.com/microsoft/fluentui/pull/36550) by dmytrokirpa@microsoft.com)
+- Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
+
 ## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.4)
 
-Wed, 24 Jun 2026 11:03:46 GMT 
+Wed, 24 Jun 2026 11:09:57 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.5.3..@fluentui/react-swatch-picker_v9.5.4)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,428 @@
+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 type { JSXElement } 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 type ColorSwatchBaseProps = Omit<ColorSwatchProps, 'size' | 'shape'>;
+
+export declare type ColorSwatchBaseState = Omit<ColorSwatchState, 'size' | 'shape'>;
+
+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 type EmptySwatchBaseProps = ComponentProps<EmptySwatchSlots>;
+
+export declare type EmptySwatchBaseState = ComponentState<EmptySwatchSlots>;
+
+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 type ImageSwatchBaseProps = Omit<ImageSwatchProps, 'size' | 'shape'>;
+
+export declare type ImageSwatchBaseState = Omit<ImageSwatchState, 'size' | 'shape'>;
+
+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: ColorSwatchBaseState) => JSXElement;
+
+/**
+ * Render the final JSX of EmptySwatch
+ */
+export declare const renderEmptySwatch_unstable: (state: EmptySwatchBaseState) => JSXElement;
+
+/**
+ * Render the final JSX of ImageSwatch
+ */
+export declare const renderImageSwatch_unstable: (state: ImageSwatchBaseState) => JSXElement;
+
+/**
+ * Render the final JSX of SwatchPicker
+ */
+export declare const renderSwatchPicker_unstable: (state: SwatchPickerBaseState, contextValues: SwatchPickerContextValues) => JSXElement;
+
+export declare const renderSwatchPickerGrid: (props: SwatchPickerGridProps) => JSXElement[];
+
+/**
+ * Render the final JSX of SwatchPickerRow
+ */
+export declare const renderSwatchPickerRow_unstable: (state: SwatchPickerRowBaseState) => JSXElement;
+
+export declare const swatchCSSVars: {
+    color: string;
+    borderColor: string;
+};
+
+/**
+ * SwatchPicker component - TODO: add more docs
+ */
+export declare const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
+
+export declare type SwatchPickerBaseProps = Omit<SwatchPickerProps, 'size' | 'shape' | 'spacing'>;
+
+export declare type SwatchPickerBaseState = Omit<SwatchPickerState, 'size' | 'shape' | 'spacing'>;
+
+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;
+    /**
+     * Callback used by ColorSwatch to request a change on it's selected state
+     * Should be used to select ColorSwatch
+     *
+     * @internal
+     */
+    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: JSXElement[];
+        rowId: string | number;
+    }) => JSXElement;
+    renderSwatch?: (item: SwatchProps) => JSXElement;
+};
+
+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;
+    /**
+     * Sets the focus behavior for the SwatchPicker.
+     *
+     * `arrow`
+     * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.
+     *
+     * `tab`
+     * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.
+     *
+     * @default 'arrow'
+     */
+    focusMode?: 'arrow' | 'tab';
+    /**
+     * 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 type SwatchPickerRowBaseProps = ComponentProps<SwatchPickerRowSlots>;
+
+export declare type SwatchPickerRowBaseState = ComponentState<SwatchPickerRowSlots>;
+
+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;
+
+/**
+ * Create the basee state required to render unstyled ColorSwatch.
+ *
+ * The returned state can be modified with hooks 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 useColorSwatchBase_unstable: (props: ColorSwatchBaseProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchBaseState;
+
+/**
+ * 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;
+
+/**
+ * Create the base state required to render unstyled EmptySwatch.
+ *
+ * The returned state can be modified with hooks 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 useEmptySwatchBase_unstable: (props: EmptySwatchBaseProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchBaseState;
+
+/**
+ * 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;
+
+/**
+ * Create the base state required to render unstyled ImageSwatch.
+ *
+ * The returned state can be modified with hooks 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 useImageSwatchBase_unstable: (props: ImageSwatchBaseProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchBaseState;
+
+/**
+ * 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;
+
+/**
+ * Create the base state required to render unstyled SwatchPicker.
+ *
+ * The returned state can be modified with hooks 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 useSwatchPickerBase_unstable: (props: SwatchPickerBaseProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerBaseState;
+
+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;
+
+/**
+ * Create the base state required to render unstyled SwatchPickerRow.
+ *
+ * The returned state can be modified with hooks 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 useSwatchPickerRowBase_unstable: (props: SwatchPickerRowBaseProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowBaseState;
+
+/**
+ * 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/dist/index.d.ts

@@ -14,6 +14,10 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const ColorSwatch: ForwardRefComponent<ColorSwatchProps>;
 
+export declare type ColorSwatchBaseProps = Omit<ColorSwatchProps, 'size' | 'shape'>;
+
+export declare type ColorSwatchBaseState = Omit<ColorSwatchState, 'size' | 'shape'>;
+
 export declare const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots>;
 
 /**
@@ -56,6 +60,10 @@ export declare type ColorSwatchState = ComponentState<ColorSwatchSlots> & Pick<C
  */
 export declare const EmptySwatch: ForwardRefComponent<EmptySwatchProps>;
 
+export declare type EmptySwatchBaseProps = ComponentProps<EmptySwatchSlots>;
+
+export declare type EmptySwatchBaseState = ComponentState<EmptySwatchSlots>;
+
 export declare const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots>;
 
 /**
@@ -77,6 +85,10 @@ export declare type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<E
  */
 export declare const ImageSwatch: ForwardRefComponent<ImageSwatchProps>;
 
+export declare type ImageSwatchBaseProps = Omit<ImageSwatchProps, 'size' | 'shape'>;
+
+export declare type ImageSwatchBaseState = Omit<ImageSwatchState, 'size' | 'shape'>;
+
 export declare const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots>;
 
 /**
@@ -107,29 +119,29 @@ export declare type ImageSwatchState = ComponentState<ImageSwatchSlots> & Pick<I
 /**
  * Render the final JSX of ColorSwatch
  */
-export declare const renderColorSwatch_unstable: (state: ColorSwatchState) => JSXElement;
+export declare const renderColorSwatch_unstable: (state: ColorSwatchBaseState) => JSXElement;
 
 /**
  * Render the final JSX of EmptySwatch
  */
-export declare const renderEmptySwatch_unstable: (state: EmptySwatchState) => JSXElement;
+export declare const renderEmptySwatch_unstable: (state: EmptySwatchBaseState) => JSXElement;
 
 /**
  * Render the final JSX of ImageSwatch
  */
-export declare const renderImageSwatch_unstable: (state: ImageSwatchState) => JSXElement;
+export declare const renderImageSwatch_unstable: (state: ImageSwatchBaseState) => JSXElement;
 
 /**
  * Render the final JSX of SwatchPicker
  */
-export declare const renderSwatchPicker_unstable: (state: SwatchPickerState, contextValues: SwatchPickerContextValues) => JSXElement;
+export declare const renderSwatchPicker_unstable: (state: SwatchPickerBaseState, contextValues: SwatchPickerContextValues) => JSXElement;
 
 export declare const renderSwatchPickerGrid: (props: SwatchPickerGridProps) => JSXElement[];
 
 /**
  * Render the final JSX of SwatchPickerRow
  */
-export declare const renderSwatchPickerRow_unstable: (state: SwatchPickerRowState) => JSXElement;
+export declare const renderSwatchPickerRow_unstable: (state: SwatchPickerRowBaseState) => JSXElement;
 
 export declare const swatchCSSVars: {
     color: string;
@@ -141,6 +153,10 @@ export declare const swatchCSSVars: {
  */
 export declare const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
 
+export declare type SwatchPickerBaseProps = Omit<SwatchPickerProps, 'size' | 'shape' | 'spacing'>;
+
+export declare type SwatchPickerBaseState = Omit<SwatchPickerState, 'size' | 'shape' | 'spacing'>;
+
 export declare const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots>;
 
 export declare const swatchPickerContextDefaultValue: SwatchPickerContextValue;
@@ -242,6 +258,10 @@ export declare const SwatchPickerProvider: React_2.Provider<SwatchPickerContextV
  */
 export declare const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps>;
 
+export declare type SwatchPickerRowBaseProps = ComponentProps<SwatchPickerRowSlots>;
+
+export declare type SwatchPickerRowBaseState = ComponentState<SwatchPickerRowSlots>;
+
 export declare const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots>;
 
 /**
@@ -282,6 +302,16 @@ export declare type SwatchProps = ImageSwatchProps | ColorSwatchProps;
  */
 export declare const useColorSwatch_unstable: (props: ColorSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchState;
 
+/**
+ * Create the basee state required to render unstyled ColorSwatch.
+ *
+ * The returned state can be modified with hooks 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 useColorSwatchBase_unstable: (props: ColorSwatchBaseProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchBaseState;
+
 /**
  * Apply styling to the ColorSwatch slots based on the state
  */
@@ -298,6 +328,16 @@ export declare const useColorSwatchStyles_unstable: (state: ColorSwatchState) =>
  */
 export declare const useEmptySwatch_unstable: (props: EmptySwatchProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchState;
 
+/**
+ * Create the base state required to render unstyled EmptySwatch.
+ *
+ * The returned state can be modified with hooks 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 useEmptySwatchBase_unstable: (props: EmptySwatchBaseProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchBaseState;
+
 /**
  * Apply styling to the EmptySwatch slots based on the state
  */
@@ -314,6 +354,16 @@ export declare const useEmptySwatchStyles_unstable: (state: EmptySwatchState) =>
  */
 export declare const useImageSwatch_unstable: (props: ImageSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchState;
 
+/**
+ * Create the base state required to render unstyled ImageSwatch.
+ *
+ * The returned state can be modified with hooks 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 useImageSwatchBase_unstable: (props: ImageSwatchBaseProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchBaseState;
+
 /**
  * Apply styling to the ImageSwatch slots based on the state
  */
@@ -330,6 +380,16 @@ export declare const useImageSwatchStyles_unstable: (state: ImageSwatchState) =>
  */
 export declare const useSwatchPicker_unstable: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;
 
+/**
+ * Create the base state required to render unstyled SwatchPicker.
+ *
+ * The returned state can be modified with hooks 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 useSwatchPickerBase_unstable: (props: SwatchPickerBaseProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerBaseState;
+
 export declare const useSwatchPickerContextValue_unstable: <T>(selector: ContextSelector<SwatchPickerContextValue, T>) => T;
 
 export declare const useSwatchPickerContextValues: (state: SwatchPickerState) => SwatchPickerContextValues;
@@ -345,6 +405,16 @@ export declare const useSwatchPickerContextValues: (state: SwatchPickerState) =>
  */
 export declare const useSwatchPickerRow_unstable: (props: SwatchPickerRowProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowState;
 
+/**
+ * Create the base state required to render unstyled SwatchPickerRow.
+ *
+ * The returned state can be modified with hooks 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 useSwatchPickerRowBase_unstable: (props: SwatchPickerRowBaseProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowBaseState;
+
 /**
  * Apply styling to the SwatchPickerRow slots based on the state
  */

package/lib/ColorSwatch.js

@@ -1 +1 @@
-export { ColorSwatch, colorSwatchClassNames, renderColorSwatch_unstable, swatchCSSVars, useColorSwatchStyles_unstable, useColorSwatch_unstable } from './components/ColorSwatch/index';
+export { ColorSwatch, colorSwatchClassNames, renderColorSwatch_unstable, swatchCSSVars, useColorSwatchStyles_unstable, useColorSwatch_unstable, useColorSwatchBase_unstable } from "./components/ColorSwatch/index.js";

package/lib/ColorSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ColorSwatch.ts"],"sourcesContent":["export type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './components/ColorSwatch/index';\nexport {\n  ColorSwatch,\n  colorSwatchClassNames,\n  renderColorSwatch_unstable,\n  swatchCSSVars,\n  useColorSwatchStyles_unstable,\n  useColorSwatch_unstable,\n} from './components/ColorSwatch/index';\n"],"names":["ColorSwatch","colorSwatchClassNames","renderColorSwatch_unstable","swatchCSSVars","useColorSwatchStyles_unstable","useColorSwatch_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,aAAa,EACbC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/ColorSwatch.ts"],"sourcesContent":["export type {\n  ColorSwatchBaseProps,\n  ColorSwatchBaseState,\n  ColorSwatchProps,\n  ColorSwatchSlots,\n  ColorSwatchState,\n} from './components/ColorSwatch/index';\nexport {\n  ColorSwatch,\n  colorSwatchClassNames,\n  renderColorSwatch_unstable,\n  swatchCSSVars,\n  useColorSwatchStyles_unstable,\n  useColorSwatch_unstable,\n  useColorSwatchBase_unstable,\n} from './components/ColorSwatch/index';\n"],"names":["ColorSwatch","colorSwatchClassNames","renderColorSwatch_unstable","swatchCSSVars","useColorSwatchStyles_unstable","useColorSwatch_unstable","useColorSwatchBase_unstable"],"mappings":"AAOA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,aAAa,EACbC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,oCAAiC"}

package/lib/EmptySwatch.js

@@ -1 +1 @@
-export { EmptySwatch, emptySwatchClassNames, renderEmptySwatch_unstable, useEmptySwatchStyles_unstable, useEmptySwatch_unstable } from './components/EmptySwatch/index';
+export { EmptySwatch, emptySwatchClassNames, renderEmptySwatch_unstable, useEmptySwatchBase_unstable, useEmptySwatchStyles_unstable, useEmptySwatch_unstable } from "./components/EmptySwatch/index.js";

package/lib/EmptySwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/EmptySwatch.ts"],"sourcesContent":["export type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './components/EmptySwatch/index';\nexport {\n  EmptySwatch,\n  emptySwatchClassNames,\n  renderEmptySwatch_unstable,\n  useEmptySwatchStyles_unstable,\n  useEmptySwatch_unstable,\n} from './components/EmptySwatch/index';\n"],"names":["EmptySwatch","emptySwatchClassNames","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/EmptySwatch.ts"],"sourcesContent":["export type {\n  EmptySwatchBaseProps,\n  EmptySwatchBaseState,\n  EmptySwatchProps,\n  EmptySwatchSlots,\n  EmptySwatchState,\n} from './components/EmptySwatch/index';\nexport {\n  EmptySwatch,\n  emptySwatchClassNames,\n  renderEmptySwatch_unstable,\n  useEmptySwatchBase_unstable,\n  useEmptySwatchStyles_unstable,\n  useEmptySwatch_unstable,\n} from './components/EmptySwatch/index';\n"],"names":["EmptySwatch","emptySwatchClassNames","renderEmptySwatch_unstable","useEmptySwatchBase_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable"],"mappings":"AAOA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,oCAAiC"}

package/lib/ImageSwatch.js

@@ -1 +1 @@
-export { ImageSwatch, imageSwatchClassNames, renderImageSwatch_unstable, useImageSwatchStyles_unstable, useImageSwatch_unstable } from './components/ImageSwatch/index';
+export { ImageSwatch, imageSwatchClassNames, renderImageSwatch_unstable, useImageSwatchStyles_unstable, useImageSwatch_unstable, useImageSwatchBase_unstable } from "./components/ImageSwatch/index.js";

package/lib/ImageSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ImageSwatch.ts"],"sourcesContent":["export type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './components/ImageSwatch/index';\nexport {\n  ImageSwatch,\n  imageSwatchClassNames,\n  renderImageSwatch_unstable,\n  useImageSwatchStyles_unstable,\n  useImageSwatch_unstable,\n} from './components/ImageSwatch/index';\n"],"names":["ImageSwatch","imageSwatchClassNames","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/ImageSwatch.ts"],"sourcesContent":["export type {\n  ImageSwatchBaseProps,\n  ImageSwatchBaseState,\n  ImageSwatchProps,\n  ImageSwatchSlots,\n  ImageSwatchState,\n} from './components/ImageSwatch/index';\nexport {\n  ImageSwatch,\n  imageSwatchClassNames,\n  renderImageSwatch_unstable,\n  useImageSwatchStyles_unstable,\n  useImageSwatch_unstable,\n  useImageSwatchBase_unstable,\n} from './components/ImageSwatch/index';\n"],"names":["ImageSwatch","imageSwatchClassNames","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable","useImageSwatchBase_unstable"],"mappings":"AAOA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,oCAAiC"}

package/lib/SwatchPicker.js

@@ -1 +1 @@
-export { SwatchPicker, renderSwatchPicker_unstable, swatchPickerClassNames, useSwatchPickerStyles_unstable, useSwatchPicker_unstable } from './components/SwatchPicker/index';
+export { SwatchPicker, renderSwatchPicker_unstable, swatchPickerClassNames, useSwatchPickerStyles_unstable, useSwatchPicker_unstable, useSwatchPickerBase_unstable } from "./components/SwatchPicker/index.js";