@gooddata/sdk-ui-kit 11.55.0-alpha.2 → 11.55.0-alpha.4

package/esm/sdk-ui-kit.d.ts

@@ -87,6 +87,7 @@ import { OnError } from '@gooddata/sdk-ui';
 import { OnLoadingChanged } from '@gooddata/sdk-ui';
 import { ParameterValue } from '@gooddata/sdk-model';
 import { Placement } from '@floating-ui/react';
+import { PointerEvent as PointerEvent_2 } from 'react';
 import { PrimitiveType } from 'react-intl';
 import { PropsWithChildren } from 'react';
 import { PropsWithoutRef } from 'react';
@@ -2720,7 +2721,7 @@ export declare function IconTreeMap({ className, width, height, color, ariaHidde
 /**
  * @internal
  */
-export declare type IconType = "aiAgent" | "aiAgentDisabled" | "brain" | "brainDisabled" | "check" | "checkCircle" | "certification" | "plus" | "plusCircle" | "sync" | "alert" | "alertPaused" | "close" | "cross" | "edit" | "crossCircle" | "question" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "date" | "navigateUp" | "navigateDown" | "navigateRight" | "navigateLeft" | "download" | "slack" | "expand" | "exclamationCircle" | "infoCircle" | "book" | "visible" | "invisible" | "lock" | "unlock" | "ai" | "aiFill" | "drawer" | "drawerEmpty" | "prohibited" | "dropDown" | "dropRight" | "clock" | "clockPaused" | "questionMark" | "upload" | "expandRectangle" | "file" | "number" | "code" | "user" | "userPlus" | "users" | "magic" | "tab" | "pauseCircle" | "filter" | "timer" | "mail" | "envelope" | "copy" | "rain" | "earth" | "geoCollection" | "geoCollectionUpload" | "minimize" | "shrink" | "copyright" | "ellipsis" | "pencil" | "folder" | "folderSmall" | "folderPlus" | "trash" | "arrowUp" | "arrowRight" | "arrowDown" | "arrowLeft" | "undo" | "redo" | "trendDown" | "trendUp" | "save" | "minus" | "minusCircle" | "percent" | "enter" | "enterRight" | "money" | "ghost" | "warning" | "home" | "settings" | "search" | "university" | "building" | "printer" | "picture" | "visualization" | "dashboard" | "metric" | "fact" | "ldmAttribute" | "ldmKey" | "ldmLabel" | "sharp" | "attribute" | "horn" | "cw" | "ccw" | "table" | "directionColumn" | "directionRow" | "header" | "genai" | "genai2" | "explainai" | "hiddenForAi" | "box" | "ellipsisVertical" | "list" | "drillTo" | "hierarchy" | "history" | "history2" | "thumbsUp" | "thumbsDown" | "send" | "visualizationArea" | "visualizationTable" | "visualizationTreemap" | "visualizationScatter" | "visualizationDonut" | "visualizationHeadline" | "visualizationColumn" | "visualizationLine" | "visualizationPyramid" | "visualizationFunnel" | "visualizationHeatmap" | "visualizationBubble" | "visualizationPie" | "visualizationBar" | "visualizationCombo" | "visualizationBullet" | "visualizationWaterfall" | "visualizationDependencywheel" | "visualizationSankey" | "visualizationPushpin" | "visualizationRepeater" | "visualizationXirr" | "link" | "externalLink" | "click" | "fileXlsx" | "filePptx" | "filePdf" | "fileImage" | "fileCsvFormatted" | "fileCsvRaw" | "aiDocument" | "recommendation" | "streamUp" | "streamDown" | "stream" | "density" | "parameter" | "pin" | "unpin" | "speechBubble" | "pieChart" | "timezone";
+export declare type IconType = "aiAgent" | "aiAgentDisabled" | "brain" | "brainDisabled" | "check" | "checkCircle" | "certification" | "plus" | "plusCircle" | "sync" | "alert" | "alertPaused" | "close" | "cross" | "edit" | "crossCircle" | "question" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "date" | "navigateUp" | "navigateDown" | "navigateRight" | "navigateLeft" | "download" | "slack" | "expand" | "exclamationCircle" | "infoCircle" | "book" | "visible" | "invisible" | "lock" | "unlock" | "ai" | "aiFill" | "drawer" | "drawerEmpty" | "prohibited" | "dropDown" | "dropRight" | "clock" | "clockPaused" | "questionMark" | "upload" | "expandRectangle" | "file" | "number" | "code" | "user" | "userPlus" | "users" | "magic" | "tab" | "pauseCircle" | "filter" | "timer" | "mail" | "envelope" | "copy" | "rain" | "earth" | "geoCollection" | "geoCollectionUpload" | "minimize" | "shrink" | "copyright" | "ellipsis" | "pencil" | "folder" | "folderSmall" | "folderPlus" | "trash" | "arrowUp" | "arrowRight" | "arrowDown" | "arrowLeft" | "undo" | "redo" | "trendDown" | "trendUp" | "save" | "minus" | "minusCircle" | "percent" | "enter" | "enterRight" | "money" | "ghost" | "warning" | "home" | "settings" | "search" | "university" | "building" | "printer" | "picture" | "visualization" | "dashboard" | "metric" | "fact" | "ldmAttribute" | "ldmKey" | "ldmLabel" | "sharp" | "attribute" | "horn" | "cw" | "ccw" | "table" | "directionColumn" | "directionRow" | "alignLeft" | "alignCenter" | "alignRight" | "alignTop" | "alignMiddle" | "alignBottom" | "imageContain" | "imageCover" | "imageFill" | "header" | "genai" | "genai2" | "explainai" | "hiddenForAi" | "box" | "ellipsisVertical" | "list" | "drillTo" | "hierarchy" | "history" | "history2" | "thumbsUp" | "thumbsDown" | "send" | "visualizationArea" | "visualizationTable" | "visualizationTreemap" | "visualizationScatter" | "visualizationDonut" | "visualizationHeadline" | "visualizationColumn" | "visualizationLine" | "visualizationPyramid" | "visualizationFunnel" | "visualizationHeatmap" | "visualizationBubble" | "visualizationPie" | "visualizationBar" | "visualizationCombo" | "visualizationBullet" | "visualizationWaterfall" | "visualizationDependencywheel" | "visualizationSankey" | "visualizationPushpin" | "visualizationRepeater" | "visualizationXirr" | "link" | "externalLink" | "click" | "fileXlsx" | "filePptx" | "filePdf" | "fileImage" | "fileCsvFormatted" | "fileCsvRaw" | "aiDocument" | "recommendation" | "streamUp" | "streamDown" | "stream" | "density" | "parameter" | "pin" | "unpin" | "speechBubble" | "pieChart" | "timezone";
 
 /**
  * @internal
@@ -5323,16 +5324,20 @@ export declare interface IParameterControlButtonProps {
 /**
  * @internal
  */
-export declare interface IParameterControlProps {
+export declare type IParameterControlProps = {
     name: string;
     definition: IParameterDefinition;
     value: ParameterValue;
     resetValue?: ParameterValue;
     inputId?: string;
     ariaAttributes?: IDropdownBodyRenderProps["ariaAttributes"];
-    onApply: (value: ParameterValue) => void;
-    onCancel: () => void;
-}
+    /**
+     * The control calls this itself after a commit-mode Apply, and after the user selects an
+     * allowed value. The footer Cancel or Close button also calls this. Close does not remove the
+     * staged value.
+     */
+    onClose: () => void;
+} & ParameterSubmitModeProps<ParameterValue>;
 
 /**
  * @internal
@@ -5349,6 +5354,17 @@ export declare interface IParameterPickerProps {
     onCancel: () => void;
 }
 
+/**
+ * @internal
+ */
+export declare interface IPointerTrackHandlers {
+    onPointerDown: (event: PointerEvent_2<HTMLElement>) => void;
+    onPointerMove: (event: PointerEvent_2<HTMLElement>) => void;
+    onPointerUp: (event: PointerEvent_2<HTMLElement>) => void;
+    onPointerCancel: (event: PointerEvent_2<HTMLElement>) => void;
+    onLostPointerCapture: (event: PointerEvent_2<HTMLElement>) => void;
+}
+
 /**
  * @internal
  */
@@ -7084,6 +7100,81 @@ export declare interface IUiChipProps {
     renderActionButton?: (button: ReactNode) => ReactNode;
 }
 
+/**
+ * What every picker takes, whichever way it reports the color it gathers.
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerBaseProps {
+    /**
+     * The color to start from. The picker follows it when it changes.
+     *
+     * @remarks
+     * Never feed the picker the color it just reported: read in again it loses the hue that a gray,
+     * black or white cannot carry, and the handle jumps off the wheel mid-drag. A caller applying
+     * changes live should hold the color it seeds the picker with apart from the one it stores.
+     */
+    initialRgbColor: IUiColorPickerRgb | IUiColorPickerRgba;
+    /**
+     * Adds an opacity control and lets the reported color carry one.
+     *
+     * @remarks
+     * Off by default: a consumer that stores a color without an opacity would drop the one the user
+     * had set, without saying so.
+     */
+    supportsAlpha?: boolean;
+}
+
+/**
+ * A picker that gathers a color and reports it once, when confirmed.
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerCommitProps extends IUiColorPickerBaseProps {
+    onSubmit: (color: IUiColorPickerRgba) => void;
+    /**
+     * Dismisses the picker, leaving the color as it was.
+     */
+    onCancel: () => void;
+    onChange?: never;
+}
+
+/**
+ * A picker that reports every change as it is made, and so has nothing to confirm or take back: the
+ * color is already applied, and going back from it is the caller's to offer.
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerLiveProps extends IUiColorPickerBaseProps {
+    onChange: (color: IUiColorPickerRgba) => void;
+    onSubmit?: never;
+}
+
+/**
+ * @internal
+ */
+export declare type IUiColorPickerProps = IUiColorPickerCommitProps | IUiColorPickerLiveProps;
+
+/**
+ * Channels, each 0 to 255.
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerRgb {
+    r: number;
+    g: number;
+    b: number;
+}
+
+/**
+ * Channels, each 0 to 255, with opacity from 0 (transparent) to 1 (opaque).
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerRgba extends IUiColorPickerRgb {
+    a: number;
+}
+
 /** @internal */
 export declare interface IUiComboboxInputProps {
     /**
@@ -7694,6 +7785,23 @@ export declare interface IUiFloatingElementProps {
     strategy?: Strategy;
     offset?: OffsetOptions;
     autoFlip?: boolean;
+    /**
+     * Whether the floating element may slide over its anchor to stay in view.
+     *
+     * @remarks
+     * By default it only slides along the side it is placed on. An anchor taller than the viewport
+     * has room on neither side, which leaves the element off the screen.
+     */
+    allowOverlapAnchor?: boolean;
+    /**
+     * Element the floating element is kept inside of, instead of the window.
+     *
+     * @remarks
+     * The portal puts it outside whatever the anchor scrolls in, so by default only the window
+     * constrains it. Pass the element rather than its rect, so the position is measured again as
+     * the element moves.
+     */
+    overflowBoundary?: Element;
     closeOnOutsideClick?: boolean;
     closeOnEscape?: boolean;
     closeOnParentScroll?: boolean;
@@ -9637,6 +9745,8 @@ export declare interface IUseFloatingPositionOptions {
     strategy?: Strategy;
     offset?: OffsetOptions;
     autoFlip?: boolean;
+    allowOverlapAnchor?: boolean;
+    overflowBoundary?: Element;
     fallbackPlacements?: Placement[];
     arrowRef?: RefObject<SVGSVGElement | null>;
     customMiddleware?: Middleware[];
@@ -10240,13 +10350,13 @@ export declare type PageOrientation = "PORTRAIT" | "LANDSCAPE";
 export declare type PageSize = "A3" | "A4" | "LETTER";
 
 /**
- * Selects the parameter editing control by `definition.type` and constraint shape — the single
- * seam where control variants are dispatched. New variants get a sibling control and a new arm
- * here.
+ * Controls the full parameter edit session. It selects the control variant from `definition.type`
+ * and the constraint shape, then gives the commit or staged mode to that variant. To add a
+ * variant, add a sibling control and a new case here.
  *
  * @internal
  */
-export declare function ParameterControl({ name, definition, value, resetValue, inputId, ariaAttributes, onApply, onCancel }: IParameterControlProps): JSX.Element;
+export declare function ParameterControl(props: IParameterControlProps): JSX.Element;
 
 /**
  * @internal
@@ -10261,6 +10371,24 @@ export declare function ParameterControlButton({ name, definition, value, isActi
  */
 export declare function ParameterPicker({ parameters, excludedKeys, isLoading, maxListHeight, onAdd, onCancel }: IParameterPickerProps): JSX.Element;
 
+/**
+ * Submit mode of a parameter control edit session.
+ *
+ * - `commit`: the control sends the value through `onCommit` only, when the user clicks Apply.
+ *   The footer shows Cancel and Apply.
+ * - `staged`: the control sends each valid draft through `onStage` immediately. The footer shows
+ *   only Close. Close does not remove the staged value.
+ *
+ * @internal
+ */
+export declare type ParameterSubmitModeProps<TValue> = {
+    mode: "commit";
+    onCommit: (value: TValue) => void;
+} | {
+    mode: "staged";
+    onStage: (value: TValue) => void;
+};
+
 /**
  * Message descriptor of a permission level's display label ("Can edit & share" /
  * "Can view & share" / "Can view") — for triggers anchoring {@link UiPermissionMenu}.
@@ -11030,6 +11158,11 @@ export declare function UiCheckbox({ checked, onChange, preventDefault, stopProp
  */
 export declare function UiChip({ label, tag, isDeletable, isActionable, isActive, isLocked, isExpandable, isDisabled, maxWidth, iconBefore, iconAfter, iconColor, onClick, onKeyDown, onDelete, onDeleteKeyDown, onAction, onActionKeyDown, accessibilityConfig, dataTestId, buttonRef, iconAction, variant, renderChipContent, renderActionButton }: IUiChipProps): JSX.Element;
 
+/**
+ * @internal
+ */
+export declare function UiColorPicker(props: IUiColorPickerProps): JSX.Element;
+
 /**
  * A composable combobox component that enables users to select from a filtered list of options.
  *
@@ -11233,7 +11366,7 @@ export declare function UiErrorPage({ title, description, dataTestId, accessibil
  *
  * @internal
  */
-export declare function UiFloatingElement({ children, anchor, isOpen, onClose, placement, alignPoints, strategy, offset, autoFlip, closeOnOutsideClick, closeOnEscape, closeOnParentScroll, closeOnMouseDrag, ignoreClicksOn, shouldCloseOnClick, zIndex: zIndexProp, className, contentClassName, style, width, maxWidth, maxHeight, accessibilityConfig, onPlacementChange }: IUiFloatingElementProps): JSX.Element | null;
+export declare function UiFloatingElement({ children, anchor, isOpen, onClose, placement, alignPoints, strategy, offset, autoFlip, allowOverlapAnchor, overflowBoundary, closeOnOutsideClick, closeOnEscape, closeOnParentScroll, closeOnMouseDrag, ignoreClicksOn, shouldCloseOnClick, zIndex: zIndexProp, className, contentClassName, style, width, maxWidth, maxHeight, accessibilityConfig, onPlacementChange }: IUiFloatingElementProps): JSX.Element | null;
 
 /**
  * `UiFloatingElement` plus the kit's canonical popup chrome (background,
@@ -11882,7 +12015,7 @@ export declare function useFileSelection({ rules, multiple, onValidateFile, onFi
  *
  * @internal
  */
-export declare function useFloatingPosition({ isOpen, onOpenChange, placement: placementProp, alignPoints, strategy, offset: offsetProp, autoFlip, fallbackPlacements: fallbackPlacementsProp, arrowRef, customMiddleware, maxWidth, maxHeight, zIndex: zIndexProp, shiftPadding }: IUseFloatingPositionOptions): IUseFloatingPositionResult;
+export declare function useFloatingPosition({ isOpen, onOpenChange, placement: placementProp, alignPoints, strategy, offset: offsetProp, autoFlip, allowOverlapAnchor, overflowBoundary, fallbackPlacements: fallbackPlacementsProp, arrowRef, customMiddleware, maxWidth, maxHeight, zIndex: zIndexProp, shiftPadding }: IUseFloatingPositionOptions): IUseFloatingPositionResult;
 
 /**
  * @internal
@@ -12073,6 +12206,18 @@ export declare const useOverlayZIndex: (uuid: string) => number | undefined;
  */
 export declare function useOverlayZIndexWithRegister(): number;
 
+/**
+ * Follows a press and everything it drags through.
+ *
+ * @remarks
+ * The handlers must be spread on the element the gesture is measured against: they report
+ * `currentTarget`, and a caller that reads a child's or a parent's size instead will place the value
+ * somewhere the pointer is not.
+ *
+ * @internal
+ */
+export declare function usePointerTrack(track: (event: PointerEvent_2<HTMLElement>) => void): IPointerTrackHandlers;
+
 /**
  * Hook to consume responsive context.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.55.0-alpha.2",
+  "version": "11.55.0-alpha.4",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -78,11 +78,11 @@
     "unified": "^11.0.5",
     "uuid": "11.1.1",
     "yaml": "2.8.3",
-    "@gooddata/sdk-backend-spi": "11.55.0-alpha.2",
-    "@gooddata/sdk-model": "11.55.0-alpha.2",
-    "@gooddata/sdk-ui": "11.55.0-alpha.2",
-    "@gooddata/util": "11.55.0-alpha.2",
-    "@gooddata/sdk-ui-theme-provider": "11.55.0-alpha.2"
+    "@gooddata/sdk-backend-spi": "11.55.0-alpha.4",
+    "@gooddata/sdk-model": "11.55.0-alpha.4",
+    "@gooddata/sdk-ui": "11.55.0-alpha.4",
+    "@gooddata/util": "11.55.0-alpha.4",
+    "@gooddata/sdk-ui-theme-provider": "11.55.0-alpha.4"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "7.30.10",
@@ -103,7 +103,6 @@
     "@typescript-eslint/eslint-plugin": "8.58.0",
     "@typescript-eslint/parser": "8.58.0",
     "@typescript/native-preview": "7.0.0-dev.20260202.1",
-    "@vitest/eslint-plugin": "1.6.19",
     "dependency-cruiser": "17.3.10",
     "eslint": "^9.39.2",
     "eslint-plugin-headers": "1.3.3",
@@ -117,8 +116,8 @@
     "happy-dom": "20.9.0",
     "kefir": "3.8.8",
     "npm-run-all": "4.1.5",
-    "oxfmt": "0.52.0",
-    "oxlint": "1.51.0",
+    "oxfmt": "0.58.0",
+    "oxlint": "1.57.0",
     "oxlint-tsgolint": "0.15.0",
     "raf": "3.4.1",
     "react": "19.1.1",
@@ -129,11 +128,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.55.0-alpha.2",
-    "@gooddata/oxlint-config": "11.55.0-alpha.2",
-    "@gooddata/reference-workspace": "11.55.0-alpha.2",
-    "@gooddata/stylelint-config": "11.55.0-alpha.2",
-    "@gooddata/sdk-backend-mockingbird": "11.55.0-alpha.2"
+    "@gooddata/eslint-config": "11.55.0-alpha.4",
+    "@gooddata/oxlint-config": "11.55.0-alpha.4",
+    "@gooddata/reference-workspace": "11.55.0-alpha.4",
+    "@gooddata/sdk-backend-mockingbird": "11.55.0-alpha.4",
+    "@gooddata/stylelint-config": "11.55.0-alpha.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiColorPicker/UiColorPicker.scss

@@ -0,0 +1,120 @@
+// (C) 2007-2026 GoodData Corporation
+
+.gd-ui-kit-color-picker {
+    --color-picker-handle: 14px;
+
+    width: 200px;
+    padding: 15px;
+}
+
+// Hue runs around the wheel and saturation out from the middle, which the geometry in UiColorWheel.tsx
+// reads back. The two agree only because the conic gradient starts where the screen angle is
+// measured from - at 3 o'clock, running clockwise - so a gradient position is a hue is an angle.
+//
+// Painted at a fixed lightness, not the one being edited: at either extreme every hue renders the
+// same white or black, and a wheel that followed it would leave nothing to aim at.
+.gd-ui-kit-color-picker__wheel {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    margin-bottom: 15px;
+    border-radius: 50%;
+    cursor: crosshair;
+    // Without this a drag on a touch screen scrolls the page instead of picking a color.
+    touch-action: none;
+    user-select: none;
+    background:
+        radial-gradient(circle closest-side, hsl(0deg 0% 50%) 0%, transparent 100%),
+        conic-gradient(
+            from 90deg,
+            hsl(0deg 100% 50%),
+            hsl(60deg 100% 50%),
+            hsl(120deg 100% 50%),
+            hsl(180deg 100% 50%),
+            hsl(240deg 100% 50%),
+            hsl(300deg 100% 50%),
+            hsl(360deg 100% 50%)
+        );
+
+    &:focus-visible {
+        outline: 2px solid var(--gd-palette-primary-base);
+        outline-offset: 2px;
+    }
+}
+
+.gd-ui-kit-color-picker__slider {
+    position: relative;
+    height: var(--color-picker-handle);
+    margin-bottom: 15px;
+    border-radius: calc(var(--color-picker-handle) / 2);
+    cursor: pointer;
+    touch-action: none;
+    // A drag would otherwise select the labels around the control and show an I-beam over it.
+    user-select: none;
+    // Shows through wherever a track is not fully opaque, which is what marks it as see-through.
+    background: repeating-conic-gradient(
+            var(--gd-palette-complementary-2) 0% 25%,
+            var(--gd-palette-complementary-0) 0% 50%
+        )
+        50% / 8px 8px;
+
+    &:focus-visible {
+        outline: 2px solid var(--gd-palette-primary-base);
+        outline-offset: 2px;
+    }
+}
+
+.gd-ui-kit-color-picker__slider-track {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+}
+
+// Placed by its middle, which is what the positions the controls set mean. The border counts
+// towards its size, or the offset that centres it would be short by the border on each side.
+.gd-ui-kit-color-picker__wheel-thumb,
+.gd-ui-kit-color-picker__slider-thumb {
+    position: absolute;
+    box-sizing: border-box;
+    width: var(--color-picker-handle);
+    height: var(--color-picker-handle);
+    margin: calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);
+    border: 2px solid var(--gd-palette-complementary-0);
+    border-radius: 50%;
+    box-shadow: 0 0 2px var(--gd-palette-complementary-6);
+    // The handle only reports where the value is; the gesture belongs to the control under it.
+    pointer-events: none;
+}
+
+.gd-ui-kit-color-picker__slider-thumb {
+    top: 50%;
+    // Stops half a handle short of each end, so it stays inside the track it reads against.
+    left: calc(
+        var(--color-picker-handle) / 2 + (100% - var(--color-picker-handle)) *
+            var(--color-picker-slider-position)
+    );
+}
+
+.gd-ui-kit-color-picker__value {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    // A text input asks for a width of its own and a flex item will not shrink below what it asks
+    // for, so without this the notation button is pushed out of the panel.
+    .gd-ui-kit-text-input {
+        flex: 1;
+        min-width: 0;
+    }
+}
+
+.gd-ui-kit-color-picker__actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 15px 0 0;
+
+    .gd-ui-kit-button {
+        flex: 1;
+    }
+}

package/src/@ui/index.scss

@@ -8,6 +8,7 @@
 @use "./UiSkeleton/UiSkeleton.scss";
 @use "./UiPagedVirtualList/UiPagedVirtualList.scss";
 @use "./UiChip/UiChip.scss";
+@use "./UiColorPicker/UiColorPicker.scss";
 @use "./UiControlButton/UiControlButton.scss";
 @use "./UiCombobox/UiCombobox.scss";
 @use "./UiAutocomplete/UiAutocomplete.scss";

package/styles/css/main.css

@@ -1376,6 +1376,87 @@
   transition: var(--gd-transition-all);
 }
 
+.gd-ui-kit-color-picker {
+  --color-picker-handle: 14px;
+  width: 200px;
+  padding: 15px;
+}
+
+.gd-ui-kit-color-picker__wheel {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  margin-bottom: 15px;
+  border-radius: 50%;
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+  background: radial-gradient(circle closest-side, hsl(0, 0%, 50%) 0%, transparent 100%), conic-gradient(from 90deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
+}
+.gd-ui-kit-color-picker__wheel:focus-visible {
+  outline: 2px solid var(--gd-palette-primary-base);
+  outline-offset: 2px;
+}
+
+.gd-ui-kit-color-picker__slider {
+  position: relative;
+  height: var(--color-picker-handle);
+  margin-bottom: 15px;
+  border-radius: calc(var(--color-picker-handle) / 2);
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+  background: repeating-conic-gradient(var(--gd-palette-complementary-2) 0% 25%, var(--gd-palette-complementary-0) 0% 50%) 50%/8px 8px;
+}
+.gd-ui-kit-color-picker__slider:focus-visible {
+  outline: 2px solid var(--gd-palette-primary-base);
+  outline-offset: 2px;
+}
+
+.gd-ui-kit-color-picker__slider-track {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.gd-ui-kit-color-picker__wheel-thumb,
+.gd-ui-kit-color-picker__slider-thumb {
+  position: absolute;
+  box-sizing: border-box;
+  width: var(--color-picker-handle);
+  height: var(--color-picker-handle);
+  margin: calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);
+  border: 2px solid var(--gd-palette-complementary-0);
+  border-radius: 50%;
+  box-shadow: 0 0 2px var(--gd-palette-complementary-6);
+  pointer-events: none;
+}
+
+.gd-ui-kit-color-picker__slider-thumb {
+  top: 50%;
+  left: calc(var(--color-picker-handle) / 2 + (100% - var(--color-picker-handle)) * var(--color-picker-slider-position));
+}
+
+.gd-ui-kit-color-picker__value {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.gd-ui-kit-color-picker__value .gd-ui-kit-text-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.gd-ui-kit-color-picker__actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 15px 0 0;
+}
+.gd-ui-kit-color-picker__actions .gd-ui-kit-button {
+  flex: 1;
+}
+
 /* ==========================================================================
    Variables
    ========================================================================== */