@j2-health/design-system 0.2.0 → 0.2.1

package/dist/src/components/popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Popover as AntdPopover, PopoverProps as AntdPopoverProps } from 'antd'\nimport cx from 'classnames'\nimport styles from './Popover.module.css'\n\ntype _Props = AntdPopoverProps & {\n  contentPadding?: boolean\n  scrollable?: boolean\n  /* @deprecated use paddingSize instead */\n  smallPadding?: boolean\n  /* default padding is large */\n  paddingSize?: 'xxs' | 'xs' | 'sm' | 'md' | 'xl'\n}\n\nexport type PopoverProps = Expand<_Props>\n\nconst Popover = ({\n  children,\n  placement = 'top',\n  scrollable = false,\n  contentPadding = true,\n  content,\n  smallPadding = false,\n  paddingSize,\n  arrow = false,\n  ...props\n}: PopoverProps) => {\n  return (\n    <AntdPopover\n      overlayClassName={cx(\n        styles.j2Popover,\n        scrollable && styles.scrollable,\n        smallPadding && styles.smallPadding,\n        paddingSize && styles[`${paddingSize}Padding`]\n      )}\n      {...props}\n      placement={placement}\n      arrow={arrow}\n      content={() => {\n        if (!contentPadding) {\n          return <div>{typeof content == 'function' ? content() : content}</div>\n        }\n\n        return typeof content == 'function' ? content() : content\n      }}\n    >\n      <div>{children}</div>\n    </AntdPopover>\n  )\n}\n\nexport { Popover }\n"],"names":["AntdPopover"],"mappings":";;;;AAeA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,MAAoB;AAClB,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,kBAAkB;AAAA,QAChB,OAAO;AAAA,QACP,cAAc,OAAO;AAAA,QACrB,gBAAgB,OAAO;AAAA,QACvB,eAAe,OAAO,GAAG,WAAW,SAAS;AAAA,MAAA;AAAA,MAE9C,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AACb,YAAI,CAAC,gBAAgB;AACnB,qCAAQ,OAAA,EAAK,UAAA,OAAO,WAAW,aAAa,YAAY,SAAQ;AAAA,QAClE;AAEA,eAAO,OAAO,WAAW,aAAa,QAAA,IAAY;AAAA,MACpD;AAAA,MAEA,UAAA,oBAAC,SAAK,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGrB;"}

package/dist/src/components/popover/Popover.module.css.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const j2Popover = "_j2Popover_1egkj_1";
+const smallPadding = "_smallPadding_1egkj_6";
+const smPadding = "_smPadding_1egkj_7";
+const xxsPadding = "_xxsPadding_1egkj_11";
+const xsPadding = "_xsPadding_1egkj_15";
+const mdPadding = "_mdPadding_1egkj_19";
+const xlPadding = "_xlPadding_1egkj_23";
+const popoverHeader = "_popoverHeader_1egkj_34";
+const scrollable = "_scrollable_1egkj_40";
+const styles = {
+  j2Popover,
+  smallPadding,
+  smPadding,
+  xxsPadding,
+  xsPadding,
+  mdPadding,
+  xlPadding,
+  popoverHeader,
+  scrollable
+};
+exports.default = styles;
+exports.j2Popover = j2Popover;
+exports.mdPadding = mdPadding;
+exports.popoverHeader = popoverHeader;
+exports.scrollable = scrollable;
+exports.smPadding = smPadding;
+exports.smallPadding = smallPadding;
+exports.xlPadding = xlPadding;
+exports.xsPadding = xsPadding;
+exports.xxsPadding = xxsPadding;
+//# sourceMappingURL=Popover.module.css.cjs.map

package/dist/src/components/popover/Popover.module.css.cjs.map

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

package/dist/src/components/popover/Popover.module.css.js

@@ -0,0 +1,33 @@
+const j2Popover = "_j2Popover_1egkj_1";
+const smallPadding = "_smallPadding_1egkj_6";
+const smPadding = "_smPadding_1egkj_7";
+const xxsPadding = "_xxsPadding_1egkj_11";
+const xsPadding = "_xsPadding_1egkj_15";
+const mdPadding = "_mdPadding_1egkj_19";
+const xlPadding = "_xlPadding_1egkj_23";
+const popoverHeader = "_popoverHeader_1egkj_34";
+const scrollable = "_scrollable_1egkj_40";
+const styles = {
+  j2Popover,
+  smallPadding,
+  smPadding,
+  xxsPadding,
+  xsPadding,
+  mdPadding,
+  xlPadding,
+  popoverHeader,
+  scrollable
+};
+export {
+  styles as default,
+  j2Popover,
+  mdPadding,
+  popoverHeader,
+  scrollable,
+  smPadding,
+  smallPadding,
+  xlPadding,
+  xsPadding,
+  xxsPadding
+};
+//# sourceMappingURL=Popover.module.css.js.map

package/dist/src/components/popover/Popover.module.css.js.map

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

package/dist/src/components/progress/Progress.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const antd = require("antd");
+const Progress = ({ ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Progress, { ...props });
+};
+exports.Progress = Progress;
+//# sourceMappingURL=Progress.cjs.map

package/dist/src/components/progress/Progress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.cjs","sources":["../../../../src/components/progress/Progress.tsx"],"sourcesContent":["import { Progress as AntdProgress, ProgressProps } from 'antd'\n\nconst Progress = ({ ...props }: ProgressProps) => {\n  return <AntdProgress {...props} />\n}\n\nexport { Progress }\n"],"names":["jsx","AntdProgress"],"mappings":";;;;AAEA,MAAM,WAAW,CAAC,EAAE,GAAG,YAA2B;AAChD,SAAOA,+BAACC,KAAAA,UAAA,EAAc,GAAG,MAAA,CAAO;AAClC;;"}

package/dist/src/components/progress/Progress.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Progress as Progress$1 } from "antd";
+const Progress = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(Progress$1, { ...props });
+};
+export {
+  Progress
+};
+//# sourceMappingURL=Progress.js.map

package/dist/src/components/progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../../src/components/progress/Progress.tsx"],"sourcesContent":["import { Progress as AntdProgress, ProgressProps } from 'antd'\n\nconst Progress = ({ ...props }: ProgressProps) => {\n  return <AntdProgress {...props} />\n}\n\nexport { Progress }\n"],"names":["AntdProgress"],"mappings":";;AAEA,MAAM,WAAW,CAAC,EAAE,GAAG,YAA2B;AAChD,SAAO,oBAACA,YAAA,EAAc,GAAG,MAAA,CAAO;AAClC;"}

package/dist/src/components/radio/Radio.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const antd = require("antd");
+const Radio = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Radio, { ...props });
+};
+const RadioGroup = ({
+  buttonStyle = "solid",
+  optionType = "button",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Radio.Group,
+    {
+      ...props,
+      buttonStyle,
+      optionType
+    }
+  );
+};
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=Radio.cjs.map

package/dist/src/components/radio/Radio.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.cjs","sources":["../../../../src/components/radio/Radio.tsx"],"sourcesContent":["import {\n  Radio as AntdRadio,\n  RadioProps as AntdRadioProps,\n  RadioGroupProps as AntdRadioGroupProps,\n} from 'antd'\n\ntype RadioProps = Expand<AntdRadioProps>\n\ntype FullRadioGroupProps = AntdRadioGroupProps & {\n  buttonStyle?: 'solid' | 'outline'\n  optionType?: 'default' | 'button'\n}\ntype RadioGroupProps = Expand<FullRadioGroupProps>\n\nconst Radio = (props: RadioProps) => {\n  return <AntdRadio {...props} />\n}\n\nconst RadioGroup = ({\n  buttonStyle = 'solid',\n  optionType = 'button',\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <AntdRadio.Group\n      {...props}\n      buttonStyle={buttonStyle}\n      optionType={optionType}\n    />\n  )\n}\n\nexport { Radio, RadioGroup }\n"],"names":["jsx","AntdRadio"],"mappings":";;;;AAcA,MAAM,QAAQ,CAAC,UAAsB;AACnC,SAAOA,+BAACC,KAAAA,OAAA,EAAW,GAAG,MAAA,CAAO;AAC/B;AAEA,MAAM,aAAa,CAAC;AAAA,EAClB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,MAAuB;AACrB,SACED,2BAAAA;AAAAA,IAACC,KAAAA,MAAU;AAAA,IAAV;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}

package/dist/src/components/radio/Radio.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { Radio as Radio$1 } from "antd";
+const Radio = (props) => {
+  return /* @__PURE__ */ jsx(Radio$1, { ...props });
+};
+const RadioGroup = ({
+  buttonStyle = "solid",
+  optionType = "button",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Radio$1.Group,
+    {
+      ...props,
+      buttonStyle,
+      optionType
+    }
+  );
+};
+export {
+  Radio,
+  RadioGroup
+};
+//# sourceMappingURL=Radio.js.map

package/dist/src/components/radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../src/components/radio/Radio.tsx"],"sourcesContent":["import {\n  Radio as AntdRadio,\n  RadioProps as AntdRadioProps,\n  RadioGroupProps as AntdRadioGroupProps,\n} from 'antd'\n\ntype RadioProps = Expand<AntdRadioProps>\n\ntype FullRadioGroupProps = AntdRadioGroupProps & {\n  buttonStyle?: 'solid' | 'outline'\n  optionType?: 'default' | 'button'\n}\ntype RadioGroupProps = Expand<FullRadioGroupProps>\n\nconst Radio = (props: RadioProps) => {\n  return <AntdRadio {...props} />\n}\n\nconst RadioGroup = ({\n  buttonStyle = 'solid',\n  optionType = 'button',\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <AntdRadio.Group\n      {...props}\n      buttonStyle={buttonStyle}\n      optionType={optionType}\n    />\n  )\n}\n\nexport { Radio, RadioGroup }\n"],"names":["AntdRadio"],"mappings":";;AAcA,MAAM,QAAQ,CAAC,UAAsB;AACnC,SAAO,oBAACA,SAAA,EAAW,GAAG,MAAA,CAAO;AAC/B;AAEA,MAAM,aAAa,CAAC;AAAA,EAClB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAACA,QAAU;AAAA,IAAV;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/src/components/rate/Rate.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("@phosphor-icons/react");
+const antd = require("antd");
+;/* empty css           */
+const Rate = ({ count = 5, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Rate,
+    {
+      ...props,
+      className: "j2-rate",
+      count,
+      disabled: true,
+      allowHalf: true,
+      allowClear: true,
+      character: /* @__PURE__ */ jsxRuntime.jsx(react.StarIcon, { weight: "fill" })
+    }
+  );
+};
+exports.Rate = Rate;
+//# sourceMappingURL=Rate.cjs.map

package/dist/src/components/rate/Rate.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rate.cjs","sources":["../../../../src/components/rate/Rate.tsx"],"sourcesContent":["import { StarIcon } from '@phosphor-icons/react'\nimport { Rate as AntdRate, RateProps } from 'antd'\nimport './Rate.css'\n\nexport type Props = Expand<RateProps>\n\nexport const Rate = ({ count = 5, ...props }: Props) => {\n  return (\n    <AntdRate\n      {...props}\n      className=\"j2-rate\"\n      count={count}\n      disabled={true}\n      allowHalf={true}\n      allowClear={true}\n      character={<StarIcon weight=\"fill\" />}\n    />\n  )\n}\n"],"names":["jsx","AntdRate","StarIcon"],"mappings":";;;;;;AAMO,MAAM,OAAO,CAAC,EAAE,QAAQ,GAAG,GAAG,YAAmB;AACtD,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,WAAWD,2BAAAA,IAACE,MAAAA,UAAA,EAAS,QAAO,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGzC;;"}

package/dist/src/components/rate/Rate.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { StarIcon } from "@phosphor-icons/react";
+import { Rate as Rate$1 } from "antd";
+/* empty css         */
+const Rate = ({ count = 5, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Rate$1,
+    {
+      ...props,
+      className: "j2-rate",
+      count,
+      disabled: true,
+      allowHalf: true,
+      allowClear: true,
+      character: /* @__PURE__ */ jsx(StarIcon, { weight: "fill" })
+    }
+  );
+};
+export {
+  Rate
+};
+//# sourceMappingURL=Rate.js.map

package/dist/src/components/rate/Rate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rate.js","sources":["../../../../src/components/rate/Rate.tsx"],"sourcesContent":["import { StarIcon } from '@phosphor-icons/react'\nimport { Rate as AntdRate, RateProps } from 'antd'\nimport './Rate.css'\n\nexport type Props = Expand<RateProps>\n\nexport const Rate = ({ count = 5, ...props }: Props) => {\n  return (\n    <AntdRate\n      {...props}\n      className=\"j2-rate\"\n      count={count}\n      disabled={true}\n      allowHalf={true}\n      allowClear={true}\n      character={<StarIcon weight=\"fill\" />}\n    />\n  )\n}\n"],"names":["AntdRate"],"mappings":";;;;AAMO,MAAM,OAAO,CAAC,EAAE,QAAQ,GAAG,GAAG,YAAmB;AACtD,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,WAAW,oBAAC,UAAA,EAAS,QAAO,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGzC;"}

package/dist/src/components/select/AntdSelect.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const antd = require("antd");
+const Icon = require("@ant-design/icons");
+const react = require("@phosphor-icons/react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AntdSelect = (props) => {
+  var _a;
+  const [isFocused, setIsFocused] = React.useState(false);
+  const handleSearch = (value) => {
+    if (props.onSearch) {
+      props.onSearch(value);
+    }
+  };
+  const dropdownRender = React__namespace.useCallback(
+    (menu) => {
+      if (props.loading) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading..." }),
+          /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, { indicator: /* @__PURE__ */ jsxRuntime.jsx(Icon.LoadingOutlined, { spin: true }), size: "small" })
+        ] });
+      }
+      if (!props.options || props.options && props.options.length === 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1", children: "No options" });
+      }
+      return menu;
+    },
+    [props.loading, (_a = props.options) == null ? void 0 : _a.length]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Select,
+    {
+      suffixIcon: props.loading ? /* @__PURE__ */ jsxRuntime.jsx(
+        antd.Spin,
+        {
+          indicator: /* @__PURE__ */ jsxRuntime.jsx(Icon.LoadingOutlined, { spin: true }),
+          size: "small",
+          "data-testid": "loading-spinner"
+        }
+      ) : props.showSearch && isFocused ? /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { size: 14, "data-testid": "magnifying-glass" }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
+      ...props,
+      popupRender: dropdownRender,
+      removeIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XCircleIcon, { size: 12 }),
+      allowClear: props.allowClear ? { clearIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XCircleIcon, { size: 14 }) } : false,
+      showSearch: props.showSearch,
+      onSearch: props.onSearch ? handleSearch : void 0,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+      },
+      size: props.size || "large"
+    }
+  );
+};
+exports.AntdSelect = AntdSelect;
+//# sourceMappingURL=AntdSelect.cjs.map

package/dist/src/components/select/AntdSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AntdSelect.cjs","sources":["../../../../src/components/select/AntdSelect.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Select as RawAntDSelect, Spin } from 'antd'\nimport { LoadingOutlined } from '@ant-design/icons'\nimport type { SelectProps as AntDSelectProps } from 'antd'\nimport {\n  CaretDownIcon,\n  MagnifyingGlassIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport { useState } from 'react'\n\ntype AntdSelectProps = Expand<AntDSelectProps>\n\nexport const AntdSelect = (props: AntdSelectProps) => {\n  const [isFocused, setIsFocused] = useState(false)\n\n  const handleSearch = (value: string) => {\n    if (props.onSearch) {\n      props.onSearch(value)\n    }\n  }\n\n  const dropdownRender = React.useCallback(\n    (menu: React.ReactElement): React.ReactElement => {\n      if (props.loading) {\n        return (\n          <div className=\"flex items-center justify-between px-3 py-1\">\n            <span>Loading...</span>\n            <Spin indicator={<LoadingOutlined spin />} size=\"small\" />\n          </div>\n        )\n      }\n\n      if (!props.options || (props.options && props.options.length === 0)) {\n        return <div className=\"px-3 py-1\">No options</div>\n      }\n\n      return menu\n    },\n    [props.loading, props.options?.length]\n  )\n\n  return (\n    <RawAntDSelect\n      suffixIcon={\n        props.loading ? (\n          <Spin\n            indicator={<LoadingOutlined spin />}\n            size=\"small\"\n            data-testid=\"loading-spinner\"\n          />\n        ) : props.showSearch && isFocused ? (\n          <MagnifyingGlassIcon size={14} data-testid=\"magnifying-glass\" />\n        ) : (\n          <CaretDownIcon size={14} data-testid=\"caret-down\" />\n        )\n      }\n      {...props}\n      popupRender={dropdownRender}\n      removeIcon={<XCircleIcon size={12} />}\n      allowClear={\n        props.allowClear ? { clearIcon: <XCircleIcon size={14} /> } : false\n      }\n      showSearch={props.showSearch}\n      onSearch={props.onSearch ? handleSearch : undefined}\n      onFocus={() => {\n        setIsFocused(true)\n      }}\n      onBlur={() => {\n        setIsFocused(false)\n      }}\n      size={props.size || 'large'}\n    />\n  )\n}\n"],"names":["useState","React","jsxs","jsx","Spin","LoadingOutlined","RawAntDSelect","MagnifyingGlassIcon","CaretDownIcon","XCircleIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,aAAa,CAAC,UAA2B;;AACpD,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,KAAK;AAEhD,QAAM,eAAe,CAAC,UAAkB;AACtC,QAAI,MAAM,UAAU;AAClB,YAAM,SAAS,KAAK;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,iBAAiBC,iBAAM;AAAA,IAC3B,CAAC,SAAiD;AAChD,UAAI,MAAM,SAAS;AACjB,eACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,UAAAC,2BAAAA,IAAC,UAAK,UAAA,aAAA,CAAU;AAAA,UAChBA,2BAAAA,IAACC,KAAAA,QAAK,WAAWD,+BAACE,KAAAA,mBAAgB,MAAI,KAAA,CAAC,GAAI,MAAK,QAAA,CAAQ;AAAA,QAAA,GAC1D;AAAA,MAEJ;AAEA,UAAI,CAAC,MAAM,WAAY,MAAM,WAAW,MAAM,QAAQ,WAAW,GAAI;AACnE,eAAOF,2BAAAA,IAAC,OAAA,EAAI,WAAU,aAAY,UAAA,cAAU;AAAA,MAC9C;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,MAAM,UAAS,WAAM,YAAN,mBAAe,MAAM;AAAA,EAAA;AAGvC,SACEA,2BAAAA;AAAAA,IAACG,KAAAA;AAAAA,IAAA;AAAA,MACC,YACE,MAAM,UACJH,2BAAAA;AAAAA,QAACC,KAAAA;AAAAA,QAAA;AAAA,UACC,WAAWD,2BAAAA,IAACE,KAAAA,iBAAA,EAAgB,MAAI,KAAA,CAAC;AAAA,UACjC,MAAK;AAAA,UACL,eAAY;AAAA,QAAA;AAAA,MAAA,IAEZ,MAAM,cAAc,YACtBF,2BAAAA,IAACI,6BAAoB,MAAM,IAAI,eAAY,oBAAmB,IAE9DJ,2BAAAA,IAACK,qBAAA,EAAc,MAAM,IAAI,eAAY,cAAa;AAAA,MAGrD,GAAG;AAAA,MACJ,aAAa;AAAA,MACb,YAAYL,2BAAAA,IAACM,MAAAA,aAAA,EAAY,MAAM,GAAA,CAAI;AAAA,MACnC,YACE,MAAM,aAAa,EAAE,0CAAYA,MAAAA,aAAA,EAAY,MAAM,GAAA,CAAI,EAAA,IAAO;AAAA,MAEhE,YAAY,MAAM;AAAA,MAClB,UAAU,MAAM,WAAW,eAAe;AAAA,MAC1C,SAAS,MAAM;AACb,qBAAa,IAAI;AAAA,MACnB;AAAA,MACA,QAAQ,MAAM;AACZ,qBAAa,KAAK;AAAA,MACpB;AAAA,MACA,MAAM,MAAM,QAAQ;AAAA,IAAA;AAAA,EAAA;AAG1B;;"}

package/dist/src/components/select/AntdSelect.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useState } from "react";
+import { Spin, Select } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import { XCircleIcon, MagnifyingGlassIcon, CaretDownIcon } from "@phosphor-icons/react";
+const AntdSelect = (props) => {
+  var _a;
+  const [isFocused, setIsFocused] = useState(false);
+  const handleSearch = (value) => {
+    if (props.onSearch) {
+      props.onSearch(value);
+    }
+  };
+  const dropdownRender = React.useCallback(
+    (menu) => {
+      if (props.loading) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1", children: [
+          /* @__PURE__ */ jsx("span", { children: "Loading..." }),
+          /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }), size: "small" })
+        ] });
+      }
+      if (!props.options || props.options && props.options.length === 0) {
+        return /* @__PURE__ */ jsx("div", { className: "px-3 py-1", children: "No options" });
+      }
+      return menu;
+    },
+    [props.loading, (_a = props.options) == null ? void 0 : _a.length]
+  );
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      suffixIcon: props.loading ? /* @__PURE__ */ jsx(
+        Spin,
+        {
+          indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+          size: "small",
+          "data-testid": "loading-spinner"
+        }
+      ) : props.showSearch && isFocused ? /* @__PURE__ */ jsx(MagnifyingGlassIcon, { size: 14, "data-testid": "magnifying-glass" }) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
+      ...props,
+      popupRender: dropdownRender,
+      removeIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 12 }),
+      allowClear: props.allowClear ? { clearIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 14 }) } : false,
+      showSearch: props.showSearch,
+      onSearch: props.onSearch ? handleSearch : void 0,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+      },
+      size: props.size || "large"
+    }
+  );
+};
+export {
+  AntdSelect
+};
+//# sourceMappingURL=AntdSelect.js.map

package/dist/src/components/select/AntdSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AntdSelect.js","sources":["../../../../src/components/select/AntdSelect.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Select as RawAntDSelect, Spin } from 'antd'\nimport { LoadingOutlined } from '@ant-design/icons'\nimport type { SelectProps as AntDSelectProps } from 'antd'\nimport {\n  CaretDownIcon,\n  MagnifyingGlassIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport { useState } from 'react'\n\ntype AntdSelectProps = Expand<AntDSelectProps>\n\nexport const AntdSelect = (props: AntdSelectProps) => {\n  const [isFocused, setIsFocused] = useState(false)\n\n  const handleSearch = (value: string) => {\n    if (props.onSearch) {\n      props.onSearch(value)\n    }\n  }\n\n  const dropdownRender = React.useCallback(\n    (menu: React.ReactElement): React.ReactElement => {\n      if (props.loading) {\n        return (\n          <div className=\"flex items-center justify-between px-3 py-1\">\n            <span>Loading...</span>\n            <Spin indicator={<LoadingOutlined spin />} size=\"small\" />\n          </div>\n        )\n      }\n\n      if (!props.options || (props.options && props.options.length === 0)) {\n        return <div className=\"px-3 py-1\">No options</div>\n      }\n\n      return menu\n    },\n    [props.loading, props.options?.length]\n  )\n\n  return (\n    <RawAntDSelect\n      suffixIcon={\n        props.loading ? (\n          <Spin\n            indicator={<LoadingOutlined spin />}\n            size=\"small\"\n            data-testid=\"loading-spinner\"\n          />\n        ) : props.showSearch && isFocused ? (\n          <MagnifyingGlassIcon size={14} data-testid=\"magnifying-glass\" />\n        ) : (\n          <CaretDownIcon size={14} data-testid=\"caret-down\" />\n        )\n      }\n      {...props}\n      popupRender={dropdownRender}\n      removeIcon={<XCircleIcon size={12} />}\n      allowClear={\n        props.allowClear ? { clearIcon: <XCircleIcon size={14} /> } : false\n      }\n      showSearch={props.showSearch}\n      onSearch={props.onSearch ? handleSearch : undefined}\n      onFocus={() => {\n        setIsFocused(true)\n      }}\n      onBlur={() => {\n        setIsFocused(false)\n      }}\n      size={props.size || 'large'}\n    />\n  )\n}\n"],"names":["RawAntDSelect"],"mappings":";;;;;;AAaO,MAAM,aAAa,CAAC,UAA2B;;AACpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,eAAe,CAAC,UAAkB;AACtC,QAAI,MAAM,UAAU;AAClB,YAAM,SAAS,KAAK;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,SAAiD;AAChD,UAAI,MAAM,SAAS;AACjB,eACE,qBAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,UAAA,oBAAC,UAAK,UAAA,aAAA,CAAU;AAAA,UAChB,oBAAC,QAAK,WAAW,oBAAC,mBAAgB,MAAI,KAAA,CAAC,GAAI,MAAK,QAAA,CAAQ;AAAA,QAAA,GAC1D;AAAA,MAEJ;AAEA,UAAI,CAAC,MAAM,WAAY,MAAM,WAAW,MAAM,QAAQ,WAAW,GAAI;AACnE,eAAO,oBAAC,OAAA,EAAI,WAAU,aAAY,UAAA,cAAU;AAAA,MAC9C;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,MAAM,UAAS,WAAM,YAAN,mBAAe,MAAM;AAAA,EAAA;AAGvC,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,YACE,MAAM,UACJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,oBAAC,iBAAA,EAAgB,MAAI,KAAA,CAAC;AAAA,UACjC,MAAK;AAAA,UACL,eAAY;AAAA,QAAA;AAAA,MAAA,IAEZ,MAAM,cAAc,YACtB,oBAAC,uBAAoB,MAAM,IAAI,eAAY,oBAAmB,IAE9D,oBAAC,eAAA,EAAc,MAAM,IAAI,eAAY,cAAa;AAAA,MAGrD,GAAG;AAAA,MACJ,aAAa;AAAA,MACb,YAAY,oBAAC,aAAA,EAAY,MAAM,GAAA,CAAI;AAAA,MACnC,YACE,MAAM,aAAa,EAAE,+BAAY,aAAA,EAAY,MAAM,GAAA,CAAI,EAAA,IAAO;AAAA,MAEhE,YAAY,MAAM;AAAA,MAClB,UAAU,MAAM,WAAW,eAAe;AAAA,MAC1C,SAAS,MAAM;AACb,qBAAa,IAAI;AAAA,MACnB;AAAA,MACA,QAAQ,MAAM;AACZ,qBAAa,KAAK;AAAA,MACpB;AAAA,MACA,MAAM,MAAM,QAAQ;AAAA,IAAA;AAAA,EAAA;AAG1B;"}

package/dist/src/components/select/Select.cjs

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const formikAntd = require("formik-antd");
+const antd = require("antd");
+const Icon = require("@ant-design/icons");
+const react = require("@phosphor-icons/react");
+const React = require("react");
+const formik = require("formik");
+const isGroupOption = (opt) => "options" in opt && Array.isArray(opt.options);
+const flattenOptions = (opts) => {
+  if (!opts) return [];
+  return opts.flatMap(
+    (o) => isGroupOption(o) ? flattenOptions(o.options) : [o]
+  );
+};
+const Select = (props) => {
+  var _a;
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isSearching, setIsSearching] = React.useState(false);
+  const [field, , helpers] = formik.useField(props.name);
+  const isMultiple = props.mode === "multiple";
+  const hasOptions = (((_a = props.options) == null ? void 0 : _a.length) ?? 0) > 0;
+  const currentValue = Array.isArray(field.value) ? field.value : [];
+  const showSelectAllFooter = isMultiple && !props.loading && !props.disabled && hasOptions && !isSearching;
+  const handleSearch = (value) => {
+    setIsSearching(value.length > 0);
+    if (props.onSearch) {
+      props.onSearch(value);
+    }
+  };
+  const handleToggleAll = () => {
+    var _a2, _b;
+    if (props.disabled) return;
+    if (currentValue.length === 0) {
+      const flat = flattenOptions(
+        props.options
+      );
+      const allOptions = flat.filter(
+        (opt) => opt.value !== void 0 && opt.value !== null && !opt.disabled
+      );
+      const payload = props.labelInValue ? allOptions.map((opt) => ({ value: opt.value, label: opt.label })) : allOptions.map((opt) => opt.value);
+      void helpers.setValue(payload);
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, payload, allOptions);
+    } else {
+      void helpers.setValue([]);
+      (_b = props.onChange) == null ? void 0 : _b.call(props, [], []);
+    }
+  };
+  const dropdownRender = (menu) => {
+    if (props.loading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading..." }),
+        /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, { indicator: /* @__PURE__ */ jsxRuntime.jsx(Icon.LoadingOutlined, { spin: true }), size: "small" })
+      ] });
+    }
+    if (!props.options || props.options && props.options.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1", children: "No options" });
+    }
+    if (!showSelectAllFooter) return menu;
+    const label = currentValue.length === 0 ? "Select all" : "Clear all";
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      menu,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 pt-1 border-t border-j2-border-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          title: label,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleToggleAll,
+          className: "w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0",
+          children: label
+        }
+      ) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    formikAntd.Select,
+    {
+      suffixIcon: props.loading ? /* @__PURE__ */ jsxRuntime.jsx(
+        antd.Spin,
+        {
+          indicator: /* @__PURE__ */ jsxRuntime.jsx(Icon.LoadingOutlined, { spin: true }),
+          size: "small",
+          "data-testid": "loading-spinner"
+        }
+      ) : props.showSearch && isFocused ? /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { size: 14, "data-testid": "magnifying-glass" }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
+      ...props,
+      popupRender: dropdownRender,
+      removeIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XCircleIcon, { size: 12 }),
+      allowClear: props.allowClear ? { clearIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XCircleIcon, { size: 14 }) } : false,
+      showSearch: props.showSearch,
+      onSearch: handleSearch,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+        setIsSearching(false);
+      },
+      size: props.size || "large"
+    }
+  );
+};
+exports.Select = Select;
+//# sourceMappingURL=Select.cjs.map

package/dist/src/components/select/Select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Select as AntDSelect } from 'formik-antd'\nimport { Spin } from 'antd'\nimport { LoadingOutlined } from '@ant-design/icons'\nimport type {\n  SelectProps as AntDSelectProps,\n  DefaultOptionType,\n} from 'antd/es/select'\nimport {\n  CaretDownIcon,\n  MagnifyingGlassIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport { useState } from 'react'\nimport { useField } from 'formik'\n\ntype SelectProps = Expand<AntDSelectProps> & {\n  name: string\n}\n\ntype GroupOption = { label?: React.ReactNode; options: DefaultOptionType[] }\n\nconst isGroupOption = (\n  opt: DefaultOptionType | GroupOption\n): opt is GroupOption =>\n  'options' in opt && Array.isArray((opt as GroupOption).options)\n\nconst flattenOptions = (\n  opts: (DefaultOptionType | GroupOption)[] | undefined\n): DefaultOptionType[] => {\n  if (!opts) return []\n  return opts.flatMap((o) =>\n    isGroupOption(o) ? flattenOptions(o.options) : [o]\n  )\n}\n\nexport const Select = (props: SelectProps) => {\n  const [isFocused, setIsFocused] = useState(false)\n  const [isSearching, setIsSearching] = useState(false)\n  const [field, , helpers] = useField(props.name)\n\n  const isMultiple = props.mode === 'multiple'\n  const hasOptions = (props.options?.length ?? 0) > 0\n  const currentValue: unknown[] = Array.isArray(field.value) ? field.value : []\n  const showSelectAllFooter =\n    isMultiple &&\n    !props.loading &&\n    !props.disabled &&\n    hasOptions &&\n    !isSearching\n\n  const handleSearch = (value: string) => {\n    setIsSearching(value.length > 0)\n    if (props.onSearch) {\n      props.onSearch(value)\n    }\n  }\n\n  const handleToggleAll = () => {\n    if (props.disabled) return\n\n    if (currentValue.length === 0) {\n      const flat = flattenOptions(\n        props.options as (DefaultOptionType | GroupOption)[] | undefined\n      )\n      const allOptions = flat.filter(\n        (opt) => opt.value !== undefined && opt.value !== null && !opt.disabled\n      )\n      // antd's labelInValue mode expects values shaped as { value, label }\n      // rather than raw scalars; mirror that contract so the field state\n      // and downstream onChange payload match what consumers expect.\n      const payload = props.labelInValue\n        ? allOptions.map((opt) => ({ value: opt.value, label: opt.label }))\n        : allOptions.map((opt) => opt.value as string | number)\n      void helpers.setValue(payload)\n      props.onChange?.(payload, allOptions)\n    } else {\n      void helpers.setValue([])\n      props.onChange?.([], [])\n    }\n  }\n\n  const dropdownRender = (menu: React.ReactElement): React.ReactElement => {\n    if (props.loading) {\n      return (\n        <div className=\"flex items-center justify-between px-3 py-1\">\n          <span>Loading...</span>\n          <Spin indicator={<LoadingOutlined spin />} size=\"small\" />\n        </div>\n      )\n    }\n\n    if (!props.options || (props.options && props.options.length === 0)) {\n      return <div className=\"px-3 py-1\">No options</div>\n    }\n\n    if (!showSelectAllFooter) return menu\n\n    const label = currentValue.length === 0 ? 'Select all' : 'Clear all'\n\n    return (\n      <>\n        {menu}\n        <div className=\"mt-1 pt-1 border-t border-j2-border-secondary\">\n          <button\n            type=\"button\"\n            aria-label={label}\n            title={label}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={handleToggleAll}\n            className=\"w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0\"\n          >\n            {label}\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <AntDSelect\n      suffixIcon={\n        props.loading ? (\n          <Spin\n            indicator={<LoadingOutlined spin />}\n            size=\"small\"\n            data-testid=\"loading-spinner\"\n          />\n        ) : props.showSearch && isFocused ? (\n          <MagnifyingGlassIcon size={14} data-testid=\"magnifying-glass\" />\n        ) : (\n          <CaretDownIcon size={14} data-testid=\"caret-down\" />\n        )\n      }\n      {...props}\n      popupRender={dropdownRender}\n      removeIcon={<XCircleIcon size={12} />}\n      allowClear={\n        props.allowClear ? { clearIcon: <XCircleIcon size={14} /> } : false\n      }\n      showSearch={props.showSearch}\n      onSearch={handleSearch}\n      onFocus={() => {\n        setIsFocused(true)\n      }}\n      onBlur={() => {\n        setIsFocused(false)\n        setIsSearching(false)\n      }}\n      size={props.size || 'large'}\n    />\n  )\n}\n"],"names":["useState","useField","_a","jsxs","jsx","Spin","LoadingOutlined","Fragment","AntDSelect","MagnifyingGlassIcon","CaretDownIcon","XCircleIcon"],"mappings":"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"}

package/dist/src/components/select/Select.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Select as Select$1 } from "formik-antd";
+import { Spin } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import { XCircleIcon, MagnifyingGlassIcon, CaretDownIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { useField } from "formik";
+const isGroupOption = (opt) => "options" in opt && Array.isArray(opt.options);
+const flattenOptions = (opts) => {
+  if (!opts) return [];
+  return opts.flatMap(
+    (o) => isGroupOption(o) ? flattenOptions(o.options) : [o]
+  );
+};
+const Select = (props) => {
+  var _a;
+  const [isFocused, setIsFocused] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [field, , helpers] = useField(props.name);
+  const isMultiple = props.mode === "multiple";
+  const hasOptions = (((_a = props.options) == null ? void 0 : _a.length) ?? 0) > 0;
+  const currentValue = Array.isArray(field.value) ? field.value : [];
+  const showSelectAllFooter = isMultiple && !props.loading && !props.disabled && hasOptions && !isSearching;
+  const handleSearch = (value) => {
+    setIsSearching(value.length > 0);
+    if (props.onSearch) {
+      props.onSearch(value);
+    }
+  };
+  const handleToggleAll = () => {
+    var _a2, _b;
+    if (props.disabled) return;
+    if (currentValue.length === 0) {
+      const flat = flattenOptions(
+        props.options
+      );
+      const allOptions = flat.filter(
+        (opt) => opt.value !== void 0 && opt.value !== null && !opt.disabled
+      );
+      const payload = props.labelInValue ? allOptions.map((opt) => ({ value: opt.value, label: opt.label })) : allOptions.map((opt) => opt.value);
+      void helpers.setValue(payload);
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, payload, allOptions);
+    } else {
+      void helpers.setValue([]);
+      (_b = props.onChange) == null ? void 0 : _b.call(props, [], []);
+    }
+  };
+  const dropdownRender = (menu) => {
+    if (props.loading) {
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1", children: [
+        /* @__PURE__ */ jsx("span", { children: "Loading..." }),
+        /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }), size: "small" })
+      ] });
+    }
+    if (!props.options || props.options && props.options.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: "px-3 py-1", children: "No options" });
+    }
+    if (!showSelectAllFooter) return menu;
+    const label = currentValue.length === 0 ? "Select all" : "Clear all";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      menu,
+      /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-j2-border-secondary", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          title: label,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleToggleAll,
+          className: "w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0",
+          children: label
+        }
+      ) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(
+    Select$1,
+    {
+      suffixIcon: props.loading ? /* @__PURE__ */ jsx(
+        Spin,
+        {
+          indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+          size: "small",
+          "data-testid": "loading-spinner"
+        }
+      ) : props.showSearch && isFocused ? /* @__PURE__ */ jsx(MagnifyingGlassIcon, { size: 14, "data-testid": "magnifying-glass" }) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
+      ...props,
+      popupRender: dropdownRender,
+      removeIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 12 }),
+      allowClear: props.allowClear ? { clearIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 14 }) } : false,
+      showSearch: props.showSearch,
+      onSearch: handleSearch,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+        setIsSearching(false);
+      },
+      size: props.size || "large"
+    }
+  );
+};
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/src/components/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Select as AntDSelect } from 'formik-antd'\nimport { Spin } from 'antd'\nimport { LoadingOutlined } from '@ant-design/icons'\nimport type {\n  SelectProps as AntDSelectProps,\n  DefaultOptionType,\n} from 'antd/es/select'\nimport {\n  CaretDownIcon,\n  MagnifyingGlassIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport { useState } from 'react'\nimport { useField } from 'formik'\n\ntype SelectProps = Expand<AntDSelectProps> & {\n  name: string\n}\n\ntype GroupOption = { label?: React.ReactNode; options: DefaultOptionType[] }\n\nconst isGroupOption = (\n  opt: DefaultOptionType | GroupOption\n): opt is GroupOption =>\n  'options' in opt && Array.isArray((opt as GroupOption).options)\n\nconst flattenOptions = (\n  opts: (DefaultOptionType | GroupOption)[] | undefined\n): DefaultOptionType[] => {\n  if (!opts) return []\n  return opts.flatMap((o) =>\n    isGroupOption(o) ? flattenOptions(o.options) : [o]\n  )\n}\n\nexport const Select = (props: SelectProps) => {\n  const [isFocused, setIsFocused] = useState(false)\n  const [isSearching, setIsSearching] = useState(false)\n  const [field, , helpers] = useField(props.name)\n\n  const isMultiple = props.mode === 'multiple'\n  const hasOptions = (props.options?.length ?? 0) > 0\n  const currentValue: unknown[] = Array.isArray(field.value) ? field.value : []\n  const showSelectAllFooter =\n    isMultiple &&\n    !props.loading &&\n    !props.disabled &&\n    hasOptions &&\n    !isSearching\n\n  const handleSearch = (value: string) => {\n    setIsSearching(value.length > 0)\n    if (props.onSearch) {\n      props.onSearch(value)\n    }\n  }\n\n  const handleToggleAll = () => {\n    if (props.disabled) return\n\n    if (currentValue.length === 0) {\n      const flat = flattenOptions(\n        props.options as (DefaultOptionType | GroupOption)[] | undefined\n      )\n      const allOptions = flat.filter(\n        (opt) => opt.value !== undefined && opt.value !== null && !opt.disabled\n      )\n      // antd's labelInValue mode expects values shaped as { value, label }\n      // rather than raw scalars; mirror that contract so the field state\n      // and downstream onChange payload match what consumers expect.\n      const payload = props.labelInValue\n        ? allOptions.map((opt) => ({ value: opt.value, label: opt.label }))\n        : allOptions.map((opt) => opt.value as string | number)\n      void helpers.setValue(payload)\n      props.onChange?.(payload, allOptions)\n    } else {\n      void helpers.setValue([])\n      props.onChange?.([], [])\n    }\n  }\n\n  const dropdownRender = (menu: React.ReactElement): React.ReactElement => {\n    if (props.loading) {\n      return (\n        <div className=\"flex items-center justify-between px-3 py-1\">\n          <span>Loading...</span>\n          <Spin indicator={<LoadingOutlined spin />} size=\"small\" />\n        </div>\n      )\n    }\n\n    if (!props.options || (props.options && props.options.length === 0)) {\n      return <div className=\"px-3 py-1\">No options</div>\n    }\n\n    if (!showSelectAllFooter) return menu\n\n    const label = currentValue.length === 0 ? 'Select all' : 'Clear all'\n\n    return (\n      <>\n        {menu}\n        <div className=\"mt-1 pt-1 border-t border-j2-border-secondary\">\n          <button\n            type=\"button\"\n            aria-label={label}\n            title={label}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={handleToggleAll}\n            className=\"w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0\"\n          >\n            {label}\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <AntDSelect\n      suffixIcon={\n        props.loading ? (\n          <Spin\n            indicator={<LoadingOutlined spin />}\n            size=\"small\"\n            data-testid=\"loading-spinner\"\n          />\n        ) : props.showSearch && isFocused ? (\n          <MagnifyingGlassIcon size={14} data-testid=\"magnifying-glass\" />\n        ) : (\n          <CaretDownIcon size={14} data-testid=\"caret-down\" />\n        )\n      }\n      {...props}\n      popupRender={dropdownRender}\n      removeIcon={<XCircleIcon size={12} />}\n      allowClear={\n        props.allowClear ? { clearIcon: <XCircleIcon size={14} /> } : false\n      }\n      showSearch={props.showSearch}\n      onSearch={handleSearch}\n      onFocus={() => {\n        setIsFocused(true)\n      }}\n      onBlur={() => {\n        setIsFocused(false)\n        setIsSearching(false)\n      }}\n      size={props.size || 'large'}\n    />\n  )\n}\n"],"names":["_a","AntDSelect"],"mappings":"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"}