@pismo/marola 0.0.1-alpha.4 → 0.0.1-alpha.5

package/dist/main.d.ts

@@ -2,7 +2,10 @@
 export * from './components/Dialog/Dialog';
 export * from './components/Typography/Typography';
 export * from './components/LoadingSpinner/LoadingSpinner';
-export * from './components/CallToActionButton/CallToActionButton';
 export * from './components/Tabs/Tabs';
 export * from './components/Tabs/Tab';
 export * from './components/Tabs/TabPanel';
+export * from './components/Pagination/Pagination';
+export * from './components/PageHeader/PageHeader';
+export * from './components/Button/Button';
+export * from './components/IconButton/IconButton';

package/dist/main.js

@@ -2,22 +2,29 @@ import './assets/main.css';
 import { Dialog as t } from "./components/Dialog/Dialog.js";
 import { Typography as a } from "./components/Typography/Typography.js";
 import { LoadingSpinner as p } from "./components/LoadingSpinner/LoadingSpinner.js";
-import { CallToActionButton as x } from "./components/CallToActionButton/CallToActionButton.js";
-import { Tabs as n } from "./components/Tabs/Tabs.js";
-import { Tab as T } from "./components/Tabs/Tab.js";
-import { TabPanel as d } from "./components/Tabs/TabPanel.js";
-import { default as u } from "./components/Dialog/Title.js";
-import { default as c } from "./components/Dialog/Content.js";
-import { default as A } from "./components/Dialog/Actions.js";
+import { Tabs as m } from "./components/Tabs/Tabs.js";
+import { Tab as i } from "./components/Tabs/Tab.js";
+import { TabPanel as s } from "./components/Tabs/TabPanel.js";
+import { Pagination as g, defaultTranslations as u } from "./components/Pagination/Pagination.js";
+import { PageHeader as b } from "./components/PageHeader/PageHeader.js";
+import { Button as c } from "./components/Button/Button.js";
+import { IconButton as B } from "./components/IconButton/IconButton.js";
+import { default as h } from "./components/Dialog/Title.js";
+import { default as C } from "./components/Dialog/Content.js";
+import { default as I } from "./components/Dialog/Actions.js";
 export {
-  A as Actions,
-  x as CallToActionButton,
-  c as Content,
+  I as Actions,
+  c as Button,
+  C as Content,
   t as Dialog,
-  u as DialogTitle,
+  h as DialogTitle,
+  B as IconButton,
   p as LoadingSpinner,
-  T as Tab,
-  d as TabPanel,
-  n as Tabs,
-  a as Typography
+  b as PageHeader,
+  g as Pagination,
+  i as Tab,
+  s as TabPanel,
+  m as Tabs,
+  a as Typography,
+  u as defaultTranslations
 };

package/dist/objectWithoutPropertiesLoose-ClNcje2_.js

@@ -0,0 +1,22 @@
+function o() {
+  return o = Object.assign ? Object.assign.bind() : function(t) {
+    for (var e = 1; e < arguments.length; e++) {
+      var n = arguments[e];
+      for (var r in n)
+        Object.prototype.hasOwnProperty.call(n, r) && (t[r] = n[r]);
+    }
+    return t;
+  }, o.apply(this, arguments);
+}
+function s(t, e) {
+  if (t == null)
+    return {};
+  var n = {}, r = Object.keys(t), a, i;
+  for (i = 0; i < r.length; i++)
+    a = r[i], !(e.indexOf(a) >= 0) && (n[a] = t[a]);
+  return n;
+}
+export {
+  s as _,
+  o as a
+};

package/dist/types/helpers.d.ts

@@ -1,10 +1,9 @@
+/// <reference types="vite-plugin-svgr/client" />
+
 // Saves having to declare 'never' for every property that exists on the 'other' type
 // Creates a new type that 'only' has properties in the first type and not in the second, if the property does not
 // exist in the second type, it is given the value of 'never' so it can never be set
-type Only<T, U> = { [P in keyof T]: T[P] } & Omit<
-  { [P in keyof U]?: never },
-  keyof T
->;
+type Only<T, U> = { [P in keyof T]: T[P] } & Omit<{ [P in keyof U]?: never }, keyof T>;
 
 // Usage MyNewType = Either<TypeA, TypeB>
 // Creates a new type via union based on two types
@@ -15,6 +14,6 @@ export type Either<T, U> = Only<T, U> | Only<U, T>;
 // note these arguments must be declared in MyType as optional '?'
 type RequireAllOrNone<T, U extends keyof T = never> = (
   | Required<Pick<T, U>> // Require all properties
-  | Partial<Record<U, never>>
-  ) & // Require none
-  Omit<T, U>; // remaining keys not listed in U
+  | Partial<Record<U, never>> // Require none
+) &
+  Omit<T, U>; // remaining keys not listed in U

package/dist/{useButton-CbmjmH5z.js → useButton-abQpo0za.js}

@@ -1,18 +1,19 @@
-import { u as _, _ as k, e as I } from "./index-BZ1lkM_M.js";
+import { a as k } from "./objectWithoutPropertiesLoose-ClNcje2_.js";
 import * as l from "react";
-function A(r) {
+import { f as A, h as I } from "./index-BvA1HyDs.js";
+function _(r) {
   const {
     rootElementName: n = "",
     componentName: o
-  } = r, [a, i] = l.useState(n.toUpperCase());
+  } = r, [s, i] = l.useState(n.toUpperCase());
   process.env.NODE_ENV !== "production" && l.useEffect(() => {
-    n && a !== n.toUpperCase() && console.error(`useRootElementName: the \`rootElementName\` prop of ${o ? `the ${o} component` : "a component"} expected the '${n}' element, but a '${a.toLowerCase()}' was rendered instead`, "This may cause hydration issues in an SSR context, for example in a Next.js app");
-  }, [n, a, o]);
+    n && s !== n.toUpperCase() && console.error(`useRootElementName: the \`rootElementName\` prop of ${o ? `the ${o} component` : "a component"} expected the '${n}' element, but a '${s.toLowerCase()}' was rendered instead`, "This may cause hydration issues in an SSR context, for example in a Next.js app");
+  }, [n, s, o]);
   const c = l.useCallback((b) => {
     var f;
     i((f = b == null ? void 0 : b.tagName) != null ? f : "");
   }, []);
-  return [a, c];
+  return [s, c];
 }
 class F {
   constructor() {
@@ -86,21 +87,21 @@ function Q() {
       w = !1;
     }), n.current = !1, !0) : !1;
   }
-  function a(i) {
+  function s(i) {
     return J(i) ? (n.current = !0, !0) : !1;
   }
   return {
     isFocusVisibleRef: n,
-    onFocus: a,
+    onFocus: s,
     onBlur: o,
     ref: r
   };
 }
-function H(r = {}) {
+function ee(r = {}) {
   const {
     disabled: n = !1,
     focusableWhenDisabled: o,
-    href: a,
+    href: s,
     rootRef: i,
     tabIndex: c,
     to: b,
@@ -115,8 +116,8 @@ function H(r = {}) {
   n && !o && p && N(!1), l.useEffect(() => {
     h.current = p;
   }, [p, h]);
-  const [m, M] = A({
-    rootElementName: V ?? (a || b ? "a" : void 0),
+  const [m, M] = _({
+    rootElementName: V ?? (s || b ? "a" : void 0),
     componentName: "Button"
   }), U = (t) => (e) => {
     var u;
@@ -158,12 +159,12 @@ function H(r = {}) {
       var d;
       (d = t.onClick) == null || d.call(t, e);
     }
-  }, D = _(M, i, v, y), s = {};
-  return c !== void 0 && (s.tabIndex = c), m === "BUTTON" ? (s.type = f ?? "button", o ? s["aria-disabled"] = n : s.disabled = n) : m === "INPUT" ? f && ["button", "submit", "reset"].includes(f) && (o ? s["aria-disabled"] = n : s.disabled = n) : m !== "" && (!a && !b && (s.role = "button", s.tabIndex = c ?? 0), n && (s["aria-disabled"] = n, s.tabIndex = o ? c ?? 0 : -1)), {
+  }, D = A(M, i, v, y), a = {};
+  return c !== void 0 && (a.tabIndex = c), m === "BUTTON" ? (a.type = f ?? "button", o ? a["aria-disabled"] = n : a.disabled = n) : m === "INPUT" ? f && ["button", "submit", "reset"].includes(f) && (o ? a["aria-disabled"] = n : a.disabled = n) : m !== "" && (!s && !b && (a.role = "button", a.tabIndex = c ?? 0), n && (a["aria-disabled"] = n, a.tabIndex = o ? c ?? 0 : -1)), {
     getRootProps: (t = {}) => {
       const e = k({}, I(r), I(t)), u = k({
         type: f
-      }, e, s, t, {
+      }, e, a, t, {
         onBlur: L(e),
         onClick: C(e),
         onFocus: P(e),
@@ -182,5 +183,5 @@ function H(r = {}) {
   };
 }
 export {
-  H as u
+  ee as u
 };

package/dist/{useCompoundItem-B7wfGDHQ.js → useCompoundItem-wTwXbURC.js}

@@ -1,5 +1,5 @@
 import * as o from "react";
-import { C as a } from "./Tabs.module-_kSbSyth.js";
+import { C as a } from "./Tabs.module-BKlNuSPH.js";
 import { u as I } from "./useEnhancedEffect-CJGo-L3B.js";
 let r = 0;
 function i(t) {

package/dist/useControlled-CCMYYdCM.js

@@ -0,0 +1,31 @@
+import * as n from "react";
+function d({
+  controlled: o,
+  default: r,
+  name: t,
+  state: s = "value"
+}) {
+  const {
+    current: e
+  } = n.useRef(o !== void 0), [l, c] = n.useState(r), u = e ? o : l;
+  if (process.env.NODE_ENV !== "production") {
+    n.useEffect(() => {
+      e !== (o !== void 0) && console.error([`MUI: A component is changing the ${e ? "" : "un"}controlled ${s} state of ${t} to be ${e ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${t} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join(`
+`));
+    }, [s, t, o]);
+    const {
+      current: i
+    } = n.useRef(r);
+    n.useEffect(() => {
+      !e && i !== r && console.error([`MUI: A component is changing the default ${s} state of an uncontrolled ${t} after being initialized. To suppress this warning opt to use a controlled ${t}.`].join(`
+`));
+    }, [JSON.stringify(r)]);
+  }
+  const f = n.useCallback((i) => {
+    e || c(i);
+  }, []);
+  return [u, f];
+}
+export {
+  d as u
+};

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "0.0.1-alpha.4",
+  "version": "0.0.1-alpha.5",
+  "private": false,
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -18,36 +19,55 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc --p ./tsconfig-build.json && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "yarn lint --fix",
+    "lint:scss": "stylelint \"**/*.scss\" --fix",
+    "prettier": "prettier . --write",
     "preview": "vite preview",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "@vitejs/plugin-react": "^4.2.1",
     "clsx": "^2.1.0",
+    "commitlint": "^19.2.1",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
     "glob": "^10.3.12",
+    "husky": "^9.0.11",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.72.0",
+    "stylelint": "^16.3.1",
+    "stylelint-config-recess-order": "^5.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.8.1",
-    "vite-plugin-lib-inject-css": "^2.0.1"
+    "vite-plugin-lib-inject-css": "^2.0.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^1.4.0"
   },
   "dependencies": {
     "@mui/base": "^5.0.0-beta.40",
+    "@mui/material": "^5.15.15",
     "@pismo/waves-icons": "^1.3.3"
   }
 }

package/dist/Dialog.module-BO0mdB7d.js

@@ -1,15 +0,0 @@
-import './assets/Dialog.css';
-const _ = "_dialog_cknma_1", a = "_dialog__backdrop_cknma_11", i = "_dialog__panel_cknma_19", o = "_dialog__title_cknma_35", l = "_dialog__subtitle_cknma_42", d = "_dialog__divider_cknma_51", t = "_dialog__actions_cknma_64", c = {
-  dialog: _,
-  dialog__backdrop: a,
-  dialog__panel: i,
-  dialog__title: o,
-  "dialog__title--small": "_dialog__title--small_cknma_39",
-  dialog__subtitle: l,
-  dialog__divider: d,
-  "dialog__close-icon": "_dialog__close-icon_cknma_55",
-  dialog__actions: t
-};
-export {
-  c as s
-};

package/dist/assets/CallToActionButton.css

@@ -1 +0,0 @@
-._h1_j1yzk_1{font-size:var(--heading-font-size-xl);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-xl);margin:0}._h1--bold_j1yzk_7{font-weight:var(--typography-heading-bold)}._h2_j1yzk_11{font-size:var(--heading-font-size-l);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-l);margin:0}._h2--bold_j1yzk_17{font-weight:var(--typography-heading-bold)}._h3_j1yzk_21{font-size:var(--heading-font-size);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height);margin:0}._h3--bold_j1yzk_27{font-weight:var(--typography-heading-bold)}._h4_j1yzk_31{font-size:var(--heading-font-size-s);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-s);margin:0}._h4--bold_j1yzk_37{font-weight:var(--typography-heading-bold)}._body_j1yzk_41{font-size:var(--body-font-size);line-height:var(--body-line-height);font-weight:var(--body-weight)}._body--large_j1yzk_46{font-size:var(--body-font-size-large);line-height:var(--body-line-height-large)}._body--medium_j1yzk_50{font-size:var(--body-font-size-medium);line-height:var(--body-line-height-medium)}._body--small_j1yzk_54{font-size:var(--body-font-size-small);line-height:var(--body-line-height-small)}._body--tiny_j1yzk_58{font-size:var(--body-font-size-tiny);line-height:var(--body-line-height-tiny)}._body--bold_j1yzk_62{font-weight:var(--body-bold)}._body--strikethrough_j1yzk_65{text-decoration:line-through}._body--underlined_j1yzk_68{text-decoration:underline}._body--strikethrough-underlined_j1yzk_71{text-decoration:underline line-through}._quote_j1yzk_75{font-size:var(--quote-font-size);line-height:var(--quote-line-height);font-weight:var(--quote-font-weight)}._quote--large_j1yzk_80{font-size:var(--quote-font-size-large);line-height:var(--quote-line-height-large);font-weight:var(--quote-font-weight-large)}._form__input_j1yzk_86{font-size:var(--form-input-font-size);line-height:var(--form-input-line-height);font-weight:var(--form-input-font-weight)}._form__hint_j1yzk_91{font-size:var(--form-hint-font-size);line-height:var(--form-hint-line-height);font-weight:var(--form-hint-font-weight)}._form__label_j1yzk_96{font-size:var(--form-label-font-size);line-height:var(--form-label-line-height);font-weight:var(--form-label-font-weight)}._form__dropdown_j1yzk_101{font-size:var(--form-dropdown-font-size);line-height:var(--form-dropdown-line-height);font-weight:var(--form-dropdown-font-weight)}._table__header_j1yzk_107{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-header-font-weight)}._table__body_j1yzk_112{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-body-font-weight)}._table__body--secondary_j1yzk_117{font-size:var(--table-font-size);line-height:var(--table-line-height);line-height:var(--table-body-secondary-line-height)}._button_j1yzk_123{font-size:var(--button-font-size);line-height:var(--button-line-height);font-weight:var(--button-font-weight)}._button_j1yzk_123{font-size:var(--button-font-size);line-height:var(--button-line-height);font-weight:var(--button-font-weight);padding:calc(var(--spacing) * 1.25) calc(var(--spacing) * 4.375);border-radius:calc(var(--spacing) * 12.5);border:none;cursor:pointer}._button--primary_j1yzk_138{background-color:var(--accent);color:var(--white-100)}._button--primary_j1yzk_138:hover{background-color:var(--accent-dark)}._button--primary_j1yzk_138:focus{background-color:var(--accent-lighter);color:var(--black-100)}._button--primary_j1yzk_138:active{background-color:var(--accent-light)}._button--primary_j1yzk_138:disabled{background-color:var(--black-10);color:var(--gray-50);cursor:default}._button--secondary_j1yzk_157{background-color:var(--white-100);color:var(--accent)}._button--secondary_j1yzk_157:hover{background-color:var(--gray-5)}._button--secondary_j1yzk_157:focus{color:var(--black-100)}._button--secondary_j1yzk_157:active{color:var(--accent-light)}._button--secondary_j1yzk_157:disabled{color:var(--gray-50);cursor:default}._button__loading-container_j1yzk_174{align-items:center;display:flex;gap:var(--spacing)}

package/dist/components/CallToActionButton/CallToActionButton.d.ts

@@ -1,21 +0,0 @@
-import { Either } from '../../types/helpers';
-import { ReactNode } from 'react';
-
-type variation = "primary" | "secondary";
-type CallToActionButtonCoreProps = {
-    isLoading?: boolean;
-    disabled?: boolean;
-    className?: string;
-    children: ReactNode;
-    variation?: variation;
-};
-interface CallToActionButtonPropsWithLink extends CallToActionButtonCoreProps {
-    link: string;
-}
-interface CallToActionButtonPropsWithOnClick extends CallToActionButtonCoreProps {
-    onClick: () => void;
-    type?: HTMLButtonElement["type"];
-}
-export type CallToActionButtonProps = Either<CallToActionButtonPropsWithLink, CallToActionButtonPropsWithOnClick>;
-export declare const CallToActionButton: import('react').ForwardRefExoticComponent<CallToActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export default CallToActionButton;

package/dist/components/CallToActionButton/CallToActionButton.js

@@ -1,57 +0,0 @@
-import '../../assets/CallToActionButton.css';
-import { jsx as d, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as u, useMemo as c } from "react";
-import { LoadingSpinner as k } from "../LoadingSpinner/LoadingSpinner.js";
-import { c as m } from "../../clsx-DB4S2d7J.js";
-import { B as j } from "../../Button-C3Qm852g.js";
-const z = "_h1_j1yzk_1", f = "_h2_j1yzk_11", p = "_h3_j1yzk_21", g = "_h4_j1yzk_31", q = "_body_j1yzk_41", w = "_quote_j1yzk_75", x = "_form__input_j1yzk_86", N = "_form__hint_j1yzk_91", v = "_form__label_j1yzk_96", B = "_form__dropdown_j1yzk_101", C = "_table__header_j1yzk_107", L = "_table__body_j1yzk_112", A = "_button_j1yzk_123", _ = {
-  h1: z,
-  "h1--bold": "_h1--bold_j1yzk_7",
-  h2: f,
-  "h2--bold": "_h2--bold_j1yzk_17",
-  h3: p,
-  "h3--bold": "_h3--bold_j1yzk_27",
-  h4: g,
-  "h4--bold": "_h4--bold_j1yzk_37",
-  body: q,
-  "body--large": "_body--large_j1yzk_46",
-  "body--medium": "_body--medium_j1yzk_50",
-  "body--small": "_body--small_j1yzk_54",
-  "body--tiny": "_body--tiny_j1yzk_58",
-  "body--bold": "_body--bold_j1yzk_62",
-  "body--strikethrough": "_body--strikethrough_j1yzk_65",
-  "body--underlined": "_body--underlined_j1yzk_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_j1yzk_71",
-  quote: w,
-  "quote--large": "_quote--large_j1yzk_80",
-  form__input: x,
-  form__hint: N,
-  form__label: v,
-  form__dropdown: B,
-  table__header: C,
-  table__body: L,
-  "table__body--secondary": "_table__body--secondary_j1yzk_117",
-  button: A,
-  "button--primary": "_button--primary_j1yzk_138",
-  "button--secondary": "_button--secondary_j1yzk_157",
-  "button__loading-container": "_button__loading-container_j1yzk_174"
-}, D = u((r, e) => {
-  const {
-    onClick: y,
-    link: b,
-    isLoading: l,
-    children: o,
-    type: a = "button",
-    disabled: s,
-    className: t,
-    variation: n = "primary"
-  } = r, i = c(() => m([_.button, _[`button--${n}`], t]), [t]);
-  return /* @__PURE__ */ d(j, { type: a, href: b, onClick: y, disabled: s, className: i, ref: e, children: l ? /* @__PURE__ */ h("div", { className: _["button__loading-container"], children: [
-    /* @__PURE__ */ d(k, { ...n === "secondary" && { invert: !0 } }),
-    o
-  ] }) : o });
-});
-export {
-  D as CallToActionButton,
-  D as default
-};

package/src/playground/Playground.tsx

@@ -1,20 +0,0 @@
-
-import { Tab, Tabs, TabPanel } from "../../lib/main";
-
-
-const Playground = () => {
-    return <>
-      <Tabs>
-        <Tab value="1">Tab 1 with a very big name ajahsuahdifsadgfiasgfdioafuu</Tab>
-        <Tab value="2">Tab 2</Tab>
-        <Tab value="3">Tab 3</Tab>
-        <Tab value="4">Tab 4</Tab>
-        <TabPanel value="1">Tab 1 content</TabPanel>
-        <TabPanel value="2">Tab 2 content</TabPanel>
-        <TabPanel value="3">Tab 3 content</TabPanel>
-        <TabPanel value="4">Tab 4 content</TabPanel>
-      </Tabs>
-    </>;
-};
-
-export default Playground;