@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist-es/cascading-menu/internal/useStateReducer.js

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { CascadingMenuAction } from './CascadingMenuAction.js';
+
+function getDefaultMenuState(id) {
+  return {
+    id,
+    highlightedItemIndex: null
+  };
+}
+function deleteAllMenusStartingFromLevel(level, menus) {
+  const newState = [...menus];
+  newState.splice(level);
+  return newState;
+}
+function menuPositionReducer(state, action, level) {
+  const { type } = action;
+  switch (type) {
+    case CascadingMenuAction.SET_FLIPPED:
+      state[level] = {
+        ...state[level]
+      };
+      return state;
+    default:
+      return state;
+  }
+}
+function useStateReducer(menusDataById, isNavigatingWithKeyboard) {
+  return useCallback(
+    (state, action) => {
+      let newState = [...state];
+      const { type, targetId, highlightedItemIndex = null } = action;
+      const { level, childMenus = [] } = Object(
+        menusDataById[targetId]
+      );
+      const childId = typeof highlightedItemIndex === "number" ? childMenus[highlightedItemIndex] : null;
+      const childMenuData = childId ? menusDataById[childId] : void 0;
+      newState = menuPositionReducer(newState, action, level);
+      switch (type) {
+        case CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM:
+          newState[level] = {
+            ...newState[level],
+            highlightedItemIndex
+          };
+          newState = deleteAllMenusStartingFromLevel(level + 1, newState);
+          if (childId && childMenuData && !isNavigatingWithKeyboard) {
+            newState[childMenuData.level] = getDefaultMenuState(childId);
+          }
+          break;
+        case CascadingMenuAction.RESET_MENU:
+          newState[level] = {
+            ...newState[level],
+            highlightedItemIndex: null
+          };
+          newState = deleteAllMenusStartingFromLevel(level + 1, newState);
+          break;
+        case CascadingMenuAction.OPEN_MENU:
+          newState[level] = getDefaultMenuState(targetId);
+          break;
+        case CascadingMenuAction.CLOSE_MENU:
+          newState = deleteAllMenusStartingFromLevel(level, newState);
+          break;
+        case CascadingMenuAction.CLOSE_CASCADING_MENU:
+          newState = [];
+          break;
+      }
+      return newState;
+    },
+    [isNavigatingWithKeyboard, menusDataById]
+  );
+}
+
+export { useStateReducer };
+//# sourceMappingURL=useStateReducer.js.map

package/dist-es/cascading-menu/internal/useStateReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateReducer.js","sources":["../src/cascading-menu/internal/useStateReducer.ts"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { CascadingMenuAction, type menuAction } from \"./CascadingMenuAction\";\nimport type { flattenedMenuState, menuState } from \"./stateUtils\";\n\nexport type stateItem = {\n  id: string;\n  highlightedItemIndex: number | null;\n};\n\ntype state = stateItem[];\n\nfunction getDefaultMenuState(id: string): stateItem {\n  return {\n    id,\n    highlightedItemIndex: null,\n  };\n}\n\nfunction deleteAllMenusStartingFromLevel(level: number, menus: stateItem[]) {\n  const newState = [...menus];\n  newState.splice(level);\n  return newState;\n}\n\nfunction menuPositionReducer(state: state, action: menuAction, level: number) {\n  const { type } = action;\n  switch (type) {\n    case CascadingMenuAction.SET_FLIPPED:\n      state[level] = {\n        ...state[level],\n      };\n      return state;\n    default:\n      return state;\n  }\n}\n\nexport function useStateReducer(\n  menusDataById: flattenedMenuState,\n  isNavigatingWithKeyboard: boolean,\n) {\n  return useCallback(\n    (state: state, action: menuAction): state => {\n      let newState = [...state];\n      const { type, targetId, highlightedItemIndex = null } = action;\n      const { level, childMenus = [] } = Object(\n        menusDataById[targetId],\n      ) as menuState;\n      const childId =\n        typeof highlightedItemIndex === \"number\"\n          ? childMenus[highlightedItemIndex]\n          : null;\n      const childMenuData = childId ? menusDataById[childId] : undefined;\n\n      newState = menuPositionReducer(newState, action, level);\n      switch (type) {\n        case CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM:\n          newState[level] = {\n            ...newState[level],\n            highlightedItemIndex,\n          };\n          newState = deleteAllMenusStartingFromLevel(level + 1, newState);\n          if (childId && childMenuData && !isNavigatingWithKeyboard) {\n            newState[childMenuData.level] = getDefaultMenuState(childId);\n          }\n          break;\n        case CascadingMenuAction.RESET_MENU:\n          newState[level] = {\n            ...newState[level],\n            highlightedItemIndex: null,\n          };\n          newState = deleteAllMenusStartingFromLevel(level + 1, newState);\n          break;\n        case CascadingMenuAction.OPEN_MENU:\n          newState[level] = getDefaultMenuState(targetId);\n          break;\n        case CascadingMenuAction.CLOSE_MENU:\n          newState = deleteAllMenusStartingFromLevel(level, newState);\n          break;\n        case CascadingMenuAction.CLOSE_CASCADING_MENU:\n          newState = [];\n          break;\n        default:\n          break;\n      }\n      return newState;\n    },\n    [isNavigatingWithKeyboard, menusDataById],\n  );\n}\n"],"names":[],"mappings":";;;AAYA,SAAS,oBAAoB,EAAuB,EAAA;AAClD,EAAO,OAAA;AAAA,IACL,EAAA;AAAA,IACA,oBAAsB,EAAA;AAAA,GACxB;AACF;AAEA,SAAS,+BAAA,CAAgC,OAAe,KAAoB,EAAA;AAC1E,EAAM,MAAA,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA;AAC1B,EAAA,QAAA,CAAS,OAAO,KAAK,CAAA;AACrB,EAAO,OAAA,QAAA;AACT;AAEA,SAAS,mBAAA,CAAoB,KAAc,EAAA,MAAA,EAAoB,KAAe,EAAA;AAC5E,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA;AACjB,EAAA,QAAQ,IAAM;AAAA,IACZ,KAAK,mBAAoB,CAAA,WAAA;AACvB,MAAA,KAAA,CAAM,KAAK,CAAI,GAAA;AAAA,QACb,GAAG,MAAM,KAAK;AAAA,OAChB;AACA,MAAO,OAAA,KAAA;AAAA,IACT;AACE,MAAO,OAAA,KAAA;AAAA;AAEb;AAEgB,SAAA,eAAA,CACd,eACA,wBACA,EAAA;AACA,EAAO,OAAA,WAAA;AAAA,IACL,CAAC,OAAc,MAA8B,KAAA;AAC3C,MAAI,IAAA,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA;AACxB,MAAA,MAAM,EAAE,IAAA,EAAM,QAAU,EAAA,oBAAA,GAAuB,MAAS,GAAA,MAAA;AACxD,MAAA,MAAM,EAAE,KAAA,EAAO,UAAa,GAAA,IAAO,GAAA,MAAA;AAAA,QACjC,cAAc,QAAQ;AAAA,OACxB;AACA,MAAA,MAAM,UACJ,OAAO,oBAAA,KAAyB,QAC5B,GAAA,UAAA,CAAW,oBAAoB,CAC/B,GAAA,IAAA;AACN,MAAA,MAAM,aAAgB,GAAA,OAAA,GAAU,aAAc,CAAA,OAAO,CAAI,GAAA,MAAA;AAEzD,MAAW,QAAA,GAAA,mBAAA,CAAoB,QAAU,EAAA,MAAA,EAAQ,KAAK,CAAA;AACtD,MAAA,QAAQ,IAAM;AAAA,QACZ,KAAK,mBAAoB,CAAA,2BAAA;AACvB,UAAA,QAAA,CAAS,KAAK,CAAI,GAAA;AAAA,YAChB,GAAG,SAAS,KAAK,CAAA;AAAA,YACjB;AAAA,WACF;AACA,UAAW,QAAA,GAAA,+BAAA,CAAgC,KAAQ,GAAA,CAAA,EAAG,QAAQ,CAAA;AAC9D,UAAI,IAAA,OAAA,IAAW,aAAiB,IAAA,CAAC,wBAA0B,EAAA;AACzD,YAAA,QAAA,CAAS,aAAc,CAAA,KAAK,CAAI,GAAA,mBAAA,CAAoB,OAAO,CAAA;AAAA;AAE7D,UAAA;AAAA,QACF,KAAK,mBAAoB,CAAA,UAAA;AACvB,UAAA,QAAA,CAAS,KAAK,CAAI,GAAA;AAAA,YAChB,GAAG,SAAS,KAAK,CAAA;AAAA,YACjB,oBAAsB,EAAA;AAAA,WACxB;AACA,UAAW,QAAA,GAAA,+BAAA,CAAgC,KAAQ,GAAA,CAAA,EAAG,QAAQ,CAAA;AAC9D,UAAA;AAAA,QACF,KAAK,mBAAoB,CAAA,SAAA;AACvB,UAAS,QAAA,CAAA,KAAK,CAAI,GAAA,mBAAA,CAAoB,QAAQ,CAAA;AAC9C,UAAA;AAAA,QACF,KAAK,mBAAoB,CAAA,UAAA;AACvB,UAAW,QAAA,GAAA,+BAAA,CAAgC,OAAO,QAAQ,CAAA;AAC1D,UAAA;AAAA,QACF,KAAK,mBAAoB,CAAA,oBAAA;AACvB,UAAA,QAAA,GAAW,EAAC;AACZ,UAAA;AAEA;AAEJ,MAAO,OAAA,QAAA;AAAA,KACT;AAAA,IACA,CAAC,0BAA0B,aAAa;AAAA,GAC1C;AACF;;;;"}

package/dist-es/cascading-menu/stateChangeTypes.js

@@ -0,0 +1,23 @@
+const stateChangeTypes = {
+  KEYBOARD_TOGGLE: "keyboardToggle",
+  MOUSE_TOGGLE: "mouseToggle",
+  CLICKED_AWAY: "clickedAway",
+  ON_RESIZE: "onResize",
+  ITEM_CLICKED: "itemClicked",
+  ITEM_KEYDOWN_ENTER: "itemKeydownEnter",
+  ITEM_KEYDOWN_ARROW_RIGHT: "itemKeydownArrowRight",
+  ITEM_KEYDOWN_ARROW_LEFT: "itemKeydownArrowLeft",
+  ITEM_KEYDOWN_ARROW_DOWN: "itemKeydownArrowDown",
+  ITEM_KEYDOWN_ARROW_UP: "itemKeydownArrowUp",
+  ITEM_KEYDOWN_SPACEBAR: "itemKeydownSpacebar",
+  ITEM_KEYDOWN_TAB: "itemKeydownTab",
+  ITEM_KEYDOWN_ESCAPE: "itemKeydownEscape",
+  ITEM_KEYDOWN_HOME: "itemKeydownHome",
+  ITEM_MOUSE_ENTER: "itemMouseEnter",
+  ITEM_MOUSE_MOVE_TO_PARENT: "itemMouseMoveToParent",
+  MOUSE_OUT_OF_MENUS: "mouseOutOfMenus",
+  KEYBOARD_NAV_AUTO_FOCUS: "keyboardNavAutoFocus"
+};
+
+export { stateChangeTypes };
+//# sourceMappingURL=stateChangeTypes.js.map

package/dist-es/cascading-menu/stateChangeTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateChangeTypes.js","sources":["../src/cascading-menu/stateChangeTypes.ts"],"sourcesContent":["export type stateChangeCause =\n  | \"keyboardToggle\"\n  | \"mouseToggle\"\n  | \"clickedAway\"\n  | \"onResize\"\n  | \"itemClicked\"\n  | \"itemKeydownEnter\"\n  | \"itemKeydownArrowRight\"\n  | \"itemKeydownArrowLeft\"\n  | \"itemKeydownArrowDown\"\n  | \"itemKeydownArrowUp\"\n  | \"itemKeydownSpacebar\"\n  | \"itemKeydownTab\"\n  | \"itemKeydownEscape\"\n  | \"itemKeydownHome\"\n  | \"itemKeydownEnd\"\n  | \"itemMouseEnter\"\n  | \"itemMouseMoveToParent\"\n  | \"mouseOutOfMenus\"\n  | \"keyboardNavAutoFocus\";\n\nexport const stateChangeTypes: { [key: string]: stateChangeCause } = {\n  KEYBOARD_TOGGLE: \"keyboardToggle\",\n  MOUSE_TOGGLE: \"mouseToggle\",\n  CLICKED_AWAY: \"clickedAway\",\n  ON_RESIZE: \"onResize\",\n  ITEM_CLICKED: \"itemClicked\",\n  ITEM_KEYDOWN_ENTER: \"itemKeydownEnter\",\n  ITEM_KEYDOWN_ARROW_RIGHT: \"itemKeydownArrowRight\",\n  ITEM_KEYDOWN_ARROW_LEFT: \"itemKeydownArrowLeft\",\n  ITEM_KEYDOWN_ARROW_DOWN: \"itemKeydownArrowDown\",\n  ITEM_KEYDOWN_ARROW_UP: \"itemKeydownArrowUp\",\n  ITEM_KEYDOWN_SPACEBAR: \"itemKeydownSpacebar\",\n  ITEM_KEYDOWN_TAB: \"itemKeydownTab\",\n  ITEM_KEYDOWN_ESCAPE: \"itemKeydownEscape\",\n  ITEM_KEYDOWN_HOME: \"itemKeydownHome\",\n  ITEM_KEYDOWN_END: \"itemKeydownEnd\",\n  ITEM_MOUSE_ENTER: \"itemMouseEnter\",\n  ITEM_MOUSE_MOVE_TO_PARENT: \"itemMouseMoveToParent\",\n  MOUSE_OUT_OF_MENUS: \"mouseOutOfMenus\",\n  KEYBOARD_NAV_AUTO_FOCUS: \"keyboardNavAutoFocus\",\n};\n"],"names":[],"mappings":"AAqBO,MAAM,gBAAwD,GAAA;AAAA,EACnE,eAAiB,EAAA,gBAAA;AAAA,EACjB,YAAc,EAAA,aAAA;AAAA,EACd,YAAc,EAAA,aAAA;AAAA,EACd,SAAW,EAAA,UAAA;AAAA,EACX,YAAc,EAAA,aAAA;AAAA,EACd,kBAAoB,EAAA,kBAAA;AAAA,EACpB,wBAA0B,EAAA,uBAAA;AAAA,EAC1B,uBAAyB,EAAA,sBAAA;AAAA,EACzB,uBAAyB,EAAA,sBAAA;AAAA,EACzB,qBAAuB,EAAA,oBAAA;AAAA,EACvB,qBAAuB,EAAA,qBAAA;AAAA,EACvB,gBAAkB,EAAA,gBAAA;AAAA,EAClB,mBAAqB,EAAA,mBAAA;AAAA,EACrB,iBAAmB,EAAA,iBAAA;AAAA,EAEnB,gBAAkB,EAAA,gBAAA;AAAA,EAClB,yBAA2B,EAAA,uBAAA;AAAA,EAC3B,kBAAoB,EAAA,iBAAA;AAAA,EACpB,uBAAyB,EAAA;AAC3B;;;;"}

package/dist-es/color-chooser/AlphaInputField.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useState, useEffect } from 'react';
+import { InputLegacy } from '../input-legacy/InputLegacy.js';
+import '../input-legacy/StaticInputAdornment.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './RGBAInput.css.js';
+
+const withBaseName = makePrefixer("saltColorChooser");
+const AlphaInput = ({
+  alphaValue,
+  onSubmit,
+  showAsOpacity = false
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-rgba-input",
+    css: css_248z,
+    window: targetWindow
+  });
+  const [alphaInputValue, setAlphaInputValue] = useState(
+    !Number.isNaN(alphaValue) ? alphaValue.toString() : ""
+  );
+  useEffect(() => {
+    setAlphaInputValue(!Number.isNaN(alphaValue) ? alphaValue.toString() : "");
+  }, [alphaValue]);
+  const handleAlphaInputChange = (event, newValue) => {
+    const value = newValue.replace("%", "");
+    let alpha = value;
+    if (value.trim() === "" || Number.isNaN(value)) {
+      alpha = "";
+    }
+    if (showAsOpacity && Number.parseFloat(value)) {
+      alpha = (Number.parseFloat(value) / 100).toString();
+    }
+    if (value.charAt(1) === "." || value.charAt(0) === ".") {
+      alpha = value;
+    }
+    setAlphaInputValue(alpha);
+  };
+  const handleKeyDownAlpha = (e) => {
+    if (e.key === "Enter") {
+      const alpha = alphaInputValue.trim().replace("%", "") !== "" ? Number.parseFloat(alphaInputValue) : 0;
+      const validatedAlpha = Math.max(0, Math.min(alpha, 1));
+      setAlphaInputValue(validatedAlpha.toString());
+      onSubmit(validatedAlpha);
+    }
+  };
+  const handleOnBlurAlpha = (e) => {
+    const alpha = alphaInputValue.trim() !== "" ? Number.parseFloat(alphaInputValue) : 0;
+    const validatedAlpha = Math.max(0, Math.min(alpha, 1));
+    setAlphaInputValue(validatedAlpha.toString());
+    onSubmit(validatedAlpha, e);
+  };
+  return /* @__PURE__ */ jsx(
+    InputLegacy,
+    {
+      inputProps: {
+        // @ts-ignore
+        "data-testid": "a-input"
+      },
+      className: clsx({
+        [withBaseName("rgbaInput")]: !showAsOpacity,
+        [withBaseName("opacityInput")]: showAsOpacity
+      }),
+      value: showAsOpacity ? alphaInputValue ? `${(Number.parseFloat(alphaInputValue) * 100).toString()}%` : "%" : alphaInputValue,
+      onChange: handleAlphaInputChange,
+      onBlur: handleOnBlurAlpha,
+      onKeyDown: handleKeyDownAlpha
+    }
+  );
+};
+
+export { AlphaInput };
+//# sourceMappingURL=AlphaInputField.js.map

package/dist-es/color-chooser/AlphaInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaInputField.js","sources":["../src/color-chooser/AlphaInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n  useEffect,\n  useState,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface AlphaInputProps {\n  alphaValue: number;\n  showAsOpacity?: boolean;\n  onSubmit: (alpha: number, e?: ChangeEvent) => void;\n}\n\nexport const AlphaInput = ({\n  alphaValue,\n  onSubmit,\n  showAsOpacity = false,\n}: AlphaInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  const [alphaInputValue, setAlphaInputValue] = useState<string>(\n    !Number.isNaN(alphaValue) ? alphaValue.toString() : \"\",\n  );\n\n  useEffect(() => {\n    setAlphaInputValue(!Number.isNaN(alphaValue) ? alphaValue.toString() : \"\");\n  }, [alphaValue]);\n\n  const handleAlphaInputChange = (\n    event: ChangeEvent<HTMLInputElement>,\n    newValue: string,\n  ): void => {\n    const value = newValue.replace(\"%\", \"\");\n    let alpha: string = value;\n\n    if (value.trim() === \"\" || Number.isNaN(value)) {\n      alpha = \"\";\n    }\n\n    if (showAsOpacity && Number.parseFloat(value)) {\n      alpha = (Number.parseFloat(value) / 100).toString();\n    }\n\n    if (value.charAt(1) === \".\" || value.charAt(0) === \".\") {\n      alpha = value;\n    }\n\n    setAlphaInputValue(alpha);\n  };\n\n  const handleKeyDownAlpha = (e: KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      const alpha =\n        alphaInputValue.trim().replace(\"%\", \"\") !== \"\"\n          ? Number.parseFloat(alphaInputValue)\n          : 0;\n      const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n      setAlphaInputValue(validatedAlpha.toString());\n      onSubmit(validatedAlpha);\n    }\n  };\n\n  const handleOnBlurAlpha = (e: FocusEvent<HTMLInputElement>): void => {\n    // Guard against parseFloat('') becoming NaN\n    const alpha =\n      alphaInputValue.trim() !== \"\" ? Number.parseFloat(alphaInputValue) : 0;\n\n    const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n    setAlphaInputValue(validatedAlpha.toString());\n    onSubmit(validatedAlpha, e);\n  };\n\n  return (\n    <Input\n      inputProps={{\n        // @ts-ignore\n        \"data-testid\": \"a-input\",\n      }}\n      className={clsx({\n        [withBaseName(\"rgbaInput\")]: !showAsOpacity,\n        [withBaseName(\"opacityInput\")]: showAsOpacity,\n      })}\n      value={\n        showAsOpacity\n          ? alphaInputValue\n            ? `${(Number.parseFloat(alphaInputValue) * 100).toString()}%`\n            : \"%\"\n          : alphaInputValue\n      }\n      onChange={handleAlphaInputChange}\n      onBlur={handleOnBlurAlpha}\n      onKeyDown={handleKeyDownAlpha}\n    />\n  );\n};\n"],"names":["rgbaInputCss","Input"],"mappings":"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"}

package/dist-es/color-chooser/Color.js

@@ -0,0 +1,49 @@
+import tinycolor from 'tinycolor2';
+import { getColorNameByHexValue } from './ColorHelpers.js';
+
+class Color {
+  constructor() {
+    this.color = tinycolor();
+  }
+  get hex() {
+    return this.color.getAlpha() === 1 ? this.color.toHexString() : this.color.toHex8String();
+  }
+  get rgba() {
+    return {
+      r: this.color.toRgb().r,
+      g: this.color.toRgb().g,
+      b: this.color.toRgb().b,
+      a: this.color.toRgb().a
+    };
+  }
+  /** E.g. Orange800 */
+  get colorName() {
+    return getColorNameByHexValue(
+      this.color.toHex8String(),
+      false,
+      void 0,
+      true
+    );
+  }
+  static makeColorFromHex(hexValue) {
+    const colorObj = new Color();
+    colorObj.color = tinycolor(hexValue);
+    if (colorObj.color.isValid()) {
+      return colorObj;
+    }
+    return void 0;
+  }
+  static makeColorFromRGB(r, g, b, a) {
+    const colorObj = new Color();
+    colorObj.color = tinycolor({ r, g, b, a });
+    return colorObj;
+  }
+  setAlpha(alpha) {
+    const colorObj = new Color();
+    colorObj.color = this.color.setAlpha(alpha);
+    return colorObj;
+  }
+}
+
+export { Color };
+//# sourceMappingURL=Color.js.map

package/dist-es/color-chooser/Color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Color.js","sources":["../src/color-chooser/Color.ts"],"sourcesContent":["import tinycolor from \"tinycolor2\";\nimport { getColorNameByHexValue } from \"./ColorHelpers\";\n\nexport type RGBAValue = {\n  r: number;\n  b: number;\n  g: number;\n  a: number;\n};\n\nexport class Color {\n  private color: tinycolor.Instance = tinycolor();\n\n  public get hex(): string {\n    return this.color.getAlpha() === 1\n      ? this.color.toHexString()\n      : this.color.toHex8String();\n  }\n\n  public get rgba(): RGBAValue {\n    return {\n      r: this.color.toRgb().r,\n      g: this.color.toRgb().g,\n      b: this.color.toRgb().b,\n      a: this.color.toRgb().a,\n    };\n  }\n\n  /** E.g. Orange800 */\n  public get colorName(): string | undefined {\n    return getColorNameByHexValue(\n      this.color.toHex8String(),\n      false,\n      undefined,\n      true,\n    );\n  }\n\n  static makeColorFromHex(hexValue: string | undefined): Color | undefined {\n    const colorObj = new Color();\n    colorObj.color = tinycolor(hexValue);\n\n    if (colorObj.color.isValid()) {\n      return colorObj;\n    }\n    return undefined;\n  }\n\n  static makeColorFromRGB(r: number, g: number, b: number, a?: number): Color {\n    const colorObj = new Color();\n    colorObj.color = tinycolor({ r: r, g: g, b: b, a: a });\n    return colorObj;\n  }\n\n  setAlpha(alpha: number): Color {\n    const colorObj = new Color();\n    colorObj.color = this.color.setAlpha(alpha);\n    return colorObj;\n  }\n}\n"],"names":[],"mappings":";;;AAUO,MAAM,KAAM,CAAA;AAAA,EAAZ,WAAA,GAAA;AACL,IAAA,IAAA,CAAQ,QAA4B,SAAU,EAAA;AAAA;AAAA,EAE9C,IAAW,GAAc,GAAA;AACvB,IAAO,OAAA,IAAA,CAAK,KAAM,CAAA,QAAA,EAAe,KAAA,CAAA,GAC7B,IAAK,CAAA,KAAA,CAAM,WAAY,EAAA,GACvB,IAAK,CAAA,KAAA,CAAM,YAAa,EAAA;AAAA;AAC9B,EAEA,IAAW,IAAkB,GAAA;AAC3B,IAAO,OAAA;AAAA,MACL,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,MACtB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,MACtB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,MACtB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA;AAAA,KACxB;AAAA;AACF;AAAA,EAGA,IAAW,SAAgC,GAAA;AACzC,IAAO,OAAA,sBAAA;AAAA,MACL,IAAA,CAAK,MAAM,YAAa,EAAA;AAAA,MACxB,KAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACF;AAAA;AACF,EAEA,OAAO,iBAAiB,QAAiD,EAAA;AACvE,IAAM,MAAA,QAAA,GAAW,IAAI,KAAM,EAAA;AAC3B,IAAS,QAAA,CAAA,KAAA,GAAQ,UAAU,QAAQ,CAAA;AAEnC,IAAI,IAAA,QAAA,CAAS,KAAM,CAAA,OAAA,EAAW,EAAA;AAC5B,MAAO,OAAA,QAAA;AAAA;AAET,IAAO,OAAA,MAAA;AAAA;AACT,EAEA,OAAO,gBAAA,CAAiB,CAAW,EAAA,CAAA,EAAW,GAAW,CAAmB,EAAA;AAC1E,IAAM,MAAA,QAAA,GAAW,IAAI,KAAM,EAAA;AAC3B,IAAA,QAAA,CAAS,QAAQ,SAAU,CAAA,EAAE,GAAM,CAAM,EAAA,CAAA,EAAM,GAAM,CAAA;AACrD,IAAO,OAAA,QAAA;AAAA;AACT,EAEA,SAAS,KAAsB,EAAA;AAC7B,IAAM,MAAA,QAAA,GAAW,IAAI,KAAM,EAAA;AAC3B,IAAA,QAAA,CAAS,KAAQ,GAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAS,KAAK,CAAA;AAC1C,IAAO,OAAA,QAAA;AAAA;AAEX;;;;"}

package/dist-es/color-chooser/ColorChooser.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltColorChooser-overlayButtonSwatch {\n  margin-right: 10px;\n  height: calc(2 * var(--salt-size-unit));\n  width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n  border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n  height: calc(var(--salt-size-container-spacing) - 2px) !important;\n  width: calc(var(--salt-size-container-spacing) - 2px) !important;\n  border: 1px solid var(--salt-status-negative-foreground);\n  /* RGBA using red-700 */\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%);\n}\n\n.saltColorChooser-overlayButtonText {\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--salt-text-fontSize);\n  letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n  background: transparent;\n  text-transform: none;\n  justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n  width: var(--salt-size-container-spacing);\n  display: contents;\n}\n\n.saltColorChooser-defaultButton {\n  float: right;\n  background: transparent;\n  padding: 6px 2px 6px 2px;\n  height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n  max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n  padding-right: 5px;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ColorChooser.css.js.map

package/dist-es/color-chooser/ColorChooser.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorChooser.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/color-chooser/ColorChooser.js

@@ -0,0 +1,161 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Overlay, OverlayTrigger, Button, OverlayPanel, OverlayPanelCloseButton, OverlayPanelContent } from '@salt-ds/core';
+import { RefreshIcon } from '@salt-ds/icons';
+import { clsx } from 'clsx';
+import { useState } from 'react';
+import { isTransparent } from './color-utils.js';
+import { getHexValue, getColorNameByHexValue, hexValueWithoutAlpha, convertColorMapValueToHex } from './ColorHelpers.js';
+import { DictTabs } from './DictTabs.js';
+import { getColorPalettes } from './GetColorPalettes.js';
+import { saltColorMap } from './colorMap.js';
+import { createTabsMapping } from './createTabsMapping.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './ColorChooser.css.js';
+
+const withBaseName = makePrefixer("saltColorChooser");
+function getActiveTab(hexValue, tabs, saltColorOverrides) {
+  if (tabs.Swatches && tabs["Color Picker"]) {
+    const hexNoAlpha = hexValueWithoutAlpha(hexValue);
+    const colors = saltColorOverrides ?? saltColorMap;
+    if (hexNoAlpha && !Object.keys(colors).find(
+      (key) => {
+        var _a;
+        return ((_a = convertColorMapValueToHex(colors[key])) == null ? void 0 : _a.toLowerCase()) === (hexNoAlpha == null ? void 0 : hexNoAlpha.toLowerCase());
+      }
+    )) {
+      return 1;
+    }
+  }
+  return 0;
+}
+const ColorChooser = ({
+  onClear,
+  onSelect,
+  color,
+  showSwatches = true,
+  showColorPicker = true,
+  defaultAlpha = 1,
+  disableAlphaChooser = false,
+  hideLabel = false,
+  placeholder,
+  buttonProps,
+  saltColorOverrides,
+  readOnly = false,
+  displayHexOnly = false
+}) => {
+  var _a;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-color-chooser",
+    css: css_248z,
+    window: targetWindow
+  });
+  const [open, setOpen] = useState(false);
+  const allColors = saltColorOverrides ? getColorPalettes(saltColorOverrides) : getColorPalettes();
+  const displayColorName = displayHexOnly ? getHexValue(color == null ? void 0 : color.hex, disableAlphaChooser) : getColorNameByHexValue(
+    color == null ? void 0 : color.hex,
+    disableAlphaChooser,
+    saltColorOverrides
+  );
+  const handleOpenChange = (open2) => setOpen(open2);
+  const alphaForTabs = isTransparent(color == null ? void 0 : color.hex) ? defaultAlpha : ((_a = color == null ? void 0 : color.rgba) == null ? void 0 : _a.a) ?? defaultAlpha;
+  const tabsMapping = createTabsMapping({
+    swatches: showSwatches,
+    colorPicker: showColorPicker,
+    disableAlphaChooser,
+    allColors,
+    color,
+    alpha: alphaForTabs,
+    handleColorChange: onSelect,
+    displayColorName,
+    placeholder,
+    onDialogClosed: () => {
+      setOpen(false);
+    }
+  });
+  const [activeTab, setActiveTab] = useState(
+    getActiveTab(color == null ? void 0 : color.hex, tabsMapping, saltColorOverrides)
+  );
+  const onDefaultSelected = () => {
+    if (activeTab === 0 && showSwatches) {
+      onClear();
+      handleOpenChange(false);
+    } else {
+      onClear();
+    }
+  };
+  const onTabClick = (index) => {
+    setActiveTab(index);
+  };
+  const OverlayContent = () => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(withBaseName("overlayContent")),
+        "data-testid": "overlay-content",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              "data-testid": "default-button",
+              variant: "secondary",
+              className: clsx(withBaseName("defaultButton")),
+              onClick: onDefaultSelected,
+              children: [
+                /* @__PURE__ */ jsx(RefreshIcon, { className: clsx(withBaseName("refreshIcon")) }),
+                "Default"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DictTabs,
+            {
+              tabs: tabsMapping,
+              hexValue: color == null ? void 0 : color.hex,
+              onTabClick,
+              activeTab
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Overlay, { placement: "bottom", "data-testid": "color-chooser-overlay", children: [
+    /* @__PURE__ */ jsx(OverlayTrigger, { children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: clsx(withBaseName("overlayButton"), {
+          [withBaseName("overlayButtonHiddenLabel")]: hideLabel
+        }),
+        "data-testid": "color-chooser-overlay-button",
+        disabled: readOnly,
+        ...buttonProps,
+        children: [
+          color && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(withBaseName("overlayButtonSwatch"), {
+                [withBaseName("overlayButtonSwatchWithBorder")]: color == null ? void 0 : color.hex.startsWith("#ffffff"),
+                [withBaseName("overlayButtonSwatchTransparent")]: isTransparent(
+                  color == null ? void 0 : color.hex
+                )
+              }),
+              style: {
+                backgroundColor: color == null ? void 0 : color.hex
+              }
+            }
+          ),
+          !hideLabel && /* @__PURE__ */ jsx("div", { className: withBaseName("overlayButtonText"), children: displayColorName ?? placeholder ?? "No color selected" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(OverlayPanel, { children: [
+      /* @__PURE__ */ jsx(OverlayPanelCloseButton, {}),
+      /* @__PURE__ */ jsx(OverlayPanelContent, { children: /* @__PURE__ */ jsx(OverlayContent, {}) })
+    ] })
+  ] });
+};
+
+export { ColorChooser };
+//# sourceMappingURL=ColorChooser.js.map

package/dist-es/color-chooser/ColorChooser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  Overlay,\n  OverlayPanel,\n  OverlayPanelCloseButton,\n  OverlayPanelContent,\n  OverlayTrigger,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { type ChangeEvent, useState } from \"react\";\nimport type { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n  convertColorMapValueToHex,\n  getColorNameByHexValue,\n  getHexValue,\n  hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { type ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { saltColorMap } from \"./colorMap\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport colorChooserCss from \"./ColorChooser.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n  hexValue: string | undefined,\n  tabs: ColorChooserTabs,\n  saltColorOverrides: Record<string, string> | undefined,\n): number {\n  if (tabs.Swatches && tabs[\"Color Picker\"]) {\n    const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n    const colors = saltColorOverrides ?? saltColorMap;\n    // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n    if (\n      hexNoAlpha &&\n      !Object.keys(colors).find(\n        (key: string) =>\n          convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n          hexNoAlpha?.toLowerCase(),\n      )\n    ) {\n      return 1;\n    }\n  }\n  return 0;\n}\n\nexport interface ColorChooserProps {\n  color: Color | undefined;\n  defaultAlpha?: number;\n  disableAlphaChooser?: boolean;\n  displayHexOnly?: boolean;\n  hideLabel?: boolean;\n  onClear: () => void; // called when user clicks \"default\" button\n  onSelect: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    event?: ChangeEvent,\n  ) => void;\n  placeholder?: string;\n  buttonProps?: Partial<ButtonProps>;\n  saltColorOverrides?: Record<string, string>;\n  showSwatches?: boolean;\n  showColorPicker?: boolean;\n  readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n  onClear,\n  onSelect,\n  color,\n  showSwatches = true,\n  showColorPicker = true,\n  defaultAlpha = 1,\n  disableAlphaChooser = false,\n  hideLabel = false,\n  placeholder,\n  buttonProps,\n  saltColorOverrides,\n  readOnly = false,\n  displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-color-chooser\",\n    css: colorChooserCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n\n  const allColors: string[][] = saltColorOverrides\n    ? getColorPalettes(saltColorOverrides)\n    : getColorPalettes();\n  const displayColorName = displayHexOnly\n    ? getHexValue(color?.hex, disableAlphaChooser)\n    : getColorNameByHexValue(\n        color?.hex,\n        disableAlphaChooser,\n        saltColorOverrides,\n      );\n\n  const handleOpenChange = (open: boolean) => setOpen(open);\n\n  const alphaForTabs = isTransparent(color?.hex)\n    ? defaultAlpha\n    : (color?.rgba?.a ?? defaultAlpha);\n\n  const tabsMapping = createTabsMapping({\n    swatches: showSwatches,\n    colorPicker: showColorPicker,\n    disableAlphaChooser,\n    allColors,\n    color,\n    alpha: alphaForTabs,\n    handleColorChange: onSelect,\n    displayColorName,\n    placeholder,\n    onDialogClosed: () => {\n      setOpen(false);\n    },\n  });\n\n  const [activeTab, setActiveTab] = useState<number>(\n    getActiveTab(color?.hex, tabsMapping, saltColorOverrides),\n  );\n  const onDefaultSelected = (): void => {\n    if (activeTab === 0 && showSwatches) {\n      onClear();\n      handleOpenChange(false);\n    } else {\n      onClear();\n    }\n  };\n\n  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const OverlayContent = () => {\n    return (\n      <div\n        className={clsx(withBaseName(\"overlayContent\"))}\n        data-testid=\"overlay-content\"\n      >\n        <Button\n          data-testid=\"default-button\"\n          variant=\"secondary\"\n          className={clsx(withBaseName(\"defaultButton\"))}\n          onClick={onDefaultSelected}\n        >\n          <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n          Default\n        </Button>\n        <DictTabs\n          tabs={tabsMapping}\n          hexValue={color?.hex}\n          onTabClick={onTabClick}\n          activeTab={activeTab}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n      <OverlayTrigger>\n        <Button\n          className={clsx(withBaseName(\"overlayButton\"), {\n            [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n          })}\n          // @ts-ignore\n          data-testid=\"color-chooser-overlay-button\"\n          disabled={readOnly}\n          {...buttonProps}\n        >\n          {color && (\n            <div\n              className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n                [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n                  color?.hex.startsWith(\"#ffffff\"),\n                [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n                  color?.hex,\n                ),\n              })}\n              style={{\n                backgroundColor: color?.hex,\n              }}\n            />\n          )}\n          {!hideLabel && (\n            <div className={withBaseName(\"overlayButtonText\")}>\n              {displayColorName ?? placeholder ?? \"No color selected\"}\n            </div>\n          )}\n        </Button>\n      </OverlayTrigger>\n      <OverlayPanel>\n        <OverlayPanelCloseButton />\n        <OverlayPanelContent>\n          <OverlayContent />\n        </OverlayPanelContent>\n      </OverlayPanel>\n    </Overlay>\n  );\n};\n"],"names":["colorChooserCss","open"],"mappings":"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"}

package/dist-es/color-chooser/ColorHelpers.js

@@ -0,0 +1,50 @@
+import { Color } from './Color.js';
+import { isTransparent } from './color-utils.js';
+import { saltColorMap } from './colorMap.js';
+
+function getColorNameByHexValue(hexValue, disableAlpha = false, saltColorOverrides, disableFallBackToHex = false) {
+  const hexNoAlpha = hexValueWithoutAlpha(hexValue);
+  const saltColors = saltColorOverrides ?? saltColorMap;
+  if (isTransparent(hexValue)) return "Transparent";
+  let colorName = Object.keys(saltColors).find((key) => {
+    if (saltColors[key]) {
+      const rgbVals = saltColors[key].startsWith("rgba") ? saltColors[key].substring(5, saltColors[key].length - 1) : saltColors[key].substring(4, saltColors[key].length - 1);
+      const [r, g, b] = [...rgbVals.replace(" ", "").split(",")];
+      return Color.makeColorFromRGB(Number(r), Number(g), Number(b)).hex === (hexNoAlpha == null ? void 0 : hexNoAlpha.toLowerCase());
+    }
+    return 0;
+  });
+  if (colorName) {
+    colorName = colorName.slice(4);
+    return colorName.charAt(0).toUpperCase() + colorName.slice(1).toLowerCase();
+  }
+  if (hexValue === "WHITE" || hexValue === "BLACK") {
+    return hexValue.charAt(0) + hexValue.slice(1).toLowerCase();
+  }
+  return disableFallBackToHex ? void 0 : getHexValue(hexValue, disableAlpha);
+}
+function hexValueWithoutAlpha(hexValue) {
+  if (hexValue === void 0) return void 0;
+  return isValidHex(hexValue) ? hexValue.substring(0, 7).toUpperCase() : void 0;
+}
+function getHexValue(hexValue, disableAlpha) {
+  if (hexValue === void 0) return void 0;
+  return disableAlpha ? hexValueWithoutAlpha(hexValue) : hexValue;
+}
+const isValidHex = (hex) => {
+  return hex ? /^#[0-9a-fA-F]{8}$/.test(hex) || /#[0-9a-fA-F]{6}$/.test(hex) : false;
+};
+const convertColorMapValueToHex = (color) => {
+  if (!color.startsWith("rgb")) return color;
+  const rgbVals = color.startsWith("rgba") ? color.substring(5, color.length - 1) : color.substring(4, color.length - 1);
+  const [r, g, b, a] = [...rgbVals.replace(" ", "").split(",")];
+  return Color.makeColorFromRGB(
+    Number(r),
+    Number(g),
+    Number(b),
+    a ? Number(a) : 1
+  ).hex;
+};
+
+export { convertColorMapValueToHex, getColorNameByHexValue, getHexValue, hexValueWithoutAlpha, isValidHex };
+//# sourceMappingURL=ColorHelpers.js.map

package/dist-es/color-chooser/ColorHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorHelpers.js","sources":["../src/color-chooser/ColorHelpers.ts"],"sourcesContent":["import { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\nimport { saltColorMap } from \"./colorMap\";\n\nexport function getColorNameByHexValue(\n  hexValue: string | undefined,\n  disableAlpha = false,\n  saltColorOverrides?: Record<string, string>,\n  /** When disabled, color names not recognized will be undefined instead of hex values */\n  disableFallBackToHex = false,\n): string | undefined {\n  const hexNoAlpha = hexValueWithoutAlpha(hexValue);\n  const saltColors = saltColorOverrides ?? saltColorMap;\n\n  // Special case\n  if (isTransparent(hexValue)) return \"Transparent\";\n\n  let colorName = Object.keys(saltColors).find((key: string) => {\n    if (saltColors[key]) {\n      const rgbVals = saltColors[key].startsWith(\"rgba\")\n        ? saltColors[key].substring(5, saltColors[key].length - 1)\n        : saltColors[key].substring(4, saltColors[key].length - 1);\n      const [r, g, b] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n      return (\n        Color.makeColorFromRGB(Number(r), Number(g), Number(b)).hex ===\n        hexNoAlpha?.toLowerCase()\n      );\n    }\n    return 0;\n  });\n\n  if (colorName) {\n    colorName = colorName.slice(4);\n    return colorName.charAt(0).toUpperCase() + colorName.slice(1).toLowerCase();\n  }\n\n  if (hexValue === \"WHITE\" || hexValue === \"BLACK\") {\n    return hexValue.charAt(0) + hexValue.slice(1).toLowerCase();\n  }\n\n  return disableFallBackToHex ? undefined : getHexValue(hexValue, disableAlpha);\n}\n\nexport function hexValueWithoutAlpha(\n  hexValue: string | undefined,\n): string | undefined {\n  if (hexValue === undefined) return undefined;\n  return isValidHex(hexValue)\n    ? hexValue.substring(0, 7).toUpperCase()\n    : undefined;\n}\n\nexport function getHexValue(\n  hexValue: string | undefined,\n  disableAlpha: boolean,\n): string | undefined {\n  if (hexValue === undefined) return undefined;\n  return disableAlpha ? hexValueWithoutAlpha(hexValue) : hexValue;\n}\n\nexport const isValidHex = (hex: string | undefined): boolean => {\n  return hex\n    ? /^#[0-9a-fA-F]{8}$/.test(hex) || /#[0-9a-fA-F]{6}$/.test(hex)\n    : false;\n};\n\nexport const convertColorMapValueToHex = (color: string): string => {\n  if (!color.startsWith(\"rgb\")) return color;\n  const rgbVals = color.startsWith(\"rgba\")\n    ? color.substring(5, color.length - 1)\n    : color.substring(4, color.length - 1);\n  const [r, g, b, a] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n  return Color.makeColorFromRGB(\n    Number(r),\n    Number(g),\n    Number(b),\n    a ? Number(a) : 1,\n  ).hex;\n};\n"],"names":[],"mappings":"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"}

package/dist-es/color-chooser/ColorPicker.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltColorChooserPicker {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n  align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n  display: flex;\n  flex-direction: column;\n  align-content: stretch;\n  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n  box-shadow: none !important;\n  padding: 8px 8px 0px 0px !important;\n  background: transparent !important;\n  width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n  display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n  height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n  width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n  width: calc(var(--salt-size-base) / 4) !important;\n  height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n  position: relative;\n  margin-top: 0px !important;\n  width: 4px !important;\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n  background: var(--salt-container-primary-background) !important;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ColorPicker.css.js.map

package/dist-es/color-chooser/ColorPicker.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/color-chooser/ColorPicker.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Button } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { SketchPicker } from 'react-color';
+import { Color } from './Color.js';
+import { hexValueWithoutAlpha } from './ColorHelpers.js';
+import { HexInput } from './HexInput.js';
+import { RGBAInput } from './RGBAInput.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './ColorPicker.css.js';
+
+const withBaseName = makePrefixer("saltColorChooserPicker");
+const ColorPicker = ({
+  alpha = 1,
+  disableAlphaChooser,
+  color,
+  onChange,
+  onDialogClosed
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-color-picker",
+    css: css_248z,
+    window: targetWindow
+  });
+  const rgbaValue = (color == null ? void 0 : color.rgba) ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;
+  const rgbaText = disableAlphaChooser ? "RGB" : "RGBA";
+  const onSubmitHex = (hexValue, e) => {
+    const newColor = Color.makeColorFromHex(hexValue);
+    onChange(newColor, false, e);
+  };
+  const onSubmitRgb = (rgba, e) => {
+    const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);
+    onChange(newColor, false, e);
+  };
+  const onSubmitAlpha = (alpha2, e) => {
+    const newColor = Color.makeColorFromRGB(
+      rgbaValue.r,
+      rgbaValue.g,
+      rgbaValue.b,
+      Math.max(0, Math.min(alpha2, 1))
+    );
+    onChange(newColor, false, e);
+  };
+  const onSketchPickerChange = (colorResult, e) => {
+    const newColor = Color.makeColorFromRGB(
+      colorResult.rgb.r,
+      colorResult.rgb.g,
+      colorResult.rgb.b,
+      colorResult.rgb.a ?? alpha
+    );
+    onChange(newColor, false, e);
+  };
+  const onApply = () => {
+    onChange(color, true);
+    onDialogClosed();
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-testid": "color-picker", className: clsx(withBaseName()), children: [
+    /* @__PURE__ */ jsx(
+      SketchPicker,
+      {
+        className: clsx(withBaseName("swatchPickerStyles"), {
+          [withBaseName("rootDisabledAlpha")]: disableAlphaChooser,
+          [withBaseName("root")]: !disableAlphaChooser
+        }),
+        color: rgbaValue,
+        onChange: onSketchPickerChange,
+        presetColors: [],
+        disableAlpha: disableAlphaChooser
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName("inputContainer")), children: [
+      /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName("inputDivs")), children: [
+        /* @__PURE__ */ jsx("span", { className: clsx(withBaseName("textDivOverrides")), children: "HEX" }),
+        /* @__PURE__ */ jsx(
+          HexInput,
+          {
+            hexValue: disableAlphaChooser ? hexValueWithoutAlpha(color == null ? void 0 : color.hex) : color == null ? void 0 : color.hex,
+            disableAlphaChooser,
+            onSubmit: onSubmitHex
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RGBAInput,
+          {
+            disableAlphaChooser,
+            rgbaText,
+            rgbaValue,
+            onSubmitAlpha,
+            onSubmitRgb
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: clsx(withBaseName("applyButtonDiv")), children: /* @__PURE__ */ jsx(Button, { "data-testid": "apply-button", variant: "cta", onClick: onApply, children: "Apply" }) })
+    ] })
+  ] });
+};
+
+export { ColorPicker };
+//# sourceMappingURL=ColorPicker.js.map