@pismo/marola 1.1.22 → 1.2.0

package/dist/Tabs.module-CF9eCJzU.js

@@ -0,0 +1,28 @@
+import * as _ from "react";
+import './assets/Tabs.css';const a = /* @__PURE__ */ _.createContext(null);
+process.env.NODE_ENV !== "production" && (a.displayName = "TabsContext");
+function e() {
+  const t = _.useContext(a);
+  if (t == null)
+    throw new Error("No TabsContext provided");
+  return t;
+}
+const s = "_tabs_1ve9u_1", b = "_tabs__tab_1ve9u_5", i = {
+  tabs: s,
+  tabs__tab: b,
+  "tabs__tab--disabled": "_tabs__tab--disabled_1ve9u_23",
+  "tabs__tab--selected": "_tabs__tab--selected_1ve9u_32",
+  "tabs__tab--chip": "_tabs__tab--chip_1ve9u_36",
+  "tabs__tab--chip--disabled": "_tabs__tab--chip--disabled_1ve9u_64",
+  "tabs__tab-panel": "_tabs__tab-panel_1ve9u_74",
+  "tabs__tab-icon": "_tabs__tab-icon_1ve9u_78",
+  "tabs__tab-indicative": "_tabs__tab-indicative_1ve9u_83",
+  "tabs__tab-indicative--empty": "_tabs__tab-indicative--empty_1ve9u_86",
+  "tabs__tab-indicative--success": "_tabs__tab-indicative--success_1ve9u_101",
+  "tabs__tab-content": "_tabs__tab-content_1ve9u_115"
+};
+export {
+  a as T,
+  i as s,
+  e as u
+};

package/dist/assets/Tabs.css

@@ -1 +1 @@
-._tabs_1ldid_1{gap:8px;width:100%}._tabs__tab_1ldid_5{min-width:94px;height:48px;padding:0 4px;color:var(--gray-75);cursor:pointer;background-color:transparent;border:none;border-bottom:2px solid transparent}._tabs__tab_1ldid_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_1ldid_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_1ldid_23{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_1ldid_23:focus,._tabs__tab--disabled_1ldid_23:active,._tabs__tab--disabled_1ldid_23:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_1ldid_32{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab--selected_1ldid_32._tabs__tab--chip_1ldid_36{color:var(--accent);border-color:var(--accent)}._tabs__tab--chip_1ldid_36{display:flex;align-items:center;justify-content:center;min-width:auto;height:32px;padding:0 15px;font-size:.875rem;font-weight:var(--base-bold);line-height:22px;color:var(--gray-95);background-color:transparent;border:1px solid var(--border);border-radius:var(--border-radius)}._tabs__tab--chip_1ldid_36:hover{color:var(--hover);border-color:var(--hover);border-bottom:1px solid var(--hover)}._tabs__tab--chip_1ldid_36:active{color:var(--active);border-color:var(--active)}._tabs__tab--chip--disabled_1ldid_64{color:#00000040;cursor:default;border:1px solid rgba(0,0,0,.25)}._tabs__tab--chip--disabled_1ldid_64:focus,._tabs__tab--chip--disabled_1ldid_64:active,._tabs__tab--chip--disabled_1ldid_64:hover{color:#00000040;background-color:transparent;border:1px solid rgba(0,0,0,.25)}._tabs__tab-panel_1ldid_74{width:100%;margin-top:16px}._tabs__tab-icon_1ldid_78{width:16px;height:16px;margin-right:4px}._tabs__tab-content_1ldid_83{display:flex;align-items:center;justify-content:center;width:100%}
+._tabs_1ve9u_1{gap:8px;width:100%}._tabs__tab_1ve9u_5{min-width:94px;height:48px;padding:0 4px;color:var(--gray-75);cursor:pointer;background-color:transparent;border:none;border-bottom:2px solid transparent}._tabs__tab_1ve9u_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_1ve9u_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_1ve9u_23{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_1ve9u_23:focus,._tabs__tab--disabled_1ve9u_23:active,._tabs__tab--disabled_1ve9u_23:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_1ve9u_32{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab--selected_1ve9u_32._tabs__tab--chip_1ve9u_36{color:var(--accent);border-color:var(--accent)}._tabs__tab--chip_1ve9u_36{display:flex;align-items:center;justify-content:center;min-width:auto;height:32px;padding:0 15px;font-size:.875rem;font-weight:var(--base-bold);line-height:22px;color:var(--gray-95);background-color:transparent;border:1px solid var(--border);border-radius:var(--border-radius)}._tabs__tab--chip_1ve9u_36:hover{color:var(--hover);border-color:var(--hover);border-bottom:1px solid var(--hover)}._tabs__tab--chip_1ve9u_36:active{color:var(--active);border-color:var(--active)}._tabs__tab--chip--disabled_1ve9u_64{color:#00000040;cursor:default;border:1px solid rgba(0,0,0,.25)}._tabs__tab--chip--disabled_1ve9u_64:focus,._tabs__tab--chip--disabled_1ve9u_64:active,._tabs__tab--chip--disabled_1ve9u_64:hover{color:#00000040;background-color:transparent;border:1px solid rgba(0,0,0,.25)}._tabs__tab-panel_1ve9u_74{width:100%;margin-top:16px}._tabs__tab-icon_1ve9u_78{width:16px;height:16px;margin-right:4px}._tabs__tab-indicative_1ve9u_83{margin-right:.5rem}._tabs__tab-indicative--empty_1ve9u_86{width:.5rem;height:.5rem;display:inline-flex;position:relative;margin-right:.6rem}._tabs__tab-indicative--empty_1ve9u_86>*{transform:scale(1.2);position:absolute;left:0;top:0;width:100%;height:100%}._tabs__tab-indicative--success_1ve9u_101{display:inline-flex;align-items:center;width:.5rem;height:.5rem}._tabs__tab-indicative--success_1ve9u_101:before{content:" ";display:inline-flex;background-color:var(--green-6);border-radius:100%;width:.5rem;height:.5rem}._tabs__tab-content_1ve9u_115{display:flex;align-items:center;justify-content:center;width:100%}

package/dist/components/Tabs/Tab.d.ts

@@ -1,6 +1,7 @@
 import { IconName } from '../Icon/types.ts';
 import { ReactNode } from 'react';
 
+export type IndicativeType = 'empty' | 'success';
 export interface TabProps {
     /** The value to be showing in the tab */
     children: ReactNode;
@@ -15,6 +16,8 @@ export interface TabProps {
     'data-testid'?: string;
     /** Icon to be displayed in the tab */
     icon?: IconName | ReactNode;
+    /** Ref to be passed to the container element */
+    indicative?: IndicativeType;
     /** Is the tab a chip */
     chip?: boolean;
     /** Show a loading skeleton */

package/dist/components/Tabs/Tab.js

@@ -1,126 +1,126 @@
-import { jsx as m, jsxs as j } from "react/jsx-runtime";
-import * as R from "react";
-import { forwardRef as k, useContext as H, useMemo as U } from "react";
-import { c as B } from "../../clsx-DB4S2d7J.js";
-import { Icon as D } from "../Icon/Icon.js";
-import { Skeleton as L } from "../Skeleton/Skeleton.js";
-import { u as W, T as $, s as c } from "../../Tabs.module-ia-imLti.js";
-import { g as q, a as z, u as I, f as A, b as h, _ as G, c as J, P as e, d as K, e as Q } from "../../useSlotProps-C_I1kEHr.js";
+import { jsx as u, jsxs as H } from "react/jsx-runtime";
+import * as P from "react";
+import { forwardRef as U, useContext as z, useMemo as B } from "react";
+import { c as x } from "../../clsx-DB4S2d7J.js";
+import { Icon as O } from "../Icon/Icon.js";
+import { Skeleton as D } from "../Skeleton/Skeleton.js";
+import { u as L, T as W, s as o } from "../../Tabs.module-CF9eCJzU.js";
+import { g as $, a as q, u as E, f as A, b as h, _ as G, c as J, P as e, d as K, e as Q } from "../../useSlotProps-C_I1kEHr.js";
 import { u as X, c as Y } from "../../combineHooksSlotProps-C-zYvfnF.js";
 import { u as Z } from "../../useId-BW-oWmul.js";
 import { u as ee } from "../../useButton-DcihopJG.js";
 import { u as te } from "../../useCompoundItem-B7Eo_qZk.js";
-const O = "Tab";
-function se(o) {
-  return q(O, o);
+const F = "Tab";
+function se(a) {
+  return $(F, a);
 }
-z(O, ["root", "selected", "disabled"]);
-function oe(o) {
-  return o.size;
+q(F, ["root", "selected", "disabled"]);
+function oe(a) {
+  return a.size;
 }
-function ae(o) {
+function ae(a) {
   const {
     value: t,
     rootRef: s,
-    disabled: r = !1,
-    id: d
-  } = o, a = R.useRef(null), n = Z(d), {
-    value: u,
-    selectionFollowsFocus: b,
-    getTabPanelId: l
-  } = W(), f = R.useMemo(() => ({
-    disabled: r,
-    ref: a,
-    id: n
-  }), [r, a, n]), {
-    id: i,
+    disabled: l = !1,
+    id: b
+  } = a, n = P.useRef(null), r = Z(b), {
+    value: p,
+    selectionFollowsFocus: c,
+    getTabPanelId: f
+  } = L(), i = P.useMemo(() => ({
+    disabled: l,
+    ref: n,
+    id: r
+  }), [l, n, r]), {
+    id: d,
     index: g,
-    totalItemCount: T
-  } = te(t ?? oe, f), {
-    getRootProps: _,
-    highlighted: C,
-    selected: p
+    totalItemCount: R
+  } = te(t ?? oe, i), {
+    getRootProps: T,
+    highlighted: y,
+    selected: m
   } = X({
-    item: i
+    item: d
   }), {
-    getRootProps: v,
-    rootRef: P,
-    active: y,
-    focusVisible: F,
-    setFocusVisible: S
+    getRootProps: C,
+    rootRef: _,
+    active: v,
+    focusVisible: V,
+    setFocusVisible: w
   } = ee({
-    disabled: r,
-    focusableWhenDisabled: !b,
+    disabled: l,
+    focusableWhenDisabled: !c,
     type: "button"
-  }), x = I(a, s, P), V = i !== void 0 ? l(i) : void 0;
+  }), N = E(n, s, _), M = d !== void 0 ? f(d) : void 0;
   return {
-    getRootProps: (N = {}) => {
-      const w = A(N), M = Y(_, v);
-      return h({}, N, M(w), {
+    getRootProps: (I = {}) => {
+      const j = A(I), k = Y(T, C);
+      return h({}, I, k(j), {
         role: "tab",
-        "aria-controls": V,
-        "aria-selected": p,
-        id: n,
-        ref: x
+        "aria-controls": M,
+        "aria-selected": m,
+        id: r,
+        ref: N
       });
     },
-    active: y,
-    focusVisible: F,
-    highlighted: C,
+    active: v,
+    focusVisible: V,
+    highlighted: y,
     index: g,
-    rootRef: x,
+    rootRef: N,
     // the `selected` state isn't set on the server (it relies on effects to be calculated),
     // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
-    selected: p || i === u,
-    setFocusVisible: S,
-    totalTabsCount: T
+    selected: m || d === p,
+    setFocusVisible: w,
+    totalTabsCount: R
   };
 }
-const ne = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], re = (o) => {
+const ne = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], re = (a) => {
   const {
     selected: t,
     disabled: s
-  } = o;
+  } = a;
   return K({
     root: ["root", t && "selected", s && "disabled"]
   }, Q(se));
-}, E = /* @__PURE__ */ R.forwardRef(function(t, s) {
-  var r;
+}, S = /* @__PURE__ */ P.forwardRef(function(t, s) {
+  var l;
   const {
-    children: d,
-    disabled: a = !1,
-    slotProps: n = {},
-    slots: u = {},
-    value: b
-  } = t, l = G(t, ne), f = R.useRef(), i = I(f, s), {
+    children: b,
+    disabled: n = !1,
+    slotProps: r = {},
+    slots: p = {},
+    value: c
+  } = t, f = G(t, ne), i = P.useRef(), d = E(i, s), {
     active: g,
-    highlighted: T,
-    selected: _,
-    getRootProps: C
+    highlighted: R,
+    selected: T,
+    getRootProps: y
   } = ae(h({}, t, {
-    rootRef: i,
-    value: b
-  })), p = h({}, t, {
+    rootRef: d,
+    value: c
+  })), m = h({}, t, {
     active: g,
-    disabled: a,
-    highlighted: T,
-    selected: _
-  }), v = re(p), P = (r = u.root) != null ? r : "button", y = J({
-    elementType: P,
-    getSlotProps: C,
-    externalSlotProps: n.root,
-    externalForwardedProps: l,
+    disabled: n,
+    highlighted: R,
+    selected: T
+  }), C = re(m), _ = (l = p.root) != null ? l : "button", v = J({
+    elementType: _,
+    getSlotProps: y,
+    externalSlotProps: r.root,
+    externalForwardedProps: f,
     additionalProps: {
       ref: s
     },
-    ownerState: p,
-    className: v.root
+    ownerState: m,
+    className: C.root
   });
-  return /* @__PURE__ */ m(P, h({}, y, {
-    children: d
+  return /* @__PURE__ */ u(_, h({}, v, {
+    children: b
   }));
 });
-process.env.NODE_ENV !== "production" && (E.propTypes = {
+process.env.NODE_ENV !== "production" && (S.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -166,22 +166,24 @@ process.env.NODE_ENV !== "production" && (E.propTypes = {
    */
   value: e.oneOfType([e.number, e.string])
 });
-const ge = k(
-  ({ children: o, value: t, disabled: s, className: r, "data-testid": d, icon: a, chip: n, isLoading: u }, b) => {
-    const l = H($), f = U(
-      () => B(
-        c.tabs__tab,
-        t === (l == null ? void 0 : l.value) && c["tabs__tab--selected"],
-        s && !n && c["tabs__tab--disabled"],
-        n && c["tabs__tab--chip"],
-        n && s && c["tabs__tab--chip--disabled"],
-        r
+const ge = U(
+  ({ children: a, value: t, disabled: s, className: l, "data-testid": b, icon: n, chip: r, isLoading: p, indicative: c }, f) => {
+    const i = z(W), d = B(
+      () => x(
+        o.tabs__tab,
+        t === (i == null ? void 0 : i.value) && o["tabs__tab--selected"],
+        s && !r && o["tabs__tab--disabled"],
+        r && o["tabs__tab--chip"],
+        r && s && o["tabs__tab--chip--disabled"],
+        l
       ),
-      [t, l, s, n]
+      [t, i, s, r]
     );
-    return /* @__PURE__ */ m(E, { className: f, disabled: s, value: t, "data-testid": d, ref: b, children: u ? /* @__PURE__ */ m(L, { style: { width: "50px", margin: "auto" } }) : /* @__PURE__ */ j("div", { className: c["tabs__tab-content"], children: [
-      a && /* @__PURE__ */ m("span", { className: c["tabs__tab-icon"], children: typeof a == "string" ? /* @__PURE__ */ m(D, { icon: a }) : a }),
-      o
+    return /* @__PURE__ */ u(S, { className: d, disabled: s, value: t, "data-testid": b, ref: f, children: p ? /* @__PURE__ */ u(D, { style: { width: "50px", margin: "auto" } }) : /* @__PURE__ */ H("div", { className: o["tabs__tab-content"], children: [
+      c && c === "empty" && /* @__PURE__ */ u("span", { className: x(o["tabs__tab-indicative"], o["tabs__tab-indicative--empty"]), children: /* @__PURE__ */ u(O, { icon: "empty-set", size: 10, color: "var(--orange-6)" }) }),
+      c && c === "success" && /* @__PURE__ */ u("span", { className: x(o["tabs__tab-indicative"], o["tabs__tab-indicative--success"]) }),
+      n && /* @__PURE__ */ u("span", { className: o["tabs__tab-icon"], children: typeof n == "string" ? /* @__PURE__ */ u(O, { icon: n }) : n }),
+      a
     ] }) });
   }
 );

package/dist/components/Tabs/Tab.stories.d.ts

@@ -18,3 +18,5 @@ export declare const IconChip: Story;
 export declare const Loading: Story;
 export declare const Disabled: Story;
 export declare const DisabledChip: Story;
+export declare const IndicativeSuccess: Story;
+export declare const IndicativeEmpty: Story;

package/dist/components/Tabs/TabPanel.js

@@ -2,7 +2,7 @@ import { jsx as T } from "react/jsx-runtime";
 import * as P from "react";
 import { forwardRef as v } from "react";
 import { c as y } from "../../clsx-DB4S2d7J.js";
-import { u as x, s as C } from "../../Tabs.module-ia-imLti.js";
+import { u as x, s as C } from "../../Tabs.module-CF9eCJzU.js";
 import { g as N, a as _, u as w, b, _ as O, c as E, P as o, d as I, e as S } from "../../useSlotProps-C_I1kEHr.js";
 import { u as U } from "../../useId-BW-oWmul.js";
 import { u as j } from "../../useCompoundItem-B7Eo_qZk.js";

package/dist/components/Tabs/Tabs.js

@@ -2,7 +2,7 @@ import { jsx as T } from "react/jsx-runtime";
 import * as r from "react";
 import { forwardRef as q } from "react";
 import { c as B } from "../../clsx-DB4S2d7J.js";
-import { T as G, u as J, s as Q } from "../../Tabs.module-ia-imLti.js";
+import { T as G, u as J, s as Q } from "../../Tabs.module-CF9eCJzU.js";
 import { Tab as Ie } from "./Tab.js";
 import { TabPanel as Fe } from "./TabPanel.js";
 import { g as I, a as _, b as C, _ as F, c as $, P as t, d as N, e as w } from "../../useSlotProps-C_I1kEHr.js";

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

@@ -12,3 +12,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
+export declare const Indicatives: Story;

package/package.json

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

package/dist/Tabs.module-ia-imLti.js

@@ -1,25 +0,0 @@
-import * as _ from "react";
-import './assets/Tabs.css';const a = /* @__PURE__ */ _.createContext(null);
-process.env.NODE_ENV !== "production" && (a.displayName = "TabsContext");
-function e() {
-  const t = _.useContext(a);
-  if (t == null)
-    throw new Error("No TabsContext provided");
-  return t;
-}
-const s = "_tabs_1ldid_1", b = "_tabs__tab_1ldid_5", d = {
-  tabs: s,
-  tabs__tab: b,
-  "tabs__tab--disabled": "_tabs__tab--disabled_1ldid_23",
-  "tabs__tab--selected": "_tabs__tab--selected_1ldid_32",
-  "tabs__tab--chip": "_tabs__tab--chip_1ldid_36",
-  "tabs__tab--chip--disabled": "_tabs__tab--chip--disabled_1ldid_64",
-  "tabs__tab-panel": "_tabs__tab-panel_1ldid_74",
-  "tabs__tab-icon": "_tabs__tab-icon_1ldid_78",
-  "tabs__tab-content": "_tabs__tab-content_1ldid_83"
-};
-export {
-  a as T,
-  d as s,
-  e as u
-};