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

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;

package/dist/components/Toggle/Toggle.stories.js

@@ -0,0 +1,33 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { Toggle as c } from "./Toggle.js";
+const l = {
+  title: "Components/Toggle",
+  component: c,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded"
+  }
+}, h = {
+  render: () => {
+    const [e, t] = r(!1);
+    return /* @__PURE__ */ o(c, { checked: e, onChange: (a) => t(a.target.checked) });
+  }
+}, m = {
+  name: "With label",
+  render: () => {
+    const [e, t] = r(!1);
+    return /* @__PURE__ */ o(c, { label: "Active", checked: e, onChange: (a) => t(a.target.checked) });
+  }
+}, g = {
+  render: () => {
+    const [e, t] = r(!1);
+    return /* @__PURE__ */ o(c, { label: "Active", disabled: !0, checked: e, onChange: (a) => t(a.target.checked) });
+  }
+};
+export {
+  g as Disabled,
+  h as Simple,
+  m as WithLabel,
+  l as default
+};

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

@@ -0,0 +1,17 @@
+import { PopupPlacement } from '@mui/base';
+
+type TooltipProps = {
+    children: React.ReactNode;
+    show?: boolean;
+    anchorRef?: HTMLElement | null | undefined;
+    disableHoverListener?: boolean;
+    onClose?: () => void;
+    theme?: 'white' | 'black';
+    padding?: 'small' | 'normal';
+    position?: PopupPlacement;
+    arialRole?: React.AriaRole;
+    className?: string;
+    'data-testid'?: string;
+};
+declare const Tooltip: ({ children, show, anchorRef, onClose, arialRole, position, theme, padding, className, disableHoverListener, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export { Tooltip };