@j2-health/design-system 0.2.0 → 0.2.1

package/dist/src/components/checkboxTree/CheckboxTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxTree.js","sources":["../../../../src/components/checkboxTree/CheckboxTree.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect, useMemo } from 'react'\nimport { TreeNode } from './TreeNode'\nimport { getLeafKeys, getAllLeafKeys, getAllParentKeys } from './utils'\n\nexport type CheckboxTreeDataNode = {\n  key: string | number\n  title: React.ReactNode\n  children?: CheckboxTreeDataNode[]\n  disabled?: boolean\n}\n\nexport type CheckboxTreeProps = {\n  treeData: CheckboxTreeDataNode[]\n  defaultCheckedKeys?: (string | number)[]\n  checkedKeys?: (string | number)[]\n  onCheck?: (\n    values: Record<string | number, boolean>,\n    info: {\n      checked: boolean\n      checkedLeafNodes: Record<string | number, CheckboxTreeDataNode>\n      allCheckedNodes: CheckboxTreeDataNode[]\n      node: CheckboxTreeDataNode\n    }\n  ) => void\n  disabled?: boolean\n  defaultExpandAll?: boolean\n  defaultExpandedKeys?: (string | number)[]\n  expandedKeys?: (string | number)[]\n  onExpand?: (expandedKeys: (string | number)[]) => void\n  className?: string\n  style?: React.CSSProperties\n  lazyChildren?: boolean\n}\n\nexport const CheckboxTree = ({\n  treeData,\n  defaultCheckedKeys = [],\n  checkedKeys: controlledCheckedKeys,\n  onCheck,\n  disabled = false,\n  defaultExpandAll = true,\n  defaultExpandedKeys,\n  expandedKeys: controlledExpandedKeys,\n  onExpand,\n  className,\n  style,\n  lazyChildren = false,\n}: CheckboxTreeProps) => {\n  const allLeafKeys = useMemo(() => getAllLeafKeys(treeData), [treeData])\n  const leafKeySet = useMemo(() => new Set(allLeafKeys), [allLeafKeys])\n\n  const [internalLeafNodeValues, setInternalLeafNodeValues] = useState<\n    Record<string | number, boolean>\n  >(() => {\n    const defaultLeafKeySet = new Set(\n      defaultCheckedKeys.filter((key) => leafKeySet.has(key))\n    )\n    const values: Record<string | number, boolean> = {}\n    for (const key of allLeafKeys) {\n      values[key] = defaultLeafKeySet.has(key)\n    }\n    return values\n  })\n\n  const [internalExpandedKeys, setInternalExpandedKeys] = useState<\n    (string | number)[]\n  >(() => {\n    if (defaultExpandedKeys) return defaultExpandedKeys\n    if (defaultExpandAll) return getAllParentKeys(treeData)\n    return []\n  })\n\n  // When defaultExpandAll is true and treeData changes, auto-expand new parent nodes\n  useEffect(() => {\n    if (controlledExpandedKeys || !defaultExpandAll || defaultExpandedKeys)\n      return\n    const allParentKeys = getAllParentKeys(treeData)\n    setInternalExpandedKeys((prev) => {\n      const prevSet = new Set(prev)\n      const newKeys = allParentKeys.filter((key) => !prevSet.has(key))\n      if (newKeys.length === 0) return prev\n      return [...prev, ...newKeys]\n    })\n  }, [treeData, defaultExpandAll, controlledExpandedKeys, defaultExpandedKeys])\n\n  const expandedKeysSet = useMemo(() => {\n    const keys = controlledExpandedKeys ?? internalExpandedKeys\n    return new Set(keys)\n  }, [controlledExpandedKeys, internalExpandedKeys])\n\n  const handleToggleExpand = useCallback(\n    (key: string | number) => {\n      const currentKeys = controlledExpandedKeys ?? internalExpandedKeys\n      const newKeys = currentKeys.includes(key)\n        ? currentKeys.filter((k) => k !== key)\n        : [...currentKeys, key]\n\n      if (!controlledExpandedKeys) {\n        setInternalExpandedKeys(newKeys)\n      }\n      onExpand?.(newKeys)\n    },\n    [controlledExpandedKeys, internalExpandedKeys, onExpand]\n  )\n\n  const leafNodeValues: Record<string | number, boolean> = useMemo(() => {\n    if (!controlledCheckedKeys) {\n      return internalLeafNodeValues\n    }\n\n    const controlledLeafKeySet = new Set(\n      controlledCheckedKeys.filter((key) => leafKeySet.has(key))\n    )\n\n    const values: Record<string | number, boolean> = {}\n    for (const key of allLeafKeys) {\n      values[key] = controlledLeafKeySet.has(key)\n    }\n    return values\n  }, [allLeafKeys, leafKeySet, controlledCheckedKeys, internalLeafNodeValues])\n\n  const handleCheck = useCallback(\n    (_key: string | number, checked: boolean, node: CheckboxTreeDataNode) => {\n      const newLeafNodeValues = { ...leafNodeValues }\n\n      if (checked) {\n        // When checking, set all leaf descendants to true\n        const leafKeys = getLeafKeys(node)\n        leafKeys.forEach((leafKey) => (newLeafNodeValues[leafKey] = true))\n      } else {\n        // When unchecking, set all leaf descendants to false\n        const leafKeys = getLeafKeys(node)\n        leafKeys.forEach((leafKey) => (newLeafNodeValues[leafKey] = false))\n      }\n\n      if (!controlledCheckedKeys) {\n        setInternalLeafNodeValues(newLeafNodeValues)\n      }\n\n      if (onCheck) {\n        // Get all checked leaf nodes\n        const checkedLeafNodes: Record<string | number, CheckboxTreeDataNode> =\n          {}\n\n        // Get all nodes that appear checked (including parents)\n        const allCheckedNodes: CheckboxTreeDataNode[] = []\n\n        const collectChecked = (current: CheckboxTreeDataNode): boolean => {\n          let isChecked: boolean\n          if (!current.children || current.children.length === 0) {\n            isChecked = newLeafNodeValues[current.key] === true\n            if (isChecked) {\n              checkedLeafNodes[current.key] = current\n            }\n          } else {\n            isChecked = true\n            for (const child of current.children) {\n              if (!collectChecked(child)) {\n                isChecked = false\n              }\n            }\n          }\n          if (isChecked) {\n            allCheckedNodes.push(current)\n          }\n          return isChecked\n        }\n        treeData.forEach(collectChecked)\n\n        onCheck(newLeafNodeValues, {\n          checked,\n          checkedLeafNodes,\n          allCheckedNodes,\n          node,\n        })\n      }\n    },\n    [controlledCheckedKeys, onCheck, treeData, leafNodeValues]\n  )\n\n  return (\n    <div className={className} style={style}>\n      {treeData.map((node) => (\n        <TreeNode\n          key={node.key}\n          node={node}\n          level={0}\n          leafNodeValues={leafNodeValues}\n          onCheck={handleCheck}\n          disabled={disabled}\n          expandedKeys={expandedKeysSet}\n          onToggleExpand={handleToggleExpand}\n          lazyChildren={lazyChildren}\n        />\n      ))}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/src/components/checkboxTree/TreeNode.cjs

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("@phosphor-icons/react");
+const utils = require("./utils.cjs");
+const Checkbox = require("../checkbox/Checkbox.cjs");
+const TreeNode = ({
+  node,
+  level,
+  leafNodeValues,
+  onCheck,
+  disabled,
+  expandedKeys,
+  onToggleExpand,
+  lazyChildren
+}) => {
+  const { checked: isChecked, indeterminate } = utils.getNodeCheckState(
+    node,
+    leafNodeValues
+  );
+  const isIndeterminate = lazyChildren && indeterminate;
+  const isDisabled = disabled || node.disabled;
+  const hasChildren = node.children && node.children.length > 0;
+  const isExpanded = expandedKeys.has(node.key);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center min-h-6 mb-1",
+        style: { paddingLeft: level * 20 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox.Checkbox,
+            {
+              checked: isChecked,
+              indeterminate: isIndeterminate,
+              disabled: isDisabled,
+              onChange: (e) => onCheck(node.key, e.target.checked, node),
+              children: node.title
+            }
+          ),
+          hasChildren && !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onToggleExpand(node.key),
+              className: "flex items-center justify-center ml-auto cursor-pointer bg-transparent border-none p-0",
+              "aria-expanded": isExpanded,
+              "aria-label": `${isExpanded ? "Collapse" : "Expand"}${typeof node.title === "string" ? ` ${node.title}` : ""}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.CaretDownIcon,
+                {
+                  size: 14,
+                  style: {
+                    transform: `rotate(${isExpanded ? 0 : -90}deg)`,
+                    transition: "transform 150ms ease"
+                  }
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateRows: isExpanded ? "1fr" : "0fr",
+          transition: "grid-template-rows 150ms ease"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden" }, children: (!lazyChildren || isExpanded) && node.children.map((childNode) => /* @__PURE__ */ jsxRuntime.jsx(
+          TreeNode,
+          {
+            node: childNode,
+            level: level + 1,
+            leafNodeValues,
+            onCheck,
+            disabled,
+            expandedKeys,
+            onToggleExpand,
+            lazyChildren
+          },
+          childNode.key
+        )) })
+      }
+    )
+  ] });
+};
+exports.TreeNode = TreeNode;
+//# sourceMappingURL=TreeNode.cjs.map

package/dist/src/components/checkboxTree/TreeNode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.cjs","sources":["../../../../src/components/checkboxTree/TreeNode.tsx"],"sourcesContent":["import { CaretDownIcon } from '@phosphor-icons/react'\nimport { Checkbox } from '../checkbox'\nimport { CheckboxTreeDataNode } from './CheckboxTree'\nimport { getNodeCheckState } from './utils'\n\ntype TreeNodeProps = {\n  node: CheckboxTreeDataNode\n  level: number\n  leafNodeValues: Record<string | number, boolean>\n  onCheck: (\n    key: string | number,\n    checked: boolean,\n    node: CheckboxTreeDataNode\n  ) => void\n  disabled: boolean\n  expandedKeys: Set<string | number>\n  onToggleExpand: (key: string | number) => void\n  lazyChildren: boolean\n}\n\nexport const TreeNode = ({\n  node,\n  level,\n  leafNodeValues,\n  onCheck,\n  disabled,\n  expandedKeys,\n  onToggleExpand,\n  lazyChildren,\n}: TreeNodeProps) => {\n  const { checked: isChecked, indeterminate } = getNodeCheckState(\n    node,\n    leafNodeValues\n  )\n  const isIndeterminate = lazyChildren && indeterminate\n  const isDisabled = disabled || node.disabled\n  const hasChildren = node.children && node.children.length > 0\n  const isExpanded = expandedKeys.has(node.key)\n\n  return (\n    <div>\n      <div\n        className=\"flex items-center min-h-6 mb-1\"\n        style={{ paddingLeft: level * 20 }}\n      >\n        <Checkbox\n          checked={isChecked}\n          indeterminate={isIndeterminate}\n          disabled={isDisabled}\n          onChange={(e) => onCheck(node.key, e.target.checked, node)}\n        >\n          {node.title}\n        </Checkbox>\n        {hasChildren && !isDisabled && (\n          <button\n            type=\"button\"\n            onClick={() => onToggleExpand(node.key)}\n            className=\"flex items-center justify-center ml-auto cursor-pointer bg-transparent border-none p-0\"\n            aria-expanded={isExpanded}\n            aria-label={`${isExpanded ? 'Collapse' : 'Expand'}${typeof node.title === 'string' ? ` ${node.title}` : ''}`}\n          >\n            <CaretDownIcon\n              size={14}\n              style={{\n                transform: `rotate(${isExpanded ? 0 : -90}deg)`,\n                transition: 'transform 150ms ease',\n              }}\n            />\n          </button>\n        )}\n      </div>\n\n      {hasChildren && (\n        <div\n          style={{\n            display: 'grid',\n            gridTemplateRows: isExpanded ? '1fr' : '0fr',\n            transition: 'grid-template-rows 150ms ease',\n          }}\n        >\n          <div style={{ overflow: 'hidden' }}>\n            {(!lazyChildren || isExpanded) &&\n              node.children!.map((childNode) => (\n                <TreeNode\n                  key={childNode.key}\n                  node={childNode}\n                  level={level + 1}\n                  leafNodeValues={leafNodeValues}\n                  onCheck={onCheck}\n                  disabled={disabled}\n                  expandedKeys={expandedKeys}\n                  onToggleExpand={onToggleExpand}\n                  lazyChildren={lazyChildren}\n                />\n              ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["getNodeCheckState","jsxs","jsx","Checkbox","CaretDownIcon"],"mappings":";;;;;;AAoBO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,EAAE,SAAS,WAAW,cAAA,IAAkBA,MAAAA;AAAAA,IAC5C;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,kBAAkB,gBAAgB;AACxC,QAAM,aAAa,YAAY,KAAK;AACpC,QAAM,cAAc,KAAK,YAAY,KAAK,SAAS,SAAS;AAC5D,QAAM,aAAa,aAAa,IAAI,KAAK,GAAG;AAE5C,yCACG,OAAA,EACC,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,QAAQ,GAAA;AAAA,QAE9B,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAACC,SAAAA;AAAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,eAAe;AAAA,cACf,UAAU;AAAA,cACV,UAAU,CAAC,MAAM,QAAQ,KAAK,KAAK,EAAE,OAAO,SAAS,IAAI;AAAA,cAExD,UAAA,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEP,eAAe,CAAC,cACfD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,eAAe,KAAK,GAAG;AAAA,cACtC,WAAU;AAAA,cACV,iBAAe;AAAA,cACf,cAAY,GAAG,aAAa,aAAa,QAAQ,GAAG,OAAO,KAAK,UAAU,WAAW,IAAI,KAAK,KAAK,KAAK,EAAE;AAAA,cAE1G,UAAAA,2BAAAA;AAAAA,gBAACE,MAAAA;AAAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,OAAO;AAAA,oBACL,WAAW,UAAU,aAAa,IAAI,GAAG;AAAA,oBACzC,YAAY;AAAA,kBAAA;AAAA,gBACd;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,eACCF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,kBAAkB,aAAa,QAAQ;AAAA,UACvC,YAAY;AAAA,QAAA;AAAA,QAGd,UAAAA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,UAAU,YACpB,WAAA,CAAC,gBAAgB,eACjB,KAAK,SAAU,IAAI,CAAC,cAClBA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAM;AAAA,YACN,OAAO,QAAQ;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UARK,UAAU;AAAA,QAAA,CAUlB,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;;"}

package/dist/src/components/checkboxTree/TreeNode.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { getNodeCheckState } from "./utils.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+const TreeNode = ({
+  node,
+  level,
+  leafNodeValues,
+  onCheck,
+  disabled,
+  expandedKeys,
+  onToggleExpand,
+  lazyChildren
+}) => {
+  const { checked: isChecked, indeterminate } = getNodeCheckState(
+    node,
+    leafNodeValues
+  );
+  const isIndeterminate = lazyChildren && indeterminate;
+  const isDisabled = disabled || node.disabled;
+  const hasChildren = node.children && node.children.length > 0;
+  const isExpanded = expandedKeys.has(node.key);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center min-h-6 mb-1",
+        style: { paddingLeft: level * 20 },
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isChecked,
+              indeterminate: isIndeterminate,
+              disabled: isDisabled,
+              onChange: (e) => onCheck(node.key, e.target.checked, node),
+              children: node.title
+            }
+          ),
+          hasChildren && !isDisabled && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onToggleExpand(node.key),
+              className: "flex items-center justify-center ml-auto cursor-pointer bg-transparent border-none p-0",
+              "aria-expanded": isExpanded,
+              "aria-label": `${isExpanded ? "Collapse" : "Expand"}${typeof node.title === "string" ? ` ${node.title}` : ""}`,
+              children: /* @__PURE__ */ jsx(
+                CaretDownIcon,
+                {
+                  size: 14,
+                  style: {
+                    transform: `rotate(${isExpanded ? 0 : -90}deg)`,
+                    transition: "transform 150ms ease"
+                  }
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    hasChildren && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateRows: isExpanded ? "1fr" : "0fr",
+          transition: "grid-template-rows 150ms ease"
+        },
+        children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden" }, children: (!lazyChildren || isExpanded) && node.children.map((childNode) => /* @__PURE__ */ jsx(
+          TreeNode,
+          {
+            node: childNode,
+            level: level + 1,
+            leafNodeValues,
+            onCheck,
+            disabled,
+            expandedKeys,
+            onToggleExpand,
+            lazyChildren
+          },
+          childNode.key
+        )) })
+      }
+    )
+  ] });
+};
+export {
+  TreeNode
+};
+//# sourceMappingURL=TreeNode.js.map

package/dist/src/components/checkboxTree/TreeNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.js","sources":["../../../../src/components/checkboxTree/TreeNode.tsx"],"sourcesContent":["import { CaretDownIcon } from '@phosphor-icons/react'\nimport { Checkbox } from '../checkbox'\nimport { CheckboxTreeDataNode } from './CheckboxTree'\nimport { getNodeCheckState } from './utils'\n\ntype TreeNodeProps = {\n  node: CheckboxTreeDataNode\n  level: number\n  leafNodeValues: Record<string | number, boolean>\n  onCheck: (\n    key: string | number,\n    checked: boolean,\n    node: CheckboxTreeDataNode\n  ) => void\n  disabled: boolean\n  expandedKeys: Set<string | number>\n  onToggleExpand: (key: string | number) => void\n  lazyChildren: boolean\n}\n\nexport const TreeNode = ({\n  node,\n  level,\n  leafNodeValues,\n  onCheck,\n  disabled,\n  expandedKeys,\n  onToggleExpand,\n  lazyChildren,\n}: TreeNodeProps) => {\n  const { checked: isChecked, indeterminate } = getNodeCheckState(\n    node,\n    leafNodeValues\n  )\n  const isIndeterminate = lazyChildren && indeterminate\n  const isDisabled = disabled || node.disabled\n  const hasChildren = node.children && node.children.length > 0\n  const isExpanded = expandedKeys.has(node.key)\n\n  return (\n    <div>\n      <div\n        className=\"flex items-center min-h-6 mb-1\"\n        style={{ paddingLeft: level * 20 }}\n      >\n        <Checkbox\n          checked={isChecked}\n          indeterminate={isIndeterminate}\n          disabled={isDisabled}\n          onChange={(e) => onCheck(node.key, e.target.checked, node)}\n        >\n          {node.title}\n        </Checkbox>\n        {hasChildren && !isDisabled && (\n          <button\n            type=\"button\"\n            onClick={() => onToggleExpand(node.key)}\n            className=\"flex items-center justify-center ml-auto cursor-pointer bg-transparent border-none p-0\"\n            aria-expanded={isExpanded}\n            aria-label={`${isExpanded ? 'Collapse' : 'Expand'}${typeof node.title === 'string' ? ` ${node.title}` : ''}`}\n          >\n            <CaretDownIcon\n              size={14}\n              style={{\n                transform: `rotate(${isExpanded ? 0 : -90}deg)`,\n                transition: 'transform 150ms ease',\n              }}\n            />\n          </button>\n        )}\n      </div>\n\n      {hasChildren && (\n        <div\n          style={{\n            display: 'grid',\n            gridTemplateRows: isExpanded ? '1fr' : '0fr',\n            transition: 'grid-template-rows 150ms ease',\n          }}\n        >\n          <div style={{ overflow: 'hidden' }}>\n            {(!lazyChildren || isExpanded) &&\n              node.children!.map((childNode) => (\n                <TreeNode\n                  key={childNode.key}\n                  node={childNode}\n                  level={level + 1}\n                  leafNodeValues={leafNodeValues}\n                  onCheck={onCheck}\n                  disabled={disabled}\n                  expandedKeys={expandedKeys}\n                  onToggleExpand={onToggleExpand}\n                  lazyChildren={lazyChildren}\n                />\n              ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAoBO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,EAAE,SAAS,WAAW,cAAA,IAAkB;AAAA,IAC5C;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,kBAAkB,gBAAgB;AACxC,QAAM,aAAa,YAAY,KAAK;AACpC,QAAM,cAAc,KAAK,YAAY,KAAK,SAAS,SAAS;AAC5D,QAAM,aAAa,aAAa,IAAI,KAAK,GAAG;AAE5C,8BACG,OAAA,EACC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,QAAQ,GAAA;AAAA,QAE9B,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,eAAe;AAAA,cACf,UAAU;AAAA,cACV,UAAU,CAAC,MAAM,QAAQ,KAAK,KAAK,EAAE,OAAO,SAAS,IAAI;AAAA,cAExD,UAAA,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEP,eAAe,CAAC,cACf;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,eAAe,KAAK,GAAG;AAAA,cACtC,WAAU;AAAA,cACV,iBAAe;AAAA,cACf,cAAY,GAAG,aAAa,aAAa,QAAQ,GAAG,OAAO,KAAK,UAAU,WAAW,IAAI,KAAK,KAAK,KAAK,EAAE;AAAA,cAE1G,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,OAAO;AAAA,oBACL,WAAW,UAAU,aAAa,IAAI,GAAG;AAAA,oBACzC,YAAY;AAAA,kBAAA;AAAA,gBACd;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,kBAAkB,aAAa,QAAQ;AAAA,UACvC,YAAY;AAAA,QAAA;AAAA,QAGd,UAAA,oBAAC,OAAA,EAAI,OAAO,EAAE,UAAU,YACpB,WAAA,CAAC,gBAAgB,eACjB,KAAK,SAAU,IAAI,CAAC,cAClB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAM;AAAA,YACN,OAAO,QAAQ;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UARK,UAAU;AAAA,QAAA,CAUlB,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}

package/dist/src/components/checkboxTree/utils.cjs

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getLeafKeys = (node) => {
+  const keys = [];
+  const traverse = (currentNode) => {
+    if (!currentNode.children || currentNode.children.length === 0) {
+      keys.push(currentNode.key);
+    } else {
+      currentNode.children.forEach((child) => traverse(child));
+    }
+  };
+  traverse(node);
+  return keys;
+};
+const getAllLeafKeys = (nodes) => {
+  const keys = [];
+  nodes.forEach((node) => {
+    keys.push(...getLeafKeys(node));
+  });
+  return keys;
+};
+const getNodeCheckState = (node, leafNodeStates) => {
+  let hasChecked = false;
+  let hasUnchecked = false;
+  const visit = (current) => {
+    if (!current.children || current.children.length === 0) {
+      if (leafNodeStates[current.key] === true) {
+        hasChecked = true;
+      } else {
+        hasUnchecked = true;
+      }
+      return hasChecked && hasUnchecked;
+    }
+    return current.children.some(visit);
+  };
+  visit(node);
+  return {
+    checked: hasChecked && !hasUnchecked,
+    indeterminate: hasChecked && hasUnchecked
+  };
+};
+const getAllParentKeys = (nodes) => {
+  const keys = [];
+  const traverse = (currentNodes) => {
+    currentNodes.forEach((node) => {
+      if (node.children && node.children.length > 0) {
+        keys.push(node.key);
+        traverse(node.children);
+      }
+    });
+  };
+  traverse(nodes);
+  return keys;
+};
+exports.getAllLeafKeys = getAllLeafKeys;
+exports.getAllParentKeys = getAllParentKeys;
+exports.getLeafKeys = getLeafKeys;
+exports.getNodeCheckState = getNodeCheckState;
+//# sourceMappingURL=utils.cjs.map

package/dist/src/components/checkboxTree/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../../src/components/checkboxTree/utils.ts"],"sourcesContent":["import { CheckboxTreeDataNode } from './CheckboxTree'\n\nexport const getLeafKeys = (\n  node: CheckboxTreeDataNode\n): (string | number)[] => {\n  const keys: (string | number)[] = []\n  const traverse = (currentNode: CheckboxTreeDataNode) => {\n    if (!currentNode.children || currentNode.children.length === 0) {\n      // This is a leaf node\n      keys.push(currentNode.key)\n    } else {\n      // This is a parent node, traverse children\n      currentNode.children.forEach((child) => traverse(child))\n    }\n  }\n  traverse(node)\n  return keys\n}\n\nexport const getAllLeafKeys = (\n  nodes: CheckboxTreeDataNode[]\n): (string | number)[] => {\n  const keys: (string | number)[] = []\n  nodes.forEach((node) => {\n    keys.push(...getLeafKeys(node))\n  })\n  return keys\n}\n\nexport const getNodeCheckState = (\n  node: CheckboxTreeDataNode,\n  leafNodeStates: Record<string | number, boolean>\n): { checked: boolean; indeterminate: boolean } => {\n  let hasChecked = false\n  let hasUnchecked = false\n  const visit = (current: CheckboxTreeDataNode): boolean => {\n    if (!current.children || current.children.length === 0) {\n      if (leafNodeStates[current.key] === true) {\n        hasChecked = true\n      } else {\n        hasUnchecked = true\n      }\n      return hasChecked && hasUnchecked\n    }\n    return current.children.some(visit)\n  }\n  visit(node)\n  return {\n    checked: hasChecked && !hasUnchecked,\n    indeterminate: hasChecked && hasUnchecked,\n  }\n}\n\nexport const getAllParentKeys = (\n  nodes: CheckboxTreeDataNode[]\n): (string | number)[] => {\n  const keys: (string | number)[] = []\n  const traverse = (currentNodes: CheckboxTreeDataNode[]) => {\n    currentNodes.forEach((node) => {\n      if (node.children && node.children.length > 0) {\n        keys.push(node.key)\n        traverse(node.children)\n      }\n    })\n  }\n  traverse(nodes)\n  return keys\n}\n\nexport const findNode = (\n  key: string | number,\n  nodes: CheckboxTreeDataNode[]\n): CheckboxTreeDataNode | null => {\n  for (const node of nodes) {\n    if (node.key === key) {\n      return node\n    }\n    if (node.children) {\n      const found = findNode(key, node.children)\n      if (found) return found\n    }\n  }\n  return null\n}\n"],"names":[],"mappings":";;AAEO,MAAM,cAAc,CACzB,SACwB;AACxB,QAAM,OAA4B,CAAA;AAClC,QAAM,WAAW,CAAC,gBAAsC;AACtD,QAAI,CAAC,YAAY,YAAY,YAAY,SAAS,WAAW,GAAG;AAE9D,WAAK,KAAK,YAAY,GAAG;AAAA,IAC3B,OAAO;AAEL,kBAAY,SAAS,QAAQ,CAAC,UAAU,SAAS,KAAK,CAAC;AAAA,IACzD;AAAA,EACF;AACA,WAAS,IAAI;AACb,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,UACwB;AACxB,QAAM,OAA4B,CAAA;AAClC,QAAM,QAAQ,CAAC,SAAS;AACtB,SAAK,KAAK,GAAG,YAAY,IAAI,CAAC;AAAA,EAChC,CAAC;AACD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAC/B,MACA,mBACiD;AACjD,MAAI,aAAa;AACjB,MAAI,eAAe;AACnB,QAAM,QAAQ,CAAC,YAA2C;AACxD,QAAI,CAAC,QAAQ,YAAY,QAAQ,SAAS,WAAW,GAAG;AACtD,UAAI,eAAe,QAAQ,GAAG,MAAM,MAAM;AACxC,qBAAa;AAAA,MACf,OAAO;AACL,uBAAe;AAAA,MACjB;AACA,aAAO,cAAc;AAAA,IACvB;AACA,WAAO,QAAQ,SAAS,KAAK,KAAK;AAAA,EACpC;AACA,QAAM,IAAI;AACV,SAAO;AAAA,IACL,SAAS,cAAc,CAAC;AAAA,IACxB,eAAe,cAAc;AAAA,EAAA;AAEjC;AAEO,MAAM,mBAAmB,CAC9B,UACwB;AACxB,QAAM,OAA4B,CAAA;AAClC,QAAM,WAAW,CAAC,iBAAyC;AACzD,iBAAa,QAAQ,CAAC,SAAS;AAC7B,UAAI,KAAK,YAAY,KAAK,SAAS,SAAS,GAAG;AAC7C,aAAK,KAAK,KAAK,GAAG;AAClB,iBAAS,KAAK,QAAQ;AAAA,MACxB;AAAA,IACF,CAAC;AAAA,EACH;AACA,WAAS,KAAK;AACd,SAAO;AACT;;;;;"}

package/dist/src/components/checkboxTree/utils.js

@@ -0,0 +1,59 @@
+const getLeafKeys = (node) => {
+  const keys = [];
+  const traverse = (currentNode) => {
+    if (!currentNode.children || currentNode.children.length === 0) {
+      keys.push(currentNode.key);
+    } else {
+      currentNode.children.forEach((child) => traverse(child));
+    }
+  };
+  traverse(node);
+  return keys;
+};
+const getAllLeafKeys = (nodes) => {
+  const keys = [];
+  nodes.forEach((node) => {
+    keys.push(...getLeafKeys(node));
+  });
+  return keys;
+};
+const getNodeCheckState = (node, leafNodeStates) => {
+  let hasChecked = false;
+  let hasUnchecked = false;
+  const visit = (current) => {
+    if (!current.children || current.children.length === 0) {
+      if (leafNodeStates[current.key] === true) {
+        hasChecked = true;
+      } else {
+        hasUnchecked = true;
+      }
+      return hasChecked && hasUnchecked;
+    }
+    return current.children.some(visit);
+  };
+  visit(node);
+  return {
+    checked: hasChecked && !hasUnchecked,
+    indeterminate: hasChecked && hasUnchecked
+  };
+};
+const getAllParentKeys = (nodes) => {
+  const keys = [];
+  const traverse = (currentNodes) => {
+    currentNodes.forEach((node) => {
+      if (node.children && node.children.length > 0) {
+        keys.push(node.key);
+        traverse(node.children);
+      }
+    });
+  };
+  traverse(nodes);
+  return keys;
+};
+export {
+  getAllLeafKeys,
+  getAllParentKeys,
+  getLeafKeys,
+  getNodeCheckState
+};
+//# sourceMappingURL=utils.js.map

package/dist/src/components/checkboxTree/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/checkboxTree/utils.ts"],"sourcesContent":["import { CheckboxTreeDataNode } from './CheckboxTree'\n\nexport const getLeafKeys = (\n  node: CheckboxTreeDataNode\n): (string | number)[] => {\n  const keys: (string | number)[] = []\n  const traverse = (currentNode: CheckboxTreeDataNode) => {\n    if (!currentNode.children || currentNode.children.length === 0) {\n      // This is a leaf node\n      keys.push(currentNode.key)\n    } else {\n      // This is a parent node, traverse children\n      currentNode.children.forEach((child) => traverse(child))\n    }\n  }\n  traverse(node)\n  return keys\n}\n\nexport const getAllLeafKeys = (\n  nodes: CheckboxTreeDataNode[]\n): (string | number)[] => {\n  const keys: (string | number)[] = []\n  nodes.forEach((node) => {\n    keys.push(...getLeafKeys(node))\n  })\n  return keys\n}\n\nexport const getNodeCheckState = (\n  node: CheckboxTreeDataNode,\n  leafNodeStates: Record<string | number, boolean>\n): { checked: boolean; indeterminate: boolean } => {\n  let hasChecked = false\n  let hasUnchecked = false\n  const visit = (current: CheckboxTreeDataNode): boolean => {\n    if (!current.children || current.children.length === 0) {\n      if (leafNodeStates[current.key] === true) {\n        hasChecked = true\n      } else {\n        hasUnchecked = true\n      }\n      return hasChecked && hasUnchecked\n    }\n    return current.children.some(visit)\n  }\n  visit(node)\n  return {\n    checked: hasChecked && !hasUnchecked,\n    indeterminate: hasChecked && hasUnchecked,\n  }\n}\n\nexport const getAllParentKeys = (\n  nodes: CheckboxTreeDataNode[]\n): (string | number)[] => {\n  const keys: (string | number)[] = []\n  const traverse = (currentNodes: CheckboxTreeDataNode[]) => {\n    currentNodes.forEach((node) => {\n      if (node.children && node.children.length > 0) {\n        keys.push(node.key)\n        traverse(node.children)\n      }\n    })\n  }\n  traverse(nodes)\n  return keys\n}\n\nexport const findNode = (\n  key: string | number,\n  nodes: CheckboxTreeDataNode[]\n): CheckboxTreeDataNode | null => {\n  for (const node of nodes) {\n    if (node.key === key) {\n      return node\n    }\n    if (node.children) {\n      const found = findNode(key, node.children)\n      if (found) return found\n    }\n  }\n  return null\n}\n"],"names":[],"mappings":"AAEO,MAAM,cAAc,CACzB,SACwB;AACxB,QAAM,OAA4B,CAAA;AAClC,QAAM,WAAW,CAAC,gBAAsC;AACtD,QAAI,CAAC,YAAY,YAAY,YAAY,SAAS,WAAW,GAAG;AAE9D,WAAK,KAAK,YAAY,GAAG;AAAA,IAC3B,OAAO;AAEL,kBAAY,SAAS,QAAQ,CAAC,UAAU,SAAS,KAAK,CAAC;AAAA,IACzD;AAAA,EACF;AACA,WAAS,IAAI;AACb,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,UACwB;AACxB,QAAM,OAA4B,CAAA;AAClC,QAAM,QAAQ,CAAC,SAAS;AACtB,SAAK,KAAK,GAAG,YAAY,IAAI,CAAC;AAAA,EAChC,CAAC;AACD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAC/B,MACA,mBACiD;AACjD,MAAI,aAAa;AACjB,MAAI,eAAe;AACnB,QAAM,QAAQ,CAAC,YAA2C;AACxD,QAAI,CAAC,QAAQ,YAAY,QAAQ,SAAS,WAAW,GAAG;AACtD,UAAI,eAAe,QAAQ,GAAG,MAAM,MAAM;AACxC,qBAAa;AAAA,MACf,OAAO;AACL,uBAAe;AAAA,MACjB;AACA,aAAO,cAAc;AAAA,IACvB;AACA,WAAO,QAAQ,SAAS,KAAK,KAAK;AAAA,EACpC;AACA,QAAM,IAAI;AACV,SAAO;AAAA,IACL,SAAS,cAAc,CAAC;AAAA,IACxB,eAAe,cAAc;AAAA,EAAA;AAEjC;AAEO,MAAM,mBAAmB,CAC9B,UACwB;AACxB,QAAM,OAA4B,CAAA;AAClC,QAAM,WAAW,CAAC,iBAAyC;AACzD,iBAAa,QAAQ,CAAC,SAAS;AAC7B,UAAI,KAAK,YAAY,KAAK,SAAS,SAAS,GAAG;AAC7C,aAAK,KAAK,KAAK,GAAG;AAClB,iBAAS,KAAK,QAAQ;AAAA,MACxB;AAAA,IACF,CAAC;AAAA,EACH;AACA,WAAS,KAAK;AACd,SAAO;AACT;"}

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const antd = require("antd");
+const react = require("@phosphor-icons/react");
+const Collapse_module = require("./Collapse.module.css.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const stateConfig = {
+  default: {
+    className: Collapse_module.default.default,
+    Icon: react.InfoIcon,
+    color: "var(--j2-color-text)"
+  },
+  warning: {
+    className: Collapse_module.default.warning,
+    Icon: react.WarningCircleIcon,
+    color: "var(--j2-color-warning-text)"
+  },
+  error: {
+    className: Collapse_module.default.error,
+    Icon: react.XCircleIcon,
+    color: "var(--j2-color-error-text)"
+  }
+};
+const Collapse = ({
+  state = "default",
+  showIcon = false,
+  className,
+  items,
+  ...props
+}) => {
+  const { className: stateClass, Icon, color } = stateConfig[state];
+  const icon = React__namespace.useMemo(() => {
+    if (!showIcon) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 14, fill: color, style: { flexShrink: 0 } });
+  }, [state, showIcon]);
+  const itemsWithIcon = React__namespace.useMemo(() => {
+    if (!icon || !items) return items;
+    return items.map((item) => ({
+      ...item,
+      label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        item.label
+      ] })
+    }));
+  }, [items, icon]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Collapse,
+    {
+      ...props,
+      items: itemsWithIcon,
+      className: [stateClass, className].filter(Boolean).join(" "),
+      expandIcon: ({ isActive }) => /* @__PURE__ */ jsxRuntime.jsx(
+        react.CaretDownIcon,
+        {
+          size: 14,
+          style: { transform: `rotate(${isActive ? 0 : -90}deg)` }
+        }
+      )
+    }
+  );
+};
+exports.Collapse = Collapse;
+//# sourceMappingURL=Collapse.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.cjs","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"],"names":["styles","InfoIcon","WarningCircleIcon","XCircleIcon","React","jsx","jsxs","Fragment","AntdCollapse","CaretDownIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,cAGF;AAAA,EACF,SAAS;AAAA,IACP,WAAWA,gBAAAA,QAAO;AAAA,IAClB,MAAMC,MAAAA;AAAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,SAAS;AAAA,IACP,WAAWD,gBAAAA,QAAO;AAAA,IAClB,MAAME,MAAAA;AAAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,WAAWF,gBAAAA,QAAO;AAAA,IAClB,MAAMG,MAAAA;AAAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,WAAW,CAAC;AAAA,EAChB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,QAAM,EAAE,WAAW,YAAY,MAAM,MAAA,IAAU,YAAY,KAAK;AAEhE,QAAM,OAAOC,iBAAM,QAAQ,MAAM;AAC/B,QAAI,CAAC,SAAU,QAAO;AACtB,WAAOC,+BAAC,MAAA,EAAK,MAAM,IAAI,MAAM,OAAO,OAAO,EAAE,YAAY,EAAA,EAAE,CAAG;AAAA,EAChE,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,QAAM,gBAAgBD,iBAAM,QAAQ,MAAM;AACxC,QAAI,CAAC,QAAQ,CAAC,MAAO,QAAO;AAC5B,WAAQ,MAA8C,IAAI,CAAC,UAAU;AAAA,MACnE,GAAG;AAAA,MACH,OACEE,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,QAAA;AAAA,QACA,KAAK;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,EAEF;AAAA,EACJ,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACEF,2BAAAA;AAAAA,IAACG,KAAAA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC3D,YAAY,CAAC,EAAE,SAAA,MACbH,2BAAAA;AAAAA,QAACI,MAAAA;AAAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,OAAO,EAAE,WAAW,UAAU,WAAW,IAAI,GAAG,OAAA;AAAA,QAAO;AAAA,MAAA;AAAA,IACzD;AAAA,EAAA;AAIR;;"}

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

@@ -0,0 +1,64 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Collapse as Collapse$1 } from "antd";
+import { XCircleIcon, WarningCircleIcon, InfoIcon, CaretDownIcon } from "@phosphor-icons/react";
+import styles from "./Collapse.module.css.js";
+const stateConfig = {
+  default: {
+    className: styles.default,
+    Icon: InfoIcon,
+    color: "var(--j2-color-text)"
+  },
+  warning: {
+    className: styles.warning,
+    Icon: WarningCircleIcon,
+    color: "var(--j2-color-warning-text)"
+  },
+  error: {
+    className: styles.error,
+    Icon: XCircleIcon,
+    color: "var(--j2-color-error-text)"
+  }
+};
+const Collapse = ({
+  state = "default",
+  showIcon = false,
+  className,
+  items,
+  ...props
+}) => {
+  const { className: stateClass, Icon, color } = stateConfig[state];
+  const icon = React.useMemo(() => {
+    if (!showIcon) return null;
+    return /* @__PURE__ */ jsx(Icon, { size: 14, fill: color, style: { flexShrink: 0 } });
+  }, [state, showIcon]);
+  const itemsWithIcon = React.useMemo(() => {
+    if (!icon || !items) return items;
+    return items.map((item) => ({
+      ...item,
+      label: /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        item.label
+      ] })
+    }));
+  }, [items, icon]);
+  return /* @__PURE__ */ jsx(
+    Collapse$1,
+    {
+      ...props,
+      items: itemsWithIcon,
+      className: [stateClass, className].filter(Boolean).join(" "),
+      expandIcon: ({ isActive }) => /* @__PURE__ */ jsx(
+        CaretDownIcon,
+        {
+          size: 14,
+          style: { transform: `rotate(${isActive ? 0 : -90}deg)` }
+        }
+      )
+    }
+  );
+};
+export {
+  Collapse
+};
+//# sourceMappingURL=Collapse.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","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"],"names":["AntdCollapse"],"mappings":";;;;;AAiBA,MAAM,cAGF;AAAA,EACF,SAAS;AAAA,IACP,WAAW,OAAO;AAAA,IAClB,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,SAAS;AAAA,IACP,WAAW,OAAO;AAAA,IAClB,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,WAAW,OAAO;AAAA,IAClB,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,WAAW,CAAC;AAAA,EAChB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,QAAM,EAAE,WAAW,YAAY,MAAM,MAAA,IAAU,YAAY,KAAK;AAEhE,QAAM,OAAO,MAAM,QAAQ,MAAM;AAC/B,QAAI,CAAC,SAAU,QAAO;AACtB,WAAO,oBAAC,MAAA,EAAK,MAAM,IAAI,MAAM,OAAO,OAAO,EAAE,YAAY,EAAA,EAAE,CAAG;AAAA,EAChE,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,QAAM,gBAAgB,MAAM,QAAQ,MAAM;AACxC,QAAI,CAAC,QAAQ,CAAC,MAAO,QAAO;AAC5B,WAAQ,MAA8C,IAAI,CAAC,UAAU;AAAA,MACnE,GAAG;AAAA,MACH,OACE,qBAAA,UAAA,EACG,UAAA;AAAA,QAAA;AAAA,QACA,KAAK;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,EAEF;AAAA,EACJ,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC3D,YAAY,CAAC,EAAE,SAAA,MACb;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,OAAO,EAAE,WAAW,UAAU,WAAW,IAAI,GAAG,OAAA;AAAA,QAAO;AAAA,MAAA;AAAA,IACzD;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const warning = "_warning_yukjt_2";
+const error = "_error_yukjt_3";
+const styles = {
+  "default": "_default_yukjt_1",
+  warning,
+  error
+};
+exports.default = styles;
+exports.error = error;
+exports.warning = warning;
+//# sourceMappingURL=Collapse.module.css.cjs.map

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

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

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

@@ -0,0 +1,13 @@
+const warning = "_warning_yukjt_2";
+const error = "_error_yukjt_3";
+const styles = {
+  "default": "_default_yukjt_1",
+  warning,
+  error
+};
+export {
+  styles as default,
+  error,
+  warning
+};
+//# sourceMappingURL=Collapse.module.css.js.map

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

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

package/dist/src/components/drawer/Drawer.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const antd = require("antd");
+const react = require("@phosphor-icons/react");
+;/* empty css             */
+const Button = require("../button/Button.cjs");
+const Drawer = ({
+  fillPage = false,
+  footer,
+  extraContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Drawer,
+    {
+      ...props,
+      closable: false,
+      ...fillPage && { height: "100vh", width: "100vw" },
+      ...footer && { footer },
+      extra: /* @__PURE__ */ jsxRuntime.jsxs(antd.Space, { children: [
+        extraContent,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            className: "p-0",
+            type: "link",
+            onClick: props.onClose,
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { size: 22, weight: "regular" })
+          }
+        )
+      ] }),
+      className: "j2-drawer"
+    }
+  );
+};
+exports.Drawer = Drawer;
+//# sourceMappingURL=Drawer.cjs.map

package/dist/src/components/drawer/Drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { Drawer as AntdDrawer, DrawerProps, Space } from 'antd'\nimport { Button } from '../button'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Drawer.css'\n\ntype AllProps = Omit<DrawerProps, 'extra' | 'closable'> & {\n  fillPage?: boolean\n  footer?: React.ReactNode\n  extraContent?: React.ReactNode\n}\n\nexport type Props = Expand<AllProps>\n\nexport const Drawer = ({\n  fillPage = false,\n  footer,\n  extraContent,\n  ...props\n}: Props) => {\n  return (\n    <AntdDrawer\n      {...props}\n      closable={false}\n      {...(fillPage && { height: '100vh', width: '100vw' })}\n      {...(footer && { footer })}\n      extra={\n        <Space>\n          {extraContent}\n          <Button\n            className=\"p-0\"\n            type=\"link\"\n            onClick={props.onClose}\n            aria-label=\"Close\"\n          >\n            <XIcon size={22} weight=\"regular\" />\n          </Button>\n        </Space>\n      }\n      className=\"j2-drawer\"\n    />\n  )\n}\n"],"names":["jsx","AntdDrawer","Space","Button","XIcon"],"mappings":";;;;;;;AAaO,MAAM,SAAS,CAAC;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACT,GAAI,YAAY,EAAE,QAAQ,SAAS,OAAO,QAAA;AAAA,MAC1C,GAAI,UAAU,EAAE,OAAA;AAAA,MACjB,uCACGC,YAAA,EACE,UAAA;AAAA,QAAA;AAAA,QACDF,2BAAAA;AAAAA,UAACG,OAAAA;AAAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,MAAM;AAAA,YACf,cAAW;AAAA,YAEX,UAAAH,2BAAAA,IAACI,aAAA,EAAM,MAAM,IAAI,QAAO,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,GACF;AAAA,MAEF,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;;"}

package/dist/src/components/drawer/Drawer.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer as Drawer$1, Space } from "antd";
+import { XIcon } from "@phosphor-icons/react";
+/* empty css           */
+import { Button } from "../button/Button.js";
+const Drawer = ({
+  fillPage = false,
+  footer,
+  extraContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Drawer$1,
+    {
+      ...props,
+      closable: false,
+      ...fillPage && { height: "100vh", width: "100vw" },
+      ...footer && { footer },
+      extra: /* @__PURE__ */ jsxs(Space, { children: [
+        extraContent,
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "p-0",
+            type: "link",
+            onClick: props.onClose,
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(XIcon, { size: 22, weight: "regular" })
+          }
+        )
+      ] }),
+      className: "j2-drawer"
+    }
+  );
+};
+export {
+  Drawer
+};
+//# sourceMappingURL=Drawer.js.map