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

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,60 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        link: string;
+        loading?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        children: import('react').ReactNode;
+        variant?: ("primary" | "secondary" | "quick") | undefined;
+        type?: undefined;
+        onClick?: undefined;
+        ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
+        key?: import('react').Key | null | undefined;
+    } | {
+        onClick: () => void;
+        type?: "button" | "submit" | "reset" | undefined;
+        loading?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        children: import('react').ReactNode;
+        variant?: ("primary" | "secondary" | "quick") | undefined;
+        link?: undefined;
+        ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
+        key?: import('react').Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    argTypes: {
+        onClick: {
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+        type: {
+            control: {
+                type: "text";
+            };
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+        link: {
+            control: {
+                type: "text";
+            };
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Link: Story;

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,41 @@
+import '../../assets/global.css';
+import { jsx as t } from "react/jsx-runtime";
+/* empty css                    */
+import { Button as i } from "./Button.js";
+import "react";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import "../Select/Select.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+const k = {
+  title: "Components/Button",
+  component: i,
+  tags: ["autodocs"],
+  decorators: [
+    (o) => /* @__PURE__ */ t("div", { style: { padding: "1em" }, children: /* @__PURE__ */ t(o, {}) })
+  ],
+  argTypes: {
+    onClick: {
+      if: { arg: "link", exists: !1 }
+    },
+    type: {
+      control: { type: "text" },
+      if: { arg: "onClick", exists: !0 }
+    },
+    link: {
+      control: { type: "text" },
+      if: { arg: "onClick", exists: !1 }
+    }
+  }
+}, f = {
+  args: { children: "Button", onClick: () => alert("Button was clicked!") }
+}, g = {
+  args: { children: "Button", link: "https://marola.pismolabs.io" }
+};
+export {
+  g as Link,
+  f as Simple,
+  k as default
+};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+type CheckboxTheme = 'light' | 'accent';
+type CheckboxSizes = 'small' | 'normal';
+type CheckboxProps = {
+    className?: string;
+    'data-testid'?: string;
+    label?: ReactNode;
+    theme?: CheckboxTheme;
+    size?: CheckboxSizes;
+    checked?: boolean;
+    isIndeterminate?: boolean;
+    name?: string;
+    onChange: (checked: boolean) => void;
+    children?: ReactNode;
+    highlightLabel?: boolean;
+};
+declare const Checkbox: ({ className, label, name, theme, size, checked, onChange, isIndeterminate, highlightLabel, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,56 @@
+import '../../assets/Checkbox.css';
+import { jsxs as N, jsx as h } from "react/jsx-runtime";
+import * as k from "react";
+import { useState as g, useEffect as w } from "react";
+import { c as i } from "../../clsx-DB4S2d7J.js";
+const y = (a) => /* @__PURE__ */ k.createElement("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ k.createElement("path", { d: "M13.7063 0.293438C14.0969 0.684062 14.0969 1.31531 13.7063 1.70594L5.70625 9.70594C5.31563 10.0966 4.68437 10.0966 4.29375 9.70594L0.292875 5.70594C-0.097625 5.31531 -0.097625 4.68406 0.292875 4.29344C0.683437 3.90281 1.31656 3.90281 1.70719 4.29344L4.97188 7.58406L12.2937 0.293438C12.6844 -0.0978125 13.3156 -0.0978125 13.7063 0.293438Z", fill: "#F7F7FC" })), z = "_label_1aw5t_10", E = "_checkmark_1aw5t_20", e = {
+  "checkbox-wrapper": "_checkbox-wrapper_1aw5t_1",
+  label: z,
+  "label--highlighted": "_label--highlighted_1aw5t_14",
+  "label--highlighted-checked": "_label--highlighted-checked_1aw5t_17",
+  checkmark: E,
+  "checkmark--checked": "_checkmark--checked_1aw5t_32",
+  "checkmark--light-theme": "_checkmark--light-theme_1aw5t_35",
+  "checkmark--accent-theme": "_checkmark--accent-theme_1aw5t_42",
+  "checkmark--small-size": "_checkmark--small-size_1aw5t_49",
+  "checkmark--normal-size": "_checkmark--normal-size_1aw5t_56"
+}, F = (a) => /* @__PURE__ */ k.createElement("svg", { width: 10, height: 3, viewBox: "0 0 10 3", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ k.createElement("rect", { y: 0.5, width: 10, height: 2, rx: 1, fill: "#1897F3" })), M = ({
+  className: a,
+  label: o,
+  name: d,
+  theme: b = "accent",
+  size: p = "normal",
+  checked: l,
+  onChange: x,
+  isIndeterminate: r,
+  highlightLabel: C = !1,
+  ...s
+}) => {
+  const [c, n] = g(l), [t, _] = g(r);
+  w(() => {
+    l !== c && n(l);
+  }, [l]), w(() => {
+    typeof r == "boolean" && _(r);
+  }, [r]);
+  const f = i(e["checkbox-wrapper"], a), v = i(
+    e.checkmark,
+    e[`checkmark--${b}-theme`],
+    e[`checkmark--${p}-size`],
+    (c || t) && e["checkmark--checked"]
+  ), u = C && (s.children || o) ? i(
+    e.label,
+    e["label--highlighted"],
+    (c || t) && e["label--highlighted-checked"]
+  ) : e.label;
+  return /* @__PURE__ */ N("div", { className: f, onClick: () => {
+    let m = !c;
+    t && (_(!1), m = !0), x(m), n(m);
+  }, ...s, children: [
+    /* @__PURE__ */ h("input", { name: d, type: "checkbox", checked: !t && c, readOnly: !0 }),
+    /* @__PURE__ */ h("span", { className: v, children: t ? /* @__PURE__ */ h(F, {}) : c && /* @__PURE__ */ h(y, {}) }),
+    /* @__PURE__ */ h("label", { className: u, children: s.children || o })
+  ] });
+};
+export {
+  M as Checkbox
+};

package/dist/components/Dialog/Actions.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { s as t } from "../../Dialog.module-BO0mdB7d.js";
+import { s as t } from "../../Dialog.module-CGVM5V_D.js";
 const i = ({ children: s }) => /* @__PURE__ */ o("div", { className: t.dialog__actions, children: s });
 export {
   i as default

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

@@ -2,5 +2,5 @@
 declare const Backdrop: import('react').ForwardRefExoticComponent<{
     open?: boolean | undefined;
     className: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export default Backdrop;

package/dist/components/Dialog/Backdrop.js

@@ -1,16 +1,9 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import { s as e } from "../../Dialog.module-BO0mdB7d.js";
+import { s as e } from "../../Dialog.module-CGVM5V_D.js";
 const i = t((o, r) => {
   const { open: m, className: p, ...s } = o;
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      className: e.dialog__backdrop,
-      ref: r,
-      ...s
-    }
-  );
+  return /* @__PURE__ */ a("div", { className: e.dialog__backdrop, ref: r, ...s });
 });
 export {
   i as default

package/dist/components/Dialog/CloseIconButton.js

@@ -1,16 +1,17 @@
-import { jsx as t } from "react/jsx-runtime";
-import { s as c } from "../../Dialog.module-BO0mdB7d.js";
-import { B as i } from "../../Button-REznN-RP.js";
-const s = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3e%3cg%20clip-path='url(%23clip0_2659_187)'%3e%3cpath%20d='M15.9437%2013.8812L18.9374%2010.9375C19.5249%2010.3562%2020.4749%2010.3562%2021.0062%2010.9375C21.6437%2011.525%2021.6437%2012.475%2021.0062%2013.0062L18.1187%2015.9437L21.0062%2018.9375C21.6437%2019.525%2021.6437%2020.475%2021.0062%2021.0062C20.4749%2021.6437%2019.5249%2021.6437%2018.9374%2021.0062L15.9437%2018.1187L13.0062%2021.0062C12.4749%2021.6437%2011.5249%2021.6437%2010.9374%2021.0062C10.3562%2020.475%2010.3562%2019.525%2010.9374%2018.9375L13.8812%2015.9437L10.9374%2013.0062C10.3562%2012.475%2010.3562%2011.525%2010.9374%2010.9375C11.5249%2010.3562%2012.4749%2010.3562%2013.0062%2010.9375L15.9437%2013.8812Z'%20fill='%23DF4561'/%3e%3cpath%20opacity='0.4'%20d='M0%2016C0%207.1625%207.1625%200%2016%200C24.8375%200%2032%207.1625%2032%2016C32%2024.8375%2024.8375%2032%2016%2032C7.1625%2032%200%2024.8375%200%2016ZM10.9375%2013.0063L13.8813%2015.9438L10.9375%2018.9375C10.3562%2019.525%2010.3562%2020.475%2010.9375%2021.0063C11.525%2021.6438%2012.475%2021.6438%2013.0063%2021.0063L15.9438%2018.1187L18.9375%2021.0063C19.525%2021.6438%2020.475%2021.6438%2021.0063%2021.0063C21.6438%2020.475%2021.6438%2019.525%2021.0063%2018.9375L18.1187%2015.9438L21.0063%2013.0063C21.6438%2012.475%2021.6438%2011.525%2021.0063%2010.9375C20.475%2010.3562%2019.525%2010.3562%2018.9375%2010.9375L15.9438%2013.8813L13.0063%2010.9375C12.475%2010.3562%2011.525%2010.3562%2010.9375%2010.9375C10.3562%2011.525%2010.3562%2012.475%2010.9375%2013.0063Z'%20fill='%23DF4561'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2659_187'%3e%3crect%20width='32'%20height='32'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", d = ({ handleOnClose: e, className: l }) => {
-  const o = l != null ? c["dialog__close-icon "] + l : c["dialog__close-icon"];
-  return /* @__PURE__ */ t(
-    i,
+import { jsx as s } from "react/jsx-runtime";
+import { Icon as r } from "../Icon/Icon.js";
+import { s as t } from "../../Dialog.module-CGVM5V_D.js";
+import { B as a } from "../../Button-B1umG8kJ.js";
+const d = ({ handleOnClose: i, className: o }) => {
+  const l = o != null ? t["dialog__close-icon "] + o : t["dialog__close-icon"];
+  return /* @__PURE__ */ s(
+    a,
     {
-      className: o,
+      className: l,
       "aria-description": "Close dialog",
-      onClick: e,
+      onClick: i,
       "data-testid": "dialog-close-button",
-      children: /* @__PURE__ */ t("img", { src: s, alt: "close" })
+      children: /* @__PURE__ */ s(r, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
     }
   );
 };

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

@@ -4,17 +4,18 @@ import { default as Actions } from './Actions';
 import { ModalProps } from '@mui/base';
 import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
 
-export type CloseReason = "backdropClick" | "escapeKeyDown" | "closeButtonClick";
+export type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
 export interface DialogProps extends ModalProps {
-    /** main children content */
-    children: ReactElement<any, string | JSXElementConstructor<any>>;
+    /** main content */
+    children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
     /** display title label */
     dialogTitle: ReactNode;
     /** display subtitle */
     dialogSubtitle?: ReactNode;
     /** if true, show skeleton */
     isLoading?: boolean;
-    onClose: () => void;
+    /** callback for when close is clicked */
+    onClose?: () => void;
 }
 declare const Dialog: ({ children, dialogTitle, dialogSubtitle, isLoading, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogTitle, Content, Actions };