@pismo/marola 0.0.1-alpha.2 → 0.0.1-alpha.21

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,401 @@
+import { jsx as T } from "react/jsx-runtime";
+import * as r from "react";
+import { forwardRef as q, useState as B } from "react";
+import { T as G, u as J, s as Q } from "../../Tabs.module-jkH1Qjn7.js";
+import { Tab as Le } from "./Tab.js";
+import { TabPanel as _e } from "./TabPanel.js";
+import { g as I, a as _, b as C, _ as F, c as $, P as t, d as N, e as M } from "../../index-CH45lKw7.js";
+import { b as O, C as S } from "../../useCompoundItem-D1iRfg8D.js";
+import { u as X } from "../../useControlled-CCMYYdCM.js";
+import { L as Y, a as Z } from "../../combineHooksSlotProps-DVjg9PRh.js";
+import { l as ee, m as te, u as oe } from "../../useList-B0hog_3-.js";
+const k = "Tabs";
+function se(s) {
+  return I(k, s);
+}
+_(k, ["root", "horizontal", "vertical"]);
+function ne(s) {
+  const {
+    value: e,
+    defaultValue: o,
+    onChange: n,
+    orientation: i = "horizontal",
+    direction: c = "ltr",
+    selectionFollowsFocus: l = !1
+  } = s, [d, u] = X({
+    controlled: e,
+    default: o,
+    name: "Tabs",
+    state: "value"
+  }), a = r.useCallback((x, y) => {
+    u(y), n == null || n(x, y);
+  }, [n, u]), {
+    subitems: m,
+    contextValue: g
+  } = O(), p = r.useRef(() => {
+  }), b = r.useCallback((x) => {
+    var y;
+    return (y = m.get(x)) == null ? void 0 : y.id;
+  }, [m]), f = r.useCallback((x) => p.current(x), []), P = r.useCallback((x) => {
+    p.current = x;
+  }, []);
+  return {
+    contextValue: C({
+      direction: c,
+      getTabId: f,
+      getTabPanelId: b,
+      onSelected: a,
+      orientation: i,
+      registerTabIdLookup: P,
+      selectionFollowsFocus: l,
+      value: d
+    }, g)
+  };
+}
+function le(s) {
+  const {
+    value: e,
+    children: o
+  } = s, {
+    direction: n,
+    getItemIndex: i,
+    onSelected: c,
+    orientation: l,
+    registerItem: d,
+    registerTabIdLookup: u,
+    selectionFollowsFocus: a,
+    totalSubitemCount: m,
+    value: g,
+    getTabId: p,
+    getTabPanelId: b
+  } = e, f = r.useMemo(() => ({
+    getItemIndex: i,
+    registerItem: d,
+    totalSubitemCount: m
+  }), [d, i, m]), P = r.useMemo(() => ({
+    direction: n,
+    getTabId: p,
+    getTabPanelId: b,
+    onSelected: c,
+    orientation: l,
+    registerTabIdLookup: u,
+    selectionFollowsFocus: a,
+    value: g
+  }), [n, p, b, c, l, u, a, g]);
+  return /* @__PURE__ */ T(S.Provider, {
+    value: f,
+    children: /* @__PURE__ */ T(G.Provider, {
+      value: P,
+      children: o
+    })
+  });
+}
+const re = ["children", "value", "defaultValue", "orientation", "direction", "onChange", "selectionFollowsFocus", "slotProps", "slots"], ae = (s) => {
+  const {
+    orientation: e
+  } = s;
+  return N({
+    root: ["root", e]
+  }, M(se));
+}, w = /* @__PURE__ */ r.forwardRef(function(e, o) {
+  var n;
+  const {
+    children: i,
+    orientation: c = "horizontal",
+    direction: l = "ltr",
+    slotProps: d = {},
+    slots: u = {}
+  } = e, a = F(e, re), m = C({}, e, {
+    orientation: c,
+    direction: l
+  }), {
+    contextValue: g
+  } = ne(m), p = ae(m), b = (n = u.root) != null ? n : "div", f = $({
+    elementType: b,
+    externalSlotProps: d.root,
+    externalForwardedProps: a,
+    additionalProps: {
+      ref: o
+    },
+    ownerState: m,
+    className: p.root
+  });
+  return /* @__PURE__ */ T(b, C({}, f, {
+    children: /* @__PURE__ */ T(le, {
+      value: g,
+      children: i
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" && (w.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: t.node,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: t.oneOfType([t.number, t.string]),
+  /**
+   * The direction of the text.
+   * @default 'ltr'
+   */
+  direction: t.oneOf(["ltr", "rtl"]),
+  /**
+   * Callback invoked when new value is being set.
+   */
+  onChange: t.func,
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: t.oneOf(["horizontal", "vertical"]),
+  /**
+   * If `true` the selected tab changes on focus. Otherwise it only
+   * changes on activation.
+   */
+  selectionFollowsFocus: t.bool,
+  /**
+   * The props used for each slot inside the Tabs.
+   * @default {}
+   */
+  slotProps: t.shape({
+    root: t.oneOfType([t.func, t.object])
+  }),
+  /**
+   * The components used for each slot inside the Tabs.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: t.shape({
+    root: t.elementType
+  }),
+  /**
+   * The value of the currently selected `Tab`.
+   * If you don't want any selected `Tab`, you can set this prop to `null`.
+   */
+  value: t.oneOfType([t.number, t.string])
+});
+const E = "TabsList";
+function ie(s) {
+  return I(E, s);
+}
+_(E, ["root", "horizontal", "vertical"]);
+const z = {
+  valueChange: "valueChange"
+};
+function ue(s, e) {
+  if (e.type === z.valueChange)
+    return C({}, s, {
+      highlightedValue: e.value
+    });
+  const o = ee(s, e), {
+    context: {
+      selectionFollowsFocus: n
+    }
+  } = e;
+  if (e.type === Y.itemsChange) {
+    if (o.selectedValues.length > 0)
+      return C({}, o, {
+        highlightedValue: o.selectedValues[0]
+      });
+    te(null, "reset", e.context);
+  }
+  return n && o.highlightedValue != null ? C({}, o, {
+    selectedValues: [o.highlightedValue]
+  }) : o;
+}
+function ce(s) {
+  var e;
+  const {
+    rootRef: o
+  } = s, {
+    direction: n = "ltr",
+    onSelected: i,
+    orientation: c = "horizontal",
+    value: l,
+    registerTabIdLookup: d,
+    selectionFollowsFocus: u
+  } = J(), {
+    subitems: a,
+    contextValue: m
+  } = O(), g = r.useCallback((h) => {
+    var v;
+    return (v = a.get(h)) == null ? void 0 : v.id;
+  }, [a]);
+  d(g);
+  const p = r.useMemo(() => Array.from(a.keys()), [a]), b = r.useCallback((h) => {
+    var v, V;
+    return h == null ? null : (v = (V = a.get(h)) == null ? void 0 : V.ref.current) != null ? v : null;
+  }, [a]), f = n === "rtl";
+  let P;
+  c === "vertical" ? P = "vertical" : P = f ? "horizontal-rtl" : "horizontal-ltr";
+  const x = r.useCallback((h, v) => {
+    var V;
+    i(h, (V = v[0]) != null ? V : null);
+  }, [i]), y = r.useMemo(() => l === void 0 ? {} : l != null ? {
+    selectedValues: [l]
+  } : {
+    selectedValues: []
+  }, [l]), U = r.useCallback((h) => {
+    var v, V;
+    return (v = (V = a.get(h)) == null ? void 0 : V.disabled) != null ? v : !1;
+  }, [a]), {
+    contextValue: L,
+    dispatch: R,
+    getRootProps: D,
+    state: {
+      highlightedValue: j,
+      selectedValues: H
+    },
+    rootRef: K
+  } = oe({
+    controlledProps: y,
+    disabledItemsFocusable: !u,
+    focusManagement: "DOM",
+    getItemDomElement: b,
+    isItemDisabled: U,
+    items: p,
+    rootRef: o,
+    onChange: x,
+    orientation: P,
+    reducerActionContext: r.useMemo(() => ({
+      selectionFollowsFocus: u || !1
+    }), [u]),
+    selectionMode: "single",
+    stateReducer: ue
+  });
+  r.useEffect(() => {
+    l !== void 0 && l != null && R({
+      type: z.valueChange,
+      value: l
+    });
+  }, [R, l]);
+  const W = (h = {}) => C({}, h, D(h), {
+    "aria-orientation": c === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  });
+  return {
+    contextValue: r.useMemo(() => C({}, m, L), [m, L]),
+    dispatch: R,
+    getRootProps: W,
+    highlightedValue: j,
+    isRtl: f,
+    orientation: c,
+    rootRef: K,
+    selectedValue: (e = H[0]) != null ? e : null
+  };
+}
+function de(s) {
+  const {
+    value: e,
+    children: o
+  } = s, {
+    dispatch: n,
+    getItemIndex: i,
+    getItemState: c,
+    registerItem: l,
+    totalSubitemCount: d
+  } = e, u = r.useMemo(() => ({
+    dispatch: n,
+    getItemState: c,
+    getItemIndex: i
+  }), [n, i, c]), a = r.useMemo(() => ({
+    getItemIndex: i,
+    registerItem: l,
+    totalSubitemCount: d
+  }), [l, i, d]);
+  return /* @__PURE__ */ T(S.Provider, {
+    value: a,
+    children: /* @__PURE__ */ T(Z.Provider, {
+      value: u,
+      children: o
+    })
+  });
+}
+const me = ["children", "slotProps", "slots"], pe = (s) => {
+  const {
+    orientation: e
+  } = s;
+  return N({
+    root: ["root", e]
+  }, M(ie));
+}, A = /* @__PURE__ */ r.forwardRef(function(e, o) {
+  var n;
+  const {
+    children: i,
+    slotProps: c = {},
+    slots: l = {}
+  } = e, d = F(e, me), {
+    isRtl: u,
+    orientation: a,
+    getRootProps: m,
+    contextValue: g
+  } = ce({
+    rootRef: o
+  }), p = C({}, e, {
+    isRtl: u,
+    orientation: a
+  }), b = pe(p), f = (n = l.root) != null ? n : "div", P = $({
+    elementType: f,
+    getSlotProps: m,
+    externalSlotProps: c.root,
+    externalForwardedProps: d,
+    ownerState: p,
+    className: b.root
+  });
+  return /* @__PURE__ */ T(de, {
+    value: g,
+    children: /* @__PURE__ */ T(f, C({}, P, {
+      children: i
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" && (A.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: t.node,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The props used for each slot inside the TabsList.
+   * @default {}
+   */
+  slotProps: t.shape({
+    root: t.oneOfType([t.func, t.object])
+  }),
+  /**
+   * The components used for each slot inside the TabsList.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: t.shape({
+    root: t.elementType
+  })
+});
+const Ve = q(({ children: s, onChange: e, dataTestId: o }, n) => {
+  const [i, c] = B("1");
+  return /* @__PURE__ */ T(w, { "data-testid": o, value: i, onChange: (d, u) => {
+    c(u), e && e(u, d);
+  }, ref: n, children: /* @__PURE__ */ T(A, { className: Q.tabs, children: s }) });
+});
+export {
+  Le as Tab,
+  _e as TabPanel,
+  Ve as Tabs
+};

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.d.ts

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+
+type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    classNameWrapper?: string;
+    classNameInput?: string;
+    classNameLabel?: string;
+    'data-testid'?: string;
+};
+export declare const Toggle: ({ label, checked, disabled, classNameWrapper, classNameInput, "data-testid": dataTestId, onChange, classNameLabel, }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export {};