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

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

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

@@ -1,131 +1,131 @@
 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 { 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(c) {
+function W(l) {
   const {
-    checked: o,
-    defaultChecked: i,
-    disabled: n,
+    checked: s,
+    defaultChecked: p,
+    disabled: c,
     onBlur: a,
-    onChange: d,
-    onFocus: g,
-    onFocusVisible: r,
-    readOnly: s,
-    required: V
-  } = c, [S, x] = D({
-    controlled: o,
-    default: !!i,
+    onChange: g,
+    onFocus: r,
+    onFocusVisible: u,
+    readOnly: n,
+    required: i
+  } = l, [S, x] = D({
+    controlled: s,
+    default: !!p,
     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));
+  }), B = (t) => (o) => {
+    var b;
+    o.nativeEvent.defaultPrevented || (x(o.target.checked), g == null || g(o), (b = t.onChange) == null || b.call(t, o));
   }, {
-    isFocusVisibleRef: h,
+    isFocusVisibleRef: _,
     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);
+    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);
   return {
     checked: S,
-    disabled: !!n,
-    focusVisible: f,
-    getInputProps: (t = {}) => k({
-      checked: o,
-      defaultChecked: i,
-      disabled: n,
-      readOnly: s,
-      ref: F,
-      required: V,
+    disabled: !!c,
+    focusVisible: h,
+    getInputProps: (t = {}) => y({
+      checked: s,
+      defaultChecked: p,
+      disabled: c,
+      readOnly: n,
+      ref: C,
+      required: i,
       type: "checkbox",
       role: "switch",
-      "aria-checked": o
+      "aria-checked": s
     }, t, {
       onChange: B(t),
       onFocus: R(t),
-      onBlur: T(t)
+      onBlur: O(t)
     }),
-    inputRef: F,
-    readOnly: !!s
+    inputRef: C,
+    readOnly: !!n
   };
 }
 const $ = "Switch";
-function z(c) {
-  return q($, c);
+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 = (c) => {
+const G = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"], J = (l) => {
   const {
-    checked: o,
-    disabled: i,
-    focusVisible: n,
+    checked: s,
+    disabled: p,
+    focusVisible: c,
     readOnly: a
-  } = c;
+  } = l;
   return M({
-    root: ["root", o && "checked", i && "disabled", n && "focusVisible", a && "readOnly"],
+    root: ["root", s && "checked", p && "disabled", c && "focusVisible", a && "readOnly"],
     thumb: ["thumb"],
     input: ["input"],
     track: ["track"]
   }, A(z));
-}, E = /* @__PURE__ */ N.forwardRef(function(o, i) {
-  var n, a, d, g;
+}, E = /* @__PURE__ */ V.forwardRef(function(s, p) {
+  var c, a, g, r;
   const {
-    slotProps: r = {},
-    slots: s = {}
-  } = o, V = v(o, G), {
+    slotProps: u = {},
+    slots: n = {}
+  } = s, i = v(s, G), {
     getInputProps: S,
     checked: x,
     disabled: B,
-    focusVisible: h,
+    focusVisible: _,
     readOnly: w
-  } = W(o), b = k({}, o, {
+  } = W(s), f = y({}, s, {
     checked: x,
     disabled: B,
-    focusVisible: h,
+    focusVisible: _,
     readOnly: w
-  }), _ = J(b), f = (n = s.root) != null ? n : "span", y = C({
-    elementType: f,
-    externalSlotProps: r.root,
-    externalForwardedProps: V,
+  }), m = J(f), h = (c = n.root) != null ? c : "span", P = N({
+    elementType: h,
+    externalSlotProps: u.root,
+    externalForwardedProps: i,
     additionalProps: {
-      ref: i
+      ref: p
     },
-    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,
+    ownerState: f,
+    className: m.root
+  }), k = (a = n.thumb) != null ? a : "span", R = N({
+    elementType: k,
+    externalSlotProps: u.thumb,
+    ownerState: f,
+    className: m.thumb
+  }), O = (g = n.input) != null ? g : "input", C = N({
+    elementType: O,
     getSlotProps: S,
-    externalSlotProps: r.input,
-    ownerState: b,
-    className: _.input
-  }), j = s.track === null ? () => null : (g = s.track) != null ? g : "span", t = C({
+    externalSlotProps: u.input,
+    ownerState: f,
+    className: m.input
+  }), j = n.track === null ? () => null : (r = n.track) != null ? r : "span", t = N({
     elementType: j,
-    externalSlotProps: r.track,
-    ownerState: b,
-    className: _.track
+    externalSlotProps: u.track,
+    ownerState: f,
+    className: m.track
   });
-  return /* @__PURE__ */ I(f, k({}, y, {
-    children: [/* @__PURE__ */ P(j, k({}, t)), /* @__PURE__ */ P(m, k({}, R)), /* @__PURE__ */ P(T, k({}, F))]
+  return /* @__PURE__ */ I(h, y({}, P, {
+    children: [/* @__PURE__ */ T(j, y({}, t)), /* @__PURE__ */ T(k, y({}, R)), /* @__PURE__ */ T(O, y({}, C))]
   }));
 });
 process.env.NODE_ENV !== "production" && (E.propTypes = {
@@ -199,7 +199,7 @@ 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", u = {
+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,
@@ -210,40 +210,41 @@ const K = "_toggle_11c3l_1", Q = "_input_11c3l_12", X = "_thumb_11c3l_23", Y = "
   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
+  label: l,
+  checked: s,
+  disabled: p,
+  classNameWrapper: c,
+  classNameInput: a,
+  "data-testid": g,
+  onChange: r,
+  classNameLabel: u
 }) => {
-  const r = (s) => {
-    c == null || c(s);
+  const n = (i) => {
+    r == null || r(i);
   };
-  return /* @__PURE__ */ I("div", { className: O(u.toggle, n), "data-testid": a, children: [
-    /* @__PURE__ */ P(
+  return /* @__PURE__ */ I("div", { className: F(d.toggle, c), "data-testid": g, children: [
+    /* @__PURE__ */ T(
       E,
       {
-        disabled: i,
-        onChange: r,
-        autoFocus: !0,
-        "aria-label": o,
+        checked: s === !0,
+        disabled: p,
+        onChange: n,
+        "aria-label": l,
         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
+          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
             })
           }),
-          input: { className: O(u.input, d) },
-          thumb: { className: u.thumb },
-          track: { className: u.track }
+          input: { className: F(d.input, a) },
+          thumb: { className: d.thumb },
+          track: { className: d.track }
         }
       }
     ),
-    o && /* @__PURE__ */ P("label", { className: O(u.toggle__label, g), children: o })
+    l && /* @__PURE__ */ T("label", { className: F(d.toggle__label, u), children: l })
   ] });
 };
 export {

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

@@ -2,13 +2,12 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ onChange, label, disabled, classNameWrapper, "data-testid": dataTestId, classNameInput, classNameLabel, }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+    component: ({ label, checked, disabled, classNameWrapper, classNameInput, "data-testid": dataTestId, onChange, classNameLabel, }: import('react').InputHTMLAttributes<HTMLInputElement> & {
         label?: string | undefined;
-        disabled?: boolean | undefined;
-        'data-testid'?: string | undefined;
         classNameWrapper?: string | undefined;
         classNameInput?: string | undefined;
         classNameLabel?: string | undefined;
+        'data-testid'?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.1-alpha.9",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",