@fluentui/react-color-picker 0.0.0-nightly-20250319-0406.1

package/CHANGELOG.md

@@ -0,0 +1,141 @@
+# Change Log - @fluentui/react-color-picker
+
+This log was last generated on Wed, 19 Mar 2025 04:10:29 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20250319-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v0.0.0-nightly-20250319-0406.1)
+
+Wed, 19 Mar 2025 04:10:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.3.1..@fluentui/react-color-picker_v0.0.0-nightly-20250319-0406.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-20250319-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/2230a32a129a913bbdb2d9791fed782c456d1264) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250319-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/2230a32a129a913bbdb2d9791fed782c456d1264) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250319-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/2230a32a129a913bbdb2d9791fed782c456d1264) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20250319-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/2230a32a129a913bbdb2d9791fed782c456d1264) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20250319-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/2230a32a129a913bbdb2d9791fed782c456d1264) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20250319-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/2230a32a129a913bbdb2d9791fed782c456d1264) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250319-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/2230a32a129a913bbdb2d9791fed782c456d1264) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250319-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/2230a32a129a913bbdb2d9791fed782c456d1264) by beachball)
+
+## [0.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.3.1)
+
+Tue, 11 Mar 2025 18:58:50 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.3.0..@fluentui/react-color-picker-preview_v0.3.1)
+
+### Patches
+
+- fix: placed thumb half outside of colorSlider and colorArea ([PR #33880](https://github.com/microsoft/fluentui/pull/33880) by vkozlova@microsoft.com)
+- fix: focus on Y axis ([PR #33899](https://github.com/microsoft/fluentui/pull/33899) by v.kozlova13@gmail.com)
+- Bump @fluentui/react-context-selector to v9.1.73 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.51 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.22.0 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-tabster to v9.24.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-utilities to v9.18.21 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+
+## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.3.0)
+
+Fri, 21 Feb 2025 14:34:05 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.2.0..@fluentui/react-color-picker-preview_v0.3.0)
+
+### Minor changes
+
+- Bump @fluentui/react-tabster to v9.24.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
+
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.2.0)
+
+Tue, 18 Feb 2025 11:26:27 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.6..@fluentui/react-color-picker-preview_v0.2.0)
+
+### Minor changes
+
+- custom color channels ([PR #33763](https://github.com/microsoft/fluentui/pull/33763) by v.kozlova13@gmail.com)
+
+### Patches
+
+- fix: design changes for ColorPicker ([PR #33785](https://github.com/microsoft/fluentui/pull/33785) by vkozlova@microsoft.com)
+
+## [0.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.6)
+
+Fri, 07 Feb 2025 10:42:11 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.5..@fluentui/react-color-picker-preview_v0.1.6)
+
+### Patches
+
+- fix: thumb design for ColorPicker - partner's ask ([PR #33743](https://github.com/microsoft/fluentui/pull/33743) by v.kozlova13@gmail.com)
+
+## [0.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.5)
+
+Mon, 27 Jan 2025 20:27:33 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.4..@fluentui/react-color-picker-preview_v0.1.5)
+
+### Patches
+
+- fix: default state for ColorSliders ([PR #33715](https://github.com/microsoft/fluentui/pull/33715) by v.kozlova13@gmail.com)
+
+## [0.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.4)
+
+Wed, 22 Jan 2025 14:00:14 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.3..@fluentui/react-color-picker-preview_v0.1.4)
+
+### Patches
+
+- chore: Moving @ctrl/tinycolor dependency to be a caret dependency in production packages. ([PR #33611](https://github.com/microsoft/fluentui/pull/33611) by makotom@microsoft.com)
+- fix: focus jumps to inputY instead of next element ([PR #33620](https://github.com/microsoft/fluentui/pull/33620) by vkozlova@microsoft.com)
+- feat: Added `transparent` option to the AlphaSlider ([PR #33572](https://github.com/microsoft/fluentui/pull/33572) by v.kozlova13@gmail.com)
+- Bump @fluentui/react-context-selector to v9.1.72 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.50 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-tabster to v9.23.3 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+
+## [0.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.3)
+
+Wed, 08 Jan 2025 18:33:32 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.2..@fluentui/react-color-picker-preview_v0.1.3)
+
+### Patches
+
+- fix: contrast border of thumb ([PR #33526](https://github.com/microsoft/fluentui/pull/33526) by vkozlova@microsoft.com)
+- feat: added aria-attributes to the ColorPicker ([PR #33543](https://github.com/microsoft/fluentui/pull/33543) by vkozlova@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.49 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+
+## [0.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.2)
+
+Mon, 16 Dec 2024 16:26:48 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.1..@fluentui/react-color-picker-preview_v0.1.2)
+
+### Patches
+
+- fix(react-color-picker): active axis for ColorPicker ([PR #33415](https://github.com/microsoft/fluentui/pull/33415) by vkozlova@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.71 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.48 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.21.2 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
+- Bump @fluentui/react-tabster to v9.23.2 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
+- Bump @fluentui/react-theme to v9.1.24 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
+- Bump @fluentui/react-utilities to v9.18.19 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
+
+## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.1)
+
+Mon, 09 Dec 2024 17:38:10 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker-preview_v0.1.0..@fluentui/react-color-picker-preview_v0.1.1)
+
+### Patches
+
+- chore: remove usage of "export \*" ([PR #33384](https://github.com/microsoft/fluentui/pull/33384) by olfedias@microsoft.com)
+
+## [0.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker-preview_v0.1.0)
+
+Fri, 06 Dec 2024 12:53:39 GMT
+
+### Minor changes
+
+- 'feat(react-color-picker): Release ColorPicker as unstable ([PR #33395](https://github.com/microsoft/fluentui/pull/33395) by vkozlova@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.70 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.47 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.21.1 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
+- Bump @fluentui/react-tabster to v9.23.1 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
+- Bump @fluentui/react-theme to v9.1.23 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
+- Bump @fluentui/react-utilities to v9.18.18 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-color-picker
+
+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,50 @@
+# @fluentui/react-color-picker
+
+**React Color 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 ColorPicker allows users to browse and select colors.
+By default, it enables navigation through a color spectrum and operates in HSV/HSL format.
+However, it is also possible to specify a color using Red-Green-Blue (RGB), an alpha color code, or hexadecimal values in the text boxes.
+
+## Usage
+
+To import React ColorPicker components:
+
+```tsx
+import { ColorPicker, ColorSwatch, type ColorPickerOnSelectEventHandler } from '@fluentui/react-components';
+```
+
+Simple example of ColorPicker Usage:
+
+```tsx
+import { tinycolor } from '@ctrl/tinycolor';
+import { ColorPicker, ColorSlider, AlphaSlider, type ColorPickerProps, ColorArea } from '@fluentui/react-components';
+
+export const App = () => {
+  const [color, setColor] = React.useState(DEFAULT_COLOR_HSV);
+  const handleChange: ColorPickerProps['onColorChange'] = (_, data) =>
+    setColor({ ...data.color, a: data.color.a ?? 1 });
+
+  return (
+    <>
+      <ColorPicker color={color} onColorChange={handleChange}>
+        <ColorSlider />
+        <AlphaSlider />
+        <ColorArea />
+      </ColorPicker>
+
+      <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
+    </>
+  );
+};
+```
+
+## 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.

package/dist/index.d.ts

@@ -0,0 +1,281 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+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';
+
+/**
+ * AlphaSlider component
+ */
+export declare const AlphaSlider: ForwardRefComponent<AlphaSliderProps>;
+
+export declare const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots>;
+
+/**
+ * AlphaSlider Props
+ */
+export declare type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {
+    /**
+     * The `transparency` property determines how the alpha channel is interpreted.
+     * - When `false`, the alpha channel represents the opacity of the color.
+     * - When `true`, the alpha channel represents the transparency of the color.
+     * For example, a 30% transparent color has 70% opacity.
+     *
+     * @defaultvalue false
+     */
+    transparency?: boolean;
+};
+
+export declare type AlphaSliderSlots = ColorSliderSlots;
+
+/**
+ * State used in rendering AlphaSlider
+ */
+export declare type AlphaSliderState = ComponentState<AlphaSliderSlots> & Pick<AlphaSliderProps, 'vertical'> & Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;
+
+/**
+ * ColorArea component
+ */
+export declare const ColorArea: ForwardRefComponent<ColorAreaProps>;
+
+export declare const colorAreaClassNames: SlotClassNames<ColorAreaSlots>;
+
+declare type ColorAreaOnColorChangeData = EventData<'change', React_2.SyntheticEvent | MouseEvent> & {
+    color: HsvColor;
+};
+
+/**
+ * ColorArea Props
+ */
+export declare type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> & Pick<ColorPickerProps, 'shape'> & {
+    /**
+     * The current color of the ColorArea.
+     */
+    color?: HsvColor;
+    /**
+     * The starting value for an uncontrolled ColorArea.
+     */
+    defaultColor?: HsvColor;
+    /**
+     * Triggers a callback when the value has been changed. This will be called on every individual step.
+     */
+    onChange?: EventHandler<ColorAreaOnColorChangeData>;
+};
+
+export declare type ColorAreaSlots = {
+    root: NonNullable<Slot<'div'>>;
+    thumb?: NonNullable<Slot<'div'>>;
+    inputX?: NonNullable<Slot<'input'>>;
+    inputY?: NonNullable<Slot<'input'>>;
+};
+
+/**
+ * State used in rendering ColorArea
+ */
+export declare type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;
+
+declare type ColorChannel = 'hue' | 'saturation' | 'value';
+
+/**
+ * ColorPicker component
+ */
+export declare const ColorPicker: ForwardRefComponent<ColorPickerProps>;
+
+export declare const colorPickerClassNames: SlotClassNames<ColorPickerSlots>;
+
+/**
+ * The context through which individual color controls communicate with the picker.
+ */
+declare type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {
+    /**
+     * @internal
+     * Callback used by Sliders to request a change on it's selected value
+     * Should be used to get value of color channel
+     */
+    requestChange: (event: React_2.ChangeEvent<HTMLInputElement>, data: {
+        color: HsvColor;
+    }) => void;
+};
+
+declare type ColorPickerContextValues = {
+    colorPicker: ColorPickerContextValue;
+};
+
+declare type ColorPickerOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLInputElement>> & {
+    color: HsvColor;
+};
+
+/**
+ * ColorPicker Props
+ */
+export declare type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {
+    /**
+     * Selected color.
+     */
+    color?: HsvColor;
+    /**
+     * Callback for when the user changes the color.
+     */
+    onColorChange?: EventHandler<ColorPickerOnChangeData>;
+    /**
+     * ColorPicker shape
+     * @defaultvalue 'rounded'
+     */
+    shape?: 'rounded' | 'square';
+};
+
+export declare type ColorPickerSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering ColorPicker
+ */
+export declare type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;
+
+/**
+ * ColorSlider component
+ */
+export declare const ColorSlider: ForwardRefComponent<ColorSliderProps>;
+
+export declare const colorSliderClassNames: SlotClassNames<ColorSliderSlots>;
+
+/**
+ * ColorSlider Props
+ */
+export declare type ColorSliderProps = Omit<ComponentProps<Partial<ColorSliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'value' | 'color'> & Pick<ColorPickerProps, 'shape'> & {
+    /**
+     * Color channel of the Slider.
+     * @default `hue`
+     */
+    channel?: ColorChannel;
+    /**
+     * Triggers a callback when the value has been changed. This will be called on every individual step.
+     */
+    onChange?: EventHandler<SliderOnChangeData>;
+    /**
+     * Render the Slider in a vertical orientation, smallest value on the bottom.
+     * @default `false`
+     */
+    vertical?: boolean;
+    /**
+     * Color of the ColorPicker
+     */
+    color?: HsvColor;
+    /**
+     * The starting color for an uncontrolled ColorSlider.
+     */
+    defaultColor?: HsvColor;
+};
+
+export declare type ColorSliderSlots = {
+    root: NonNullable<Slot<'div'>>;
+    rail: NonNullable<Slot<'div'>>;
+    thumb: NonNullable<Slot<'div'>>;
+    input: NonNullable<Slot<'input'>>;
+};
+
+/**
+ * State used in rendering ColorSlider
+ */
+export declare type ColorSliderState = ComponentState<ColorSliderSlots> & Pick<ColorSliderProps, 'vertical' | 'shape' | 'channel'>;
+
+declare type HsvColor = {
+    h: number;
+    s: number;
+    v: number;
+    a?: number;
+};
+
+/**
+ * Render the final JSX of AlphaSlider
+ */
+export declare const renderAlphaSlider_unstable: (state: AlphaSliderState) => JSX.Element;
+
+/**
+ * Render the final JSX of ColorArea
+ */
+export declare const renderColorArea_unstable: (state: ColorAreaState) => JSX.Element;
+
+/**
+ * Render the final JSX of ColorPicker
+ */
+export declare const renderColorPicker_unstable: (state: ColorPickerState, contextValues: ColorPickerContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of ColorSlider
+ */
+export declare const renderColorSlider_unstable: (state: ColorSliderState) => JSX.Element;
+
+declare type SliderOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLInputElement>> & {
+    color: HsvColor;
+};
+
+/**
+ * Create the state required to render AlphaSlider.
+ *
+ * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,
+ * before being passed to renderAlphaSlider_unstable.
+ *
+ * @param props - props from this instance of AlphaSlider
+ * @param ref - reference to root HTMLInputElement of AlphaSlider
+ */
+export declare const useAlphaSlider_unstable: (props: AlphaSliderProps, ref: React_2.Ref<HTMLInputElement>) => AlphaSliderState;
+
+/**
+ * Apply styling to the AlphaSlider slots based on the state
+ */
+export declare const useAlphaSliderStyles_unstable: (state: AlphaSliderState) => AlphaSliderState;
+
+/**
+ * Create the state required to render ColorArea.
+ *
+ * The returned state can be modified with hooks such as useColorAreaStyles_unstable,
+ * before being passed to renderColorArea_unstable.
+ *
+ * @param props - props from this instance of ColorArea
+ * @param ref - reference to root HTMLDivElement of ColorArea
+ */
+export declare const useColorArea_unstable: (props: ColorAreaProps, ref: React_2.Ref<HTMLDivElement>) => ColorAreaState;
+
+/**
+ * Apply styling to the ColorArea slots based on the state
+ */
+export declare const useColorAreaStyles_unstable: (state: ColorAreaState) => ColorAreaState;
+
+/**
+ * Create the state required to render ColorPicker.
+ *
+ * The returned state can be modified with hooks such as useColorPickerStyles_unstable,
+ * before being passed to renderColorPicker_unstable.
+ *
+ * @param props - props from this instance of ColorPicker
+ * @param ref - reference to root HTMLDivElement of ColorPicker
+ */
+export declare const useColorPicker_unstable: (props: ColorPickerProps, ref: React_2.Ref<HTMLDivElement>) => ColorPickerState;
+
+/**
+ * Apply styling to the ColorPicker slots based on the state
+ */
+export declare const useColorPickerStyles_unstable: (state: ColorPickerState) => ColorPickerState;
+
+/**
+ * Create the state required to render ColorSlider.
+ *
+ * The returned state can be modified with hooks such as useColorSliderStyles_unstable,
+ * before being passed to renderColorSlider_unstable.
+ *
+ * @param props - props from this instance of ColorSlider
+ * @param ref - reference to root HTMLInputElement of ColorSlider
+ */
+export declare const useColorSlider_unstable: (props: ColorSliderProps, ref: React_2.Ref<HTMLInputElement>) => ColorSliderState;
+
+/**
+ * Apply styling to the ColorSlider slots based on the state
+ */
+export declare const useColorSliderStyles_unstable: (state: ColorSliderState) => ColorSliderState;
+
+export { }

package/lib/AlphaSlider.js

@@ -0,0 +1 @@
+export { AlphaSlider, alphaSliderCSSVars, alphaSliderClassNames, renderAlphaSlider_unstable, useAlphaSliderStyles_unstable, useAlphaSlider_unstable } from './components/AlphaSlider/index';

package/lib/AlphaSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AlphaSlider.ts"],"sourcesContent":["export type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './components/AlphaSlider/index';\nexport {\n  AlphaSlider,\n  alphaSliderCSSVars,\n  alphaSliderClassNames,\n  renderAlphaSlider_unstable,\n  useAlphaSliderStyles_unstable,\n  useAlphaSlider_unstable,\n} from './components/AlphaSlider/index';\n"],"names":["AlphaSlider","alphaSliderCSSVars","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

package/lib/ColorArea.js

@@ -0,0 +1 @@
+export { ColorArea, colorAreaCSSVars, colorAreaClassNames, renderColorArea_unstable, useColorAreaStyles_unstable, useColorArea_unstable } from './components/ColorArea/index';

package/lib/ColorArea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorArea.ts"],"sourcesContent":["export type {\n  ColorAreaOnColorChangeData,\n  ColorAreaProps,\n  ColorAreaSlots,\n  ColorAreaState,\n} from './components/ColorArea/index';\nexport {\n  ColorArea,\n  colorAreaCSSVars,\n  colorAreaClassNames,\n  renderColorArea_unstable,\n  useColorAreaStyles_unstable,\n  useColorArea_unstable,\n} from './components/ColorArea/index';\n"],"names":["ColorArea","colorAreaCSSVars","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable"],"rangeMappings":"","mappings":"AAMA,SACEA,SAAS,EACTC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,+BAA+B"}

package/lib/ColorPicker.js

@@ -0,0 +1 @@
+export { ColorPicker, colorPickerClassNames, renderColorPicker_unstable, useColorPickerStyles_unstable, useColorPicker_unstable } from './components/ColorPicker/index';

package/lib/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorPicker.ts"],"sourcesContent":["export type {\n  ColorPickerOnChangeData,\n  ColorPickerProps,\n  ColorPickerSlots,\n  ColorPickerState,\n} from './components/ColorPicker/index';\nexport {\n  ColorPicker,\n  colorPickerClassNames,\n  renderColorPicker_unstable,\n  useColorPickerStyles_unstable,\n  useColorPicker_unstable,\n} from './components/ColorPicker/index';\n"],"names":["ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable"],"rangeMappings":"","mappings":"AAMA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

package/lib/ColorSlider.js

@@ -0,0 +1 @@
+export { ColorSlider, colorSliderCSSVars, colorSliderClassNames, renderColorSlider_unstable, useColorSliderStyles_unstable, useColorSlider_unstable } from './components/ColorSlider/index';

package/lib/ColorSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorSlider.ts"],"sourcesContent":["export type {\n  ColorSliderProps,\n  ColorSliderSlots,\n  ColorSliderState,\n  SliderOnChangeData,\n} from './components/ColorSlider/index';\nexport {\n  ColorSlider,\n  colorSliderCSSVars,\n  colorSliderClassNames,\n  renderColorSlider_unstable,\n  useColorSliderStyles_unstable,\n  useColorSlider_unstable,\n} from './components/ColorSlider/index';\n"],"names":["ColorSlider","colorSliderCSSVars","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable"],"rangeMappings":"","mappings":"AAMA,SACEA,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

package/lib/components/AlphaSlider/AlphaSlider.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useAlphaSlider_unstable } from './useAlphaSlider';
+import { renderAlphaSlider_unstable } from './renderAlphaSlider';
+import { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * AlphaSlider component
+ */ export const AlphaSlider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAlphaSlider_unstable(props, ref);
+    useAlphaSliderStyles_unstable(state);
+    useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);
+    return renderAlphaSlider_unstable(state);
+});
+AlphaSlider.displayName = 'AlphaSlider';

package/lib/components/AlphaSlider/AlphaSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n  const state = useAlphaSlider_unstable(props, ref);\n\n  useAlphaSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n  return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","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/AlphaSlider/AlphaSlider.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering AlphaSlider
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.types.ts"],"sourcesContent":["import type { ComponentState } from '@fluentui/react-utilities';\nimport type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';\n\nexport type AlphaSliderSlots = ColorSliderSlots;\n\n/**\n * AlphaSlider Props\n */\nexport type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {\n  /**\n   * The `transparency` property determines how the alpha channel is interpreted.\n   * - When `false`, the alpha channel represents the opacity of the color.\n   * - When `true`, the alpha channel represents the transparency of the color.\n   * For example, a 30% transparent color has 70% opacity.\n   *\n   * @defaultvalue false\n   */\n  transparency?: boolean;\n};\n\n/**\n * State used in rendering AlphaSlider\n */\nexport type AlphaSliderState = ComponentState<AlphaSliderSlots> &\n  Pick<AlphaSliderProps, 'vertical'> &\n  Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC,GACD,WAEgE"}

package/lib/components/AlphaSlider/alphaSliderUtils.js

@@ -0,0 +1,31 @@
+/**
+ * Adjusts the given value based on the transparency flag.
+ *
+ * @param value - The numeric value to adjust.
+ * @param transparency - A boolean flag indicating whether to adjust for transparency.
+ * @returns The adjusted value.
+ */ export function adjustToTransparency(value, transparency) {
+    return transparency ? 100 - value : value;
+}
+/**
+ * Calculates the transparency value based on the given parameters.
+ *
+ * @param transparency - A boolean flag indicating whether to adjust for transparency.
+ * @param value - An optional numeric value to adjust.
+ * @returns The calculated transparency value or undefined if the value is not provided.
+ */ export function calculateTransparencyValue(transparency, value) {
+    return value !== undefined ? adjustToTransparency(value * 100, transparency) : undefined;
+}
+/**
+ * Determines the direction of the slider based on the given parameters.
+ *
+ * @param dir - The text direction, either 'ltr' (left-to-right) or 'rtl' (right-to-left).
+ * @param vertical - A boolean indicating if the slider is vertical.
+ * @param transparency - A boolean indicating if the slider is for transparency.
+ * @returns The direction of the slider as a string representing degrees (e.g., '90deg').
+ */ export function getSliderDirection(dir, vertical, transparency) {
+    if (vertical) {
+        return transparency ? '180deg' : '0deg';
+    }
+    return dir === 'ltr' && !transparency ? '90deg' : '-90deg';
+}

package/lib/components/AlphaSlider/alphaSliderUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/alphaSliderUtils.ts"],"sourcesContent":["/**\n * Adjusts the given value based on the transparency flag.\n *\n * @param value - The numeric value to adjust.\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @returns The adjusted value.\n */\nexport function adjustToTransparency(value: number, transparency: boolean) {\n  return transparency ? 100 - value : value;\n}\n\n/**\n * Calculates the transparency value based on the given parameters.\n *\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @param value - An optional numeric value to adjust.\n * @returns The calculated transparency value or undefined if the value is not provided.\n */\nexport function calculateTransparencyValue(transparency: boolean, value?: number) {\n  return value !== undefined ? adjustToTransparency(value * 100, transparency) : undefined;\n}\n\n/**\n * Determines the direction of the slider based on the given parameters.\n *\n * @param dir - The text direction, either 'ltr' (left-to-right) or 'rtl' (right-to-left).\n * @param vertical - A boolean indicating if the slider is vertical.\n * @param transparency - A boolean indicating if the slider is for transparency.\n * @returns The direction of the slider as a string representing degrees (e.g., '90deg').\n */\nexport function getSliderDirection(dir: 'ltr' | 'rtl', vertical: boolean, transparency: boolean) {\n  if (vertical) {\n    return transparency ? '180deg' : '0deg';\n  }\n  return dir === 'ltr' && !transparency ? '90deg' : '-90deg';\n}\n"],"names":["adjustToTransparency","value","transparency","calculateTransparencyValue","undefined","getSliderDirection","dir","vertical"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;;CAMC,GACD,OAAO,SAASA,qBAAqBC,KAAa,EAAEC,YAAqB;IACvE,OAAOA,eAAe,MAAMD,QAAQA;AACtC;AAEA;;;;;;CAMC,GACD,OAAO,SAASE,2BAA2BD,YAAqB,EAAED,KAAc;IAC9E,OAAOA,UAAUG,YAAYJ,qBAAqBC,QAAQ,KAAKC,gBAAgBE;AACjF;AAEA;;;;;;;CAOC,GACD,OAAO,SAASC,mBAAmBC,GAAkB,EAAEC,QAAiB,EAAEL,YAAqB;IAC7F,IAAIK,UAAU;QACZ,OAAOL,eAAe,WAAW;IACnC;IACA,OAAOI,QAAQ,SAAS,CAACJ,eAAe,UAAU;AACpD"}

package/lib/components/AlphaSlider/index.js

@@ -0,0 +1,4 @@
+export { AlphaSlider } from './AlphaSlider';
+export { renderAlphaSlider_unstable } from './renderAlphaSlider';
+export { useAlphaSlider_unstable } from './useAlphaSlider';
+export { alphaSliderCSSVars, alphaSliderClassNames, useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/index.ts"],"sourcesContent":["export { AlphaSlider } from './AlphaSlider';\nexport type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\nexport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nexport { useAlphaSlider_unstable } from './useAlphaSlider';\nexport {\n  alphaSliderCSSVars,\n  alphaSliderClassNames,\n  useAlphaSliderStyles_unstable,\n} from './useAlphaSliderStyles.styles';\n"],"names":["AlphaSlider","renderAlphaSlider_unstable","useAlphaSlider_unstable","alphaSliderCSSVars","alphaSliderClassNames","useAlphaSliderStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SACEC,kBAAkB,EAClBC,qBAAqB,EACrBC,6BAA6B,QACxB,gCAAgC"}

package/lib/components/AlphaSlider/renderAlphaSlider.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 AlphaSlider
+ */ export const renderAlphaSlider_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsx(state.input, {}),
+            /*#__PURE__*/ _jsx(state.rail, {}),
+            /*#__PURE__*/ _jsx(state.thumb, {})
+        ]
+    });
+};

package/lib/components/AlphaSlider/renderAlphaSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/renderAlphaSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AlphaSliderState, AlphaSliderSlots } from './AlphaSlider.types';\n\n/**\n * Render the final JSX of AlphaSlider\n */\nexport const renderAlphaSlider_unstable = (state: AlphaSliderState) => {\n  assertSlots<AlphaSliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAlphaSlider_unstable","state","root","input","rail","thumb"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}