@pismo/marola 0.0.1-alpha.2 → 0.0.1-alpha.21

package/README.md

@@ -1,23 +1,35 @@
 # Marola - component library
-![Marola logo](./src/assets/marolaLogo.png)
+
+![Marola logo](https://marola.pismolabs.io/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-2b1peDFT.js

@@ -0,0 +1,130 @@
+import { g as T, a as _, _ as x, b as i, c as B, P as e, d as O, e as D } from "./index-CH45lKw7.js";
+import * as c from "react";
+import { jsx as F } from "react/jsx-runtime";
+import { u as S } from "./useButton-DNk3wrQp.js";
+const m = "Button";
+function U(s) {
+  return T(m, s);
+}
+_(m, ["root", "active", "disabled", "focusVisible"]);
+const W = ["action", "children", "disabled", "focusableWhenDisabled", "onFocusVisible", "slotProps", "slots", "rootElementName"], j = (s) => {
+  const {
+    active: o,
+    disabled: n,
+    focusVisible: r
+  } = s;
+  return O({
+    root: ["root", n && "disabled", r && "focusVisible", o && "active"]
+  }, D(U));
+}, w = /* @__PURE__ */ c.forwardRef(function(o, n) {
+  var r;
+  const {
+    action: u,
+    children: h,
+    focusableWhenDisabled: f = !1,
+    slotProps: P = {},
+    slots: l = {},
+    rootElementName: N = "button"
+  } = o, t = x(o, 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({}, o, {
+    focusableWhenDisabled: f,
+    rootElementName: a
+  }));
+  c.useImperativeHandle(u, () => ({
+    focusVisible: () => {
+      d(!0), g.current.focus();
+    }
+  }), [d]);
+  const p = i({}, o, {
+    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: e.oneOfType([e.func, e.shape({
+    current: e.shape({
+      focusVisible: e.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  children: e.node,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, allows a disabled button to receive focus.
+   * @default false
+   */
+  focusableWhenDisabled: e.bool,
+  /**
+   * @ignore
+   */
+  href: e.string,
+  /**
+   * @ignore
+   */
+  onFocusVisible: e.func,
+  /**
+   * The HTML element that is ultimately rendered, for example 'button' or 'a'
+   * @default 'button'
+   */
+  rootElementName: e.string,
+  /**
+   * The props used for each slot inside the Button.
+   * @default {}
+   */
+  slotProps: e.shape({
+    root: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside the Button.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: e.shape({
+    root: e.elementType
+  }),
+  /**
+   * @ignore
+   */
+  to: e.string
+});
+export {
+  w as B
+};

package/dist/ClickAwayListener-BSW-Nd-y.js

@@ -0,0 +1,107 @@
+import * as t from "react";
+import { u as C, P as f } from "./index-CH45lKw7.js";
+import { jsx as w } from "react/jsx-runtime";
+import { u as L, o as h, e as b } from "./useEventCallback-xTG9piMa.js";
+import { e as g } from "./index-CjW42-M-.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-DFEmFdYT.js

@@ -0,0 +1,30 @@
+import './assets/Dialog.css';
+const _ = "_dialog__subtitle_yi7uo_52", o = "_dialog_yi7uo_52", a = "_dialog__backdrop_yi7uo_87", y = "_dialog__panel_yi7uo_95", i = "_dialog__title_yi7uo_56", p = "_dialog__divider_yi7uo_121", t = "_dialog__actions_yi7uo_134", u = {
+  "u-typography-h1": "_u-typography-h1_yi7uo_1",
+  "u-typography-h2": "_u-typography-h2_yi7uo_8",
+  "u-typography-h3": "_u-typography-h3_yi7uo_15",
+  "u-typography-h4": "_u-typography-h4_yi7uo_22",
+  "u-typography-h5": "_u-typography-h5_yi7uo_29",
+  "u-typography-h6": "_u-typography-h6_yi7uo_36",
+  "u-typography-base": "_u-typography-base_yi7uo_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_yi7uo_48",
+  "u-typography-base--xl": "_u-typography-base--xl_yi7uo_52",
+  dialog__subtitle: _,
+  "u-typography-base--lg": "_u-typography-base--lg_yi7uo_56",
+  "dialog__title--small": "_dialog__title--small_yi7uo_56",
+  "u-typography-base--sm": "_u-typography-base--sm_yi7uo_60",
+  "u-typography-base--bold": "_u-typography-base--bold_yi7uo_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_yi7uo_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_yi7uo_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_yi7uo_73",
+  dialog: o,
+  dialog__backdrop: a,
+  dialog__panel: y,
+  dialog__title: i,
+  dialog__divider: p,
+  "dialog__close-icon": "_dialog__close-icon_yi7uo_125",
+  dialog__actions: t
+};
+export {
+  u as s
+};