@caseparts-org/caseblocks 0.0.89 → 0.0.91

package/dist/atoms/Popover/Popover.stories.js

@@ -0,0 +1,207 @@
+import { jsxs as t, jsx as e, Fragment as n } from "react/jsx-runtime";
+import a from "react";
+import { Popover as i } from "./Popover.js";
+import { Button as o } from "../Button/Button.js";
+const k = {
+  title: "Case Parts/Atoms/Popover",
+  component: i,
+  parameters: {
+    layout: "centered",
+    controls: { sort: "requiredFirst" },
+    docs: {
+      description: {
+        component: "Interactive popover opened by clicking its trigger. Closes on outside click or Escape. Position accepts side plus optional alignment."
+      }
+    }
+  },
+  tags: ["autodocs"],
+  args: {
+    position: "top center",
+    closeOnOutsideClick: !0,
+    disabled: !1
+  },
+  argTypes: {
+    position: {
+      control: "select",
+      options: [
+        "top",
+        "top left",
+        "top center",
+        "top right",
+        "right",
+        "right top",
+        "right center",
+        "right bottom",
+        "bottom",
+        "bottom left",
+        "bottom center",
+        "bottom right",
+        "left",
+        "left top",
+        "left center",
+        "left bottom"
+      ],
+      description: "Side plus optional alignment; single side centers automatically."
+    },
+    closeOnOutsideClick: {
+      control: "boolean",
+      description: "Close when clicking outside the popover."
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disable opening."
+    },
+    popoverClassName: { table: { disable: !0 } },
+    contentClassName: { table: { disable: !0 } },
+    trigger: { table: { disable: !0 }, description: "Trigger element (click opens)." },
+    children: { description: "Popover content (interactive)." }
+  }
+}, r = () => /* @__PURE__ */ e("style", { children: ".storyRoboto{font-family:'Roboto',sans-serif;}" }), R = {
+  render: (c) => /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(r, {}),
+    /* @__PURE__ */ e(
+      i,
+      {
+        ...c,
+        contentClassName: "storyRoboto",
+        trigger: /* @__PURE__ */ e(o, { size: "md", variant: "primary", children: "Open form" }),
+        children: /* @__PURE__ */ e(() => {
+          const [s, m] = a.useState(""), [p, h] = a.useState(""), [g, u] = a.useState(!1);
+          return /* @__PURE__ */ t(
+            "form",
+            {
+              onSubmit: (l) => {
+                l.preventDefault(), u(!0);
+              },
+              style: { display: "flex", flexDirection: "column", gap: 8, minWidth: 220 },
+              children: [
+                /* @__PURE__ */ t("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+                  /* @__PURE__ */ e("span", { children: "Name" }),
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      value: s,
+                      onChange: (l) => m(l.target.value),
+                      placeholder: "Jane Doe",
+                      style: { padding: 4 }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ t("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+                  /* @__PURE__ */ e("span", { children: "Email" }),
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "email",
+                      value: p,
+                      onChange: (l) => h(l.target.value),
+                      placeholder: "jane@example.com",
+                      style: { padding: 4 }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e("button", { type: "submit", style: { padding: "4px 8px" }, children: "Submit" }),
+                g && /* @__PURE__ */ t("div", { style: { fontSize: 12, color: "var(--color-neutrals-neutral-6)" }, children: [
+                  "Submitted: ",
+                  s || "(no name)",
+                  ", ",
+                  p || "(no email)"
+                ] })
+              ]
+            }
+          );
+        }, {})
+      }
+    )
+  ] })
+}, N = {
+  render: () => /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(r, {}),
+    /* @__PURE__ */ e(
+      i,
+      {
+        position: "bottom center",
+        contentClassName: "storyRoboto",
+        trigger: /* @__PURE__ */ e(o, { size: "md", variant: "secondary", children: "Bottom" }),
+        children: "Positioned below the trigger."
+      }
+    )
+  ] })
+}, S = {
+  render: () => /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(r, {}),
+    /* @__PURE__ */ e(
+      i,
+      {
+        position: "right center",
+        contentClassName: "storyRoboto",
+        trigger: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Right" }),
+        children: "Popover to the right."
+      }
+    )
+  ] })
+}, P = {
+  render: () => /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(r, {}),
+    /* @__PURE__ */ e(
+      i,
+      {
+        position: "left center",
+        contentClassName: "storyRoboto",
+        trigger: /* @__PURE__ */ e(o, { size: "md", variant: "tertiary", children: "Left" }),
+        children: "Popover to the left."
+      }
+    )
+  ] })
+}, O = {
+  render: () => /* @__PURE__ */ e(y, {})
+}, y = () => {
+  const [c, d] = a.useState(0);
+  return /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(r, {}),
+    /* @__PURE__ */ e(
+      i,
+      {
+        position: "bottom left",
+        contentClassName: "storyRoboto",
+        trigger: /* @__PURE__ */ e(o, { size: "md", variant: "primary", children: "More interactivity" }),
+        children: /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 10, minWidth: 240 }, children: [
+          /* @__PURE__ */ e("div", { style: { fontWeight: 500 }, children: "Counter demo" }),
+          /* @__PURE__ */ t("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+            /* @__PURE__ */ e(o, { size: "sm", variant: "secondary", onClick: () => d((s) => s + 1), children: "Increment" }),
+            /* @__PURE__ */ e("span", { style: { minWidth: 32, textAlign: "center" }, children: c }),
+            /* @__PURE__ */ e(o, { size: "sm", variant: "tertiary", onClick: () => d(0), children: "Reset" })
+          ] }),
+          /* @__PURE__ */ e("hr", { style: { border: 0, height: 1, background: "#ddd" } }),
+          /* @__PURE__ */ t("label", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+            /* @__PURE__ */ e("span", { children: "Notes" }),
+            /* @__PURE__ */ e("textarea", { rows: 3, placeholder: "Type notes...", style: { padding: 4 } })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}, z = {
+  render: () => /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(r, {}),
+    /* @__PURE__ */ e(
+      i,
+      {
+        position: "top center",
+        closeOnOutsideClick: !1,
+        contentClassName: "storyRoboto",
+        trigger: /* @__PURE__ */ e(o, { size: "md", variant: "destructive", children: "Manual close" }),
+        children: "Outside clicks will NOT close me. Press Escape."
+      }
+    )
+  ] })
+};
+export {
+  R as BasicClick,
+  N as BottomClick,
+  O as InteractiveContent,
+  z as OutsideClickDisabled,
+  P as PositionLeft,
+  S as PositionRight,
+  k as default
+};

package/dist/atoms/SlideInPanel/SlideInPanel.d.ts

@@ -0,0 +1,18 @@
+import { HideAtProps } from '../HideAt';
+import * as React from "react";
+export type SlideInSide = "left" | "right" | "bottom";
+export interface SlideInPanelProps extends HideAtProps {
+    side: SlideInSide;
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    overlayClassName?: string;
+    panelClassName?: string;
+    closeOnOverlayClick?: boolean;
+    disableEsc?: boolean;
+    ariaLabel?: string;
+}
+export declare const SlideInPanel: React.FC<SlideInPanelProps>;

package/dist/atoms/SlideInPanel/SlideInPanel.js

@@ -0,0 +1,99 @@
+import { jsxs as k, jsx as u } from "react/jsx-runtime";
+import * as r from "react";
+import { r as A } from "../../index-B4KbmMH3.js";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as N } from "../HideAt.js";
+import '../../assets/SlideInPanel.css';const q = "_root_12lt6_1", P = "_overlay_12lt6_8", R = "_panel_12lt6_16", j = "_active_12lt6_52", o = {
+  root: q,
+  overlay: P,
+  panel: R,
+  "panel-left": "_panel-left_12lt6_29",
+  "panel-right": "_panel-right_12lt6_36",
+  "panel-bottom": "_panel-bottom_12lt6_43",
+  active: j,
+  "from-left": "_from-left_12lt6_52",
+  "from-right": "_from-right_12lt6_53",
+  "from-bottom": "_from-bottom_12lt6_54"
+}, D = ({
+  side: a,
+  open: t,
+  onClose: l,
+  children: d,
+  width: v = 375,
+  height: p = "50%",
+  className: y,
+  overlayClassName: b,
+  panelClassName: h,
+  closeOnOverlayClick: x = !0,
+  disableEsc: m = !1,
+  hideAt: E,
+  ariaLabel: g = "Panel"
+}) => {
+  const [n, _] = r.useState(t), [s, i] = r.useState(!1);
+  r.useEffect(() => {
+    t ? (n || _(!0), i(!1), requestAnimationFrame(() => {
+      requestAnimationFrame(() => i(!0));
+    })) : i(!1);
+  }, [t, n]), r.useEffect(() => {
+    if (!t || m) return;
+    const e = (S) => {
+      S.key === "Escape" && l();
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [t, m, l]);
+  const f = r.useRef(null);
+  if (r.useEffect(() => {
+    if (t && s && f.current) {
+      const e = f.current.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      e == null || e.focus();
+    }
+  }, [t, s]), !n || typeof document > "u") return null;
+  const w = a === "bottom" ? { height: p } : { width: v };
+  return A.createPortal(
+    /* @__PURE__ */ k(
+      "div",
+      {
+        className: c(
+          o.root,
+          o[`from-${a}`],
+          s && o.active,
+          N(E),
+          y
+        ),
+        "aria-hidden": !t,
+        children: [
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: c(o.overlay, b),
+              onClick: () => {
+                t && x && l();
+              }
+            }
+          ),
+          /* @__PURE__ */ u(
+            "div",
+            {
+              ref: f,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": g,
+              className: c(o.panel, o[`panel-${a}`], h),
+              style: w,
+              onTransitionEnd: (e) => {
+                e.propertyName === "transform" && !t && _(!1);
+              },
+              children: d
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+export {
+  D as SlideInPanel
+};

package/dist/atoms/SlideInPanel/SlideInPanel.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SlideInPanel } from './SlideInPanel';
+declare const meta: Meta<typeof SlideInPanel>;
+export default meta;
+type Story = StoryObj<typeof SlideInPanel>;
+export declare const RightPanel: Story;
+export declare const LeftPanel: Story;
+export declare const BottomPanel: Story;
+export declare const CustomSize: Story;
+export declare const OverlayClickDisabled: Story;

package/dist/atoms/SlideInPanel/SlideInPanel.stories.js

@@ -0,0 +1,117 @@
+import { jsx as t, jsxs as i, Fragment as h } from "react/jsx-runtime";
+import * as a from "react";
+import { SlideInPanel as c } from "./SlideInPanel.js";
+import { Button as l } from "../Button/Button.js";
+const y = {
+  title: "Case Parts/Atoms/SlideInPanel",
+  component: c,
+  parameters: {
+    layout: "centered",
+    controls: { sort: "requiredFirst" }
+  },
+  tags: ["autodocs"],
+  args: {
+    side: "right",
+    open: !1,
+    width: 360,
+    height: "50%",
+    closeOnOverlayClick: !0,
+    disableEsc: !1,
+    ariaLabel: "Panel"
+  },
+  argTypes: {
+    side: {
+      control: "select",
+      options: ["left", "right", "bottom"],
+      description: "Edge the panel slides in from."
+    },
+    open: {
+      control: "boolean",
+      description: "Panel visibility (storybook control)."
+    },
+    width: {
+      control: "text",
+      description: "Panel width (left/right). Number or CSS width."
+    },
+    height: {
+      control: "text",
+      description: "Panel height (bottom). Number or CSS height."
+    },
+    closeOnOverlayClick: {
+      control: "boolean",
+      description: "Close when clicking the dark overlay."
+    },
+    disableEsc: {
+      control: "boolean",
+      description: "Disable Escape key closing."
+    },
+    ariaLabel: {
+      control: "text",
+      description: "Accessible label for dialog."
+    },
+    hideAt: { table: { disable: !0 } },
+    // internal responsive prop
+    onClose: { table: { disable: !0 } },
+    // implemented internally
+    children: { description: "Panel content." }
+  }
+}, m = () => /* @__PURE__ */ t("style", { children: ".storyRoboto{font-family:'Roboto',sans-serif;}" });
+function o(e) {
+  const [r, n] = a.useState(e.open);
+  a.useEffect(() => n(e.open), [e.open]);
+  const s = () => n(!1);
+  return /* @__PURE__ */ i(h, { children: [
+    /* @__PURE__ */ t(m, {}),
+    /* @__PURE__ */ t(l, { size: "md", variant: "primary", onClick: () => n((d) => !d), children: r ? "Hide Panel" : "Show Panel" }),
+    /* @__PURE__ */ t(
+      c,
+      {
+        ...e,
+        open: r,
+        onClose: s,
+        panelClassName: "storyRoboto",
+        children: /* @__PURE__ */ i("div", { style: { padding: 16 }, children: [
+          /* @__PURE__ */ t("h3", { style: { margin: "0 0 12px" }, children: "SlideInPanel" }),
+          /* @__PURE__ */ i("p", { style: { margin: 0, fontSize: 14 }, children: [
+            "This panel slides from the ",
+            /* @__PURE__ */ t("strong", { children: e.side }),
+            ". Resize it with width/height args. Press Escape or click overlay (if enabled) to close."
+          ] }),
+          /* @__PURE__ */ i("div", { style: { marginTop: 16, display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ t(l, { size: "sm", variant: "secondary", onClick: s, children: "Close" }),
+            /* @__PURE__ */ t(l, { size: "sm", variant: "tertiary", onClick: () => alert("Action"), children: "Action" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+const C = {
+  name: "Right",
+  render: (e) => /* @__PURE__ */ t(o, { ...e }),
+  args: { side: "right", width: 360 }
+}, u = {
+  name: "Left",
+  render: (e) => /* @__PURE__ */ t(o, { ...e }),
+  args: { side: "left", width: 320 }
+}, P = {
+  name: "Bottom",
+  render: (e) => /* @__PURE__ */ t(o, { ...e }),
+  args: { side: "bottom", height: "40%" }
+}, k = {
+  name: "Custom Size",
+  render: (e) => /* @__PURE__ */ t(o, { ...e }),
+  args: { side: "right", width: "480px" }
+}, v = {
+  name: "Overlay Click Disabled",
+  render: (e) => /* @__PURE__ */ t(o, { ...e }),
+  args: { side: "right", closeOnOverlayClick: !1 }
+};
+export {
+  P as BottomPanel,
+  k as CustomSize,
+  u as LeftPanel,
+  v as OverlayClickDisabled,
+  C as RightPanel,
+  y as default
+};

package/dist/atoms/Tooltip/Tooltip.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+type PositionKeyword = "top" | "right" | "bottom" | "left";
+type Position = "top left" | "top center" | "top right" | "right top" | "right center" | "right bottom" | "bottom left" | "bottom center" | "bottom right" | "left top" | "left center" | "left bottom" | PositionKeyword;
+export type TooltipProps = {
+    children: React.ReactNode;
+    trigger: React.ReactElement;
+    tooltipClassName?: string;
+    contentClassName?: string;
+    position?: Position;
+    openDelay?: number;
+    closeDelay?: number;
+    disabled?: boolean;
+    leaveGraceMs?: number;
+};
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

package/dist/atoms/Tooltip/Tooltip.js

@@ -0,0 +1,126 @@
+import { jsxs as H, Fragment as N, jsx as F } from "react/jsx-runtime";
+import * as r from "react";
+import { c as M } from "../../clsx-OuTLNxxd.js";
+import { r as O } from "../../index-B4KbmMH3.js";
+import '../../assets/Tooltip.css';const W = "_tooltip_17o7a_1", A = "_content_17o7a_11", S = {
+  tooltip: W,
+  content: A
+};
+function D(l) {
+  return l ? l.includes(" ") ? l : `${l} center` : "top center";
+}
+function I(l) {
+  const m = D(l).toLowerCase(), [i, t] = m.split(" ");
+  return { side: ["top", "right", "bottom", "left"].includes(i) ? i : "top", align: t === "left" || t === "top" ? "start" : t === "right" || t === "bottom" ? "end" : "center" };
+}
+function $(l, m, i, t, a = 8) {
+  const e = l.getBoundingClientRect(), u = m.getBoundingClientRect();
+  let f = 0, s = 0;
+  i === "top" ? f = e.top - u.height - a : i === "bottom" ? f = e.bottom + a : i === "left" ? s = e.left - u.width - a : i === "right" && (s = e.right + a), i === "top" || i === "bottom" ? t === "start" ? s = e.left : t === "end" ? s = e.right - u.width : s = e.left + e.width / 2 - u.width / 2 : t === "start" ? f = e.top : t === "end" ? f = e.bottom - u.height : f = e.top + e.height / 2 - u.height / 2;
+  const h = window.innerWidth, w = window.innerHeight;
+  return f = Math.max(4, Math.min(w - u.height - 4, f)), s = Math.max(4, Math.min(h - u.width - 4, s)), { top: f, left: s };
+}
+const K = ({
+  tooltipClassName: l,
+  contentClassName: m,
+  children: i,
+  trigger: t,
+  position: a,
+  disabled: e,
+  openDelay: u = 150,
+  closeDelay: f = 100,
+  leaveGraceMs: s = 0
+}) => {
+  const { side: h, align: w } = I(a), [c, E] = r.useState(!1), [d, g] = r.useState(null), _ = r.useRef(null), z = r.useRef(null), T = r.useRef(null), R = r.useRef(null), y = r.useRef(null), L = r.useRef(!1), p = (n) => {
+    n.current && (window.clearTimeout(n.current), n.current = null);
+  }, C = () => {
+    p(T), p(R), p(y);
+  };
+  r.useEffect(() => () => C(), []);
+  const B = () => {
+    e || c || (p(T), T.current = window.setTimeout(() => E(!0), u));
+  }, x = () => {
+    c && (p(R), R.current = window.setTimeout(() => {
+      L.current || E(!1);
+    }, f));
+  }, k = () => {
+    if (c) {
+      if (p(y), s <= 0) {
+        x();
+        return;
+      }
+      y.current = window.setTimeout(() => {
+        L.current || x();
+      }, s);
+    }
+  }, P = (n, o) => (b) => {
+    n == null || n(b), o == null || o(b);
+  }, j = r.cloneElement(t, {
+    ref: (n) => {
+      const { ref: o } = t;
+      typeof o == "function" ? o(n) : o && (o.current = n), _.current = n;
+    },
+    onPointerEnter: P(t.props.onPointerEnter, B),
+    onPointerLeave: P(t.props.onPointerLeave, k),
+    onFocus: P(t.props.onFocus, B),
+    onBlur: P(t.props.onBlur, x),
+    "aria-describedby": c ? "tooltip-popup" : void 0,
+    style: { ...t.props.style || {}, outline: "none" }
+  });
+  return r.useEffect(() => {
+    e && c && (C(), E(!1));
+  }, [e]), r.useEffect(() => {
+    if (!c) return;
+    const n = (o) => {
+      o.key === "Escape" && E(!1);
+    };
+    return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
+  }, [c]), r.useLayoutEffect(() => {
+    if (!c) {
+      g(null);
+      return;
+    }
+    const n = _.current, o = z.current;
+    if (!n || !o) return;
+    const b = 8, v = () => {
+      g($(n, o, h, w, b));
+    };
+    return v(), window.addEventListener("resize", v), window.addEventListener("scroll", v, !0), () => {
+      window.removeEventListener("resize", v), window.removeEventListener("scroll", v, !0);
+    };
+  }, [c, h, w, i]), /* @__PURE__ */ H(N, { children: [
+    j,
+    c && typeof document < "u" && O.createPortal(
+      /* @__PURE__ */ F(
+        "div",
+        {
+          id: "tooltip-popup",
+          ref: z,
+          role: "tooltip",
+          "aria-hidden": !c,
+          "data-side": h,
+          "data-align": w,
+          className: M(S.tooltip, l),
+          style: {
+            position: "absolute",
+            top: (d == null ? void 0 : d.top) ?? 0,
+            left: (d == null ? void 0 : d.left) ?? 0,
+            visibility: d ? "visible" : "hidden",
+            zIndex: 10
+          },
+          onPointerEnter: () => {
+            L.current = !0, p(R), p(y);
+          },
+          onPointerLeave: () => {
+            L.current = !1, k();
+          },
+          children: /* @__PURE__ */ F("div", { className: M(S.content, m), children: i })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+export {
+  K as Tooltip
+};

package/dist/{molecules → atoms}/Tooltip/Tooltip.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { Tooltip } from './Tooltip';
 declare const meta: {
     title: string;
-    component: typeof Tooltip;
+    component: import('react').FC<import('./Tooltip').TooltipProps>;
     parameters: {
         layout: string;
         controls: {
@@ -16,42 +16,24 @@ declare const meta: {
     };
     tags: string[];
     args: {
-        on: "mouseenter focus";
-        placement: "top";
-        mouseEnterDelay: number;
-        mouseLeaveDelay: number;
-        arrow: true;
+        position: "top center";
+        openDelay: number;
+        closeDelay: number;
     };
     argTypes: {
-        on: {
+        position: {
             control: "select";
             options: string[];
             description: string;
         };
-        placement: {
-            control: "select";
-            options: string[];
-            description: string;
-        };
-        mouseEnterDelay: {
+        openDelay: {
             control: "number";
             description: string;
         };
-        mouseLeaveDelay: {
+        closeDelay: {
             control: "number";
             description: string;
         };
-        delay: {
-            control: false;
-            table: {
-                category: string;
-            };
-            description: string;
-        };
-        arrow: {
-            control: "boolean";
-            description: string;
-        };
         contentClassName: {
             table: {
                 disable: true;
@@ -76,7 +58,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof Tooltip>;
 export declare const OnHover: Story;
-export declare const OnClick: Story;
+export declare const BottomHover: Story;
 export declare const PositionRight: Story;
 export declare const PositionLeft: Story;
 export declare const AbsolutelyPositioned: Story;