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

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,402 @@
+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 Ie } from "./Tab.js";
+import { TabPanel as Fe } from "./TabPanel.js";
+import { a as C, _ as I } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import { g as _, a as F, b as $, P as t, c as N, d as M } from "../../index-CqjC7P5Y.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-BHqhiBfc.js";
+import { l as ee, m as te, u as oe } from "../../useList-ByMguSS_.js";
+const k = "Tabs";
+function se(s) {
+  return _(k, s);
+}
+F(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(() => {
+  }), f = r.useCallback((x) => {
+    var y;
+    return (y = m.get(x)) == null ? void 0 : y.id;
+  }, [m]), b = r.useCallback((x) => p.current(x), []), P = r.useCallback((x) => {
+    p.current = x;
+  }, []);
+  return {
+    contextValue: C({
+      direction: c,
+      getTabId: b,
+      getTabPanelId: f,
+      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: f
+  } = e, b = r.useMemo(() => ({
+    getItemIndex: i,
+    registerItem: d,
+    totalSubitemCount: m
+  }), [d, i, m]), P = r.useMemo(() => ({
+    direction: n,
+    getTabId: p,
+    getTabPanelId: f,
+    onSelected: c,
+    orientation: l,
+    registerTabIdLookup: u,
+    selectionFollowsFocus: a,
+    value: g
+  }), [n, p, f, c, l, u, a, g]);
+  return /* @__PURE__ */ T(S.Provider, {
+    value: b,
+    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 = I(e, re), m = C({}, e, {
+    orientation: c,
+    direction: l
+  }), {
+    contextValue: g
+  } = ne(m), p = ae(m), f = (n = u.root) != null ? n : "div", b = $({
+    elementType: f,
+    externalSlotProps: d.root,
+    externalForwardedProps: a,
+    additionalProps: {
+      ref: o
+    },
+    ownerState: m,
+    className: p.root
+  });
+  return /* @__PURE__ */ T(f, C({}, b, {
+    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 _(E, s);
+}
+F(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]), f = 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]), b = n === "rtl";
+  let P;
+  c === "vertical" ? P = "vertical" : P = b ? "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: f,
+    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: b,
+    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 = I(e, me), {
+    isRtl: u,
+    orientation: a,
+    getRootProps: m,
+    contextValue: g
+  } = ce({
+    rootRef: o
+  }), p = C({}, e, {
+    isRtl: u,
+    orientation: a
+  }), f = pe(p), b = (n = l.root) != null ? n : "div", P = $({
+    elementType: b,
+    getSlotProps: m,
+    externalSlotProps: c.root,
+    externalForwardedProps: d,
+    ownerState: p,
+    className: f.root
+  });
+  return /* @__PURE__ */ T(de, {
+    value: g,
+    children: /* @__PURE__ */ T(b, 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 ye = 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 {
+  Ie as Tab,
+  Fe as TabPanel,
+  ye as Tabs
+};

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 {};

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,252 @@
+import '../../assets/Toggle.css';
+import { jsxs as I, jsx as P } from "react/jsx-runtime";
+import { c as C } from "../../clsx-DB4S2d7J.js";
+import { a as x, _ as v } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import * as N from "react";
+import { u as U, g as q, a as H, b as F, 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) {
+  const {
+    checked: s,
+    defaultChecked: p,
+    disabled: c,
+    onBlur: a,
+    onChange: g,
+    onFocus: r,
+    onFocusVisible: u,
+    readOnly: n,
+    required: i
+  } = l, [V, S] = D({
+    controlled: s,
+    default: !!p,
+    name: "Switch",
+    state: "checked"
+  }), B = (t) => (o) => {
+    var b;
+    o.nativeEvent.defaultPrevented || (S(o.target.checked), g == null || g(o), (b = t.onChange) == null || b.call(t, o));
+  }, {
+    isFocusVisibleRef: _,
+    onBlur: w,
+    onFocus: f,
+    ref: m
+  } = L(), [h, y] = N.useState(!1);
+  c && h && y(!1), N.useEffect(() => {
+    _.current = h;
+  }, [h, _]);
+  const k = N.useRef(null), R = (t) => (o) => {
+    var b;
+    k.current || (k.current = o.currentTarget), f(o), _.current === !0 && (y(!0), u == null || u(o)), r == null || r(o), (b = t.onFocus) == null || b.call(t, o);
+  }, T = (t) => (o) => {
+    var b;
+    w(o), _.current === !1 && y(!1), a == null || a(o), (b = t.onBlur) == null || b.call(t, o);
+  }, O = U(m, k);
+  return {
+    checked: V,
+    disabled: !!c,
+    focusVisible: h,
+    getInputProps: (t = {}) => x({
+      checked: s,
+      defaultChecked: p,
+      disabled: c,
+      readOnly: n,
+      ref: O,
+      required: i,
+      type: "checkbox",
+      role: "switch",
+      "aria-checked": s
+    }, t, {
+      onChange: B(t),
+      onFocus: R(t),
+      onBlur: T(t)
+    }),
+    inputRef: O,
+    readOnly: !!n
+  };
+}
+const $ = "Switch";
+function z(l) {
+  return q($, l);
+}
+H($, ["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
+  } = l;
+  return M({
+    root: ["root", s && "checked", p && "disabled", c && "focusVisible", a && "readOnly"],
+    thumb: ["thumb"],
+    input: ["input"],
+    track: ["track"]
+  }, A(z));
+}, E = /* @__PURE__ */ N.forwardRef(function(s, p) {
+  var c, a, g, r;
+  const {
+    slotProps: u = {},
+    slots: n = {}
+  } = s, i = v(s, G), {
+    getInputProps: V,
+    checked: S,
+    disabled: B,
+    focusVisible: _,
+    readOnly: w
+  } = W(s), f = x({}, s, {
+    checked: S,
+    disabled: B,
+    focusVisible: _,
+    readOnly: w
+  }), m = J(f), h = (c = n.root) != null ? c : "span", y = F({
+    elementType: h,
+    externalSlotProps: u.root,
+    externalForwardedProps: i,
+    additionalProps: {
+      ref: p
+    },
+    ownerState: f,
+    className: m.root
+  }), k = (a = n.thumb) != null ? a : "span", R = F({
+    elementType: k,
+    externalSlotProps: u.thumb,
+    ownerState: f,
+    className: m.thumb
+  }), T = (g = n.input) != null ? g : "input", O = F({
+    elementType: T,
+    getSlotProps: V,
+    externalSlotProps: u.input,
+    ownerState: f,
+    className: m.input
+  }), j = n.track === null ? () => null : (r = n.track) != null ? r : "span", t = F({
+    elementType: j,
+    externalSlotProps: u.track,
+    ownerState: f,
+    className: m.track
+  });
+  return /* @__PURE__ */ I(h, x({}, y, {
+    children: [/* @__PURE__ */ P(j, x({}, t)), /* @__PURE__ */ P(k, x({}, R)), /* @__PURE__ */ P(T, x({}, O))]
+  }));
+});
+process.env.NODE_ENV !== "production" && (E.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: e.bool,
+  /**
+   * Class name applied to the root element.
+   */
+  className: e.string,
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked: e.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: e.bool,
+  /**
+   * @ignore
+   */
+  onBlur: e.func,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: e.func,
+  /**
+   * @ignore
+   */
+  onFocus: e.func,
+  /**
+   * @ignore
+   */
+  onFocusVisible: e.func,
+  /**
+   * If `true`, the component is read only.
+   */
+  readOnly: e.bool,
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required: e.bool,
+  /**
+   * The props used for each slot inside the Switch.
+   * @default {}
+   */
+  slotProps: e.shape({
+    input: e.oneOfType([e.func, e.object]),
+    root: e.oneOfType([e.func, e.object]),
+    thumb: e.oneOfType([e.func, e.object]),
+    track: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside the Switch.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: e.shape({
+    input: e.elementType,
+    root: e.elementType,
+    thumb: e.elementType,
+    track: e.oneOfType([e.elementType, e.oneOf([null])])
+  })
+});
+const K = "_toggle_1icxx_1", Q = "_input_1icxx_12", X = "_thumb_1icxx_23", Y = "_track_1icxx_37", Z = "_toggle__label_1icxx_61", d = {
+  toggle: K,
+  "toggle__toggle-el-wrapper": "_toggle__toggle-el-wrapper_1icxx_8",
+  input: Q,
+  thumb: X,
+  track: Y,
+  "toggle--focus-visible": "_toggle--focus-visible_1icxx_47",
+  "toggle--checked": "_toggle--checked_1icxx_51",
+  toggle__label: Z,
+  "toggle--disabled": "_toggle--disabled_1icxx_66"
+}, ne = ({
+  label: l,
+  checked: s,
+  disabled: p,
+  classNameWrapper: c,
+  classNameInput: a,
+  "data-testid": g,
+  onChange: r,
+  classNameLabel: u
+}) => {
+  const n = (i) => {
+    r == null || r(i);
+  };
+  return /* @__PURE__ */ I("div", { className: C(d.toggle, c), "data-testid": g, children: [
+    /* @__PURE__ */ P(
+      E,
+      {
+        checked: s === !0,
+        disabled: p,
+        onChange: n,
+        "aria-label": l,
+        slotProps: {
+          root: (i) => ({
+            className: C(d["toggle__toggle-el-wrapper"], {
+              [d["toggle--disabled"]]: i.disabled,
+              [d["toggle--focus-visible"]]: i.focusVisible,
+              [d["toggle--checked"]]: i.checked
+            })
+          }),
+          input: { className: C(d.input, a) },
+          thumb: { className: d.thumb },
+          track: { className: d.track }
+        }
+      }
+    ),
+    l && /* @__PURE__ */ P("label", { className: C(d.toggle__label, u), children: l })
+  ] });
+};
+export {
+  ne as Toggle
+};

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ label, checked, disabled, classNameWrapper, classNameInput, "data-testid": dataTestId, onChange, classNameLabel, }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+        label?: string | undefined;
+        classNameWrapper?: string | undefined;
+        classNameInput?: string | undefined;
+        classNameLabel?: string | undefined;
+        'data-testid'?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithLabel: Story;
+export declare const Disabled: Story;