colibri-ui 0.8.96 → 0.8.98

package/NavigationMenu/components/NavigationLink/NavigationLink.module.css

@@ -0,0 +1,59 @@
+.item {
+  align-items: center;
+  background: transparent;
+  block-size: var(--navigation-item-height);
+  border: none;
+  border-radius: var(--radius-full);
+  box-sizing: border-box;
+  color: var(--component-navigation-item-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--navigation-item-font-size);
+  gap: var(--space-2);
+  line-height: var(--navigation-item-line-height);
+  padding: 0 var(--navigation-item-padding);
+  text-decoration: none;
+  transition: background-color 0.15s ease;
+  white-space: nowrap;
+}
+.item:hover {
+  background: var(--component-navigation-item-bg-hover);
+}
+.item:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-navigation-item-focus-ring);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+.item_selected, .item_selected:hover {
+  background: var(--component-navigation-item-bg-selected);
+  color: var(--component-navigation-item-text-selected);
+}
+
+.option {
+  align-items: center;
+  border-radius: var(--radius-xs);
+  color: var(--component-menu-text);
+  display: flex;
+  font-size: var(--font-size-text-sm);
+  gap: var(--space-2);
+  line-height: var(--line-height-text-sm);
+  outline: none;
+  padding: var(--space-2) var(--space-3);
+  text-decoration: none;
+}
+.option:hover, .option:focus-visible {
+  background: var(--component-menu-item-bg-hover);
+}
+.option_selected, .option_selected:hover, .option_selected:focus-visible {
+  background: var(--component-navigation-item-bg-selected);
+  color: var(--component-navigation-item-text-selected);
+}
+.option_selected:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-navigation-item-focus-ring);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}

package/NavigationMenu/components/NavigationLink/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { NavigationMenuItem, NavigationMenuRenderLink } from "../../index.props";
+interface NavigationLinkProps {
+    item: NavigationMenuItem;
+    /** `item` is a pill in the row, `option` is a line inside "More". */
+    view?: "item" | "option";
+    role?: "menuitem";
+    onClick?: (item: NavigationMenuItem) => void;
+    renderLink?: NavigationMenuRenderLink;
+}
+export declare const getLinkClassName: (view?: NavigationLinkProps["view"], active?: boolean) => string;
+export declare const LinkContent: ({ item }: {
+    item: NavigationMenuItem;
+}) => React.JSX.Element;
+export declare const NavigationLink: ({ item, view, role, onClick, renderLink, }: NavigationLinkProps) => React.JSX.Element;
+export {};

package/NavigationMenu/components/NavigationLink/index.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var styles = require('./NavigationLink.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const getLinkClassName = (view = "item", active) => clsx__default.default(styles__default.default[view], {
+  [styles__default.default[`${view}_selected`]]: active
+});
+const LinkContent = ({
+  item
+}) => (/*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, item.icon && (/*#__PURE__*/React__default.default.createElement("span", {
+  className: styles__default.default.icon,
+  "aria-hidden": "true"
+}, item.icon)), /*#__PURE__*/React__default.default.createElement("span", null, item.label)));
+const NavigationLink = ({
+  item,
+  view,
+  role,
+  onClick,
+  renderLink
+}) => {
+  const props = {
+    item,
+    className: getLinkClassName(view, item.active),
+    children: /*#__PURE__*/React__default.default.createElement(LinkContent, {
+      item: item
+    }),
+    onClick: onClick ? () => onClick(item) : undefined,
+    role,
+    "aria-current": item.active ? "page" : undefined
+  };
+  if (renderLink) return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderLink(props));
+  return /*#__PURE__*/React__default.default.createElement("a", {
+    href: item.href,
+    className: props.className,
+    onClick: props.onClick,
+    role: role,
+    "aria-current": props["aria-current"]
+  }, props.children);
+};
+
+exports.LinkContent = LinkContent;
+exports.NavigationLink = NavigationLink;
+exports.getLinkClassName = getLinkClassName;

package/NavigationMenu/helpers.d.ts

@@ -0,0 +1,9 @@
+import { useLayoutEffect } from "react";
+import type { Ref } from "react";
+import type { NavigationMenuItem } from "./index.props";
+export declare const getItemKey: (item: NavigationMenuItem, index: number) => string;
+/** Items are often recreated on every render: compare them by content. */
+export declare const isSameItem: (a: NavigationMenuItem, b: NavigationMenuItem) => boolean;
+/** `useLayoutEffect` without the server rendering warning. */
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare const assignRef: <T>(ref: Ref<T> | undefined, value: T | null) => void;

package/NavigationMenu/helpers.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+
+const getItemKey = (item, index) => {
+  var _a, _b;
+  return (_b = (_a = item.id) !== null && _a !== void 0 ? _a : item.href) !== null && _b !== void 0 ? _b : `${item.label}-${index}`;
+};
+/** Items are often recreated on every render: compare them by content. */
+const isSameItem = (a, b) => getItemKey(a, 0) === getItemKey(b, 0);
+/** `useLayoutEffect` without the server rendering warning. */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const assignRef = (ref, value) => {
+  if (typeof ref === "function") ref(value);else if (ref) ref.current = value;
+};
+
+exports.assignRef = assignRef;
+exports.getItemKey = getItemKey;
+exports.isSameItem = isSameItem;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/NavigationMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { NavigationMenu } from "./NavigationMenu";
+export type { NavigationMenuItem, NavigationMenuLayout, NavigationMenuLinkProps, NavigationMenuProps, NavigationMenuRenderLink, NavigationMenuSize, } from "./index.props";

package/NavigationMenu/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var NavigationMenu = require('./NavigationMenu.js');
+
+
+
+exports.NavigationMenu = NavigationMenu.NavigationMenu;

package/NavigationMenu/index.props.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from "react";
+/** `overflow` keeps items in a row and moves the rest to "More", `scroll` is a horizontal strip. */
+export type NavigationMenuLayout = "overflow" | "scroll";
+export type NavigationMenuSize = "s" | "m";
+export interface NavigationMenuItem {
+    /** Unique key. Defaults to `href`, then to `label`. */
+    id?: string;
+    label: string;
+    href?: string;
+    /** Current section: highlighted, gets `aria-current="page"` and never moves to "More". */
+    active?: boolean;
+    /** Icon before the label. */
+    icon?: ReactNode;
+}
+export interface NavigationMenuLinkProps {
+    item: NavigationMenuItem;
+    className: string;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement>;
+    tabIndex?: number;
+    /** Set for links inside the "More" dropdown. */
+    role?: "menuitem";
+    "aria-current"?: "page";
+}
+/** Renders an item link, for example a router `Link`. Pass every prop except `item` to the element. */
+export type NavigationMenuRenderLink = (props: NavigationMenuLinkProps) => ReactNode;
+export interface NavigationMenuProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    items: NavigationMenuItem[];
+    /** Always visible after `items`. */
+    pinnedItems?: NavigationMenuItem[];
+    /** Always inside "More", after the items that do not fit. In the `scroll` layout they end the strip. */
+    moreItems?: NavigationMenuItem[];
+    layout?: NavigationMenuLayout;
+    size?: NavigationMenuSize;
+    moreLabel?: ReactNode;
+    /** Called on a click on any item, including the ones inside "More". */
+    onItemClick?: (item: NavigationMenuItem) => void;
+    /** Custom link. Defaults to `<a href>`. */
+    renderLink?: NavigationMenuRenderLink;
+}

package/NavigationMenu/package.json

@@ -0,0 +1,9 @@
+{
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "module": "../esm/NavigationMenu/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/NavigationMenu/splitItems.d.ts

@@ -0,0 +1,30 @@
+export interface SplitInput {
+    itemWidths: number[];
+    /** Pinned items are always visible and go after the main items. */
+    pinnedWidths: number[];
+    moreWidth: number;
+    containerWidth: number;
+    /** CSS gap between items. */
+    gap: number;
+    /** Index of the active item or -1. */
+    activeIndex: number;
+    /** "More" is needed anyway, for example for `moreItems`. */
+    forceMore: boolean;
+}
+export interface SplitResult {
+    /** Indexes of the items left in the row, in the original order. */
+    visible: number[];
+    /** Indexes of the items moved to "More", in the original order. */
+    hidden: number[];
+}
+/**
+ * Splits items into the row and "More".
+ *
+ * Items go from left to right while they fit; the first one that does not fit
+ * and all after it move to "More". Space for the active item is reserved
+ * first, so it stays in the row and its neighbours move instead. Every element
+ * costs its width plus gap; the budget has one extra gap because N elements
+ * have N − 1 gaps.
+ */
+export declare const splitItems: ({ itemWidths, pinnedWidths, moreWidth, containerWidth, gap, activeIndex, forceMore, }: SplitInput) => SplitResult;
+export declare const isSameSplit: (a: SplitResult, b: SplitResult) => boolean;

package/NavigationMenu/splitItems.js

@@ -0,0 +1,54 @@
+'use strict';
+
+const sum = list => list.reduce((acc, n) => acc + n, 0);
+/**
+ * Splits items into the row and "More".
+ *
+ * Items go from left to right while they fit; the first one that does not fit
+ * and all after it move to "More". Space for the active item is reserved
+ * first, so it stays in the row and its neighbours move instead. Every element
+ * costs its width plus gap; the budget has one extra gap because N elements
+ * have N − 1 gaps.
+ */
+const splitItems = ({
+  itemWidths,
+  pinnedWidths,
+  moreWidth,
+  containerWidth,
+  gap,
+  activeIndex,
+  forceMore
+}) => {
+  const all = itemWidths.map((_, index) => index);
+  const cost = width => width + gap;
+  const pinnedCost = sum(pinnedWidths.map(cost));
+  if (!forceMore && sum(itemWidths.map(cost)) + pinnedCost <= containerWidth + gap) {
+    return {
+      visible: all,
+      hidden: []
+    };
+  }
+  const hasActive = activeIndex >= 0 && activeIndex < itemWidths.length;
+  let budget = containerWidth + gap - pinnedCost - cost(moreWidth);
+  if (hasActive) budget -= cost(itemWidths[activeIndex]);
+  const visible = [];
+  for (let index = 0; index < itemWidths.length; index++) {
+    if (index === activeIndex) continue;
+    if (cost(itemWidths[index]) > budget) break;
+    budget -= cost(itemWidths[index]);
+    visible.push(index);
+  }
+  if (hasActive) {
+    visible.push(activeIndex);
+    visible.sort((a, b) => a - b);
+  }
+  return {
+    visible,
+    hidden: all.filter(index => !visible.includes(index))
+  };
+};
+const isSameList = (a, b) => a.length === b.length && a.every((index, position) => index === b[position]);
+const isSameSplit = (a, b) => isSameList(a.visible, b.visible) && isSameList(a.hidden, b.hidden);
+
+exports.isSameSplit = isSameSplit;
+exports.splitItems = splitItems;

package/NavigationMenu/useOverflowSplit.d.ts

@@ -0,0 +1,25 @@
+import type { SplitResult } from "./splitItems";
+interface Options {
+    itemCount: number;
+    pinnedCount: number;
+    activeIndex: number;
+    forceMore: boolean;
+    /** Changes with the item labels to recalculate. */
+    contentKey: string;
+}
+/**
+ * Measures the items and splits them into the row and "More".
+ *
+ * Widths come from a hidden measurer that always renders every item, so the
+ * items inside "More" are measured too, for example after a web font loads.
+ * ResizeObserver watches the container, the measurer and the "More" trigger.
+ * Before the first measurement, and on the server, `split` is `null`.
+ */
+export declare const useOverflowSplit: ({ itemCount, pinnedCount, activeIndex, forceMore, contentKey, }: Options) => {
+    split: SplitResult | null;
+    containerRef: import("react").RefObject<HTMLElement | null>;
+    listRef: import("react").RefObject<HTMLUListElement | null>;
+    measurerRef: import("react").RefObject<HTMLDivElement | null>;
+    moreRef: import("react").RefObject<HTMLLIElement | null>;
+};
+export {};

package/NavigationMenu/useOverflowSplit.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var React = require('react');
+var helpers = require('./helpers.js');
+var splitItems = require('./splitItems.js');
+
+const getWidth = element => element ? element.getBoundingClientRect().width : 0;
+/**
+ * Measures the items and splits them into the row and "More".
+ *
+ * Widths come from a hidden measurer that always renders every item, so the
+ * items inside "More" are measured too, for example after a web font loads.
+ * ResizeObserver watches the container, the measurer and the "More" trigger.
+ * Before the first measurement, and on the server, `split` is `null`.
+ */
+const useOverflowSplit = ({
+  itemCount,
+  pinnedCount,
+  activeIndex,
+  forceMore,
+  contentKey
+}) => {
+  const containerRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const measurerRef = React.useRef(null);
+  const moreRef = React.useRef(null);
+  const [split, setSplit] = React.useState(null);
+  helpers.useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    const measurer = measurerRef.current;
+    if (!container || !measurer) return undefined;
+    const recalculate = () => {
+      const widths = Array.from(measurer.children, getWidth);
+      const gap = listRef.current ? parseFloat(getComputedStyle(listRef.current).columnGap) || 0 : 0;
+      const next = splitItems.splitItems({
+        itemWidths: widths.slice(0, itemCount),
+        pinnedWidths: widths.slice(itemCount, itemCount + pinnedCount),
+        moreWidth: getWidth(moreRef.current),
+        containerWidth: getWidth(container),
+        gap,
+        activeIndex,
+        forceMore
+      });
+      setSplit(prev => prev && splitItems.isSameSplit(prev, next) ? prev : next);
+    };
+    recalculate();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(recalculate);
+    observer.observe(container);
+    observer.observe(measurer);
+    if (moreRef.current) observer.observe(moreRef.current);
+    return () => observer.disconnect();
+  }, [itemCount, pinnedCount, activeIndex, forceMore, contentKey]);
+  return {
+    split,
+    containerRef,
+    listRef,
+    measurerRef,
+    moreRef
+  };
+};
+
+exports.useOverflowSplit = useOverflowSplit;

package/Theme/index.d.ts

@@ -692,7 +692,11 @@ export declare const THEMES: {
         "component-pagination-bg-current": string;
         "component-pagination-bg-hover": string;
         "component-pagination-focus-ring": string;
+        "component-navigation-item-text": string;
+        "component-navigation-item-text-selected": string;
+        "component-navigation-item-bg-hover": string;
         "component-navigation-item-bg-selected": string;
+        "component-navigation-item-focus-ring": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
         "palette-black": string;
@@ -1536,7 +1540,11 @@ export declare const THEMES: {
         "component-pagination-bg-current": string;
         "component-pagination-bg-hover": string;
         "component-pagination-focus-ring": string;
+        "component-navigation-item-text": string;
+        "component-navigation-item-text-selected": string;
+        "component-navigation-item-bg-hover": string;
         "component-navigation-item-bg-selected": string;
+        "component-navigation-item-focus-ring": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
         "palette-black": string;

package/Theme/themes/buenos_aires.d.ts

@@ -613,7 +613,11 @@ declare const _default: {
     "component-pagination-bg-current": string;
     "component-pagination-bg-hover": string;
     "component-pagination-focus-ring": string;
+    "component-navigation-item-text": string;
+    "component-navigation-item-text-selected": string;
+    "component-navigation-item-bg-hover": string;
     "component-navigation-item-bg-selected": string;
+    "component-navigation-item-focus-ring": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;
     "palette-black": string;

package/Theme/themes/buenos_aires.js

@@ -619,7 +619,11 @@ var THEME_BA = {
   "component-pagination-bg-current": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-pagination-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
   "component-pagination-focus-ring": theme_buenos_aires.default.BRAND_BA_LIME,
+  "component-navigation-item-text": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-navigation-item-text-selected": theme_buenos_aires.default.BRAND_BA_LIME,
+  "component-navigation-item-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
   "component-navigation-item-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-navigation-item-focus-ring": theme_buenos_aires.default.BRAND_BA_LIME,
   "component-chip-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-chip-bg-selected-strong": theme_buenos_aires.default.BRAND_BA_LIME,
   "palette-black": theme_buenos_aires.default.BRAND_BA_FOREST,

package/Theme/themes/jaipur.d.ts

@@ -613,7 +613,11 @@ declare const _default: {
     "component-pagination-bg-current": string;
     "component-pagination-bg-hover": string;
     "component-pagination-focus-ring": string;
+    "component-navigation-item-text": string;
+    "component-navigation-item-text-selected": string;
+    "component-navigation-item-bg-hover": string;
     "component-navigation-item-bg-selected": string;
+    "component-navigation-item-focus-ring": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;
     "palette-black": string;

package/Theme/themes/jaipur.js

@@ -619,7 +619,11 @@ var theme_jaipur = {
   "component-pagination-bg-current": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-pagination-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
   "component-pagination-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
+  "component-navigation-item-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-navigation-item-text-selected": theme_jaipur$1.default.BRAND_JP_PINK,
+  "component-navigation-item-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
   "component-navigation-item-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-navigation-item-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
   "component-chip-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected-strong": theme_jaipur$1.default.BRAND_JP_PINK,
   "palette-black": theme_jaipur$1.default.BRAND_JP_EGGPLANT,

package/esm/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ColorPickerProps } from "./index.props";
+export declare const ColorPicker: ({ value, onChange, presets, columns, disabled, placement, zIndex, labels: labelsProp, children, }: ColorPickerProps) => React.JSX.Element;

package/esm/ColorPicker/ColorPicker.js

@@ -0,0 +1,108 @@
+import React, { useState, useRef, useMemo } from 'react';
+import clsx from 'clsx';
+import { Button } from '../Button/index.js';
+import { Dropdown } from '../Dropdown/index.js';
+import { CustomColorModal } from './components/CustomColorModal/index.js';
+import { Palette } from './components/Palette/index.js';
+import { DEFAULT_LABELS, COLOR_PICKER_PRESETS } from './presets.js';
+import { normalizeHex } from './utils/color.js';
+import styles from './ColorPicker.module.css';
+
+const normalizePresets = presets => presets.flatMap(preset => {
+  const value = normalizeHex(preset.value);
+  return value ? [Object.assign(Object.assign({}, preset), {
+    value
+  })] : [];
+});
+const ColorPicker = ({
+  value,
+  onChange,
+  presets = COLOR_PICKER_PRESETS,
+  columns = 6,
+  disabled,
+  placement = "bottom-start",
+  zIndex,
+  labels: labelsProp,
+  children
+}) => {
+  var _a, _b;
+  const [isOpen, setOpen] = useState(false);
+  const [isCustomOpen, setCustomOpen] = useState(false);
+  const rootRef = useRef(null);
+  const overlayRef = useRef(null);
+  const labels = Object.assign(Object.assign({}, DEFAULT_LABELS), labelsProp);
+  const current = value ? normalizeHex(value) : null;
+  const normalizedPresets = useMemo(() => normalizePresets(presets), [presets]);
+  // Selection, "+" and Escape remove the focused swatch together with the
+  // dropdown: return focus to the trigger. The custom color dialog then
+  // restores focus to the trigger as well.
+  const closeDropdown = () => {
+    var _a, _b;
+    const trigger = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    if (((_b = overlayRef.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement)) && trigger instanceof HTMLElement) {
+      trigger.focus();
+    }
+    setOpen(false);
+  };
+  const handleVisibleChange = visible => {
+    if (visible) setOpen(true);else closeDropdown();
+  };
+  const handleSelect = hex => {
+    closeDropdown();
+    onChange(hex);
+  };
+  const handleAddClick = () => {
+    closeDropdown();
+    setCustomOpen(true);
+  };
+  const handleSave = hex => {
+    setCustomOpen(false);
+    onChange(hex);
+  };
+  const trigger = children !== null && children !== void 0 ? children : (/*#__PURE__*/React.createElement(Button, {
+    variant: "outline",
+    className: clsx({
+      [styles.trigger_empty]: !current
+    }),
+    disabled: disabled,
+    "aria-label": labels.trigger,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: clsx(styles.dot, {
+        [styles.dot_hidden]: !current
+      }),
+      style: current ? {
+        backgroundColor: current
+      } : undefined
+    })
+  }));
+  return /*#__PURE__*/React.createElement("span", {
+    ref: rootRef,
+    className: styles.root
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ["click"],
+    visible: isOpen,
+    onVisibleChange: handleVisibleChange,
+    preventAutoClose: true,
+    disabled: disabled,
+    placement: placement,
+    zIndex: zIndex,
+    overlay: /*#__PURE__*/React.createElement("div", {
+      ref: overlayRef
+    }, /*#__PURE__*/React.createElement(Palette, {
+      presets: normalizedPresets,
+      value: current,
+      columns: columns,
+      labels: labels,
+      onSelect: handleSelect,
+      onAddClick: handleAddClick,
+      onTabOut: closeDropdown
+    }))
+  }, trigger), isCustomOpen && (/*#__PURE__*/React.createElement(CustomColorModal, {
+    initialColor: (_b = current !== null && current !== void 0 ? current : (_a = normalizedPresets[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "#000000",
+    labels: labels,
+    onSave: handleSave,
+    onClose: () => setCustomOpen(false)
+  })));
+};
+
+export { ColorPicker };

package/esm/ColorPicker/ColorPicker.module.css

@@ -0,0 +1,22 @@
+.root {
+  display: contents;
+}
+
+.dot {
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-default);
+  display: block;
+  height: var(--space-4);
+  width: var(--space-4);
+}
+
+.trigger_empty {
+  background-image: url("./assets/none.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.dot_hidden {
+  display: none;
+}

package/esm/ColorPicker/components/ColorPreview/ColorPreview.module.css

@@ -0,0 +1,23 @@
+.root {
+  align-items: center;
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-subtle);
+  display: inline-flex;
+  flex-shrink: 0;
+  font-family: var(--font-family-ui);
+  font-size: var(--font-size-heading-md);
+  font-weight: var(--font-weight-medium);
+  height: var(--space-12);
+  justify-content: center;
+  line-height: 1;
+  transition: background-color 0.1s ease, color 0.1s ease;
+  width: var(--space-12);
+}
+
+.text_light {
+  color: var(--color-neutral-0);
+}
+
+.text_dark {
+  color: var(--color-neutral-950);
+}

package/esm/ColorPicker/components/ColorPreview/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { HSV } from "../../utils/color";
+interface ColorPreviewProps {
+    color: HSV;
+    children: ReactNode;
+}
+/** Circle with the color and a sample text in the automatically adjusted color. */
+export declare const ColorPreview: ({ color, children }: ColorPreviewProps) => React.JSX.Element;
+export {};