@j2-health/design-system 0.6.9 → 0.6.11

package/dist/index.cjs

@@ -58,6 +58,7 @@ const require_StatusPill = require("./src/components/statusPill/StatusPill.cjs")
 const require_useSteps = require("./src/components/steps/useSteps.cjs");
 const require_Steps = require("./src/components/steps/Steps.cjs");
 const require_StepDrawer = require("./src/components/stepDrawer/StepDrawer.cjs");
+const require_SwatchPicker = require("./src/components/swatchPicker/SwatchPicker.cjs");
 const require_SwatchStrip = require("./src/components/swatchStrip/SwatchStrip.cjs");
 const require_Switch = require("./src/components/switch/Switch.cjs");
 const require_Table = require("./src/components/table/Table.cjs");
@@ -126,6 +127,7 @@ exports.StepDrawer = require_StepDrawer.StepDrawer;
 exports.Steps = require_Steps.Steps;
 exports.SummarizedSelect = require_SummarizedSelect.SummarizedSelect;
 exports.Swatch = require_Swatch.Swatch;
+exports.SwatchPicker = require_SwatchPicker.SwatchPicker;
 exports.SwatchStrip = require_SwatchStrip.SwatchStrip;
 exports.Switch = require_Switch.Switch;
 exports.Table = require_Table.Table;

package/dist/index.d.ts

@@ -44,6 +44,7 @@ export * from './src/components/statusPill/index.js';
 export * from './src/components/stepDrawer/index.js';
 export * from './src/components/steps/index.js';
 export * from './src/components/swatch/index.js';
+export * from './src/components/swatchPicker/index.js';
 export * from './src/components/swatchStrip/index.js';
 export * from './src/components/switch/index.js';
 export * from './src/components/table/index.js';

package/dist/index.js

@@ -57,6 +57,7 @@ import { StatusPill } from "./src/components/statusPill/StatusPill.js";
 import { useSteps } from "./src/components/steps/useSteps.js";
 import { Steps } from "./src/components/steps/Steps.js";
 import { StepDrawer, useStepDrawerSlots } from "./src/components/stepDrawer/StepDrawer.js";
+import { SwatchPicker } from "./src/components/swatchPicker/SwatchPicker.js";
 import { SwatchStrip } from "./src/components/swatchStrip/SwatchStrip.js";
 import { Switch } from "./src/components/switch/Switch.js";
 import { Table } from "./src/components/table/Table.js";
@@ -66,4 +67,4 @@ import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import { icons } from "./index2.js";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AntdTextArea, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Callout, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FileDropzone, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioCardGroup, RadioGroup, Rate, Select, SelectAll, Skeleton, Slider, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AntdTextArea, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Callout, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FileDropzone, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioCardGroup, RadioGroup, Rate, Select, SelectAll, Skeleton, Slider, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchPicker, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };

package/dist/index2.js

@@ -57,6 +57,7 @@ import { StatusPill } from "./src/components/statusPill/StatusPill.js";
 import { useSteps } from "./src/components/steps/useSteps.js";
 import { Steps } from "./src/components/steps/Steps.js";
 import { StepDrawer, useStepDrawerSlots } from "./src/components/stepDrawer/StepDrawer.js";
+import { SwatchPicker } from "./src/components/swatchPicker/SwatchPicker.js";
 import { SwatchStrip } from "./src/components/swatchStrip/SwatchStrip.js";
 import { Switch } from "./src/components/switch/Switch.js";
 import { Table } from "./src/components/table/Table.js";
@@ -66,4 +67,4 @@ import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import * as icons from "@phosphor-icons/react";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AntdTextArea, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Callout, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FileDropzone, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioCardGroup, RadioGroup, Rate, Select, SelectAll, Skeleton, Slider, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AntdTextArea, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Callout, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FileDropzone, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioCardGroup, RadioGroup, Rate, Select, SelectAll, Skeleton, Slider, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchPicker, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };

package/dist/src/components/checkboxTree/CheckboxTree.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_utils = require("./utils.cjs");
 const require_TreeNode = require("./TreeNode.cjs");
+const require_utils = require("./utils.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/src/components/checkboxTree/CheckboxTree.js

@@ -1,5 +1,5 @@
-import { getAllLeafKeys, getAllParentKeys, getLeafKeys } from "./utils.js";
 import { TreeNode } from "./TreeNode.js";
+import { getAllLeafKeys, getAllParentKeys, getLeafKeys } from "./utils.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/components/checkboxTree/CheckboxTree.tsx

package/dist/src/components/filterform/FilterGroup.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Button = require("../button/Button.cjs");
-const require_FiltersForm_module = require("./FiltersForm.module.css.cjs");
 const require_FilterInput = require("./FilterInput.cjs");
+const require_FiltersForm_module = require("./FiltersForm.module.css.cjs");
 let _phosphor_icons_react = require("@phosphor-icons/react");
 _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/src/components/filterform/FilterGroup.js

@@ -1,6 +1,6 @@
 import { Button } from "../button/Button.js";
-import FiltersForm_module_default from "./FiltersForm.module.css.js";
 import { FilterInput } from "./FilterInput.js";
+import FiltersForm_module_default from "./FiltersForm.module.css.js";
 import { TrashIcon } from "@phosphor-icons/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";

package/dist/src/components/filterform/FilterInput.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_filterHelpers = require("./filterHelpers.cjs");
 const require_useFilterField = require("./useFilterField.cjs");
+const require_filterHelpers = require("./filterHelpers.cjs");
 let react = require("react");
 let react$1 = require_runtime.__toESM(react, 1);
 react = require_runtime.__toESM(react);

package/dist/src/components/filterform/FilterInput.js

@@ -1,5 +1,5 @@
-import { normalizeMultiValues, tooManyValuesMessage } from "./filterHelpers.js";
 import { useFilterField } from "./useFilterField.js";
+import { normalizeMultiValues, tooManyValuesMessage } from "./filterHelpers.js";
 import * as React from "react";
 import { Input, InputNumber, Select, Typography } from "antd";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/src/components/form/FormItem.cjs

@@ -1,5 +1,5 @@
-const require_FormItemFieldContext = require("./FormItemFieldContext.cjs");
 const require_FormikField = require("./FormikField.cjs");
+const require_FormItemFieldContext = require("./FormItemFieldContext.cjs");
 let antd = require("antd");
 let react_jsx_runtime = require("react/jsx-runtime");
 let formik = require("formik");

package/dist/src/components/form/FormItem.js

@@ -1,5 +1,5 @@
-import { FormItemFieldContext } from "./FormItemFieldContext.js";
 import { FormikField } from "./FormikField.js";
+import { FormItemFieldContext } from "./FormItemFieldContext.js";
 import { Form } from "antd";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getIn, useFormikContext } from "formik";

package/dist/src/components/input/AntdInput.d.ts

@@ -61,7 +61,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     name?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     part?: string | undefined | undefined;
-    type?: import('@rc-component/input/lib/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
+    type?: import('@rc-component/input/es/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
     width?: number | string | undefined | undefined;
     role?: import('react').AriaRole | undefined;
     tabIndex?: number | undefined | undefined;
@@ -289,7 +289,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionStart?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
-    value?: import('@rc-component/input/lib/interface').ValueType;
+    value?: import('@rc-component/input/es/interface').ValueType;
     prefixCls?: string | undefined;
     list?: string | undefined | undefined;
     step?: number | string | undefined | undefined;
@@ -342,7 +342,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
     multiple?: boolean | undefined | undefined;
-    count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
+    count?: import('@rc-component/input/es/interface').CountConfig | undefined;
     placeholder?: string | undefined | undefined;
     checked?: boolean | undefined | undefined;
     required?: boolean | undefined | undefined;
@@ -355,14 +355,11 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     src?: string | undefined | undefined;
     readOnly?: boolean | undefined | undefined;
     onClear?: (() => void) | undefined;
-    allowClear?: boolean | {
-        disabled?: boolean;
-        clearIcon?: import('react').ReactNode;
-    } | undefined;
+    allowClear?: (boolean | import('@rc-component/util').AllowClearConfig) | undefined;
     suffix?: import('react').ReactNode;
     onPressEnter?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
     showCount?: boolean | {
-        formatter: import('@rc-component/input/lib/interface').ShowCountFormatter;
+        formatter: import('@rc-component/input/es/interface').ShowCountFormatter;
     } | undefined;
     htmlSize?: number | undefined;
 } & import('react').RefAttributes<InputRef>>;

package/dist/src/components/input/AntdSearchInput.d.ts

@@ -73,7 +73,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     name?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     part?: string | undefined | undefined;
-    type?: import('@rc-component/input/lib/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
+    type?: import('@rc-component/input/es/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
     width?: number | string | undefined | undefined;
     role?: import('react').AriaRole | undefined;
     tabIndex?: number | undefined | undefined;
@@ -301,7 +301,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionStart?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
-    value?: import('@rc-component/input/lib/interface').ValueType;
+    value?: import('@rc-component/input/es/interface').ValueType;
     prefixCls?: string | undefined;
     list?: string | undefined | undefined;
     step?: number | string | undefined | undefined;
@@ -354,7 +354,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
     multiple?: boolean | undefined | undefined;
-    count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
+    count?: import('@rc-component/input/es/interface').CountConfig | undefined;
     placeholder?: string | undefined | undefined;
     checked?: boolean | undefined | undefined;
     required?: boolean | undefined | undefined;
@@ -367,13 +367,10 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     src?: string | undefined | undefined;
     readOnly?: boolean | undefined | undefined;
     onClear?: (() => void) | undefined;
-    allowClear?: boolean | {
-        disabled?: boolean;
-        clearIcon?: import('react').ReactNode;
-    } | undefined;
+    allowClear?: (boolean | import('@rc-component/util').AllowClearConfig) | undefined;
     suffix?: import('react').ReactNode;
     showCount?: boolean | {
-        formatter: import('@rc-component/input/lib/interface').ShowCountFormatter;
+        formatter: import('@rc-component/input/es/interface').ShowCountFormatter;
     } | undefined;
     htmlSize?: number | undefined;
 } & import('react').RefAttributes<InputRef>>;

package/dist/src/components/input/AntdTextArea.d.ts

@@ -273,7 +273,7 @@ export declare const AntdTextArea: import('react').ForwardRefExoticComponent<{
     onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLTextAreaElement> | undefined;
     onTransitionStart?: import('react').TransitionEventHandler<HTMLTextAreaElement> | undefined;
     onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLTextAreaElement> | undefined;
-    value?: import('@rc-component/input/lib/interface').ValueOrTextAreaValue;
+    value?: import('@rc-component/input/es/interface').ValueOrTextAreaValue;
     prefixCls?: string | undefined;
     disabled?: boolean | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
@@ -321,7 +321,7 @@ export declare const AntdTextArea: import('react').ForwardRefExoticComponent<{
     exportparts?: string | undefined | undefined;
     wrap?: string | undefined | undefined;
     rows?: number | undefined | undefined;
-    count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
+    count?: import('@rc-component/input/es/interface').CountConfig | undefined;
     placeholder?: string | undefined | undefined;
     required?: boolean | undefined | undefined;
     autoComplete?: string | undefined | undefined;
@@ -331,13 +331,10 @@ export declare const AntdTextArea: import('react').ForwardRefExoticComponent<{
     minLength?: number | undefined | undefined;
     readOnly?: boolean | undefined | undefined;
     onClear?: (() => void) | undefined;
-    allowClear?: boolean | {
-        disabled?: boolean;
-        clearIcon?: import('react').ReactNode;
-    } | undefined;
+    allowClear?: (boolean | import('@rc-component/util').AllowClearConfig) | undefined;
     onPressEnter?: import('react').KeyboardEventHandler<HTMLTextAreaElement> | undefined;
     showCount?: boolean | {
-        formatter: import('@rc-component/input/lib/interface').ShowCountFormatter;
+        formatter: import('@rc-component/input/es/interface').ShowCountFormatter;
     } | undefined;
     onResize?: ((size: {
         width: number;

package/dist/src/components/legacyNavMenu/LegacyNavMenu.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_j2_logo_menu_collapse = require("../../svgs/j2-logo-menu-collapse.svg.cjs");
 const require_LegacyNavMenu_module = require("./LegacyNavMenu.module.css.cjs");
+const require_j2_logo_menu_collapse = require("../../svgs/j2-logo-menu-collapse.svg.cjs");
 const require_UserProfile = require("./UserProfile.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);

package/dist/src/components/legacyNavMenu/LegacyNavMenu.js

@@ -1,5 +1,5 @@
-import SvgJ2LogoMenuCollapse from "../../svgs/j2-logo-menu-collapse.svg.js";
 import LegacyNavMenu_module_default from "./LegacyNavMenu.module.css.js";
+import SvgJ2LogoMenuCollapse from "../../svgs/j2-logo-menu-collapse.svg.js";
 import { UserProfile } from "./UserProfile.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/src/components/listpopover/ListPopover.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_Button = require("../button/Button.cjs");
 const require_Popover = require("../popover/Popover.cjs");
+const require_Button = require("../button/Button.cjs");
 const require_Tooltip = require("../tooltip/Tooltip.cjs");
 const require_ListPopover_module = require("./ListPopover.module.css.cjs");
 let _phosphor_icons_react = require("@phosphor-icons/react");

package/dist/src/components/listpopover/ListPopover.js

@@ -1,5 +1,5 @@
-import { Button } from "../button/Button.js";
 import { Popover } from "../popover/Popover.js";
+import { Button } from "../button/Button.js";
 import { Tooltip } from "../tooltip/Tooltip.js";
 import ListPopover_module_default from "./ListPopover.module.css.js";
 import { CopyIcon } from "@phosphor-icons/react";

package/dist/src/components/navMenu/NavMenu.cjs

@@ -1,12 +1,12 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_Button = require("../button/Button.cjs");
-const require_Tooltip = require("../tooltip/Tooltip.cjs");
 const require_Menu = require("../menu/Menu.cjs");
 const require_j2_logo_menu_collapse = require("../../svgs/j2-logo-menu-collapse.svg.cjs");
 const require_j2_logo_menu = require("../../svgs/j2-logo-menu.svg.cjs");
 const require_menu_sidebar_expand = require("../../svgs/menu-sidebar-expand.svg.cjs");
 const require_menu_sidebar_collapse = require("../../svgs/menu-sidebar-collapse.svg.cjs");
+const require_Button = require("../button/Button.cjs");
 const require_NavMenu_module = require("./NavMenu.module.css.cjs");
+const require_Tooltip = require("../tooltip/Tooltip.cjs");
 let react = require("react");
 let react$1 = require_runtime.__toESM(react, 1);
 react = require_runtime.__toESM(react);

package/dist/src/components/navMenu/NavMenu.js

@@ -1,11 +1,11 @@
-import { Button } from "../button/Button.js";
-import { Tooltip } from "../tooltip/Tooltip.js";
 import { Menu } from "../menu/Menu.js";
 import SvgJ2LogoMenuCollapse from "../../svgs/j2-logo-menu-collapse.svg.js";
 import SvgJ2LogoMenu from "../../svgs/j2-logo-menu.svg.js";
 import SvgMenuSidebarExpand from "../../svgs/menu-sidebar-expand.svg.js";
 import SvgMenuSidebarCollapse from "../../svgs/menu-sidebar-collapse.svg.js";
+import { Button } from "../button/Button.js";
 import NavMenu_module_default from "./NavMenu.module.css.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";

package/dist/src/components/swatchPicker/SwatchPicker.cjs

@@ -0,0 +1,174 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Button = require("../button/Button.cjs");
+const require_Popover = require("../popover/Popover.cjs");
+const require_Swatch = require("../swatch/Swatch.cjs");
+let react = require("react");
+let _phosphor_icons_react = require("@phosphor-icons/react");
+_phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+// src/components/swatchPicker/SwatchPicker.tsx
+var COLUMNS = 8;
+var RADIUS = 2;
+var CENTERED = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+};
+var STEPS = {
+	ArrowRight: 1,
+	ArrowLeft: -1,
+	ArrowDown: COLUMNS,
+	ArrowUp: -8
+};
+var modalOrPage = (trigger) => trigger.closest(".ant-modal-container") ?? document.body;
+var channels = (painted) => {
+	const numbers = painted.match(/[\d.]+/g)?.map(Number);
+	if (!numbers || numbers.length < 3) return null;
+	const scale = painted.startsWith("color(") ? 255 : 1;
+	return numbers.slice(0, 3).map((n) => n * scale);
+};
+var isDark = (painted) => {
+	const rgb = channels(painted);
+	return rgb ? (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3 < 140 : true;
+};
+var Check = () => {
+	const ref = (0, react.useRef)(null);
+	const [dark, setDark] = (0, react.useState)(true);
+	(0, react.useLayoutEffect)(() => {
+		const swatch = ref.current?.parentElement;
+		if (swatch) setDark(isDark(getComputedStyle(swatch).backgroundColor));
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref,
+		className: "flex",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.CheckIcon, {
+			size: 12,
+			weight: "bold",
+			color: "currentColor",
+			className: (0, classnames.default)("block", dark ? "text-white" : "text-j2-text")
+		})
+	});
+};
+var SwatchGrid = ({ colors, value, defaultValue, label, onPick, gridRef, size }) => {
+	const [focusIndex, setFocusIndex] = (0, react.useState)(() => Math.max(0, colors.findIndex((c) => c.value === value)));
+	const swatches = (0, react.useRef)([]);
+	const onKeyDown = (event) => {
+		const step = STEPS[event.key];
+		if (step === void 0) return;
+		event.preventDefault();
+		const next = focusIndex + step;
+		if (next < 0 || next >= colors.length) return;
+		setFocusIndex(next);
+		swatches.current[next]?.focus();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: gridRef,
+			role: "radiogroup",
+			"aria-label": `Color for ${label}`,
+			className: "grid w-fit grid-cols-8 gap-1",
+			onKeyDown,
+			children: colors.map((c, index) => {
+				const selected = c.value === value;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					ref: (node) => {
+						swatches.current[index] = node;
+					},
+					type: "button",
+					role: "radio",
+					"aria-checked": selected,
+					"aria-label": c.label ?? c.value,
+					tabIndex: index === focusIndex ? 0 : -1,
+					onClick: () => {
+						setFocusIndex(index);
+						onPick(c.value);
+					},
+					className: "flex cursor-pointer rounded-j2-xs border-0 bg-transparent p-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Swatch.Swatch, {
+						color: c.color ?? c.value,
+						size,
+						radius: RADIUS,
+						style: CENTERED,
+						children: selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, {})
+					})
+				}, c.value);
+			})
+		}), defaultValue !== void 0 && value !== defaultValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+			type: "link",
+			size: "small",
+			className: "self-start !px-0",
+			onClick: () => onPick(defaultValue),
+			children: "Reset to default"
+		})]
+	});
+};
+/**
+* Pick one color from a fixed set, in a popover or inline. A grid rather than
+* a free color input, so two items can't end up on colors that are hard to
+* tell apart. The popover opens on the current color and closes on a pick.
+*/
+var SwatchPicker = ({ colors, value, label, onChange, defaultValue, variant = "popover", children, placement = "rightTop", getPopupContainer = modalOrPage, onOpenChange }) => {
+	const [open, setOpenState] = (0, react.useState)(false);
+	const setOpen = (next) => {
+		setOpenState(next);
+		onOpenChange?.(next);
+	};
+	const gridRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const frame = requestAnimationFrame(() => gridRef.current?.querySelector("[tabindex=\"0\"]")?.focus());
+		return () => cancelAnimationFrame(frame);
+	}, [open]);
+	const close = () => {
+		setOpen(false);
+		triggerRef.current?.querySelector("button, [tabindex]")?.focus();
+	};
+	if (variant === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwatchGrid, {
+		colors,
+		value,
+		defaultValue,
+		label,
+		onPick: onChange,
+		size: 20
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
+		trigger: "click",
+		placement,
+		open,
+		onOpenChange: setOpen,
+		getPopupContainer,
+		destroyOnHidden: true,
+		paddingSize: "xs",
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			onKeyDown: (event) => {
+				if (event.key !== "Escape") return;
+				event.stopPropagation();
+				close();
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwatchGrid, {
+				colors,
+				value,
+				defaultValue,
+				label,
+				gridRef,
+				size: 24,
+				onPick: (next) => {
+					onChange(next);
+					close();
+				}
+			})
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			ref: triggerRef,
+			className: "inline-flex",
+			children
+		})
+	});
+};
+exports.SwatchPicker = SwatchPicker;
+
+//# sourceMappingURL=SwatchPicker.cjs.map

package/dist/src/components/swatchPicker/SwatchPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchPicker.cjs","names":["useRef","useState","CheckIcon","cx","Swatch","Button","Popover"],"sources":["../../../../src/components/swatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { Button } from '../button'\nimport { Popover, type PopoverProps } from '../popover'\nimport { Swatch } from '../swatch'\n\nexport type SwatchPickerColor = {\n  /** What `onChange` reports: a token name, a hex, any id. */\n  value: string\n  /** Any CSS color. Defaults to `value`. */\n  color?: string\n  /** The swatch's accessible name. Defaults to `value`. */\n  label?: string\n}\n\nexport type SwatchPickerProps = {\n  /** The colors offered, in order. */\n  colors: SwatchPickerColor[]\n  /** The current color's `value`. */\n  value: string\n  /** What is being colored, for the grid's name: \"Color for {label}\". */\n  label: string\n  onChange: (value: string) => void\n  /** The starting color. \"Reset to default\" shows once `value` differs from it. */\n  defaultValue?: string\n  /**\n   * - `'popover'`: the grid opens from `children` and closes on a pick.\n   * - `'inline'`: the grid in place, with no control or popover, and smaller\n   *   swatches (20px, against 24px in the popover).\n   */\n  variant?: 'popover' | 'inline'\n  /** The control that opens the popover. Not used inline. */\n  children?: ReactNode\n  /** The popover's placement. */\n  placement?: PopoverProps['placement']\n  /** Where the popover renders. Defaults to the enclosing modal, or the page when there is none. */\n  getPopupContainer?: PopoverProps['getPopupContainer']\n  /**\n   * Called when the popover opens or closes, e.g. to keep a panel around it\n   * open meanwhile. Not used inline.\n   */\n  onOpenChange?: (open: boolean) => void\n}\n\nconst COLUMNS = 8\n\n// The maps picker's corners (2px); Swatch's default is 4px.\nconst RADIUS = 2\n\n// Centers the check on its swatch.\nconst CENTERED = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n} as const\n\n// Arrow keys move through the grid; each is the step in swatches.\nconst STEPS: Record<string, number> = {\n  ArrowRight: 1,\n  ArrowLeft: -1,\n  ArrowDown: COLUMNS,\n  ArrowUp: -COLUMNS,\n}\n\n// Inside a modal the popover renders in the modal's container. A popover on\n// the page body can't take focus, since the modal pulls it back, and the\n// modal's outer box ignores the pointer, so only its container takes clicks.\nconst modalOrPage = (trigger: HTMLElement) =>\n  trigger.closest<HTMLElement>('.ant-modal-container') ?? document.body\n\n// The first three channels of a painted color, 0 to 255. Browsers report\n// `rgb(…)` for most colors and `color(srgb …)`, 0 to 1, for color-mix results.\nconst channels = (painted: string) => {\n  const numbers = painted.match(/[\\d.]+/g)?.map(Number)\n  if (!numbers || numbers.length < 3) return null\n  const scale = painted.startsWith('color(') ? 255 : 1\n  return numbers.slice(0, 3).map((n) => n * scale)\n}\n\n// Whether a swatch needs a light check mark: Rec. 601 luma, which is enough\n// for a light-or-dark decision.\nconst isDark = (painted: string) => {\n  const rgb = channels(painted)\n  return rgb ? (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 < 140 : true\n}\n\n// Colors may be CSS variables, so the check reads its swatch as painted.\nconst Check = () => {\n  const ref = useRef<HTMLSpanElement>(null)\n  const [dark, setDark] = useState(true)\n  useLayoutEffect(() => {\n    const swatch = ref.current?.parentElement\n    if (swatch) setDark(isDark(getComputedStyle(swatch).backgroundColor))\n  }, [])\n  return (\n    <span ref={ref} className=\"flex\">\n      <CheckIcon\n        size={12}\n        weight=\"bold\"\n        color=\"currentColor\"\n        className={cx('block', dark ? 'text-white' : 'text-j2-text')}\n      />\n    </span>\n  )\n}\n\n// The grid and its Reset link. Focus rests on one swatch at a time (roving\n// tabindex), so the grid is one Tab stop and the arrow keys move within it;\n// Enter or Space picks. It starts on the current color, or the first when\n// that isn't in the grid.\nconst SwatchGrid = ({\n  colors,\n  value,\n  defaultValue,\n  label,\n  onPick,\n  gridRef,\n  size,\n}: {\n  colors: SwatchPickerColor[]\n  value: string\n  defaultValue?: string\n  label: string\n  onPick: (value: string) => void\n  gridRef?: RefObject<HTMLDivElement | null>\n  /** Swatch side in px. */\n  size: number\n}) => {\n  const [focusIndex, setFocusIndex] = useState(() =>\n    Math.max(\n      0,\n      colors.findIndex((c) => c.value === value)\n    )\n  )\n  const swatches = useRef<(HTMLButtonElement | null)[]>([])\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    const step = STEPS[event.key]\n    if (step === undefined) return\n    event.preventDefault()\n    const next = focusIndex + step\n    if (next < 0 || next >= colors.length) return\n    setFocusIndex(next)\n    swatches.current[next]?.focus()\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div\n        ref={gridRef}\n        role=\"radiogroup\"\n        aria-label={`Color for ${label}`}\n        // Sized to its swatches: in a wider box the columns would stretch,\n        // spreading the swatches and each button past its square.\n        className=\"grid w-fit grid-cols-8 gap-1\"\n        onKeyDown={onKeyDown}\n      >\n        {colors.map((c, index) => {\n          const selected = c.value === value\n          return (\n            <button\n              key={c.value}\n              ref={(node) => {\n                swatches.current[index] = node\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={selected}\n              aria-label={c.label ?? c.value}\n              tabIndex={index === focusIndex ? 0 : -1}\n              onClick={() => {\n                // Inline the grid stays, so arrow keys go on from the pick.\n                setFocusIndex(index)\n                onPick(c.value)\n              }}\n              className=\"flex cursor-pointer rounded-j2-xs border-0 bg-transparent p-0\"\n            >\n              <Swatch\n                color={c.color ?? c.value}\n                size={size}\n                radius={RADIUS}\n                style={CENTERED}\n              >\n                {selected && <Check />}\n              </Swatch>\n            </button>\n          )\n        })}\n      </div>\n      {/* Only offered when it would change something. */}\n      {defaultValue !== undefined && value !== defaultValue && (\n        <Button\n          type=\"link\"\n          size=\"small\"\n          className=\"self-start !px-0\"\n          onClick={() => onPick(defaultValue)}\n        >\n          Reset to default\n        </Button>\n      )}\n    </div>\n  )\n}\n\n/**\n * Pick one color from a fixed set, in a popover or inline. A grid rather than\n * a free color input, so two items can't end up on colors that are hard to\n * tell apart. The popover opens on the current color and closes on a pick.\n */\nexport const SwatchPicker = ({\n  colors,\n  value,\n  label,\n  onChange,\n  defaultValue,\n  variant = 'popover',\n  children,\n  placement = 'rightTop',\n  getPopupContainer = modalOrPage,\n  onOpenChange,\n}: SwatchPickerProps) => {\n  const [open, setOpenState] = useState(false)\n  const setOpen = (next: boolean) => {\n    setOpenState(next)\n    onOpenChange?.(next)\n  }\n  const gridRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLSpanElement>(null)\n\n  // Focus moves into the grid on open, onto the swatch that is its Tab stop:\n  // a frame later, once the popover is in the page. (afterOpenChange waits\n  // for the open animation.)\n  useEffect(() => {\n    if (!open) return\n    const frame = requestAnimationFrame(() =>\n      gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n    )\n    return () => cancelAnimationFrame(frame)\n  }, [open])\n\n  // A pick or Escape closes it and returns focus to the control that opened it.\n  const close = () => {\n    setOpen(false)\n    triggerRef.current\n      ?.querySelector<HTMLElement>('button, [tabindex]')\n      ?.focus()\n  }\n\n  if (variant === 'inline') {\n    return (\n      <SwatchGrid\n        colors={colors}\n        value={value}\n        defaultValue={defaultValue}\n        label={label}\n        onPick={onChange}\n        size={20}\n      />\n    )\n  }\n\n  return (\n    <Popover\n      trigger=\"click\"\n      placement={placement}\n      open={open}\n      onOpenChange={setOpen}\n      getPopupContainer={getPopupContainer}\n      destroyOnHidden\n      paddingSize=\"xs\"\n      content={\n        <div\n          onKeyDown={(event) => {\n            // Only the picker closes, not a modal around it.\n            if (event.key !== 'Escape') return\n            event.stopPropagation()\n            close()\n          }}\n        >\n          <SwatchGrid\n            colors={colors}\n            value={value}\n            defaultValue={defaultValue}\n            label={label}\n            gridRef={gridRef}\n            size={24}\n            onPick={(next) => {\n              onChange(next)\n              close()\n            }}\n          />\n        </div>\n      }\n    >\n      <span ref={triggerRef} className=\"inline-flex\">\n        {children}\n      </span>\n    </Popover>\n  )\n}\n"],"mappings":"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"}

package/dist/src/components/swatchPicker/SwatchPicker.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { PopoverProps } from '../popover/index.js';
+export type SwatchPickerColor = {
+    /** What `onChange` reports: a token name, a hex, any id. */
+    value: string;
+    /** Any CSS color. Defaults to `value`. */
+    color?: string;
+    /** The swatch's accessible name. Defaults to `value`. */
+    label?: string;
+};
+export type SwatchPickerProps = {
+    /** The colors offered, in order. */
+    colors: SwatchPickerColor[];
+    /** The current color's `value`. */
+    value: string;
+    /** What is being colored, for the grid's name: "Color for {label}". */
+    label: string;
+    onChange: (value: string) => void;
+    /** The starting color. "Reset to default" shows once `value` differs from it. */
+    defaultValue?: string;
+    /**
+     * - `'popover'`: the grid opens from `children` and closes on a pick.
+     * - `'inline'`: the grid in place, with no control or popover, and smaller
+     *   swatches (20px, against 24px in the popover).
+     */
+    variant?: 'popover' | 'inline';
+    /** The control that opens the popover. Not used inline. */
+    children?: ReactNode;
+    /** The popover's placement. */
+    placement?: PopoverProps['placement'];
+    /** Where the popover renders. Defaults to the enclosing modal, or the page when there is none. */
+    getPopupContainer?: PopoverProps['getPopupContainer'];
+    /**
+     * Called when the popover opens or closes, e.g. to keep a panel around it
+     * open meanwhile. Not used inline.
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Pick one color from a fixed set, in a popover or inline. A grid rather than
+ * a free color input, so two items can't end up on colors that are hard to
+ * tell apart. The popover opens on the current color and closes on a pick.
+ */
+export declare const SwatchPicker: ({ colors, value, label, onChange, defaultValue, variant, children, placement, getPopupContainer, onOpenChange, }: SwatchPickerProps) => import('react').JSX.Element;

package/dist/src/components/swatchPicker/SwatchPicker.js

@@ -0,0 +1,171 @@
+import { Button } from "../button/Button.js";
+import { Popover } from "../popover/Popover.js";
+import { Swatch } from "../swatch/Swatch.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { CheckIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+// src/components/swatchPicker/SwatchPicker.tsx
+var COLUMNS = 8;
+var RADIUS = 2;
+var CENTERED = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+};
+var STEPS = {
+	ArrowRight: 1,
+	ArrowLeft: -1,
+	ArrowDown: COLUMNS,
+	ArrowUp: -8
+};
+var modalOrPage = (trigger) => trigger.closest(".ant-modal-container") ?? document.body;
+var channels = (painted) => {
+	const numbers = painted.match(/[\d.]+/g)?.map(Number);
+	if (!numbers || numbers.length < 3) return null;
+	const scale = painted.startsWith("color(") ? 255 : 1;
+	return numbers.slice(0, 3).map((n) => n * scale);
+};
+var isDark = (painted) => {
+	const rgb = channels(painted);
+	return rgb ? (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3 < 140 : true;
+};
+var Check = () => {
+	const ref = useRef(null);
+	const [dark, setDark] = useState(true);
+	useLayoutEffect(() => {
+		const swatch = ref.current?.parentElement;
+		if (swatch) setDark(isDark(getComputedStyle(swatch).backgroundColor));
+	}, []);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: "flex",
+		children: /* @__PURE__ */ jsx(CheckIcon, {
+			size: 12,
+			weight: "bold",
+			color: "currentColor",
+			className: cx("block", dark ? "text-white" : "text-j2-text")
+		})
+	});
+};
+var SwatchGrid = ({ colors, value, defaultValue, label, onPick, gridRef, size }) => {
+	const [focusIndex, setFocusIndex] = useState(() => Math.max(0, colors.findIndex((c) => c.value === value)));
+	const swatches = useRef([]);
+	const onKeyDown = (event) => {
+		const step = STEPS[event.key];
+		if (step === void 0) return;
+		event.preventDefault();
+		const next = focusIndex + step;
+		if (next < 0 || next >= colors.length) return;
+		setFocusIndex(next);
+		swatches.current[next]?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: gridRef,
+			role: "radiogroup",
+			"aria-label": `Color for ${label}`,
+			className: "grid w-fit grid-cols-8 gap-1",
+			onKeyDown,
+			children: colors.map((c, index) => {
+				const selected = c.value === value;
+				return /* @__PURE__ */ jsx("button", {
+					ref: (node) => {
+						swatches.current[index] = node;
+					},
+					type: "button",
+					role: "radio",
+					"aria-checked": selected,
+					"aria-label": c.label ?? c.value,
+					tabIndex: index === focusIndex ? 0 : -1,
+					onClick: () => {
+						setFocusIndex(index);
+						onPick(c.value);
+					},
+					className: "flex cursor-pointer rounded-j2-xs border-0 bg-transparent p-0",
+					children: /* @__PURE__ */ jsx(Swatch, {
+						color: c.color ?? c.value,
+						size,
+						radius: RADIUS,
+						style: CENTERED,
+						children: selected && /* @__PURE__ */ jsx(Check, {})
+					})
+				}, c.value);
+			})
+		}), defaultValue !== void 0 && value !== defaultValue && /* @__PURE__ */ jsx(Button, {
+			type: "link",
+			size: "small",
+			className: "self-start !px-0",
+			onClick: () => onPick(defaultValue),
+			children: "Reset to default"
+		})]
+	});
+};
+/**
+* Pick one color from a fixed set, in a popover or inline. A grid rather than
+* a free color input, so two items can't end up on colors that are hard to
+* tell apart. The popover opens on the current color and closes on a pick.
+*/
+var SwatchPicker = ({ colors, value, label, onChange, defaultValue, variant = "popover", children, placement = "rightTop", getPopupContainer = modalOrPage, onOpenChange }) => {
+	const [open, setOpenState] = useState(false);
+	const setOpen = (next) => {
+		setOpenState(next);
+		onOpenChange?.(next);
+	};
+	const gridRef = useRef(null);
+	const triggerRef = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const frame = requestAnimationFrame(() => gridRef.current?.querySelector("[tabindex=\"0\"]")?.focus());
+		return () => cancelAnimationFrame(frame);
+	}, [open]);
+	const close = () => {
+		setOpen(false);
+		triggerRef.current?.querySelector("button, [tabindex]")?.focus();
+	};
+	if (variant === "inline") return /* @__PURE__ */ jsx(SwatchGrid, {
+		colors,
+		value,
+		defaultValue,
+		label,
+		onPick: onChange,
+		size: 20
+	});
+	return /* @__PURE__ */ jsx(Popover, {
+		trigger: "click",
+		placement,
+		open,
+		onOpenChange: setOpen,
+		getPopupContainer,
+		destroyOnHidden: true,
+		paddingSize: "xs",
+		content: /* @__PURE__ */ jsx("div", {
+			onKeyDown: (event) => {
+				if (event.key !== "Escape") return;
+				event.stopPropagation();
+				close();
+			},
+			children: /* @__PURE__ */ jsx(SwatchGrid, {
+				colors,
+				value,
+				defaultValue,
+				label,
+				gridRef,
+				size: 24,
+				onPick: (next) => {
+					onChange(next);
+					close();
+				}
+			})
+		}),
+		children: /* @__PURE__ */ jsx("span", {
+			ref: triggerRef,
+			className: "inline-flex",
+			children
+		})
+	});
+};
+export { SwatchPicker };
+
+//# sourceMappingURL=SwatchPicker.js.map

package/dist/src/components/swatchPicker/SwatchPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchPicker.js","names":[],"sources":["../../../../src/components/swatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { CheckIcon } from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport { Button } from '../button'\nimport { Popover, type PopoverProps } from '../popover'\nimport { Swatch } from '../swatch'\n\nexport type SwatchPickerColor = {\n  /** What `onChange` reports: a token name, a hex, any id. */\n  value: string\n  /** Any CSS color. Defaults to `value`. */\n  color?: string\n  /** The swatch's accessible name. Defaults to `value`. */\n  label?: string\n}\n\nexport type SwatchPickerProps = {\n  /** The colors offered, in order. */\n  colors: SwatchPickerColor[]\n  /** The current color's `value`. */\n  value: string\n  /** What is being colored, for the grid's name: \"Color for {label}\". */\n  label: string\n  onChange: (value: string) => void\n  /** The starting color. \"Reset to default\" shows once `value` differs from it. */\n  defaultValue?: string\n  /**\n   * - `'popover'`: the grid opens from `children` and closes on a pick.\n   * - `'inline'`: the grid in place, with no control or popover, and smaller\n   *   swatches (20px, against 24px in the popover).\n   */\n  variant?: 'popover' | 'inline'\n  /** The control that opens the popover. Not used inline. */\n  children?: ReactNode\n  /** The popover's placement. */\n  placement?: PopoverProps['placement']\n  /** Where the popover renders. Defaults to the enclosing modal, or the page when there is none. */\n  getPopupContainer?: PopoverProps['getPopupContainer']\n  /**\n   * Called when the popover opens or closes, e.g. to keep a panel around it\n   * open meanwhile. Not used inline.\n   */\n  onOpenChange?: (open: boolean) => void\n}\n\nconst COLUMNS = 8\n\n// The maps picker's corners (2px); Swatch's default is 4px.\nconst RADIUS = 2\n\n// Centers the check on its swatch.\nconst CENTERED = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n} as const\n\n// Arrow keys move through the grid; each is the step in swatches.\nconst STEPS: Record<string, number> = {\n  ArrowRight: 1,\n  ArrowLeft: -1,\n  ArrowDown: COLUMNS,\n  ArrowUp: -COLUMNS,\n}\n\n// Inside a modal the popover renders in the modal's container. A popover on\n// the page body can't take focus, since the modal pulls it back, and the\n// modal's outer box ignores the pointer, so only its container takes clicks.\nconst modalOrPage = (trigger: HTMLElement) =>\n  trigger.closest<HTMLElement>('.ant-modal-container') ?? document.body\n\n// The first three channels of a painted color, 0 to 255. Browsers report\n// `rgb(…)` for most colors and `color(srgb …)`, 0 to 1, for color-mix results.\nconst channels = (painted: string) => {\n  const numbers = painted.match(/[\\d.]+/g)?.map(Number)\n  if (!numbers || numbers.length < 3) return null\n  const scale = painted.startsWith('color(') ? 255 : 1\n  return numbers.slice(0, 3).map((n) => n * scale)\n}\n\n// Whether a swatch needs a light check mark: Rec. 601 luma, which is enough\n// for a light-or-dark decision.\nconst isDark = (painted: string) => {\n  const rgb = channels(painted)\n  return rgb ? (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 < 140 : true\n}\n\n// Colors may be CSS variables, so the check reads its swatch as painted.\nconst Check = () => {\n  const ref = useRef<HTMLSpanElement>(null)\n  const [dark, setDark] = useState(true)\n  useLayoutEffect(() => {\n    const swatch = ref.current?.parentElement\n    if (swatch) setDark(isDark(getComputedStyle(swatch).backgroundColor))\n  }, [])\n  return (\n    <span ref={ref} className=\"flex\">\n      <CheckIcon\n        size={12}\n        weight=\"bold\"\n        color=\"currentColor\"\n        className={cx('block', dark ? 'text-white' : 'text-j2-text')}\n      />\n    </span>\n  )\n}\n\n// The grid and its Reset link. Focus rests on one swatch at a time (roving\n// tabindex), so the grid is one Tab stop and the arrow keys move within it;\n// Enter or Space picks. It starts on the current color, or the first when\n// that isn't in the grid.\nconst SwatchGrid = ({\n  colors,\n  value,\n  defaultValue,\n  label,\n  onPick,\n  gridRef,\n  size,\n}: {\n  colors: SwatchPickerColor[]\n  value: string\n  defaultValue?: string\n  label: string\n  onPick: (value: string) => void\n  gridRef?: RefObject<HTMLDivElement | null>\n  /** Swatch side in px. */\n  size: number\n}) => {\n  const [focusIndex, setFocusIndex] = useState(() =>\n    Math.max(\n      0,\n      colors.findIndex((c) => c.value === value)\n    )\n  )\n  const swatches = useRef<(HTMLButtonElement | null)[]>([])\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    const step = STEPS[event.key]\n    if (step === undefined) return\n    event.preventDefault()\n    const next = focusIndex + step\n    if (next < 0 || next >= colors.length) return\n    setFocusIndex(next)\n    swatches.current[next]?.focus()\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div\n        ref={gridRef}\n        role=\"radiogroup\"\n        aria-label={`Color for ${label}`}\n        // Sized to its swatches: in a wider box the columns would stretch,\n        // spreading the swatches and each button past its square.\n        className=\"grid w-fit grid-cols-8 gap-1\"\n        onKeyDown={onKeyDown}\n      >\n        {colors.map((c, index) => {\n          const selected = c.value === value\n          return (\n            <button\n              key={c.value}\n              ref={(node) => {\n                swatches.current[index] = node\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={selected}\n              aria-label={c.label ?? c.value}\n              tabIndex={index === focusIndex ? 0 : -1}\n              onClick={() => {\n                // Inline the grid stays, so arrow keys go on from the pick.\n                setFocusIndex(index)\n                onPick(c.value)\n              }}\n              className=\"flex cursor-pointer rounded-j2-xs border-0 bg-transparent p-0\"\n            >\n              <Swatch\n                color={c.color ?? c.value}\n                size={size}\n                radius={RADIUS}\n                style={CENTERED}\n              >\n                {selected && <Check />}\n              </Swatch>\n            </button>\n          )\n        })}\n      </div>\n      {/* Only offered when it would change something. */}\n      {defaultValue !== undefined && value !== defaultValue && (\n        <Button\n          type=\"link\"\n          size=\"small\"\n          className=\"self-start !px-0\"\n          onClick={() => onPick(defaultValue)}\n        >\n          Reset to default\n        </Button>\n      )}\n    </div>\n  )\n}\n\n/**\n * Pick one color from a fixed set, in a popover or inline. A grid rather than\n * a free color input, so two items can't end up on colors that are hard to\n * tell apart. The popover opens on the current color and closes on a pick.\n */\nexport const SwatchPicker = ({\n  colors,\n  value,\n  label,\n  onChange,\n  defaultValue,\n  variant = 'popover',\n  children,\n  placement = 'rightTop',\n  getPopupContainer = modalOrPage,\n  onOpenChange,\n}: SwatchPickerProps) => {\n  const [open, setOpenState] = useState(false)\n  const setOpen = (next: boolean) => {\n    setOpenState(next)\n    onOpenChange?.(next)\n  }\n  const gridRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLSpanElement>(null)\n\n  // Focus moves into the grid on open, onto the swatch that is its Tab stop:\n  // a frame later, once the popover is in the page. (afterOpenChange waits\n  // for the open animation.)\n  useEffect(() => {\n    if (!open) return\n    const frame = requestAnimationFrame(() =>\n      gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n    )\n    return () => cancelAnimationFrame(frame)\n  }, [open])\n\n  // A pick or Escape closes it and returns focus to the control that opened it.\n  const close = () => {\n    setOpen(false)\n    triggerRef.current\n      ?.querySelector<HTMLElement>('button, [tabindex]')\n      ?.focus()\n  }\n\n  if (variant === 'inline') {\n    return (\n      <SwatchGrid\n        colors={colors}\n        value={value}\n        defaultValue={defaultValue}\n        label={label}\n        onPick={onChange}\n        size={20}\n      />\n    )\n  }\n\n  return (\n    <Popover\n      trigger=\"click\"\n      placement={placement}\n      open={open}\n      onOpenChange={setOpen}\n      getPopupContainer={getPopupContainer}\n      destroyOnHidden\n      paddingSize=\"xs\"\n      content={\n        <div\n          onKeyDown={(event) => {\n            // Only the picker closes, not a modal around it.\n            if (event.key !== 'Escape') return\n            event.stopPropagation()\n            close()\n          }}\n        >\n          <SwatchGrid\n            colors={colors}\n            value={value}\n            defaultValue={defaultValue}\n            label={label}\n            gridRef={gridRef}\n            size={24}\n            onPick={(next) => {\n              onChange(next)\n              close()\n            }}\n          />\n        </div>\n      }\n    >\n      <span ref={triggerRef} className=\"inline-flex\">\n        {children}\n      </span>\n    </Popover>\n  )\n}\n"],"mappings":"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"}

package/dist/src/components/swatchPicker/index.d.ts

@@ -0,0 +1 @@
+export { SwatchPicker, type SwatchPickerColor, type SwatchPickerProps, } from './SwatchPicker.js';

package/dist/src/components/swatchStrip/SwatchStrip.cjs

@@ -1,6 +1,6 @@
+const require_Tooltip = require("../tooltip/Tooltip.cjs");
 const require_Swatch = require("../swatch/Swatch.cjs");
 const require_useRender = require("../../utils/useRender.cjs");
-const require_Tooltip = require("../tooltip/Tooltip.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/components/swatchStrip/SwatchStrip.tsx
 var Item = ({ item, group, size, render }) => require_useRender.useRender({

package/dist/src/components/swatchStrip/SwatchStrip.js

@@ -1,6 +1,6 @@
+import { Tooltip } from "../tooltip/Tooltip.js";
 import { Swatch } from "../swatch/Swatch.js";
 import { mergeProps, useRender } from "../../utils/useRender.js";
-import { Tooltip } from "../tooltip/Tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/swatchStrip/SwatchStrip.tsx
 var Item = ({ item, group, size, render }) => useRender({

package/dist/src/components/table/Table.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Table_module = require("./Table.module.css.cjs");
 const require_Spinner = require("../spinner/Spinner.cjs");
 const require_Pagination = require("../pagination/Pagination.cjs");
-const require_Table_module = require("./Table.module.css.cjs");
 let antd = require("antd");
 let _phosphor_icons_react = require("@phosphor-icons/react");
 _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);

package/dist/src/components/table/Table.js

@@ -1,6 +1,6 @@
+import Table_module_default from "./Table.module.css.js";
 import { Spinner } from "../spinner/Spinner.js";
 import { withDesignSystemPaginationOverrides } from "../pagination/Pagination.js";
-import Table_module_default from "./Table.module.css.js";
 import { Table, Tooltip } from "antd";
 import { CaretDownIcon, CaretUpDownIcon, CaretUpIcon } from "@phosphor-icons/react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j2-health/design-system",
-  "version": "0.6.9",
+  "version": "0.6.11",
   "type": "module",
   "description": "J2 Health shared React component library",
   "repository": {
@@ -60,7 +60,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@highcharts/react": "^5.0.0",
     "@phosphor-icons/react": "^2.1.7",
-    "antd": "^6.6.8",
+    "antd": "^6.7.0",
     "classnames": "^2.5.1",
     "formik": "^2.4.6",
     "highcharts": "^13.1.1",
@@ -78,18 +78,18 @@
     "@eslint/js": "^10.0.1",
     "@highcharts/react": "^5.4.0",
     "@phosphor-icons/react": "^2.1.7",
-    "@storybook/addon-docs": "^10.6.5",
-    "@storybook/addon-links": "^10.6.5",
-    "@storybook/react-vite": "^10.6.5",
-    "@tailwindcss/postcss": "^4.3.3",
+    "@storybook/addon-docs": "^10.6.6",
+    "@storybook/addon-links": "^10.6.6",
+    "@storybook/react-vite": "^10.6.6",
+    "@tailwindcss/postcss": "^4.3.5",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/lodash": "^4.17.27",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
-    "@vitejs/plugin-react": "^6.1.2",
+    "@vitejs/plugin-react": "^6.2.1",
     "@vitest/coverage-v8": "^5.0.5",
-    "antd": "^6.6.8",
+    "antd": "^6.7.0",
     "autoprefixer": "^10.6.2",
     "classnames": "^2.5.1",
     "eslint": "^10.14.0",
@@ -97,9 +97,9 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.7",
-    "eslint-plugin-storybook": "^10.6.5",
+    "eslint-plugin-storybook": "^10.6.6",
     "formik": "^2.4.6",
-    "globals": "^17.13.0",
+    "globals": "^17.14.0",
     "happy-dom": "^21.0.4",
     "highcharts": "^13.1.1",
     "lodash": "^4.18.1",
@@ -107,20 +107,20 @@
     "prettier": "^3.9.10",
     "react": "^19.2.8",
     "react-dom": "^19.3.1",
-    "semver": "^7.8.5",
-    "storybook": "^10.6.5",
-    "tailwindcss": "^4.3.3",
+    "semver": "^7.8.6",
+    "storybook": "^10.6.6",
+    "tailwindcss": "^4.3.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.72.1",
-    "vite": "^8.3.5",
+    "vite": "^8.3.6",
     "vite-plugin-dts": "^5.1.2",
     "vite-plugin-svgr": "^5.2.0",
-    "vitest": "^5.0.4",
+    "vitest": "^5.1.0",
     "yup": "^1.4.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.67.2"
+    "@rollup/rollup-linux-x64-gnu": "^4.68.0"
   },
   "eslintConfig": {
     "extends": [