@pismo/marola 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/{Group-DspH8hyO.js → Group-ZXteFV4M.js} +19 -9
  2. package/dist/Tabs.module-DSjBjg0Z.js +25 -0
  3. package/dist/{Toggle-MfR7l8Wn.js → Toggle-BuZjueQ7.js} +1 -1
  4. package/dist/assets/Tabs.css +1 -1
  5. package/dist/components/Chip/Chip.js +2 -2
  6. package/dist/components/Chip/Chip.stories.d.ts +1 -1
  7. package/dist/components/ConfirmationDialog/ConfirmationDialog.stories.d.ts +1 -1
  8. package/dist/components/Dialog/Dialog.stories.d.ts +1 -1
  9. package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts +1 -1
  10. package/dist/components/LoadingSpinner/LoadingSpinner.stories.d.ts +1 -1
  11. package/dist/components/Popover/Popover.stories.d.ts +1 -1
  12. package/dist/components/ResultWithChips/ResultWithChips.js +1 -1
  13. package/dist/components/RowItem/RowItem.js +2 -2
  14. package/dist/components/Snackbar/Snackbar.stories.d.ts +1 -1
  15. package/dist/components/Tabs/Tab.d.ts +5 -0
  16. package/dist/components/Tabs/Tab.js +103 -97
  17. package/dist/components/Tabs/Tab.stories.d.ts +4 -0
  18. package/dist/components/Tabs/TabPanel.js +1 -1
  19. package/dist/components/Tabs/Tabs.js +1 -1
  20. package/dist/components/ToggleGroup/Group.d.ts +2 -0
  21. package/dist/components/ToggleGroup/Group.js +1 -1
  22. package/dist/components/ToggleGroup/Toggle.js +2 -2
  23. package/dist/components/ToggleGroup/ToggleGroup.js +2 -2
  24. package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +2 -1
  25. package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -1
  26. package/dist/components/Typography/Typography.stories.d.ts +1 -1
  27. package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts +1 -1
  28. package/dist/main.js +2 -2
  29. package/package.json +1 -1
  30. package/dist/Tabs.module-BGGTkDc5.js +0 -22
@@ -1,8 +1,8 @@
1
1
  import './assets/Group.css';
2
2
  import { jsxs as l, jsx as o } from "react/jsx-runtime";
3
3
  import { forwardRef as n } from "react";
4
- import { c as u } from "./clsx-DB4S2d7J.js";
5
- import { Icon as m } from "./components/Icon/Icon.js";
4
+ import { c as m } from "./clsx-DB4S2d7J.js";
5
+ import { Icon as u } from "./components/Icon/Icon.js";
6
6
  import { Typography as c } from "./components/Typography/Typography.js";
7
7
  const p = "_toggle__input_hu6m0_1", h = "_toggle__label_hu6m0_11", t = {
8
8
  toggle__input: p,
@@ -13,18 +13,28 @@ const p = "_toggle__input_hu6m0_1", h = "_toggle__label_hu6m0_11", t = {
13
13
  "toggle-group__options": "_toggle-group__options_hu6m0_40",
14
14
  "toggle-group__options-same-width": "_toggle-group__options-same-width_hu6m0_44",
15
15
  "toggle-group__error": "_toggle-group__error_hu6m0_47"
16
- }, y = n((e, r) => {
17
- const { children: s, legend: _, error: g, equalWidth: a } = e, d = e["data-testid"] ? `${e["data-testid"]}-legend` : void 0, i = e["data-testid"] ? `${e["data-testid"]}-error` : void 0;
16
+ }, v = n((e, r) => {
17
+ const { children: s, legend: _, error: g, equalWidth: a } = e, i = e["data-testid"] ? `${e["data-testid"]}-legend` : void 0, d = e["data-testid"] ? `${e["data-testid"]}-error` : void 0;
18
18
  return /* @__PURE__ */ l("fieldset", { ref: r, "data-testid": e["data-testid"], className: t["toggle-group__fieldset"], children: [
19
- _ && /* @__PURE__ */ o("legend", { "data-testid": d, children: _ }),
20
- /* @__PURE__ */ o("div", { className: u(t["toggle-group__options"], a && t["toggle-group__options-same-width"]), children: s }),
21
- g && /* @__PURE__ */ l(c, { className: t["toggle-group__error"], "data-testid": i, children: [
22
- /* @__PURE__ */ o(m, { icon: "circle-exclamation" }),
19
+ _ && /* @__PURE__ */ o("legend", { "data-testid": i, children: _ }),
20
+ /* @__PURE__ */ o(
21
+ "div",
22
+ {
23
+ className: m(
24
+ t["toggle-group__options"],
25
+ a && t["toggle-group__options-same-width"],
26
+ e.classNameForOptions
27
+ ),
28
+ children: s
29
+ }
30
+ ),
31
+ g && /* @__PURE__ */ l(c, { className: t["toggle-group__error"], "data-testid": d, children: [
32
+ /* @__PURE__ */ o(u, { icon: "circle-exclamation" }),
23
33
  g
24
34
  ] })
25
35
  ] });
26
36
  });
27
37
  export {
28
- y as G,
38
+ v as G,
29
39
  t as s
30
40
  };
@@ -0,0 +1,25 @@
1
+ import './assets/Tabs.css';
2
+ import * as _ from "react";
3
+ const a = /* @__PURE__ */ _.createContext(null);
4
+ process.env.NODE_ENV !== "production" && (a.displayName = "TabsContext");
5
+ function e() {
6
+ const t = _.useContext(a);
7
+ if (t == null)
8
+ throw new Error("No TabsContext provided");
9
+ return t;
10
+ }
11
+ const s = "_tabs_q5he5_1", b = "_tabs__tab_q5he5_5", o = {
12
+ tabs: s,
13
+ tabs__tab: b,
14
+ "tabs__tab--disabled": "_tabs__tab--disabled_q5he5_26",
15
+ "tabs__tab--selected": "_tabs__tab--selected_q5he5_35",
16
+ "tabs__tab--chip": "_tabs__tab--chip_q5he5_39",
17
+ "tabs__tab--chip--disabled": "_tabs__tab--chip--disabled_q5he5_59",
18
+ "tabs__tab-panel": "_tabs__tab-panel_q5he5_69",
19
+ "tabs__tab-icon": "_tabs__tab-icon_q5he5_73"
20
+ };
21
+ export {
22
+ a as T,
23
+ o as s,
24
+ e as u
25
+ };
@@ -16,7 +16,7 @@ import "./components/Select/Select.js";
16
16
  import "./components/Popover/Popover.js";
17
17
  import "./components/Table/Table.js";
18
18
  import "./components/Tabs/Tabs.js";
19
- import { s as y } from "./Group-DspH8hyO.js";
19
+ import { s as y } from "./Group-ZXteFV4M.js";
20
20
  import "./contexts/SnackbarProvider/SnackbarProvider.js";
21
21
  import { B as x } from "./Button-BAljjMv3.js";
22
22
  const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove_1wvod_121", n = {
@@ -1 +1 @@
1
- ._tabs_1xfbu_1{gap:8px;width:100%}._tabs__tab_1xfbu_5{min-width:94px;height:48px;padding:0 8px 0 0;color:var(--gray-75);cursor:pointer;background-color:transparent;border:none;border-bottom:2px solid transparent}._tabs__tab_1xfbu_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_1xfbu_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_1xfbu_23{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_1xfbu_23:focus,._tabs__tab--disabled_1xfbu_23:active,._tabs__tab--disabled_1xfbu_23:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_1xfbu_32{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab-panel_1xfbu_36{width:100%;margin-top:16px}
1
+ ._tabs_q5he5_1{gap:8px;width:100%}._tabs__tab_q5he5_5{min-width:94px;height:48px;padding:0 4px 0 0;color:var(--gray-75);cursor:pointer;background-color:transparent;border:none;border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center}._tabs__tab_q5he5_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_q5he5_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_q5he5_26{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_q5he5_26:focus,._tabs__tab--disabled_q5he5_26:active,._tabs__tab--disabled_q5he5_26:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_q5he5_35{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab--selected_q5he5_35._tabs__tab--chip_q5he5_39{color:var(--accent);border-color:var(--accent)}._tabs__tab--chip_q5he5_39{height:32px;border:1px solid var(--gray-75);border-radius:var(--border-radius);color:var(--gray-75);background-color:transparent}._tabs__tab--chip_q5he5_39:hover{color:var(--hover);border-color:var(--hover);border-bottom:1px solid var(--hover)}._tabs__tab--chip_q5he5_39:active{color:var(--active);border-color:var(--active)}._tabs__tab--chip--disabled_q5he5_59{color:#00000040;cursor:default;border:1px solid rgba(0,0,0,.25)}._tabs__tab--chip--disabled_q5he5_59:focus,._tabs__tab--chip--disabled_q5he5_59:active,._tabs__tab--chip--disabled_q5he5_59:hover{color:#00000040;border:1px solid rgba(0,0,0,.25);background-color:transparent}._tabs__tab-panel_q5he5_69{width:100%;margin-top:16px}._tabs__tab-icon_q5he5_73{height:16px;width:16px;margin-right:12px}
@@ -7,7 +7,7 @@ import "../Typography/Typography.js";
7
7
  import "../Input/Input.js";
8
8
  import "../Avatar/Avatar.js";
9
9
  import "../Button/Button.js";
10
- import { C as u } from "../../Toggle-MfR7l8Wn.js";
10
+ import { C as u } from "../../Toggle-BuZjueQ7.js";
11
11
  import "../Dialog/Dialog.js";
12
12
  import "../Skeleton/Skeleton.js";
13
13
  import "../IconButton/IconButton.js";
@@ -16,7 +16,7 @@ import "../Select/Select.js";
16
16
  import "../Popover/Popover.js";
17
17
  import "../Table/Table.js";
18
18
  import "../Tabs/Tabs.js";
19
- import "../../Group-DspH8hyO.js";
19
+ import "../../Group-ZXteFV4M.js";
20
20
  import "../../contexts/SnackbarProvider/SnackbarProvider.js";
21
21
  import "../../Button-BAljjMv3.js";
22
22
  export {
@@ -4,7 +4,7 @@ declare const meta: {
4
4
  title: string;
5
5
  component: import('react').ForwardRefExoticComponent<import('./Chip').ChipProps & import('react').RefAttributes<unknown>>;
6
6
  tags: string[];
7
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
7
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
8
8
  label: import('react').ReactNode;
9
9
  loading?: boolean | undefined;
10
10
  leftAdornment?: import('../Adornment/Adornment').AdornmentProps | undefined;
@@ -5,7 +5,7 @@ declare const meta: {
5
5
  title: string;
6
6
  component: ({ open, onClose, title, subtitle, content, cancelAction, confirmAction, confirmLabel, cancelLabel, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
7
7
  tags: string[];
8
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
8
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
9
9
  open: boolean;
10
10
  onClose: () => void;
11
11
  title?: import('react').ReactNode;
@@ -10,7 +10,7 @@ declare const meta: {
10
10
  Actions: import('react').FunctionComponent<import('./Actions').DialogActionProps>;
11
11
  };
12
12
  tags: string[];
13
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
13
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
14
14
  color?: string | undefined;
15
15
  ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
16
16
  children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> & import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<unknown>>;
@@ -8,7 +8,7 @@ declare const meta: {
8
8
  parameters: {
9
9
  layout: string;
10
10
  };
11
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
11
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
12
12
  children: import('react').ReactNode;
13
13
  title: import('react').ReactNode;
14
14
  style?: import('react').CSSProperties | undefined;
@@ -4,7 +4,7 @@ declare const meta: {
4
4
  title: string;
5
5
  component: ({ invert, classNames }: import('./LoadingSpinner').LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
6
6
  tags: string[];
7
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
7
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
8
8
  invert?: boolean | undefined;
9
9
  classNames?: string | undefined;
10
10
  }>) => import("react/jsx-runtime").JSX.Element)[];
@@ -25,7 +25,7 @@ declare const meta: {
25
25
  };
26
26
  };
27
27
  tags: string[];
28
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
28
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
29
29
  [x: string]: any;
30
30
  }>) => import("react/jsx-runtime").JSX.Element)[];
31
31
  };
@@ -1,6 +1,6 @@
1
1
  import '../../assets/ResultWithChips.css';
2
2
  import { jsxs as i, jsx as e } from "react/jsx-runtime";
3
- import { C as t } from "../../Toggle-MfR7l8Wn.js";
3
+ import { C as t } from "../../Toggle-BuZjueQ7.js";
4
4
  const r = "_container_hgp0p_1", o = "_label_hgp0p_17", a = {
5
5
  container: r,
6
6
  "chip-item-wrapper": "_chip-item-wrapper_hgp0p_8",
@@ -7,7 +7,7 @@ import "../Typography/Typography.js";
7
7
  import "../Input/Input.js";
8
8
  import "../Avatar/Avatar.js";
9
9
  import "../Button/Button.js";
10
- import { R as h, R as j } from "../../Toggle-MfR7l8Wn.js";
10
+ import { R as h, R as j } from "../../Toggle-BuZjueQ7.js";
11
11
  import "../Dialog/Dialog.js";
12
12
  import "../IconButton/IconButton.js";
13
13
  import "../InputSearch/InputSearch.js";
@@ -15,7 +15,7 @@ import "../Select/Select.js";
15
15
  import "../Popover/Popover.js";
16
16
  import "../Table/Table.js";
17
17
  import "../Tabs/Tabs.js";
18
- import "../../Group-DspH8hyO.js";
18
+ import "../../Group-ZXteFV4M.js";
19
19
  import "../../contexts/SnackbarProvider/SnackbarProvider.js";
20
20
  export {
21
21
  h as RowItem,
@@ -5,7 +5,7 @@ declare const meta: {
5
5
  title: string;
6
6
  component: ({ snackbarMessage, variant, autoHideDuration, open, onClose, onClosed, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
7
7
  tags: string[];
8
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
8
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
9
9
  accept?: string | undefined;
10
10
  alt?: string | undefined;
11
11
  autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;
@@ -1,3 +1,4 @@
1
+ import { IconName } from '../Icon/types.ts';
1
2
  import { ReactNode } from 'react';
2
3
 
3
4
  export interface TabProps {
@@ -12,5 +13,9 @@ export interface TabProps {
12
13
  className?: string;
13
14
  /** Id to be applied as `data-testid` on the container element */
14
15
  'data-testid'?: string;
16
+ /** Icon to be displayed in the tab */
17
+ icon?: IconName | ReactNode;
18
+ /** Is the tab a chip */
19
+ chip?: boolean;
15
20
  }
16
21
  export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -1,124 +1,125 @@
1
- import { jsx as N } from "react/jsx-runtime";
2
- import * as b from "react";
3
- import { forwardRef as H, useContext as U, useMemo as j } from "react";
4
- import { c as k } from "../../clsx-DB4S2d7J.js";
5
- import { u as B, T as D, s as y } from "../../Tabs.module-BGGTkDc5.js";
6
- import { g as L, a as W, u as O, f as $, b as f, _ as q, c as z, P as e, d as A, e as G } from "../../useSlotProps-C_I1kEHr.js";
7
- import { u as J, c as K } from "../../combineHooksSlotProps-C-zYvfnF.js";
8
- import { u as Q } from "../../useId-BW-oWmul.js";
9
- import { u as X } from "../../useButton-DcihopJG.js";
10
- import { u as Y } from "../../useCompoundItem-B7Eo_qZk.js";
11
- const E = "Tab";
12
- function Z(o) {
13
- return L(E, o);
1
+ import { jsx as y, jsxs as w } from "react/jsx-runtime";
2
+ import * as P from "react";
3
+ import { forwardRef as H, useContext as U, useMemo as k } from "react";
4
+ import { c as B } from "../../clsx-DB4S2d7J.js";
5
+ import { Icon as D } from "../Icon/Icon.js";
6
+ import { u as L, T as W, s as i } from "../../Tabs.module-DSjBjg0Z.js";
7
+ import { g as $, a as q, u as I, f as z, b as m, _ as A, c as G, P as e, d as J, e as K } from "../../useSlotProps-C_I1kEHr.js";
8
+ import { u as Q, c as X } from "../../combineHooksSlotProps-C-zYvfnF.js";
9
+ import { u as Y } from "../../useId-BW-oWmul.js";
10
+ import { u as Z } from "../../useButton-DcihopJG.js";
11
+ import { u as ee } from "../../useCompoundItem-B7Eo_qZk.js";
12
+ const O = "Tab";
13
+ function te(o) {
14
+ return $(O, o);
14
15
  }
15
- W(E, ["root", "selected", "disabled"]);
16
- function ee(o) {
16
+ q(O, ["root", "selected", "disabled"]);
17
+ function se(o) {
17
18
  return o.size;
18
19
  }
19
- function te(o) {
20
+ function oe(o) {
20
21
  const {
21
22
  value: t,
22
23
  rootRef: s,
23
- disabled: n = !1,
24
- id: c
25
- } = o, r = b.useRef(null), a = Q(c), {
26
- value: i,
27
- selectionFollowsFocus: p,
28
- getTabPanelId: m
29
- } = B(), P = b.useMemo(() => ({
30
- disabled: n,
31
- ref: r,
32
- id: a
33
- }), [n, r, a]), {
34
- id: l,
35
- index: R,
36
- totalItemCount: g
37
- } = Y(t ?? ee, P), {
38
- getRootProps: h,
39
- highlighted: T,
40
- selected: u
41
- } = J({
42
- item: l
24
+ disabled: r = !1,
25
+ id: u
26
+ } = o, a = P.useRef(null), n = Y(u), {
27
+ value: d,
28
+ selectionFollowsFocus: l,
29
+ getTabPanelId: b
30
+ } = L(), R = P.useMemo(() => ({
31
+ disabled: r,
32
+ ref: a,
33
+ id: n
34
+ }), [r, a, n]), {
35
+ id: c,
36
+ index: g,
37
+ totalItemCount: h
38
+ } = ee(t ?? se, R), {
39
+ getRootProps: T,
40
+ highlighted: _,
41
+ selected: f
42
+ } = Q({
43
+ item: c
43
44
  }), {
44
45
  getRootProps: C,
45
- rootRef: d,
46
+ rootRef: p,
46
47
  active: v,
47
- focusVisible: I,
48
+ focusVisible: F,
48
49
  setFocusVisible: V
49
- } = X({
50
- disabled: n,
51
- focusableWhenDisabled: !p,
50
+ } = Z({
51
+ disabled: r,
52
+ focusableWhenDisabled: !l,
52
53
  type: "button"
53
- }), _ = O(r, s, d), M = l !== void 0 ? m(l) : void 0;
54
+ }), x = I(a, s, p), M = c !== void 0 ? b(c) : void 0;
54
55
  return {
55
- getRootProps: (x = {}) => {
56
- const S = $(x), w = K(h, C);
57
- return f({}, x, w(S), {
56
+ getRootProps: (N = {}) => {
57
+ const S = z(N), j = X(T, C);
58
+ return m({}, N, j(S), {
58
59
  role: "tab",
59
60
  "aria-controls": M,
60
- "aria-selected": u,
61
- id: a,
62
- ref: _
61
+ "aria-selected": f,
62
+ id: n,
63
+ ref: x
63
64
  });
64
65
  },
65
66
  active: v,
66
- focusVisible: I,
67
- highlighted: T,
68
- index: R,
69
- rootRef: _,
67
+ focusVisible: F,
68
+ highlighted: _,
69
+ index: g,
70
+ rootRef: x,
70
71
  // the `selected` state isn't set on the server (it relies on effects to be calculated),
71
72
  // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
72
- selected: u || l === i,
73
+ selected: f || c === d,
73
74
  setFocusVisible: V,
74
- totalTabsCount: g
75
+ totalTabsCount: h
75
76
  };
76
77
  }
77
- const oe = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], se = (o) => {
78
+ const ae = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], ne = (o) => {
78
79
  const {
79
80
  selected: t,
80
81
  disabled: s
81
82
  } = o;
82
- return A({
83
+ return J({
83
84
  root: ["root", t && "selected", s && "disabled"]
84
- }, G(Z));
85
- }, F = /* @__PURE__ */ b.forwardRef(function(t, s) {
86
- var n;
85
+ }, K(te));
86
+ }, E = /* @__PURE__ */ P.forwardRef(function(t, s) {
87
+ var r;
87
88
  const {
88
- children: c,
89
- disabled: r = !1,
90
- slotProps: a = {},
91
- slots: i = {},
92
- value: p
93
- } = t, m = q(t, oe), P = b.useRef(), l = O(P, s), {
94
- active: R,
95
- highlighted: g,
96
- selected: h,
97
- getRootProps: T
98
- } = te(f({}, t, {
99
- rootRef: l,
100
- value: p
101
- })), u = f({}, t, {
102
- active: R,
103
- disabled: r,
104
- highlighted: g,
105
- selected: h
106
- }), C = se(u), d = (n = i.root) != null ? n : "button", v = z({
107
- elementType: d,
108
- getSlotProps: T,
109
- externalSlotProps: a.root,
110
- externalForwardedProps: m,
89
+ children: u,
90
+ disabled: a = !1,
91
+ slotProps: n = {},
92
+ slots: d = {},
93
+ value: l
94
+ } = t, b = A(t, ae), R = P.useRef(), c = I(R, s), {
95
+ active: g,
96
+ highlighted: h,
97
+ selected: T,
98
+ getRootProps: _
99
+ } = oe(m({}, t, {
100
+ rootRef: c,
101
+ value: l
102
+ })), f = m({}, t, {
103
+ active: g,
104
+ disabled: a,
105
+ highlighted: h,
106
+ selected: T
107
+ }), C = ne(f), p = (r = d.root) != null ? r : "button", v = G({
108
+ elementType: p,
109
+ getSlotProps: _,
110
+ externalSlotProps: n.root,
111
+ externalForwardedProps: b,
111
112
  additionalProps: {
112
113
  ref: s
113
114
  },
114
- ownerState: u,
115
+ ownerState: f,
115
116
  className: C.root
116
117
  });
117
- return /* @__PURE__ */ N(d, f({}, v, {
118
- children: c
118
+ return /* @__PURE__ */ y(p, m({}, v, {
119
+ children: u
119
120
  }));
120
121
  });
121
- process.env.NODE_ENV !== "production" && (F.propTypes = {
122
+ process.env.NODE_ENV !== "production" && (E.propTypes = {
122
123
  // ┌────────────────────────────── Warning ──────────────────────────────┐
123
124
  // │ These PropTypes are generated from the TypeScript type definitions. │
124
125
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -164,20 +165,25 @@ process.env.NODE_ENV !== "production" && (F.propTypes = {
164
165
  */
165
166
  value: e.oneOfType([e.number, e.string])
166
167
  });
167
- const pe = H(
168
- ({ children: o, value: t, disabled: s, className: n, "data-testid": c }, r) => {
169
- const a = U(D), i = j(
170
- () => k(
171
- y.tabs__tab,
172
- t === (a == null ? void 0 : a.value) && y["tabs__tab--selected"],
173
- s && y["tabs__tab--disabled"],
174
- n
168
+ const Re = H(
169
+ ({ children: o, value: t, disabled: s, className: r, "data-testid": u, icon: a, chip: n }, d) => {
170
+ const l = U(W), b = k(
171
+ () => B(
172
+ i.tabs__tab,
173
+ t === (l == null ? void 0 : l.value) && i["tabs__tab--selected"],
174
+ s && !n && i["tabs__tab--disabled"],
175
+ n && i["tabs__tab--chip"],
176
+ n && s && i["tabs__tab--chip--disabled"],
177
+ r
175
178
  ),
176
- [t, a, s]
179
+ [t, l, s, n]
177
180
  );
178
- return /* @__PURE__ */ N(F, { className: i, disabled: s, value: t, "data-testid": c, ref: r, children: o });
181
+ return /* @__PURE__ */ w(E, { className: b, disabled: s, value: t, "data-testid": u, ref: d, children: [
182
+ a && /* @__PURE__ */ y("span", { className: i["tabs__tab-icon"], children: typeof a == "string" ? /* @__PURE__ */ y(D, { icon: a }) : a }),
183
+ o
184
+ ] });
179
185
  }
180
186
  );
181
187
  export {
182
- pe as Tab
188
+ Re as Tab
183
189
  };
@@ -12,4 +12,8 @@ declare const meta: {
12
12
  export default meta;
13
13
  type Story = StoryObj<typeof meta>;
14
14
  export declare const Simple: Story;
15
+ export declare const Icon: Story;
16
+ export declare const Chip: Story;
17
+ export declare const IconChip: Story;
15
18
  export declare const Disabled: Story;
19
+ export declare const DisabledChip: Story;
@@ -2,7 +2,7 @@ import { jsx as T } from "react/jsx-runtime";
2
2
  import * as P from "react";
3
3
  import { forwardRef as v } from "react";
4
4
  import { c as y } from "../../clsx-DB4S2d7J.js";
5
- import { u as x, s as C } from "../../Tabs.module-BGGTkDc5.js";
5
+ import { u as x, s as C } from "../../Tabs.module-DSjBjg0Z.js";
6
6
  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";
7
7
  import { u as U } from "../../useId-BW-oWmul.js";
8
8
  import { u as j } from "../../useCompoundItem-B7Eo_qZk.js";
@@ -2,7 +2,7 @@ import { jsx as T } from "react/jsx-runtime";
2
2
  import * as r from "react";
3
3
  import { forwardRef as q } from "react";
4
4
  import { c as B } from "../../clsx-DB4S2d7J.js";
5
- import { T as G, u as J, s as Q } from "../../Tabs.module-BGGTkDc5.js";
5
+ import { T as G, u as J, s as Q } from "../../Tabs.module-DSjBjg0Z.js";
6
6
  import { Tab as Ie } from "./Tab.js";
7
7
  import { TabPanel as Fe } from "./TabPanel.js";
8
8
  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";
@@ -15,6 +15,8 @@ export type ToggleGroupProps = {
15
15
  'data-testid'?: string;
16
16
  /** Controls if children items should have same width */
17
17
  equalWidth?: boolean;
18
+ /** Space separated list of CSS classes to apply to options */
19
+ classNameForOptions?: string;
18
20
  };
19
21
  declare const Group: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
20
22
  export default Group;
@@ -3,7 +3,7 @@ import "react";
3
3
  import "../../clsx-DB4S2d7J.js";
4
4
  import "../Icon/Icon.js";
5
5
  import "../Typography/Typography.js";
6
- import { G as e } from "../../Group-DspH8hyO.js";
6
+ import { G as e } from "../../Group-ZXteFV4M.js";
7
7
  export {
8
8
  e as default
9
9
  };
@@ -6,7 +6,7 @@ import "../Typography/Typography.js";
6
6
  import "../Input/Input.js";
7
7
  import "../Avatar/Avatar.js";
8
8
  import "../Button/Button.js";
9
- import { T as j } from "../../Toggle-MfR7l8Wn.js";
9
+ import { T as j } from "../../Toggle-BuZjueQ7.js";
10
10
  import "../Dialog/Dialog.js";
11
11
  import "../IconButton/IconButton.js";
12
12
  import "../InputSearch/InputSearch.js";
@@ -14,7 +14,7 @@ import "../Select/Select.js";
14
14
  import "../Popover/Popover.js";
15
15
  import "../Table/Table.js";
16
16
  import "../Tabs/Tabs.js";
17
- import "../../Group-DspH8hyO.js";
17
+ import "../../Group-ZXteFV4M.js";
18
18
  import "../../contexts/SnackbarProvider/SnackbarProvider.js";
19
19
  export {
20
20
  j as default
@@ -1,5 +1,5 @@
1
- import { T as e } from "../../Toggle-MfR7l8Wn.js";
2
- import { G as p } from "../../Group-DspH8hyO.js";
1
+ import { T as e } from "../../Toggle-BuZjueQ7.js";
2
+ import { G as p } from "../../Group-ZXteFV4M.js";
3
3
  export {
4
4
  p as ToggleGroup,
5
5
  e as ToggleGroupItem
@@ -6,12 +6,13 @@ declare const meta: {
6
6
  title: string;
7
7
  component: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
8
8
  tags: string[];
9
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
9
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
10
10
  legend?: import('react').ReactNode;
11
11
  error?: import('react').ReactNode;
12
12
  children: import('react').ReactElement<import('./Toggle.tsx').ToggleGroupItemProps<string | number>, string | import('react').JSXElementConstructor<any>>[];
13
13
  'data-testid'?: string | undefined;
14
14
  equalWidth?: boolean | undefined;
15
+ classNameForOptions?: string | undefined;
15
16
  ref?: import('react').LegacyRef<HTMLFieldSetElement> | undefined;
16
17
  key?: import('react').Key | null | undefined;
17
18
  }>) => import("react/jsx-runtime").JSX.Element)[];
@@ -8,7 +8,7 @@ declare const meta: {
8
8
  parameters: {
9
9
  layout: string;
10
10
  };
11
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
11
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
12
12
  children: import('react').ReactNode;
13
13
  title: import('react').ReactNode;
14
14
  open?: boolean | undefined;
@@ -12,7 +12,7 @@ declare const meta: {
12
12
  };
13
13
  };
14
14
  };
15
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
15
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
16
16
  children: import('react').ReactNode;
17
17
  element?: import('react').ElementType | undefined;
18
18
  variant?: import('./Typography').VariantType | undefined;
@@ -12,7 +12,7 @@ declare const meta: {
12
12
  };
13
13
  };
14
14
  tags: string[];
15
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
15
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
16
16
  [x: string]: any;
17
17
  }>) => import("react/jsx-runtime").JSX.Element)[];
18
18
  };
package/dist/main.js CHANGED
@@ -5,7 +5,7 @@ import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
5
5
  import { Avatar as i } from "./components/Avatar/Avatar.js";
6
6
  import { Button as T } from "./components/Button/Button.js";
7
7
  import { Checkbox as g } from "./components/Checkbox/Checkbox.js";
8
- import { C as u, R as S, T as d } from "./Toggle-MfR7l8Wn.js";
8
+ import { C as u, R as S, T as d } from "./Toggle-BuZjueQ7.js";
9
9
  import { ConfirmationDialog as k } from "./components/ConfirmationDialog/ConfirmationDialog.js";
10
10
  import { Description as h } from "./components/Description/Description.js";
11
11
  import { Dialog as A } from "./components/Dialog/Dialog.js";
@@ -31,7 +31,7 @@ import { Tabs as bo } from "./components/Tabs/Tabs.js";
31
31
  import { Tag as Co } from "./components/Tag/Tag.js";
32
32
  import { TextDisplay as Do } from "./components/TextDisplay/TextDisplay.js";
33
33
  import { Toggle as Io } from "./components/Toggle/Toggle.js";
34
- import { G as Po } from "./Group-DspH8hyO.js";
34
+ import { G as Po } from "./Group-ZXteFV4M.js";
35
35
  import { Tooltip as Bo } from "./components/Tooltip/Tooltip.js";
36
36
  import { Text as Go, Typography as Ho } from "./components/Typography/Typography.js";
37
37
  import { SnackbarContext as Eo, SnackbarProvider as Lo, useSnackbar as No } from "./contexts/SnackbarProvider/SnackbarProvider.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pismo/marola",
3
3
  "description": "CDX tribe component library",
4
- "version": "1.0.5",
4
+ "version": "1.0.7",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",
@@ -1,22 +0,0 @@
1
- import './assets/Tabs.css';
2
- import * as a from "react";
3
- const s = /* @__PURE__ */ a.createContext(null);
4
- process.env.NODE_ENV !== "production" && (s.displayName = "TabsContext");
5
- function e() {
6
- const t = a.useContext(s);
7
- if (t == null)
8
- throw new Error("No TabsContext provided");
9
- return t;
10
- }
11
- const _ = "_tabs_1xfbu_1", b = "_tabs__tab_1xfbu_5", o = {
12
- tabs: _,
13
- tabs__tab: b,
14
- "tabs__tab--disabled": "_tabs__tab--disabled_1xfbu_23",
15
- "tabs__tab--selected": "_tabs__tab--selected_1xfbu_32",
16
- "tabs__tab-panel": "_tabs__tab-panel_1xfbu_36"
17
- };
18
- export {
19
- s as T,
20
- o as s,
21
- e as u
22
- };