@multiplatform.one/forms 6.0.0

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

@@ -0,0 +1,211 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { CheckIcon as CheckRegular } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { forwardRef } from "react";
+import { Checkbox as TamaguiCheckbox, Group, H2, Label, View, createStyledContext, isWeb, styled, withStaticProperties } from "tamagui";
+import { formCardColors } from "../../shared/colorRamps.native.js";
+import { CheckboxFieldFrame } from "./CheckboxFieldFrame.native.js";
+import { clampRadiusForControl } from "../../shared/utils.native.js";
+import { Checkbox } from "./Checkbox.native.js";
+import { CheckboxGroup } from "./CheckboxGroup.native.js";
+var CheckboxesContext = createStyledContext({
+  values: {},
+  onValuesChange: function onValuesChange() {}
+});
+var FocusGroup = /* @__PURE__ */forwardRef(function (props, ref) {
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */_jsx(RovingFocusGroup, {
+    gap: knobProps.gap.gap,
+    focusable: true,
+    outlineOffset: 1,
+    focusStyle: {
+      zIndex: 1
+    },
+    ...props,
+    ref
+  });
+});
+var FocusItemContext = createStyledContext({
+  value: ""
+});
+var FocusGroupItem = /* @__PURE__ */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
+    },
+    ...(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__ */_jsx(FocusItemContext.Provider, {
+    value,
+    children: /* @__PURE__ */_jsx(RovingFocusGroup.Item, {
+      ref,
+      ...combinedProps
+    })
+  });
+});
+var RadiusGroup = styled(Group, {
+  orientation: "vertical",
+  gap: "$2"
+});
+var CheckboxesTitle = styled(H2, {
+  size: "$8"
+});
+var CheckboxesImp = function CheckboxesImp2(checkboxesProps) {
+  var {
+    values,
+    onValuesChange: onValuesChange2,
+    ...props
+  } = checkboxesProps;
+  return /* @__PURE__ */_jsx(CheckboxesContext.Provider, {
+    values,
+    onValuesChange: onValuesChange2,
+    children: /* @__PURE__ */_jsx(View, {
+      ...props
+    })
+  });
+};
+var CheckboxesCheckbox = TamaguiCheckbox.styleable(function (checkboxProps, ref) {
+  var {
+    checked: _userChecked,
+    onCheckedChange: onCheckedChangeProp,
+    ...props
+  } = checkboxProps;
+  var {
+    values,
+    onValuesChange: onValuesChange2
+  } = CheckboxesContext.useStyledContext();
+  var {
+    value: focusItemValue
+  } = FocusItemContext.useStyledContext();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var radiusToken = knobProps.borderRadius.borderRadius;
+  var cappedRadius = 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__ */_jsx(CheckboxFieldFrame, {
+    ref,
+    value: focusItemValue,
+    ...knobProps.inputSurface,
+    size: knobProps.sizeToken,
+    ...resolvedRadius,
+    outlined: knobProps.outlined,
+    transition: knobProps.transition,
+    ...combinedProps
+  });
+});
+var CheckboxCardFrame = styled(View, {
+  cursor: "pointer",
+  width: "100%",
+  padding: "$3",
+  borderRadius: "$4",
+  backgroundColor: formCardColors.background.base,
+  borderColor: formCardColors.border.base,
+  borderWidth: 1,
+  hoverStyle: {
+    borderColor: formCardColors.border.hover
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: formCardColors.background.active,
+        borderColor: formCardColors.border.active
+      }
+    }
+  }
+});
+var CheckboxCard = CheckboxCardFrame.styleable(function (cardProps, ref) {
+  var _cardProps_active;
+  var {
+    values
+  } = CheckboxesContext.useStyledContext();
+  var {
+    value
+  } = FocusItemContext.useStyledContext();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var selected = values[value];
+  return /* @__PURE__ */_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 = TamaguiCheckbox.Indicator.styleable(function (indicatorProps, ref) {
+  var {
+    children,
+    ...props
+  } = indicatorProps;
+  return /* @__PURE__ */_jsx(TamaguiCheckbox.Indicator, {
+    ref,
+    ...props,
+    children: children !== null && children !== void 0 ? children : /* @__PURE__ */_jsx(CheckRegular, {})
+  });
+});
+var Checkboxes = withStaticProperties(CheckboxesImp, {
+  Group: withStaticProperties(RadiusGroup, {
+    Item: Group.Item
+  }),
+  FocusGroup: withStaticProperties(FocusGroup, {
+    Item: FocusGroupItem
+  }),
+  Title: CheckboxesTitle,
+  Checkbox: withStaticProperties(CheckboxesCheckbox, {
+    Indicator: CheckboxesIndicator,
+    Label
+  }),
+  Card: CheckboxCard
+});
+export { Checkbox, CheckboxGroup, Checkboxes };
+//# sourceMappingURL=index.native.js.map

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

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

package/dist/esm/fields/ColorPicker/ColorPicker.spec.mjs

@@ -0,0 +1,124 @@
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isValidHex, normalizeHex, rgbToHex, rgbToHsv } from "./parts.mjs";
+import { jsx } from "react/jsx-runtime";
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  Palette: () => null,
+  X: () => null
+}));
+async function loadColorPicker() {
+  return (await import("./index.mjs")).ColorPicker;
+}
+describe("ColorPicker", () => {
+  it("should handle disabled state", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(/* @__PURE__ */jsx(ColorPicker, {
+      label: "Color",
+      name: "color",
+      disabled: true
+    }));
+    const input = result.container.querySelector("input");
+    expect(input).toBeTruthy();
+    expect(input?.getAttribute("aria-disabled")).toBe("true");
+    const clickable = result.container.querySelector("input,button,[role='button']");
+    if (clickable) {
+      fireEvent.click(clickable);
+    }
+    expect(result.findTextElement("Opacity: 100%")).toBeUndefined();
+  });
+  it("opens popover and updates value from hex input", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(/* @__PURE__ */jsx(ColorPicker, {
+      label: "Color",
+      name: "color",
+      placeholder: "Pick a color",
+      showAlpha: true
+    }));
+    const triggerInput = result.container.querySelector("input");
+    expect(triggerInput).toBeTruthy();
+    await act(async () => {
+      if (triggerInput) fireEvent.click(triggerInput);
+    });
+    await waitFor(() => {
+      expect(document.body.textContent?.includes("Opacity:")).toBe(true);
+    });
+    const hexInput = document.body.querySelector('input[placeholder="#000000"]');
+    expect(hexInput).toBeTruthy();
+    await act(async () => {
+      if (hexInput) fireEvent.change(hexInput, {
+        target: {
+          value: "00ff00"
+        }
+      });
+    });
+    await waitFor(() => {
+      const updated = result.container.querySelector("input");
+      expect(updated?.value).toBe("#00FF00");
+    });
+  });
+  it("clears selected value from trigger button", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(/* @__PURE__ */jsx(ColorPicker, {
+      label: "Color",
+      name: "color",
+      placeholder: "Pick a color",
+      defaultValue: "#112233"
+    }));
+    const input = result.container.querySelector("input");
+    expect(input?.value).toBe("#112233");
+    const triggerButton = result.container.querySelector("button");
+    await act(async () => {
+      if (triggerButton) fireEvent.click(triggerButton);
+    });
+    await waitFor(() => {
+      const updated = result.container.querySelector("input");
+      expect(updated?.value ?? "").toBe("");
+    });
+  });
+  it("shows format validation error for invalid rgb value", async () => {
+    const ColorPicker = await loadColorPicker();
+    const result = renderWithProviders(/* @__PURE__ */jsx(ColorPicker, {
+      label: "Color",
+      name: void 0,
+      format: "rgb",
+      defaultValue: "not-rgb"
+    }));
+    expect(result.findTextElement("Invalid RGB color value")).toBeDefined();
+  });
+  describe("color utilities", () => {
+    it("validates and normalizes hex values", () => {
+      expect(isValidHex("#AABBCC")).toBe(true);
+      expect(isValidHex("#abc")).toBe(true);
+      expect(isValidHex("123456")).toBe(false);
+      expect(normalizeHex("#abc")).toBe("#AABBCC");
+      expect(normalizeHex("aabbcc")).toBe("#AABBCC");
+    });
+    it("converts between RGB and HEX", () => {
+      expect(rgbToHex(255, 0, 128)).toBe("#FF0080");
+      expect(hexToRgb("#FF0080")).toEqual({
+        r: 255,
+        g: 0,
+        b: 128
+      });
+      expect(hexToRgb("invalid")).toBeNull();
+    });
+    it("converts between HSV and RGB/HEX", () => {
+      expect(hsvToRgb(0, 100, 100)).toEqual({
+        r: 255,
+        g: 0,
+        b: 0
+      });
+      expect(hsvToHex(120, 100, 100)).toBe("#00FF00");
+      const hsv = rgbToHsv(0, 0, 255);
+      expect(hsv.h).toBe(240);
+      expect(hsv.s).toBe(100);
+      expect(hsv.v).toBe(100);
+      const fromHex = hexToHsv("#0000FF");
+      expect(fromHex.h).toBe(240);
+      expect(fromHex.s).toBe(100);
+      expect(fromHex.v).toBe(100);
+    });
+  });
+});
+//# sourceMappingURL=ColorPicker.spec.mjs.map

package/dist/esm/fields/ColorPicker/ColorPicker.spec.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["act","fireEvent","waitFor","describe","expect","it","vi","renderWithProviders","hexToHsv","hexToRgb","hsvToHex","hsvToRgb","isValidHex","normalizeHex","rgbToHex","rgbToHsv","jsx","mock","Palette","X","loadColorPicker","ColorPicker","result","label","name","disabled","input","container","querySelector","toBeTruthy","getAttribute","toBe","clickable","click","findTextElement","toBeUndefined","placeholder","showAlpha","triggerInput","document","body","textContent","includes","hexInput","change","target","value","updated","defaultValue","triggerButton","format","toBeDefined","toEqual","r","g","b","toBeNull","hsv","h","s","v","fromHex"],"sources":["../../../../src/fields/ColorPicker/ColorPicker.spec.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,EAAKC,SAAA,EAAWC,OAAA,QAAe;AACxC,SAASC,QAAA,EAAUC,MAAA,EAAQC,EAAA,EAAIC,EAAA,QAAU;AACzC,SAASC,mBAAA,QAA2B;AACpC,SACEC,QAAA,EACAC,QAAA,EACAC,QAAA,EACAC,QAAA,EACAC,UAAA,EACAC,YAAA,EACAC,QAAA,EACAC,QAAA,QACK;AAcgC,SAAAC,GAAA;AAZvCV,EAAA,CAAGW,IAAA,CAAK,2BAA2B,OAAO;EACxCC,OAAA,EAASA,CAAA,KAAM;EACfC,CAAA,EAAGA,CAAA,KAAM;AACX,EAAE;AAEF,eAAeC,gBAAA,EAAkB;EAC/B,QAAQ,MAAM,OAAO,aAAS,GAAGC,WAAA;AACnC;AAEAlB,QAAA,CAAS,eAAe,MAAM;EAC5BE,EAAA,CAAG,gCAAgC,YAAY;IAC7C,MAAMgB,WAAA,GAAc,MAAMD,eAAA,CAAgB;IAC1C,MAAME,MAAA,GAASf,mBAAA,CAAoB,eAAAS,GAAA,CAACK,WAAA;MAAYE,KAAA,EAAM;MAAQC,IAAA,EAAK;MAAQC,QAAA,EAAQ;IAAA,CAAC,CAAE;IACtF,MAAMC,KAAA,GAAQJ,MAAA,CAAOK,SAAA,CAAUC,aAAA,CAAc,OAAO;IACpDxB,MAAA,CAAOsB,KAAK,EAAEG,UAAA,CAAW;IACzBzB,MAAA,CAAOsB,KAAA,EAAOI,YAAA,CAAa,eAAe,CAAC,EAAEC,IAAA,CAAK,MAAM;IAExD,MAAMC,SAAA,GAAYV,MAAA,CAAOK,SAAA,CAAUC,aAAA,CAAc,8BAA8B;IAC/E,IAAII,SAAA,EAAW;MACb/B,SAAA,CAAUgC,KAAA,CAAMD,SAAS;IAC3B;IACA5B,MAAA,CAAOkB,MAAA,CAAOY,eAAA,CAAgB,eAAe,CAAC,EAAEC,aAAA,CAAc;EAChE,CAAC;EAED9B,EAAA,CAAG,kDAAkD,YAAY;IAC/D,MAAMgB,WAAA,GAAc,MAAMD,eAAA,CAAgB;IAC1C,MAAME,MAAA,GAASf,mBAAA,CACb,eAAAS,GAAA,CAACK,WAAA;MAAYE,KAAA,EAAM;MAAQC,IAAA,EAAK;MAAQY,WAAA,EAAY;MAAeC,SAAA,EAAS;IAAA,CAAC,CAC/E;IAEA,MAAMC,YAAA,GAAehB,MAAA,CAAOK,SAAA,CAAUC,aAAA,CAAc,OAAO;IAC3DxB,MAAA,CAAOkC,YAAY,EAAET,UAAA,CAAW;IAEhC,MAAM7B,GAAA,CAAI,YAAY;MACpB,IAAIsC,YAAA,EAAcrC,SAAA,CAAUgC,KAAA,CAAMK,YAAY;IAChD,CAAC;IAED,MAAMpC,OAAA,CAAQ,MAAM;MAClBE,MAAA,CAAOmC,QAAA,CAASC,IAAA,CAAKC,WAAA,EAAaC,QAAA,CAAS,UAAU,CAAC,EAAEX,IAAA,CAAK,IAAI;IACnE,CAAC;IAED,MAAMY,QAAA,GAAWJ,QAAA,CAASC,IAAA,CAAKZ,aAAA,CAC7B,8BACF;IACAxB,MAAA,CAAOuC,QAAQ,EAAEd,UAAA,CAAW;IAE5B,MAAM7B,GAAA,CAAI,YAAY;MACpB,IAAI2C,QAAA,EAAU1C,SAAA,CAAU2C,MAAA,CAAOD,QAAA,EAAU;QAAEE,MAAA,EAAQ;UAAEC,KAAA,EAAO;QAAS;MAAE,CAAC;IAC1E,CAAC;IAED,MAAM5C,OAAA,CAAQ,MAAM;MAClB,MAAM6C,OAAA,GAAUzB,MAAA,CAAOK,SAAA,CAAUC,aAAA,CAAc,OAAO;MACtDxB,MAAA,CAAO2C,OAAA,EAASD,KAAK,EAAEf,IAAA,CAAK,SAAS;IACvC,CAAC;EACH,CAAC;EAED1B,EAAA,CAAG,6CAA6C,YAAY;IAC1D,MAAMgB,WAAA,GAAc,MAAMD,eAAA,CAAgB;IAC1C,MAAME,MAAA,GAASf,mBAAA,CACb,eAAAS,GAAA,CAACK,WAAA;MAAYE,KAAA,EAAM;MAAQC,IAAA,EAAK;MAAQY,WAAA,EAAY;MAAeY,YAAA,EAAa;IAAA,CAAU,CAC5F;IAEA,MAAMtB,KAAA,GAAQJ,MAAA,CAAOK,SAAA,CAAUC,aAAA,CAAc,OAAO;IACpDxB,MAAA,CAAOsB,KAAA,EAAOoB,KAAK,EAAEf,IAAA,CAAK,SAAS;IAEnC,MAAMkB,aAAA,GAAgB3B,MAAA,CAAOK,SAAA,CAAUC,aAAA,CAAc,QAAQ;IAC7D,MAAM5B,GAAA,CAAI,YAAY;MACpB,IAAIiD,aAAA,EAAehD,SAAA,CAAUgC,KAAA,CAAMgB,aAAa;IAClD,CAAC;IAED,MAAM/C,OAAA,CAAQ,MAAM;MAClB,MAAM6C,OAAA,GAAUzB,MAAA,CAAOK,SAAA,CAAUC,aAAA,CAAc,OAAO;MACtDxB,MAAA,CAAO2C,OAAA,EAASD,KAAA,IAAS,EAAE,EAAEf,IAAA,CAAK,EAAE;IACtC,CAAC;EACH,CAAC;EAED1B,EAAA,CAAG,uDAAuD,YAAY;IACpE,MAAMgB,WAAA,GAAc,MAAMD,eAAA,CAAgB;IAC1C,MAAME,MAAA,GAASf,mBAAA,CACb,eAAAS,GAAA,CAACK,WAAA;MAAYE,KAAA,EAAM;MAAQC,IAAA,EAAM;MAAoB0B,MAAA,EAAO;MAAMF,YAAA,EAAa;IAAA,CAAU,CAC3F;IAEA5C,MAAA,CAAOkB,MAAA,CAAOY,eAAA,CAAgB,yBAAyB,CAAC,EAAEiB,WAAA,CAAY;EACxE,CAAC;EAEDhD,QAAA,CAAS,mBAAmB,MAAM;IAChCE,EAAA,CAAG,uCAAuC,MAAM;MAC9CD,MAAA,CAAOQ,UAAA,CAAW,SAAS,CAAC,EAAEmB,IAAA,CAAK,IAAI;MACvC3B,MAAA,CAAOQ,UAAA,CAAW,MAAM,CAAC,EAAEmB,IAAA,CAAK,IAAI;MACpC3B,MAAA,CAAOQ,UAAA,CAAW,QAAQ,CAAC,EAAEmB,IAAA,CAAK,KAAK;MACvC3B,MAAA,CAAOS,YAAA,CAAa,MAAM,CAAC,EAAEkB,IAAA,CAAK,SAAS;MAC3C3B,MAAA,CAAOS,YAAA,CAAa,QAAQ,CAAC,EAAEkB,IAAA,CAAK,SAAS;IAC/C,CAAC;IAED1B,EAAA,CAAG,gCAAgC,MAAM;MACvCD,MAAA,CAAOU,QAAA,CAAS,KAAK,GAAG,GAAG,CAAC,EAAEiB,IAAA,CAAK,SAAS;MAC5C3B,MAAA,CAAOK,QAAA,CAAS,SAAS,CAAC,EAAE2C,OAAA,CAAQ;QAAEC,CAAA,EAAG;QAAKC,CAAA,EAAG;QAAGC,CAAA,EAAG;MAAI,CAAC;MAC5DnD,MAAA,CAAOK,QAAA,CAAS,SAAS,CAAC,EAAE+C,QAAA,CAAS;IACvC,CAAC;IAEDnD,EAAA,CAAG,oCAAoC,MAAM;MAC3CD,MAAA,CAAOO,QAAA,CAAS,GAAG,KAAK,GAAG,CAAC,EAAEyC,OAAA,CAAQ;QAAEC,CAAA,EAAG;QAAKC,CAAA,EAAG;QAAGC,CAAA,EAAG;MAAE,CAAC;MAC5DnD,MAAA,CAAOM,QAAA,CAAS,KAAK,KAAK,GAAG,CAAC,EAAEqB,IAAA,CAAK,SAAS;MAE9C,MAAM0B,GAAA,GAAM1C,QAAA,CAAS,GAAG,GAAG,GAAG;MAC9BX,MAAA,CAAOqD,GAAA,CAAIC,CAAC,EAAE3B,IAAA,CAAK,GAAG;MACtB3B,MAAA,CAAOqD,GAAA,CAAIE,CAAC,EAAE5B,IAAA,CAAK,GAAG;MACtB3B,MAAA,CAAOqD,GAAA,CAAIG,CAAC,EAAE7B,IAAA,CAAK,GAAG;MAEtB,MAAM8B,OAAA,GAAUrD,QAAA,CAAS,SAAS;MAClCJ,MAAA,CAAOyD,OAAA,CAAQH,CAAC,EAAE3B,IAAA,CAAK,GAAG;MAC1B3B,MAAA,CAAOyD,OAAA,CAAQF,CAAC,EAAE5B,IAAA,CAAK,GAAG;MAC1B3B,MAAA,CAAOyD,OAAA,CAAQD,CAAC,EAAE7B,IAAA,CAAK,GAAG;IAC5B,CAAC;EACH,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isValidHex, normalizeHex, rgbToHex, rgbToHsv } from "./parts.native.js";
+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.native.js")).ColorPicker;
+}
+describe("ColorPicker", function () {
+  it("should handle disabled state", async function () {
+    var ColorPicker = await loadColorPicker();
+    var result = renderWithProviders(/* @__PURE__ */_jsx(ColorPicker, {
+      label: "Color",
+      name: "color",
+      disabled: true
+    }));
+    var input = result.container.querySelector("input");
+    expect(input).toBeTruthy();
+    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) {
+      fireEvent.click(clickable);
+    }
+    expect(result.findTextElement("Opacity: 100%")).toBeUndefined();
+  });
+  it("opens popover and updates value from hex input", async function () {
+    var ColorPicker = await loadColorPicker();
+    var result = renderWithProviders(/* @__PURE__ */_jsx(ColorPicker, {
+      label: "Color",
+      name: "color",
+      placeholder: "Pick a color",
+      showAlpha: true
+    }));
+    var triggerInput = result.container.querySelector("input");
+    expect(triggerInput).toBeTruthy();
+    await act(async function () {
+      if (triggerInput) fireEvent.click(triggerInput);
+    });
+    await waitFor(function () {
+      var _document_body_textContent;
+      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"]');
+    expect(hexInput).toBeTruthy();
+    await act(async function () {
+      if (hexInput) fireEvent.change(hexInput, {
+        target: {
+          value: "00ff00"
+        }
+      });
+    });
+    await waitFor(function () {
+      var updated = result.container.querySelector("input");
+      expect(updated === null || updated === void 0 ? void 0 : updated.value).toBe("#00FF00");
+    });
+  });
+  it("clears selected value from trigger button", async function () {
+    var ColorPicker = await loadColorPicker();
+    var result = renderWithProviders(/* @__PURE__ */_jsx(ColorPicker, {
+      label: "Color",
+      name: "color",
+      placeholder: "Pick a color",
+      defaultValue: "#112233"
+    }));
+    var input = result.container.querySelector("input");
+    expect(input === null || input === void 0 ? void 0 : input.value).toBe("#112233");
+    var triggerButton = result.container.querySelector("button");
+    await act(async function () {
+      if (triggerButton) fireEvent.click(triggerButton);
+    });
+    await waitFor(function () {
+      var _ref;
+      var updated = result.container.querySelector("input");
+      expect((_ref = updated === null || updated === void 0 ? void 0 : updated.value) !== null && _ref !== void 0 ? _ref : "").toBe("");
+    });
+  });
+  it("shows format validation error for invalid rgb value", async function () {
+    var ColorPicker = await loadColorPicker();
+    var result = renderWithProviders(/* @__PURE__ */_jsx(ColorPicker, {
+      label: "Color",
+      name: void 0,
+      format: "rgb",
+      defaultValue: "not-rgb"
+    }));
+    expect(result.findTextElement("Invalid RGB color value")).toBeDefined();
+  });
+  describe("color utilities", function () {
+    it("validates and normalizes hex values", function () {
+      expect(isValidHex("#AABBCC")).toBe(true);
+      expect(isValidHex("#abc")).toBe(true);
+      expect(isValidHex("123456")).toBe(false);
+      expect(normalizeHex("#abc")).toBe("#AABBCC");
+      expect(normalizeHex("aabbcc")).toBe("#AABBCC");
+    });
+    it("converts between RGB and HEX", function () {
+      expect(rgbToHex(255, 0, 128)).toBe("#FF0080");
+      expect(hexToRgb("#FF0080")).toEqual({
+        r: 255,
+        g: 0,
+        b: 128
+      });
+      expect(hexToRgb("invalid")).toBeNull();
+    });
+    it("converts between HSV and RGB/HEX", function () {
+      expect(hsvToRgb(0, 100, 100)).toEqual({
+        r: 255,
+        g: 0,
+        b: 0
+      });
+      expect(hsvToHex(120, 100, 100)).toBe("#00FF00");
+      var hsv = rgbToHsv(0, 0, 255);
+      expect(hsv.h).toBe(240);
+      expect(hsv.s).toBe(100);
+      expect(hsv.v).toBe(100);
+      var fromHex = hexToHsv("#0000FF");
+      expect(fromHex.h).toBe(240);
+      expect(fromHex.s).toBe(100);
+      expect(fromHex.v).toBe(100);
+    });
+  });
+});
+//# sourceMappingURL=ColorPicker.spec.native.js.map

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

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