@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/Checkbox/index.native.js

@@ -0,0 +1,241 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  Checkbox: () => import_Checkbox.Checkbox,
+  CheckboxGroup: () => import_CheckboxGroup.CheckboxGroup,
+  Checkboxes: () => Checkboxes
+});
+module.exports = __toCommonJS(Checkbox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_roving_focus = require("@tamagui/roving-focus");
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_CheckboxFieldFrame = require("./CheckboxFieldFrame.native.js");
+var import_utils = require("../../shared/utils.native.js");
+var import_Checkbox = require("./Checkbox.native.js");
+var import_CheckboxGroup = require("./CheckboxGroup.native.js");
+var CheckboxesContext = (0, import_tamagui.createStyledContext)({
+  values: {},
+  onValuesChange: function onValuesChange() {}
+});
+var FocusGroup = /* @__PURE__ */(0, import_react2.forwardRef)(function (props, ref) {
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+    gap: knobProps.gap.gap,
+    focusable: true,
+    outlineOffset: 1,
+    focusStyle: {
+      zIndex: 1
+    },
+    ...props,
+    ref
+  });
+});
+var FocusItemContext = (0, import_tamagui.createStyledContext)({
+  value: ""
+});
+var FocusGroupItem = /* @__PURE__ */(0, import_react2.forwardRef)(function (itemProps, ref) {
+  var {
+    value,
+    ...props
+  } = itemProps;
+  var {
+    values,
+    onValuesChange: onValuesChange2
+  } = CheckboxesContext.useStyledContext();
+  var combinedProps = {
+    focusable: true,
+    outlineOffset: 1,
+    flexShrink: 1,
+    focusStyle: {
+      zIndex: 1
+    },
+    ...(import_tamagui.isWeb && {
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "Enter" || e.code === "Space") {
+          e.preventDefault();
+          onValuesChange2({
+            ...values,
+            [value]: !values[value]
+          });
+        }
+      }
+    }),
+    onPress: function onPress() {
+      onValuesChange2({
+        ...values,
+        [value]: !values[value]
+      });
+    },
+    ...props
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusItemContext.Provider, {
+    value,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+      ref,
+      ...combinedProps
+    })
+  });
+});
+var RadiusGroup = (0, import_tamagui.styled)(import_tamagui.Group, {
+  orientation: "vertical",
+  gap: "$2"
+});
+var CheckboxesTitle = (0, import_tamagui.styled)(import_tamagui.H2, {
+  size: "$8"
+});
+var CheckboxesImp = function CheckboxesImp2(checkboxesProps) {
+  var {
+    values,
+    onValuesChange: onValuesChange2,
+    ...props
+  } = checkboxesProps;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CheckboxesContext.Provider, {
+    values,
+    onValuesChange: onValuesChange2,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...props
+    })
+  });
+};
+var CheckboxesCheckbox = import_tamagui.Checkbox.styleable(function (checkboxProps, ref) {
+  var {
+    checked: _userChecked,
+    onCheckedChange: onCheckedChangeProp,
+    ...props
+  } = checkboxProps;
+  var {
+    values,
+    onValuesChange: onValuesChange2
+  } = CheckboxesContext.useStyledContext();
+  var {
+    value: focusItemValue
+  } = FocusItemContext.useStyledContext();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var radiusToken = knobProps.borderRadius.borderRadius;
+  var cappedRadius = (0, import_utils.clampRadiusForControl)(radiusToken, 2);
+  var resolvedRadius = cappedRadius === 0 ? {
+    borderWidth: knobProps.borderRadius.borderWidth,
+    borderRadius: 0
+  } : {
+    borderWidth: knobProps.borderRadius.borderWidth,
+    borderRadius: cappedRadius
+  };
+  var combinedProps = {
+    ...props,
+    checked: values[focusItemValue],
+    onCheckedChange: function onCheckedChange(checked) {
+      onCheckedChangeProp === null || onCheckedChangeProp === void 0 ? void 0 : onCheckedChangeProp(checked);
+      onValuesChange2({
+        ...values,
+        [focusItemValue]: typeof checked === "boolean" ? checked : !values[focusItemValue]
+      });
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxFieldFrame.CheckboxFieldFrame, {
+    ref,
+    value: focusItemValue,
+    ...knobProps.inputSurface,
+    size: knobProps.sizeToken,
+    ...resolvedRadius,
+    outlined: knobProps.outlined,
+    transition: knobProps.transition,
+    ...combinedProps
+  });
+});
+var CheckboxCardFrame = (0, import_tamagui.styled)(import_tamagui.View, {
+  cursor: "pointer",
+  width: "100%",
+  padding: "$3",
+  borderRadius: "$4",
+  backgroundColor: import_colorRamps.formCardColors.background.base,
+  borderColor: import_colorRamps.formCardColors.border.base,
+  borderWidth: 1,
+  hoverStyle: {
+    borderColor: import_colorRamps.formCardColors.border.hover
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: import_colorRamps.formCardColors.background.active,
+        borderColor: import_colorRamps.formCardColors.border.active
+      }
+    }
+  }
+});
+var CheckboxCard = CheckboxCardFrame.styleable(function (cardProps, ref) {
+  var _cardProps_active;
+  var {
+    values
+  } = CheckboxesContext.useStyledContext();
+  var {
+    value
+  } = FocusItemContext.useStyledContext();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var selected = values[value];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CheckboxCardFrame, {
+    ref,
+    active: (_cardProps_active = cardProps.active) !== null && _cardProps_active !== void 0 ? _cardProps_active : selected,
+    ...knobProps.panelPadding,
+    borderRadius: knobProps.borderRadius.borderRadius,
+    ...cardProps
+  });
+});
+var CheckboxesIndicator = import_tamagui.Checkbox.Indicator.styleable(function (indicatorProps, ref) {
+  var {
+    children,
+    ...props
+  } = indicatorProps;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Checkbox.Indicator, {
+    ref,
+    ...props,
+    children: children !== null && children !== void 0 ? children : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {})
+  });
+});
+var Checkboxes = (0, import_tamagui.withStaticProperties)(CheckboxesImp, {
+  Group: (0, import_tamagui.withStaticProperties)(RadiusGroup, {
+    Item: import_tamagui.Group.Item
+  }),
+  FocusGroup: (0, import_tamagui.withStaticProperties)(FocusGroup, {
+    Item: FocusGroupItem
+  }),
+  Title: CheckboxesTitle,
+  Checkbox: (0, import_tamagui.withStaticProperties)(CheckboxesCheckbox, {
+    Indicator: CheckboxesIndicator,
+    Label: import_tamagui.Label
+  }),
+  Card: CheckboxCard
+});
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/fields/Checkbox/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Checkbox_exports","__export","Checkbox","import_Checkbox","CheckboxGroup","import_CheckboxGroup","Checkboxes","module","exports","import_jsx_runtime","require","import_roving_focus","import_react","import_theme","import_react2","import_tamagui","import_colorRamps","import_CheckboxFieldFrame","import_utils","CheckboxesContext","createStyledContext","values","onValuesChange","FocusGroup","forwardRef","props","ref","knobProps","useResolvedKnobs","jsx","RovingFocusGroup","gap","focusable","outlineOffset","focusStyle","zIndex","FocusItemContext","FocusGroupItem","itemProps","onValuesChange2","useStyledContext","combinedProps","flexShrink","isWeb","onKeyDown","e","key","code","preventDefault","onPress","Provider","children","Item","RadiusGroup","styled","Group","orientation","CheckboxesTitle","H2","size","CheckboxesImp","CheckboxesImp2","checkboxesProps","View","CheckboxesCheckbox","styleable","checkboxProps","checked","_userChecked","onCheckedChange","onCheckedChangeProp","focusItemValue","radiusToken","borderRadius","cappedRadius","clampRadiusForControl","resolvedRadius","borderWidth","CheckboxFieldFrame","inputSurface","sizeToken","outlined","transition","CheckboxCardFrame","cursor","width","padding","backgroundColor","formCardColors","background","base","borderColor","border","hoverStyle","hover","variants","active","true","CheckboxCard","cardProps","_cardProps_active","selected","panelPadding","CheckboxesIndicator","Indicator","indicatorProps"],"sources":["../../../../src/fields/Checkbox/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/ColorPicker/ColorPicker.spec.cjs

@@ -0,0 +1,147 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var import_react = require("@testing-library/react");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_parts = require("./parts.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+import_vitest.vi.mock("@tamagui/lucide-icons-2", () => ({
+  Palette: () => null,
+  X: () => null
+}));
+async function loadColorPicker() {
+  return (await import("./index")).ColorPicker;
+}
+(0, import_vitest.describe)("ColorPicker", () => {
+  (0, import_vitest.it)("should handle disabled state", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPicker, {
+      label: "Color",
+      name: "color",
+      disabled: true
+    }));
+    const input = result.container.querySelector("input");
+    (0, import_vitest.expect)(input).toBeTruthy();
+    (0, import_vitest.expect)(input?.getAttribute("aria-disabled")).toBe("true");
+    const clickable = result.container.querySelector("input,button,[role='button']");
+    if (clickable) {
+      import_react.fireEvent.click(clickable);
+    }
+    (0, import_vitest.expect)(result.findTextElement("Opacity: 100%")).toBeUndefined();
+  });
+  (0, import_vitest.it)("opens popover and updates value from hex input", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPicker, {
+      label: "Color",
+      name: "color",
+      placeholder: "Pick a color",
+      showAlpha: true
+    }));
+    const triggerInput = result.container.querySelector("input");
+    (0, import_vitest.expect)(triggerInput).toBeTruthy();
+    await (0, import_react.act)(async () => {
+      if (triggerInput) import_react.fireEvent.click(triggerInput);
+    });
+    await (0, import_react.waitFor)(() => {
+      (0, import_vitest.expect)(document.body.textContent?.includes("Opacity:")).toBe(true);
+    });
+    const hexInput = document.body.querySelector('input[placeholder="#000000"]');
+    (0, import_vitest.expect)(hexInput).toBeTruthy();
+    await (0, import_react.act)(async () => {
+      if (hexInput) import_react.fireEvent.change(hexInput, {
+        target: {
+          value: "00ff00"
+        }
+      });
+    });
+    await (0, import_react.waitFor)(() => {
+      const updated = result.container.querySelector("input");
+      (0, import_vitest.expect)(updated?.value).toBe("#00FF00");
+    });
+  });
+  (0, import_vitest.it)("clears selected value from trigger button", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPicker, {
+      label: "Color",
+      name: "color",
+      placeholder: "Pick a color",
+      defaultValue: "#112233"
+    }));
+    const input = result.container.querySelector("input");
+    (0, import_vitest.expect)(input?.value).toBe("#112233");
+    const triggerButton = result.container.querySelector("button");
+    await (0, import_react.act)(async () => {
+      if (triggerButton) import_react.fireEvent.click(triggerButton);
+    });
+    await (0, import_react.waitFor)(() => {
+      const updated = result.container.querySelector("input");
+      (0, import_vitest.expect)(updated?.value ?? "").toBe("");
+    });
+  });
+  (0, import_vitest.it)("shows format validation error for invalid rgb value", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPicker, {
+      label: "Color",
+      name: void 0,
+      format: "rgb",
+      defaultValue: "not-rgb"
+    }));
+    (0, import_vitest.expect)(result.findTextElement("Invalid RGB color value")).toBeDefined();
+  });
+  (0, import_vitest.describe)("color utilities", () => {
+    (0, import_vitest.it)("validates and normalizes hex values", () => {
+      (0, import_vitest.expect)((0, import_parts.isValidHex)("#AABBCC")).toBe(true);
+      (0, import_vitest.expect)((0, import_parts.isValidHex)("#abc")).toBe(true);
+      (0, import_vitest.expect)((0, import_parts.isValidHex)("123456")).toBe(false);
+      (0, import_vitest.expect)((0, import_parts.normalizeHex)("#abc")).toBe("#AABBCC");
+      (0, import_vitest.expect)((0, import_parts.normalizeHex)("aabbcc")).toBe("#AABBCC");
+    });
+    (0, import_vitest.it)("converts between RGB and HEX", () => {
+      (0, import_vitest.expect)((0, import_parts.rgbToHex)(255, 0, 128)).toBe("#FF0080");
+      (0, import_vitest.expect)((0, import_parts.hexToRgb)("#FF0080")).toEqual({
+        r: 255,
+        g: 0,
+        b: 128
+      });
+      (0, import_vitest.expect)((0, import_parts.hexToRgb)("invalid")).toBeNull();
+    });
+    (0, import_vitest.it)("converts between HSV and RGB/HEX", () => {
+      (0, import_vitest.expect)((0, import_parts.hsvToRgb)(0, 100, 100)).toEqual({
+        r: 255,
+        g: 0,
+        b: 0
+      });
+      (0, import_vitest.expect)((0, import_parts.hsvToHex)(120, 100, 100)).toBe("#00FF00");
+      const hsv = (0, import_parts.rgbToHsv)(0, 0, 255);
+      (0, import_vitest.expect)(hsv.h).toBe(240);
+      (0, import_vitest.expect)(hsv.s).toBe(100);
+      (0, import_vitest.expect)(hsv.v).toBe(100);
+      const fromHex = (0, import_parts.hexToHsv)("#0000FF");
+      (0, import_vitest.expect)(fromHex.h).toBe(240);
+      (0, import_vitest.expect)(fromHex.s).toBe(100);
+      (0, import_vitest.expect)(fromHex.v).toBe(100);
+    });
+  });
+});

package/dist/cjs/fields/ColorPicker/ColorPicker.spec.native.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@testing-library/react");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_parts = require("./parts.native.js");
+import_vitest.vi.mock("@tamagui/lucide-icons-2", function () {
+  return {
+    Palette: function Palette() {
+      return null;
+    },
+    X: function X() {
+      return null;
+    }
+  };
+});
+async function loadColorPicker() {
+  return (await import("./index")).ColorPicker;
+}
+(0, import_vitest.describe)("ColorPicker", function () {
+  (0, import_vitest.it)("should handle disabled state", async function () {
+    var ColorPicker = await loadColorPicker();
+    var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPicker, {
+      label: "Color",
+      name: "color",
+      disabled: true
+    }));
+    var input = result.container.querySelector("input");
+    (0, import_vitest.expect)(input).toBeTruthy();
+    (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.getAttribute("aria-disabled")).toBe("true");
+    var clickable = result.container.querySelector("input,button,[role='button']");
+    if (clickable) {
+      import_react.fireEvent.click(clickable);
+    }
+    (0, import_vitest.expect)(result.findTextElement("Opacity: 100%")).toBeUndefined();
+  });
+  (0, import_vitest.it)("opens popover and updates value from hex input", async function () {
+    var ColorPicker = await loadColorPicker();
+    var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPicker, {
+      label: "Color",
+      name: "color",
+      placeholder: "Pick a color",
+      showAlpha: true
+    }));
+    var triggerInput = result.container.querySelector("input");
+    (0, import_vitest.expect)(triggerInput).toBeTruthy();
+    await (0, import_react.act)(async function () {
+      if (triggerInput) import_react.fireEvent.click(triggerInput);
+    });
+    await (0, import_react.waitFor)(function () {
+      var _document_body_textContent;
+      (0, import_vitest.expect)((_document_body_textContent = document.body.textContent) === null || _document_body_textContent === void 0 ? void 0 : _document_body_textContent.includes("Opacity:")).toBe(true);
+    });
+    var hexInput = document.body.querySelector('input[placeholder="#000000"]');
+    (0, import_vitest.expect)(hexInput).toBeTruthy();
+    await (0, import_react.act)(async function () {
+      if (hexInput) import_react.fireEvent.change(hexInput, {
+        target: {
+          value: "00ff00"
+        }
+      });
+    });
+    await (0, import_react.waitFor)(function () {
+      var updated = result.container.querySelector("input");
+      (0, import_vitest.expect)(updated === null || updated === void 0 ? void 0 : updated.value).toBe("#00FF00");
+    });
+  });
+  (0, import_vitest.it)("clears selected value from trigger button", async function () {
+    var ColorPicker = await loadColorPicker();
+    var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPicker, {
+      label: "Color",
+      name: "color",
+      placeholder: "Pick a color",
+      defaultValue: "#112233"
+    }));
+    var input = result.container.querySelector("input");
+    (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.value).toBe("#112233");
+    var triggerButton = result.container.querySelector("button");
+    await (0, import_react.act)(async function () {
+      if (triggerButton) import_react.fireEvent.click(triggerButton);
+    });
+    await (0, import_react.waitFor)(function () {
+      var _ref;
+      var updated = result.container.querySelector("input");
+      (0, import_vitest.expect)((_ref = updated === null || updated === void 0 ? void 0 : updated.value) !== null && _ref !== void 0 ? _ref : "").toBe("");
+    });
+  });
+  (0, import_vitest.it)("shows format validation error for invalid rgb value", async function () {
+    var ColorPicker = await loadColorPicker();
+    var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPicker, {
+      label: "Color",
+      name: void 0,
+      format: "rgb",
+      defaultValue: "not-rgb"
+    }));
+    (0, import_vitest.expect)(result.findTextElement("Invalid RGB color value")).toBeDefined();
+  });
+  (0, import_vitest.describe)("color utilities", function () {
+    (0, import_vitest.it)("validates and normalizes hex values", function () {
+      (0, import_vitest.expect)((0, import_parts.isValidHex)("#AABBCC")).toBe(true);
+      (0, import_vitest.expect)((0, import_parts.isValidHex)("#abc")).toBe(true);
+      (0, import_vitest.expect)((0, import_parts.isValidHex)("123456")).toBe(false);
+      (0, import_vitest.expect)((0, import_parts.normalizeHex)("#abc")).toBe("#AABBCC");
+      (0, import_vitest.expect)((0, import_parts.normalizeHex)("aabbcc")).toBe("#AABBCC");
+    });
+    (0, import_vitest.it)("converts between RGB and HEX", function () {
+      (0, import_vitest.expect)((0, import_parts.rgbToHex)(255, 0, 128)).toBe("#FF0080");
+      (0, import_vitest.expect)((0, import_parts.hexToRgb)("#FF0080")).toEqual({
+        r: 255,
+        g: 0,
+        b: 128
+      });
+      (0, import_vitest.expect)((0, import_parts.hexToRgb)("invalid")).toBeNull();
+    });
+    (0, import_vitest.it)("converts between HSV and RGB/HEX", function () {
+      (0, import_vitest.expect)((0, import_parts.hsvToRgb)(0, 100, 100)).toEqual({
+        r: 255,
+        g: 0,
+        b: 0
+      });
+      (0, import_vitest.expect)((0, import_parts.hsvToHex)(120, 100, 100)).toBe("#00FF00");
+      var hsv = (0, import_parts.rgbToHsv)(0, 0, 255);
+      (0, import_vitest.expect)(hsv.h).toBe(240);
+      (0, import_vitest.expect)(hsv.s).toBe(100);
+      (0, import_vitest.expect)(hsv.v).toBe(100);
+      var fromHex = (0, import_parts.hexToHsv)("#0000FF");
+      (0, import_vitest.expect)(fromHex.h).toBe(240);
+      (0, import_vitest.expect)(fromHex.s).toBe(100);
+      (0, import_vitest.expect)(fromHex.v).toBe(100);
+    });
+  });
+});
+//# sourceMappingURL=ColorPicker.spec.native.js.map

package/dist/cjs/fields/ColorPicker/ColorPicker.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_react","import_vitest","import_test_utils","import_parts","vi","mock","Palette","X","loadColorPicker","ColorPicker","describe","it","result","renderWithProviders","jsx","label","name","disabled","input","container","querySelector","expect","toBeTruthy","getAttribute","toBe","clickable","fireEvent","click","findTextElement","toBeUndefined","placeholder","showAlpha","triggerInput","act","waitFor","_document_body_textContent","document","body","textContent","includes","hexInput","change","target","value","updated","defaultValue","triggerButton","_ref","format","toBeDefined","isValidHex"],"sources":["../../../../src/fields/ColorPicker/ColorPicker.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}