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

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

@@ -2,12 +2,28 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ label, placeholder, classNameWrapper, classNameInputSearch, disabled, "data-testid": dataTestId, }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+    component: ({ classNameWrapper, triggerDelay, value, onChange, ...rest }: {
+        triggerDelay?: number | undefined;
+    } & import('react').InputHTMLAttributes<HTMLInputElement> & {
         label?: string | undefined;
-        placeholder?: string | undefined;
+        infoMessage?: string | undefined;
+        errorMessage?: string | undefined;
+        leftIcon?: import('react').ReactNode;
+        rightIcon?: import('react').ReactNode;
+        type?: "search" | "text" | "password" | undefined;
+        hideCharsCounter?: boolean | undefined;
         classNameWrapper?: string | undefined;
-        classNameInputSearch?: string | undefined;
-        'data-testid'?: string | undefined;
+        classNameLabel?: string | undefined;
+        classNameInput?: string | undefined;
+        classNameInfoMessage?: string | undefined;
+        classNameErrorMessage?: string | undefined;
+        classNameCharsCounter?: string | undefined;
+        'data-testid-wrapper'?: string | undefined;
+        'data-testid-label'?: string | undefined;
+        'data-testid-input'?: string | undefined;
+        'data-testid-infoMessage'?: string | undefined;
+        'data-testid-errorMessage'?: string | undefined;
+        'data-testid-charsCounter'?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
@@ -18,5 +34,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const WithLabel: Story;
+export declare const WithCustomDelay: Story;
 export declare const WithPlaceholder: Story;
 export declare const Disabled: Story;

package/dist/components/InputSearch/InputSearch.stories.js

@@ -1,25 +1,61 @@
-import { InputSearch as a } from "./InputSearch.js";
-const l = {
+import { jsx as o } from "react/jsx-runtime";
+import { useState as l, useEffect as n } from "react";
+import { InputSearch as t } from "./InputSearch.js";
+const d = {
   title: "Components/InputSearch",
-  component: a,
+  component: t,
   tags: ["autodocs"],
   parameters: {
     layout: "padded"
   }
-}, r = {
-  args: {}
-}, t = {
+}, h = {
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 500 milliseconds");
+    }, [e]), /* @__PURE__ */ o(t, { value: e, onChange: (r) => a(r.target.value) });
+  }
+}, m = {
   name: "With label",
-  args: {
-    label: "Search by name or id"
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 500 milliseconds");
+    }, [e]), /* @__PURE__ */ o(t, { label: "Search by name or id", value: e, onChange: (r) => a(r.target.value) });
+  }
+}, u = {
+  name: "With custom delay",
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 2000 milliseconds");
+    }, [e]), /* @__PURE__ */ o(
+      t,
+      {
+        label: "Search by name or id",
+        value: e,
+        onChange: (r) => a(r.target.value),
+        triggerDelay: 2e3
+      }
+    );
   }
-}, o = {
+}, g = {
   name: "With placeholder",
-  args: {
-    label: "Search",
-    placeholder: "Search by name or id"
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 500 milliseconds");
+    }, [e]), /* @__PURE__ */ o(
+      t,
+      {
+        label: "Search",
+        placeholder: "Search by name or id",
+        value: e,
+        onChange: (r) => a(r.target.value)
+      }
+    );
   }
-}, c = {
+}, S = {
   args: {
     label: "Search",
     placeholder: "Search by name or id",
@@ -28,9 +64,10 @@ const l = {
   }
 };
 export {
-  c as Disabled,
-  r as Simple,
-  t as WithLabel,
-  o as WithPlaceholder,
-  l as default
+  S as Disabled,
+  h as Simple,
+  u as WithCustomDelay,
+  m as WithLabel,
+  g as WithPlaceholder,
+  d as default
 };

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

@@ -1,7 +1,7 @@
 export interface LoadingSpinnerProps {
     /** Whether to invert colours or not */
     invert?: boolean;
-    /** Space seperated list of CSS classes to apply */
+    /** Space separated list of CSS classes to apply */
     classNames?: string;
 }
 export declare const LoadingSpinner: ({ invert, classNames }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LoadingSpinner/LoadingSpinner.stories.js

@@ -1,6 +1,5 @@
-import '../../assets/global.css';
 import { jsx as t } from "react/jsx-runtime";
-/* empty css                    */
+import "../Chip/Chip.js";
 import "../Button/Button.js";
 import "react";
 import "../Dialog/Backdrop.js";

package/dist/components/Select/Select.stories.js

@@ -1,6 +1,5 @@
-import '../../assets/global.css';
 import { jsxs as l, Fragment as t, jsx as e } from "react/jsx-runtime";
-/* empty css                    */
+import "../Chip/Chip.js";
 import "../Button/Button.js";
 import * as n from "react";
 import "../Dialog/Backdrop.js";

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

@@ -9,7 +9,7 @@ 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;
     /** Whether to apply underline text decoration */
     underline?: boolean;

package/dist/components/Typography/Typography.js

@@ -1,81 +1,83 @@
 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 { 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",
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as f, useMemo as y } from "react";
+import { bemify as g, getBEMBase as p, getBEMBlock as q } from "../../utils/styleStrings.js";
+import { c as M } from "../../clsx-DB4S2d7J.js";
+const B = "_h1_1elsk_1", E = "_h2_1elsk_11", S = "_h3_1elsk_21", $ = "_h4_1elsk_31", w = "_body_1elsk_41", v = "_quote_1elsk_75", x = "_form__input_1elsk_98", N = "_form__hint_1elsk_103", T = "_form__label_1elsk_108", j = "_form__dropdown_1elsk_113", P = "_table__header_1elsk_131", R = "_table__body_1elsk_136", U = "_button_1elsk_159", V = "_SM_1elsk_178", t = {
+  h1: B,
+  "h1--bold": "_h1--bold_1elsk_7",
+  h2: E,
+  "h2--bold": "_h2--bold_1elsk_17",
+  h3: S,
+  "h3--bold": "_h3--bold_1elsk_27",
+  h4: $,
+  "h4--bold": "_h4--bold_1elsk_37",
+  body: w,
+  "body--large": "_body--large_1elsk_46",
+  "body--medium": "_body--medium_1elsk_50",
+  "body--small": "_body--small_1elsk_54",
+  "body--tiny": "_body--tiny_1elsk_58",
+  "body--bold": "_body--bold_1elsk_62",
+  "body--strikethrough": "_body--strikethrough_1elsk_65",
+  "body--underlined": "_body--underlined_1elsk_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_1elsk_71",
+  quote: v,
+  "quote--large": "_quote--large_1elsk_80",
+  "quote--bold": "_quote--bold_1elsk_85",
+  "quote--strikethrough": "_quote--strikethrough_1elsk_88",
+  "quote--underlined": "_quote--underlined_1elsk_91",
+  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_1elsk_94",
+  form__input: x,
+  form__hint: N,
+  form__label: T,
+  form__dropdown: j,
+  "form--bold": "_form--bold_1elsk_118",
+  "form--strikethrough": "_form--strikethrough_1elsk_121",
+  "form--underlined": "_form--underlined_1elsk_124",
+  "form--strikethrough-underlined": "_form--strikethrough-underlined_1elsk_127",
+  table__header: P,
+  table__body: R,
+  "table__body--secondary": "_table__body--secondary_1elsk_141",
+  "table--bold": "_table--bold_1elsk_146",
+  "table--strikethrough": "_table--strikethrough_1elsk_149",
+  "table--underlined": "_table--underlined_1elsk_152",
+  "table--strikethrough-underlined": "_table--strikethrough-underlined_1elsk_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) => {
+  "button--bold": "_button--bold_1elsk_165",
+  "button--strikethrough": "_button--strikethrough_1elsk_168",
+  "button--underlined": "_button--underlined_1elsk_171",
+  "button--strikethrough-underlined": "_button--strikethrough-underlined_1elsk_174",
+  SM: V,
+  "SM--bold": "_SM--bold_1elsk_183"
+}, W = ["form", "table"], z = (o) => {
+  const e = o.toString();
+  let _ = "body";
+  return e.match(/^h[1-4]/) ? _ = e : e.match(/^h[5-6]/) && (_ = "h4"), e === "th" && (_ = "table-header"), e === "td" && (_ = "table-body"), _;
+}, G = f((o, e) => {
   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);
-    return B(
-      _[s],
-      { [_[`${d}`]]: d !== s },
-      b,
-      { [_[`${n}--bold`]]: u },
-      { [_[`${n}--underlined`]]: l },
-      { [_[`${n}--strikethrough`]]: o },
-      { [_[`${n}--strikethrough-underlined`]]: o && o && l }
+    children: _,
+    className: n,
+    underline: d = !1,
+    element: b = "span",
+    bold: h = !1,
+    variant: u = z(b),
+    strikethrough: l = !1,
+    elementProps: k
+  } = o, a = b, m = y(() => {
+    const r = g(u, W), i = p(r), s = q(r);
+    return M(
+      t[i],
+      { [t[`${r}`]]: r !== i },
+      n,
+      { [t[`${s}--bold`]]: h },
+      { [t[`${s}--underlined`]]: d },
+      { [t[`${s}--strikethrough`]]: l },
+      { [t[`${s}--strikethrough-underlined`]]: l && l && d }
     );
-  }, [u, b, o, l, i]);
-  return /* @__PURE__ */ f(p, { ref: r, "data-testid": e["data-testid"], ...a ?? {}, className: m, children: t });
+  }, [h, n, l, d, u]);
+  return /* @__PURE__ */ c(a, { ref: e, "data-testid": o["data-testid"], ...k ?? {}, className: m, children: _ });
 });
 export {
-  F as Typography,
-  F as default
+  G as Typography,
+  G as default
 };

package/dist/components/Typography/Typography.stories.js

@@ -1,6 +1,5 @@
-import '../../assets/global.css';
 import { jsx as t } from "react/jsx-runtime";
-/* empty css                    */
+import "../Chip/Chip.js";
 import "../Button/Button.js";
 import "react";
 import "../Dialog/Backdrop.js";