@caseparts-org/caseblocks 0.0.156 → 0.0.157

package/dist/assets/Error.css

@@ -0,0 +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)}

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,24 @@
+import { default as React, ReactNode } from 'react';
+export interface ErrorProps {
+    isVisible?: boolean;
+    className?: string;
+    children?: ReactNode;
+    hideDetails?: boolean;
+    detailsMaxHeight?: number | string;
+    variant?: "error" | "warning" | "default";
+}
+export interface ErrorMessageProps {
+    children?: ReactNode;
+}
+export interface ErrorDetailsProps {
+    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;
+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,148 @@
+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 { 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
+};
+function x({ children: n }) {
+  return /* @__PURE__ */ r(b, { children: n });
+}
+function S({ children: n }) {
+  return /* @__PURE__ */ r(b, { children: n });
+}
+function N(n) {
+  return p.isValidElement(n) && n.type === x;
+}
+function E(n) {
+  return p.isValidElement(n) && n.type === S;
+}
+function te({
+  isVisible: n = !0,
+  className: H,
+  children: T,
+  hideDetails: I = !1,
+  detailsMaxHeight: _ = 300,
+  variant: d = "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)
+      return;
+    const e = window.setTimeout(() => y(!1), 280);
+    return () => window.clearTimeout(e);
+  }, [o, g]), D(() => {
+    if (!a)
+      return;
+    const e = window.setTimeout(() => k(!1), 1500);
+    return () => window.clearTimeout(e);
+  }, [a]), !n || !s.message)
+    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)
+      return;
+    const e = C(s.details);
+    if (e.trim())
+      try {
+        await navigator.clipboard.writeText(e), k(!0);
+      } catch {
+        k(!1);
+      }
+  }, z = () => {
+    if (o) {
+      h(!1);
+      return;
+    }
+    y(!0), window.requestAnimationFrame(() => {
+      h(!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: [
+        /* @__PURE__ */ r(
+          m,
+          {
+            iconKey: "fa-solid fa-triangle-exclamation",
+            size: "md",
+            colorToken: B
+          }
+        ),
+        typeof s.message == "string" || typeof s.message == "number" ? /* @__PURE__ */ r(K, { size: "md", children: s.message }) : s.message
+      ] }),
+      i && /* @__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" }) })
+        }
+      )
+    ] }),
+    i && g && /* @__PURE__ */ c(
+      "div",
+      {
+        className: t.errorDetails,
+        style: {
+          maxHeight: o ? M : "0px",
+          opacity: o ? 1 : 0,
+          overflowY: o ? "auto" : "hidden"
+        },
+        children: [
+          /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              className: t.copyButton,
+              "aria-label": "Copy error details",
+              title: a ? "Copied" : "Copy details",
+              onClick: O,
+              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("div", { className: t.errorDetailsContent, children: s.details })
+        ]
+      }
+    )
+  ] });
+}
+const ce = Object.assign(te, {
+  Message: x,
+  Details: S
+});
+export {
+  ce 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.157",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",