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

package/dist/components/Toggle/Toggle.js

@@ -1,66 +1,66 @@
 import '../../assets/Toggle.css';
-import { jsxs as I, jsx as O } from "react/jsx-runtime";
-import { c as N } from "../../clsx-DB4S2d7J.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 S from "react";
-import { u as U, g as q, a as H, b as V, P as e, c as M, d as A } from "../../index-CqjC7P5Y.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(l) {
   const {
-    checked: o,
-    defaultChecked: d,
+    checked: s,
+    defaultChecked: p,
     disabled: c,
-    onBlur: r,
-    onChange: p,
-    onFocus: g,
-    onFocusVisible: a,
+    onBlur: a,
+    onChange: g,
+    onFocus: r,
+    onFocusVisible: u,
     readOnly: n,
-    required: P
-  } = l, [u, x] = D({
-    controlled: o,
-    default: !!d,
+    required: i
+  } = l, [S, x] = D({
+    controlled: s,
+    default: !!p,
     name: "Switch",
     state: "checked"
-  }), B = (t) => (s) => {
-    var h;
-    s.nativeEvent.defaultPrevented || (x(s.target.checked), p == null || p(s), (h = t.onChange) == null || h.call(t, s));
+  }), 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: m,
+    isFocusVisibleRef: _,
     onBlur: w,
     onFocus: f,
-    ref: _
-  } = L(), [b, T] = S.useState(!1);
-  c && b && T(!1), S.useEffect(() => {
-    m.current = b;
-  }, [b, m]);
-  const k = S.useRef(null), R = (t) => (s) => {
-    var h;
-    k.current || (k.current = s.currentTarget), f(s), m.current === !0 && (T(!0), a == null || a(s)), g == null || g(s), (h = t.onFocus) == null || h.call(t, s);
-  }, C = (t) => (s) => {
-    var h;
-    w(s), m.current === !1 && T(!1), r == null || r(s), (h = t.onBlur) == null || h.call(t, s);
-  }, F = U(_, k);
+    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: u,
+    checked: S,
     disabled: !!c,
-    focusVisible: b,
+    focusVisible: h,
     getInputProps: (t = {}) => y({
-      checked: o,
-      defaultChecked: d,
+      checked: s,
+      defaultChecked: p,
       disabled: c,
       readOnly: n,
-      ref: F,
-      required: P,
+      ref: C,
+      required: i,
       type: "checkbox",
       role: "switch",
-      "aria-checked": o
+      "aria-checked": s
     }, t, {
       onChange: B(t),
       onFocus: R(t),
-      onBlur: C(t)
+      onBlur: O(t)
     }),
-    inputRef: F,
+    inputRef: C,
     readOnly: !!n
   };
 }
@@ -71,61 +71,61 @@ function z(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: o,
-    disabled: d,
+    checked: s,
+    disabled: p,
     focusVisible: c,
-    readOnly: r
+    readOnly: a
   } = l;
   return M({
-    root: ["root", o && "checked", d && "disabled", c && "focusVisible", r && "readOnly"],
+    root: ["root", s && "checked", p && "disabled", c && "focusVisible", a && "readOnly"],
     thumb: ["thumb"],
     input: ["input"],
     track: ["track"]
   }, A(z));
-}, E = /* @__PURE__ */ S.forwardRef(function(o, d) {
-  var c, r, p, g;
+}, E = /* @__PURE__ */ V.forwardRef(function(s, p) {
+  var c, a, g, r;
   const {
-    slotProps: a = {},
+    slotProps: u = {},
     slots: n = {}
-  } = o, P = v(o, G), {
-    getInputProps: u,
+  } = s, i = v(s, G), {
+    getInputProps: S,
     checked: x,
     disabled: B,
-    focusVisible: m,
+    focusVisible: _,
     readOnly: w
-  } = W(o), f = y({}, o, {
+  } = W(s), f = y({}, s, {
     checked: x,
     disabled: B,
-    focusVisible: m,
+    focusVisible: _,
     readOnly: w
-  }), _ = J(f), b = (c = n.root) != null ? c : "span", T = V({
-    elementType: b,
-    externalSlotProps: a.root,
-    externalForwardedProps: P,
+  }), m = J(f), h = (c = n.root) != null ? c : "span", P = N({
+    elementType: h,
+    externalSlotProps: u.root,
+    externalForwardedProps: i,
     additionalProps: {
-      ref: d
+      ref: p
     },
     ownerState: f,
-    className: _.root
-  }), k = (r = n.thumb) != null ? r : "span", R = V({
+    className: m.root
+  }), k = (a = n.thumb) != null ? a : "span", R = N({
     elementType: k,
-    externalSlotProps: a.thumb,
+    externalSlotProps: u.thumb,
     ownerState: f,
-    className: _.thumb
-  }), C = (p = n.input) != null ? p : "input", F = V({
-    elementType: C,
-    getSlotProps: u,
-    externalSlotProps: a.input,
+    className: m.thumb
+  }), O = (g = n.input) != null ? g : "input", C = N({
+    elementType: O,
+    getSlotProps: S,
+    externalSlotProps: u.input,
     ownerState: f,
-    className: _.input
-  }), j = n.track === null ? () => null : (g = n.track) != null ? g : "span", t = V({
+    className: m.input
+  }), j = n.track === null ? () => null : (r = n.track) != null ? r : "span", t = N({
     elementType: j,
-    externalSlotProps: a.track,
+    externalSlotProps: u.track,
     ownerState: f,
-    className: _.track
+    className: m.track
   });
-  return /* @__PURE__ */ I(b, y({}, T, {
-    children: [/* @__PURE__ */ O(j, y({}, t)), /* @__PURE__ */ O(k, y({}, R)), /* @__PURE__ */ O(C, y({}, 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,56 +199,52 @@ process.env.NODE_ENV !== "production" && (E.propTypes = {
     track: e.oneOfType([e.elementType, e.oneOf([null])])
   })
 });
-const K = "_toggle_r6ihm_1", Q = "_input_r6ihm_15", X = "_thumb_r6ihm_26", Y = "_track_r6ihm_40", Z = "_toggle__label_r6ihm_64", i = {
+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_r6ihm_11",
+  "toggle__toggle-el-wrapper": "_toggle__toggle-el-wrapper_11c3l_8",
   input: Q,
   thumb: X,
   track: Y,
-  "toggle--focus-visible": "_toggle--focus-visible_r6ihm_50",
-  "toggle--checked": "_toggle--checked_r6ihm_54",
+  "toggle--focus-visible": "_toggle--focus-visible_11c3l_47",
+  "toggle--checked": "_toggle--checked_11c3l_51",
   toggle__label: Z,
-  "toggle--disabled": "_toggle--disabled_r6ihm_69"
+  "toggle--disabled": "_toggle--disabled_11c3l_66"
 }, ne = ({
-  onChange: l,
-  label: o,
-  disabled: d,
-  checked: c = !1,
-  autoFocus: r,
-  classNameWrapper: p,
-  classNameLabel: g,
+  label: l,
+  checked: s,
+  disabled: p,
+  classNameWrapper: c,
   classNameInput: a,
-  "data-testid": n
+  "data-testid": g,
+  onChange: r,
+  classNameLabel: u
 }) => {
-  const P = (u) => {
-    l == null || l(u);
+  const n = (i) => {
+    r == null || r(i);
   };
-  return /* @__PURE__ */ I("div", { className: N(i.toggle, p), "data-testid": n, children: [
-    /* @__PURE__ */ O(
+  return /* @__PURE__ */ I("div", { className: F(d.toggle, c), "data-testid": g, children: [
+    /* @__PURE__ */ T(
       E,
       {
-        disabled: d,
-        checked: c,
-        autoFocus: r,
-        onChange: P,
-        "aria-label": o,
+        checked: s === !0,
+        disabled: p,
+        onChange: n,
+        "aria-label": l,
         slotProps: {
-          root: (u) => ({
-            className: N(i["toggle__toggle-el-wrapper"], {
-              [i["toggle--disabled"]]: u.disabled,
-              [i["toggle--focus-visible"]]: u.focusVisible,
-              [i["toggle--checked"]]: u.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: N(i.input, a)
-          },
-          thumb: { className: i.thumb },
-          track: { className: i.track }
+          input: { className: F(d.input, a) },
+          thumb: { className: d.thumb },
+          track: { className: d.track }
         }
       }
     ),
-    o && /* @__PURE__ */ O("label", { className: N(i.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

@@ -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/main.d.ts

@@ -6,6 +6,7 @@ export * from './components/Dialog/Dialog';
 export * from './components/Icon/Icon';
 export * from './components/IconButton/IconButton';
 export * from './components/Input/Input';
+export * from './components/InputSearch/InputSearch';
 export * from './components/LoadingSpinner/LoadingSpinner';
 export * from './components/PageHeader/PageHeader';
 export * from './components/Pagination/Pagination';

package/dist/main.js

@@ -1,52 +1,59 @@
 import './assets/global.css';
 /* empty css                */
-import { Advice as p } from "./components/Advice/Advice.js";
-import { Button as f } from "./components/Button/Button.js";
+import { Advice as e } from "./components/Advice/Advice.js";
+import { Button as a } from "./components/Button/Button.js";
 import { Checkbox as m } from "./components/Checkbox/Checkbox.js";
-import { Dialog as i } from "./components/Dialog/Dialog.js";
-import { FamilyAndIcons as s, Icon as T } from "./components/Icon/Icon.js";
+import { Dialog as x } from "./components/Dialog/Dialog.js";
+import { FamilyAndIcons as i, Icon as T } from "./components/Icon/Icon.js";
 import { IconButton as c } from "./components/IconButton/IconButton.js";
-import { Input as d } from "./components/Input/Input.js";
+import { Input as u } from "./components/Input/Input.js";
+import { InputSearch as b } from "./components/InputSearch/InputSearch.js";
 import { LoadingSpinner as k } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { PageHeader as D } from "./components/PageHeader/PageHeader.js";
 import { Pagination as y, paginationDefaultTranslations as A } from "./components/Pagination/Pagination.js";
-import { Skeleton as h, SkeletonCircle as B, SkeletonTable as P } from "./components/Skeleton/Skeleton.js";
-import { Snackbar as F } from "./components/Snackbar/Snackbar.js";
-import { SortTooltip as L, sortTooltipDefaultTranslations as j } from "./components/SortTooltip/SortTooltip.js";
-import { Stepper as w } from "./components/Stepper/Stepper.js";
-import "./components/Table/Table.js";
-import { Tabs as E } from "./components/Tabs/Tabs.js";
-import { Toggle as J } from "./components/Toggle/Toggle.js";
-import { Tooltip as M } from "./components/Tooltip/Tooltip.js";
-import { Typography as O } from "./components/Typography/Typography.js";
-import { default as R } from "./components/Dialog/Title.js";
-import { default as V } from "./components/Dialog/Content.js";
-import { default as X } from "./components/Dialog/Actions.js";
+import { Skeleton as P, SkeletonCircle as B, SkeletonTable as v } from "./components/Skeleton/Skeleton.js";
+import { Snackbar as H } from "./components/Snackbar/Snackbar.js";
+import { SortTooltip as j, sortTooltipDefaultTranslations as q } from "./components/SortTooltip/SortTooltip.js";
+import { Stepper as z } from "./components/Stepper/Stepper.js";
+import { Table as G } from "./components/Table/Table.js";
+import { Tabs as K } from "./components/Tabs/Tabs.js";
+import { Toggle as N } from "./components/Toggle/Toggle.js";
+import { Tooltip as Q } from "./components/Tooltip/Tooltip.js";
+import { Typography as U } from "./components/Typography/Typography.js";
+import { default as W } from "./components/Dialog/Title.js";
+import { default as Y } from "./components/Dialog/Content.js";
+import { default as _ } from "./components/Dialog/Actions.js";
+import { T as oo } from "./Tab-CRwnhsj5.js";
+import { TabPanel as to } from "./components/Tabs/TabPanel.js";
 export {
-  X as Actions,
-  p as Advice,
-  f as Button,
+  _ as Actions,
+  e as Advice,
+  a as Button,
   m as Checkbox,
-  V as Content,
-  i as Dialog,
-  R as DialogTitle,
-  s as FamilyAndIcons,
+  Y as Content,
+  x as Dialog,
+  W as DialogTitle,
+  i as FamilyAndIcons,
   T as Icon,
   c as IconButton,
-  d as Input,
+  u as Input,
+  b as InputSearch,
   k as LoadingSpinner,
   D as PageHeader,
   y as Pagination,
-  h as Skeleton,
+  P as Skeleton,
   B as SkeletonCircle,
-  P as SkeletonTable,
-  F as Snackbar,
-  L as SortTooltip,
-  w as Stepper,
-  E as Tabs,
-  J as Toggle,
-  M as Tooltip,
-  O as Typography,
+  v as SkeletonTable,
+  H as Snackbar,
+  j as SortTooltip,
+  z as Stepper,
+  oo as Tab,
+  to as TabPanel,
+  G as Table,
+  K as Tabs,
+  N as Toggle,
+  Q as Tooltip,
+  U as Typography,
   A as paginationDefaultTranslations,
-  j as sortTooltipDefaultTranslations
+  q as sortTooltipDefaultTranslations
 };

package/package.json

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

package/dist/ListContext-Dj2Va7Iv.js

@@ -1,18 +0,0 @@
-import * as t from "react";
-const e = {
-  blur: "list:blur",
-  focus: "list:focus",
-  itemClick: "list:itemClick",
-  itemHover: "list:itemHover",
-  itemsChange: "list:itemsChange",
-  keyDown: "list:keyDown",
-  resetHighlight: "list:resetHighlight",
-  highlightLast: "list:highlightLast",
-  textNavigation: "list:textNavigation",
-  clearSelection: "list:clearSelection"
-}, i = /* @__PURE__ */ t.createContext(null);
-process.env.NODE_ENV !== "production" && (i.displayName = "ListContext");
-export {
-  i as L,
-  e as a
-};

package/dist/Tabs.module-BA-PC7fA.js

@@ -1,66 +0,0 @@
-import './assets/Tabs.css';
-import * as n from "react";
-const p = /* @__PURE__ */ n.createContext(null);
-process.env.NODE_ENV !== "production" && (p.displayName = "CompoundComponentContext");
-function C(e) {
-  const c = Array.from(e.keys()).map((t) => {
-    const a = e.get(t);
-    return {
-      key: t,
-      subitem: a
-    };
-  });
-  return c.sort((t, a) => {
-    const u = t.subitem.ref.current, r = a.subitem.ref.current;
-    return u === null || r === null || u === r ? 0 : u.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
-  }), new Map(c.map((t) => [t.key, t.subitem]));
-}
-function N() {
-  const [e, c] = n.useState(/* @__PURE__ */ new Map()), t = n.useRef(/* @__PURE__ */ new Set()), a = n.useCallback(function(o) {
-    t.current.delete(o), c((b) => {
-      const s = new Map(b);
-      return s.delete(o), s;
-    });
-  }, []), u = n.useCallback(function(o, b) {
-    let s;
-    return typeof o == "function" ? s = o(t.current) : s = o, t.current.add(s), c((d) => {
-      const _ = new Map(d);
-      return _.set(s, b), _;
-    }), {
-      id: s,
-      deregister: () => a(s)
-    };
-  }, [a]), r = n.useMemo(() => C(e), [e]), i = n.useCallback(function(o) {
-    return Array.from(r.keys()).indexOf(o);
-  }, [r]);
-  return {
-    contextValue: n.useMemo(() => ({
-      getItemIndex: i,
-      registerItem: u,
-      totalSubitemCount: e.size
-    }), [i, u, e.size]),
-    subitems: r
-  };
-}
-const l = /* @__PURE__ */ n.createContext(null);
-process.env.NODE_ENV !== "production" && (l.displayName = "TabsContext");
-function I() {
-  const e = n.useContext(l);
-  if (e == null)
-    throw new Error("No TabsContext provided");
-  return e;
-}
-const f = "_tabs_18ymz_1", x = "_tabs__tab_18ymz_5", w = {
-  tabs: f,
-  tabs__tab: x,
-  "tabs__tab--disabled": "_tabs__tab--disabled_18ymz_22",
-  "tabs__tab--selected": "_tabs__tab--selected_18ymz_31",
-  "tabs__tab-panel": "_tabs__tab-panel_18ymz_35"
-};
-export {
-  p as C,
-  l as T,
-  N as a,
-  w as s,
-  I as u
-};

package/dist/useCompoundItem-CTYi5M_E.js

@@ -1,41 +0,0 @@
-import * as o from "react";
-import { C as a } from "./Tabs.module-BA-PC7fA.js";
-import { u as I } from "./useEnhancedEffect-CJGo-L3B.js";
-let r = 0;
-function i(t) {
-  const [e, n] = o.useState(t), u = t || e;
-  return o.useEffect(() => {
-    e == null && (r += 1, n(`mui-${r}`));
-  }, [e]), u;
-}
-const d = o.useId;
-function C(t) {
-  if (d !== void 0) {
-    const e = d();
-    return t ?? e;
-  }
-  return i(t);
-}
-function g(t, e) {
-  const n = o.useContext(a);
-  if (n === null)
-    throw new Error("useCompoundItem must be used within a useCompoundParent");
-  const {
-    registerItem: u
-  } = n, [s, f] = o.useState(typeof t == "function" ? void 0 : t);
-  return I(() => {
-    const {
-      id: c,
-      deregister: m
-    } = u(t, e);
-    return f(c), m;
-  }, [u, e, t]), {
-    id: s,
-    index: s !== void 0 ? n.getItemIndex(s) : -1,
-    totalItemCount: n.totalSubitemCount
-  };
-}
-export {
-  g as a,
-  C as u
-};