@j2-health/design-system 0.6.4 → 0.6.6

package/dist/src/components/notificationModal/NotifcationModal.module.css.js

@@ -1,4 +1,4 @@
-//#region src/components/notificationModal/NotifcationModal.module.css
+// src/components/notificationModal/NotifcationModal.module.css
 var modalTitleWithIcon = "_modalTitleWithIcon_5g0kf_1";
 var modalIcon = "_modalIcon_5g0kf_7";
 var modalTitleContent = "_modalTitleContent_5g0kf_16";
@@ -11,7 +11,6 @@ var NotifcationModal_module_default = {
 	modalTitleText,
 	modalContentWithIcon
 };
-//#endregion
 export { NotifcationModal_module_default as default, modalContentWithIcon, modalIcon, modalTitleContent, modalTitleText, modalTitleWithIcon };
 
 //# sourceMappingURL=NotifcationModal.module.css.js.map

package/dist/src/components/notificationModal/NotificationModal.cjs

@@ -5,7 +5,7 @@ let react = require("react");
 let _phosphor_icons_react = require("@phosphor-icons/react");
 _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/notificationModal/NotificationModal.tsx
+// src/components/notificationModal/NotificationModal.tsx
 var getNotificationIcon = (type) => {
 	switch (type) {
 		case "error": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.XCircleIcon, {
@@ -55,7 +55,6 @@ var NotificationModal = ({ type, title, children, withContentPadding = true, ...
 		})
 	});
 };
-//#endregion
 exports.NotificationModal = NotificationModal;
 
 //# sourceMappingURL=NotificationModal.cjs.map

package/dist/src/components/notificationModal/NotificationModal.js

@@ -3,7 +3,7 @@ import NotifcationModal_module_default from "./NotifcationModal.module.css.js";
 import { useMemo } from "react";
 import { CheckCircleIcon, InfoIcon, WarningCircleIcon, XCircleIcon } from "@phosphor-icons/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/notificationModal/NotificationModal.tsx
+// src/components/notificationModal/NotificationModal.tsx
 var getNotificationIcon = (type) => {
 	switch (type) {
 		case "error": return /* @__PURE__ */ jsx(XCircleIcon, {
@@ -53,7 +53,6 @@ var NotificationModal = ({ type, title, children, withContentPadding = true, ...
 		})
 	});
 };
-//#endregion
 export { NotificationModal };
 
 //# sourceMappingURL=NotificationModal.js.map

package/dist/src/components/pagination/Pagination.cjs

@@ -6,7 +6,7 @@ _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames, 1);
-//#region src/components/pagination/Pagination.tsx
+// src/components/pagination/Pagination.tsx
 var renderIconButton = (icon, isSmall, customClassName) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 	type: "link",
 	size: isSmall ? "small" : "middle",
@@ -66,7 +66,6 @@ var Pagination = ({ paginationTextLabels = false, ...props }) => {
 	const enriched = withDesignSystemPaginationOverrides(props, { paginationTextLabels });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Pagination, { ...enriched });
 };
-//#endregion
 exports.Pagination = Pagination;
 exports.withDesignSystemPaginationOverrides = withDesignSystemPaginationOverrides;
 

package/dist/src/components/pagination/Pagination.js

@@ -3,7 +3,7 @@ import { Button, Pagination, Select } from "antd";
 import { CaretDoubleLeftIcon, CaretDoubleRightIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
-//#region src/components/pagination/Pagination.tsx
+// src/components/pagination/Pagination.tsx
 var renderIconButton = (icon, isSmall, customClassName) => /* @__PURE__ */ jsx(Button, {
 	type: "link",
 	size: isSmall ? "small" : "middle",
@@ -63,7 +63,6 @@ var Pagination$1 = ({ paginationTextLabels = false, ...props }) => {
 	const enriched = withDesignSystemPaginationOverrides(props, { paginationTextLabels });
 	return /* @__PURE__ */ jsx(Pagination, { ...enriched });
 };
-//#endregion
 export { Pagination$1 as Pagination, withDesignSystemPaginationOverrides };
 
 //# sourceMappingURL=Pagination.js.map

package/dist/src/components/pagination/Pagination.module.css.cjs

@@ -1,6 +1,5 @@
-//#region src/components/pagination/Pagination.module.css
+// src/components/pagination/Pagination.module.css
 var Pagination_module_default = { "jump-button": "_jump-button_bwjnt_41" };
-//#endregion
 exports.default = Pagination_module_default;
 
 //# sourceMappingURL=Pagination.module.css.cjs.map

package/dist/src/components/pagination/Pagination.module.css.js

@@ -1,6 +1,5 @@
-//#region src/components/pagination/Pagination.module.css
+// src/components/pagination/Pagination.module.css
 var Pagination_module_default = { "jump-button": "_jump-button_bwjnt_41" };
-//#endregion
 export { Pagination_module_default as default };
 
 //# sourceMappingURL=Pagination.module.css.js.map

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

@@ -4,7 +4,7 @@ let antd = require("antd");
 let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames, 1);
-//#region src/components/popover/Popover.tsx
+// src/components/popover/Popover.tsx
 var Popover = ({ children, placement = "top", scrollable = false, contentPadding = true, content, smallPadding = false, paddingSize, arrow = false, rootClassName, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Popover, {
 		rootClassName: (0, classnames.default)(rootClassName, require_Popover_module.default.j2Popover, scrollable && require_Popover_module.default.scrollable, smallPadding && require_Popover_module.default.smallPadding, paddingSize && require_Popover_module.default[`${paddingSize}Padding`]),
@@ -18,7 +18,6 @@ var Popover = ({ children, placement = "top", scrollable = false, contentPadding
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
 	});
 };
-//#endregion
 exports.Popover = Popover;
 
 //# sourceMappingURL=Popover.cjs.map

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

@@ -2,7 +2,7 @@ import Popover_module_default from "./Popover.module.css.js";
 import { Popover } from "antd";
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-//#region src/components/popover/Popover.tsx
+// src/components/popover/Popover.tsx
 var Popover$1 = ({ children, placement = "top", scrollable = false, contentPadding = true, content, smallPadding = false, paddingSize, arrow = false, rootClassName, ...props }) => {
 	return /* @__PURE__ */ jsx(Popover, {
 		rootClassName: cx(rootClassName, Popover_module_default.j2Popover, scrollable && Popover_module_default.scrollable, smallPadding && Popover_module_default.smallPadding, paddingSize && Popover_module_default[`${paddingSize}Padding`]),
@@ -16,7 +16,6 @@ var Popover$1 = ({ children, placement = "top", scrollable = false, contentPaddi
 		children: /* @__PURE__ */ jsx("div", { children })
 	});
 };
-//#endregion
 export { Popover$1 as Popover };
 
 //# sourceMappingURL=Popover.js.map

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

@@ -1,4 +1,4 @@
-//#region src/components/popover/Popover.module.css
+// src/components/popover/Popover.module.css
 var j2Popover = "_j2Popover_r2pkr_1";
 var smallPadding = "_smallPadding_r2pkr_6";
 var smPadding = "_smPadding_r2pkr_7";
@@ -21,7 +21,6 @@ var Popover_module_default = {
 	popoverHeader,
 	scrollable
 };
-//#endregion
 exports.default = Popover_module_default;
 exports.j2Popover = j2Popover;
 exports.mdPadding = mdPadding;

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

@@ -1,4 +1,4 @@
-//#region src/components/popover/Popover.module.css
+// src/components/popover/Popover.module.css
 var j2Popover = "_j2Popover_r2pkr_1";
 var smallPadding = "_smallPadding_r2pkr_6";
 var smPadding = "_smPadding_r2pkr_7";
@@ -21,7 +21,6 @@ var Popover_module_default = {
 	popoverHeader,
 	scrollable
 };
-//#endregion
 export { Popover_module_default as default, j2Popover, mdPadding, nonePadding, popoverHeader, scrollable, smPadding, smallPadding, xlPadding, xsPadding, xxsPadding };
 
 //# sourceMappingURL=Popover.module.css.js.map

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

@@ -1,10 +1,9 @@
 let antd = require("antd");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/progress/Progress.tsx
+// src/components/progress/Progress.tsx
 var Progress = ({ ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Progress, { ...props });
 };
-//#endregion
 exports.Progress = Progress;
 
 //# sourceMappingURL=Progress.cjs.map

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

@@ -1,10 +1,9 @@
 import { Progress } from "antd";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/progress/Progress.tsx
+// src/components/progress/Progress.tsx
 var Progress$1 = ({ ...props }) => {
 	return /* @__PURE__ */ jsx(Progress, { ...props });
 };
-//#endregion
 export { Progress$1 as Progress };
 
 //# sourceMappingURL=Progress.js.map

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

@@ -1,6 +1,6 @@
 let antd = require("antd");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/radio/Radio.tsx
+// src/components/radio/Radio.tsx
 var Radio = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Radio, { ...props });
 };
@@ -11,7 +11,6 @@ var RadioGroup = ({ buttonStyle = "solid", optionType = "button", ...props }) =>
 		optionType
 	});
 };
-//#endregion
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 

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

@@ -1,6 +1,6 @@
 import { Radio } from "antd";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/radio/Radio.tsx
+// src/components/radio/Radio.tsx
 var Radio$1 = (props) => {
 	return /* @__PURE__ */ jsx(Radio, { ...props });
 };
@@ -11,7 +11,6 @@ var RadioGroup = ({ buttonStyle = "solid", optionType = "button", ...props }) =>
 		optionType
 	});
 };
-//#endregion
 export { Radio$1 as Radio, RadioGroup };
 
 //# sourceMappingURL=Radio.js.map

package/dist/src/components/radioCardGroup/RadioCardGroup.cjs

@@ -0,0 +1,78 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+// src/components/radioCardGroup/RadioCardGroup.tsx
+/**
+* A single choice shown as a row of bordered cards, each with a radio mark,
+* a label and an optional line of description. Behaves as a radio group: the
+* arrow keys move between cards and select, and only the selected card (or
+* the first, when none is) is in the tab order.
+*/
+function RadioCardGroup({ options, value, onChange, columns, className, ...aria }) {
+	const refs = (0, react.useRef)([]);
+	const enabled = options.map((option, index) => ({
+		option,
+		index
+	})).filter(({ option }) => !option.disabled);
+	const selectedIndex = options.findIndex((option) => option.value === value);
+	const tabStop = selectedIndex >= 0 && !options[selectedIndex].disabled ? selectedIndex : enabled[0]?.index ?? -1;
+	const move = (from, step) => {
+		const position = enabled.findIndex(({ index }) => index === from);
+		const next = enabled[(position + step + enabled.length) % enabled.length];
+		if (!next) return;
+		onChange(next.option.value);
+		refs.current[next.index]?.focus();
+	};
+	const handleKeyDown = (event, index) => {
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			event.preventDefault();
+			move(index, 1);
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			event.preventDefault();
+			move(index, -1);
+		} else if (event.key === " " || event.key === "Enter") {
+			event.preventDefault();
+			if (!options[index].disabled) onChange(options[index].value);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "radiogroup",
+		...aria,
+		className: (0, classnames.default)("grid gap-3", className),
+		style: { gridTemplateColumns: `repeat(${columns ?? options.length}, minmax(0, 1fr))` },
+		children: options.map((option, index) => {
+			const selected = option.value === value;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: (element) => {
+					refs.current[index] = element;
+				},
+				role: "radio",
+				"aria-checked": selected,
+				"aria-disabled": option.disabled || void 0,
+				tabIndex: index === tabStop ? 0 : -1,
+				onClick: () => !option.disabled && onChange(option.value),
+				onKeyDown: (event) => handleKeyDown(event, index),
+				className: (0, classnames.default)("rounded-j2 border-2 border-solid p-3.5 transition-colors", option.disabled ? "cursor-not-allowed border-j2-gray-5 opacity-60" : selected ? "cursor-pointer border-j2-primary bg-j2-blue-1" : "cursor-pointer border-j2-gray-5 hover:border-j2-gray-7 hover:bg-j2-gray-1"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, classnames.default)("flex items-center gap-2.5", Boolean(option.description) && "mb-1"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: (0, classnames.default)("flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-full border-2 border-solid transition-colors", selected ? "border-j2-primary" : "border-j2-gray-7"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, classnames.default)("h-[9px] w-[9px] rounded-full transition-colors", selected ? "bg-j2-primary" : "bg-transparent") })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-sm font-semibold text-j2-text",
+						children: option.label
+					})]
+				}), option.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pl-7 text-xs leading-snug text-j2-text-secondary",
+					children: option.description
+				})]
+			}, option.value);
+		})
+	});
+}
+exports.RadioCardGroup = RadioCardGroup;
+
+//# sourceMappingURL=RadioCardGroup.cjs.map

package/dist/src/components/radioCardGroup/RadioCardGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCardGroup.cjs","names":["useRef","cx"],"sources":["../../../../src/components/radioCardGroup/RadioCardGroup.tsx"],"sourcesContent":["import { useRef, type KeyboardEvent, type ReactNode } from 'react'\nimport cx from 'classnames'\n\nexport type RadioCardOption<T extends string> = {\n  value: T\n  label: ReactNode\n  /** One short line under the label. Leave it out when the label says\n   *  enough. */\n  description?: ReactNode\n  disabled?: boolean\n}\n\nexport type RadioCardGroupProps<T extends string> = {\n  options: RadioCardOption<T>[]\n  value?: T | null\n  onChange: (value: T) => void\n  /** Cards per row; defaults to one row with every option. */\n  columns?: number\n  'aria-label'?: string\n  'aria-labelledby'?: string\n  className?: string\n}\n\n/**\n * A single choice shown as a row of bordered cards, each with a radio mark,\n * a label and an optional line of description. Behaves as a radio group: the\n * arrow keys move between cards and select, and only the selected card (or\n * the first, when none is) is in the tab order.\n */\nexport function RadioCardGroup<T extends string>({\n  options,\n  value,\n  onChange,\n  columns,\n  className,\n  ...aria\n}: RadioCardGroupProps<T>) {\n  const refs = useRef<(HTMLDivElement | null)[]>([])\n  const enabled = options\n    .map((option, index) => ({ option, index }))\n    .filter(({ option }) => !option.disabled)\n  const selectedIndex = options.findIndex((option) => option.value === value)\n  const tabStop =\n    selectedIndex >= 0 && !options[selectedIndex].disabled\n      ? selectedIndex\n      : (enabled[0]?.index ?? -1)\n\n  const move = (from: number, step: 1 | -1) => {\n    const position = enabled.findIndex(({ index }) => index === from)\n    const next = enabled[(position + step + enabled.length) % enabled.length]\n    if (!next) return\n    onChange(next.option.value)\n    refs.current[next.index]?.focus()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent, index: number) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault()\n      move(index, 1)\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault()\n      move(index, -1)\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault()\n      // A card can turn disabled while it has focus; it must not select.\n      if (!options[index].disabled) onChange(options[index].value)\n    }\n  }\n\n  return (\n    <div\n      role=\"radiogroup\"\n      {...aria}\n      className={cx('grid gap-3', className)}\n      style={{\n        gridTemplateColumns: `repeat(${columns ?? options.length}, minmax(0, 1fr))`,\n      }}\n    >\n      {options.map((option, index) => {\n        const selected = option.value === value\n        return (\n          <div\n            key={option.value}\n            ref={(element) => {\n              refs.current[index] = element\n            }}\n            role=\"radio\"\n            aria-checked={selected}\n            aria-disabled={option.disabled || undefined}\n            tabIndex={index === tabStop ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.value)}\n            onKeyDown={(event) => handleKeyDown(event, index)}\n            className={cx(\n              'rounded-j2 border-2 border-solid p-3.5 transition-colors',\n              option.disabled\n                ? 'cursor-not-allowed border-j2-gray-5 opacity-60'\n                : selected\n                  ? 'cursor-pointer border-j2-primary bg-j2-blue-1'\n                  : 'cursor-pointer border-j2-gray-5 hover:border-j2-gray-7 hover:bg-j2-gray-1'\n            )}\n          >\n            <div\n              className={cx(\n                'flex items-center gap-2.5',\n                Boolean(option.description) && 'mb-1'\n              )}\n            >\n              <span\n                aria-hidden\n                className={cx(\n                  'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-full border-2 border-solid transition-colors',\n                  selected ? 'border-j2-primary' : 'border-j2-gray-7'\n                )}\n              >\n                <span\n                  className={cx(\n                    'h-[9px] w-[9px] rounded-full transition-colors',\n                    selected ? 'bg-j2-primary' : 'bg-transparent'\n                  )}\n                />\n              </span>\n              <span className=\"text-sm font-semibold text-j2-text\">\n                {option.label}\n              </span>\n            </div>\n            {option.description && (\n              <div className=\"pl-7 text-xs leading-snug text-j2-text-secondary\">\n                {option.description}\n              </div>\n            )}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA6BA,SAAgB,eAAiC,EAC/C,SACA,OACA,UACA,SACA,WACA,GAAG,QACsB;CACzB,MAAM,QAAA,GAAOA,MAAAA,OAAAA,CAAkC,CAAC,CAAC;CACjD,MAAM,UAAU,QACb,KAAK,QAAQ,WAAW;EAAE;EAAQ;CAAM,EAAE,CAAC,CAC3C,QAAQ,EAAE,aAAa,CAAC,OAAO,QAAQ;CAC1C,MAAM,gBAAgB,QAAQ,WAAW,WAAW,OAAO,UAAU,KAAK;CAC1E,MAAM,UACJ,iBAAiB,KAAK,CAAC,QAAQ,cAAc,CAAC,WAC1C,gBACC,QAAQ,EAAE,EAAE,SAAS;CAE5B,MAAM,QAAQ,MAAc,SAAiB;EAC3C,MAAM,WAAW,QAAQ,WAAW,EAAE,YAAY,UAAU,IAAI;EAChE,MAAM,OAAO,SAAS,WAAW,OAAO,QAAQ,UAAU,QAAQ;EAClE,IAAI,CAAC,MAAM;EACX,SAAS,KAAK,OAAO,KAAK;EAC1B,KAAK,QAAQ,KAAK,MAAM,EAAE,MAAM;CAClC;CAEA,MAAM,iBAAiB,OAAsB,UAAkB;EAC7D,IAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;GAC3D,MAAM,eAAe;GACrB,KAAK,OAAO,CAAC;EACf,OAAO,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;GAC/D,MAAM,eAAe;GACrB,KAAK,OAAO,EAAE;EAChB,OAAO,IAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;GACrD,MAAM,eAAe;GAErB,IAAI,CAAC,QAAQ,MAAM,CAAC,UAAU,SAAS,QAAQ,MAAM,CAAC,KAAK;EAC7D;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAK;EACL,GAAI;EACJ,YAAA,GAAWC,WAAAA,QAAAA,CAAG,cAAc,SAAS;EACrC,OAAO,EACL,qBAAqB,UAAU,WAAW,QAAQ,OAAO,mBAC3D;EAEC,UAAA,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,WAAW,OAAO,UAAU;GAClC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAEE,MAAM,YAAY;KAChB,KAAK,QAAQ,SAAS;IACxB;IACA,MAAK;IACL,gBAAc;IACd,iBAAe,OAAO,YAAY,KAAA;IAClC,UAAU,UAAU,UAAU,IAAI;IAClC,eAAe,CAAC,OAAO,YAAY,SAAS,OAAO,KAAK;IACxD,YAAY,UAAU,cAAc,OAAO,KAAK;IAChD,YAAA,GAAWA,WAAAA,QAAAA,CACT,4DACA,OAAO,WACH,mDACA,WACE,kDACA,2EACR;IAlBF,UAAA,CAoBE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,6BACA,QAAQ,OAAO,WAAW,KAAK,MACjC;KAJF,UAAA,CAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MACE,eAAA;MACA,YAAA,GAAWA,WAAAA,QAAAA,CACT,yHACA,WAAW,sBAAsB,kBACnC;MAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,kDACA,WAAW,kBAAkB,gBAC/B,EACD,CAAA;KACG,CAAA,GACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MACb,UAAA,OAAO;KACJ,CAAA,CACH;IACJ,CAAA,GAAA,OAAO,eACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACZ,UAAA,OAAO;IACL,CAAA,CAEJ;GAhDE,GAAA,OAAO,KAgDT;EAET,CAAC;CACE,CAAA;AAET"}

package/dist/src/components/radioCardGroup/RadioCardGroup.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type RadioCardOption<T extends string> = {
+    value: T;
+    label: ReactNode;
+    /** One short line under the label. Leave it out when the label says
+     *  enough. */
+    description?: ReactNode;
+    disabled?: boolean;
+};
+export type RadioCardGroupProps<T extends string> = {
+    options: RadioCardOption<T>[];
+    value?: T | null;
+    onChange: (value: T) => void;
+    /** Cards per row; defaults to one row with every option. */
+    columns?: number;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+};
+/**
+ * A single choice shown as a row of bordered cards, each with a radio mark,
+ * a label and an optional line of description. Behaves as a radio group: the
+ * arrow keys move between cards and select, and only the selected card (or
+ * the first, when none is) is in the tab order.
+ */
+export declare function RadioCardGroup<T extends string>({ options, value, onChange, columns, className, ...aria }: RadioCardGroupProps<T>): import('react').JSX.Element;

package/dist/src/components/radioCardGroup/RadioCardGroup.js

@@ -0,0 +1,76 @@
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+// src/components/radioCardGroup/RadioCardGroup.tsx
+/**
+* A single choice shown as a row of bordered cards, each with a radio mark,
+* a label and an optional line of description. Behaves as a radio group: the
+* arrow keys move between cards and select, and only the selected card (or
+* the first, when none is) is in the tab order.
+*/
+function RadioCardGroup({ options, value, onChange, columns, className, ...aria }) {
+	const refs = useRef([]);
+	const enabled = options.map((option, index) => ({
+		option,
+		index
+	})).filter(({ option }) => !option.disabled);
+	const selectedIndex = options.findIndex((option) => option.value === value);
+	const tabStop = selectedIndex >= 0 && !options[selectedIndex].disabled ? selectedIndex : enabled[0]?.index ?? -1;
+	const move = (from, step) => {
+		const position = enabled.findIndex(({ index }) => index === from);
+		const next = enabled[(position + step + enabled.length) % enabled.length];
+		if (!next) return;
+		onChange(next.option.value);
+		refs.current[next.index]?.focus();
+	};
+	const handleKeyDown = (event, index) => {
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			event.preventDefault();
+			move(index, 1);
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			event.preventDefault();
+			move(index, -1);
+		} else if (event.key === " " || event.key === "Enter") {
+			event.preventDefault();
+			if (!options[index].disabled) onChange(options[index].value);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		...aria,
+		className: cx("grid gap-3", className),
+		style: { gridTemplateColumns: `repeat(${columns ?? options.length}, minmax(0, 1fr))` },
+		children: options.map((option, index) => {
+			const selected = option.value === value;
+			return /* @__PURE__ */ jsxs("div", {
+				ref: (element) => {
+					refs.current[index] = element;
+				},
+				role: "radio",
+				"aria-checked": selected,
+				"aria-disabled": option.disabled || void 0,
+				tabIndex: index === tabStop ? 0 : -1,
+				onClick: () => !option.disabled && onChange(option.value),
+				onKeyDown: (event) => handleKeyDown(event, index),
+				className: cx("rounded-j2 border-2 border-solid p-3.5 transition-colors", option.disabled ? "cursor-not-allowed border-j2-gray-5 opacity-60" : selected ? "cursor-pointer border-j2-primary bg-j2-blue-1" : "cursor-pointer border-j2-gray-5 hover:border-j2-gray-7 hover:bg-j2-gray-1"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx("flex items-center gap-2.5", Boolean(option.description) && "mb-1"),
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cx("flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-full border-2 border-solid transition-colors", selected ? "border-j2-primary" : "border-j2-gray-7"),
+						children: /* @__PURE__ */ jsx("span", { className: cx("h-[9px] w-[9px] rounded-full transition-colors", selected ? "bg-j2-primary" : "bg-transparent") })
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-semibold text-j2-text",
+						children: option.label
+					})]
+				}), option.description && /* @__PURE__ */ jsx("div", {
+					className: "pl-7 text-xs leading-snug text-j2-text-secondary",
+					children: option.description
+				})]
+			}, option.value);
+		})
+	});
+}
+export { RadioCardGroup };
+
+//# sourceMappingURL=RadioCardGroup.js.map

package/dist/src/components/radioCardGroup/RadioCardGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../../src/components/radioCardGroup/RadioCardGroup.tsx"],"sourcesContent":["import { useRef, type KeyboardEvent, type ReactNode } from 'react'\nimport cx from 'classnames'\n\nexport type RadioCardOption<T extends string> = {\n  value: T\n  label: ReactNode\n  /** One short line under the label. Leave it out when the label says\n   *  enough. */\n  description?: ReactNode\n  disabled?: boolean\n}\n\nexport type RadioCardGroupProps<T extends string> = {\n  options: RadioCardOption<T>[]\n  value?: T | null\n  onChange: (value: T) => void\n  /** Cards per row; defaults to one row with every option. */\n  columns?: number\n  'aria-label'?: string\n  'aria-labelledby'?: string\n  className?: string\n}\n\n/**\n * A single choice shown as a row of bordered cards, each with a radio mark,\n * a label and an optional line of description. Behaves as a radio group: the\n * arrow keys move between cards and select, and only the selected card (or\n * the first, when none is) is in the tab order.\n */\nexport function RadioCardGroup<T extends string>({\n  options,\n  value,\n  onChange,\n  columns,\n  className,\n  ...aria\n}: RadioCardGroupProps<T>) {\n  const refs = useRef<(HTMLDivElement | null)[]>([])\n  const enabled = options\n    .map((option, index) => ({ option, index }))\n    .filter(({ option }) => !option.disabled)\n  const selectedIndex = options.findIndex((option) => option.value === value)\n  const tabStop =\n    selectedIndex >= 0 && !options[selectedIndex].disabled\n      ? selectedIndex\n      : (enabled[0]?.index ?? -1)\n\n  const move = (from: number, step: 1 | -1) => {\n    const position = enabled.findIndex(({ index }) => index === from)\n    const next = enabled[(position + step + enabled.length) % enabled.length]\n    if (!next) return\n    onChange(next.option.value)\n    refs.current[next.index]?.focus()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent, index: number) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault()\n      move(index, 1)\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault()\n      move(index, -1)\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault()\n      // A card can turn disabled while it has focus; it must not select.\n      if (!options[index].disabled) onChange(options[index].value)\n    }\n  }\n\n  return (\n    <div\n      role=\"radiogroup\"\n      {...aria}\n      className={cx('grid gap-3', className)}\n      style={{\n        gridTemplateColumns: `repeat(${columns ?? options.length}, minmax(0, 1fr))`,\n      }}\n    >\n      {options.map((option, index) => {\n        const selected = option.value === value\n        return (\n          <div\n            key={option.value}\n            ref={(element) => {\n              refs.current[index] = element\n            }}\n            role=\"radio\"\n            aria-checked={selected}\n            aria-disabled={option.disabled || undefined}\n            tabIndex={index === tabStop ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.value)}\n            onKeyDown={(event) => handleKeyDown(event, index)}\n            className={cx(\n              'rounded-j2 border-2 border-solid p-3.5 transition-colors',\n              option.disabled\n                ? 'cursor-not-allowed border-j2-gray-5 opacity-60'\n                : selected\n                  ? 'cursor-pointer border-j2-primary bg-j2-blue-1'\n                  : 'cursor-pointer border-j2-gray-5 hover:border-j2-gray-7 hover:bg-j2-gray-1'\n            )}\n          >\n            <div\n              className={cx(\n                'flex items-center gap-2.5',\n                Boolean(option.description) && 'mb-1'\n              )}\n            >\n              <span\n                aria-hidden\n                className={cx(\n                  'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-full border-2 border-solid transition-colors',\n                  selected ? 'border-j2-primary' : 'border-j2-gray-7'\n                )}\n              >\n                <span\n                  className={cx(\n                    'h-[9px] w-[9px] rounded-full transition-colors',\n                    selected ? 'bg-j2-primary' : 'bg-transparent'\n                  )}\n                />\n              </span>\n              <span className=\"text-sm font-semibold text-j2-text\">\n                {option.label}\n              </span>\n            </div>\n            {option.description && (\n              <div className=\"pl-7 text-xs leading-snug text-j2-text-secondary\">\n                {option.description}\n              </div>\n            )}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AA6BA,SAAgB,eAAiC,EAC/C,SACA,OACA,UACA,SACA,WACA,GAAG,QACsB;CACzB,MAAM,OAAO,OAAkC,CAAC,CAAC;CACjD,MAAM,UAAU,QACb,KAAK,QAAQ,WAAW;EAAE;EAAQ;CAAM,EAAE,CAAC,CAC3C,QAAQ,EAAE,aAAa,CAAC,OAAO,QAAQ;CAC1C,MAAM,gBAAgB,QAAQ,WAAW,WAAW,OAAO,UAAU,KAAK;CAC1E,MAAM,UACJ,iBAAiB,KAAK,CAAC,QAAQ,cAAc,CAAC,WAC1C,gBACC,QAAQ,EAAE,EAAE,SAAS;CAE5B,MAAM,QAAQ,MAAc,SAAiB;EAC3C,MAAM,WAAW,QAAQ,WAAW,EAAE,YAAY,UAAU,IAAI;EAChE,MAAM,OAAO,SAAS,WAAW,OAAO,QAAQ,UAAU,QAAQ;EAClE,IAAI,CAAC,MAAM;EACX,SAAS,KAAK,OAAO,KAAK;EAC1B,KAAK,QAAQ,KAAK,MAAM,EAAE,MAAM;CAClC;CAEA,MAAM,iBAAiB,OAAsB,UAAkB;EAC7D,IAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;GAC3D,MAAM,eAAe;GACrB,KAAK,OAAO,CAAC;EACf,OAAO,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;GAC/D,MAAM,eAAe;GACrB,KAAK,OAAO,EAAE;EAChB,OAAO,IAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;GACrD,MAAM,eAAe;GAErB,IAAI,CAAC,QAAQ,MAAM,CAAC,UAAU,SAAS,QAAQ,MAAM,CAAC,KAAK;EAC7D;CACF;CAEA,OACE,oBAAC,OAAD;EACE,MAAK;EACL,GAAI;EACJ,WAAW,GAAG,cAAc,SAAS;EACrC,OAAO,EACL,qBAAqB,UAAU,WAAW,QAAQ,OAAO,mBAC3D;EAEC,UAAA,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,WAAW,OAAO,UAAU;GAClC,OACE,qBAAC,OAAD;IAEE,MAAM,YAAY;KAChB,KAAK,QAAQ,SAAS;IACxB;IACA,MAAK;IACL,gBAAc;IACd,iBAAe,OAAO,YAAY,KAAA;IAClC,UAAU,UAAU,UAAU,IAAI;IAClC,eAAe,CAAC,OAAO,YAAY,SAAS,OAAO,KAAK;IACxD,YAAY,UAAU,cAAc,OAAO,KAAK;IAChD,WAAW,GACT,4DACA,OAAO,WACH,mDACA,WACE,kDACA,2EACR;IAlBF,UAAA,CAoBE,qBAAC,OAAD;KACE,WAAW,GACT,6BACA,QAAQ,OAAO,WAAW,KAAK,MACjC;KAJF,UAAA,CAME,oBAAC,QAAD;MACE,eAAA;MACA,WAAW,GACT,yHACA,WAAW,sBAAsB,kBACnC;MAEA,UAAA,oBAAC,QAAD,EACE,WAAW,GACT,kDACA,WAAW,kBAAkB,gBAC/B,EACD,CAAA;KACG,CAAA,GACN,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,OAAO;KACJ,CAAA,CACH;IACJ,CAAA,GAAA,OAAO,eACN,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,OAAO;IACL,CAAA,CAEJ;GAhDE,GAAA,OAAO,KAgDT;EAET,CAAC;CACE,CAAA;AAET"}

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

@@ -0,0 +1 @@
+export { RadioCardGroup, type RadioCardGroupProps, type RadioCardOption, } from './RadioCardGroup.js';

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

@@ -4,7 +4,7 @@ let antd = require("antd");
 let _phosphor_icons_react = require("@phosphor-icons/react");
 _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/rate/Rate.tsx
+// src/components/rate/Rate.tsx
 var Rate = ({ count = 5, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Rate, {
 		...props,
@@ -16,7 +16,6 @@ var Rate = ({ count = 5, ...props }) => {
 		character: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.StarIcon, { weight: "fill" })
 	});
 };
-//#endregion
 exports.Rate = Rate;
 
 //# sourceMappingURL=Rate.cjs.map

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

@@ -2,7 +2,7 @@
 import { Rate } from "antd";
 import { StarIcon } from "@phosphor-icons/react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/rate/Rate.tsx
+// src/components/rate/Rate.tsx
 var Rate$1 = ({ count = 5, ...props }) => {
 	return /* @__PURE__ */ jsx(Rate, {
 		...props,
@@ -14,7 +14,6 @@ var Rate$1 = ({ count = 5, ...props }) => {
 		character: /* @__PURE__ */ jsx(StarIcon, { weight: "fill" })
 	});
 };
-//#endregion
 export { Rate$1 as Rate };
 
 //# sourceMappingURL=Rate.js.map

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

@@ -7,7 +7,7 @@ let _phosphor_icons_react = require("@phosphor-icons/react");
 _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ant_design_icons = require("@ant-design/icons");
-//#region src/components/select/AntdSelect.tsx
+// src/components/select/AntdSelect.tsx
 var AntdSelect = (props) => {
 	const [isFocused, setIsFocused] = (0, react$1.useState)(false);
 	const handleSearch = (value) => {
@@ -54,7 +54,6 @@ var AntdSelect = (props) => {
 		size: props.size || "large"
 	});
 };
-//#endregion
 exports.AntdSelect = AntdSelect;
 
 //# sourceMappingURL=AntdSelect.cjs.map

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

@@ -4,7 +4,7 @@ import { Select, Spin } from "antd";
 import { CaretDownIcon, MagnifyingGlassIcon, XCircleIcon } from "@phosphor-icons/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { LoadingOutlined } from "@ant-design/icons";
-//#region src/components/select/AntdSelect.tsx
+// src/components/select/AntdSelect.tsx
 var AntdSelect = (props) => {
 	const [isFocused, setIsFocused] = useState(false);
 	const handleSearch = (value) => {
@@ -51,7 +51,6 @@ var AntdSelect = (props) => {
 		size: props.size || "large"
 	});
 };
-//#endregion
 export { AntdSelect };
 
 //# sourceMappingURL=AntdSelect.js.map

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

@@ -8,7 +8,7 @@ let _phosphor_icons_react = require("@phosphor-icons/react");
 _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ant_design_icons = require("@ant-design/icons");
-//#region src/components/select/Select.tsx
+// src/components/select/Select.tsx
 var isGroupOption = (opt) => "options" in opt && Array.isArray(opt.options);
 var flattenOptions = (opts) => {
 	if (!opts) return [];
@@ -117,7 +117,6 @@ var SelectControl = ({ props, field, form }) => {
 		size: props.size || "large"
 	});
 };
-//#endregion
 exports.Select = Select;
 
 //# sourceMappingURL=Select.cjs.map

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

@@ -5,7 +5,7 @@ import { Select, Spin } from "antd";
 import { CaretDownIcon, MagnifyingGlassIcon, XCircleIcon } from "@phosphor-icons/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { LoadingOutlined } from "@ant-design/icons";
-//#region src/components/select/Select.tsx
+// src/components/select/Select.tsx
 var isGroupOption = (opt) => "options" in opt && Array.isArray(opt.options);
 var flattenOptions = (opts) => {
 	if (!opts) return [];
@@ -114,7 +114,6 @@ var SelectControl = ({ props, field, form }) => {
 		size: props.size || "large"
 	});
 };
-//#endregion
 export { Select$1 as Select };
 
 //# sourceMappingURL=Select.js.map

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

@@ -9,7 +9,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames, 1);
 let _ant_design_icons = require("@ant-design/icons");
-//#region src/components/select/SummarizedSelect.tsx
+// src/components/select/SummarizedSelect.tsx
 var isGroupOption = (option) => {
 	return "options" in option;
 };
@@ -457,7 +457,6 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 		...props
 	})] });
 }
-//#endregion
 exports.SummarizedSelect = SummarizedSelect;
 
 //# sourceMappingURL=SummarizedSelect.cjs.map

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

@@ -6,7 +6,7 @@ import { CaretDownIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
 import { LoadingOutlined } from "@ant-design/icons";
-//#region src/components/select/SummarizedSelect.tsx
+// src/components/select/SummarizedSelect.tsx
 var isGroupOption = (option) => {
 	return "options" in option;
 };
@@ -454,7 +454,6 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 		...props
 	})] });
 }
-//#endregion
 export { SummarizedSelect };
 
 //# sourceMappingURL=SummarizedSelect.js.map

package/dist/src/components/select/SummarizedSelect.module.css.cjs

@@ -1,4 +1,4 @@
-//#region src/components/select/SummarizedSelect.module.css
+// src/components/select/SummarizedSelect.module.css
 var hemisphericSelect = "_hemisphericSelect_1pxzv_1";
 var summarizedSelect = "_summarizedSelect_1pxzv_9";
 var isActive = "_isActive_1pxzv_46";
@@ -23,7 +23,6 @@ var SummarizedSelect_module_default = {
 	fieldSelect,
 	groupDivider
 };
-//#endregion
 exports.clearAllButton = clearAllButton;
 exports.default = SummarizedSelect_module_default;
 exports.dropdownTrigger = dropdownTrigger;

package/dist/src/components/select/SummarizedSelect.module.css.js

@@ -1,4 +1,4 @@
-//#region src/components/select/SummarizedSelect.module.css
+// src/components/select/SummarizedSelect.module.css
 var hemisphericSelect = "_hemisphericSelect_1pxzv_1";
 var summarizedSelect = "_summarizedSelect_1pxzv_9";
 var isActive = "_isActive_1pxzv_46";
@@ -23,7 +23,6 @@ var SummarizedSelect_module_default = {
 	fieldSelect,
 	groupDivider
 };
-//#endregion
 export { clearAllButton, SummarizedSelect_module_default as default, dropdownTrigger, fieldSelect, groupDivider, headlinedMenuContainer, headlinedSelect, hemisphericSelect, isActive, menuContainer, menuContainerMultiple, summarizedSelect };
 
 //# sourceMappingURL=SummarizedSelect.module.css.js.map

package/dist/src/components/skeleton/Skeleton.cjs

@@ -1,6 +1,6 @@
 let antd = require("antd");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/skeleton/Skeleton.tsx
+// src/components/skeleton/Skeleton.tsx
 var Skeleton = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Skeleton, { ...props });
 };
@@ -9,7 +9,6 @@ Skeleton.Avatar = antd.Skeleton.Avatar;
 Skeleton.Input = antd.Skeleton.Input;
 Skeleton.Image = antd.Skeleton.Image;
 Skeleton.Button = antd.Skeleton.Button;
-//#endregion
 exports.Skeleton = Skeleton;
 
 //# sourceMappingURL=Skeleton.cjs.map