@j2-health/design-system 0.5.4 → 0.6.0

package/dist/src/components/changeChip/ChangeChip.d.ts

@@ -0,0 +1,40 @@
+import { SwatchProps } from '../swatch/index.js';
+export type ChangeChipProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
+    /** A leading swatch, e.g. the kind of change. */
+    swatch?: Omit<SwatchProps, 'size'>;
+    /** What changed, e.g. an area's name. */
+    label?: React.ReactNode;
+    /** How much it changed. */
+    delta?: {
+        direction: 'up' | 'down';
+        value: React.ReactNode;
+        /** Text color for the arrow and value. Defaults to the primary color. */
+        color?: string;
+    };
+    /** Trailing text when there is no delta to show, e.g. an em dash. */
+    placeholder?: React.ReactNode;
+    /** A full description for assistive tech, when the visible text is terse. */
+    srLabel?: string;
+};
+/**
+ * A compact chip for one change: an optional swatch, a label and a delta.
+ * It is a button, so it can open a popover with the details; wrap it in a
+ * `Popover` (it forwards its ref and handlers).
+ */
+export declare const ChangeChip: import('react').ForwardRefExoticComponent<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    /** A leading swatch, e.g. the kind of change. */
+    swatch?: Omit<SwatchProps, "size">;
+    /** What changed, e.g. an area's name. */
+    label?: React.ReactNode;
+    /** How much it changed. */
+    delta?: {
+        direction: "up" | "down";
+        value: React.ReactNode;
+        /** Text color for the arrow and value. Defaults to the primary color. */
+        color?: string;
+    };
+    /** Trailing text when there is no delta to show, e.g. an em dash. */
+    placeholder?: React.ReactNode;
+    /** A full description for assistive tech, when the visible text is terse. */
+    srLabel?: string;
+} & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/components/changeChip/ChangeChip.js

@@ -0,0 +1,49 @@
+import { Swatch } from "../swatch/Swatch.js";
+import { forwardRef } from "react";
+import { ArrowDownIcon, ArrowUpIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+//#region src/components/changeChip/ChangeChip.tsx
+/**
+* A compact chip for one change: an optional swatch, a label and a delta.
+* It is a button, so it can open a popover with the details; wrap it in a
+* `Popover` (it forwards its ref and handlers).
+*/
+var ChangeChip = forwardRef(({ swatch, label, delta, placeholder, srLabel, className, ...props }, ref) => {
+	const Arrow = delta?.direction === "down" ? ArrowDownIcon : ArrowUpIcon;
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		ref,
+		type: "button",
+		className: cx("inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors hover:bg-j2-gray-2", className),
+		children: [
+			swatch && /* @__PURE__ */ jsx(Swatch, {
+				...swatch,
+				size: 12
+			}),
+			label && /* @__PURE__ */ jsx("span", { children: label }),
+			delta && /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-0.5 font-medium",
+				style: { color: delta.color ?? "var(--j2-color-primary)" },
+				children: [/* @__PURE__ */ jsx(Arrow, {
+					size: 11,
+					weight: "bold",
+					"aria-hidden": true
+				}), delta.value]
+			}),
+			!delta && placeholder && /* @__PURE__ */ jsx("span", {
+				className: "text-j2-text-secondary",
+				children: placeholder
+			}),
+			srLabel && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: srLabel
+			})
+		]
+	});
+});
+ChangeChip.displayName = "ChangeChip";
+//#endregion
+export { ChangeChip };
+
+//# sourceMappingURL=ChangeChip.js.map

package/dist/src/components/changeChip/ChangeChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeChip.js","names":[],"sources":["../../../../src/components/changeChip/ChangeChip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport cx from 'classnames'\nimport { ArrowDownIcon, ArrowUpIcon } from '@phosphor-icons/react'\n\nimport { Swatch, type SwatchProps } from '../swatch'\n\nexport type ChangeChipProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n> & {\n  /** A leading swatch, e.g. the kind of change. */\n  swatch?: Omit<SwatchProps, 'size'>\n  /** What changed, e.g. an area's name. */\n  label?: React.ReactNode\n  /** How much it changed. */\n  delta?: {\n    direction: 'up' | 'down'\n    value: React.ReactNode\n    /** Text color for the arrow and value. Defaults to the primary color. */\n    color?: string\n  }\n  /** Trailing text when there is no delta to show, e.g. an em dash. */\n  placeholder?: React.ReactNode\n  /** A full description for assistive tech, when the visible text is terse. */\n  srLabel?: string\n}\n\n/**\n * A compact chip for one change: an optional swatch, a label and a delta.\n * It is a button, so it can open a popover with the details; wrap it in a\n * `Popover` (it forwards its ref and handlers).\n */\nexport const ChangeChip = forwardRef<HTMLButtonElement, ChangeChipProps>(\n  (\n    { swatch, label, delta, placeholder, srLabel, className, ...props },\n    ref\n  ) => {\n    const Arrow = delta?.direction === 'down' ? ArrowDownIcon : ArrowUpIcon\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type=\"button\"\n        className={cx(\n          'inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors hover:bg-j2-gray-2',\n          className\n        )}\n      >\n        {swatch && <Swatch {...swatch} size={12} />}\n        {label && <span>{label}</span>}\n        {delta && (\n          <span\n            className=\"inline-flex items-center gap-0.5 font-medium\"\n            style={{ color: delta.color ?? 'var(--j2-color-primary)' }}\n          >\n            <Arrow size={11} weight=\"bold\" aria-hidden />\n            {delta.value}\n          </span>\n        )}\n        {!delta && placeholder && (\n          <span className=\"text-j2-text-secondary\">{placeholder}</span>\n        )}\n        {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n      </button>\n    )\n  }\n)\nChangeChip.displayName = 'ChangeChip'\n"],"mappings":";;;;;;;;;;;AAgCA,IAAa,aAAa,YAEtB,EAAE,QAAQ,OAAO,OAAO,aAAa,SAAS,WAAW,GAAG,SAC5D,QACG;CACH,MAAM,QAAQ,OAAO,cAAc,SAAS,gBAAgB;CAC5D,OACE,qBAAC,UAAD;EACE,GAAI;EACC;EACL,MAAK;EACL,WAAW,GACT,mNACA,SACF;EAPF,UAAA;GASG,UAAU,oBAAC,QAAD;IAAQ,GAAI;IAAQ,MAAM;GAAK,CAAA;GACzC,SAAS,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;GAC5B,SACC,qBAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,OAAO,MAAM,SAAS,0BAA0B;IAF3D,UAAA,CAIE,oBAAC,OAAD;KAAO,MAAM;KAAI,QAAO;KAAO,eAAA;IAAa,CAAA,GAC3C,MAAM,KACH;;GAEP,CAAC,SAAS,eACT,oBAAC,QAAD;IAAM,WAAU;IAA0B,UAAA;GAAkB,CAAA;GAE7D,WAAW,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAc,CAAA;EAC/C;;AAEZ,CACF;AACA,WAAW,cAAc"}

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

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

package/dist/src/components/collapse/Collapse.cjs

@@ -25,7 +25,8 @@ var stateConfig = {
 		color: "var(--j2-color-error-text)"
 	}
 };
-var Collapse = ({ state = "default", showIcon = false, className, items, ...props }) => {
+var Collapse = ({ state = "default", showIcon = false, variant = "default", className, items, ...props }) => {
+	const isSection = variant === "section";
 	const { className: stateClass, Icon, color } = stateConfig[state];
 	const icon = react$1.useMemo(() => {
 		if (!showIcon) return null;
@@ -43,9 +44,15 @@ var Collapse = ({ state = "default", showIcon = false, className, items, ...prop
 		}));
 	}, [items, icon]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Collapse, {
+		ghost: isSection || void 0,
+		expandIconPlacement: isSection ? "end" : void 0,
 		...props,
 		items: itemsWithIcon,
-		className: [stateClass, className].filter(Boolean).join(" "),
+		className: [
+			stateClass,
+			isSection && require_Collapse_module.default.section,
+			className
+		].filter(Boolean).join(" "),
 		expandIcon: ({ isActive }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.CaretDownIcon, {
 			size: 14,
 			style: { transform: `rotate(${isActive ? 0 : -90}deg)` }

package/dist/src/components/collapse/Collapse.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.cjs","names":["styles","InfoIcon","WarningCircleIcon","XCircleIcon","React","_Fragment","AntdCollapse","CaretDownIcon"],"sources":["../../../../src/components/collapse/Collapse.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Collapse as AntdCollapse, CollapseProps } from 'antd'\nimport {\n  CaretDownIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport styles from './Collapse.module.css'\n\nexport type CollapseState = 'default' | 'warning' | 'error'\n\nexport type Props = Expand<CollapseProps> & {\n  state?: CollapseState\n  showIcon?: boolean\n}\n\nconst stateConfig: Record<\n  CollapseState,\n  { className: string; Icon: React.ElementType; color: string }\n> = {\n  default: {\n    className: styles.default,\n    Icon: InfoIcon,\n    color: 'var(--j2-color-text)',\n  },\n  warning: {\n    className: styles.warning,\n    Icon: WarningCircleIcon,\n    color: 'var(--j2-color-warning-text)',\n  },\n  error: {\n    className: styles.error,\n    Icon: XCircleIcon,\n    color: 'var(--j2-color-error-text)',\n  },\n}\n\nconst Collapse = ({\n  state = 'default',\n  showIcon = false,\n  className,\n  items,\n  ...props\n}: Props) => {\n  const { className: stateClass, Icon, color } = stateConfig[state]\n\n  const icon = React.useMemo(() => {\n    if (!showIcon) return null\n    return <Icon size={14} fill={color} style={{ flexShrink: 0 }} />\n  }, [state, showIcon])\n\n  const itemsWithIcon = React.useMemo(() => {\n    if (!icon || !items) return items\n    return (items as NonNullable<CollapseProps['items']>).map((item) => ({\n      ...item,\n      label: (\n        <>\n          {icon}\n          {item.label}\n        </>\n      ),\n    }))\n  }, [items, icon])\n\n  return (\n    <AntdCollapse\n      {...props}\n      items={itemsWithIcon}\n      className={[stateClass, className].filter(Boolean).join(' ')}\n      expandIcon={({ isActive }) => (\n        <CaretDownIcon\n          size={14}\n          style={{ transform: `rotate(${isActive ? 0 : -90}deg)` }}\n        />\n      )}\n    />\n  )\n}\n\nexport { Collapse }\n"],"mappings":";;;;;;;;;;AAiBA,IAAM,cAGF;CACF,SAAS;EACP,WAAWA,wBAAAA,QAAO;EAClB,MAAMC,sBAAAA;EACN,OAAO;CACT;CACA,SAAS;EACP,WAAWD,wBAAAA,QAAO;EAClB,MAAME,sBAAAA;EACN,OAAO;CACT;CACA,OAAO;EACL,WAAWF,wBAAAA,QAAO;EAClB,MAAMG,sBAAAA;EACN,OAAO;CACT;AACF;AAEA,IAAM,YAAY,EAChB,QAAQ,WACR,WAAW,OACX,WACA,OACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,YAAY,MAAM,UAAU,YAAY;CAE3D,MAAM,OAAOC,QAAM,cAAc;EAC/B,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAM,MAAM;GAAI,MAAM;GAAO,OAAO,EAAE,YAAY,EAAE;EAAI,CAAA;CACjE,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgBA,QAAM,cAAc;EACxC,IAAI,CAAC,QAAQ,CAAC,OAAO,OAAO;EAC5B,OAAQ,MAA8C,KAAK,UAAU;GACnE,GAAG;GACH,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACG,MACA,KAAK,KACN,EAAA,CAAA;EAEN,EAAE;CACJ,GAAG,CAAC,OAAO,IAAI,CAAC;CAEhB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,UAAD;EACE,GAAI;EACJ,OAAO;EACP,WAAW,CAAC,YAAY,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC3D,aAAa,EAAE,eACb,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD;GACE,MAAM;GACN,OAAO,EAAE,WAAW,UAAU,WAAW,IAAI,IAAI,MAAM;EACxD,CAAA;CAEJ,CAAA;AAEL"}
+{"version":3,"file":"Collapse.cjs","names":["styles","InfoIcon","WarningCircleIcon","XCircleIcon","React","_Fragment","AntdCollapse","CaretDownIcon"],"sources":["../../../../src/components/collapse/Collapse.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Collapse as AntdCollapse, CollapseProps } from 'antd'\nimport {\n  CaretDownIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport styles from './Collapse.module.css'\n\nexport type CollapseState = 'default' | 'warning' | 'error'\n\nexport type Props = Expand<CollapseProps> & {\n  state?: CollapseState\n  showIcon?: boolean\n  /**\n   * `'section'`: stacked section headers for grouping content inside a\n   * panel. A compact gray header band with a caption label and the caret at\n   * the end, and a flush body so the content draws its own edges.\n   */\n  variant?: 'default' | 'section'\n}\n\nconst stateConfig: Record<\n  CollapseState,\n  { className: string; Icon: React.ElementType; color: string }\n> = {\n  default: {\n    className: styles.default,\n    Icon: InfoIcon,\n    color: 'var(--j2-color-text)',\n  },\n  warning: {\n    className: styles.warning,\n    Icon: WarningCircleIcon,\n    color: 'var(--j2-color-warning-text)',\n  },\n  error: {\n    className: styles.error,\n    Icon: XCircleIcon,\n    color: 'var(--j2-color-error-text)',\n  },\n}\n\nconst Collapse = ({\n  state = 'default',\n  showIcon = false,\n  variant = 'default',\n  className,\n  items,\n  ...props\n}: Props) => {\n  const isSection = variant === 'section'\n  const { className: stateClass, Icon, color } = stateConfig[state]\n\n  const icon = React.useMemo(() => {\n    if (!showIcon) return null\n    return <Icon size={14} fill={color} style={{ flexShrink: 0 }} />\n  }, [state, showIcon])\n\n  const itemsWithIcon = React.useMemo(() => {\n    if (!icon || !items) return items\n    return (items as NonNullable<CollapseProps['items']>).map((item) => ({\n      ...item,\n      label: (\n        <>\n          {icon}\n          {item.label}\n        </>\n      ),\n    }))\n  }, [items, icon])\n\n  return (\n    <AntdCollapse\n      ghost={isSection || undefined}\n      expandIconPlacement={isSection ? 'end' : undefined}\n      {...props}\n      items={itemsWithIcon}\n      className={[stateClass, isSection && styles.section, className]\n        .filter(Boolean)\n        .join(' ')}\n      expandIcon={({ isActive }) => (\n        <CaretDownIcon\n          size={14}\n          style={{ transform: `rotate(${isActive ? 0 : -90}deg)` }}\n        />\n      )}\n    />\n  )\n}\n\nexport { Collapse }\n"],"mappings":";;;;;;;;;;AAuBA,IAAM,cAGF;CACF,SAAS;EACP,WAAWA,wBAAAA,QAAO;EAClB,MAAMC,sBAAAA;EACN,OAAO;CACT;CACA,SAAS;EACP,WAAWD,wBAAAA,QAAO;EAClB,MAAME,sBAAAA;EACN,OAAO;CACT;CACA,OAAO;EACL,WAAWF,wBAAAA,QAAO;EAClB,MAAMG,sBAAAA;EACN,OAAO;CACT;AACF;AAEA,IAAM,YAAY,EAChB,QAAQ,WACR,WAAW,OACX,UAAU,WACV,WACA,OACA,GAAG,YACQ;CACX,MAAM,YAAY,YAAY;CAC9B,MAAM,EAAE,WAAW,YAAY,MAAM,UAAU,YAAY;CAE3D,MAAM,OAAOC,QAAM,cAAc;EAC/B,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAM,MAAM;GAAI,MAAM;GAAO,OAAO,EAAE,YAAY,EAAE;EAAI,CAAA;CACjE,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgBA,QAAM,cAAc;EACxC,IAAI,CAAC,QAAQ,CAAC,OAAO,OAAO;EAC5B,OAAQ,MAA8C,KAAK,UAAU;GACnE,GAAG;GACH,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACG,MACA,KAAK,KACN,EAAA,CAAA;EAEN,EAAE;CACJ,GAAG,CAAC,OAAO,IAAI,CAAC;CAEhB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,UAAD;EACE,OAAO,aAAa,KAAA;EACpB,qBAAqB,YAAY,QAAQ,KAAA;EACzC,GAAI;EACJ,OAAO;EACP,WAAW;GAAC;GAAY,aAAaN,wBAAAA,QAAO;GAAS;EAAS,CAAC,CAC5D,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,aAAa,EAAE,eACb,iBAAA,GAAA,kBAAA,IAAA,CAACO,sBAAAA,eAAD;GACE,MAAM;GACN,OAAO,EAAE,WAAW,UAAU,WAAW,IAAI,IAAI,MAAM;EACxD,CAAA;CAEJ,CAAA;AAEL"}

package/dist/src/components/collapse/Collapse.d.ts

@@ -4,6 +4,12 @@ export type CollapseState = 'default' | 'warning' | 'error';
 export type Props = Expand<CollapseProps> & {
     state?: CollapseState;
     showIcon?: boolean;
+    /**
+     * `'section'`: stacked section headers for grouping content inside a
+     * panel. A compact gray header band with a caption label and the caret at
+     * the end, and a flush body so the content draws its own edges.
+     */
+    variant?: 'default' | 'section';
 };
-declare const Collapse: ({ state, showIcon, className, items, ...props }: Props) => React.JSX.Element;
+declare const Collapse: ({ state, showIcon, variant, className, items, ...props }: Props) => React.JSX.Element;
 export { Collapse };

package/dist/src/components/collapse/Collapse.js

@@ -21,7 +21,8 @@ var stateConfig = {
 		color: "var(--j2-color-error-text)"
 	}
 };
-var Collapse$1 = ({ state = "default", showIcon = false, className, items, ...props }) => {
+var Collapse$1 = ({ state = "default", showIcon = false, variant = "default", className, items, ...props }) => {
+	const isSection = variant === "section";
 	const { className: stateClass, Icon, color } = stateConfig[state];
 	const icon = React.useMemo(() => {
 		if (!showIcon) return null;
@@ -39,9 +40,15 @@ var Collapse$1 = ({ state = "default", showIcon = false, className, items, ...pr
 		}));
 	}, [items, icon]);
 	return /* @__PURE__ */ jsx(Collapse, {
+		ghost: isSection || void 0,
+		expandIconPlacement: isSection ? "end" : void 0,
 		...props,
 		items: itemsWithIcon,
-		className: [stateClass, className].filter(Boolean).join(" "),
+		className: [
+			stateClass,
+			isSection && Collapse_module_default.section,
+			className
+		].filter(Boolean).join(" "),
 		expandIcon: ({ isActive }) => /* @__PURE__ */ jsx(CaretDownIcon, {
 			size: 14,
 			style: { transform: `rotate(${isActive ? 0 : -90}deg)` }

package/dist/src/components/collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","names":["styles","Collapse","_Fragment","AntdCollapse"],"sources":["../../../../src/components/collapse/Collapse.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Collapse as AntdCollapse, CollapseProps } from 'antd'\nimport {\n  CaretDownIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport styles from './Collapse.module.css'\n\nexport type CollapseState = 'default' | 'warning' | 'error'\n\nexport type Props = Expand<CollapseProps> & {\n  state?: CollapseState\n  showIcon?: boolean\n}\n\nconst stateConfig: Record<\n  CollapseState,\n  { className: string; Icon: React.ElementType; color: string }\n> = {\n  default: {\n    className: styles.default,\n    Icon: InfoIcon,\n    color: 'var(--j2-color-text)',\n  },\n  warning: {\n    className: styles.warning,\n    Icon: WarningCircleIcon,\n    color: 'var(--j2-color-warning-text)',\n  },\n  error: {\n    className: styles.error,\n    Icon: XCircleIcon,\n    color: 'var(--j2-color-error-text)',\n  },\n}\n\nconst Collapse = ({\n  state = 'default',\n  showIcon = false,\n  className,\n  items,\n  ...props\n}: Props) => {\n  const { className: stateClass, Icon, color } = stateConfig[state]\n\n  const icon = React.useMemo(() => {\n    if (!showIcon) return null\n    return <Icon size={14} fill={color} style={{ flexShrink: 0 }} />\n  }, [state, showIcon])\n\n  const itemsWithIcon = React.useMemo(() => {\n    if (!icon || !items) return items\n    return (items as NonNullable<CollapseProps['items']>).map((item) => ({\n      ...item,\n      label: (\n        <>\n          {icon}\n          {item.label}\n        </>\n      ),\n    }))\n  }, [items, icon])\n\n  return (\n    <AntdCollapse\n      {...props}\n      items={itemsWithIcon}\n      className={[stateClass, className].filter(Boolean).join(' ')}\n      expandIcon={({ isActive }) => (\n        <CaretDownIcon\n          size={14}\n          style={{ transform: `rotate(${isActive ? 0 : -90}deg)` }}\n        />\n      )}\n    />\n  )\n}\n\nexport { Collapse }\n"],"mappings":";;;;;;AAiBA,IAAM,cAGF;CACF,SAAS;EACP,WAAWA,wBAAO;EAClB,MAAM;EACN,OAAO;CACT;CACA,SAAS;EACP,WAAWA,wBAAO;EAClB,MAAM;EACN,OAAO;CACT;CACA,OAAO;EACL,WAAWA,wBAAO;EAClB,MAAM;EACN,OAAO;CACT;AACF;AAEA,IAAMC,cAAY,EAChB,QAAQ,WACR,WAAW,OACX,WACA,OACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,YAAY,MAAM,UAAU,YAAY;CAE3D,MAAM,OAAO,MAAM,cAAc;EAC/B,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,oBAAC,MAAD;GAAM,MAAM;GAAI,MAAM;GAAO,OAAO,EAAE,YAAY,EAAE;EAAI,CAAA;CACjE,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB,MAAM,cAAc;EACxC,IAAI,CAAC,QAAQ,CAAC,OAAO,OAAO;EAC5B,OAAQ,MAA8C,KAAK,UAAU;GACnE,GAAG;GACH,OACE,qBAAAC,YAAA,EAAA,UAAA,CACG,MACA,KAAK,KACN,EAAA,CAAA;EAEN,EAAE;CACJ,GAAG,CAAC,OAAO,IAAI,CAAC;CAEhB,OACE,oBAACC,UAAD;EACE,GAAI;EACJ,OAAO;EACP,WAAW,CAAC,YAAY,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC3D,aAAa,EAAE,eACb,oBAAC,eAAD;GACE,MAAM;GACN,OAAO,EAAE,WAAW,UAAU,WAAW,IAAI,IAAI,MAAM;EACxD,CAAA;CAEJ,CAAA;AAEL"}
+{"version":3,"file":"Collapse.js","names":["styles","Collapse","_Fragment","AntdCollapse"],"sources":["../../../../src/components/collapse/Collapse.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Collapse as AntdCollapse, CollapseProps } from 'antd'\nimport {\n  CaretDownIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport styles from './Collapse.module.css'\n\nexport type CollapseState = 'default' | 'warning' | 'error'\n\nexport type Props = Expand<CollapseProps> & {\n  state?: CollapseState\n  showIcon?: boolean\n  /**\n   * `'section'`: stacked section headers for grouping content inside a\n   * panel. A compact gray header band with a caption label and the caret at\n   * the end, and a flush body so the content draws its own edges.\n   */\n  variant?: 'default' | 'section'\n}\n\nconst stateConfig: Record<\n  CollapseState,\n  { className: string; Icon: React.ElementType; color: string }\n> = {\n  default: {\n    className: styles.default,\n    Icon: InfoIcon,\n    color: 'var(--j2-color-text)',\n  },\n  warning: {\n    className: styles.warning,\n    Icon: WarningCircleIcon,\n    color: 'var(--j2-color-warning-text)',\n  },\n  error: {\n    className: styles.error,\n    Icon: XCircleIcon,\n    color: 'var(--j2-color-error-text)',\n  },\n}\n\nconst Collapse = ({\n  state = 'default',\n  showIcon = false,\n  variant = 'default',\n  className,\n  items,\n  ...props\n}: Props) => {\n  const isSection = variant === 'section'\n  const { className: stateClass, Icon, color } = stateConfig[state]\n\n  const icon = React.useMemo(() => {\n    if (!showIcon) return null\n    return <Icon size={14} fill={color} style={{ flexShrink: 0 }} />\n  }, [state, showIcon])\n\n  const itemsWithIcon = React.useMemo(() => {\n    if (!icon || !items) return items\n    return (items as NonNullable<CollapseProps['items']>).map((item) => ({\n      ...item,\n      label: (\n        <>\n          {icon}\n          {item.label}\n        </>\n      ),\n    }))\n  }, [items, icon])\n\n  return (\n    <AntdCollapse\n      ghost={isSection || undefined}\n      expandIconPlacement={isSection ? 'end' : undefined}\n      {...props}\n      items={itemsWithIcon}\n      className={[stateClass, isSection && styles.section, className]\n        .filter(Boolean)\n        .join(' ')}\n      expandIcon={({ isActive }) => (\n        <CaretDownIcon\n          size={14}\n          style={{ transform: `rotate(${isActive ? 0 : -90}deg)` }}\n        />\n      )}\n    />\n  )\n}\n\nexport { Collapse }\n"],"mappings":";;;;;;AAuBA,IAAM,cAGF;CACF,SAAS;EACP,WAAWA,wBAAO;EAClB,MAAM;EACN,OAAO;CACT;CACA,SAAS;EACP,WAAWA,wBAAO;EAClB,MAAM;EACN,OAAO;CACT;CACA,OAAO;EACL,WAAWA,wBAAO;EAClB,MAAM;EACN,OAAO;CACT;AACF;AAEA,IAAMC,cAAY,EAChB,QAAQ,WACR,WAAW,OACX,UAAU,WACV,WACA,OACA,GAAG,YACQ;CACX,MAAM,YAAY,YAAY;CAC9B,MAAM,EAAE,WAAW,YAAY,MAAM,UAAU,YAAY;CAE3D,MAAM,OAAO,MAAM,cAAc;EAC/B,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,oBAAC,MAAD;GAAM,MAAM;GAAI,MAAM;GAAO,OAAO,EAAE,YAAY,EAAE;EAAI,CAAA;CACjE,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB,MAAM,cAAc;EACxC,IAAI,CAAC,QAAQ,CAAC,OAAO,OAAO;EAC5B,OAAQ,MAA8C,KAAK,UAAU;GACnE,GAAG;GACH,OACE,qBAAAC,YAAA,EAAA,UAAA,CACG,MACA,KAAK,KACN,EAAA,CAAA;EAEN,EAAE;CACJ,GAAG,CAAC,OAAO,IAAI,CAAC;CAEhB,OACE,oBAACC,UAAD;EACE,OAAO,aAAa,KAAA;EACpB,qBAAqB,YAAY,QAAQ,KAAA;EACzC,GAAI;EACJ,OAAO;EACP,WAAW;GAAC;GAAY,aAAaH,wBAAO;GAAS;EAAS,CAAC,CAC5D,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,aAAa,EAAE,eACb,oBAAC,eAAD;GACE,MAAM;GACN,OAAO,EAAE,WAAW,UAAU,WAAW,IAAI,IAAI,MAAM;EACxD,CAAA;CAEJ,CAAA;AAEL"}

package/dist/src/components/collapse/Collapse.module.css.cjs

@@ -1,14 +1,17 @@
 //#region src/components/collapse/Collapse.module.css
-var warning = "_warning_1t61q_2";
-var error = "_error_1t61q_3";
+var warning = "_warning_4jnb6_2";
+var error = "_error_4jnb6_3";
+var section = "_section_4jnb6_51";
 var Collapse_module_default = {
-	"default": "_default_1t61q_1",
+	"default": "_default_4jnb6_1",
 	warning,
-	error
+	error,
+	section
 };
 //#endregion
 exports.default = Collapse_module_default;
 exports.error = error;
+exports.section = section;
 exports.warning = warning;
 
 //# sourceMappingURL=Collapse.module.css.cjs.map

package/dist/src/components/collapse/Collapse.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.module.css.cjs","names":[],"sources":["../../../../src/components/collapse/Collapse.module.css"],"sourcesContent":[".default :global(.ant-collapse-title),\n.warning :global(.ant-collapse-title),\n.error :global(.ant-collapse-title) {\n  display: flex;\n  align-items: center;\n  gap: var(--j2-size-xs);\n}\n\n/* Warning state */\n.warning:global(.ant-collapse) {\n  border-color: var(--j2-color-warning-border);\n  background-color: var(--j2-color-warning-bg);\n}\n\n.warning :global(.ant-collapse-item) {\n  border-bottom-color: var(--j2-color-warning-border) !important;\n}\n\n.warning :global(.ant-collapse-panel) {\n  border-top-color: var(--j2-color-warning-border) !important;\n}\n\n.warning :global(.ant-collapse-header) {\n  color: var(--j2-color-text) !important;\n}\n\n/* Error state */\n.error:global(.ant-collapse) {\n  border-color: var(--j2-color-error-border);\n  background-color: var(--j2-color-error-bg);\n}\n\n.error :global(.ant-collapse-item) {\n  border-bottom-color: var(--j2-color-error-border) !important;\n}\n\n.error :global(.ant-collapse-panel) {\n  border-top-color: var(--j2-color-error-border) !important;\n}\n\n.error :global(.ant-collapse-header) {\n  color: var(--j2-color-text) !important;\n}\n"],"mappings":""}
+{"version":3,"file":"Collapse.module.css.cjs","names":[],"sources":["../../../../src/components/collapse/Collapse.module.css"],"sourcesContent":[".default :global(.ant-collapse-title),\n.warning :global(.ant-collapse-title),\n.error :global(.ant-collapse-title) {\n  display: flex;\n  align-items: center;\n  gap: var(--j2-size-xs);\n}\n\n/* Warning state */\n.warning:global(.ant-collapse) {\n  border-color: var(--j2-color-warning-border);\n  background-color: var(--j2-color-warning-bg);\n}\n\n.warning :global(.ant-collapse-item) {\n  border-bottom-color: var(--j2-color-warning-border) !important;\n}\n\n.warning :global(.ant-collapse-panel) {\n  border-top-color: var(--j2-color-warning-border) !important;\n}\n\n.warning :global(.ant-collapse-header) {\n  color: var(--j2-color-text) !important;\n}\n\n/* Error state */\n.error:global(.ant-collapse) {\n  border-color: var(--j2-color-error-border);\n  background-color: var(--j2-color-error-bg);\n}\n\n.error :global(.ant-collapse-item) {\n  border-bottom-color: var(--j2-color-error-border) !important;\n}\n\n.error :global(.ant-collapse-panel) {\n  border-top-color: var(--j2-color-error-border) !important;\n}\n\n.error :global(.ant-collapse-header) {\n  color: var(--j2-color-text) !important;\n}\n\n/*\n * Section variant\n * A 28px gray band with a rule above and below, a caption label, and the\n * caret at the end. The body is flush and white so its content (a table, a\n * list) draws its own edges.\n */\n.section:global(.ant-collapse) > :global(.ant-collapse-item) {\n  border-bottom: 0;\n}\n\n.section :global(.ant-collapse-header) {\n  min-height: 28px;\n  padding: 0 12px !important;\n  align-items: center !important;\n  background: var(--j2-gray-2);\n  border-top: 1px solid var(--j2-color-border-secondary);\n  border-bottom: 1px solid var(--j2-color-border-secondary);\n  border-radius: 0 !important;\n}\n\n.section :global(.ant-collapse-item + .ant-collapse-item .ant-collapse-header) {\n  border-top: 0;\n}\n\n.section :global(.ant-collapse-title) {\n  display: flex;\n  align-items: center;\n  font-size: var(--j2-font-size-xs);\n  line-height: var(--j2-line-height-xs);\n  font-weight: 500;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--j2-color-text-secondary);\n}\n\n.section :global(.ant-collapse-expand-icon) {\n  height: auto !important;\n  padding-inline-start: 8px !important;\n  color: var(--j2-color-text-secondary);\n}\n\n.section :global(.ant-collapse-body) {\n  padding: 0 !important;\n  background: white;\n}\n\n.section :global(.ant-collapse-panel) {\n  border-bottom: 1px solid var(--j2-color-border-secondary);\n}\n"],"mappings":""}

package/dist/src/components/collapse/Collapse.module.css.js

@@ -1,12 +1,14 @@
 //#region src/components/collapse/Collapse.module.css
-var warning = "_warning_1t61q_2";
-var error = "_error_1t61q_3";
+var warning = "_warning_4jnb6_2";
+var error = "_error_4jnb6_3";
+var section = "_section_4jnb6_51";
 var Collapse_module_default = {
-	"default": "_default_1t61q_1",
+	"default": "_default_4jnb6_1",
 	warning,
-	error
+	error,
+	section
 };
 //#endregion
-export { Collapse_module_default as default, error, warning };
+export { Collapse_module_default as default, error, section, warning };
 
 //# sourceMappingURL=Collapse.module.css.js.map

package/dist/src/components/collapse/Collapse.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.module.css.js","names":[],"sources":["../../../../src/components/collapse/Collapse.module.css"],"sourcesContent":[".default :global(.ant-collapse-title),\n.warning :global(.ant-collapse-title),\n.error :global(.ant-collapse-title) {\n  display: flex;\n  align-items: center;\n  gap: var(--j2-size-xs);\n}\n\n/* Warning state */\n.warning:global(.ant-collapse) {\n  border-color: var(--j2-color-warning-border);\n  background-color: var(--j2-color-warning-bg);\n}\n\n.warning :global(.ant-collapse-item) {\n  border-bottom-color: var(--j2-color-warning-border) !important;\n}\n\n.warning :global(.ant-collapse-panel) {\n  border-top-color: var(--j2-color-warning-border) !important;\n}\n\n.warning :global(.ant-collapse-header) {\n  color: var(--j2-color-text) !important;\n}\n\n/* Error state */\n.error:global(.ant-collapse) {\n  border-color: var(--j2-color-error-border);\n  background-color: var(--j2-color-error-bg);\n}\n\n.error :global(.ant-collapse-item) {\n  border-bottom-color: var(--j2-color-error-border) !important;\n}\n\n.error :global(.ant-collapse-panel) {\n  border-top-color: var(--j2-color-error-border) !important;\n}\n\n.error :global(.ant-collapse-header) {\n  color: var(--j2-color-text) !important;\n}\n"],"mappings":""}
+{"version":3,"file":"Collapse.module.css.js","names":[],"sources":["../../../../src/components/collapse/Collapse.module.css"],"sourcesContent":[".default :global(.ant-collapse-title),\n.warning :global(.ant-collapse-title),\n.error :global(.ant-collapse-title) {\n  display: flex;\n  align-items: center;\n  gap: var(--j2-size-xs);\n}\n\n/* Warning state */\n.warning:global(.ant-collapse) {\n  border-color: var(--j2-color-warning-border);\n  background-color: var(--j2-color-warning-bg);\n}\n\n.warning :global(.ant-collapse-item) {\n  border-bottom-color: var(--j2-color-warning-border) !important;\n}\n\n.warning :global(.ant-collapse-panel) {\n  border-top-color: var(--j2-color-warning-border) !important;\n}\n\n.warning :global(.ant-collapse-header) {\n  color: var(--j2-color-text) !important;\n}\n\n/* Error state */\n.error:global(.ant-collapse) {\n  border-color: var(--j2-color-error-border);\n  background-color: var(--j2-color-error-bg);\n}\n\n.error :global(.ant-collapse-item) {\n  border-bottom-color: var(--j2-color-error-border) !important;\n}\n\n.error :global(.ant-collapse-panel) {\n  border-top-color: var(--j2-color-error-border) !important;\n}\n\n.error :global(.ant-collapse-header) {\n  color: var(--j2-color-text) !important;\n}\n\n/*\n * Section variant\n * A 28px gray band with a rule above and below, a caption label, and the\n * caret at the end. The body is flush and white so its content (a table, a\n * list) draws its own edges.\n */\n.section:global(.ant-collapse) > :global(.ant-collapse-item) {\n  border-bottom: 0;\n}\n\n.section :global(.ant-collapse-header) {\n  min-height: 28px;\n  padding: 0 12px !important;\n  align-items: center !important;\n  background: var(--j2-gray-2);\n  border-top: 1px solid var(--j2-color-border-secondary);\n  border-bottom: 1px solid var(--j2-color-border-secondary);\n  border-radius: 0 !important;\n}\n\n.section :global(.ant-collapse-item + .ant-collapse-item .ant-collapse-header) {\n  border-top: 0;\n}\n\n.section :global(.ant-collapse-title) {\n  display: flex;\n  align-items: center;\n  font-size: var(--j2-font-size-xs);\n  line-height: var(--j2-line-height-xs);\n  font-weight: 500;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--j2-color-text-secondary);\n}\n\n.section :global(.ant-collapse-expand-icon) {\n  height: auto !important;\n  padding-inline-start: 8px !important;\n  color: var(--j2-color-text-secondary);\n}\n\n.section :global(.ant-collapse-body) {\n  padding: 0 !important;\n  background: white;\n}\n\n.section :global(.ant-collapse-panel) {\n  border-bottom: 1px solid var(--j2-color-border-secondary);\n}\n"],"mappings":""}

package/dist/src/components/dropdown/Dropdown.cjs

@@ -26,12 +26,17 @@ var Target = ({ label, type, disabled, icon, className }) => {
 		children: icon ? label : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelWithCaret, { label })
 	});
 };
-var Dropdown = ({ label, type, icon, menu, menuType = "default", targetClassName, ...props }) => {
+var Dropdown = ({ label, type, icon, menu, menuType = "default", targetClassName, children, ...props }) => {
 	let menuProp = menu;
 	if (menuType === "slim" && typeof menu === "object") menuProp = {
 		...menu,
 		className: (0, classnames.default)(menu.className, "j2-dropdown-slim-menu")
 	};
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Dropdown, {
+		...props,
+		menu: menuProp,
+		children
+	});
 	if (type === "twofold") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Dropdown.Button, {
 		...props,
 		menu: menuProp,

package/dist/src/components/dropdown/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","names":["Typography","CaretDownIcon","cx","_Fragment","Button","AntdDropdown"],"sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntdDropdown, DropdownProps, Typography } from 'antd'\nimport cx from 'classnames'\nimport { Button } from '../button'\nimport { CaretDownIcon } from '@phosphor-icons/react'\nimport './Dropdown.css'\n\nconst { Link } = Typography\n\nexport type Props = DropdownProps & {\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  label?: string\n  icon?: React.ReactNode\n  menuType?: 'default' | 'slim'\n  targetClassName?: string\n}\n\nexport type TargetProps = {\n  label?: string\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  disabled?: boolean\n  icon?: React.ReactNode\n  className?: string\n}\n\nconst LabelWithCaret = ({ label }: { label: string | undefined }) => (\n  <div className=\"flex items-center gap-2\">\n    {label}\n    <CaretDownIcon weight=\"regular\" />\n  </div>\n)\n\nconst Target = ({ label, type, disabled, icon, className }: TargetProps) => {\n  if (type === 'basic-inline') {\n    return (\n      <Link\n        disabled={disabled}\n        className={cx('flex items-center gap-1', className)}\n      >\n        {icon ? (\n          <>\n            {icon}\n            {label}\n          </>\n        ) : (\n          <LabelWithCaret label={label} />\n        )}\n      </Link>\n    )\n  }\n\n  return (\n    <Button disabled={disabled} icon={icon} className={className}>\n      {icon ? label : <LabelWithCaret label={label} />}\n    </Button>\n  )\n}\n\nconst Dropdown = ({\n  label,\n  type,\n  icon,\n  menu,\n  menuType = 'default',\n  targetClassName,\n  ...props\n}: Props) => {\n  let menuProp = menu\n\n  if (menuType === 'slim' && typeof menu === 'object') {\n    menuProp = {\n      ...menu,\n      className: cx(menu.className, 'j2-dropdown-slim-menu'),\n    }\n  }\n\n  if (type === 'twofold') {\n    return (\n      <AntdDropdown.Button {...props} menu={menuProp}>\n        {icon ? (\n          <>\n            {icon} {label}\n          </>\n        ) : (\n          label\n        )}\n      </AntdDropdown.Button>\n    )\n  }\n\n  return (\n    <AntdDropdown {...props} menu={menuProp}>\n      <div>\n        <Target\n          label={label}\n          type={type}\n          disabled={props.disabled}\n          icon={icon}\n          className={targetClassName}\n        />\n      </div>\n    </AntdDropdown>\n  )\n}\n\nexport { Dropdown }\n"],"mappings":";;;;;;;;;;AAMA,IAAM,EAAE,SAASA,KAAAA;AAkBjB,IAAM,kBAAkB,EAAE,YACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;CAAK,WAAU;CAAf,UAAA,CACG,OACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD,EAAe,QAAO,UAAW,CAAA,CAC9B;;AAGP,IAAM,UAAU,EAAE,OAAO,MAAM,UAAU,MAAM,gBAA6B;CAC1E,IAAI,SAAS,gBACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EACY;EACV,YAAA,GAAWC,WAAAA,QAAAA,CAAG,2BAA2B,SAAS;EAEjD,UAAA,OACC,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACG,MACA,KACD,EAAA,CAAA,IAEF,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD,EAAuB,MAAQ,CAAA;CAE7B,CAAA;CAIV,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;EAAkB;EAAgB;EAAiB;EAChD,UAAA,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD,EAAuB,MAAQ,CAAA;CACzC,CAAA;AAEZ;AAEA,IAAM,YAAY,EAChB,OACA,MACA,MACA,MACA,WAAW,WACX,iBACA,GAAG,YACQ;CACX,IAAI,WAAW;CAEf,IAAI,aAAa,UAAU,OAAO,SAAS,UACzC,WAAW;EACT,GAAG;EACH,YAAA,GAAWF,WAAAA,QAAAA,CAAG,KAAK,WAAW,uBAAuB;CACvD;CAGF,IAAI,SAAS,WACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACG,KAAAA,SAAa,QAAd;EAAqB,GAAI;EAAO,MAAM;EACnC,UAAA,OACC,iBAAA,GAAA,kBAAA,KAAA,CAAAF,kBAAAA,UAAA,EAAA,UAAA;GACG;GAAK;GAAE;EACR,EAAA,CAAA,IAEF;CAEiB,CAAA;CAIzB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,KAAAA,UAAD;EAAc,GAAI;EAAO,MAAM;EAC7B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACS;GACD;GACN,UAAU,MAAM;GACV;GACN,WAAW;EACZ,CAAA,EACE,CAAA;CACO,CAAA;AAElB"}
+{"version":3,"file":"Dropdown.cjs","names":["Typography","CaretDownIcon","cx","_Fragment","Button","AntdDropdown"],"sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntdDropdown, DropdownProps, Typography } from 'antd'\nimport cx from 'classnames'\nimport { Button } from '../button'\nimport { CaretDownIcon } from '@phosphor-icons/react'\nimport './Dropdown.css'\n\nconst { Link } = Typography\n\nexport type Props = DropdownProps & {\n  /**\n   * A custom trigger. When given, it opens the menu in place of the built-in\n   * target, and `type`, `label`, `icon` and `targetClassName` are ignored.\n   * It must accept a ref and mouse handlers (a DOM element or a component\n   * that forwards them), as with antd's Dropdown.\n   */\n  children?: React.ReactNode\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  label?: string\n  icon?: React.ReactNode\n  menuType?: 'default' | 'slim'\n  targetClassName?: string\n}\n\nexport type TargetProps = {\n  label?: string\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  disabled?: boolean\n  icon?: React.ReactNode\n  className?: string\n}\n\nconst LabelWithCaret = ({ label }: { label: string | undefined }) => (\n  <div className=\"flex items-center gap-2\">\n    {label}\n    <CaretDownIcon weight=\"regular\" />\n  </div>\n)\n\nconst Target = ({ label, type, disabled, icon, className }: TargetProps) => {\n  if (type === 'basic-inline') {\n    return (\n      <Link\n        disabled={disabled}\n        className={cx('flex items-center gap-1', className)}\n      >\n        {icon ? (\n          <>\n            {icon}\n            {label}\n          </>\n        ) : (\n          <LabelWithCaret label={label} />\n        )}\n      </Link>\n    )\n  }\n\n  return (\n    <Button disabled={disabled} icon={icon} className={className}>\n      {icon ? label : <LabelWithCaret label={label} />}\n    </Button>\n  )\n}\n\nconst Dropdown = ({\n  label,\n  type,\n  icon,\n  menu,\n  menuType = 'default',\n  targetClassName,\n  children,\n  ...props\n}: Props) => {\n  let menuProp = menu\n\n  if (menuType === 'slim' && typeof menu === 'object') {\n    menuProp = {\n      ...menu,\n      className: cx(menu.className, 'j2-dropdown-slim-menu'),\n    }\n  }\n\n  if (children) {\n    return (\n      <AntdDropdown {...props} menu={menuProp}>\n        {children}\n      </AntdDropdown>\n    )\n  }\n\n  if (type === 'twofold') {\n    return (\n      <AntdDropdown.Button {...props} menu={menuProp}>\n        {icon ? (\n          <>\n            {icon} {label}\n          </>\n        ) : (\n          label\n        )}\n      </AntdDropdown.Button>\n    )\n  }\n\n  return (\n    <AntdDropdown {...props} menu={menuProp}>\n      <div>\n        <Target\n          label={label}\n          type={type}\n          disabled={props.disabled}\n          icon={icon}\n          className={targetClassName}\n        />\n      </div>\n    </AntdDropdown>\n  )\n}\n\nexport { Dropdown }\n"],"mappings":";;;;;;;;;;AAMA,IAAM,EAAE,SAASA,KAAAA;AAyBjB,IAAM,kBAAkB,EAAE,YACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;CAAK,WAAU;CAAf,UAAA,CACG,OACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD,EAAe,QAAO,UAAW,CAAA,CAC9B;;AAGP,IAAM,UAAU,EAAE,OAAO,MAAM,UAAU,MAAM,gBAA6B;CAC1E,IAAI,SAAS,gBACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EACY;EACV,YAAA,GAAWC,WAAAA,QAAAA,CAAG,2BAA2B,SAAS;EAEjD,UAAA,OACC,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACG,MACA,KACD,EAAA,CAAA,IAEF,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD,EAAuB,MAAQ,CAAA;CAE7B,CAAA;CAIV,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;EAAkB;EAAgB;EAAiB;EAChD,UAAA,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD,EAAuB,MAAQ,CAAA;CACzC,CAAA;AAEZ;AAEA,IAAM,YAAY,EAChB,OACA,MACA,MACA,MACA,WAAW,WACX,iBACA,UACA,GAAG,YACQ;CACX,IAAI,WAAW;CAEf,IAAI,aAAa,UAAU,OAAO,SAAS,UACzC,WAAW;EACT,GAAG;EACH,YAAA,GAAWF,WAAAA,QAAAA,CAAG,KAAK,WAAW,uBAAuB;CACvD;CAGF,IAAI,UACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACG,KAAAA,UAAD;EAAc,GAAI;EAAO,MAAM;EAC5B;CACW,CAAA;CAIlB,IAAI,SAAS,WACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,SAAa,QAAd;EAAqB,GAAI;EAAO,MAAM;EACnC,UAAA,OACC,iBAAA,GAAA,kBAAA,KAAA,CAAAF,kBAAAA,UAAA,EAAA,UAAA;GACG;GAAK;GAAE;EACR,EAAA,CAAA,IAEF;CAEiB,CAAA;CAIzB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,KAAAA,UAAD;EAAc,GAAI;EAAO,MAAM;EAC7B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACS;GACD;GACN,UAAU,MAAM;GACV;GACN,WAAW;EACZ,CAAA,EACE,CAAA;CACO,CAAA;AAElB"}

package/dist/src/components/dropdown/Dropdown.d.ts

@@ -1,5 +1,12 @@
 import { DropdownProps } from 'antd';
 export type Props = DropdownProps & {
+    /**
+     * A custom trigger. When given, it opens the menu in place of the built-in
+     * target, and `type`, `label`, `icon` and `targetClassName` are ignored.
+     * It must accept a ref and mouse handlers (a DOM element or a component
+     * that forwards them), as with antd's Dropdown.
+     */
+    children?: React.ReactNode;
     type?: 'basic' | 'basic-inline' | 'twofold';
     label?: string;
     icon?: React.ReactNode;
@@ -13,5 +20,5 @@ export type TargetProps = {
     icon?: React.ReactNode;
     className?: string;
 };
-declare const Dropdown: ({ label, type, icon, menu, menuType, targetClassName, ...props }: Props) => import('react').JSX.Element;
+declare const Dropdown: ({ label, type, icon, menu, menuType, targetClassName, children, ...props }: Props) => import('react').JSX.Element;
 export { Dropdown };

package/dist/src/components/dropdown/Dropdown.js

@@ -23,12 +23,17 @@ var Target = ({ label, type, disabled, icon, className }) => {
 		children: icon ? label : /* @__PURE__ */ jsx(LabelWithCaret, { label })
 	});
 };
-var Dropdown$1 = ({ label, type, icon, menu, menuType = "default", targetClassName, ...props }) => {
+var Dropdown$1 = ({ label, type, icon, menu, menuType = "default", targetClassName, children, ...props }) => {
 	let menuProp = menu;
 	if (menuType === "slim" && typeof menu === "object") menuProp = {
 		...menu,
 		className: cx(menu.className, "j2-dropdown-slim-menu")
 	};
+	if (children) return /* @__PURE__ */ jsx(Dropdown, {
+		...props,
+		menu: menuProp,
+		children
+	});
 	if (type === "twofold") return /* @__PURE__ */ jsx(Dropdown.Button, {
 		...props,
 		menu: menuProp,

package/dist/src/components/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":["_Fragment","Button","Dropdown","AntdDropdown"],"sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntdDropdown, DropdownProps, Typography } from 'antd'\nimport cx from 'classnames'\nimport { Button } from '../button'\nimport { CaretDownIcon } from '@phosphor-icons/react'\nimport './Dropdown.css'\n\nconst { Link } = Typography\n\nexport type Props = DropdownProps & {\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  label?: string\n  icon?: React.ReactNode\n  menuType?: 'default' | 'slim'\n  targetClassName?: string\n}\n\nexport type TargetProps = {\n  label?: string\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  disabled?: boolean\n  icon?: React.ReactNode\n  className?: string\n}\n\nconst LabelWithCaret = ({ label }: { label: string | undefined }) => (\n  <div className=\"flex items-center gap-2\">\n    {label}\n    <CaretDownIcon weight=\"regular\" />\n  </div>\n)\n\nconst Target = ({ label, type, disabled, icon, className }: TargetProps) => {\n  if (type === 'basic-inline') {\n    return (\n      <Link\n        disabled={disabled}\n        className={cx('flex items-center gap-1', className)}\n      >\n        {icon ? (\n          <>\n            {icon}\n            {label}\n          </>\n        ) : (\n          <LabelWithCaret label={label} />\n        )}\n      </Link>\n    )\n  }\n\n  return (\n    <Button disabled={disabled} icon={icon} className={className}>\n      {icon ? label : <LabelWithCaret label={label} />}\n    </Button>\n  )\n}\n\nconst Dropdown = ({\n  label,\n  type,\n  icon,\n  menu,\n  menuType = 'default',\n  targetClassName,\n  ...props\n}: Props) => {\n  let menuProp = menu\n\n  if (menuType === 'slim' && typeof menu === 'object') {\n    menuProp = {\n      ...menu,\n      className: cx(menu.className, 'j2-dropdown-slim-menu'),\n    }\n  }\n\n  if (type === 'twofold') {\n    return (\n      <AntdDropdown.Button {...props} menu={menuProp}>\n        {icon ? (\n          <>\n            {icon} {label}\n          </>\n        ) : (\n          label\n        )}\n      </AntdDropdown.Button>\n    )\n  }\n\n  return (\n    <AntdDropdown {...props} menu={menuProp}>\n      <div>\n        <Target\n          label={label}\n          type={type}\n          disabled={props.disabled}\n          icon={icon}\n          className={targetClassName}\n        />\n      </div>\n    </AntdDropdown>\n  )\n}\n\nexport { Dropdown }\n"],"mappings":";;;;;;;AAMA,IAAM,EAAE,SAAS;AAkBjB,IAAM,kBAAkB,EAAE,YACxB,qBAAC,OAAD;CAAK,WAAU;CAAf,UAAA,CACG,OACD,oBAAC,eAAD,EAAe,QAAO,UAAW,CAAA,CAC9B;;AAGP,IAAM,UAAU,EAAE,OAAO,MAAM,UAAU,MAAM,gBAA6B;CAC1E,IAAI,SAAS,gBACX,OACE,oBAAC,MAAD;EACY;EACV,WAAW,GAAG,2BAA2B,SAAS;EAEjD,UAAA,OACC,qBAAAA,UAAA,EAAA,UAAA,CACG,MACA,KACD,EAAA,CAAA,IAEF,oBAAC,gBAAD,EAAuB,MAAQ,CAAA;CAE7B,CAAA;CAIV,OACE,oBAACC,UAAD;EAAkB;EAAgB;EAAiB;EAChD,UAAA,OAAO,QAAQ,oBAAC,gBAAD,EAAuB,MAAQ,CAAA;CACzC,CAAA;AAEZ;AAEA,IAAMC,cAAY,EAChB,OACA,MACA,MACA,MACA,WAAW,WACX,iBACA,GAAG,YACQ;CACX,IAAI,WAAW;CAEf,IAAI,aAAa,UAAU,OAAO,SAAS,UACzC,WAAW;EACT,GAAG;EACH,WAAW,GAAG,KAAK,WAAW,uBAAuB;CACvD;CAGF,IAAI,SAAS,WACX,OACE,oBAACC,SAAa,QAAd;EAAqB,GAAI;EAAO,MAAM;EACnC,UAAA,OACC,qBAAAH,UAAA,EAAA,UAAA;GACG;GAAK;GAAE;EACR,EAAA,CAAA,IAEF;CAEiB,CAAA;CAIzB,OACE,oBAACG,UAAD;EAAc,GAAI;EAAO,MAAM;EAC7B,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD;GACS;GACD;GACN,UAAU,MAAM;GACV;GACN,WAAW;EACZ,CAAA,EACE,CAAA;CACO,CAAA;AAElB"}
+{"version":3,"file":"Dropdown.js","names":["_Fragment","Button","Dropdown","AntdDropdown"],"sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntdDropdown, DropdownProps, Typography } from 'antd'\nimport cx from 'classnames'\nimport { Button } from '../button'\nimport { CaretDownIcon } from '@phosphor-icons/react'\nimport './Dropdown.css'\n\nconst { Link } = Typography\n\nexport type Props = DropdownProps & {\n  /**\n   * A custom trigger. When given, it opens the menu in place of the built-in\n   * target, and `type`, `label`, `icon` and `targetClassName` are ignored.\n   * It must accept a ref and mouse handlers (a DOM element or a component\n   * that forwards them), as with antd's Dropdown.\n   */\n  children?: React.ReactNode\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  label?: string\n  icon?: React.ReactNode\n  menuType?: 'default' | 'slim'\n  targetClassName?: string\n}\n\nexport type TargetProps = {\n  label?: string\n  type?: 'basic' | 'basic-inline' | 'twofold'\n  disabled?: boolean\n  icon?: React.ReactNode\n  className?: string\n}\n\nconst LabelWithCaret = ({ label }: { label: string | undefined }) => (\n  <div className=\"flex items-center gap-2\">\n    {label}\n    <CaretDownIcon weight=\"regular\" />\n  </div>\n)\n\nconst Target = ({ label, type, disabled, icon, className }: TargetProps) => {\n  if (type === 'basic-inline') {\n    return (\n      <Link\n        disabled={disabled}\n        className={cx('flex items-center gap-1', className)}\n      >\n        {icon ? (\n          <>\n            {icon}\n            {label}\n          </>\n        ) : (\n          <LabelWithCaret label={label} />\n        )}\n      </Link>\n    )\n  }\n\n  return (\n    <Button disabled={disabled} icon={icon} className={className}>\n      {icon ? label : <LabelWithCaret label={label} />}\n    </Button>\n  )\n}\n\nconst Dropdown = ({\n  label,\n  type,\n  icon,\n  menu,\n  menuType = 'default',\n  targetClassName,\n  children,\n  ...props\n}: Props) => {\n  let menuProp = menu\n\n  if (menuType === 'slim' && typeof menu === 'object') {\n    menuProp = {\n      ...menu,\n      className: cx(menu.className, 'j2-dropdown-slim-menu'),\n    }\n  }\n\n  if (children) {\n    return (\n      <AntdDropdown {...props} menu={menuProp}>\n        {children}\n      </AntdDropdown>\n    )\n  }\n\n  if (type === 'twofold') {\n    return (\n      <AntdDropdown.Button {...props} menu={menuProp}>\n        {icon ? (\n          <>\n            {icon} {label}\n          </>\n        ) : (\n          label\n        )}\n      </AntdDropdown.Button>\n    )\n  }\n\n  return (\n    <AntdDropdown {...props} menu={menuProp}>\n      <div>\n        <Target\n          label={label}\n          type={type}\n          disabled={props.disabled}\n          icon={icon}\n          className={targetClassName}\n        />\n      </div>\n    </AntdDropdown>\n  )\n}\n\nexport { Dropdown }\n"],"mappings":";;;;;;;AAMA,IAAM,EAAE,SAAS;AAyBjB,IAAM,kBAAkB,EAAE,YACxB,qBAAC,OAAD;CAAK,WAAU;CAAf,UAAA,CACG,OACD,oBAAC,eAAD,EAAe,QAAO,UAAW,CAAA,CAC9B;;AAGP,IAAM,UAAU,EAAE,OAAO,MAAM,UAAU,MAAM,gBAA6B;CAC1E,IAAI,SAAS,gBACX,OACE,oBAAC,MAAD;EACY;EACV,WAAW,GAAG,2BAA2B,SAAS;EAEjD,UAAA,OACC,qBAAAA,UAAA,EAAA,UAAA,CACG,MACA,KACD,EAAA,CAAA,IAEF,oBAAC,gBAAD,EAAuB,MAAQ,CAAA;CAE7B,CAAA;CAIV,OACE,oBAACC,UAAD;EAAkB;EAAgB;EAAiB;EAChD,UAAA,OAAO,QAAQ,oBAAC,gBAAD,EAAuB,MAAQ,CAAA;CACzC,CAAA;AAEZ;AAEA,IAAMC,cAAY,EAChB,OACA,MACA,MACA,MACA,WAAW,WACX,iBACA,UACA,GAAG,YACQ;CACX,IAAI,WAAW;CAEf,IAAI,aAAa,UAAU,OAAO,SAAS,UACzC,WAAW;EACT,GAAG;EACH,WAAW,GAAG,KAAK,WAAW,uBAAuB;CACvD;CAGF,IAAI,UACF,OACE,oBAACC,UAAD;EAAc,GAAI;EAAO,MAAM;EAC5B;CACW,CAAA;CAIlB,IAAI,SAAS,WACX,OACE,oBAACA,SAAa,QAAd;EAAqB,GAAI;EAAO,MAAM;EACnC,UAAA,OACC,qBAAAH,UAAA,EAAA,UAAA;GACG;GAAK;GAAE;EACR,EAAA,CAAA,IAEF;CAEiB,CAAA;CAIzB,OACE,oBAACG,UAAD;EAAc,GAAI;EAAO,MAAM;EAC7B,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD;GACS;GACD;GACN,UAAU,MAAM;GACV;GACN,WAAW;EACZ,CAAA,EACE,CAAA;CACO,CAAA;AAElB"}

package/dist/src/components/emptyState/EmptyState.cjs

@@ -0,0 +1,39 @@
+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/emptyState/EmptyState.tsx
+/**
+* What a list, table or panel shows when it has nothing to show.
+*/
+var EmptyState = ({ title, description, icon, action, size = "default", className }) => {
+	const compact = size === "compact";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)("flex flex-col items-center justify-center text-center", compact ? "gap-3 px-6 py-8" : "gap-6 py-12", className),
+		children: [
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: "flex text-j2-gray-6",
+				children: icon
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-1",
+				children: [compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "m-0 text-sm font-semibold text-j2-text",
+					children: title
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: "m-0",
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: (0, classnames.default)("m-0", compact ? "max-w-[34ch] text-sm text-j2-text-secondary" : "max-w-md text-j2-primary"),
+					children: description
+				})]
+			}),
+			action
+		]
+	});
+};
+//#endregion
+exports.EmptyState = EmptyState;
+
+//# sourceMappingURL=EmptyState.cjs.map

package/dist/src/components/emptyState/EmptyState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.cjs","names":["cx"],"sources":["../../../../src/components/emptyState/EmptyState.tsx"],"sourcesContent":["import cx from 'classnames'\n\nexport type EmptyStateProps = {\n  /** What is empty, in a few words: \"No results\", \"No changes yet\". */\n  title: React.ReactNode\n  /** Why it is empty, or what to do next. */\n  description?: React.ReactNode\n  /** An illustration or icon above the title. */\n  icon?: React.ReactNode\n  /** A next step: usually a text or link `Button`. */\n  action?: React.ReactNode\n  /**\n   * - `'default'`: a page or table body, with a heading-sized title.\n   * - `'compact'`: a panel, popover or narrow column, with body-sized text.\n   */\n  size?: 'default' | 'compact'\n  className?: string\n}\n\n/**\n * What a list, table or panel shows when it has nothing to show.\n */\nexport const EmptyState = ({\n  title,\n  description,\n  icon,\n  action,\n  size = 'default',\n  className,\n}: EmptyStateProps) => {\n  const compact = size === 'compact'\n\n  return (\n    <div\n      className={cx(\n        'flex flex-col items-center justify-center text-center',\n        compact ? 'gap-3 px-6 py-8' : 'gap-6 py-12',\n        className\n      )}\n    >\n      {icon && (\n        <div aria-hidden className=\"flex text-j2-gray-6\">\n          {icon}\n        </div>\n      )}\n      <div className=\"flex flex-col items-center gap-1\">\n        {compact ? (\n          <p className=\"m-0 text-sm font-semibold text-j2-text\">{title}</p>\n        ) : (\n          <h4 className=\"m-0\">{title}</h4>\n        )}\n        {description && (\n          <p\n            className={cx(\n              'm-0',\n              compact\n                ? 'max-w-[34ch] text-sm text-j2-text-secondary'\n                : 'max-w-md text-j2-primary'\n            )}\n          >\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAsBA,IAAa,cAAc,EACzB,OACA,aACA,MACA,QACA,OAAO,WACP,gBACqB;CACrB,MAAM,UAAU,SAAS;CAEzB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,yDACA,UAAU,oBAAoB,eAC9B,SACF;EALF,UAAA;GAOG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,eAAA;IAAY,WAAU;IACxB,UAAA;GACE,CAAA;GAEP,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KAAG,WAAU;KAA0C,UAAA;IAAS,CAAA,IAEhE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;KAAI,WAAU;KAAO,UAAA;IAAU,CAAA,GAEhC,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,OACA,UACI,gDACA,0BACN;KAEC,UAAA;IACA,CAAA,CAEF;;GACJ;EACE;;AAET"}

package/dist/src/components/emptyState/EmptyState.d.ts

@@ -0,0 +1,20 @@
+export type EmptyStateProps = {
+    /** What is empty, in a few words: "No results", "No changes yet". */
+    title: React.ReactNode;
+    /** Why it is empty, or what to do next. */
+    description?: React.ReactNode;
+    /** An illustration or icon above the title. */
+    icon?: React.ReactNode;
+    /** A next step: usually a text or link `Button`. */
+    action?: React.ReactNode;
+    /**
+     * - `'default'`: a page or table body, with a heading-sized title.
+     * - `'compact'`: a panel, popover or narrow column, with body-sized text.
+     */
+    size?: 'default' | 'compact';
+    className?: string;
+};
+/**
+ * What a list, table or panel shows when it has nothing to show.
+ */
+export declare const EmptyState: ({ title, description, icon, action, size, className, }: EmptyStateProps) => import('react').JSX.Element;

package/dist/src/components/emptyState/EmptyState.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+//#region src/components/emptyState/EmptyState.tsx
+/**
+* What a list, table or panel shows when it has nothing to show.
+*/
+var EmptyState = ({ title, description, icon, action, size = "default", className }) => {
+	const compact = size === "compact";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex flex-col items-center justify-center text-center", compact ? "gap-3 px-6 py-8" : "gap-6 py-12", className),
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "flex text-j2-gray-6",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-1",
+				children: [compact ? /* @__PURE__ */ jsx("p", {
+					className: "m-0 text-sm font-semibold text-j2-text",
+					children: title
+				}) : /* @__PURE__ */ jsx("h4", {
+					className: "m-0",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: cx("m-0", compact ? "max-w-[34ch] text-sm text-j2-text-secondary" : "max-w-md text-j2-primary"),
+					children: description
+				})]
+			}),
+			action
+		]
+	});
+};
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=EmptyState.js.map

package/dist/src/components/emptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../../src/components/emptyState/EmptyState.tsx"],"sourcesContent":["import cx from 'classnames'\n\nexport type EmptyStateProps = {\n  /** What is empty, in a few words: \"No results\", \"No changes yet\". */\n  title: React.ReactNode\n  /** Why it is empty, or what to do next. */\n  description?: React.ReactNode\n  /** An illustration or icon above the title. */\n  icon?: React.ReactNode\n  /** A next step: usually a text or link `Button`. */\n  action?: React.ReactNode\n  /**\n   * - `'default'`: a page or table body, with a heading-sized title.\n   * - `'compact'`: a panel, popover or narrow column, with body-sized text.\n   */\n  size?: 'default' | 'compact'\n  className?: string\n}\n\n/**\n * What a list, table or panel shows when it has nothing to show.\n */\nexport const EmptyState = ({\n  title,\n  description,\n  icon,\n  action,\n  size = 'default',\n  className,\n}: EmptyStateProps) => {\n  const compact = size === 'compact'\n\n  return (\n    <div\n      className={cx(\n        'flex flex-col items-center justify-center text-center',\n        compact ? 'gap-3 px-6 py-8' : 'gap-6 py-12',\n        className\n      )}\n    >\n      {icon && (\n        <div aria-hidden className=\"flex text-j2-gray-6\">\n          {icon}\n        </div>\n      )}\n      <div className=\"flex flex-col items-center gap-1\">\n        {compact ? (\n          <p className=\"m-0 text-sm font-semibold text-j2-text\">{title}</p>\n        ) : (\n          <h4 className=\"m-0\">{title}</h4>\n        )}\n        {description && (\n          <p\n            className={cx(\n              'm-0',\n              compact\n                ? 'max-w-[34ch] text-sm text-j2-text-secondary'\n                : 'max-w-md text-j2-primary'\n            )}\n          >\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAsBA,IAAa,cAAc,EACzB,OACA,aACA,MACA,QACA,OAAO,WACP,gBACqB;CACrB,MAAM,UAAU,SAAS;CAEzB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,yDACA,UAAU,oBAAoB,eAC9B,SACF;EALF,UAAA;GAOG,QACC,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;IACxB,UAAA;GACE,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UACC,oBAAC,KAAD;KAAG,WAAU;KAA0C,UAAA;IAAS,CAAA,IAEhE,oBAAC,MAAD;KAAI,WAAU;KAAO,UAAA;IAAU,CAAA,GAEhC,eACC,oBAAC,KAAD;KACE,WAAW,GACT,OACA,UACI,gDACA,0BACN;KAEC,UAAA;IACA,CAAA,CAEF;;GACJ;EACE;;AAET"}

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

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

package/dist/src/components/input/AntdInput.d.ts

@@ -343,6 +343,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     formNoValidate?: boolean | undefined | undefined;
     formTarget?: string | undefined | undefined;
     count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
+    placeholder?: string | undefined | undefined;
     checked?: boolean | undefined | undefined;
     required?: boolean | undefined | undefined;
     alt?: string | undefined | undefined;
@@ -352,7 +353,6 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     maxLength?: number | undefined | undefined;
     minLength?: number | undefined | undefined;
     src?: string | undefined | undefined;
-    placeholder?: string | undefined | undefined;
     onClear?: (() => void) | undefined;
     allowClear?: boolean | {
         disabled?: boolean;

package/dist/src/components/input/AntdSearchInput.d.ts

@@ -355,6 +355,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     formNoValidate?: boolean | undefined | undefined;
     formTarget?: string | undefined | undefined;
     count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
+    placeholder?: string | undefined | undefined;
     checked?: boolean | undefined | undefined;
     required?: boolean | undefined | undefined;
     alt?: string | undefined | undefined;
@@ -364,7 +365,6 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     maxLength?: number | undefined | undefined;
     minLength?: number | undefined | undefined;
     src?: string | undefined | undefined;
-    placeholder?: string | undefined | undefined;
     onClear?: (() => void) | undefined;
     allowClear?: boolean | {
         disabled?: boolean;

package/dist/src/components/listRow/ListRow.cjs

@@ -0,0 +1,65 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Checkbox = require("../checkbox/Checkbox.cjs");
+const require_Radio = require("../radio/Radio.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/listRow/ListRow.tsx
+/**
+* A row in a list of records, with hover, selected and pending states.
+* Precedence: pending, then selected, then hover. A selected row keeps its
+* own fill under the cursor rather than stacking a hover tint on top.
+*/
+var ListRow = ({ selected = false, pending = false, highlighted = false, onClick, onHoverChange, selection, onSelectedChange, selectionLabel, className, children, onKeyDown, onMouseEnter, onMouseLeave, ...props }) => {
+	const resting = !pending && !selected;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		"data-selected": selected || void 0,
+		"data-pending": pending || void 0,
+		role: onClick ? "button" : props.role,
+		tabIndex: onClick ? 0 : props.tabIndex,
+		"aria-pressed": onClick && !selection ? selected : void 0,
+		onClick,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (!onClick || event.defaultPrevented) return;
+			if (event.target !== event.currentTarget) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				onClick();
+			}
+		},
+		onMouseEnter: (event) => {
+			onMouseEnter?.(event);
+			onHoverChange?.(true);
+		},
+		onMouseLeave: (event) => {
+			onMouseLeave?.(event);
+			onHoverChange?.(false);
+		},
+		className: (0, classnames.default)("border-b border-j2-gray-3 px-4 py-3 transition-colors", onClick && "cursor-pointer", pending && "bg-[var(--j2-color-warning-bg)]", !pending && selected && "bg-[var(--j2-color-primary-bg-hover)]", resting && (highlighted ? "bg-j2-gray-3" : "hover:bg-j2-gray-3"), className),
+		children: selection ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex shrink-0 pt-0.5",
+				onClick: (event) => event.stopPropagation(),
+				children: selection === "checkbox" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
+					checked: selected,
+					"aria-label": selectionLabel,
+					onChange: (event) => onSelectedChange?.(event.target.checked)
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Radio.Radio, {
+					checked: selected,
+					"aria-label": selectionLabel,
+					onChange: () => onSelectedChange?.(true)
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-w-0 flex-1",
+				children
+			})]
+		}) : children
+	});
+};
+//#endregion
+exports.ListRow = ListRow;
+
+//# sourceMappingURL=ListRow.cjs.map