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

package/dist/components/Toggle/Toggle.js

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

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

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.8",
   "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
-};