@caseparts-org/caseblocks 0.0.118 → 0.0.119

package/dist/assets/Modal.css

@@ -1 +1 @@
-._overlay_1du2l_1{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}._container_1du2l_11{background-color:var(--surface-surface-primary);color:var(--text-text-primary);border-radius:var(--border-radius-sm);box-shadow:0 4px 6px #0000001a;width:min(800px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}@media (max-width:767px){._container_1du2l_11{border-radius:0;width:100%;box-shadow:none;height:100dvh;max-height:100dvh}}._header_1du2l_30{position:sticky;top:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--surface-surface-secondary);border-bottom:1px solid var(--border-border-secondary-btn);padding:var(--spacing-spacing-2xs);z-index:1}._closeButton_1du2l_43{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:var(--spacing-spacing-4xs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit;padding:0}._content_1du2l_56{overflow:auto;padding:var(--spacing-spacing-default)}@media (max-width:767px){._content_1du2l_56{padding:var(--spacing-spacing-2xs)}}._headerPlain_1du2l_64{background-color:transparent;border-bottom:none}
+._overlay_1mnoo_1{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}._container_1mnoo_11{background-color:var(--surface-surface-primary);color:var(--text-text-primary);border-radius:var(--border-radius-sm);box-shadow:0 4px 6px #0000001a;width:min(800px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}@media (max-width:767px){._container_1mnoo_11{border-radius:0;width:100%;box-shadow:none;height:100dvh;max-height:100dvh}}._toolbar_1mnoo_30{position:sticky;top:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--surface-surface-secondary);border-bottom:1px solid var(--border-border-secondary-btn);padding:var(--spacing-spacing-2xs);gap:var(--spacing-spacing-2xs);z-index:1}._toolbarPlain_1mnoo_44{background-color:transparent;border-bottom:none}._headerGroup_1mnoo_49{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-2xs);flex:1 1 0}._headerLeft_1mnoo_57{justify-content:flex-start}._headerRight_1mnoo_61{justify-content:flex-end}._closeButton_1mnoo_65{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:var(--spacing-spacing-4xs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit;padding:0}._content_1mnoo_78{overflow:auto;padding:var(--spacing-spacing-default)}@media (max-width:767px){._content_1mnoo_78{padding:var(--spacing-spacing-2xs)}}

package/dist/molecules/Modal/Modal.d.ts

@@ -1,13 +1,29 @@
 import { default as React } from 'react';
 export type ModalHeaderSize = "sm" | "md" | "lg";
-export type ModalHeaderVariant = "default" | "plain";
+export type ModalTextVariant = "display" | "body";
+export type ModalToolbarVariant = "standard" | "plain";
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     isOpen: boolean;
-    caption?: string;
     onClose: () => void;
     closeOnOverlayClick?: boolean;
-    contentWrapperClassName?: string;
-    headerSize?: ModalHeaderSize;
-    headerVariant?: ModalHeaderVariant;
 }
-export declare function Modal({ isOpen, caption, onClose, closeOnOverlayClick, headerSize, headerVariant, className, contentWrapperClassName, children, ...otherProps }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+type ModalCompound = React.FC<ModalProps> & {
+    Toolbar: React.FC<ModalToolbarProps>;
+    Header: React.FC<ModalHeaderProps>;
+    CloseButton: React.FC<ModalCloseButtonProps>;
+    Content: React.FC<ModalContentProps>;
+};
+export interface ModalToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: ModalToolbarVariant;
+}
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "left" | "right";
+    size?: ModalHeaderSize;
+    variant?: ModalTextVariant;
+}
+export interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: ModalHeaderSize;
+}
+export type ModalContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Modal: ModalCompound;
+export {};

package/dist/molecules/Modal/Modal.js

@@ -1,75 +1,67 @@
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { c as t } from "../../clsx-OuTLNxxd.js";
-import { Text as p } from "../../atoms/Text/Text.js";
-import { Icon as y } from "../../atoms/Icon/Icon.js";
-import '../../assets/Modal.css';const g = "_overlay_1du2l_1", x = "_container_1du2l_11", N = "_header_1du2l_30", T = "_closeButton_1du2l_43", k = "_content_1du2l_56", z = "_headerPlain_1du2l_64", e = {
-  overlay: g,
-  container: x,
-  header: N,
+import { jsx as r } from "react/jsx-runtime";
+import { c as a } from "../../clsx-OuTLNxxd.js";
+import { Text as _ } from "../../atoms/Text/Text.js";
+import { Icon as u } from "../../atoms/Icon/Icon.js";
+import '../../assets/Modal.css';const h = "_overlay_1mnoo_1", f = "_container_1mnoo_11", p = "_toolbar_1mnoo_30", b = "_toolbarPlain_1mnoo_44", g = "_headerGroup_1mnoo_49", v = "_headerLeft_1mnoo_57", y = "_headerRight_1mnoo_61", T = "_closeButton_1mnoo_65", x = "_content_1mnoo_78", n = {
+  overlay: h,
+  container: f,
+  toolbar: p,
+  toolbarPlain: b,
+  headerGroup: g,
+  headerLeft: v,
+  headerRight: y,
   closeButton: T,
-  content: k,
-  headerPlain: z
-}, B = {
+  content: x
+}, C = {
   sm: "sm",
   md: "md",
   lg: "lg"
-}, C = {
+}, z = {
   sm: "sm",
   md: "md",
   lg: "md"
-};
-function I({
-  isOpen: i,
-  caption: o,
-  onClose: l,
-  closeOnOverlayClick: d = !0,
-  headerSize: n = "md",
-  headerVariant: r = "default",
-  className: m,
-  contentWrapperClassName: u,
-  children: _,
-  ...h
-}) {
-  if (!i) return null;
-  const f = (c) => {
-    d && c.target === c.currentTarget && l();
-  }, v = r === "default" && !!o;
-  return /* @__PURE__ */ a("div", { className: t(e.overlay), onClick: f, children: /* @__PURE__ */ s("div", { className: t(e.container, m), role: "dialog", "aria-modal": "true", ...h, children: [
-    /* @__PURE__ */ s(
-      "div",
-      {
-        className: t(
-          e.header,
-          e[`header-${n}`],
-          r === "plain" && e.headerPlain
-        ),
-        children: [
-          v ? /* @__PURE__ */ a(
-            p,
-            {
-              as: "div",
-              size: B[n],
-              variant: "display",
-              className: e.caption,
-              children: o
-            }
-          ) : /* @__PURE__ */ a("div", { className: e.captionSpacer }),
-          /* @__PURE__ */ a(
-            "button",
-            {
-              type: "button",
-              className: e.closeButton,
-              "aria-label": "Close",
-              onClick: l,
-              children: /* @__PURE__ */ a(y, { iconKey: "fa-regular fa-xmark", size: C[n] })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ a("div", { className: t(e.content, u), children: _ })
-  ] }) });
-}
+}, c = ({
+  isOpen: o,
+  onClose: e,
+  closeOnOverlayClick: t = !0,
+  className: l,
+  children: s,
+  ...i
+}) => {
+  if (!o) return null;
+  const d = (m) => {
+    t && m.target === m.currentTarget && e();
+  };
+  return /* @__PURE__ */ r("div", { className: a(n.overlay), onClick: d, children: /* @__PURE__ */ r("div", { className: a(n.container, l), role: "dialog", "aria-modal": "true", ...i, children: s }) });
+}, B = ({ variant: o = "standard", className: e, children: t, ...l }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: a(n.toolbar, o === "plain" && n.toolbarPlain, e),
+    ...l,
+    children: t
+  }
+), N = ({
+  align: o = "left",
+  size: e = "md",
+  variant: t = "display",
+  className: l,
+  children: s,
+  ...i
+}) => {
+  const d = typeof s == "string";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: a(n.headerGroup, o === "left" ? n.headerLeft : n.headerRight, l),
+      ...i,
+      children: d ? /* @__PURE__ */ r(_, { as: "div", size: C[e], variant: t, children: s }) : s
+    }
+  );
+}, G = ({ size: o = "md", className: e, ...t }) => /* @__PURE__ */ r("button", { type: "button", className: a(n.closeButton, e), "aria-label": "Close", ...t, children: /* @__PURE__ */ r(u, { iconKey: "fa-regular fa-xmark", size: z[o] }) }), L = ({ className: o, children: e, ...t }) => /* @__PURE__ */ r("div", { className: a(n.content, o), ...t, children: e });
+c.Toolbar = B;
+c.Header = N;
+c.CloseButton = G;
+c.Content = L;
 export {
-  I as Modal
+  c as Modal
 };

package/dist/molecules/Modal/Modal.stories.js

@@ -1,110 +1,81 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { Modal as a } from "./Modal.js";
-import { Text as n } from "../../atoms/Text/Text.js";
-import { Button as t } from "../../atoms/Button/Button.js";
-const S = {
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { Modal as l } from "./Modal.js";
+import { Text as r } from "../../atoms/Text/Text.js";
+import { Button as s } from "../../atoms/Button/Button.js";
+const v = {
   title: "Case Parts/Molecules/Modal",
-  component: a,
+  component: l,
   argTypes: {
-    isOpen: {
-      control: { type: "boolean" },
-      description: "Controls visibility of the modal"
-    },
-    caption: {
-      control: { type: "text" },
-      description: "Caption text displayed in the header"
-    },
-    closeOnOverlayClick: {
-      control: { type: "boolean" },
-      description: "Close when clicking on overlay"
-    },
-    headerSize: {
-      control: { type: "radio" },
-      options: ["sm", "md", "lg"],
-      description: "Header size controlling caption and X icon"
-    },
-    headerVariant: {
-      control: { type: "radio" },
-      options: ["default", "plain"],
-      description: "Header variant: styled (default) or plain"
-    }
+    isOpen: { control: { type: "boolean" }, description: "Controls visibility of the modal" },
+    closeOnOverlayClick: { control: { type: "boolean" }, description: "Close when clicking on overlay" }
   },
-  args: {
-    isOpen: !0,
-    caption: "Sample Modal",
-    closeOnOverlayClick: !0,
-    headerSize: "md",
-    headerVariant: "default"
-  }
+  args: { isOpen: !0, closeOnOverlayClick: !0 }
 };
-function m(i) {
-  const [o, r] = l(!!i.isOpen);
-  return /* @__PURE__ */ d("div", { style: { padding: 24 }, children: [
-    /* @__PURE__ */ e(t, { variant: "primary", size: "md", onClick: () => r(!0), children: "Open Modal" }),
-    /* @__PURE__ */ d(
-      a,
-      {
-        isOpen: o,
-        caption: i.caption ?? "Sample Modal",
-        onClose: () => r(!1),
-        closeOnOverlayClick: i.closeOnOverlayClick ?? !0,
-        headerSize: i.headerSize ?? "md",
-        headerVariant: i.headerVariant ?? "default",
-        children: [
-          /* @__PURE__ */ e(n, { as: "p", size: "md", children: "This is a reusable modal with a non-scrollable header. Click the overlay or the X to close." }),
-          /* @__PURE__ */ e("div", { style: { height: 600 }, children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "Scrollable content spacer..." }) })
-        ]
-      }
-    )
+function C(i) {
+  const [a, o] = t(!!i.isOpen);
+  return /* @__PURE__ */ n("div", { style: { padding: 24 }, children: [
+    /* @__PURE__ */ e(s, { variant: "primary", size: "md", onClick: () => o(!0), children: "Open Modal" }),
+    /* @__PURE__ */ n(l, { isOpen: a, onClose: () => o(!1), closeOnOverlayClick: i.closeOnOverlayClick ?? !0, children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "lg", variant: "display", children: "Sample Modal" }),
+        /* @__PURE__ */ e(l.Header, { align: "right", children: /* @__PURE__ */ e(l.CloseButton, { onClick: () => o(!1) }) })
+      ] }),
+      /* @__PURE__ */ n(l.Content, { children: [
+        /* @__PURE__ */ e(r, { as: "p", size: "md", children: "This is a reusable modal with a non-scrollable toolbar. Click the overlay or the X to close." }),
+        /* @__PURE__ */ e("div", { style: { height: 600 }, children: /* @__PURE__ */ e(r, { as: "p", size: "sm", children: "Scrollable content spacer..." }) })
+      ] })
+    ] })
   ] });
 }
-const C = {
-  render: (i) => /* @__PURE__ */ e(m, { ...i })
+const k = {
+  render: (i) => /* @__PURE__ */ e(C, { ...i })
 };
-function h() {
-  const [i, o] = l(!1), [r, s] = l(!1), [p, c] = l(!1);
-  return /* @__PURE__ */ d("div", { style: { display: "grid", gap: 12 }, children: [
-    /* @__PURE__ */ e(t, { variant: "secondary", size: "sm", onClick: () => o(!0), children: "Small Header" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        isOpen: i,
-        caption: "Small Header",
-        onClose: () => o(!1),
-        headerSize: "sm",
-        children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "Small header modal content." })
-      }
-    ),
-    /* @__PURE__ */ e(t, { variant: "primary", size: "md", onClick: () => s(!0), children: "Medium Header" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        isOpen: r,
-        caption: "Medium Header",
-        onClose: () => s(!1),
-        headerSize: "md",
-        children: /* @__PURE__ */ e(n, { as: "p", size: "md", children: "Medium header modal content." })
-      }
-    ),
-    /* @__PURE__ */ e(t, { variant: "cta-primary", size: "lg", onClick: () => c(!0), children: "Large Header" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        isOpen: p,
-        caption: "Large Header",
-        onClose: () => c(!1),
-        headerSize: "lg",
-        children: /* @__PURE__ */ e(n, { as: "p", size: "lg", children: "Large header modal content." })
-      }
-    )
+function g() {
+  const [i, a] = t(!1), [o, d] = t(!1), [m, c] = t(!1), [p, h] = t(!1);
+  return /* @__PURE__ */ n("div", { style: { width: "200px", display: "grid", gap: 12 }, children: [
+    /* @__PURE__ */ e(s, { variant: "secondary", size: "sm", onClick: () => a(!0), children: "Small Header" }),
+    /* @__PURE__ */ n(l, { isOpen: i, onClose: () => a(!1), children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "sm", variant: "display", children: "Small Header" }),
+        /* @__PURE__ */ e(l.Header, { align: "right", children: /* @__PURE__ */ e(l.CloseButton, { size: "sm", onClick: () => a(!1) }) })
+      ] }),
+      /* @__PURE__ */ e(l.Content, { children: /* @__PURE__ */ e(r, { as: "p", size: "sm", children: "Small header modal content." }) })
+    ] }),
+    /* @__PURE__ */ e(s, { variant: "primary", size: "md", onClick: () => d(!0), children: "Medium Header" }),
+    /* @__PURE__ */ n(l, { isOpen: o, onClose: () => d(!1), children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "md", variant: "display", children: "Medium Header" }),
+        /* @__PURE__ */ e(l.Header, { align: "right", children: /* @__PURE__ */ e(l.CloseButton, { size: "md", onClick: () => d(!1) }) })
+      ] }),
+      /* @__PURE__ */ e(l.Content, { children: /* @__PURE__ */ e(r, { as: "p", size: "md", children: "Medium header modal content." }) })
+    ] }),
+    /* @__PURE__ */ e(s, { variant: "cta-primary", size: "lg", onClick: () => c(!0), children: "Large Header" }),
+    /* @__PURE__ */ n(l, { isOpen: m, onClose: () => c(!1), children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "lg", variant: "display", children: "Large Header" }),
+        /* @__PURE__ */ e(l.Header, { align: "right", children: /* @__PURE__ */ e(l.CloseButton, { size: "md", onClick: () => c(!1) }) })
+      ] }),
+      /* @__PURE__ */ e(l.Content, { children: /* @__PURE__ */ e(r, { as: "p", size: "lg", children: "Large header modal content." }) })
+    ] }),
+    /* @__PURE__ */ e(s, { variant: "tertiary", size: "md", onClick: () => h(!0), children: "Custom Toolbar" }),
+    /* @__PURE__ */ n(l, { isOpen: p, onClose: () => h(!1), children: [
+      /* @__PURE__ */ n(l.Toolbar, { children: [
+        /* @__PURE__ */ e(l.Header, { align: "left", size: "md", variant: "display", children: "Custom Toolbar" }),
+        /* @__PURE__ */ n(l.Header, { align: "right", children: [
+          /* @__PURE__ */ e("button", { onClick: () => alert("Sent!"), children: "Send Email" }),
+          /* @__PURE__ */ e(l.CloseButton, { size: "md", onClick: () => h(!1) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(l.Content, { children: /* @__PURE__ */ e(r, { as: "p", size: "md", children: "Modal with custom toolbar functions." }) })
+    ] })
   ] });
 }
-const v = {
-  render: () => /* @__PURE__ */ e(h, {})
+const b = {
+  render: () => /* @__PURE__ */ e(g, {})
 };
 export {
-  C as Basic,
-  v as Sizes,
-  S as default
+  k as Basic,
+  b as Sizes,
+  v as default
 };

package/package.json

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