@j2-health/design-system 0.5.4 → 0.6.0

package/dist/src/components/statusPill/StatusPill.d.ts

@@ -0,0 +1,28 @@
+import { MenuProps } from 'antd';
+export type StatusPillProps = {
+    /** What the pill reports, e.g. "Draft saved". */
+    label: React.ReactNode;
+    /** Emphasized detail after the label, e.g. counts. */
+    detail?: React.ReactNode;
+    /** `'warning'` tints the pill for something that needs attention. */
+    tone?: 'default' | 'warning';
+    /** Makes the label a button. */
+    onClick?: () => void;
+    /** Makes the label open this menu instead. */
+    menu?: MenuProps;
+    /** Accessible name for the label's button or menu trigger. */
+    labelAriaLabel?: string;
+    /**
+     * A control at the end: a small `Button` or a `Switch`. It sits beside
+     * the label, not inside it, so its clicks never trigger the label.
+     */
+    trailing?: React.ReactNode;
+    /** Mutes the pill and makes it inert. */
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * A small pill reporting a state, with an optional action at the end. Sits
+ * at button height (small), so it lines up with the buttons beside it.
+ */
+export declare const StatusPill: ({ label, detail, tone, onClick, menu, labelAriaLabel, trailing, disabled, className, }: StatusPillProps) => import('react').JSX.Element;

package/dist/src/components/statusPill/StatusPill.js

@@ -0,0 +1,45 @@
+import { Dropdown } from "../dropdown/Dropdown.js";
+import StatusPill_module_default from "./StatusPill.module.css.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+//#region src/components/statusPill/StatusPill.tsx
+/**
+* A small pill reporting a state, with an optional action at the end. Sits
+* at button height (small), so it lines up with the buttons beside it.
+*/
+var StatusPill = ({ label, detail, tone = "default", onClick, menu, labelAriaLabel, trailing, disabled = false, className }) => {
+	const text = /* @__PURE__ */ jsxs(Fragment, { children: [label, detail !== void 0 && detail !== null && /* @__PURE__ */ jsx("span", {
+		className: "font-semibold tabular-nums",
+		children: detail
+	})] });
+	const interactive = !disabled && (onClick || menu);
+	const labelButton = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: menu ? void 0 : onClick,
+		"aria-label": labelAriaLabel,
+		disabled,
+		className: StatusPill_module_default.label,
+		children: text
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx(StatusPill_module_default.pill, tone === "warning" && StatusPill_module_default.warning, disabled && StatusPill_module_default.disabled, className),
+		children: [interactive ? menu ? /* @__PURE__ */ jsx(Dropdown, {
+			menu,
+			trigger: ["click"],
+			children: labelButton
+		}) : labelButton : /* @__PURE__ */ jsx("span", {
+			className: StatusPill_module_default.static,
+			children: text
+		}), trailing && /* @__PURE__ */ jsx("span", {
+			className: "inline-flex items-center",
+			ref: (el) => {
+				el?.toggleAttribute("inert", disabled);
+			},
+			children: trailing
+		})]
+	});
+};
+//#endregion
+export { StatusPill };
+
+//# sourceMappingURL=StatusPill.js.map

package/dist/src/components/statusPill/StatusPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","names":["_Fragment","styles"],"sources":["../../../../src/components/statusPill/StatusPill.tsx"],"sourcesContent":["import cx from 'classnames'\nimport type { MenuProps } from 'antd'\n\nimport { Dropdown } from '../dropdown'\nimport styles from './StatusPill.module.css'\n\nexport type StatusPillProps = {\n  /** What the pill reports, e.g. \"Draft saved\". */\n  label: React.ReactNode\n  /** Emphasized detail after the label, e.g. counts. */\n  detail?: React.ReactNode\n  /** `'warning'` tints the pill for something that needs attention. */\n  tone?: 'default' | 'warning'\n  /** Makes the label a button. */\n  onClick?: () => void\n  /** Makes the label open this menu instead. */\n  menu?: MenuProps\n  /** Accessible name for the label's button or menu trigger. */\n  labelAriaLabel?: string\n  /**\n   * A control at the end: a small `Button` or a `Switch`. It sits beside\n   * the label, not inside it, so its clicks never trigger the label.\n   */\n  trailing?: React.ReactNode\n  /** Mutes the pill and makes it inert. */\n  disabled?: boolean\n  className?: string\n}\n\n/**\n * A small pill reporting a state, with an optional action at the end. Sits\n * at button height (small), so it lines up with the buttons beside it.\n */\nexport const StatusPill = ({\n  label,\n  detail,\n  tone = 'default',\n  onClick,\n  menu,\n  labelAriaLabel,\n  trailing,\n  disabled = false,\n  className,\n}: StatusPillProps) => {\n  const text = (\n    <>\n      {label}\n      {detail !== undefined && detail !== null && (\n        <span className=\"font-semibold tabular-nums\">{detail}</span>\n      )}\n    </>\n  )\n\n  const interactive = !disabled && (onClick || menu)\n  const labelButton = (\n    <button\n      type=\"button\"\n      onClick={menu ? undefined : onClick}\n      aria-label={labelAriaLabel}\n      disabled={disabled}\n      className={styles.label}\n    >\n      {text}\n    </button>\n  )\n\n  return (\n    <span\n      className={cx(\n        styles.pill,\n        tone === 'warning' && styles.warning,\n        disabled && styles.disabled,\n        className\n      )}\n    >\n      {interactive ? (\n        menu ? (\n          <Dropdown menu={menu} trigger={['click']}>\n            {labelButton}\n          </Dropdown>\n        ) : (\n          labelButton\n        )\n      ) : (\n        <span className={styles.static}>{text}</span>\n      )}\n      {trailing && (\n        <span\n          className=\"inline-flex items-center\"\n          // `pointer-events: none` stops the mouse but not the keyboard; inert\n          // takes a disabled pill's control out of focus and the a11y tree.\n          // Set as an attribute so it works on React 18 and 19 alike.\n          ref={(el) => {\n            el?.toggleAttribute('inert', disabled)\n          }}\n        >\n          {trailing}\n        </span>\n      )}\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;AAiCA,IAAa,cAAc,EACzB,OACA,QACA,OAAO,WACP,SACA,MACA,gBACA,UACA,WAAW,OACX,gBACqB;CACrB,MAAM,OACJ,qBAAAA,UAAA,EAAA,UAAA,CACG,OACA,WAAW,KAAA,KAAa,WAAW,QAClC,oBAAC,QAAD;EAAM,WAAU;EAA8B,UAAA;CAAa,CAAA,CAE7D,EAAA,CAAA;CAGJ,MAAM,cAAc,CAAC,aAAa,WAAW;CAC7C,MAAM,cACJ,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,OAAO,KAAA,IAAY;EAC5B,cAAY;EACF;EACV,WAAWC,0BAAO;EAEjB,UAAA;CACK,CAAA;CAGV,OACE,qBAAC,QAAD;EACE,WAAW,GACTA,0BAAO,MACP,SAAS,aAAaA,0BAAO,SAC7B,YAAYA,0BAAO,UACnB,SACF;EANF,UAAA,CAQG,cACC,OACE,oBAAC,UAAD;GAAgB;GAAM,SAAS,CAAC,OAAO;GACpC,UAAA;EACO,CAAA,IAEV,cAGF,oBAAC,QAAD;GAAM,WAAWA,0BAAO;GAAS,UAAA;EAAW,CAAA,GAE7C,YACC,oBAAC,QAAD;GACE,WAAU;GAIV,MAAM,OAAO;IACX,IAAI,gBAAgB,SAAS,QAAQ;GACvC;GAEC,UAAA;EACG,CAAA,CAEJ;;AAEV"}

package/dist/src/components/statusPill/StatusPill.module.css.cjs

@@ -0,0 +1,20 @@
+//#region src/components/statusPill/StatusPill.module.css
+var pill = "_pill_16f8w_1";
+var warning = "_warning_16f8w_15";
+var disabled = "_disabled_16f8w_20";
+var label = "_label_16f8w_26";
+var StatusPill_module_default = {
+	pill,
+	warning,
+	disabled,
+	label,
+	"static": "_static_16f8w_27"
+};
+//#endregion
+exports.default = StatusPill_module_default;
+exports.disabled = disabled;
+exports.label = label;
+exports.pill = pill;
+exports.warning = warning;
+
+//# sourceMappingURL=StatusPill.module.css.cjs.map

package/dist/src/components/statusPill/StatusPill.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.module.css.cjs","names":[],"sources":["../../../../src/components/statusPill/StatusPill.module.css"],"sourcesContent":[".pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 24px;\n  padding: 0 8px;\n  border: 1px solid var(--j2-color-border);\n  border-radius: var(--j2-border-radius-sm);\n  background: var(--j2-color-bg-elevated, white);\n  color: var(--j2-color-text);\n  font-size: var(--j2-font-size);\n  white-space: nowrap;\n}\n\n.warning {\n  background: var(--j2-color-warning-bg);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n}\n\n.disabled {\n  color: var(--j2-color-text-disabled);\n  background: var(--j2-color-bg-container-disabled);\n  pointer-events: none;\n}\n\n.label,\n.static {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 8px;\n}\n\n.label {\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  transition: opacity 0.2s;\n}\n\n.label:hover {\n  opacity: 0.8;\n}\n"],"mappings":""}

package/dist/src/components/statusPill/StatusPill.module.css.js

@@ -0,0 +1,16 @@
+//#region src/components/statusPill/StatusPill.module.css
+var pill = "_pill_16f8w_1";
+var warning = "_warning_16f8w_15";
+var disabled = "_disabled_16f8w_20";
+var label = "_label_16f8w_26";
+var StatusPill_module_default = {
+	pill,
+	warning,
+	disabled,
+	label,
+	"static": "_static_16f8w_27"
+};
+//#endregion
+export { StatusPill_module_default as default, disabled, label, pill, warning };
+
+//# sourceMappingURL=StatusPill.module.css.js.map

package/dist/src/components/statusPill/StatusPill.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.module.css.js","names":[],"sources":["../../../../src/components/statusPill/StatusPill.module.css"],"sourcesContent":[".pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 24px;\n  padding: 0 8px;\n  border: 1px solid var(--j2-color-border);\n  border-radius: var(--j2-border-radius-sm);\n  background: var(--j2-color-bg-elevated, white);\n  color: var(--j2-color-text);\n  font-size: var(--j2-font-size);\n  white-space: nowrap;\n}\n\n.warning {\n  background: var(--j2-color-warning-bg);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n}\n\n.disabled {\n  color: var(--j2-color-text-disabled);\n  background: var(--j2-color-bg-container-disabled);\n  pointer-events: none;\n}\n\n.label,\n.static {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 8px;\n}\n\n.label {\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  transition: opacity 0.2s;\n}\n\n.label:hover {\n  opacity: 0.8;\n}\n"],"mappings":""}

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

@@ -0,0 +1 @@
+export { StatusPill, type StatusPillProps } from './StatusPill.js';

package/dist/src/components/swatch/Swatch.cjs

@@ -0,0 +1,50 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/swatch/Swatch.tsx
+/**
+* A small color square for keys, legends and inline indicators.
+*/
+var Swatch = ({ color = "var(--j2-color-primary)", variant = "solid", tint, stroke, size = 16, radius = 4, className }) => {
+	const style = {
+		width: size,
+		height: size,
+		borderRadius: radius
+	};
+	if (variant === "solid") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, classnames.default)("block shrink-0", className),
+		style: {
+			...style,
+			background: color
+		}
+	});
+	if (variant === "hatched") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, classnames.default)("block shrink-0 overflow-hidden border", className),
+		style: {
+			...style,
+			borderColor: color,
+			background: tint ?? `color-mix(in srgb, ${color} 10%, white)`
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			viewBox: "0 0 16 16",
+			className: "block h-full w-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				x1: "0",
+				y1: "16",
+				x2: "16",
+				y2: "0",
+				stroke: stroke ?? color,
+				strokeWidth: "1.5"
+			})
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, classnames.default)("block shrink-0 border border-j2-border bg-white", className),
+		style
+	});
+};
+//#endregion
+exports.Swatch = Swatch;
+
+//# sourceMappingURL=Swatch.cjs.map

package/dist/src/components/swatch/Swatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.cjs","names":["cx"],"sources":["../../../../src/components/swatch/Swatch.tsx"],"sourcesContent":["import cx from 'classnames'\n\nexport type SwatchProps = {\n  /** Any CSS color, e.g. `'var(--j2-color-interval-7-7)'`. */\n  color?: string\n  /**\n   * - `'solid'`: filled with `color`.\n   * - `'hatched'`: a light fill, a `color` border and a diagonal stroke. For\n   *   a softer version of the same meaning as solid.\n   * - `'outline'`: an empty square with a neutral border. For \"none\".\n   */\n  variant?: 'solid' | 'hatched' | 'outline'\n  /** The hatched variant's light fill. Defaults to `color` at 10%. */\n  tint?: string\n  /** The hatched variant's stroke. Defaults to `color`. */\n  stroke?: string\n  /** Side in px. */\n  size?: number\n  /** Corner radius in px. */\n  radius?: number\n  className?: string\n}\n\n/**\n * A small color square for keys, legends and inline indicators.\n */\nexport const Swatch = ({\n  color = 'var(--j2-color-primary)',\n  variant = 'solid',\n  tint,\n  stroke,\n  size = 16,\n  radius = 4,\n  className,\n}: SwatchProps) => {\n  const style: React.CSSProperties = {\n    width: size,\n    height: size,\n    borderRadius: radius,\n  }\n\n  if (variant === 'solid') {\n    return (\n      <span\n        className={cx('block shrink-0', className)}\n        style={{ ...style, background: color }}\n      />\n    )\n  }\n\n  if (variant === 'hatched') {\n    return (\n      <span\n        className={cx('block shrink-0 overflow-hidden border', className)}\n        style={{\n          ...style,\n          borderColor: color,\n          background: tint ?? `color-mix(in srgb, ${color} 10%, white)`,\n        }}\n      >\n        <svg viewBox=\"0 0 16 16\" className=\"block h-full w-full\">\n          <line\n            x1=\"0\"\n            y1=\"16\"\n            x2=\"16\"\n            y2=\"0\"\n            stroke={stroke ?? color}\n            strokeWidth=\"1.5\"\n          />\n        </svg>\n      </span>\n    )\n  }\n\n  return (\n    <span\n      className={cx(\n        'block shrink-0 border border-j2-border bg-white',\n        className\n      )}\n      style={style}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AA0BA,IAAa,UAAU,EACrB,QAAQ,2BACR,UAAU,SACV,MACA,QACA,OAAO,IACP,SAAS,GACT,gBACiB;CACjB,MAAM,QAA6B;EACjC,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;CAEA,IAAI,YAAY,SACd,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,YAAA,GAAWA,WAAAA,QAAAA,CAAG,kBAAkB,SAAS;EACzC,OAAO;GAAE,GAAG;GAAO,YAAY;EAAM;CACtC,CAAA;CAIL,IAAI,YAAY,WACd,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,YAAA,GAAWA,WAAAA,QAAAA,CAAG,yCAAyC,SAAS;EAChE,OAAO;GACL,GAAG;GACH,aAAa;GACb,YAAY,QAAQ,sBAAsB,MAAM;EAClD;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,SAAQ;GAAY,WAAU;GACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,IAAG;IACH,IAAG;IACH,IAAG;IACH,IAAG;IACH,QAAQ,UAAU;IAClB,aAAY;GACb,CAAA;EACE,CAAA;CACD,CAAA;CAIV,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,mDACA,SACF;EACO;CACR,CAAA;AAEL"}

package/dist/src/components/swatch/Swatch.d.ts

@@ -0,0 +1,24 @@
+export type SwatchProps = {
+    /** Any CSS color, e.g. `'var(--j2-color-interval-7-7)'`. */
+    color?: string;
+    /**
+     * - `'solid'`: filled with `color`.
+     * - `'hatched'`: a light fill, a `color` border and a diagonal stroke. For
+     *   a softer version of the same meaning as solid.
+     * - `'outline'`: an empty square with a neutral border. For "none".
+     */
+    variant?: 'solid' | 'hatched' | 'outline';
+    /** The hatched variant's light fill. Defaults to `color` at 10%. */
+    tint?: string;
+    /** The hatched variant's stroke. Defaults to `color`. */
+    stroke?: string;
+    /** Side in px. */
+    size?: number;
+    /** Corner radius in px. */
+    radius?: number;
+    className?: string;
+};
+/**
+ * A small color square for keys, legends and inline indicators.
+ */
+export declare const Swatch: ({ color, variant, tint, stroke, size, radius, className, }: SwatchProps) => import('react').JSX.Element;

package/dist/src/components/swatch/Swatch.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+//#region src/components/swatch/Swatch.tsx
+/**
+* A small color square for keys, legends and inline indicators.
+*/
+var Swatch = ({ color = "var(--j2-color-primary)", variant = "solid", tint, stroke, size = 16, radius = 4, className }) => {
+	const style = {
+		width: size,
+		height: size,
+		borderRadius: radius
+	};
+	if (variant === "solid") return /* @__PURE__ */ jsx("span", {
+		className: cx("block shrink-0", className),
+		style: {
+			...style,
+			background: color
+		}
+	});
+	if (variant === "hatched") return /* @__PURE__ */ jsx("span", {
+		className: cx("block shrink-0 overflow-hidden border", className),
+		style: {
+			...style,
+			borderColor: color,
+			background: tint ?? `color-mix(in srgb, ${color} 10%, white)`
+		},
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			className: "block h-full w-full",
+			children: /* @__PURE__ */ jsx("line", {
+				x1: "0",
+				y1: "16",
+				x2: "16",
+				y2: "0",
+				stroke: stroke ?? color,
+				strokeWidth: "1.5"
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("block shrink-0 border border-j2-border bg-white", className),
+		style
+	});
+};
+//#endregion
+export { Swatch };
+
+//# sourceMappingURL=Swatch.js.map

package/dist/src/components/swatch/Swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.js","names":[],"sources":["../../../../src/components/swatch/Swatch.tsx"],"sourcesContent":["import cx from 'classnames'\n\nexport type SwatchProps = {\n  /** Any CSS color, e.g. `'var(--j2-color-interval-7-7)'`. */\n  color?: string\n  /**\n   * - `'solid'`: filled with `color`.\n   * - `'hatched'`: a light fill, a `color` border and a diagonal stroke. For\n   *   a softer version of the same meaning as solid.\n   * - `'outline'`: an empty square with a neutral border. For \"none\".\n   */\n  variant?: 'solid' | 'hatched' | 'outline'\n  /** The hatched variant's light fill. Defaults to `color` at 10%. */\n  tint?: string\n  /** The hatched variant's stroke. Defaults to `color`. */\n  stroke?: string\n  /** Side in px. */\n  size?: number\n  /** Corner radius in px. */\n  radius?: number\n  className?: string\n}\n\n/**\n * A small color square for keys, legends and inline indicators.\n */\nexport const Swatch = ({\n  color = 'var(--j2-color-primary)',\n  variant = 'solid',\n  tint,\n  stroke,\n  size = 16,\n  radius = 4,\n  className,\n}: SwatchProps) => {\n  const style: React.CSSProperties = {\n    width: size,\n    height: size,\n    borderRadius: radius,\n  }\n\n  if (variant === 'solid') {\n    return (\n      <span\n        className={cx('block shrink-0', className)}\n        style={{ ...style, background: color }}\n      />\n    )\n  }\n\n  if (variant === 'hatched') {\n    return (\n      <span\n        className={cx('block shrink-0 overflow-hidden border', className)}\n        style={{\n          ...style,\n          borderColor: color,\n          background: tint ?? `color-mix(in srgb, ${color} 10%, white)`,\n        }}\n      >\n        <svg viewBox=\"0 0 16 16\" className=\"block h-full w-full\">\n          <line\n            x1=\"0\"\n            y1=\"16\"\n            x2=\"16\"\n            y2=\"0\"\n            stroke={stroke ?? color}\n            strokeWidth=\"1.5\"\n          />\n        </svg>\n      </span>\n    )\n  }\n\n  return (\n    <span\n      className={cx(\n        'block shrink-0 border border-j2-border bg-white',\n        className\n      )}\n      style={style}\n    />\n  )\n}\n"],"mappings":";;;;;;AA0BA,IAAa,UAAU,EACrB,QAAQ,2BACR,UAAU,SACV,MACA,QACA,OAAO,IACP,SAAS,GACT,gBACiB;CACjB,MAAM,QAA6B;EACjC,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;CAEA,IAAI,YAAY,SACd,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,kBAAkB,SAAS;EACzC,OAAO;GAAE,GAAG;GAAO,YAAY;EAAM;CACtC,CAAA;CAIL,IAAI,YAAY,WACd,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,yCAAyC,SAAS;EAChE,OAAO;GACL,GAAG;GACH,aAAa;GACb,YAAY,QAAQ,sBAAsB,MAAM;EAClD;EAEA,UAAA,oBAAC,OAAD;GAAK,SAAQ;GAAY,WAAU;GACjC,UAAA,oBAAC,QAAD;IACE,IAAG;IACH,IAAG;IACH,IAAG;IACH,IAAG;IACH,QAAQ,UAAU;IAClB,aAAY;GACb,CAAA;EACE,CAAA;CACD,CAAA;CAIV,OACE,oBAAC,QAAD;EACE,WAAW,GACT,mDACA,SACF;EACO;CACR,CAAA;AAEL"}

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

@@ -0,0 +1 @@
+export { Swatch, type SwatchProps } from './Swatch.js';

package/dist/src/components/swatchStrip/SwatchStrip.cjs

@@ -0,0 +1,50 @@
+const require_Swatch = require("../swatch/Swatch.cjs");
+const require_Tooltip = require("../tooltip/Tooltip.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/swatchStrip/SwatchStrip.tsx
+/**
+* A compact run of swatches in groups, e.g. one square per affected item,
+* grouped by kind. Groups are separated by a thin rule rather than a wider
+* gap, so a group ending in `+N` doesn't read as farther from the next.
+*/
+var SwatchStrip = ({ groups, max = 5, size = 12 }) => {
+	const visibleGroups = groups.filter((group) => group.items.length > 0);
+	if (visibleGroups.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "inline-flex flex-wrap items-center gap-y-1",
+		children: visibleGroups.map((group, index) => {
+			const shown = group.items.slice(0, max);
+			const overflow = group.items.length - shown.length;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "inline-flex items-center",
+				children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: "mx-2 inline-block w-px bg-[var(--j2-color-border-secondary)]",
+					style: { height: 12 }
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "inline-flex items-center",
+					style: { gap: 2 },
+					children: [shown.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+						title: item.label,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "block",
+							"aria-label": item.label,
+							role: "img",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Swatch.Swatch, {
+								...item.swatch,
+								size
+							})
+						})
+					}, item.key)), overflow > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "px-1 text-xs tabular-nums text-j2-text-secondary",
+						children: ["+", overflow]
+					})]
+				})]
+			}, group.key);
+		})
+	});
+};
+//#endregion
+exports.SwatchStrip = SwatchStrip;
+
+//# sourceMappingURL=SwatchStrip.cjs.map

package/dist/src/components/swatchStrip/SwatchStrip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchStrip.cjs","names":["Tooltip","Swatch"],"sources":["../../../../src/components/swatchStrip/SwatchStrip.tsx"],"sourcesContent":["import { Tooltip } from '../tooltip'\nimport { Swatch, type SwatchProps } from '../swatch'\n\nexport type SwatchStripItem = {\n  key: string\n  /** Shown in a tooltip and read by assistive tech. */\n  label: string\n  swatch: Omit<SwatchProps, 'size'>\n}\n\nexport type SwatchStripGroup = {\n  key: string\n  items: SwatchStripItem[]\n}\n\nexport type SwatchStripProps = {\n  /** Groups in display order; empty groups are skipped. */\n  groups: SwatchStripGroup[]\n  /** Swatches shown per group before a `+N` takes over. */\n  max?: number\n  /** Swatch side in px. */\n  size?: number\n}\n\n/**\n * A compact run of swatches in groups, e.g. one square per affected item,\n * grouped by kind. Groups are separated by a thin rule rather than a wider\n * gap, so a group ending in `+N` doesn't read as farther from the next.\n */\nexport const SwatchStrip = ({\n  groups,\n  max = 5,\n  size = 12,\n}: SwatchStripProps) => {\n  const visibleGroups = groups.filter((group) => group.items.length > 0)\n  if (visibleGroups.length === 0) return null\n\n  return (\n    <div className=\"inline-flex flex-wrap items-center gap-y-1\">\n      {visibleGroups.map((group, index) => {\n        const shown = group.items.slice(0, max)\n        const overflow = group.items.length - shown.length\n        return (\n          <span key={group.key} className=\"inline-flex items-center\">\n            {index > 0 && (\n              <span\n                aria-hidden\n                className=\"mx-2 inline-block w-px bg-[var(--j2-color-border-secondary)]\"\n                style={{ height: 12 }}\n              />\n            )}\n            <span className=\"inline-flex items-center\" style={{ gap: 2 }}>\n              {shown.map((item) => (\n                <Tooltip key={item.key} title={item.label}>\n                  <span className=\"block\" aria-label={item.label} role=\"img\">\n                    <Swatch {...item.swatch} size={size} />\n                  </span>\n                </Tooltip>\n              ))}\n              {overflow > 0 && (\n                <span className=\"px-1 text-xs tabular-nums text-j2-text-secondary\">\n                  +{overflow}\n                </span>\n              )}\n            </span>\n          </span>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AA6BA,IAAa,eAAe,EAC1B,QACA,MAAM,GACN,OAAO,SACe;CACtB,MAAM,gBAAgB,OAAO,QAAQ,UAAU,MAAM,MAAM,SAAS,CAAC;CACrE,IAAI,cAAc,WAAW,GAAG,OAAO;CAEvC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EACZ,UAAA,cAAc,KAAK,OAAO,UAAU;GACnC,MAAM,QAAQ,MAAM,MAAM,MAAM,GAAG,GAAG;GACtC,MAAM,WAAW,MAAM,MAAM,SAAS,MAAM;GAC5C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IAAsB,WAAU;IAAhC,UAAA,CACG,QAAQ,KACP,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KACE,eAAA;KACA,WAAU;KACV,OAAO,EAAE,QAAQ,GAAG;IACrB,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;KAAM,WAAU;KAA2B,OAAO,EAAE,KAAK,EAAE;KAA3D,UAAA,CACG,MAAM,KAAK,SACV,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,SAAD;MAAwB,OAAO,KAAK;MAClC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;OAAM,WAAU;OAAQ,cAAY,KAAK;OAAO,MAAK;OACnD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;QAAQ,GAAI,KAAK;QAAc;OAAO,CAAA;MAClC,CAAA;KACC,GAJK,KAAK,GAIV,CACV,GACA,WAAW,KACV,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CAAmE,KAC/D,QACE;KAEJ,CAAA,CAAA;IACF,CAAA,CAAA;GAtBK,GAAA,MAAM,GAsBX;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/src/components/swatchStrip/SwatchStrip.d.ts

@@ -0,0 +1,25 @@
+import { SwatchProps } from '../swatch/index.js';
+export type SwatchStripItem = {
+    key: string;
+    /** Shown in a tooltip and read by assistive tech. */
+    label: string;
+    swatch: Omit<SwatchProps, 'size'>;
+};
+export type SwatchStripGroup = {
+    key: string;
+    items: SwatchStripItem[];
+};
+export type SwatchStripProps = {
+    /** Groups in display order; empty groups are skipped. */
+    groups: SwatchStripGroup[];
+    /** Swatches shown per group before a `+N` takes over. */
+    max?: number;
+    /** Swatch side in px. */
+    size?: number;
+};
+/**
+ * A compact run of swatches in groups, e.g. one square per affected item,
+ * grouped by kind. Groups are separated by a thin rule rather than a wider
+ * gap, so a group ending in `+N` doesn't read as farther from the next.
+ */
+export declare const SwatchStrip: ({ groups, max, size, }: SwatchStripProps) => import('react').JSX.Element | null;

package/dist/src/components/swatchStrip/SwatchStrip.js

@@ -0,0 +1,50 @@
+import { Swatch } from "../swatch/Swatch.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/swatchStrip/SwatchStrip.tsx
+/**
+* A compact run of swatches in groups, e.g. one square per affected item,
+* grouped by kind. Groups are separated by a thin rule rather than a wider
+* gap, so a group ending in `+N` doesn't read as farther from the next.
+*/
+var SwatchStrip = ({ groups, max = 5, size = 12 }) => {
+	const visibleGroups = groups.filter((group) => group.items.length > 0);
+	if (visibleGroups.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "inline-flex flex-wrap items-center gap-y-1",
+		children: visibleGroups.map((group, index) => {
+			const shown = group.items.slice(0, max);
+			const overflow = group.items.length - shown.length;
+			return /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center",
+				children: [index > 0 && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "mx-2 inline-block w-px bg-[var(--j2-color-border-secondary)]",
+					style: { height: 12 }
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center",
+					style: { gap: 2 },
+					children: [shown.map((item) => /* @__PURE__ */ jsx(Tooltip, {
+						title: item.label,
+						children: /* @__PURE__ */ jsx("span", {
+							className: "block",
+							"aria-label": item.label,
+							role: "img",
+							children: /* @__PURE__ */ jsx(Swatch, {
+								...item.swatch,
+								size
+							})
+						})
+					}, item.key)), overflow > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "px-1 text-xs tabular-nums text-j2-text-secondary",
+						children: ["+", overflow]
+					})]
+				})]
+			}, group.key);
+		})
+	});
+};
+//#endregion
+export { SwatchStrip };
+
+//# sourceMappingURL=SwatchStrip.js.map

package/dist/src/components/swatchStrip/SwatchStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchStrip.js","names":[],"sources":["../../../../src/components/swatchStrip/SwatchStrip.tsx"],"sourcesContent":["import { Tooltip } from '../tooltip'\nimport { Swatch, type SwatchProps } from '../swatch'\n\nexport type SwatchStripItem = {\n  key: string\n  /** Shown in a tooltip and read by assistive tech. */\n  label: string\n  swatch: Omit<SwatchProps, 'size'>\n}\n\nexport type SwatchStripGroup = {\n  key: string\n  items: SwatchStripItem[]\n}\n\nexport type SwatchStripProps = {\n  /** Groups in display order; empty groups are skipped. */\n  groups: SwatchStripGroup[]\n  /** Swatches shown per group before a `+N` takes over. */\n  max?: number\n  /** Swatch side in px. */\n  size?: number\n}\n\n/**\n * A compact run of swatches in groups, e.g. one square per affected item,\n * grouped by kind. Groups are separated by a thin rule rather than a wider\n * gap, so a group ending in `+N` doesn't read as farther from the next.\n */\nexport const SwatchStrip = ({\n  groups,\n  max = 5,\n  size = 12,\n}: SwatchStripProps) => {\n  const visibleGroups = groups.filter((group) => group.items.length > 0)\n  if (visibleGroups.length === 0) return null\n\n  return (\n    <div className=\"inline-flex flex-wrap items-center gap-y-1\">\n      {visibleGroups.map((group, index) => {\n        const shown = group.items.slice(0, max)\n        const overflow = group.items.length - shown.length\n        return (\n          <span key={group.key} className=\"inline-flex items-center\">\n            {index > 0 && (\n              <span\n                aria-hidden\n                className=\"mx-2 inline-block w-px bg-[var(--j2-color-border-secondary)]\"\n                style={{ height: 12 }}\n              />\n            )}\n            <span className=\"inline-flex items-center\" style={{ gap: 2 }}>\n              {shown.map((item) => (\n                <Tooltip key={item.key} title={item.label}>\n                  <span className=\"block\" aria-label={item.label} role=\"img\">\n                    <Swatch {...item.swatch} size={size} />\n                  </span>\n                </Tooltip>\n              ))}\n              {overflow > 0 && (\n                <span className=\"px-1 text-xs tabular-nums text-j2-text-secondary\">\n                  +{overflow}\n                </span>\n              )}\n            </span>\n          </span>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AA6BA,IAAa,eAAe,EAC1B,QACA,MAAM,GACN,OAAO,SACe;CACtB,MAAM,gBAAgB,OAAO,QAAQ,UAAU,MAAM,MAAM,SAAS,CAAC;CACrE,IAAI,cAAc,WAAW,GAAG,OAAO;CAEvC,OACE,oBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,cAAc,KAAK,OAAO,UAAU;GACnC,MAAM,QAAQ,MAAM,MAAM,MAAM,GAAG,GAAG;GACtC,MAAM,WAAW,MAAM,MAAM,SAAS,MAAM;GAC5C,OACE,qBAAC,QAAD;IAAsB,WAAU;IAAhC,UAAA,CACG,QAAQ,KACP,oBAAC,QAAD;KACE,eAAA;KACA,WAAU;KACV,OAAO,EAAE,QAAQ,GAAG;IACrB,CAAA,GAEH,qBAAC,QAAD;KAAM,WAAU;KAA2B,OAAO,EAAE,KAAK,EAAE;KAA3D,UAAA,CACG,MAAM,KAAK,SACV,oBAAC,SAAD;MAAwB,OAAO,KAAK;MAClC,UAAA,oBAAC,QAAD;OAAM,WAAU;OAAQ,cAAY,KAAK;OAAO,MAAK;OACnD,UAAA,oBAAC,QAAD;QAAQ,GAAI,KAAK;QAAc;OAAO,CAAA;MAClC,CAAA;KACC,GAJK,KAAK,GAIV,CACV,GACA,WAAW,KACV,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CAAmE,KAC/D,QACE;KAEJ,CAAA,CAAA;IACF,CAAA,CAAA;GAtBK,GAAA,MAAM,GAsBX;EAEV,CAAC;CACE,CAAA;AAET"}

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

@@ -0,0 +1 @@
+export { SwatchStrip, type SwatchStripGroup, type SwatchStripItem, type SwatchStripProps, } from './SwatchStrip.js';

package/dist/src/components/switch/Switch.cjs

@@ -1,16 +1,20 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 ;/* empty css             */
 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/switch/Switch.tsx
-var Switch = ({ small, loading = false, disabled = false, checked, onChange, ...props }) => {
+var isText = (node) => typeof node === "string" || typeof node === "number";
+var Switch = ({ small, size, className, loading = false, disabled = false, checked, onChange, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Switch, {
 		...props,
-		size: small ? "small" : "default",
+		size: small ? "small" : size ?? "default",
 		loading,
 		disabled,
 		checked,
 		onChange,
-		className: "j2-switch"
+		className: (0, classnames.default)("j2-switch", (isText(props.checkedChildren) || isText(props.unCheckedChildren)) && "j2-switch-labelled", className)
 	});
 };
 //#endregion

package/dist/src/components/switch/Switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.cjs","names":["AntSwitch"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { Switch as AntSwitch, SwitchProps } from 'antd'\nimport './Switch.css'\n\ntype AllProps = SwitchProps & {\n  small?: boolean\n  loading?: boolean\n  disabled?: boolean\n  checked?: boolean\n  onChange?: (checked: boolean, event: Event) => void\n}\n\nexport type Props = Expand<AllProps>\n\nexport const Switch = ({\n  small,\n  loading = false,\n  disabled = false,\n  checked,\n  onChange,\n  ...props\n}: Props) => {\n  return (\n    <AntSwitch\n      {...props}\n      size={small ? 'small' : 'default'}\n      loading={loading}\n      disabled={disabled}\n      checked={checked}\n      onChange={onChange}\n      className=\"j2-switch\"\n    />\n  )\n}\n"],"mappings":";;;;AAaA,IAAa,UAAU,EACrB,OACA,UAAU,OACV,WAAW,OACX,SACA,UACA,GAAG,YACQ;CACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,QAAD;EACE,GAAI;EACJ,MAAM,QAAQ,UAAU;EACf;EACC;EACD;EACC;EACV,WAAU;CACX,CAAA;AAEL"}
+{"version":3,"file":"Switch.cjs","names":["AntSwitch","cx"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { Switch as AntSwitch, SwitchProps } from 'antd'\nimport cx from 'classnames'\nimport './Switch.css'\n\ntype AllProps = SwitchProps & {\n  small?: boolean\n  loading?: boolean\n  disabled?: boolean\n  checked?: boolean\n  onChange?: (checked: boolean, event: Event) => void\n}\n\nexport type Props = Expand<AllProps>\n\nconst isText = (node: React.ReactNode) =>\n  typeof node === 'string' || typeof node === 'number'\n\nexport const Switch = ({\n  small,\n  size,\n  className,\n  loading = false,\n  disabled = false,\n  checked,\n  onChange,\n  ...props\n}: Props) => {\n  return (\n    <AntSwitch\n      {...props}\n      size={small ? 'small' : (size ?? 'default')}\n      loading={loading}\n      disabled={disabled}\n      checked={checked}\n      onChange={onChange}\n      className={cx(\n        'j2-switch',\n        (isText(props.checkedChildren) || isText(props.unCheckedChildren)) &&\n          'j2-switch-labelled',\n        className\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAcA,IAAM,UAAU,SACd,OAAO,SAAS,YAAY,OAAO,SAAS;AAE9C,IAAa,UAAU,EACrB,OACA,MACA,WACA,UAAU,OACV,WAAW,OACX,SACA,UACA,GAAG,YACQ;CACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,QAAD;EACE,GAAI;EACJ,MAAM,QAAQ,UAAW,QAAQ;EACxB;EACC;EACD;EACC;EACV,YAAA,GAAWC,WAAAA,QAAAA,CACT,cACC,OAAO,MAAM,eAAe,KAAK,OAAO,MAAM,iBAAiB,MAC9D,sBACF,SACF;CACD,CAAA;AAEL"}

package/dist/src/components/switch/Switch.d.ts

@@ -7,5 +7,5 @@ type AllProps = SwitchProps & {
     onChange?: (checked: boolean, event: Event) => void;
 };
 export type Props = Expand<AllProps>;
-export declare const Switch: ({ small, loading, disabled, checked, onChange, ...props }: Props) => import('react').JSX.Element;
+export declare const Switch: ({ small, size, className, loading, disabled, checked, onChange, ...props }: Props) => import('react').JSX.Element;
 export {};

package/dist/src/components/switch/Switch.js

@@ -1,16 +1,18 @@
 /* empty css           */
 import { Switch } from "antd";
 import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
 //#region src/components/switch/Switch.tsx
-var Switch$1 = ({ small, loading = false, disabled = false, checked, onChange, ...props }) => {
+var isText = (node) => typeof node === "string" || typeof node === "number";
+var Switch$1 = ({ small, size, className, loading = false, disabled = false, checked, onChange, ...props }) => {
 	return /* @__PURE__ */ jsx(Switch, {
 		...props,
-		size: small ? "small" : "default",
+		size: small ? "small" : size ?? "default",
 		loading,
 		disabled,
 		checked,
 		onChange,
-		className: "j2-switch"
+		className: cx("j2-switch", (isText(props.checkedChildren) || isText(props.unCheckedChildren)) && "j2-switch-labelled", className)
 	});
 };
 //#endregion

package/dist/src/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","AntSwitch"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { Switch as AntSwitch, SwitchProps } from 'antd'\nimport './Switch.css'\n\ntype AllProps = SwitchProps & {\n  small?: boolean\n  loading?: boolean\n  disabled?: boolean\n  checked?: boolean\n  onChange?: (checked: boolean, event: Event) => void\n}\n\nexport type Props = Expand<AllProps>\n\nexport const Switch = ({\n  small,\n  loading = false,\n  disabled = false,\n  checked,\n  onChange,\n  ...props\n}: Props) => {\n  return (\n    <AntSwitch\n      {...props}\n      size={small ? 'small' : 'default'}\n      loading={loading}\n      disabled={disabled}\n      checked={checked}\n      onChange={onChange}\n      className=\"j2-switch\"\n    />\n  )\n}\n"],"mappings":";;;;AAaA,IAAaA,YAAU,EACrB,OACA,UAAU,OACV,WAAW,OACX,SACA,UACA,GAAG,YACQ;CACX,OACE,oBAACC,QAAD;EACE,GAAI;EACJ,MAAM,QAAQ,UAAU;EACf;EACC;EACD;EACC;EACV,WAAU;CACX,CAAA;AAEL"}
+{"version":3,"file":"Switch.js","names":["Switch","AntSwitch"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { Switch as AntSwitch, SwitchProps } from 'antd'\nimport cx from 'classnames'\nimport './Switch.css'\n\ntype AllProps = SwitchProps & {\n  small?: boolean\n  loading?: boolean\n  disabled?: boolean\n  checked?: boolean\n  onChange?: (checked: boolean, event: Event) => void\n}\n\nexport type Props = Expand<AllProps>\n\nconst isText = (node: React.ReactNode) =>\n  typeof node === 'string' || typeof node === 'number'\n\nexport const Switch = ({\n  small,\n  size,\n  className,\n  loading = false,\n  disabled = false,\n  checked,\n  onChange,\n  ...props\n}: Props) => {\n  return (\n    <AntSwitch\n      {...props}\n      size={small ? 'small' : (size ?? 'default')}\n      loading={loading}\n      disabled={disabled}\n      checked={checked}\n      onChange={onChange}\n      className={cx(\n        'j2-switch',\n        (isText(props.checkedChildren) || isText(props.unCheckedChildren)) &&\n          'j2-switch-labelled',\n        className\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;AAcA,IAAM,UAAU,SACd,OAAO,SAAS,YAAY,OAAO,SAAS;AAE9C,IAAaA,YAAU,EACrB,OACA,MACA,WACA,UAAU,OACV,WAAW,OACX,SACA,UACA,GAAG,YACQ;CACX,OACE,oBAACC,QAAD;EACE,GAAI;EACJ,MAAM,QAAQ,UAAW,QAAQ;EACxB;EACC;EACD;EACC;EACV,WAAW,GACT,cACC,OAAO,MAAM,eAAe,KAAK,OAAO,MAAM,iBAAiB,MAC9D,sBACF,SACF;CACD,CAAA;AAEL"}

package/dist/src/components/tabs/Tabs.cjs

@@ -1,10 +1,15 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Tabs_module = require("./Tabs.module.css.cjs");
 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/tabs/Tabs.tsx
-var Tabs = (props) => {
+var Tabs = ({ flush, justified, className, ...props }) => {
 	const destroyOnHidden = props.destroyOnHidden ?? true;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tabs, {
 		...props,
+		className: (0, classnames.default)(flush && require_Tabs_module.default.flush, justified && require_Tabs_module.default.justified, className),
 		destroyOnHidden
 	});
 };

package/dist/src/components/tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","names":["AntdTabs"],"sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Tabs as AntdTabs, TabsProps } from 'antd'\n\nexport type Props = Expand<TabsProps>\n\nexport const Tabs = (props: Props) => {\n  const destroyOnHidden = props.destroyOnHidden ?? true\n  return <AntdTabs {...props} destroyOnHidden={destroyOnHidden} />\n}\n"],"mappings":";;;AAIA,IAAa,QAAQ,UAAiB;CACpC,MAAM,kBAAkB,MAAM,mBAAmB;CACjD,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,MAAD;EAAU,GAAI;EAAwB;CAAkB,CAAA;AACjE"}
+{"version":3,"file":"Tabs.cjs","names":["AntdTabs","cx","styles"],"sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Tabs as AntdTabs, TabsProps } from 'antd'\nimport cx from 'classnames'\nimport styles from './Tabs.module.css'\n\nexport type Props = Expand<\n  TabsProps & {\n    /**\n     * No gap under the tab bar and no padding around the panes, so the\n     * content sits flush against the tabs and fills the remaining height.\n     */\n    flush?: boolean\n    /** The tabs share the bar's full width equally. */\n    justified?: boolean\n  }\n>\n\nexport const Tabs = ({ flush, justified, className, ...props }: Props) => {\n  const destroyOnHidden = props.destroyOnHidden ?? true\n  return (\n    <AntdTabs\n      {...props}\n      className={cx(\n        flush && styles.flush,\n        justified && styles.justified,\n        className\n      )}\n      destroyOnHidden={destroyOnHidden}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAgBA,IAAa,QAAQ,EAAE,OAAO,WAAW,WAAW,GAAG,YAAmB;CACxE,MAAM,kBAAkB,MAAM,mBAAmB;CACjD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,MAAD;EACE,GAAI;EACJ,YAAA,GAAWC,WAAAA,QAAAA,CACT,SAASC,oBAAAA,QAAO,OAChB,aAAaA,oBAAAA,QAAO,WACpB,SACF;EACiB;CAClB,CAAA;AAEL"}

package/dist/src/components/tabs/Tabs.d.ts

@@ -1,3 +1,11 @@
 import { TabsProps } from 'antd';
-export type Props = Expand<TabsProps>;
-export declare const Tabs: (props: Props) => import('react').JSX.Element;
+export type Props = Expand<TabsProps & {
+    /**
+     * No gap under the tab bar and no padding around the panes, so the
+     * content sits flush against the tabs and fills the remaining height.
+     */
+    flush?: boolean;
+    /** The tabs share the bar's full width equally. */
+    justified?: boolean;
+}>;
+export declare const Tabs: ({ flush, justified, className, ...props }: Props) => import('react').JSX.Element;

package/dist/src/components/tabs/Tabs.js

@@ -1,10 +1,13 @@
+import Tabs_module_default from "./Tabs.module.css.js";
 import { Tabs } from "antd";
 import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
 //#region src/components/tabs/Tabs.tsx
-var Tabs$1 = (props) => {
+var Tabs$1 = ({ flush, justified, className, ...props }) => {
 	const destroyOnHidden = props.destroyOnHidden ?? true;
 	return /* @__PURE__ */ jsx(Tabs, {
 		...props,
+		className: cx(flush && Tabs_module_default.flush, justified && Tabs_module_default.justified, className),
 		destroyOnHidden
 	});
 };

package/dist/src/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["Tabs","AntdTabs"],"sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Tabs as AntdTabs, TabsProps } from 'antd'\n\nexport type Props = Expand<TabsProps>\n\nexport const Tabs = (props: Props) => {\n  const destroyOnHidden = props.destroyOnHidden ?? true\n  return <AntdTabs {...props} destroyOnHidden={destroyOnHidden} />\n}\n"],"mappings":";;;AAIA,IAAaA,UAAQ,UAAiB;CACpC,MAAM,kBAAkB,MAAM,mBAAmB;CACjD,OAAO,oBAACC,MAAD;EAAU,GAAI;EAAwB;CAAkB,CAAA;AACjE"}
+{"version":3,"file":"Tabs.js","names":["Tabs","AntdTabs","styles"],"sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Tabs as AntdTabs, TabsProps } from 'antd'\nimport cx from 'classnames'\nimport styles from './Tabs.module.css'\n\nexport type Props = Expand<\n  TabsProps & {\n    /**\n     * No gap under the tab bar and no padding around the panes, so the\n     * content sits flush against the tabs and fills the remaining height.\n     */\n    flush?: boolean\n    /** The tabs share the bar's full width equally. */\n    justified?: boolean\n  }\n>\n\nexport const Tabs = ({ flush, justified, className, ...props }: Props) => {\n  const destroyOnHidden = props.destroyOnHidden ?? true\n  return (\n    <AntdTabs\n      {...props}\n      className={cx(\n        flush && styles.flush,\n        justified && styles.justified,\n        className\n      )}\n      destroyOnHidden={destroyOnHidden}\n    />\n  )\n}\n"],"mappings":";;;;;AAgBA,IAAaA,UAAQ,EAAE,OAAO,WAAW,WAAW,GAAG,YAAmB;CACxE,MAAM,kBAAkB,MAAM,mBAAmB;CACjD,OACE,oBAACC,MAAD;EACE,GAAI;EACJ,WAAW,GACT,SAASC,oBAAO,OAChB,aAAaA,oBAAO,WACpB,SACF;EACiB;CAClB,CAAA;AAEL"}

package/dist/src/components/tabs/Tabs.module.css.cjs

@@ -0,0 +1,13 @@
+//#region src/components/tabs/Tabs.module.css
+var flush = "_flush_1bifh_2";
+var justified = "_justified_1bifh_27";
+var Tabs_module_default = {
+	flush,
+	justified
+};
+//#endregion
+exports.default = Tabs_module_default;
+exports.flush = flush;
+exports.justified = justified;
+
+//# sourceMappingURL=Tabs.module.css.cjs.map

package/dist/src/components/tabs/Tabs.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.module.css.cjs","names":[],"sources":["../../../../src/components/tabs/Tabs.module.css"],"sourcesContent":["/* Flush: content sits against the tab bar and fills the remaining height. */\n.flush {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  :global(.ant-tabs-nav) {\n    margin-bottom: 0;\n  }\n\n  :global(.ant-tabs-content-holder) {\n    flex: 1;\n    min-height: 0;\n  }\n\n  :global(.ant-tabs-content),\n  :global(.ant-tabs-tabpane) {\n    height: 100%;\n  }\n\n  :global(.ant-tabs-tabpane) {\n    padding: 0;\n  }\n}\n\n/* Justified: the tabs share the bar's width equally. */\n.justified {\n  :global(.ant-tabs-nav-list) {\n    flex: 1;\n  }\n\n  :global(.ant-tabs-tab) {\n    flex: 1;\n    justify-content: center;\n  }\n\n  :global(.ant-tabs-tab + .ant-tabs-tab) {\n    margin-inline-start: 0;\n  }\n}\n"],"mappings":""}

package/dist/src/components/tabs/Tabs.module.css.js

@@ -0,0 +1,11 @@
+//#region src/components/tabs/Tabs.module.css
+var flush = "_flush_1bifh_2";
+var justified = "_justified_1bifh_27";
+var Tabs_module_default = {
+	flush,
+	justified
+};
+//#endregion
+export { Tabs_module_default as default, flush, justified };
+
+//# sourceMappingURL=Tabs.module.css.js.map

package/dist/src/components/tabs/Tabs.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.module.css.js","names":[],"sources":["../../../../src/components/tabs/Tabs.module.css"],"sourcesContent":["/* Flush: content sits against the tab bar and fills the remaining height. */\n.flush {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  :global(.ant-tabs-nav) {\n    margin-bottom: 0;\n  }\n\n  :global(.ant-tabs-content-holder) {\n    flex: 1;\n    min-height: 0;\n  }\n\n  :global(.ant-tabs-content),\n  :global(.ant-tabs-tabpane) {\n    height: 100%;\n  }\n\n  :global(.ant-tabs-tabpane) {\n    padding: 0;\n  }\n}\n\n/* Justified: the tabs share the bar's width equally. */\n.justified {\n  :global(.ant-tabs-nav-list) {\n    flex: 1;\n  }\n\n  :global(.ant-tabs-tab) {\n    flex: 1;\n    justify-content: center;\n  }\n\n  :global(.ant-tabs-tab + .ant-tabs-tab) {\n    margin-inline-start: 0;\n  }\n}\n"],"mappings":""}