@caseparts-org/caseblocks 0.0.156 → 0.0.158

package/dist/assets/Error.css

@@ -0,0 +1 @@
+._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/main-client.d.ts

@@ -34,6 +34,8 @@ export { ImageViewer } from './molecules/ImageViewer/ImageViewer';
 export type { ImageViewerProps } from './molecules/ImageViewer/ImageViewer';
 export { Table } from './molecules/Table/Table';
 export type { TableProps, TableAlign, ColumnsProps, ColumnProps, BodyProps, RowProps, CellProps, TableComponent } from './molecules/Table/Table';
+export { Error } from './molecules/Error/Error';
+export type { ErrorProps, ErrorMessageProps, ErrorDetailsProps } from './molecules/Error/Error';
 export { MainNav } from './organisms/MainNav/MainNav';
 export type { MainNavProps } from './organisms/MainNav/MainNav';
 export { ChipSelector } from './organisms/ChipSelector/ChipSelector';

package/dist/main-client.js

@@ -15,10 +15,10 @@ import { configureImage as b } from "./atoms/Image/configureImage.js";
 import { getHideAtStyles as F } from "./atoms/HideAt.js";
 import { Logo as N } from "./molecules/Logo/Logo.js";
 import { SearchBox as z } from "./molecules/SearchBox/SearchBox.js";
-import { QuantityInput as O } from "./molecules/QuantityInput/QuantityInput.js";
-import { Pricing as R } from "./molecules/Pricing/Pricing.js";
-import { Availability as j } from "./molecules/Availability/Availability.js";
-import { Avatar as D } from "./molecules/Avatar/Avatar.js";
+import { QuantityInput as G } from "./molecules/QuantityInput/QuantityInput.js";
+import { Pricing as Q } from "./molecules/Pricing/Pricing.js";
+import { Availability as Z } from "./molecules/Availability/Availability.js";
+import { Avatar as q } from "./molecules/Avatar/Avatar.js";
 import { BannerCard as J } from "./molecules/BannerCard/BannerCard.js";
 import { CardLink as U } from "./molecules/CardLink/CardLink.js";
 import { Breadcrumbs as X } from "./molecules/Breadcrumbs/Breadcrumbs.js";
@@ -40,29 +40,31 @@ import { AddToCart as vo } from "./molecules/AddToCart/AddToCart.js";
 import { Modal as ho } from "./molecules/Modal/Modal.js";
 import { ImageViewer as yo } from "./molecules/ImageViewer/ImageViewer.js";
 import { T as Ho } from "./Table-BX4PtCNE.js";
-import { MainNav as Vo } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as Go } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as Qo } from "./organisms/Product/Product.js";
-import { Carousel as Zo } from "./organisms/Carousel/Carousel.js";
-import { Footer as qo } from "./organisms/Footer/Footer.js";
-import { default as Eo } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
+import { Error as Vo } from "./molecules/Error/Error.js";
+import { MainNav as Eo } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as Oo } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Ro } from "./organisms/Product/Product.js";
+import { Carousel as jo } from "./organisms/Carousel/Carousel.js";
+import { Footer as Do } from "./organisms/Footer/Footer.js";
+import { default as Ko } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
 export {
   so as Account,
   vo as AddToCart,
   Mo as AnimatedCheckMark,
-  j as Availability,
-  D as Avatar,
+  Z as Availability,
+  q as Avatar,
   J as BannerCard,
   X as Breadcrumbs,
   e as Button,
   U as CardLink,
-  Zo as Carousel,
+  jo as Carousel,
   Po as CartSlideInPanel,
   Co as Chip,
-  Go as ChipSelector,
+  Oo as ChipSelector,
   f as Column,
+  Vo as Error,
   p as Flex,
-  qo as Footer,
+  Do as Footer,
   x as Grid,
   n as Head,
   oo as HorizontalScroll,
@@ -72,20 +74,20 @@ export {
   P as Link,
   L as LinkButton,
   N as Logo,
-  Vo as MainNav,
+  Eo as MainNav,
   po as Markdown,
   ho as Modal,
   _ as NotFound,
   uo as Popover,
   fo as PreprocessedMarkdown,
-  R as Pricing,
-  Qo as Product,
-  O as QuantityInput,
+  Q as Pricing,
+  Ro as Product,
+  G as QuantityInput,
   u as Root,
   z as SearchBox,
   s as Separator,
   eo as SlideInPanel,
-  Eo as SpinZoomViewer,
+  Ko as SpinZoomViewer,
   Ao as StatefulButton,
   Ho as Table,
   C as Text,

package/dist/main.d.ts

@@ -22,6 +22,8 @@ export type { ChipProps } from './molecules/Chip/Chip';
 export { Logo } from './molecules/Logo/Logo';
 export { SearchBox } from './molecules/SearchBox/SearchBox';
 export type { SearchBoxProps } from './molecules/SearchBox/SearchBox';
+export { Error } from './molecules/Error/Error';
+export type { ErrorProps, ErrorMessageProps, ErrorDetailsProps, } from './molecules/Error/Error';
 export { ToggleView } from './molecules/ToggleView/ToggleView';
 export type { ToggleViewProps, ToggleOptionProps, ToggleOptionBaseProps, } from './molecules/ToggleView/ToggleView';
 export { MainNav } from './organisms/MainNav/MainNav';

package/dist/main.js

@@ -9,29 +9,31 @@ import { Text as S } from "./atoms/Text/Text.js";
 import { Input as v } from "./atoms/Input/Input.js";
 import { Account as B } from "./molecules/Account/Account.js";
 import { Avatar as T } from "./molecules/Avatar/Avatar.js";
-import { Chip as F } from "./molecules/Chip/Chip.js";
-import { Logo as H } from "./molecules/Logo/Logo.js";
-import { SearchBox as M } from "./molecules/SearchBox/SearchBox.js";
-import { ToggleView as R } from "./molecules/ToggleView/ToggleView.js";
-import { MainNav as b } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as k } from "./organisms/ChipSelector/ChipSelector.js";
+import { Chip as E } from "./molecules/Chip/Chip.js";
+import { Logo as G } from "./molecules/Logo/Logo.js";
+import { SearchBox as L } from "./molecules/SearchBox/SearchBox.js";
+import { Error as N } from "./molecules/Error/Error.js";
+import { ToggleView as V } from "./molecules/ToggleView/ToggleView.js";
+import { MainNav as j } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as q } from "./organisms/ChipSelector/ChipSelector.js";
 export {
   B as Account,
   T as Avatar,
   e as Button,
-  F as Chip,
-  k as ChipSelector,
+  E as Chip,
+  q as ChipSelector,
   m as Column,
+  N as Error,
   p as Flex,
   f as Grid,
   n as Head,
   i as Icon,
   v as Input,
-  H as Logo,
-  b as MainNav,
+  G as Logo,
+  j as MainNav,
   u as Root,
-  M as SearchBox,
+  L as SearchBox,
   h as Separator,
   S as Text,
-  R as ToggleView
+  V as ToggleView
 };

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

@@ -0,0 +1,32 @@
+import { default as React, ReactNode } from 'react';
+import { TextProps } from '../../atoms/Text/Text';
+export interface ErrorProps {
+    isVisible?: boolean;
+    className?: string;
+    children?: ReactNode;
+    hideDetails?: boolean;
+    detailsMaxHeight?: number | string;
+    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 extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    hide?: boolean;
+}
+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;
+}
+export declare const Error: ErrorComponent;
+export {};

package/dist/molecules/Error/Error.js

@@ -0,0 +1,171 @@
+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 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 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 O({ children: n, hide: s, ...i }) {
+  return s ? null : /* @__PURE__ */ r("div", { ...i, children: n });
+}
+function A(n) {
+  return m.isValidElement(n) && n.type === E;
+}
+function B(n) {
+  return m.isValidElement(n) && n.type === O;
+}
+function se({
+  isVisible: n = !0,
+  className: s,
+  children: i,
+  hideDetails: g = !1,
+  detailsMaxHeight: l = 300,
+  variant: a = "error"
+}) {
+  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(() => C(!1), 280);
+    return () => window.clearTimeout(e);
+  }, [o, y]), N(() => {
+    if (!c)
+      return;
+    const e = window.setTimeout(() => v(!1), 1500);
+    return () => window.clearTimeout(e);
+  }, [c]), !n || !S)
+    return null;
+  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 = T(d);
+    if (e.trim())
+      try {
+        await navigator.clipboard.writeText(e), v(!0);
+      } catch {
+        v(!1);
+      }
+  }, $ = () => {
+    if (o) {
+      w(!1);
+      return;
+    }
+    C(!0), window.requestAnimationFrame(() => {
+      w(!0);
+    });
+  };
+  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(
+          p,
+          {
+            iconKey: "fa-solid fa-triangle-exclamation",
+            size: "md",
+            colorToken: K
+          }
+        ),
+        S
+      ] }),
+      u && /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          className: t.detailsToggleButton,
+          "aria-label": o ? "Hide details" : "Show details",
+          title: o ? "Hide details" : "Show details",
+          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" }) })
+        }
+      )
+    ] }),
+    u && y && /* @__PURE__ */ h(
+      "div",
+      {
+        className: f(t.errorDetails, M),
+        style: {
+          ...z,
+          maxHeight: o ? V : "0px",
+          opacity: o ? 1 : 0,
+          overflowY: o ? "auto" : "hidden"
+        },
+        ...R,
+        children: [
+          /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              className: t.copyButton,
+              "aria-label": "Copy error details",
+              title: c ? "Copied" : "Copy details",
+              onClick: W,
+              children: [
+                /* @__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: d })
+        ]
+      }
+    )
+  ] });
+}
+const _e = Object.assign(se, {
+  Message: E,
+  Details: O
+});
+export {
+  _e as Error
+};

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

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+interface DemoArgs {
+    isVisible: boolean;
+    hideDetails: boolean;
+    detailsMaxHeight: number;
+    variant: "error" | "warning" | "default";
+    message: string;
+    details: string;
+}
+declare const meta: Meta<DemoArgs>;
+export default meta;
+type Story = StoryObj<DemoArgs>;
+export declare const Playground: Story;
+export declare const ComposedChildren: Story;
+export declare const WithoutDetails: Story;
+export declare const Hidden: Story;

package/dist/molecules/Error/Error.stories.js

@@ -0,0 +1,105 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { Error as i } from "./Error.js";
+const o = {
+  title: "Case Parts/Molecules/Error",
+  component: i,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+A composed error message component.
+
+Usage:
+- \`<Error />\` as the root wrapper
+- \`<Error.Message />\` for the primary message
+- \`<Error.Details />\` for expandable diagnostic details
+`.trim()
+      }
+    }
+  },
+  argTypes: {
+    isVisible: {
+      control: { type: "boolean" },
+      description: "Controls whether the message is rendered."
+    },
+    hideDetails: {
+      control: { type: "boolean" },
+      description: "Force-hide details content and toggle even when provided."
+    },
+    detailsMaxHeight: {
+      control: { type: "number", min: 80, max: 800, step: 10 },
+      description: "Maximum details panel height in px before vertical scrolling."
+    },
+    variant: {
+      control: { type: "radio" },
+      options: ["error", "warning", "default"],
+      description: "Visual style variant."
+    },
+    message: {
+      control: { type: "text" },
+      description: "Primary message text."
+    },
+    details: {
+      control: { type: "text" },
+      description: "Details text shown in expandable panel."
+    }
+  },
+  args: {
+    isVisible: !0,
+    hideDetails: !1,
+    detailsMaxHeight: 300,
+    variant: "error",
+    message: "We could not load your cart.",
+    details: `Request failed with status 503.
+TraceId: 3de8c8ff-33b7-49c8-a4b7-739f1f3a11a9`
+  }
+}, n = {
+  render: (e) => /* @__PURE__ */ t("div", { style: { width: 640 }, children: /* @__PURE__ */ s(
+    i,
+    {
+      isVisible: e.isVisible,
+      hideDetails: e.hideDetails,
+      detailsMaxHeight: e.detailsMaxHeight,
+      variant: e.variant,
+      children: [
+        /* @__PURE__ */ t(i.Message, { children: e.message }),
+        /* @__PURE__ */ t(i.Details, { children: e.details })
+      ]
+    }
+  ) })
+}, l = {
+  args: {
+    message: "Inventory service reported a warning.",
+    details: `The data source responded with stale data.
+Last refresh: 7m 12s ago.`,
+    variant: "warning"
+  }
+}, d = {
+  render: (e) => /* @__PURE__ */ t("div", { style: { width: 640 }, children: /* @__PURE__ */ t(
+    i,
+    {
+      isVisible: e.isVisible,
+      hideDetails: e.hideDetails,
+      detailsMaxHeight: e.detailsMaxHeight,
+      variant: e.variant,
+      children: /* @__PURE__ */ t(i.Message, { children: e.message })
+    }
+  ) }),
+  args: {
+    message: "An unknown issue occurred.",
+    variant: "default"
+  }
+}, c = {
+  args: {
+    isVisible: !1
+  }
+};
+export {
+  l as ComposedChildren,
+  c as Hidden,
+  n as Playground,
+  d as WithoutDetails,
+  o as default
+};

package/package.json

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