@pismo/marola 0.0.1-alpha.9 → 1.0.0-beta.1

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

@@ -0,0 +1,35 @@
+import { TooltipProps } from './Tooltip.tsx';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, onTargetCreated, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        children: import('react').ReactNode;
+        title: import('react').ReactNode;
+        open?: boolean | undefined;
+        disableHoverListener?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        theme?: "black" | "white" | undefined;
+        padding?: "small" | "normal" | undefined;
+        position?: import('@floating-ui/utils').Placement | undefined;
+        arialRole?: import('react').AriaRole | undefined;
+        className?: string | undefined;
+        style?: import('react').CSSProperties | undefined;
+        'data-testid'?: string | undefined;
+        onTargetCreated?: ((e: HTMLElement) => void) | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Onclose: Story;
+export declare const InitialOpen: Story;
+export declare const WhiteTheme: Story;
+export declare const DisabledHover: Story;
+export declare const NormalPadding: Story;
+export declare const Positioning: Story;

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

@@ -1,6 +1,6 @@
 import { ComponentType, ElementType, HTMLAttributes, LabelHTMLAttributes, 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 VariantType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'base-lg' | 'base-xl' | 'base-xxl' | 'base' | 'base-sm';
 export type CommonTypographyHTMLAttributes = HTMLAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLTableCellElement>;
 export type TypographyProps = {
     /** Text or children to display */
@@ -9,8 +9,10 @@ export type TypographyProps = {
     element?: ElementType;
     /** Style to be visually displayed as  */
     variant?: VariantType;
-    /** Space seperated list of CSS classes to apply */
+    /** Space separated list of CSS classes to apply */
     className?: string;
+    /** Color to apply */
+    color?: string;
     /** Whether to apply underline text decoration */
     underline?: boolean;
     /** Whether to apply strikethrough text decoration */
@@ -29,3 +31,4 @@ export type TypographyProps = {
  */
 export declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import('react').RefAttributes<ElementType | ComponentType>>;
 export default Typography;
+export declare const Text: import('react').ForwardRefExoticComponent<TypographyProps & import('react').RefAttributes<ElementType | ComponentType>>;

package/dist/components/Typography/Typography.js

@@ -1,81 +1,65 @@
 import '../../assets/Typography.css';
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as c, useMemo as y } from "react";
-import { bemify as g, getBEMBase as k, getBEMBlock as q } from "../../utils/styleStrings.js";
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as m, useMemo as c } from "react";
+import { bemify as f, getBEMBase as x, getBEMBlock as k } from "../../utils/styleStrings.js";
 import { c as B } from "../../clsx-DB4S2d7J.js";
-const E = "_h1_13r5p_1", $ = "_h2_13r5p_11", w = "_h3_13r5p_21", M = "_h4_13r5p_31", v = "_body_13r5p_41", x = "_quote_13r5p_75", N = "_form__input_13r5p_98", T = "_form__hint_13r5p_103", j = "_form__label_13r5p_108", P = "_form__dropdown_13r5p_113", R = "_table__header_13r5p_131", S = "_table__body_13r5p_136", U = "_button_13r5p_159", _ = {
-  h1: E,
-  "h1--bold": "_h1--bold_13r5p_7",
-  h2: $,
-  "h2--bold": "_h2--bold_13r5p_17",
-  h3: w,
-  "h3--bold": "_h3--bold_13r5p_27",
-  h4: M,
-  "h4--bold": "_h4--bold_13r5p_37",
-  body: v,
-  "body--large": "_body--large_13r5p_46",
-  "body--medium": "_body--medium_13r5p_50",
-  "body--small": "_body--small_13r5p_54",
-  "body--tiny": "_body--tiny_13r5p_58",
-  "body--bold": "_body--bold_13r5p_62",
-  "body--strikethrough": "_body--strikethrough_13r5p_65",
-  "body--underlined": "_body--underlined_13r5p_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_13r5p_71",
-  quote: x,
-  "quote--large": "_quote--large_13r5p_80",
-  "quote--bold": "_quote--bold_13r5p_85",
-  "quote--strikethrough": "_quote--strikethrough_13r5p_88",
-  "quote--underlined": "_quote--underlined_13r5p_91",
-  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_13r5p_94",
-  form__input: N,
-  form__hint: T,
-  form__label: j,
-  form__dropdown: P,
-  "form--bold": "_form--bold_13r5p_118",
-  "form--strikethrough": "_form--strikethrough_13r5p_121",
-  "form--underlined": "_form--underlined_13r5p_124",
-  "form--strikethrough-underlined": "_form--strikethrough-underlined_13r5p_127",
-  table__header: R,
-  table__body: S,
-  "table__body--secondary": "_table__body--secondary_13r5p_141",
-  "table--bold": "_table--bold_13r5p_146",
-  "table--strikethrough": "_table--strikethrough_13r5p_149",
-  "table--underlined": "_table--underlined_13r5p_152",
-  "table--strikethrough-underlined": "_table--strikethrough-underlined_13r5p_155",
-  button: U,
-  "button--bold": "_button--bold_13r5p_165",
-  "button--strikethrough": "_button--strikethrough_13r5p_168",
-  "button--underlined": "_button--underlined_13r5p_171",
-  "button--strikethrough-underlined": "_button--strikethrough-underlined_13r5p_174"
-}, V = ["form", "table"], W = (e) => {
-  const r = e.toString();
-  let t = "body";
-  return r.match(/^h[1-4]/) ? t = r : r.match(/^h[5-6]/) && (t = "h4"), r === "th" && (t = "table-header"), r === "td" && (t = "table-body"), t;
-}, F = c((e, r) => {
+const t = {
+  "u-typography-h1": "_u-typography-h1_zizdh_1",
+  "u-typography-h2": "_u-typography-h2_zizdh_8",
+  "u-typography-h3": "_u-typography-h3_zizdh_15",
+  "u-typography-h4": "_u-typography-h4_zizdh_22",
+  "u-typography-h5": "_u-typography-h5_zizdh_29",
+  "u-typography-h6": "_u-typography-h6_zizdh_36",
+  "u-typography-base": "_u-typography-base_zizdh_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_zizdh_48",
+  "u-typography-base--xl": "_u-typography-base--xl_zizdh_52",
+  "u-typography-base--lg": "_u-typography-base--lg_zizdh_56",
+  "u-typography-base--sm": "_u-typography-base--sm_zizdh_60",
+  "u-typography-base--bold": "_u-typography-base--bold_zizdh_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_zizdh_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_zizdh_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_zizdh_73"
+}, $ = (e) => {
+  const a = e.toString();
+  let r = "base";
+  return a.match(/^h[1-6]/) && (r = a), r;
+}, E = m((e, a) => {
   const {
-    children: t,
-    className: b,
-    underline: l = !1,
-    element: h = "span",
-    bold: u = !1,
-    variant: i = W(h),
-    strikethrough: o = !1,
-    elementProps: a
-  } = e, p = h, m = y(() => {
-    const d = g(i, V), s = k(d), n = q(d);
+    children: r,
+    className: s,
+    underline: y = !1,
+    element: u = "span",
+    bold: i = !1,
+    color: d,
+    variant: _ = $(u),
+    strikethrough: h = !1,
+    elementProps: n
+  } = e, l = u, z = c(() => {
+    const o = `u-typography-${f(_)}`, g = x(o), p = k(o);
     return B(
-      _[s],
-      { [_[`${d}`]]: d !== s },
-      b,
-      { [_[`${n}--bold`]]: u },
-      { [_[`${n}--underlined`]]: l },
-      { [_[`${n}--strikethrough`]]: o },
-      { [_[`${n}--strikethrough-underlined`]]: o && o && l }
+      t[g],
+      { [t[`${o}`]]: o !== g },
+      s,
+      { [t[`${p}--bold`]]: i },
+      { [t[`${p}--underlined`]]: y },
+      { [t[`${p}--strikethrough`]]: h },
+      { [t[`${p}--strikethrough-underlined`]]: h && h && y }
     );
-  }, [u, b, o, l, i]);
-  return /* @__PURE__ */ f(p, { ref: r, "data-testid": e["data-testid"], ...a ?? {}, className: m, children: t });
-});
+  }, [i, s, h, y, _]);
+  return /* @__PURE__ */ b(
+    l,
+    {
+      style: { color: d },
+      ref: a,
+      "data-testid": e["data-testid"],
+      ...n ?? {},
+      className: z,
+      children: r
+    }
+  );
+}), j = E;
 export {
-  F as Typography,
-  F as default
+  j as Text,
+  E as Typography,
+  E as default
 };

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

@@ -17,6 +17,7 @@ declare const meta: {
         element?: import('react').ElementType | undefined;
         variant?: import('./Typography').VariantType | undefined;
         className?: string | undefined;
+        color?: string | undefined;
         underline?: boolean | undefined;
         strikethrough?: boolean | undefined;
         bold?: boolean | undefined;

package/dist/contexts/SnackbarProvider/SnackbarProvider.d.ts

@@ -0,0 +1,11 @@
+import { SnackbarProps } from '../../components/Snackbar/Snackbar';
+
+export type SnackbarContextProps = {
+    showMessage: (message: string, variant?: SnackbarProps['variant'], duration?: number) => void;
+};
+export declare const SnackbarContext: import('react').Context<SnackbarContextProps>;
+export type SnackbarProviderProps = {
+    children: React.ReactNode;
+};
+export declare const SnackbarProvider: ({ children }: SnackbarProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useSnackbar: () => SnackbarContextProps;

package/dist/contexts/SnackbarProvider/SnackbarProvider.js

@@ -0,0 +1,50 @@
+import { jsx as n, jsxs as l, Fragment as g } from "react/jsx-runtime";
+import { createContext as m, useState as p, useCallback as f, useContext as C } from "react";
+import { Snackbar as b } from "../../components/Snackbar/Snackbar.js";
+const o = m({
+  showMessage: () => {
+  }
+}), s = { message: "", variant: "success", duration: 5e3, open: !1 }, h = ({ children: r }) => {
+  const [e, t] = p(s), i = f(
+    (a = s.message, u = s.variant, d = s.duration) => {
+      t({
+        id: `${(/* @__PURE__ */ new Date()).getTime()}-${a}`,
+        message: a,
+        variant: u,
+        duration: d,
+        open: !0
+      });
+    },
+    [t]
+  ), c = () => {
+    t((a) => ({ ...a, open: !1 }));
+  };
+  return /* @__PURE__ */ n(
+    o.Provider,
+    {
+      value: {
+        showMessage: i
+      },
+      children: /* @__PURE__ */ l(g, { children: [
+        r,
+        /* @__PURE__ */ n(
+          b,
+          {
+            autoHideDuration: e.duration,
+            variant: e.variant,
+            open: e.open,
+            snackbarMessage: e.message,
+            onClose: c,
+            "data-testid": "snackbar"
+          },
+          e.id
+        )
+      ] })
+    }
+  );
+}, S = () => C(o);
+export {
+  o as SnackbarContext,
+  h as SnackbarProvider,
+  S as useSnackbar
+};

package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts

@@ -0,0 +1,21 @@
+import { SnackbarProviderProps } from './SnackbarProvider';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ children }: SnackbarProviderProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        [x: string]: any;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Provider: Story;