@pismo/marola 0.0.1-alpha.1

package/dist/components/Dialog/Title.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+export interface TitleProps {
+    /** title to be displayed */
+    title?: ReactNode;
+    /** subtitle to be displayed */
+    subTitle?: ReactNode;
+}
+/** internal component only - used by the dialog */
+declare const Title: ({ title, subTitle }: TitleProps) => import("react/jsx-runtime").JSX.Element;
+export default Title;

package/dist/components/Dialog/Title.js

@@ -0,0 +1,14 @@
+import { jsxs as l, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { s as r } from "../../Dialog.module-BO0mdB7d.js";
+import { Typography as a } from "../Typography/Typography.js";
+const n = ({
+  title: i,
+  subTitle: t
+}) => /* @__PURE__ */ l(s, { children: [
+  /* @__PURE__ */ e(a, { element: "h1", elementProps: { id: "alert-dialog-title" }, variant: "h4", className: r.dialog__title, children: i }),
+  /* @__PURE__ */ e("hr", { className: r.dialog__divider, "aria-hidden": !0 }),
+  t && /* @__PURE__ */ e(a, { element: "h2", elementProps: { id: "alert-dialog-description" }, variant: "h4", className: r.dialog__subtitle, children: t })
+] });
+export {
+  n as default
+};

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -0,0 +1,6 @@
+export interface LoadingSpinnerProps {
+    invert?: boolean;
+    classNames?: string;
+}
+export declare const LoadingSpinner: ({ invert, classNames }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default LoadingSpinner;

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,24 @@
+import '../../assets/LoadingSpinner.css';
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { useMemo as e } from "react";
+import { c as t } from "../../clsx-DB4S2d7J.js";
+const n = {
+  "ls-ring": "_ls-ring_19dsy_1",
+  "ls-ring--invert": "_ls-ring--invert_19dsy_34"
+}, c = ({ invert: i = !1, classNames: r }) => {
+  const l = e(() => t(
+    [n["ls-ring"]],
+    { [n["ls-ring--invert"]]: i },
+    r
+  ), [r, i]);
+  return /* @__PURE__ */ o("div", { className: l, children: [
+    /* @__PURE__ */ s("div", {}),
+    /* @__PURE__ */ s("div", {}),
+    /* @__PURE__ */ s("div", {}),
+    /* @__PURE__ */ s("div", {})
+  ] });
+};
+export {
+  c as LoadingSpinner,
+  c as default
+};

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

@@ -0,0 +1,22 @@
+import { ComponentType, ElementType, HTMLAttributes, 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 CommonTypographyHTMLAttributes = HTMLAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLTableCellElement>;
+export type TypographyProps = {
+    children: ReactNode;
+    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes>;
+    dataTestId?: string;
+    element?: ElementType;
+    className?: string;
+    variant?: VariantType;
+    underline?: boolean;
+    strikethrough?: boolean;
+    bold?: boolean;
+};
+/**
+ * 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 default Typography;

package/dist/components/Typography/Typography.js

@@ -0,0 +1,73 @@
+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, _) => {
+  const {
+    dataTestId: o,
+    children: s,
+    className: n,
+    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
+    }
+  );
+});
+export {
+  U as Typography,
+  U as default
+};

package/dist/main.d.ts

@@ -0,0 +1,5 @@
+
+export * from './components/Dialog/Dialog';
+export * from './components/Typography/Typography';
+export * from './components/LoadingSpinner/LoadingSpinner';
+export * from './components/CallToActionButton/CallToActionButton';

package/dist/main.js

@@ -0,0 +1,17 @@
+import './assets/main.css';
+import { Dialog as r } 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 n } from "./components/CallToActionButton/CallToActionButton.js";
+import { default as m } from "./components/Dialog/Title.js";
+import { default as d } from "./components/Dialog/Content.js";
+import { default as s } from "./components/Dialog/Actions.js";
+export {
+  s as Actions,
+  n as CallToActionButton,
+  d as Content,
+  r as Dialog,
+  m as DialogTitle,
+  p as LoadingSpinner,
+  a as Typography
+};

package/dist/types/helpers.d.ts

@@ -0,0 +1,20 @@
+// 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
+>;
+
+// Usage MyNewType = Either<TypeA, TypeB>
+// Creates a new type via union based on two types
+export type Either<T, U> = Only<T, U> | Only<U, T>;
+
+// Usage MyNewType = RequireAllOrNone<MyType, 'prop1' | 'prop2' | 'prop3'>;
+// All listed properties in argument 2 which are found in MyType are required if any are provided, otherwise none are required.
+// 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

package/dist/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@pismo/marola",
+  "description": "CDX tribe component library",
+  "version": "0.0.1-alpha.1",
+  "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pismo/marola"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@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",
+    "@vitejs/plugin-react": "^4.2.1",
+    "clsx": "^2.1.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "glob": "^10.3.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.8.1",
+    "vite-plugin-lib-inject-css": "^2.0.1"
+  },
+  "dependencies": {
+    "@mui/base": "^5.0.0-beta.40"
+  }
+}

package/src/playground/Playground.tsx

@@ -0,0 +1,58 @@
+import {CallToActionButton, LoadingSpinner, Typography} from '../../lib/main';
+
+import DialogExample from "./DialogExample.tsx";
+
+/**
+ * A playground that can be used to test and build components. Run `yarn dev` to launch this page
+ */
+const Playground = () => {
+    return <>
+        <DialogExample/>
+        <CallToActionButton variation="primary">Test Button</CallToActionButton>
+        <CallToActionButton variation="secondary">Test Button secondary</CallToActionButton>
+        <CallToActionButton variation="primary" isLoading>Test Button loading</CallToActionButton>
+        <CallToActionButton variation="secondary" isLoading>Test Button loading secondary</CallToActionButton>
+        <CallToActionButton variation="primary" disabled>Test Button disabled</CallToActionButton>
+        <CallToActionButton variation="secondary" disabled>Test Button disabled secondary</CallToActionButton>
+        <Typography element="p">abc</Typography>
+        <Typography element="h1" variant="form-hint">abc</Typography>
+        <Typography>regular</Typography>
+        {/*<Typography className={styles["test-red"]}>regular extra classes</Typography>*/}
+        <Typography variant="body" element="p">body explicit (element p) </Typography>
+        <Typography variant="body-large">body large </Typography>
+        <Typography variant="body-medium">body medium </Typography>
+        <Typography variant="body-small">body small </Typography>
+        <Typography variant="body-tiny">body tiny </Typography>
+        <Typography element="h1">h1</Typography>
+        <Typography element="h2">h2</Typography>
+        <Typography element="h3">h3</Typography>
+        <Typography element="h4">h4</Typography>
+        <Typography element="h5">h5 uses h4 style</Typography>
+        <Typography element="h6">h6 uses h4 style</Typography>
+        <Typography element="h1" variant="h4">h1 with h4 style</Typography>
+        <Typography element="h2" variant="h4">h2 with h4 style</Typography>
+        <Typography element="h3" variant="h4">h3 with h4 style</Typography>
+        <Typography variant="quote"> quote</Typography>
+        <Typography variant="quote-large"> large quote</Typography>
+        <Typography bold> bold</Typography>
+        <Typography strikethrough> strikethrough</Typography>
+        <Typography underline> underlined</Typography>
+        <Typography element="p" underline strikethrough>strikethrough and underlined paragraph</Typography>
+        <Typography variant="form-hint"> form-hint</Typography>
+        <Typography variant="form-label"> form-label</Typography>
+        <Typography variant="form-dropdown"> form-dropdown</Typography>
+        <Typography variant="form-input"> form-input</Typography>
+        <Typography variant="table-header"> default element table header explicit variant</Typography>
+        <Typography variant="table-body"> default element table body explicit variant</Typography>
+        <Typography variant="table-body-secondary"> default element but table body secondary explicit
+            variant</Typography>
+        <Typography element="th"> th </Typography>
+        <Typography element="td"> td</Typography>
+        <Typography element="li"> list item</Typography>
+        <Typography variant="button"> button</Typography>
+        <LoadingSpinner/>
+        <LoadingSpinner invert/>
+    </>;
+};
+
+export default Playground;