@pismo/marola 0.0.1-alpha.1 → 0.0.1-alpha.12

package/dist/components/Toggle/Toggle.stories.js

@@ -0,0 +1,33 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { Toggle as c } from "./Toggle.js";
+const l = {
+  title: "Components/Toggle",
+  component: c,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded"
+  }
+}, h = {
+  render: () => {
+    const [e, t] = r(!1);
+    return /* @__PURE__ */ o(c, { checked: e, onChange: (a) => t(a.target.checked) });
+  }
+}, m = {
+  name: "With label",
+  render: () => {
+    const [e, t] = r(!1);
+    return /* @__PURE__ */ o(c, { label: "Active", checked: e, onChange: (a) => t(a.target.checked) });
+  }
+}, g = {
+  render: () => {
+    const [e, t] = r(!1);
+    return /* @__PURE__ */ o(c, { label: "Active", disabled: !0, checked: e, onChange: (a) => t(a.target.checked) });
+  }
+};
+export {
+  g as Disabled,
+  h as Simple,
+  m as WithLabel,
+  l as default
+};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,17 @@
+import { PopupPlacement } from '@mui/base';
+
+type TooltipProps = {
+    children: React.ReactNode;
+    show?: boolean;
+    anchorRef?: HTMLElement | null | undefined;
+    disableHoverListener?: boolean;
+    onClose?: () => void;
+    theme?: 'white' | 'black';
+    padding?: 'small' | 'normal';
+    position?: PopupPlacement;
+    arialRole?: React.AriaRole;
+    className?: string;
+    'data-testid'?: string;
+};
+declare const Tooltip: ({ children, show, anchorRef, onClose, arialRole, position, theme, padding, className, disableHoverListener, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export { Tooltip };

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,127 @@
+import '../../assets/Tooltip.css';
+import { jsx as a } from "react/jsx-runtime";
+import * as d from "react";
+import { useRef as k, useState as E, useEffect as w } from "react";
+import { T as v, P } from "../../Popup-DFJQc_jn.js";
+import { _ as S, a as q } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import { P as l } from "../../index-CqjC7P5Y.js";
+import { c as M } from "../../clsx-DB4S2d7J.js";
+import { C as O } from "../../ClickAwayListener-HI1G6ob9.js";
+function $() {
+  const n = d.useContext(v);
+  if (!n)
+    throw new Error("Missing transition context");
+  const {
+    registerTransition: i,
+    requestedEnter: t,
+    onExited: o
+  } = n;
+  return d.useEffect(() => i(), [i]), {
+    onExited: o,
+    requestedEnter: t
+  };
+}
+const z = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
+function A(n) {
+  const {
+    children: i,
+    className: t,
+    enterAnimationName: o,
+    enterClassName: f,
+    exitAnimationName: p,
+    exitClassName: x
+  } = n, h = S(n, z), {
+    requestedEnter: c,
+    onExited: s
+  } = $(), m = d.useRef(!0);
+  d.useEffect(() => {
+    c && m.current && (m.current = !1);
+  }, [c]);
+  const e = d.useCallback((u) => {
+    u.animationName === p ? (s(), m.current = !0) : u.animationName === o && (m.current = !1);
+  }, [s, p, o]);
+  return /* @__PURE__ */ a("div", q({
+    onAnimationEnd: e,
+    className: M(t, c ? f : x)
+  }, h, {
+    children: i
+  }));
+}
+process.env.NODE_ENV !== "production" && (A.propTypes = {
+  children: l.node,
+  className: l.string,
+  enterAnimationName: l.string,
+  enterClassName: l.string,
+  exitAnimationName: l.string,
+  exitClassName: l.string
+});
+const D = "_tooltip_1dujm_1", r = {
+  tooltip: D,
+  "tooltip--small-padding": "_tooltip--small-padding_1dujm_5",
+  "tooltip--normal-padding": "_tooltip--normal-padding_1dujm_8",
+  "tooltip--white-theme": "_tooltip--white-theme_1dujm_11",
+  "tooltip--black-theme": "_tooltip--black-theme_1dujm_15",
+  "tooltip--animation": "_tooltip--animation_1dujm_20",
+  "tooltip--anim-open": "_tooltip--anim-open_1dujm_20",
+  "tooltip--open-animation": "_tooltip--open-animation_1dujm_1",
+  "tooltip--anim-close": "_tooltip--anim-close_1dujm_23",
+  "tooltip--close-animation": "_tooltip--close-animation_1dujm_1"
+}, K = ({
+  children: n,
+  show: i,
+  anchorRef: t,
+  onClose: o,
+  arialRole: f,
+  position: p = "bottom",
+  theme: x = "black",
+  padding: h = "small",
+  className: c,
+  disableHoverListener: s,
+  ...m
+}) => {
+  const e = k(null), [u, g] = E(i || !1), [C, j] = E(t || null);
+  w(() => {
+    var _;
+    if (!t && (e != null && e.current)) {
+      const N = (_ = e == null ? void 0 : e.current) == null ? void 0 : _.parentElement;
+      N && (s || (N.onpointerenter = () => g(!0), N.onpointerleave = () => g(!1)), j(N));
+    }
+  }, [e, s, t]);
+  const y = (_) => {
+    t != null && t.contains(_.target) || (o == null || o(), !s && g(!1));
+  }, T = {
+    padding: p.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
+    zIndex: 1
+  }, b = [
+    r.tooltip,
+    r[`tooltip--${x}-theme`],
+    r[`tooltip--${h}-padding`],
+    c || ""
+  ].join(" ").trim();
+  return /* @__PURE__ */ a("span", { ref: e, children: /* @__PURE__ */ a(
+    P,
+    {
+      ...m,
+      open: i || u,
+      anchor: C,
+      disablePortal: !0,
+      style: T,
+      role: f,
+      placement: p,
+      children: /* @__PURE__ */ a(
+        A,
+        {
+          className: r["tooltip--animation"],
+          enterClassName: r["tooltip--anim-open"],
+          exitClassName: r["tooltip--anim-close"],
+          enterAnimationName: "tooltip--open-animation",
+          exitAnimationName: "tooltip--close-animation",
+          children: /* @__PURE__ */ a("div", { className: b, children: /* @__PURE__ */ a(O, { onClickAway: y, children: /* @__PURE__ */ a("div", { children: n }) }) })
+        }
+      )
+    }
+  ) });
+};
+export {
+  K as Tooltip
+};

package/dist/components/Typography/Typography.d.ts

@@ -1,22 +1,31 @@
-import { ComponentType, ElementType, HTMLAttributes, ReactNode } from 'react';
+import { ComponentType, ElementType, HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
 
-export type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body-large" | "body-medium" | "body" | "body-small" | "body-tiny" | "quote-large" | "quote" | "form-input" | "form-label" | "form-hint" | "form-dropdown" | "table-header" | "table-body" | "table-body-secondary" | "button" | "link";
+export type VariantType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-large' | 'body-medium' | 'body' | 'body-small' | 'body-tiny' | 'quote-large' | 'quote' | 'form-input' | 'form-label' | 'form-hint' | 'form-dropdown' | 'table-header' | 'table-body' | 'table-body-secondary' | 'button' | 'link';
 export type CommonTypographyHTMLAttributes = HTMLAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLTableCellElement>;
 export type TypographyProps = {
+    /** Text or children to display */
     children: ReactNode;
-    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes>;
-    dataTestId?: string;
+    /** The HTML element to render as on the DOM */
     element?: ElementType;
-    className?: string;
+    /** Style to be visually displayed as  */
     variant?: VariantType;
+    /** Space seperated list of CSS classes to apply */
+    className?: string;
+    /** Whether to apply underline text decoration */
     underline?: boolean;
+    /** Whether to apply strikethrough text decoration */
     strikethrough?: boolean;
+    /** Whether to set a higher 'bold' font weight */
     bold?: boolean;
+    /** Additional props to pass down to native HTML element e.g. dataset attributes  */
+    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes> & LabelHTMLAttributes<HTMLLabelElement>;
+    /** ID that tests can use to get this component from the DOM */
+    ['data-testid']?: string;
 };
 /**
  * Typography component provide HTML 'element' field (default span) and override
  * element specific styling with 'variant'. 'className' to provide additional
  * styling. elementProps to provide additional HTML element attributes
  */
-export declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<ElementType | ComponentType>>;
+export declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import('react').RefAttributes<ElementType | ComponentType>>;
 export default Typography;

package/dist/components/Typography/Typography.js

@@ -1,73 +1,81 @@
 import '../../assets/Typography.css';
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as u, useMemo as c } from "react";
-import { c as f } from "../../clsx-DB4S2d7J.js";
-const p = "_h1_111i6_1", g = "_h2_111i6_11", k = "_h3_111i6_21", q = "_h4_111i6_31", T = "_body_111i6_41", w = "_quote_111i6_75", $ = "_form__input_111i6_86", x = "_form__hint_111i6_91", N = "_form__label_111i6_96", S = "_form__dropdown_111i6_101", v = "_table__header_111i6_107", E = "_table__body_111i6_112", V = "_button_111i6_123", r = {
-  h1: p,
-  "h1--bold": "_h1--bold_111i6_7",
-  h2: g,
-  "h2--bold": "_h2--bold_111i6_17",
-  h3: k,
-  "h3--bold": "_h3--bold_111i6_27",
-  h4: q,
-  "h4--bold": "_h4--bold_111i6_37",
-  body: T,
-  "body--large": "_body--large_111i6_46",
-  "body--medium": "_body--medium_111i6_50",
-  "body--small": "_body--small_111i6_54",
-  "body--tiny": "_body--tiny_111i6_58",
-  "body--bold": "_body--bold_111i6_62",
-  "body--strikethrough": "_body--strikethrough_111i6_65",
-  "body--underlined": "_body--underlined_111i6_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_111i6_71",
-  quote: w,
-  "quote--large": "_quote--large_111i6_80",
-  form__input: $,
-  form__hint: x,
-  form__label: N,
-  form__dropdown: S,
-  table__header: v,
-  table__body: E,
-  "table__body--secondary": "_table__body--secondary_111i6_117",
-  button: V
-}, j = (t) => {
-  const _ = t.toString();
-  let o = "body";
-  return _.match(/^h[1-4]/) ? o = _ : _.match(/^h[5-6]/) && (o = "h4"), _ === "th" && (o = "table-header"), _ === "td" && (o = "table-body"), o;
-}, I = (t) => {
-  let _ = t.replace(/form-/g, "form__");
-  return _ = _.replace(/table-/g, "table__"), _ = _.replace(new RegExp("(?<!-)-(?!-)", "g"), "--"), _;
-}, U = u((t, _) => {
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as c, useMemo as y } from "react";
+import { bemify as g, getBEMBase as k, getBEMBlock as q } from "../../utils/styleStrings.js";
+import { c as B } from "../../clsx-DB4S2d7J.js";
+const E = "_h1_13r5p_1", $ = "_h2_13r5p_11", w = "_h3_13r5p_21", M = "_h4_13r5p_31", v = "_body_13r5p_41", x = "_quote_13r5p_75", N = "_form__input_13r5p_98", T = "_form__hint_13r5p_103", j = "_form__label_13r5p_108", P = "_form__dropdown_13r5p_113", R = "_table__header_13r5p_131", S = "_table__body_13r5p_136", U = "_button_13r5p_159", _ = {
+  h1: E,
+  "h1--bold": "_h1--bold_13r5p_7",
+  h2: $,
+  "h2--bold": "_h2--bold_13r5p_17",
+  h3: w,
+  "h3--bold": "_h3--bold_13r5p_27",
+  h4: M,
+  "h4--bold": "_h4--bold_13r5p_37",
+  body: v,
+  "body--large": "_body--large_13r5p_46",
+  "body--medium": "_body--medium_13r5p_50",
+  "body--small": "_body--small_13r5p_54",
+  "body--tiny": "_body--tiny_13r5p_58",
+  "body--bold": "_body--bold_13r5p_62",
+  "body--strikethrough": "_body--strikethrough_13r5p_65",
+  "body--underlined": "_body--underlined_13r5p_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_13r5p_71",
+  quote: x,
+  "quote--large": "_quote--large_13r5p_80",
+  "quote--bold": "_quote--bold_13r5p_85",
+  "quote--strikethrough": "_quote--strikethrough_13r5p_88",
+  "quote--underlined": "_quote--underlined_13r5p_91",
+  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_13r5p_94",
+  form__input: N,
+  form__hint: T,
+  form__label: j,
+  form__dropdown: P,
+  "form--bold": "_form--bold_13r5p_118",
+  "form--strikethrough": "_form--strikethrough_13r5p_121",
+  "form--underlined": "_form--underlined_13r5p_124",
+  "form--strikethrough-underlined": "_form--strikethrough-underlined_13r5p_127",
+  table__header: R,
+  table__body: S,
+  "table__body--secondary": "_table__body--secondary_13r5p_141",
+  "table--bold": "_table--bold_13r5p_146",
+  "table--strikethrough": "_table--strikethrough_13r5p_149",
+  "table--underlined": "_table--underlined_13r5p_152",
+  "table--strikethrough-underlined": "_table--strikethrough-underlined_13r5p_155",
+  button: U,
+  "button--bold": "_button--bold_13r5p_165",
+  "button--strikethrough": "_button--strikethrough_13r5p_168",
+  "button--underlined": "_button--underlined_13r5p_171",
+  "button--strikethrough-underlined": "_button--strikethrough-underlined_13r5p_174"
+}, V = ["form", "table"], W = (e) => {
+  const r = e.toString();
+  let t = "body";
+  return r.match(/^h[1-4]/) ? t = r : r.match(/^h[5-6]/) && (t = "h4"), r === "th" && (t = "table-header"), r === "td" && (t = "table-body"), t;
+}, F = c((e, r) => {
   const {
-    dataTestId: o,
-    children: s,
-    className: n,
+    children: t,
+    className: b,
     underline: l = !1,
-    element: i = "span",
-    bold: a = !1,
-    variant: e = j(i),
-    strikethrough: d = !1,
-    elementProps: b
-  } = t, h = i, m = c(() => f(
-    r[I(e)],
-    n,
-    { [r[`${e}--bold`]]: a },
-    { [r[`${e}--underlined`]]: l },
-    { [r[`${e}--strikethrough`]]: d },
-    { [r[`${e}--strikethrough-underlined`]]: d && d && l }
-  ), [a, n, d, l, e]);
-  return /* @__PURE__ */ y(
-    h,
-    {
-      ref: _,
-      "data-testid": o,
-      ...b != null && b,
-      className: m,
-      children: s
-    }
-  );
+    element: h = "span",
+    bold: u = !1,
+    variant: i = W(h),
+    strikethrough: o = !1,
+    elementProps: a
+  } = e, p = h, m = y(() => {
+    const d = g(i, V), s = k(d), n = q(d);
+    return B(
+      _[s],
+      { [_[`${d}`]]: d !== s },
+      b,
+      { [_[`${n}--bold`]]: u },
+      { [_[`${n}--underlined`]]: l },
+      { [_[`${n}--strikethrough`]]: o },
+      { [_[`${n}--strikethrough-underlined`]]: o && o && l }
+    );
+  }, [u, b, o, l, i]);
+  return /* @__PURE__ */ f(p, { ref: r, "data-testid": e["data-testid"], ...a ?? {}, className: m, children: t });
 });
 export {
-  U as Typography,
-  U as default
+  F as Typography,
+  F as default
 };

package/dist/components/Typography/Typography.stories.d.ts

@@ -0,0 +1,31 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Typography').TypographyProps & import('react').RefAttributes<import('react').ElementType | import('react').ComponentType>>;
+    tags: string[];
+    argTypes: {
+        element: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+    };
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        children: import('react').ReactNode;
+        element?: import('react').ElementType | undefined;
+        variant?: import('./Typography').VariantType | undefined;
+        className?: string | undefined;
+        underline?: boolean | undefined;
+        strikethrough?: boolean | undefined;
+        bold?: boolean | undefined;
+        elementProps?: (import('react').HTMLAttributes<import('./Typography').CommonTypographyHTMLAttributes> & import('react').LabelHTMLAttributes<HTMLLabelElement>) | undefined;
+        "data-testid"?: string | undefined;
+        ref?: import('react').LegacyRef<import('react').ElementType | import('react').ComponentType> | undefined;
+        key?: import('react').Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;

package/dist/components/Typography/Typography.stories.js

@@ -0,0 +1,31 @@
+import '../../assets/global.css';
+import { jsx as t } from "react/jsx-runtime";
+/* empty css                    */
+import "../Button/Button.js";
+import "react";
+import "../Dialog/Backdrop.js";
+import { Typography as p } from "./Typography.js";
+import "../IconButton/IconButton.js";
+import "../Select/Select.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+const d = {
+  title: "Components/Typography",
+  component: p,
+  tags: ["autodocs"],
+  argTypes: {
+    element: {
+      options: ["span", "p", "h1", "h2", "h3", "h4", "h5", "h6", "td", "th"],
+      control: { type: "select" }
+    }
+  },
+  decorators: [
+    (o) => /* @__PURE__ */ t("div", { style: { margin: "1em" }, children: /* @__PURE__ */ t(o, {}) })
+  ]
+}, y = {
+  args: { children: "Example text" }
+};
+export {
+  y as Simple,
+  d as default
+};

package/dist/components/Typography/typography.test.d.ts

@@ -0,0 +1 @@
+export {};