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

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

@@ -0,0 +1,14 @@
+import { TabsProps } from './Tabs.tsx';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;

package/dist/components/TextDisplay/TextDisplay.d.ts

@@ -0,0 +1,23 @@
+import { VariantType } from '../Typography/Typography.tsx';
+import { default as React } from 'react';
+
+type OptionsProps = {
+    variant?: VariantType;
+    color?: string;
+};
+export interface TextDisplayProps {
+    /** TextDisplay label */
+    label: React.ReactNode;
+    /** TextDisplay value */
+    value: React.ReactNode;
+    /** Renders skeleton when true */
+    isLoading?: boolean;
+    /** Sets the testId prefix for label, value and skeletons */
+    testId?: string;
+    /** Sets the label options */
+    labelOptions?: OptionsProps;
+    /** Sets the value options */
+    valueOptions?: OptionsProps;
+}
+export declare const TextDisplay: ({ label, value, isLoading, testId, labelOptions, valueOptions, }: TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextDisplay/TextDisplay.js

@@ -0,0 +1,37 @@
+import '../../assets/TextDisplay.css';
+import { jsxs as h, jsx as c } from "react/jsx-runtime";
+import { Skeleton as d } from "../Skeleton/Skeleton.js";
+import { Typography as o } from "../Typography/Typography.js";
+const x = "_container_13z5o_1", f = {
+  container: x
+}, $ = ({
+  label: m,
+  value: y,
+  isLoading: e = !1,
+  testId: t = "TextDisplay",
+  labelOptions: r,
+  valueOptions: a
+}) => /* @__PURE__ */ h("div", { className: f.container, children: [
+  /* @__PURE__ */ c(
+    o,
+    {
+      color: (r == null ? void 0 : r.color) || "var(--gray-90)",
+      variant: (r == null ? void 0 : r.variant) || "base",
+      "data-testid": `${t}-label`,
+      children: e ? /* @__PURE__ */ c(d, { style: { width: 70, marginBottom: 2 }, "data-testid": `${t}-skeletonLabel` }) : m
+    }
+  ),
+  /* @__PURE__ */ c(
+    o,
+    {
+      bold: !0,
+      color: (a == null ? void 0 : a.color) || "var(--gray-90)",
+      variant: (a == null ? void 0 : a.variant) || "base-lg",
+      "data-testid": `${t}-value`,
+      children: e ? /* @__PURE__ */ c(d, { style: { width: 100 }, "data-testid": `${t}-skeletonValue` }) : y || "-"
+    }
+  )
+] });
+export {
+  $ as TextDisplay
+};

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

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ label, value, isLoading, testId, labelOptions, valueOptions, }: import('./TextDisplay').TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithLoading: Story;
+export declare const Size: Story;
+export declare const Color: Story;

package/dist/components/TextDisplay/textDisplay.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toggle/Toggle.js

@@ -1,134 +1,133 @@
-import '../../assets/Toggle.css';
-import { jsxs as I, jsx as T } from "react/jsx-runtime";
-import { c as F } from "../../clsx-DB4S2d7J.js";
-import { a as y, _ as v } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
-import * as V from "react";
-import { u as U, g as q, a as H, b as N, P as e, c as M, d as A } from "../../index-CqjC7P5Y.js";
-import { u as D } from "../../useControlled-CCMYYdCM.js";
-import { u as L } from "../../useIsFocusVisible-BH4IAdcw.js";
-function W(l) {
+import '../../assets/Toggle2.css';
+import { jsxs as j, jsx as P } from "react/jsx-runtime";
+import { c as O } from "../../clsx-DB4S2d7J.js";
+import { u as E, b as k, g as v, a as U, _ as q, c as C, P as e, d as H, e as M } from "../../index-CH45lKw7.js";
+import * as F from "react";
+import { u as A } from "../../useControlled-CCMYYdCM.js";
+import { u as D } from "../../useIsFocusVisible-BH4IAdcw.js";
+function L(l) {
   const {
     checked: s,
-    defaultChecked: p,
-    disabled: c,
-    onBlur: a,
-    onChange: g,
-    onFocus: r,
+    defaultChecked: i,
+    disabled: r,
+    onBlur: c,
+    onChange: h,
+    onFocus: n,
     onFocusVisible: u,
-    readOnly: n,
-    required: i
-  } = l, [S, x] = D({
+    readOnly: a,
+    required: p
+  } = l, [N, V] = A({
     controlled: s,
-    default: !!p,
+    default: !!i,
     name: "Switch",
     state: "checked"
-  }), B = (t) => (o) => {
-    var b;
-    o.nativeEvent.defaultPrevented || (x(o.target.checked), g == null || g(o), (b = t.onChange) == null || b.call(t, o));
+  }), S = (t) => (o) => {
+    var d;
+    o.nativeEvent.defaultPrevented || (V(o.target.checked), h == null || h(o), (d = t.onChange) == null || d.call(t, o));
   }, {
-    isFocusVisibleRef: _,
-    onBlur: w,
-    onFocus: f,
-    ref: m
-  } = L(), [h, P] = V.useState(!1);
-  c && h && P(!1), V.useEffect(() => {
-    _.current = h;
-  }, [h, _]);
-  const k = V.useRef(null), R = (t) => (o) => {
-    var b;
-    k.current || (k.current = o.currentTarget), f(o), _.current === !0 && (P(!0), u == null || u(o)), r == null || r(o), (b = t.onFocus) == null || b.call(t, o);
-  }, O = (t) => (o) => {
-    var b;
-    w(o), _.current === !1 && P(!1), a == null || a(o), (b = t.onBlur) == null || b.call(t, o);
-  }, C = U(m, k);
+    isFocusVisibleRef: b,
+    onBlur: B,
+    onFocus: _,
+    ref: f
+  } = D(), [y, z] = F.useState(!1);
+  r && y && z(!1), F.useEffect(() => {
+    b.current = y;
+  }, [y, b]);
+  const m = F.useRef(null), w = (t) => (o) => {
+    var d;
+    m.current || (m.current = o.currentTarget), _(o), b.current === !0 && (z(!0), u == null || u(o)), n == null || n(o), (d = t.onFocus) == null || d.call(t, o);
+  }, T = (t) => (o) => {
+    var d;
+    B(o), b.current === !1 && z(!1), c == null || c(o), (d = t.onBlur) == null || d.call(t, o);
+  }, x = E(f, m);
   return {
-    checked: S,
-    disabled: !!c,
-    focusVisible: h,
-    getInputProps: (t = {}) => y({
+    checked: N,
+    disabled: !!r,
+    focusVisible: y,
+    getInputProps: (t = {}) => k({
       checked: s,
-      defaultChecked: p,
-      disabled: c,
-      readOnly: n,
-      ref: C,
-      required: i,
+      defaultChecked: i,
+      disabled: r,
+      readOnly: a,
+      ref: x,
+      required: p,
       type: "checkbox",
       role: "switch",
       "aria-checked": s
     }, t, {
-      onChange: B(t),
-      onFocus: R(t),
-      onBlur: O(t)
+      onChange: S(t),
+      onFocus: w(t),
+      onBlur: T(t)
     }),
-    inputRef: C,
-    readOnly: !!n
+    inputRef: x,
+    readOnly: !!a
   };
 }
-const $ = "Switch";
-function z(l) {
-  return q($, l);
+const I = "Switch";
+function W(l) {
+  return v(I, l);
 }
-H($, ["root", "input", "track", "thumb", "checked", "disabled", "focusVisible", "readOnly"]);
+U(I, ["root", "input", "track", "thumb", "checked", "disabled", "focusVisible", "readOnly"]);
 const G = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"], J = (l) => {
   const {
     checked: s,
-    disabled: p,
-    focusVisible: c,
-    readOnly: a
+    disabled: i,
+    focusVisible: r,
+    readOnly: c
   } = l;
-  return M({
-    root: ["root", s && "checked", p && "disabled", c && "focusVisible", a && "readOnly"],
+  return H({
+    root: ["root", s && "checked", i && "disabled", r && "focusVisible", c && "readOnly"],
     thumb: ["thumb"],
     input: ["input"],
     track: ["track"]
-  }, A(z));
-}, E = /* @__PURE__ */ V.forwardRef(function(s, p) {
-  var c, a, g, r;
+  }, M(W));
+}, $ = /* @__PURE__ */ F.forwardRef(function(s, i) {
+  var r, c, h, n;
   const {
     slotProps: u = {},
-    slots: n = {}
-  } = s, i = v(s, G), {
-    getInputProps: S,
-    checked: x,
-    disabled: B,
-    focusVisible: _,
-    readOnly: w
-  } = W(s), f = y({}, s, {
-    checked: x,
-    disabled: B,
-    focusVisible: _,
-    readOnly: w
-  }), m = J(f), h = (c = n.root) != null ? c : "span", P = N({
-    elementType: h,
+    slots: a = {}
+  } = s, p = q(s, G), {
+    getInputProps: N,
+    checked: V,
+    disabled: S,
+    focusVisible: b,
+    readOnly: B
+  } = L(s), _ = k({}, s, {
+    checked: V,
+    disabled: S,
+    focusVisible: b,
+    readOnly: B
+  }), f = J(_), y = (r = a.root) != null ? r : "span", z = C({
+    elementType: y,
     externalSlotProps: u.root,
-    externalForwardedProps: i,
+    externalForwardedProps: p,
     additionalProps: {
-      ref: p
+      ref: i
     },
-    ownerState: f,
-    className: m.root
-  }), k = (a = n.thumb) != null ? a : "span", R = N({
-    elementType: k,
+    ownerState: _,
+    className: f.root
+  }), m = (c = a.thumb) != null ? c : "span", w = C({
+    elementType: m,
     externalSlotProps: u.thumb,
-    ownerState: f,
-    className: m.thumb
-  }), O = (g = n.input) != null ? g : "input", C = N({
-    elementType: O,
-    getSlotProps: S,
+    ownerState: _,
+    className: f.thumb
+  }), T = (h = a.input) != null ? h : "input", x = C({
+    elementType: T,
+    getSlotProps: N,
     externalSlotProps: u.input,
-    ownerState: f,
-    className: m.input
-  }), j = n.track === null ? () => null : (r = n.track) != null ? r : "span", t = N({
-    elementType: j,
+    ownerState: _,
+    className: f.input
+  }), R = a.track === null ? () => null : (n = a.track) != null ? n : "span", t = C({
+    elementType: R,
     externalSlotProps: u.track,
-    ownerState: f,
-    className: m.track
+    ownerState: _,
+    className: f.track
   });
-  return /* @__PURE__ */ I(h, y({}, P, {
-    children: [/* @__PURE__ */ T(j, y({}, t)), /* @__PURE__ */ T(k, y({}, R)), /* @__PURE__ */ T(O, y({}, C))]
+  return /* @__PURE__ */ j(y, k({}, z, {
+    children: [/* @__PURE__ */ P(R, k({}, t)), /* @__PURE__ */ P(m, k({}, w)), /* @__PURE__ */ P(T, k({}, x))]
   }));
 });
-process.env.NODE_ENV !== "production" && (E.propTypes = {
+process.env.NODE_ENV !== "production" && ($.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -199,54 +198,69 @@ process.env.NODE_ENV !== "production" && (E.propTypes = {
     track: e.oneOfType([e.elementType, e.oneOf([null])])
   })
 });
-const K = "_toggle_11c3l_1", Q = "_input_11c3l_12", X = "_thumb_11c3l_23", Y = "_track_11c3l_37", Z = "_toggle__label_11c3l_61", d = {
-  toggle: K,
-  "toggle__toggle-el-wrapper": "_toggle__toggle-el-wrapper_11c3l_8",
-  input: Q,
-  thumb: X,
-  track: Y,
-  "toggle--focus-visible": "_toggle--focus-visible_11c3l_47",
-  "toggle--checked": "_toggle--checked_11c3l_51",
-  toggle__label: Z,
-  "toggle--disabled": "_toggle--disabled_11c3l_66"
-}, ne = ({
+const K = "_toggle__label_1rzg2_43", Q = "_toggle_1rzg2_43", X = "_input_1rzg2_88", Y = "_thumb_1rzg2_99", Z = "_track_1rzg2_113", g = {
+  "u-typography-h1": "_u-typography-h1_1rzg2_1",
+  "u-typography-h2": "_u-typography-h2_1rzg2_8",
+  "u-typography-h3": "_u-typography-h3_1rzg2_15",
+  "u-typography-h4": "_u-typography-h4_1rzg2_22",
+  "u-typography-h5": "_u-typography-h5_1rzg2_29",
+  "u-typography-h6": "_u-typography-h6_1rzg2_36",
+  "u-typography-base": "_u-typography-base_1rzg2_43",
+  toggle__label: K,
+  "u-typography-base--xxl": "_u-typography-base--xxl_1rzg2_48",
+  "u-typography-base--xl": "_u-typography-base--xl_1rzg2_52",
+  "u-typography-base--lg": "_u-typography-base--lg_1rzg2_56",
+  "u-typography-base--sm": "_u-typography-base--sm_1rzg2_60",
+  "u-typography-base--bold": "_u-typography-base--bold_1rzg2_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1rzg2_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1rzg2_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1rzg2_73",
+  toggle: Q,
+  "toggle__toggle-el-wrapper": "_toggle__toggle-el-wrapper_1rzg2_84",
+  input: X,
+  thumb: Y,
+  track: Z,
+  "toggle--focus-visible": "_toggle--focus-visible_1rzg2_123",
+  "toggle--checked": "_toggle--checked_1rzg2_127",
+  "toggle--disabled": "_toggle--disabled_1rzg2_140"
+}, re = ({
   label: l,
   checked: s,
-  disabled: p,
-  classNameWrapper: c,
-  classNameInput: a,
-  "data-testid": g,
-  onChange: r,
+  disabled: i,
+  classNameWrapper: r,
+  classNameInput: c,
+  "data-testid": h,
+  onChange: n,
   classNameLabel: u
 }) => {
-  const n = (i) => {
-    r == null || r(i);
+  const a = (p) => {
+    n == null || n(p);
   };
-  return /* @__PURE__ */ I("div", { className: F(d.toggle, c), "data-testid": g, children: [
-    /* @__PURE__ */ T(
-      E,
+  return /* @__PURE__ */ j("div", { className: O(g.toggle, r), "data-testid": h, children: [
+    /* @__PURE__ */ P(
+      $,
       {
         checked: s === !0,
-        disabled: p,
-        onChange: n,
+        disabled: i,
+        onChange: a,
         "aria-label": l,
         slotProps: {
-          root: (i) => ({
-            className: F(d["toggle__toggle-el-wrapper"], {
-              [d["toggle--disabled"]]: i.disabled,
-              [d["toggle--focus-visible"]]: i.focusVisible,
-              [d["toggle--checked"]]: i.checked
+          root: (p) => ({
+            className: O(g["toggle__toggle-el-wrapper"], {
+              [g["toggle--disabled"]]: p.disabled,
+              [g["toggle--focus-visible"]]: p.focusVisible,
+              [g["toggle--checked"]]: p.checked
             })
           }),
-          input: { className: F(d.input, a) },
-          thumb: { className: d.thumb },
-          track: { className: d.track }
+          input: { className: O(g.input, c) },
+          thumb: { className: g.thumb },
+          track: { className: g.track }
         }
       }
     ),
-    l && /* @__PURE__ */ T("label", { className: F(d.toggle__label, u), children: l })
+    l && /* @__PURE__ */ P("label", { className: O(g.toggle__label, u), children: l })
   ] });
 };
 export {
-  ne as Toggle
+  re as Toggle
 };

package/dist/components/ToggleGroup/Group.d.ts

@@ -0,0 +1,18 @@
+import { ToggleGroupItemProps } from './Toggle.tsx';
+import { ReactElement, ReactNode } from 'react';
+
+export type ToggleGroupProps = {
+    /** Optional title and description content */
+    legend?: ReactNode;
+    /** Optional any errors to display */
+    error?: ReactNode;
+    /** ToggleGroupItems to display; options to toggle between */
+    children: Array<ReactElement<ToggleGroupItemProps<string | number>>>;
+    /**
+     * Dataset test id only used for tests to reach in and grab the rendered DOM nodes base value is used for fieldset
+     * error and legend append their names e.g. {data-testid}-error and {data-testid}-legend
+     * */
+    'data-testid'?: string;
+};
+declare const Group: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+export default Group;

package/dist/components/ToggleGroup/Group.js

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import "react";
+import "../Icon/Icon.js";
+import { G as i } from "../../Group-B3p31ftp.js";
+export {
+  i as default
+};

package/dist/components/ToggleGroup/Group.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ToggleGroup/Toggle.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type ToggleGroupItemProps<T extends string | number> = {
+    /** The display text to show for this option */
+    text: string;
+    /** The underlining value of this option */
+    value: T;
+    /** Whether this radio button is selected */
+    isSelected?: boolean;
+    /** callback for selection change */
+    onChange: (value: T | '') => void;
+    /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the label */
+    'data-testid'?: string;
+};
+declare const Toggle: import('react').ForwardRefExoticComponent<ToggleGroupItemProps<string | number> & import('react').RefAttributes<HTMLInputElement>>;
+export default Toggle;

package/dist/components/ToggleGroup/Toggle.js

@@ -0,0 +1,17 @@
+import "react/jsx-runtime";
+import "react";
+import "../../clsx-DB4S2d7J.js";
+import "../Icon/Icon.js";
+import "../Button/Button.js";
+import { T as b } from "../../Toggle-BCgIItCc.js";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import "../Select/Select.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+import "../../Group-B3p31ftp.js";
+import "../../contexts/SnackbarProvider/SnackbarProvider.js";
+export {
+  b as default
+};

package/dist/components/ToggleGroup/Toggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroupItem } from './Toggle';
+export { default as ToggleGroup } from './Group';

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,6 @@
+import { T as e } from "../../Toggle-BCgIItCc.js";
+import { G as p } from "../../Group-B3p31ftp.js";
+export {
+  p as ToggleGroup,
+  e as ToggleGroupItem
+};

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

@@ -0,0 +1,25 @@
+import { ToggleGroupProps } from './Group.tsx';
+import { StoryObj } from '@storybook/react';
+import { FunctionComponent } from 'react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        legend?: import('react').ReactNode;
+        error?: import('react').ReactNode;
+        children: import('react').ReactElement<import('./Toggle.tsx').ToggleGroupItemProps<string | number>, string | import('react').JSXElementConstructor<any>>[];
+        'data-testid'?: string | undefined;
+        ref?: import('react').LegacyRef<HTMLFieldSetElement> | undefined;
+        key?: import('react').Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    subcomponents: {
+        ToggleGroupItem: FunctionComponent<unknown>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const NoLegend: Story;
+export declare const WithError: Story;

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

@@ -1,17 +1,33 @@
 import { PopupPlacement } from '@mui/base';
+import { AriaRole, CSSProperties, ReactNode } from 'react';
 
-type TooltipProps = {
-    children: React.ReactNode;
-    show?: boolean;
-    anchorRef?: HTMLElement | null | undefined;
+export type TooltipProps = {
+    /** Tooltip reference element. */
+    children: ReactNode;
+    /**  Tooltip title. Zero-length titles string, undefined, null and false are never displayed. */
+    title: ReactNode;
+    /** Should the tooltip be initially open */
+    open?: boolean;
+    /** Disable the hover listener */
     disableHoverListener?: boolean;
+    /** Function to run when the tooltip is closed */
     onClose?: () => void;
+    /** The color of the tooltip */
     theme?: 'white' | 'black';
+    /** Dhe padding applied to the tooltip */
     padding?: 'small' | 'normal';
+    /** The Position where the tooltip will be display relative to the anchor element */
     position?: PopupPlacement;
-    arialRole?: React.AriaRole;
+    /** Accessibility role label */
+    arialRole?: AriaRole;
+    /** Additional classnames to be applied to the tooltip */
     className?: string;
+    /** Additional styles to be applied to the tooltip */
+    style?: CSSProperties;
+    /** Test id */
     'data-testid'?: string;
+    /** Function thats return the HTML Element of target. Important to EllipsisTooltip knows if the node needs or not the ellipsis */
+    onTargetCreated?: (e: HTMLElement) => void;
 };
-declare const Tooltip: ({ children, show, anchorRef, onClose, arialRole, position, theme, padding, className, disableHoverListener, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, onTargetCreated, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { Tooltip };