@caseparts-org/caseblocks 0.0.157 → 0.0.158

package/dist/assets/Error.css

@@ -1 +1 @@
-._error_10jtk_1{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;overflow-x:hidden;gap:var(--spacing-spacing-2xs);padding:var(--spacing-spacing-2xs);border:1px solid var(--border-border-error-warning);border-radius:var(--border-radius-sm);background-color:color-mix(in srgb,var(--color-alerts-error-warning) 8%,transparent);transition:all .3s ease-in}._variantError_10jtk_16{border-color:var(--border-border-error-warning);background-color:color-mix(in srgb,var(--color-alerts-error-warning) 8%,transparent)}._variantWarning_10jtk_21{border-color:var(--border-border-warning);background-color:color-mix(in srgb,var(--color-alerts-warning) 8%,transparent)}._variantDefault_10jtk_26{border-color:var(--border-border-primary);background-color:var(--surface-surface-primary)}._errorHeader_10jtk_31{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--spacing-spacing-2xs)}._errorHeaderContent_10jtk_40{min-width:0;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-2xs)}._detailsToggleButton_10jtk_48{width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-xs);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._detailsToggleButton_10jtk_48:hover,._detailsToggleButton_10jtk_48:focus-visible{background-color:var(--surface-surface-secondary)}._detailsChevron_10jtk_66{display:inline-flex;align-items:center;justify-content:center;transform:rotate(0);transition:transform .2s ease}._detailsChevronOpen_10jtk_74{transform:rotate(180deg)}._errorDetails_10jtk_78{position:relative;padding:var(--spacing-spacing-2xs);border:1px solid var(--border-border-primary);background-color:var(--surface-surface-primary);border-radius:var(--border-radius-sm);overflow:hidden;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;overflow-wrap:anywhere;font-family:monospace;width:100%;transition:max-height .28s ease,opacity .2s ease}._errorDetailsContent_10jtk_94{padding-top:var(--spacing-spacing-3xs);padding-right:2rem}._copyButton_10jtk_99{position:absolute;top:var(--spacing-spacing-3xs);right:var(--spacing-spacing-3xs);width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-xs);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}._copyIcon_10jtk_114,._checkIcon_10jtk_115{position:absolute;display:inline-flex;align-items:center;justify-content:center}._hiddenIcon_10jtk_122{opacity:0;pointer-events:none}._copyButton_10jtk_99:hover,._copyButton_10jtk_99:focus-visible{background-color:var(--surface-surface-secondary)}
+._error_lchwg_1{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;overflow-x:hidden;gap:var(--spacing-spacing-2xs);padding:var(--spacing-spacing-2xs) var(--spacing-spacing-1xs);border:1px solid var(--border-border-error-warning);border-radius:var(--border-radius-sm);background-color:color-mix(in srgb,var(--color-alerts-error-warning) 8%,transparent);transition:all .3s ease-in}._variantError_lchwg_16{border-color:var(--border-border-error-warning);background-color:color-mix(in srgb,var(--color-alerts-error-warning) 8%,transparent)}._variantWarning_lchwg_21{border-color:var(--border-border-warning);background-color:color-mix(in srgb,var(--color-alerts-warning) 8%,transparent)}._variantDefault_lchwg_26{border-color:var(--border-border-primary);background-color:var(--surface-surface-primary)}._errorHeader_lchwg_31{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--spacing-spacing-2xs)}._errorHeaderContent_lchwg_40{min-width:0;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-2xs)}._detailsToggleButton_lchwg_48{width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-xs);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._detailsToggleButton_lchwg_48:hover,._detailsToggleButton_lchwg_48:focus-visible{background-color:var(--surface-surface-secondary)}._detailsChevron_lchwg_66{display:inline-flex;align-items:center;justify-content:center;transform:rotate(0);transition:transform .2s ease}._detailsChevronOpen_lchwg_74{transform:rotate(180deg)}._errorDetails_lchwg_78{position:relative;padding:var(--spacing-spacing-2xs);border:1px solid var(--border-border-primary);background-color:var(--surface-surface-primary);border-radius:var(--border-radius-sm);overflow:hidden;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;overflow-wrap:anywhere;font-family:monospace;width:100%;transition:max-height .28s ease,opacity .2s ease}._errorDetailsContent_lchwg_94{padding-top:var(--spacing-spacing-3xs);padding-right:2rem}._copyButton_lchwg_99{position:absolute;top:var(--spacing-spacing-3xs);right:var(--spacing-spacing-3xs);width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-xs);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}._copyIcon_lchwg_114,._checkIcon_lchwg_115{position:absolute;display:inline-flex;align-items:center;justify-content:center}._hiddenIcon_lchwg_122{opacity:0;pointer-events:none}._copyButton_lchwg_99:hover,._copyButton_lchwg_99:focus-visible{background-color:var(--surface-surface-secondary)}

package/dist/molecules/Error/Error.d.ts

@@ -1,4 +1,5 @@
 import { default as React, ReactNode } from 'react';
+import { TextProps } from '../../atoms/Text/Text';
 export interface ErrorProps {
     isVisible?: boolean;
     className?: string;
@@ -8,14 +9,21 @@ export interface ErrorProps {
     variant?: "error" | "warning" | "default";
 }
 export interface ErrorMessageProps {
+    as?: TextProps["as"];
+    size?: TextProps["size"];
+    variant?: TextProps["variant"];
+    weight?: TextProps["weight"];
+    colorToken?: TextProps["colorToken"];
+    hideAt?: TextProps["hideAt"];
+    className?: string;
     children?: ReactNode;
 }
-export interface ErrorDetailsProps {
+export interface ErrorDetailsProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     hide?: boolean;
 }
-declare function ErrorMessage({ children }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
-declare function ErrorDetails({ children }: ErrorDetailsProps): import("react/jsx-runtime").JSX.Element;
+declare function ErrorMessage({ as, size, variant, weight, colorToken, hideAt, className, children, }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
+declare function ErrorDetails({ children, hide, ...otherProps }: ErrorDetailsProps): import("react/jsx-runtime").JSX.Element | null;
 interface ErrorComponent extends React.FC<ErrorProps> {
     Message: typeof ErrorMessage;
     Details: typeof ErrorDetails;

package/dist/molecules/Error/Error.js

@@ -1,148 +1,171 @@
-import { jsxs as c, jsx as r, Fragment as b } from "react/jsx-runtime";
-import p, { useState as v, useMemo as R, useEffect as D } from "react";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import m, { useState as I, useEffect as N } from "react";
 import { c as f } from "../../clsx-OuTLNxxd.js";
-import { Icon as m } from "../../atoms/Icon/Icon.js";
-import { Text as K } from "../../atoms/Text/Text.js";
-import '../../assets/Error.css';const V = "_error_10jtk_1", W = "_variantError_10jtk_16", $ = "_variantWarning_10jtk_21", F = "_variantDefault_10jtk_26", L = "_errorHeader_10jtk_31", q = "_errorHeaderContent_10jtk_40", U = "_detailsToggleButton_10jtk_48", Y = "_detailsChevron_10jtk_66", G = "_detailsChevronOpen_10jtk_74", J = "_errorDetails_10jtk_78", P = "_errorDetailsContent_10jtk_94", Q = "_copyButton_10jtk_99", X = "_copyIcon_10jtk_114", Z = "_checkIcon_10jtk_115", ee = "_hiddenIcon_10jtk_122", t = {
-  error: V,
-  variantError: W,
-  variantWarning: $,
-  variantDefault: F,
-  errorHeader: L,
-  errorHeaderContent: q,
-  detailsToggleButton: U,
-  detailsChevron: Y,
-  detailsChevronOpen: G,
-  errorDetails: J,
-  errorDetailsContent: P,
-  copyButton: Q,
-  copyIcon: X,
-  checkIcon: Z,
-  hiddenIcon: ee
+import { Icon as p } from "../../atoms/Icon/Icon.js";
+import { Text as q } from "../../atoms/Text/Text.js";
+import '../../assets/Error.css';const F = "_error_lchwg_1", U = "_variantError_lchwg_16", Y = "_variantWarning_lchwg_21", G = "_variantDefault_lchwg_26", J = "_errorHeader_lchwg_31", P = "_errorHeaderContent_lchwg_40", Q = "_detailsToggleButton_lchwg_48", X = "_detailsChevron_lchwg_66", Z = "_detailsChevronOpen_lchwg_74", ee = "_errorDetails_lchwg_78", te = "_errorDetailsContent_lchwg_94", re = "_copyButton_lchwg_99", ne = "_copyIcon_lchwg_114", oe = "_checkIcon_lchwg_115", ae = "_hiddenIcon_lchwg_122", t = {
+  error: F,
+  variantError: U,
+  variantWarning: Y,
+  variantDefault: G,
+  errorHeader: J,
+  errorHeaderContent: P,
+  detailsToggleButton: Q,
+  detailsChevron: X,
+  detailsChevronOpen: Z,
+  errorDetails: ee,
+  errorDetailsContent: te,
+  copyButton: re,
+  copyIcon: ne,
+  checkIcon: oe,
+  hiddenIcon: ae
 };
-function x({ children: n }) {
-  return /* @__PURE__ */ r(b, { children: n });
+function E({
+  as: n,
+  size: s = "md",
+  variant: i = "body",
+  weight: g = "regular",
+  colorToken: l = "inherit",
+  hideAt: a,
+  className: b,
+  children: o
+}) {
+  return /* @__PURE__ */ r(
+    q,
+    {
+      as: n,
+      size: s,
+      variant: i,
+      weight: g,
+      colorToken: l,
+      hideAt: a,
+      className: b,
+      children: o
+    }
+  );
 }
-function S({ children: n }) {
-  return /* @__PURE__ */ r(b, { children: n });
+function O({ children: n, hide: s, ...i }) {
+  return s ? null : /* @__PURE__ */ r("div", { ...i, children: n });
 }
-function N(n) {
-  return p.isValidElement(n) && n.type === x;
+function A(n) {
+  return m.isValidElement(n) && n.type === E;
 }
-function E(n) {
-  return p.isValidElement(n) && n.type === S;
+function B(n) {
+  return m.isValidElement(n) && n.type === O;
 }
-function te({
+function se({
   isVisible: n = !0,
-  className: H,
-  children: T,
-  hideDetails: I = !1,
-  detailsMaxHeight: _ = 300,
-  variant: d = "error"
+  className: s,
+  children: i,
+  hideDetails: g = !1,
+  detailsMaxHeight: l = 300,
+  variant: a = "error"
 }) {
-  const [o, h] = v(!1), [g, y] = v(!1), [a, k] = v(!1), s = R(() => {
-    const e = p.Children.toArray(T), u = e.find(
-      (l) => E(l) && !l.props.hide
-    ), w = e.find(N), j = e.filter(
-      (l) => !E(l) && !N(l)
-    );
-    return {
-      message: w ? w.props.children : j.length > 0 ? j : null,
-      details: I ? null : u ? u.props.children : null
-    };
-  }, [T, I]), i = !!s.details;
-  if (D(() => {
-    i || (h(!1), y(!1));
-  }, [i]), D(() => {
-    if (o || !g)
+  const [o, w] = I(!1), [y, C] = I(!1), [c, v] = I(!1), D = m.Children.toArray(i), k = D.find(
+    (e) => B(e) && !e.props.hide
+  ), x = D.find(A), H = D.filter(
+    (e) => !B(e) && !A(e)
+  ), S = x ? /* @__PURE__ */ r(E, { ...x.props }) : H.length > 0 ? H : null, _ = g || !k ? null : k.props, d = _ == null ? void 0 : _.children, u = d != null && d !== !1, {
+    children: ie,
+    hide: le,
+    className: M,
+    style: z,
+    ...R
+  } = _ ?? {};
+  if (N(() => {
+    u || (w(!1), C(!1));
+  }, [u]), N(() => {
+    if (o || !y)
       return;
-    const e = window.setTimeout(() => y(!1), 280);
+    const e = window.setTimeout(() => C(!1), 280);
     return () => window.clearTimeout(e);
-  }, [o, g]), D(() => {
-    if (!a)
+  }, [o, y]), N(() => {
+    if (!c)
       return;
-    const e = window.setTimeout(() => k(!1), 1500);
+    const e = window.setTimeout(() => v(!1), 1500);
     return () => window.clearTimeout(e);
-  }, [a]), !n || !s.message)
+  }, [c]), !n || !S)
     return null;
-  const A = t[`variant${d[0].toUpperCase()}${d.slice(1)}`], B = d === "warning" ? "warning" : d === "default" ? "default" : "error-warning", M = typeof _ == "number" ? `${_}px` : _, C = (e) => e == null || typeof e == "boolean" ? "" : typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map((u) => C(u)).join("") : p.isValidElement(e) ? C(e.props.children) : "", O = async () => {
-    if (!i)
+  const j = t[`variant${a[0].toUpperCase()}${a.slice(1)}`], K = a === "warning" ? "warning" : a === "default" ? "default" : "error-warning", V = typeof l == "number" ? `${l}px` : l, T = (e) => e == null || typeof e == "boolean" ? "" : typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map((L) => T(L)).join("") : m.isValidElement(e) ? T(e.props.children) : "", W = async () => {
+    if (!u)
       return;
-    const e = C(s.details);
+    const e = T(d);
     if (e.trim())
       try {
-        await navigator.clipboard.writeText(e), k(!0);
+        await navigator.clipboard.writeText(e), v(!0);
       } catch {
-        k(!1);
+        v(!1);
       }
-  }, z = () => {
+  }, $ = () => {
     if (o) {
-      h(!1);
+      w(!1);
       return;
     }
-    y(!0), window.requestAnimationFrame(() => {
-      h(!0);
+    C(!0), window.requestAnimationFrame(() => {
+      w(!0);
     });
   };
-  return /* @__PURE__ */ c("div", { className: f(t.error, A, H), children: [
-    /* @__PURE__ */ c("div", { className: t.errorHeader, children: [
-      /* @__PURE__ */ c("div", { className: t.errorHeaderContent, children: [
+  return /* @__PURE__ */ h("div", { className: f(t.error, j, s), children: [
+    /* @__PURE__ */ h("div", { className: t.errorHeader, children: [
+      /* @__PURE__ */ h("div", { className: t.errorHeaderContent, children: [
         /* @__PURE__ */ r(
-          m,
+          p,
           {
             iconKey: "fa-solid fa-triangle-exclamation",
             size: "md",
-            colorToken: B
+            colorToken: K
           }
         ),
-        typeof s.message == "string" || typeof s.message == "number" ? /* @__PURE__ */ r(K, { size: "md", children: s.message }) : s.message
+        S
       ] }),
-      i && /* @__PURE__ */ r(
+      u && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           className: t.detailsToggleButton,
           "aria-label": o ? "Hide details" : "Show details",
           title: o ? "Hide details" : "Show details",
-          onClick: z,
-          children: /* @__PURE__ */ r("span", { className: f(t.detailsChevron, o && t.detailsChevronOpen), children: /* @__PURE__ */ r(m, { iconKey: "fa-light fa-chevron-down", size: "sm", colorToken: "default" }) })
+          onClick: $,
+          children: /* @__PURE__ */ r("span", { className: f(t.detailsChevron, o && t.detailsChevronOpen), children: /* @__PURE__ */ r(p, { iconKey: "fa-light fa-chevron-down", size: "sm", colorToken: "default" }) })
         }
       )
     ] }),
-    i && g && /* @__PURE__ */ c(
+    u && y && /* @__PURE__ */ h(
       "div",
       {
-        className: t.errorDetails,
+        className: f(t.errorDetails, M),
         style: {
-          maxHeight: o ? M : "0px",
+          ...z,
+          maxHeight: o ? V : "0px",
           opacity: o ? 1 : 0,
           overflowY: o ? "auto" : "hidden"
         },
+        ...R,
         children: [
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ h(
             "button",
             {
               type: "button",
               className: t.copyButton,
               "aria-label": "Copy error details",
-              title: a ? "Copied" : "Copy details",
-              onClick: O,
+              title: c ? "Copied" : "Copy details",
+              onClick: W,
               children: [
-                /* @__PURE__ */ r("span", { className: f(t.copyIcon, a && t.hiddenIcon), children: /* @__PURE__ */ r(m, { iconKey: "fa-regular fa-copy", size: "sm", colorToken: "default" }) }),
-                /* @__PURE__ */ r("span", { className: f(t.checkIcon, !a && t.hiddenIcon), children: /* @__PURE__ */ r(m, { iconKey: "fa-regular fa-check", size: "sm", colorToken: "default" }) })
+                /* @__PURE__ */ r("span", { className: f(t.copyIcon, c && t.hiddenIcon), children: /* @__PURE__ */ r(p, { iconKey: "fa-regular fa-copy", size: "sm", colorToken: "default" }) }),
+                /* @__PURE__ */ r("span", { className: f(t.checkIcon, !c && t.hiddenIcon), children: /* @__PURE__ */ r(p, { iconKey: "fa-regular fa-check", size: "sm", colorToken: "default" }) })
               ]
             }
           ),
-          /* @__PURE__ */ r("div", { className: t.errorDetailsContent, children: s.details })
+          /* @__PURE__ */ r("div", { className: t.errorDetailsContent, children: d })
         ]
       }
     )
   ] });
 }
-const ce = Object.assign(te, {
-  Message: x,
-  Details: S
+const _e = Object.assign(se, {
+  Message: E,
+  Details: O
 });
 export {
-  ce as Error
+  _e as Error
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.157",
+  "version": "0.0.158",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",