@wipco/sdui 0.7.0 → 0.8.0

package/dist/{chunk-QBIVW7E6.js → chunk-SAN4IX6N.js}

@@ -1,3 +1,5 @@
+import React from 'react';
+
 // src/layout.ts
 var GAP_CSS = {
   "2": "2px",
@@ -34,6 +36,19 @@ var TEXT_ALIGN_CSS = {
   right: "right"
 };
 var COLUMNS = /* @__PURE__ */ new Set([1, 2, 3, 4, 5, 6]);
+var SIZE_CSS = {
+  "96": "96px",
+  "128": "128px",
+  "160": "160px",
+  "192": "192px",
+  "224": "224px",
+  "256": "256px",
+  "288": "288px",
+  "320": "320px",
+  "384": "384px",
+  "480": "480px",
+  full: "100%"
+};
 function lookup(table, value) {
   if (value === void 0 || value === null) return void 0;
   return table[String(value)];
@@ -57,7 +72,13 @@ var CHILD_LAYOUT_PROPS = /* @__PURE__ */ new Set([
   "shrink",
   "span",
   "selfAlign",
-  "truncate"
+  "truncate",
+  "width",
+  "maxWidth",
+  "minWidth",
+  "marginTop",
+  "marginBottom",
+  "pushEnd"
 ]);
 function childLayoutFrom(props) {
   const style = {};
@@ -67,11 +88,31 @@ function childLayoutFrom(props) {
   if (Number.isInteger(span) && COLUMNS.has(span)) style.gridColumn = `span ${span}`;
   const alignSelf = lookup(ALIGN_CSS, props.selfAlign);
   if (alignSelf !== void 0) style.alignSelf = alignSelf;
+  const width = lookup(SIZE_CSS, props.width);
+  if (width !== void 0) style.width = width;
+  const maxWidth = lookup(SIZE_CSS, props.maxWidth);
+  if (maxWidth !== void 0) style.maxWidth = maxWidth;
+  const minWidth = lookup(SIZE_CSS, props.minWidth);
+  if (minWidth !== void 0) style.minWidth = minWidth;
+  const marginTop = lookup(GAP_CSS, props.marginTop);
+  if (marginTop !== void 0) style.marginTop = marginTop;
+  const marginBottom = lookup(GAP_CSS, props.marginBottom);
+  if (marginBottom !== void 0) style.marginBottom = marginBottom;
+  if (props.pushEnd === true) style.marginInlineStart = "auto";
   const className = props.truncate ? "wp-truncate" : void 0;
   const hasStyle = Object.keys(style).length > 0;
   if (!hasStyle && className === void 0) return void 0;
   return { style: hasStyle ? style : void 0, className };
 }
+function mergeStyle(own, given) {
+  if (!own) return given;
+  if (!given) return own;
+  return { ...own, ...given };
+}
+function joinClass(...parts) {
+  const kept = parts.filter((part) => typeof part === "string" && part.length > 0);
+  return kept.length > 0 ? kept.join(" ") : void 0;
+}
 function typographyStyle(props) {
   const fontWeight = lookup(WEIGHT_CSS, props.weight);
   const textAlign = lookup(TEXT_ALIGN_CSS, props.textAlign);
@@ -86,5 +127,39 @@ var LAYOUT_CSS = `
 @media (max-width:900px){.wp-grid--5,.wp-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media (max-width:600px){.wp-grid--5,.wp-grid--6{grid-template-columns:minmax(0,1fr)}}
 `;
+var BOXED = /* @__PURE__ */ Symbol.for("wipco.sdui.boxed");
+function apply(element, box) {
+  const own = element.props;
+  return React.cloneElement(element, {
+    className: joinClass(own.className, box.className),
+    style: mergeStyle(own.style, box.style)
+  });
+}
+function boxed(Inner, displayName) {
+  if (Inner[BOXED] === true) return Inner;
+  const plainFunction = typeof Inner === "function" && Inner.prototype?.isReactComponent === void 0;
+  if (!plainFunction) return Inner;
+  const render = Inner;
+  const Wrapped = (props) => {
+    const { style, className, ...rest } = props;
+    const element = render(rest);
+    if (style === void 0 && className === void 0) return element;
+    if (!React.isValidElement(element)) return element;
+    if (element.type === React.Fragment) {
+      const kids = React.Children.toArray(
+        element.props.children
+      );
+      const at = kids.findIndex((kid) => React.isValidElement(kid));
+      if (at < 0) return element;
+      const next = kids.slice();
+      next[at] = apply(kids[at], { style, className });
+      return React.createElement(React.Fragment, null, ...next);
+    }
+    return apply(element, { style, className });
+  };
+  Wrapped[BOXED] = true;
+  Wrapped.displayName = displayName ?? `boxed(${Inner.displayName ?? Inner.name ?? "Component"})`;
+  return Wrapped;
+}
 
-export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, childLayoutFrom, columnsClass, containerLayoutStyle, typographyStyle };
+export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, boxed, childLayoutFrom, columnsClass, containerLayoutStyle, joinClass, mergeStyle, typographyStyle };

package/dist/{chunk-L4ORCIVN.js → chunk-VCX2XEF6.js}

@@ -1,4 +1,5 @@
-import { Textarea, Icon } from './chunk-CRSY67TZ.js';
+import { Textarea, Icon } from './chunk-6FADQ2SU.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -41,7 +42,7 @@ function describeParseError(err, text) {
   }
   return `JSON \uAD6C\uBB38 \uC624\uB958: ${message}`;
 }
-function JsonField({
+function JsonFieldImpl({
   value,
   onChange,
   rows = 6,
@@ -115,5 +116,6 @@ function JsonField({
     }
   );
 }
+var JsonField = boxed(JsonFieldImpl, "JsonField");
 
 export { JsonField };

package/dist/{chunk-B4A4KY4K.js → chunk-VPVCVSFH.js}

@@ -1,4 +1,5 @@
-import { IconButton, Input } from './chunk-CRSY67TZ.js';
+import { IconButton, Input } from './chunk-6FADQ2SU.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -20,7 +21,7 @@ function saveErrorMessage(err) {
   if (err instanceof Error && err.message) return err.message;
   return "\uC800\uC7A5\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.";
 }
-function InlineEdit({
+function InlineEditImpl({
   value,
   onSave,
   type = "text",
@@ -155,5 +156,6 @@ function InlineEdit({
     saveError !== null ? /* @__PURE__ */ jsx("span", { className: "wp-field__error", role: "alert", children: saveError }) : null
   ] });
 }
+var InlineEdit = boxed(InlineEditImpl, "InlineEdit");
 
 export { InlineEdit };

package/dist/{chunk-TKB7H5DB.js → chunk-WUTCZCQH.js}

@@ -1,4 +1,4 @@
-import { Tag, Input, Button, IconButton, Field, Checkbox } from './chunk-CRSY67TZ.js';
+import { Tag, Input, Button, IconButton, Field, Checkbox } from './chunk-6FADQ2SU.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-562QK2G3.js → chunk-YMWU4F7E.js}

@@ -1,4 +1,5 @@
-import { Icon } from './chunk-CRSY67TZ.js';
+import { Icon } from './chunk-6FADQ2SU.js';
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -28,7 +29,7 @@ function overwriteClipboard() {
   } catch {
   }
 }
-function SecureScreen({ enabled = true, notice, children }) {
+function SecureScreenImpl({ enabled = true, notice, children }) {
   const hostRef = useRef(null);
   const [cover, setCover] = useState(null);
   const [prevEnabled, setPrevEnabled] = useState(enabled);
@@ -106,5 +107,6 @@ function SecureScreen({ enabled = true, notice, children }) {
     ] }) : null
   ] });
 }
+var SecureScreen = boxed(SecureScreenImpl, "SecureScreen");
 
 export { SecureScreen };

package/dist/{chunk-QZQDHSMD.js → chunk-Z3WGIFJP.js}

@@ -1,7 +1,7 @@
+import { boxed } from './chunk-SAN4IX6N.js';
 import { useSyncExternalStore } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/widgets/LiveClock.tsx
 var PLACEHOLDER = "--:--:--";
 var WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 function pad2(value) {
@@ -31,7 +31,7 @@ function getSecondSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function LiveClock({ startedAt, showDate = false }) {
+function LiveClockImpl({ startedAt, showDate = false }) {
   const nowSeconds = useSyncExternalStore(
     subscribeEverySecond,
     getSecondSnapshot,
@@ -74,5 +74,6 @@ function LiveClock({ startedAt, showDate = false }) {
     }
   );
 }
+var LiveClock = boxed(LiveClockImpl, "LiveClock");
 
 export { LiveClock };

package/dist/{chunk-PJRXPMI3.js → chunk-ZH5MLOZS.js}

@@ -1,4 +1,4 @@
-import { containerLayoutStyle } from './chunk-QBIVW7E6.js';
+import { boxed, containerLayoutStyle } from './chunk-SAN4IX6N.js';
 import React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -14,7 +14,7 @@ var STRIP_CSS = `
 function StripStyles() {
   return /* @__PURE__ */ jsx("style", { href: "erp-strip", precedence: "medium", children: STRIP_CSS });
 }
-function Strip({ children, gap = "12", snap = false }) {
+function StripImpl({ children, gap = "12", snap = false }) {
   const items = React.Children.toArray(children);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -28,5 +28,6 @@ function Strip({ children, gap = "12", snap = false }) {
     }
   );
 }
+var Strip = boxed(StripImpl, "Strip");
 
 export { Strip };