@pismo/marola 0.0.1-alpha.6 → 0.0.1-alpha.8

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,251 @@
+import '../../assets/Toggle.css';
+import { jsxs as I, jsx as P } from "react/jsx-runtime";
+import { c as O } from "../../clsx-DB4S2d7J.js";
+import { a as k, _ as v } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import * as N from "react";
+import { u as U, g as q, a as H, b as C, 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(c) {
+  const {
+    checked: o,
+    defaultChecked: i,
+    disabled: n,
+    onBlur: a,
+    onChange: d,
+    onFocus: g,
+    onFocusVisible: r,
+    readOnly: s,
+    required: V
+  } = c, [S, x] = D({
+    controlled: o,
+    default: !!i,
+    name: "Switch",
+    state: "checked"
+  }), B = (t) => (l) => {
+    var p;
+    l.nativeEvent.defaultPrevented || (x(l.target.checked), d == null || d(l), (p = t.onChange) == null || p.call(t, l));
+  }, {
+    isFocusVisibleRef: h,
+    onBlur: w,
+    onFocus: b,
+    ref: _
+  } = L(), [f, y] = N.useState(!1);
+  n && f && y(!1), N.useEffect(() => {
+    h.current = f;
+  }, [f, h]);
+  const m = N.useRef(null), R = (t) => (l) => {
+    var p;
+    m.current || (m.current = l.currentTarget), b(l), h.current === !0 && (y(!0), r == null || r(l)), g == null || g(l), (p = t.onFocus) == null || p.call(t, l);
+  }, T = (t) => (l) => {
+    var p;
+    w(l), h.current === !1 && y(!1), a == null || a(l), (p = t.onBlur) == null || p.call(t, l);
+  }, F = U(_, m);
+  return {
+    checked: S,
+    disabled: !!n,
+    focusVisible: f,
+    getInputProps: (t = {}) => k({
+      checked: o,
+      defaultChecked: i,
+      disabled: n,
+      readOnly: s,
+      ref: F,
+      required: V,
+      type: "checkbox",
+      role: "switch",
+      "aria-checked": o
+    }, t, {
+      onChange: B(t),
+      onFocus: R(t),
+      onBlur: T(t)
+    }),
+    inputRef: F,
+    readOnly: !!s
+  };
+}
+const $ = "Switch";
+function z(c) {
+  return q($, c);
+}
+H($, ["root", "input", "track", "thumb", "checked", "disabled", "focusVisible", "readOnly"]);
+const G = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"], J = (c) => {
+  const {
+    checked: o,
+    disabled: i,
+    focusVisible: n,
+    readOnly: a
+  } = c;
+  return M({
+    root: ["root", o && "checked", i && "disabled", n && "focusVisible", a && "readOnly"],
+    thumb: ["thumb"],
+    input: ["input"],
+    track: ["track"]
+  }, A(z));
+}, E = /* @__PURE__ */ N.forwardRef(function(o, i) {
+  var n, a, d, g;
+  const {
+    slotProps: r = {},
+    slots: s = {}
+  } = o, V = v(o, G), {
+    getInputProps: S,
+    checked: x,
+    disabled: B,
+    focusVisible: h,
+    readOnly: w
+  } = W(o), b = k({}, o, {
+    checked: x,
+    disabled: B,
+    focusVisible: h,
+    readOnly: w
+  }), _ = J(b), f = (n = s.root) != null ? n : "span", y = C({
+    elementType: f,
+    externalSlotProps: r.root,
+    externalForwardedProps: V,
+    additionalProps: {
+      ref: i
+    },
+    ownerState: b,
+    className: _.root
+  }), m = (a = s.thumb) != null ? a : "span", R = C({
+    elementType: m,
+    externalSlotProps: r.thumb,
+    ownerState: b,
+    className: _.thumb
+  }), T = (d = s.input) != null ? d : "input", F = C({
+    elementType: T,
+    getSlotProps: S,
+    externalSlotProps: r.input,
+    ownerState: b,
+    className: _.input
+  }), j = s.track === null ? () => null : (g = s.track) != null ? g : "span", t = C({
+    elementType: j,
+    externalSlotProps: r.track,
+    ownerState: b,
+    className: _.track
+  });
+  return /* @__PURE__ */ I(f, k({}, y, {
+    children: [/* @__PURE__ */ P(j, k({}, t)), /* @__PURE__ */ P(m, k({}, R)), /* @__PURE__ */ P(T, k({}, F))]
+  }));
+});
+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_11c3l_1", Q = "_input_11c3l_12", X = "_thumb_11c3l_23", Y = "_track_11c3l_37", Z = "_toggle__label_11c3l_61", u = {
+  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 = ({
+  onChange: c,
+  label: o,
+  disabled: i,
+  classNameWrapper: n,
+  "data-testid": a,
+  classNameInput: d,
+  classNameLabel: g
+}) => {
+  const r = (s) => {
+    c == null || c(s);
+  };
+  return /* @__PURE__ */ I("div", { className: O(u.toggle, n), "data-testid": a, children: [
+    /* @__PURE__ */ P(
+      E,
+      {
+        disabled: i,
+        onChange: r,
+        autoFocus: !0,
+        "aria-label": o,
+        slotProps: {
+          root: (s) => ({
+            className: O(u["toggle__toggle-el-wrapper"], {
+              [u["toggle--disabled"]]: s.disabled,
+              [u["toggle--focus-visible"]]: s.focusVisible,
+              [u["toggle--checked"]]: s.checked
+            })
+          }),
+          input: { className: O(u.input, d) },
+          thumb: { className: u.thumb },
+          track: { className: u.track }
+        }
+      }
+    ),
+    o && /* @__PURE__ */ P("label", { className: O(u.toggle__label, g), children: o })
+  ] });
+};
+export {
+  ne as Toggle
+};

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

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ onChange, label, disabled, classNameWrapper, "data-testid": dataTestId, classNameInput, classNameLabel, }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+        label?: string | undefined;
+        disabled?: boolean | undefined;
+        'data-testid'?: string | undefined;
+        classNameWrapper?: string | undefined;
+        classNameInput?: string | undefined;
+        classNameLabel?: 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,27 @@
+import { Toggle as e } from "./Toggle.js";
+const a = {
+  title: "Components/Toggle",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded"
+  }
+}, o = {
+  args: {}
+}, l = {
+  name: "With label",
+  args: {
+    label: "Active"
+  }
+}, s = {
+  args: {
+    label: "Active",
+    disabled: !0
+  }
+};
+export {
+  s as Disabled,
+  o as Simple,
+  l as WithLabel,
+  a as default
+};