@wipco/sdui 0.1.0 → 0.3.0

package/dist/chunk-SEBPBUZR.js

@@ -0,0 +1,260 @@
+import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-ZUCI34QY.js';
+import React, { useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var INDENT = 24;
+var ROW_PAD = 8;
+var TREE_CSS = `
+.erp-treeview__row{transition:background var(--wp-duration-fast) var(--wp-ease-out);}
+.erp-treeview__row:hover{background:var(--wp-surface-hover);}
+.erp-treeview__row:focus-visible{outline:none;box-shadow:var(--wp-ring-focus);}
+.erp-treeview__row[aria-current='true'],
+.erp-treeview__row[aria-current='true']:hover{background:var(--wp-surface-selected);}
+`;
+function pruneExcluded(nodes, excluded) {
+  if (excluded.size === 0) return nodes;
+  const out = [];
+  for (const node of nodes) {
+    if (excluded.has(node.id)) continue;
+    if (!node.children || node.children.length === 0) {
+      out.push(node);
+      continue;
+    }
+    const children = pruneExcluded(node.children, excluded);
+    out.push(children.length > 0 ? { ...node, children } : { ...node, children: void 0 });
+  }
+  return out;
+}
+function filterTree(nodes, lowerQuery) {
+  const out = [];
+  for (const node of nodes) {
+    const selfMatch = node.label.toLowerCase().includes(lowerQuery) || (node.meta ? node.meta.toLowerCase().includes(lowerQuery) : false);
+    if (selfMatch) {
+      out.push(node);
+      continue;
+    }
+    if (node.children && node.children.length > 0) {
+      const children = filterTree(node.children, lowerQuery);
+      if (children.length > 0) out.push({ ...node, children });
+    }
+  }
+  return out;
+}
+function collectExpandedIds(nodes, maxDepth, depth = 0, acc = /* @__PURE__ */ new Set()) {
+  if (depth >= maxDepth) return acc;
+  for (const node of nodes) {
+    if (node.children && node.children.length > 0) {
+      acc.add(node.id);
+      collectExpandedIds(node.children, maxDepth, depth + 1, acc);
+    }
+  }
+  return acc;
+}
+function toggled(prev, id) {
+  const next = new Set(prev);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  return next;
+}
+function TreeView({
+  nodes,
+  selectedId,
+  onSelect,
+  searchable = false,
+  defaultExpandedDepth = 1,
+  excludeIds,
+  maxHeight
+}) {
+  const [expanded, setExpanded] = useState(() => collectExpandedIds(nodes, defaultExpandedDepth));
+  const [searchCollapsed, setSearchCollapsed] = useState(() => /* @__PURE__ */ new Set());
+  const [query, setQuery] = useState("");
+  const [innerSelected, setInnerSelected] = useState(null);
+  const isControlled = selectedId !== void 0;
+  const currentSelected = isControlled ? selectedId : innerSelected;
+  const trimmedQuery = query.trim().toLowerCase();
+  const searching = trimmedQuery.length > 0;
+  const visibleNodes = useMemo(() => {
+    const pruned = pruneExcluded(nodes, new Set(excludeIds ?? []));
+    return searching ? filterTree(pruned, trimmedQuery) : pruned;
+  }, [nodes, excludeIds, searching, trimmedQuery]);
+  const isOpen = (id) => searching ? !searchCollapsed.has(id) : expanded.has(id);
+  const toggleNode = (id) => {
+    if (searching) setSearchCollapsed((prev) => toggled(prev, id));
+    else setExpanded((prev) => toggled(prev, id));
+  };
+  const handleSelect = (node) => {
+    if (!isControlled) setInnerSelected(node.id);
+    onSelect?.(node.id, node);
+  };
+  const renderNode = (node, depth) => {
+    const children = node.children ?? [];
+    const hasChildren = children.length > 0;
+    const open = hasChildren && isOpen(node.id);
+    const isSelected = currentSelected != null && currentSelected === node.id;
+    const guides = [];
+    for (let i = 0; i < depth; i += 1) {
+      guides.push(
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: ROW_PAD + i * INDENT + 11,
+              width: 1,
+              background: "var(--wp-border-subtle)"
+            }
+          },
+          i
+        )
+      );
+    }
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "treeitem",
+          "aria-level": depth + 1,
+          "aria-expanded": hasChildren ? open : void 0,
+          "aria-selected": isSelected,
+          "aria-current": isSelected ? "true" : void 0,
+          tabIndex: 0,
+          className: "erp-treeview__row",
+          style: {
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--wp-space-2)",
+            minHeight: "var(--wp-row-h-dense)",
+            paddingLeft: ROW_PAD + depth * INDENT,
+            paddingRight: "var(--wp-space-2)",
+            borderRadius: "var(--wp-radius-sm)",
+            cursor: "pointer",
+            userSelect: "none",
+            minWidth: 0
+          },
+          onClick: () => handleSelect(node),
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              handleSelect(node);
+            } else if (event.key === "ArrowRight" && hasChildren && !open) {
+              event.preventDefault();
+              toggleNode(node.id);
+            } else if (event.key === "ArrowLeft" && open) {
+              event.preventDefault();
+              toggleNode(node.id);
+            }
+          },
+          children: [
+            guides,
+            hasChildren ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: open ? "chevron-down" : "chevron-right",
+                label: open ? "\uC811\uAE30" : "\uD3BC\uCE58\uAE30",
+                variant: "ghost",
+                size: "xs",
+                style: { flexShrink: 0 },
+                tabIndex: -1,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  toggleNode(node.id);
+                }
+              }
+            ) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { width: 24, flexShrink: 0 } }),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: hasChildren ? open ? "folder-open" : "folder" : "circle-dot",
+                size: 16,
+                style: { flexShrink: 0, color: isSelected ? "var(--wp-text-brand)" : "var(--wp-text-muted)" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "wp-body-sm",
+                style: {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  color: isSelected ? "var(--wp-text-strong)" : "var(--wp-text-default)",
+                  fontWeight: isSelected ? "var(--wp-weight-medium)" : void 0
+                },
+                children: node.label
+              }
+            ),
+            node.meta ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "wp-caption",
+                style: {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  color: "var(--wp-text-muted)",
+                  flexShrink: 1
+                },
+                children: node.meta
+              }
+            ) : null,
+            hasChildren ? /* @__PURE__ */ jsx(Badge, { tone: isSelected ? "brand" : "neutral", className: "erp-treeview__count", children: children.length }) : null
+          ]
+        }
+      ),
+      hasChildren && open ? /* @__PURE__ */ jsx("div", { role: "group", children: children.map((child) => renderNode(child, depth + 1)) }) : null
+    ] }, node.id);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "erp-treeview",
+      style: { display: "flex", flexDirection: "column", gap: "var(--wp-space-2)", minWidth: 0 },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: TREE_CSS }),
+        searchable ? /* @__PURE__ */ jsx(
+          Input,
+          {
+            size: "sm",
+            icon: "search",
+            placeholder: "\uC774\uB984\uC73C\uB85C \uAC80\uC0C9",
+            value: query,
+            "aria-label": "\uD2B8\uB9AC \uAC80\uC0C9",
+            onChange: (event) => {
+              setQuery(event.target.value);
+              setSearchCollapsed(/* @__PURE__ */ new Set());
+            },
+            trailing: searching ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: "x",
+                label: "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
+                variant: "ghost",
+                size: "xs",
+                style: { pointerEvents: "auto" },
+                onClick: () => {
+                  setQuery("");
+                  setSearchCollapsed(/* @__PURE__ */ new Set());
+                }
+              }
+            ) : void 0
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tree",
+            className: "wp-scroll",
+            style: { overflowY: "auto", ...maxHeight ? { maxHeight } : null },
+            children: visibleNodes.length === 0 ? searching ? /* @__PURE__ */ jsx(EmptyState, { tight: true, icon: "search", title: "\uAC80\uC0C9 \uACB0\uACFC \uC5C6\uC74C", children: "\uB2E4\uB978 \uAC80\uC0C9\uC5B4\uB85C \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694." }) : /* @__PURE__ */ jsx(EmptyState, { tight: true, title: "\uD56D\uBAA9 \uC5C6\uC74C", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : visibleNodes.map((node) => renderNode(node, 0))
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { TreeView };

package/dist/chunk-USKRM22W.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/widgets/SummaryTable.tsx
+var SUMMARY_TABLE_CSS = `
+.erp-sumtable tfoot td{height:var(--wp-row-h);padding:0 12px;background:var(--wp-surface-sunken);border-top:var(--wp-border-w) solid var(--wp-border-strong);color:var(--wp-text-strong);font-weight:var(--wp-weight-semibold);vertical-align:middle}
+.erp-sumtable.wp-table--dense tfoot td{height:var(--wp-row-h-dense)}
+.erp-sumtable__scroll{overflow-x:auto;min-width:0}
+.erp-sumtable__empty{text-align:center;color:var(--wp-text-muted)}
+`;
+function SummaryTableStyles() {
+  return /* @__PURE__ */ jsx("style", { href: "erp-sumtable", precedence: "medium", children: SUMMARY_TABLE_CSS });
+}
+function cellClass(column) {
+  const classes = [];
+  if (column.align === "right") classes.push("wp-table__num");
+  if (column.mono) classes.push("wp-table__mono");
+  if (column.strong) classes.push("wp-table__strong");
+  return classes.length > 0 ? classes.join(" ") : void 0;
+}
+function SummaryTable({ columns, rows, footer, dense = false }) {
+  const tableClass = dense ? "wp-table wp-table--dense erp-sumtable" : "wp-table erp-sumtable";
+  return /* @__PURE__ */ jsxs("div", { className: "erp-sumtable__scroll", children: [
+    /* @__PURE__ */ jsx(SummaryTableStyles, {}),
+    /* @__PURE__ */ jsxs("table", { className: tableClass, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          style: column.align === "right" ? { textAlign: "right" } : void 0,
+          children: column.header
+        },
+        column.key
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "erp-sumtable__empty", colSpan: Math.max(columns.length, 1), children: "\uD45C\uC2DC\uD560 \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { className: cellClass(column), children: row[column.key] }, column.key)) }, rowIndex)) }),
+      footer !== void 0 ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { className: cellClass(column), children: footer[column.key] }, column.key)) }) }) : null
+    ] })
+  ] });
+}
+
+export { SummaryTable };

package/dist/chunk-WNYWTFGW.js

@@ -0,0 +1,61 @@
+import { Icon } from './chunk-ZUCI34QY.js';
+import { useState, useId, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DISCLOSURE_CSS = `
+.erp-disclosure{min-width:0}
+.erp-disclosure__btn{display:flex;align-items:center;gap:var(--wp-space-2);width:100%;margin:0;padding:var(--wp-space-1) var(--wp-space-2);border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-size:var(--wp-size-sm);font-weight:var(--wp-weight-medium);color:var(--wp-text-default);text-align:left;cursor:pointer;transition:var(--wp-transition-control)}
+.erp-disclosure__btn:hover{background:var(--wp-surface-hover);color:var(--wp-text-strong)}
+.erp-disclosure__btn:focus-visible{outline:none;box-shadow:var(--wp-ring-focus)}
+.erp-disclosure__chevron{display:inline-flex;flex:none;color:var(--wp-text-muted);transition:var(--wp-transition-transform)}
+.erp-disclosure__chevron--open{transform:rotate(90deg)}
+.erp-disclosure__summary{flex:1 1 auto;min-width:0}
+.erp-disclosure__content{min-width:0;padding:var(--wp-space-1) var(--wp-space-2) var(--wp-space-2) calc(var(--wp-space-2) + 16px + var(--wp-space-2))}
+`;
+function DisclosureStyles() {
+  return /* @__PURE__ */ jsx("style", { href: "erp-disclosure", precedence: "medium", children: DISCLOSURE_CSS });
+}
+function Disclosure({
+  summary,
+  children,
+  defaultOpen = false,
+  open,
+  onOpenChange
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = open !== void 0 ? open : internalOpen;
+  const contentId = useId();
+  const hasContent = children !== void 0 && children !== null;
+  const toggle = useCallback(() => {
+    const next = !isOpen;
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isOpen, open, onOpenChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "erp-disclosure", children: [
+    /* @__PURE__ */ jsx(DisclosureStyles, {}),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "erp-disclosure__btn",
+        "aria-expanded": isOpen,
+        "aria-controls": hasContent ? contentId : void 0,
+        onClick: toggle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: isOpen ? "erp-disclosure__chevron erp-disclosure__chevron--open" : "erp-disclosure__chevron",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "erp-disclosure__summary", children: summary })
+        ]
+      }
+    ),
+    hasContent ? /* @__PURE__ */ jsx("div", { id: contentId, className: "erp-disclosure__content", hidden: !isOpen, children }) : null
+  ] });
+}
+
+export { Disclosure };

package/dist/chunk-WVRCIVAD.js

@@ -0,0 +1,72 @@
+import { Icon, Badge } from './chunk-ZUCI34QY.js';
+import React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DIFF_CSS = `
+.erp-diff{display:flex;flex-direction:column;gap:var(--wp-space-4);min-width:0;font-size:var(--wp-size-sm)}
+.erp-diff__grid{display:grid;grid-template-columns:minmax(72px,auto) 1fr auto 1fr;gap:var(--wp-space-2) var(--wp-space-3);align-items:center;min-width:0}
+.erp-diff__grid--lists{grid-template-columns:minmax(72px,auto) 1fr;align-items:start}
+.erp-diff__label{color:var(--wp-text-subtle);white-space:nowrap}
+.erp-diff__before{min-width:0;color:var(--wp-text-subtle);text-decoration:line-through;overflow-wrap:anywhere}
+.erp-diff__after{justify-self:start;min-width:0;padding:1px 6px;background:var(--wp-status-success-bg);border-radius:var(--wp-radius-sm);color:var(--wp-text-strong);font-weight:var(--wp-weight-medium);overflow-wrap:anywhere}
+.erp-diff__empty{color:var(--wp-text-subtle);text-decoration:none;background:transparent;padding:0;font-weight:var(--wp-weight-regular)}
+.erp-diff__arrow{display:inline-flex;color:var(--wp-text-subtle)}
+.erp-diff__badges{display:flex;flex-wrap:wrap;gap:var(--wp-space-1);min-width:0;padding-top:1px}
+`;
+function DiffStyles() {
+  return /* @__PURE__ */ jsx("style", { href: "erp-diffview", precedence: "medium", children: DIFF_CSS });
+}
+function DiffView({ fields, lists }) {
+  const hasFields = fields !== void 0 && fields.length > 0;
+  const hasLists = lists !== void 0 && lists.length > 0;
+  if (!hasFields && !hasLists) {
+    return /* @__PURE__ */ jsx("p", { className: "wp-caption", style: { margin: 0 }, children: "\uBCC0\uACBD \uC0AC\uD56D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "erp-diff", children: [
+    /* @__PURE__ */ jsx(DiffStyles, {}),
+    hasFields ? /* @__PURE__ */ jsx("div", { className: "erp-diff__grid", children: fields.map((field, index) => {
+      const hasBefore = field.before !== void 0 && field.before !== null;
+      const hasAfter = field.after !== void 0 && field.after !== null;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "erp-diff__label", children: field.label }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: hasBefore ? "erp-diff__before" : "erp-diff__before erp-diff__empty",
+            children: hasBefore ? field.before : "\u2014"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "erp-diff__arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: 14 }) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: hasAfter ? "erp-diff__after" : "erp-diff__after erp-diff__empty",
+            children: hasAfter ? field.after : "\u2014"
+          }
+        )
+      ] }, `${field.label}-${index}`);
+    }) }) : null,
+    hasLists ? /* @__PURE__ */ jsx("div", { className: "erp-diff__grid erp-diff__grid--lists", children: lists.map((list, index) => {
+      const added = list.added ?? [];
+      const removed = list.removed ?? [];
+      const kept = list.kept ?? [];
+      const isEmpty = added.length === 0 && removed.length === 0 && kept.length === 0;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "erp-diff__label", children: list.label }),
+        /* @__PURE__ */ jsx("span", { className: "erp-diff__badges", children: isEmpty ? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uBCC0\uACBD \uC5C6\uC74C" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          added.map((value, i) => /* @__PURE__ */ jsxs(Badge, { tone: "success", children: [
+            "+ ",
+            value
+          ] }, `a-${value}-${i}`)),
+          removed.map((value, i) => /* @__PURE__ */ jsxs(Badge, { tone: "danger", children: [
+            "\u2212 ",
+            value
+          ] }, `r-${value}-${i}`)),
+          kept.map((value, i) => /* @__PURE__ */ jsx(Badge, { tone: "neutral", children: value }, `k-${value}-${i}`))
+        ] }) })
+      ] }, `${list.label}-${index}`);
+    }) }) : null
+  ] });
+}
+
+export { DiffView };