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

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-HI1G6ob9.js

@@ -0,0 +1,107 @@
+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 } from "./useEventCallback-vAfOD-oT.js";
+import { e as g } from "./index-BJ8HbRCy.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
+};