@pismo/marola 0.0.1-alpha.11 → 0.0.1-alpha.13

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 (68) hide show
  1. package/README.md +1 -1
  2. package/dist/{ClickAwayListener-BKznXF1d.js → ClickAwayListener-HI1G6ob9.js} +2 -1
  3. package/dist/Popup-DFJQc_jn.js +1249 -0
  4. package/dist/{Portal-BcdMtRGF.js → Portal-D__zvwbZ.js} +1 -1
  5. package/dist/SelectButton-DWtqAiwt.js +45 -0
  6. package/dist/Tabs.module-jkH1Qjn7.js +22 -0
  7. package/dist/assets/Button.css +1 -1
  8. package/dist/assets/Chip.css +1 -0
  9. package/dist/assets/IconButton.css +1 -1
  10. package/dist/assets/Input.css +1 -1
  11. package/dist/assets/InputSearch.css +1 -1
  12. package/dist/assets/SelectButton.css +1 -0
  13. package/dist/assets/Typography.css +1 -1
  14. package/dist/combineHooksSlotProps-BHqhiBfc.js +81 -0
  15. package/dist/components/Button/Button.d.ts +5 -2
  16. package/dist/components/Button/Button.js +87 -63
  17. package/dist/components/Button/Button.stories.d.ts +2 -0
  18. package/dist/components/Button/Button.stories.js +8 -8
  19. package/dist/components/Chip/Chip.d.ts +37 -0
  20. package/dist/components/Chip/Chip.js +143 -0
  21. package/dist/components/Chip/Chip.stories.d.ts +40 -0
  22. package/dist/components/Chip/Chip.stories.js +59 -0
  23. package/dist/components/Chip/chip.test.d.ts +1 -0
  24. package/dist/components/Chip/chip.test.js +17303 -0
  25. package/dist/components/Dialog/Dialog.js +13 -12
  26. package/dist/components/Dialog/Dialog.stories.d.ts +3 -3
  27. package/dist/components/Dialog/Dialog.stories.js +9 -9
  28. package/dist/components/Icon/Icon.d.ts +1 -1
  29. package/dist/components/Icon/Icon.js +27 -20
  30. package/dist/components/IconButton/IconButton.d.ts +2 -2
  31. package/dist/components/IconButton/IconButton.js +63 -61
  32. package/dist/components/Input/Input.d.ts +1 -1
  33. package/dist/components/Input/Input.js +32 -32
  34. package/dist/components/InputSearch/InputSearch.d.ts +7 -9
  35. package/dist/components/InputSearch/InputSearch.js +31 -26
  36. package/dist/components/InputSearch/InputSearch.stories.d.ts +21 -4
  37. package/dist/components/InputSearch/InputSearch.stories.js +55 -18
  38. package/dist/components/LoadingSpinner/LoadingSpinner.d.ts +1 -1
  39. package/dist/components/LoadingSpinner/LoadingSpinner.stories.js +6 -6
  40. package/dist/components/PageHeader/PageHeader.stories.js +3 -3
  41. package/dist/components/Select/Select.d.ts +25 -0
  42. package/dist/components/Select/Select.js +860 -0
  43. package/dist/components/Select/Select.stories.d.ts +31 -0
  44. package/dist/components/Select/Select.stories.js +65 -0
  45. package/dist/components/Select/SelectButton.d.ts +13 -0
  46. package/dist/components/Select/SelectButton.js +8 -0
  47. package/dist/components/Snackbar/Snackbar.js +5 -4
  48. package/dist/components/Tabs/Tab.js +180 -6
  49. package/dist/components/Tabs/TabPanel.js +19 -18
  50. package/dist/components/Tabs/Tabs.js +237 -662
  51. package/dist/components/Tooltip/Tooltip.js +89 -1328
  52. package/dist/components/Typography/Typography.d.ts +1 -1
  53. package/dist/components/Typography/Typography.js +76 -74
  54. package/dist/components/Typography/Typography.stories.js +6 -6
  55. package/dist/components/Typography/typography.test.js +196 -11319
  56. package/dist/{index-BNWbc5Kh.js → index-BJ8HbRCy.js} +3109 -3152
  57. package/dist/main.d.ts +2 -0
  58. package/dist/main.js +57 -54
  59. package/dist/react.esm-DGd9_oKA.js +11126 -0
  60. package/dist/useCompoundItem-D1iRfg8D.js +84 -0
  61. package/dist/useEventCallback-vAfOD-oT.js +45 -0
  62. package/dist/useList-ByMguSS_.js +437 -0
  63. package/dist/utils/styleStrings.test.js +1 -1
  64. package/dist/{vi.Y_w82WR8-Df0JUamG.js → vi.Y_w82WR8-XVYrIxgm.js} +2 -1
  65. package/package.json +1 -1
  66. package/dist/Tab-CRwnhsj5.js +0 -254
  67. package/dist/Tabs.module-yYcTJnj6.js +0 -103
  68. package/dist/assets/global.css +0 -1
@@ -1,254 +0,0 @@
1
- import { jsx as N } from "react/jsx-runtime";
2
- import * as f from "react";
3
- import { forwardRef as F, useContext as U, useMemo as j } from "react";
4
- import { c as $ } from "./clsx-DB4S2d7J.js";
5
- import { a as A, u as B, b as W, T as q, s as y } from "./Tabs.module-yYcTJnj6.js";
6
- import { a as p, _ as z } from "./objectWithoutPropertiesLoose-D7Cp0Pg_.js";
7
- import { e as O, g as G, a as J, u as k, b as K, P as o, c as Q, d as X } from "./index-CqjC7P5Y.js";
8
- import { u as Y } from "./useButton-Bc8IAgyk.js";
9
- const E = {
10
- blur: "list:blur",
11
- focus: "list:focus",
12
- itemClick: "list:itemClick",
13
- itemHover: "list:itemHover",
14
- itemsChange: "list:itemsChange",
15
- keyDown: "list:keyDown",
16
- resetHighlight: "list:resetHighlight",
17
- highlightLast: "list:highlightLast",
18
- textNavigation: "list:textNavigation",
19
- clearSelection: "list:clearSelection"
20
- }, w = /* @__PURE__ */ f.createContext(null);
21
- process.env.NODE_ENV !== "production" && (w.displayName = "ListContext");
22
- function Z(n) {
23
- const {
24
- handlePointerOverEvents: t = !1,
25
- item: e
26
- } = n, s = f.useContext(w);
27
- if (!s)
28
- throw new Error("useListItem must be used within a ListProvider");
29
- const {
30
- dispatch: i,
31
- getItemState: a
32
- } = s, {
33
- highlighted: c,
34
- selected: b,
35
- focusable: m
36
- } = a(e), h = f.useCallback((l) => (r) => {
37
- var d;
38
- if ((d = l.onClick) == null || d.call(l, r), !r.defaultPrevented) {
39
- if (process.env.NODE_ENV !== "production" && e === void 0)
40
- throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
41
- `));
42
- i({
43
- type: E.itemClick,
44
- item: e,
45
- event: r
46
- });
47
- }
48
- }, [i, e]), g = f.useCallback((l) => (r) => {
49
- var d;
50
- if ((d = l.onMouseOver) == null || d.call(l, r), !r.defaultPrevented) {
51
- if (process.env.NODE_ENV !== "production" && e === void 0)
52
- throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
53
- `));
54
- i({
55
- type: E.itemHover,
56
- item: e,
57
- event: r
58
- });
59
- }
60
- }, [i, e]);
61
- let u;
62
- return m && (u = c ? 0 : -1), {
63
- getRootProps: (l = {}) => {
64
- const r = O(l);
65
- return p({}, l, {
66
- onClick: h(r),
67
- onPointerOver: t ? g(r) : void 0,
68
- tabIndex: u
69
- });
70
- },
71
- highlighted: c,
72
- selected: b
73
- };
74
- }
75
- function ee(n, t) {
76
- return function(s = {}) {
77
- const i = p({}, s, n(s));
78
- return p({}, i, t(i));
79
- };
80
- }
81
- const I = "Tab";
82
- function te(n) {
83
- return G(I, n);
84
- }
85
- J(I, ["root", "selected", "disabled"]);
86
- function oe(n) {
87
- return n.size;
88
- }
89
- function se(n) {
90
- const {
91
- value: t,
92
- rootRef: e,
93
- disabled: s = !1,
94
- id: i
95
- } = n, a = f.useRef(null), c = A(i), {
96
- value: b,
97
- selectionFollowsFocus: m,
98
- getTabPanelId: h
99
- } = B(), g = f.useMemo(() => ({
100
- disabled: s,
101
- ref: a,
102
- id: c
103
- }), [s, a, c]), {
104
- id: u,
105
- index: v,
106
- totalItemCount: l
107
- } = W(t ?? oe, g), {
108
- getRootProps: r,
109
- highlighted: d,
110
- selected: C
111
- } = Z({
112
- item: u
113
- }), {
114
- getRootProps: R,
115
- rootRef: P,
116
- active: T,
117
- focusVisible: L,
118
- setFocusVisible: M
119
- } = Y({
120
- disabled: s,
121
- focusableWhenDisabled: !m,
122
- type: "button"
123
- }), x = k(a, e, P), V = u !== void 0 ? h(u) : void 0;
124
- return {
125
- getRootProps: (_ = {}) => {
126
- const S = O(_), D = ee(r, R);
127
- return p({}, _, D(S), {
128
- role: "tab",
129
- "aria-controls": V,
130
- "aria-selected": C,
131
- id: c,
132
- ref: x
133
- });
134
- },
135
- active: T,
136
- focusVisible: L,
137
- highlighted: d,
138
- index: v,
139
- rootRef: x,
140
- // the `selected` state isn't set on the server (it relies on effects to be calculated),
141
- // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
142
- selected: C || u === b,
143
- setFocusVisible: M,
144
- totalTabsCount: l
145
- };
146
- }
147
- const ne = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], re = (n) => {
148
- const {
149
- selected: t,
150
- disabled: e
151
- } = n;
152
- return Q({
153
- root: ["root", t && "selected", e && "disabled"]
154
- }, X(te));
155
- }, H = /* @__PURE__ */ f.forwardRef(function(t, e) {
156
- var s;
157
- const {
158
- children: i,
159
- disabled: a = !1,
160
- slotProps: c = {},
161
- slots: b = {},
162
- value: m
163
- } = t, h = z(t, ne), g = f.useRef(), u = k(g, e), {
164
- active: v,
165
- highlighted: l,
166
- selected: r,
167
- getRootProps: d
168
- } = se(p({}, t, {
169
- rootRef: u,
170
- value: m
171
- })), C = p({}, t, {
172
- active: v,
173
- disabled: a,
174
- highlighted: l,
175
- selected: r
176
- }), R = re(C), P = (s = b.root) != null ? s : "button", T = K({
177
- elementType: P,
178
- getSlotProps: d,
179
- externalSlotProps: c.root,
180
- externalForwardedProps: h,
181
- additionalProps: {
182
- ref: e
183
- },
184
- ownerState: C,
185
- className: R.root
186
- });
187
- return /* @__PURE__ */ N(P, p({}, T, {
188
- children: i
189
- }));
190
- });
191
- process.env.NODE_ENV !== "production" && (H.propTypes = {
192
- // ┌────────────────────────────── Warning ──────────────────────────────┐
193
- // │ These PropTypes are generated from the TypeScript type definitions. │
194
- // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
195
- // └─────────────────────────────────────────────────────────────────────┘
196
- /**
197
- * A ref for imperative actions. It currently only supports `focusVisible()` action.
198
- */
199
- action: o.oneOfType([o.func, o.shape({
200
- current: o.shape({
201
- focusVisible: o.func.isRequired
202
- })
203
- })]),
204
- /**
205
- * @ignore
206
- */
207
- children: o.node,
208
- /**
209
- * If `true`, the component is disabled.
210
- * @default false
211
- */
212
- disabled: o.bool,
213
- /**
214
- * Callback invoked when new value is being set.
215
- */
216
- onChange: o.func,
217
- /**
218
- * The props used for each slot inside the Tab.
219
- * @default {}
220
- */
221
- slotProps: o.shape({
222
- root: o.oneOfType([o.func, o.object])
223
- }),
224
- /**
225
- * The components used for each slot inside the Tab.
226
- * Either a string to use a HTML element or a component.
227
- * @default {}
228
- */
229
- slots: o.shape({
230
- root: o.elementType
231
- }),
232
- /**
233
- * You can provide your own value. Otherwise, it falls back to the child position index.
234
- */
235
- value: o.oneOfType([o.number, o.string])
236
- });
237
- const be = F(
238
- ({ children: n, value: t, disabled: e, dataTestId: s }, i) => {
239
- const a = U(q), c = j(
240
- () => $(
241
- y.tabs__tab,
242
- t === (a == null ? void 0 : a.value) && y["tabs__tab--selected"],
243
- e && y["tabs__tab--disabled"]
244
- ),
245
- [t, a, e]
246
- );
247
- return /* @__PURE__ */ N(H, { className: c, disabled: e, value: t, "data-testid": s, ref: i, children: n });
248
- }
249
- );
250
- export {
251
- E as L,
252
- be as T,
253
- w as a
254
- };
@@ -1,103 +0,0 @@
1
- import './assets/Tabs.css';
2
- import * as n from "react";
3
- import { u as x } from "./useEnhancedEffect-CJGo-L3B.js";
4
- let f = 0;
5
- function y(t) {
6
- const [s, e] = n.useState(t), o = t || s;
7
- return n.useEffect(() => {
8
- s == null && (f += 1, e(`mui-${f}`));
9
- }, [s]), o;
10
- }
11
- const _ = n.useId;
12
- function E(t) {
13
- if (_ !== void 0) {
14
- const s = _();
15
- return t ?? s;
16
- }
17
- return y(t);
18
- }
19
- const p = /* @__PURE__ */ n.createContext(null);
20
- process.env.NODE_ENV !== "production" && (p.displayName = "CompoundComponentContext");
21
- function g(t) {
22
- const s = Array.from(t.keys()).map((e) => {
23
- const o = t.get(e);
24
- return {
25
- key: e,
26
- subitem: o
27
- };
28
- });
29
- return s.sort((e, o) => {
30
- const u = e.subitem.ref.current, r = o.subitem.ref.current;
31
- return u === null || r === null || u === r ? 0 : u.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
32
- }), new Map(s.map((e) => [e.key, e.subitem]));
33
- }
34
- function z() {
35
- const [t, s] = n.useState(/* @__PURE__ */ new Map()), e = n.useRef(/* @__PURE__ */ new Set()), o = n.useCallback(function(c) {
36
- e.current.delete(c), s((i) => {
37
- const a = new Map(i);
38
- return a.delete(c), a;
39
- });
40
- }, []), u = n.useCallback(function(c, i) {
41
- let a;
42
- return typeof c == "function" ? a = c(e.current) : a = c, e.current.add(a), s((C) => {
43
- const l = new Map(C);
44
- return l.set(a, i), l;
45
- }), {
46
- id: a,
47
- deregister: () => o(a)
48
- };
49
- }, [o]), r = n.useMemo(() => g(t), [t]), d = n.useCallback(function(c) {
50
- return Array.from(r.keys()).indexOf(c);
51
- }, [r]);
52
- return {
53
- contextValue: n.useMemo(() => ({
54
- getItemIndex: d,
55
- registerItem: u,
56
- totalSubitemCount: t.size
57
- }), [d, u, t.size]),
58
- subitems: r
59
- };
60
- }
61
- function T(t, s) {
62
- const e = n.useContext(p);
63
- if (e === null)
64
- throw new Error("useCompoundItem must be used within a useCompoundParent");
65
- const {
66
- registerItem: o
67
- } = e, [u, r] = n.useState(typeof t == "function" ? void 0 : t);
68
- return x(() => {
69
- const {
70
- id: d,
71
- deregister: m
72
- } = o(t, s);
73
- return r(d), m;
74
- }, [o, s, t]), {
75
- id: u,
76
- index: u !== void 0 ? e.getItemIndex(u) : -1,
77
- totalItemCount: e.totalSubitemCount
78
- };
79
- }
80
- const I = /* @__PURE__ */ n.createContext(null);
81
- process.env.NODE_ENV !== "production" && (I.displayName = "TabsContext");
82
- function D() {
83
- const t = n.useContext(I);
84
- if (t == null)
85
- throw new Error("No TabsContext provided");
86
- return t;
87
- }
88
- const N = "_tabs_18ymz_1", S = "_tabs__tab_18ymz_5", M = {
89
- tabs: N,
90
- tabs__tab: S,
91
- "tabs__tab--disabled": "_tabs__tab--disabled_18ymz_22",
92
- "tabs__tab--selected": "_tabs__tab--selected_18ymz_31",
93
- "tabs__tab-panel": "_tabs__tab-panel_18ymz_35"
94
- };
95
- export {
96
- p as C,
97
- I as T,
98
- E as a,
99
- T as b,
100
- z as c,
101
- M as s,
102
- D as u
103
- };
@@ -1 +0,0 @@
1
- :root{--secondary-orange: #ffa945;--secondary-orange-rgb: 255, 169, 69;--secondary-orange-dark: #fe8d53;--secondary-orange-dark-rgb: 254, 141, 83;--secondary-orange-light: #525061;--secondary-orange-light-rgb: 82, 80, 97;--secondary-green: #99dec3;--secondary-green-rgb: 153, 222, 195;--secondary-green-dark: #6acbb1;--secondary-green-dark-rgb: 106, 203, 177;--secondary-green-darker: #31aa7e;--secondary-green-darker-rgb: 49, 170, 126;--secondary-green-light: #baedd9;--secondary-green-light-rgb: 186, 237, 217;--accent: #1897f3;--accent-rgb: 24, 151, 243;--accent-dark: #1672c7;--accent-dark-rgb: 22, 114, 199;--accent-light: #4fb1f9;--accent-light-rgb: 79, 177, 249;--accent-lighter: #8ae1fd;--accent-lighter-rgb: 138, 225, 253;--alert: #df4561;--alert-rgb: 223, 69, 97;--alert-dark: #bb2b45;--alert-dark-rgb: 187, 43, 69;--accent-alert-light: #f37c91;--accent-alert-light-rgb: 243, 124, 145;--cream: #fafafa;--cream-rgb: 250, 250, 250;--hover: #42b7ff;--hover-rgb: 66, 183, 255;--active: #0a75cc;--active-rgb: 10, 117, 204}:root{--gray-100: #16161e;--gray-100-rgb: 22, 22, 30;--gray-95: #3f3d4b;--gray-95-rgb: 63, 61, 75;--gray-90: #525061;--gray-90-rgb: 82, 80, 97;--gray-75: #838192;--gray-75-rgb: 131, 129, 146;--gray-50: #bcbac8;--gray-50-rgb: 188, 186, 200;--gray-25: #dbdae2;--gray-25-rgb: 219, 218, 226;--gray-10: #ebeaf0;--gray-10-rgb: 235, 234, 240;--gray-5: #f7f7fc;--gray-5-rgb: 247, 247, 252;--black-100: #000000;--black-100-rgb: 0, 0, 0;--black-75: #616161;--black-75-rgb: 97, 97, 97;--black-50: #838192;--black-50-rgb: 131, 129, 146;--black-25: #bcbac8;--black-25-rgb: 188, 186, 200;--black-10: #ebeaf0;--black-10-rgb: 235, 234, 240;--white-100: #ffffff;--white-100-rgb: 255, 255, 255}:root{--heading-font-weight: 700;--heading-font-size-xl: 3.75rem;--heading-line-height-xl: 4.875rem;--heading-font-size-l: 3rem;--heading-line-height-l: 3.9375rem;--heading-font-size: 2.25rem;--heading-line-height: 2.875rem;--heading-font-size-s: 1.5rem;--heading-line-height-s: 2rem;--body-font-size: 1rem;--body-line-height: 1.3125rem;--body-weight: normal;--body-bold: bold;--body-font-size-large: 1.5rem;--body-line-height-large: 1.625rem;--body-font-size-medium: 1.125;--body-line-height-medium: 1rem;--body-font-size-small: .875rem;--body-line-height-small: 1.125rem;--body-font-size-tiny: .75rem;--body-line-height-tiny: 1rem;--quote-font-size-large: 1.5rem;--quote-line-height-large: 2rem;--quote-font-weight-large: normal;--quote-font-size: 1rem;--quote-line-height: 1.3125rem;--quote-font-weight: normal;--form-input-font-size: 1rem;--form-input-line-height: 1.3125rem;--form-input-font-weight: bold;--form-hint-font-size: .875rem;--form-hint-line-height: 1.3125rem;--form-hint-font-weight: normal;--form-label-font-size: .875rem;--form-label-line-height: 1.3125rem;--form-label-font-weight: normal;--form-dropdown-font-size: 1rem;--form-dropdown-line-height: 1.3125rem;--form-dropdown-font-weight: normal;--table-font-size: .875rem;--table-line-height: 1.0625rem;--table-header-font-weight: bold;--table-body-font-weight: normal;--table-body-secondary-line-height: 1.3125rem;--button-font-size: 1rem;--button-line-height: 1.25rem;--button-font-weight: bold}:root{--spacing: 8px;--border-radius: 6px;--border-radius-soft: 4px;--transition-soft: .3s;--transition-long: .75s}*{box-sizing:border-box}