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

package/README.md

@@ -1,23 +1,35 @@
 # Marola - component library
-![Marola logo](./src/assets/marolaLogo.png)
+
+![Marola logo](./public/marolaLogo.png)
 
 ### Commands
 
-`yarn dev` - run the playground, launches a server where a developer can test and develop components, watches for file 
+`yarn dev` - run the playground, launches a server where a developer can test and develop components, watches for file
 changes
 
 `yarn build` - builds the components ready for publish
 
-`yarn test` - not yet implemented
+`yarn test` - calls off to yarn test:unit
+
+`yarn test:unit` - runs vitest for unit tests
+
+`yarn test:unit:visual` - runs vitest for unit tests in a browser, then when tests are run it will show the output in
+browser
+
+`yarn test:unit:watch` - runs vitest and watches for any change and reruns
 
 `yarn lint` - performs an eslint across the project code and reports any problems in the terminal
 
-`yarn preview` -  runs `build` and serves the files in the `dist` serves what would be in a `publish`
+`yarn preview` - runs `build` and serves the files in the `dist` serves what would be in a `publish`
 
 `yarn publish` - runs a prePublish build (the `build` command) then publishes the contents of the `dist` directory
 
+`yarn storybook` - start storybook
+
+`yarn build-storybook` - build storybook static files
+
 ### Tips
 
 #### Node version
 
-This project uses a .nvmrc file, to auto switch node version follow [these steps](https://github.com/nvm-sh/nvm?tab=readme-ov-file#zsh) from the nvm project .
+This project uses a .nvmrc file, to auto switch node version follow [these steps](https://github.com/nvm-sh/nvm?tab=readme-ov-file#zsh) from the nvm project .

package/dist/Button-B1umG8kJ.js

@@ -0,0 +1,131 @@
+import { _ as T, a as i } from "./objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import * as c from "react";
+import { g as _, a as x, b as B, P as o, c as O, d as D } from "./index-CqjC7P5Y.js";
+import { jsx as F } from "react/jsx-runtime";
+import { u as S } from "./useButton-Bc8IAgyk.js";
+const m = "Button";
+function U(s) {
+  return _(m, s);
+}
+x(m, ["root", "active", "disabled", "focusVisible"]);
+const W = ["action", "children", "disabled", "focusableWhenDisabled", "onFocusVisible", "slotProps", "slots", "rootElementName"], j = (s) => {
+  const {
+    active: e,
+    disabled: n,
+    focusVisible: r
+  } = s;
+  return O({
+    root: ["root", n && "disabled", r && "focusVisible", e && "active"]
+  }, D(U));
+}, w = /* @__PURE__ */ c.forwardRef(function(e, n) {
+  var r;
+  const {
+    action: u,
+    children: h,
+    focusableWhenDisabled: f = !1,
+    slotProps: P = {},
+    slots: l = {},
+    rootElementName: N = "button"
+  } = e, t = T(e, W), g = c.useRef();
+  let a = N;
+  typeof l.root == "string" ? a = l.root : (t.href || t.to) && (a = "a");
+  const {
+    active: y,
+    focusVisible: E,
+    setFocusVisible: d,
+    getRootProps: V
+  } = S(i({}, e, {
+    focusableWhenDisabled: f,
+    rootElementName: a
+  }));
+  c.useImperativeHandle(u, () => ({
+    focusVisible: () => {
+      d(!0), g.current.focus();
+    }
+  }), [d]);
+  const p = i({}, e, {
+    active: y,
+    focusableWhenDisabled: f,
+    focusVisible: E
+  }), v = j(p), C = t.href || t.to ? "a" : "button", b = (r = l.root) != null ? r : C, R = B({
+    elementType: b,
+    getSlotProps: V,
+    externalForwardedProps: t,
+    externalSlotProps: P.root,
+    additionalProps: {
+      ref: n
+    },
+    ownerState: p,
+    className: v.root
+  });
+  return /* @__PURE__ */ F(b, i({}, R, {
+    children: h
+  }));
+});
+process.env.NODE_ENV !== "production" && (w.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A ref for imperative actions. It currently only supports `focusVisible()` action.
+   */
+  action: o.oneOfType([o.func, o.shape({
+    current: o.shape({
+      focusVisible: o.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  children: o.node,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, allows a disabled button to receive focus.
+   * @default false
+   */
+  focusableWhenDisabled: o.bool,
+  /**
+   * @ignore
+   */
+  href: o.string,
+  /**
+   * @ignore
+   */
+  onFocusVisible: o.func,
+  /**
+   * The HTML element that is ultimately rendered, for example 'button' or 'a'
+   * @default 'button'
+   */
+  rootElementName: o.string,
+  /**
+   * The props used for each slot inside the Button.
+   * @default {}
+   */
+  slotProps: o.shape({
+    root: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * The components used for each slot inside the Button.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: o.shape({
+    root: o.elementType
+  }),
+  /**
+   * @ignore
+   */
+  to: o.string
+});
+export {
+  w as B
+};

package/dist/ClickAwayListener-BKznXF1d.js

@@ -0,0 +1,106 @@
+import * as t from "react";
+import { u as C, P as f } from "./index-CqjC7P5Y.js";
+import { jsx as w } from "react/jsx-runtime";
+import { u as L, o as h, e as b, a as g } from "./index-BNWbc5Kh.js";
+function T(c) {
+  return c.substring(2).toLowerCase();
+}
+function D(c, s) {
+  return s.documentElement.clientWidth < c.clientX || s.documentElement.clientHeight < c.clientY;
+}
+function v(c) {
+  const {
+    children: s,
+    disableReactTree: y = !1,
+    mouseEvent: i = "onClick",
+    onClickAway: P,
+    touchEvent: u = "onTouchEnd"
+  } = c, l = t.useRef(!1), o = t.useRef(null), d = t.useRef(!1), p = t.useRef(!1);
+  t.useEffect(() => (setTimeout(() => {
+    d.current = !0;
+  }, 0), () => {
+    d.current = !1;
+  }), []);
+  const k = C(
+    // @ts-expect-error TODO upstream fix
+    s.ref,
+    o
+  ), a = L((e) => {
+    const n = p.current;
+    p.current = !1;
+    const r = h(o.current);
+    if (!d.current || !o.current || "clientX" in e && D(e, r))
+      return;
+    if (l.current) {
+      l.current = !1;
+      return;
+    }
+    let E;
+    e.composedPath ? E = e.composedPath().indexOf(o.current) > -1 : E = !r.documentElement.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      e.target
+    ) || o.current.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      e.target
+    ), !E && (y || !n) && P(e);
+  }), R = (e) => (n) => {
+    p.current = !0;
+    const r = s.props[e];
+    r && r(n);
+  }, m = {
+    ref: k
+  };
+  return u !== !1 && (m[u] = R(u)), t.useEffect(() => {
+    if (u !== !1) {
+      const e = T(u), n = h(o.current), r = () => {
+        l.current = !0;
+      };
+      return n.addEventListener(e, a), n.addEventListener("touchmove", r), () => {
+        n.removeEventListener(e, a), n.removeEventListener("touchmove", r);
+      };
+    }
+  }, [a, u]), i !== !1 && (m[i] = R(i)), t.useEffect(() => {
+    if (i !== !1) {
+      const e = T(i), n = h(o.current);
+      return n.addEventListener(e, a), () => {
+        n.removeEventListener(e, a);
+      };
+    }
+  }, [a, i]), /* @__PURE__ */ w(t.Fragment, {
+    children: /* @__PURE__ */ t.cloneElement(s, m)
+  });
+}
+process.env.NODE_ENV !== "production" && (v.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The wrapped element.
+   */
+  children: b.isRequired,
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree: f.bool,
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent: f.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: f.func.isRequired,
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent: f.oneOf(["onTouchEnd", "onTouchStart", !1])
+});
+process.env.NODE_ENV !== "production" && (v.propTypes = g(v.propTypes));
+export {
+  v as C
+};

package/dist/Dialog.module-CGVM5V_D.js

@@ -0,0 +1,15 @@
+import './assets/Dialog.css';
+const _ = "_dialog_1o2te_1", o = "_dialog__backdrop_1o2te_11", i = "_dialog__panel_1o2te_19", l = "_dialog__title_1o2te_35", t = "_dialog__subtitle_1o2te_42", a = "_dialog__divider_1o2te_51", d = "_dialog__actions_1o2te_64", e = {
+  dialog: _,
+  dialog__backdrop: o,
+  dialog__panel: i,
+  dialog__title: l,
+  "dialog__title--small": "_dialog__title--small_1o2te_39",
+  dialog__subtitle: t,
+  dialog__divider: a,
+  "dialog__close-icon": "_dialog__close-icon_1o2te_55",
+  dialog__actions: d
+};
+export {
+  e as s
+};

package/dist/Portal-BcdMtRGF.js

@@ -0,0 +1,73 @@
+import * as o from "react";
+import { r as P, a as y } from "./index-BNWbc5Kh.js";
+import { u as T, s as a, P as i } from "./index-CqjC7P5Y.js";
+import { jsx as c } from "react/jsx-runtime";
+import { u as f } from "./useEnhancedEffect-CJGo-L3B.js";
+function N(t, l, s, n, u) {
+  if (process.env.NODE_ENV === "production")
+    return null;
+  const e = t[l], r = u || l;
+  return e == null ? null : e && e.nodeType !== 1 ? new Error(`Invalid ${n} \`${r}\` supplied to \`${s}\`. Expected an HTMLElement.`) : null;
+}
+function h(t) {
+  return typeof t == "function" ? t() : t;
+}
+const p = /* @__PURE__ */ o.forwardRef(function(l, s) {
+  const {
+    children: n,
+    container: u,
+    disablePortal: e = !1
+  } = l, [r, d] = o.useState(null), m = T(/* @__PURE__ */ o.isValidElement(n) ? n.ref : null, s);
+  if (f(() => {
+    e || d(h(u) || document.body);
+  }, [u, e]), f(() => {
+    if (r && !e)
+      return a(s, r), () => {
+        a(s, null);
+      };
+  }, [s, r, e]), e) {
+    if (/* @__PURE__ */ o.isValidElement(n)) {
+      const E = {
+        ref: m
+      };
+      return /* @__PURE__ */ o.cloneElement(n, E);
+    }
+    return /* @__PURE__ */ c(o.Fragment, {
+      children: n
+    });
+  }
+  return /* @__PURE__ */ c(o.Fragment, {
+    children: r && /* @__PURE__ */ P.createPortal(n, r)
+  });
+});
+process.env.NODE_ENV !== "production" && (p.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The children to render into the `container`.
+   */
+  children: i.node,
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: i.oneOfType([N, i.func]),
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal: i.bool
+});
+process.env.NODE_ENV !== "production" && (p.propTypes = y(p.propTypes));
+export {
+  N as H,
+  p as P
+};

package/dist/Tab-CRwnhsj5.js

@@ -0,0 +1,254 @@
+import { jsx as N } from "react/jsx-runtime";
+import * as f from "react";
+import { forwardRef as F, useContext as U, useMemo as j } from "react";
+import { c as $ } from "./clsx-DB4S2d7J.js";
+import { a as A, u as B, b as W, T as q, s as y } from "./Tabs.module-yYcTJnj6.js";
+import { a as p, _ as z } from "./objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import { e as O, g as G, a as J, u as k, b as K, P as o, c as Q, d as X } from "./index-CqjC7P5Y.js";
+import { u as Y } from "./useButton-Bc8IAgyk.js";
+const E = {
+  blur: "list:blur",
+  focus: "list:focus",
+  itemClick: "list:itemClick",
+  itemHover: "list:itemHover",
+  itemsChange: "list:itemsChange",
+  keyDown: "list:keyDown",
+  resetHighlight: "list:resetHighlight",
+  highlightLast: "list:highlightLast",
+  textNavigation: "list:textNavigation",
+  clearSelection: "list:clearSelection"
+}, w = /* @__PURE__ */ f.createContext(null);
+process.env.NODE_ENV !== "production" && (w.displayName = "ListContext");
+function Z(n) {
+  const {
+    handlePointerOverEvents: t = !1,
+    item: e
+  } = n, s = f.useContext(w);
+  if (!s)
+    throw new Error("useListItem must be used within a ListProvider");
+  const {
+    dispatch: i,
+    getItemState: a
+  } = s, {
+    highlighted: c,
+    selected: b,
+    focusable: m
+  } = a(e), h = f.useCallback((l) => (r) => {
+    var d;
+    if ((d = l.onClick) == null || d.call(l, r), !r.defaultPrevented) {
+      if (process.env.NODE_ENV !== "production" && e === void 0)
+        throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
+`));
+      i({
+        type: E.itemClick,
+        item: e,
+        event: r
+      });
+    }
+  }, [i, e]), g = f.useCallback((l) => (r) => {
+    var d;
+    if ((d = l.onMouseOver) == null || d.call(l, r), !r.defaultPrevented) {
+      if (process.env.NODE_ENV !== "production" && e === void 0)
+        throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
+`));
+      i({
+        type: E.itemHover,
+        item: e,
+        event: r
+      });
+    }
+  }, [i, e]);
+  let u;
+  return m && (u = c ? 0 : -1), {
+    getRootProps: (l = {}) => {
+      const r = O(l);
+      return p({}, l, {
+        onClick: h(r),
+        onPointerOver: t ? g(r) : void 0,
+        tabIndex: u
+      });
+    },
+    highlighted: c,
+    selected: b
+  };
+}
+function ee(n, t) {
+  return function(s = {}) {
+    const i = p({}, s, n(s));
+    return p({}, i, t(i));
+  };
+}
+const I = "Tab";
+function te(n) {
+  return G(I, n);
+}
+J(I, ["root", "selected", "disabled"]);
+function oe(n) {
+  return n.size;
+}
+function se(n) {
+  const {
+    value: t,
+    rootRef: e,
+    disabled: s = !1,
+    id: i
+  } = n, a = f.useRef(null), c = A(i), {
+    value: b,
+    selectionFollowsFocus: m,
+    getTabPanelId: h
+  } = B(), g = f.useMemo(() => ({
+    disabled: s,
+    ref: a,
+    id: c
+  }), [s, a, c]), {
+    id: u,
+    index: v,
+    totalItemCount: l
+  } = W(t ?? oe, g), {
+    getRootProps: r,
+    highlighted: d,
+    selected: C
+  } = Z({
+    item: u
+  }), {
+    getRootProps: R,
+    rootRef: P,
+    active: T,
+    focusVisible: L,
+    setFocusVisible: M
+  } = Y({
+    disabled: s,
+    focusableWhenDisabled: !m,
+    type: "button"
+  }), x = k(a, e, P), V = u !== void 0 ? h(u) : void 0;
+  return {
+    getRootProps: (_ = {}) => {
+      const S = O(_), D = ee(r, R);
+      return p({}, _, D(S), {
+        role: "tab",
+        "aria-controls": V,
+        "aria-selected": C,
+        id: c,
+        ref: x
+      });
+    },
+    active: T,
+    focusVisible: L,
+    highlighted: d,
+    index: v,
+    rootRef: x,
+    // the `selected` state isn't set on the server (it relies on effects to be calculated),
+    // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
+    selected: C || u === b,
+    setFocusVisible: M,
+    totalTabsCount: l
+  };
+}
+const ne = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], re = (n) => {
+  const {
+    selected: t,
+    disabled: e
+  } = n;
+  return Q({
+    root: ["root", t && "selected", e && "disabled"]
+  }, X(te));
+}, H = /* @__PURE__ */ f.forwardRef(function(t, e) {
+  var s;
+  const {
+    children: i,
+    disabled: a = !1,
+    slotProps: c = {},
+    slots: b = {},
+    value: m
+  } = t, h = z(t, ne), g = f.useRef(), u = k(g, e), {
+    active: v,
+    highlighted: l,
+    selected: r,
+    getRootProps: d
+  } = se(p({}, t, {
+    rootRef: u,
+    value: m
+  })), C = p({}, t, {
+    active: v,
+    disabled: a,
+    highlighted: l,
+    selected: r
+  }), R = re(C), P = (s = b.root) != null ? s : "button", T = K({
+    elementType: P,
+    getSlotProps: d,
+    externalSlotProps: c.root,
+    externalForwardedProps: h,
+    additionalProps: {
+      ref: e
+    },
+    ownerState: C,
+    className: R.root
+  });
+  return /* @__PURE__ */ N(P, p({}, T, {
+    children: i
+  }));
+});
+process.env.NODE_ENV !== "production" && (H.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A ref for imperative actions. It currently only supports `focusVisible()` action.
+   */
+  action: o.oneOfType([o.func, o.shape({
+    current: o.shape({
+      focusVisible: o.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  children: o.node,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: o.bool,
+  /**
+   * Callback invoked when new value is being set.
+   */
+  onChange: o.func,
+  /**
+   * The props used for each slot inside the Tab.
+   * @default {}
+   */
+  slotProps: o.shape({
+    root: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * The components used for each slot inside the Tab.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: o.shape({
+    root: o.elementType
+  }),
+  /**
+   * You can provide your own value. Otherwise, it falls back to the child position index.
+   */
+  value: o.oneOfType([o.number, o.string])
+});
+const be = F(
+  ({ children: n, value: t, disabled: e, dataTestId: s }, i) => {
+    const a = U(q), c = j(
+      () => $(
+        y.tabs__tab,
+        t === (a == null ? void 0 : a.value) && y["tabs__tab--selected"],
+        e && y["tabs__tab--disabled"]
+      ),
+      [t, a, e]
+    );
+    return /* @__PURE__ */ N(H, { className: c, disabled: e, value: t, "data-testid": s, ref: i, children: n });
+  }
+);
+export {
+  E as L,
+  be as T,
+  w as a
+};