@pismo/marola 0.0.1-alpha.14 → 0.0.1-alpha.16
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.
- package/dist/SelectButton-DWZ2BRaX.js +44 -0
- package/dist/assets/InputSearch.css +1 -1
- package/dist/assets/SelectButton.css +1 -1
- package/dist/assets/Snackbar.css +1 -1
- package/dist/components/InputSearch/InputSearch.js +7 -7
- package/dist/components/Select/Select.d.ts +9 -8
- package/dist/components/Select/Select.js +153 -155
- package/dist/components/Select/Select.stories.d.ts +10 -19
- package/dist/components/Select/Select.stories.js +72 -48
- package/dist/components/Select/SelectButton.d.ts +3 -4
- package/dist/components/Select/SelectButton.js +2 -2
- package/dist/components/Snackbar/Snackbar.d.ts +17 -5
- package/dist/components/Snackbar/Snackbar.js +180 -180
- package/dist/components/Snackbar/Snackbar.stories.d.ts +318 -0
- package/dist/components/Snackbar/Snackbar.stories.js +62 -0
- package/dist/main.js +13 -13
- package/package.json +1 -1
- package/dist/SelectButton-DWtqAiwt.js +0 -45
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import './assets/SelectButton.css';
|
|
2
|
+
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import * as o from "react";
|
|
4
|
+
import { forwardRef as d } from "react";
|
|
5
|
+
import { c as m } from "./clsx-DB4S2d7J.js";
|
|
6
|
+
import { Typography as i } from "./components/Typography/Typography.js";
|
|
7
|
+
const u = "_select_193rj_1", h = "_select__listbox_193rj_4", w = "_select__listbox__option_193rj_14", C = "_select__listbox__option__icon_193rj_22", j = "_select__listbox__option__text_193rj_26", v = "_select__list__option__icon_193rj_46", _ = {
|
|
8
|
+
select: u,
|
|
9
|
+
select__listbox: h,
|
|
10
|
+
select__listbox__option: w,
|
|
11
|
+
select__listbox__option__icon: C,
|
|
12
|
+
select__listbox__option__text: j,
|
|
13
|
+
"select__listbox__option--disabled": "_select__listbox__option--disabled_193rj_29",
|
|
14
|
+
"select__listbox__option--selected": "_select__listbox__option--selected_193rj_38",
|
|
15
|
+
select__list__option__icon: v,
|
|
16
|
+
"select-button": "_select-button_193rj_51",
|
|
17
|
+
"select-button__text": "_select-button__text_193rj_66",
|
|
18
|
+
"select-button__icon": "_select-button__icon_193rj_75",
|
|
19
|
+
"select-button--active": "_select-button--active_193rj_81"
|
|
20
|
+
}, f = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M2.11104 4.9999C2.36691 4.9999 2.62291 5.09756 2.81791 5.29287L8.11104 10.5843L13.4048 5.29053C13.7954 4.8999 14.4282 4.8999 14.8188 5.29053C15.2095 5.68115 15.2095 6.31396 14.8188 6.70459L8.81885 12.7046C8.42822 13.0952 7.79541 13.0952 7.40479 12.7046L1.40479 6.70459C1.01416 6.31396 1.01416 5.68115 1.40479 5.29053C1.59854 5.09678 1.85479 4.9999 2.11104 4.9999Z", fill: "currentColor" })), g = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M13.8889 11C13.633 11 13.377 10.9023 13.182 10.707L7.8889 5.41563L2.59515 10.7094C2.20453 11.1 1.57172 11.1 1.18109 10.7094C0.790466 10.3188 0.790466 9.68594 1.18109 9.29532L7.18109 3.29532C7.57172 2.90469 8.20453 2.90469 8.59515 3.29532L14.5952 9.29532C14.9858 9.68594 14.9858 10.3188 14.5952 10.7094C14.4014 10.9031 14.1452 11 13.8889 11Z", fill: "#3F3D4B", fillOpacity: 0.88 })), N = d((t, n) => {
|
|
21
|
+
const { children: r, disabled: a, className: b, "data-testid": p, prefix: s, onClick: x } = t, l = t["aria-expanded"];
|
|
22
|
+
return /* @__PURE__ */ c(
|
|
23
|
+
"button",
|
|
24
|
+
{
|
|
25
|
+
className: m(b, l ? _["select-button--active"] : "", _["select-button"]),
|
|
26
|
+
type: "button",
|
|
27
|
+
onClick: x,
|
|
28
|
+
disabled: a,
|
|
29
|
+
"data-testid": p,
|
|
30
|
+
ref: n,
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ c("span", { className: _["select-button__text"], children: [
|
|
33
|
+
s && /* @__PURE__ */ e(i, { element: "span", variant: "body-small", children: s }),
|
|
34
|
+
/* @__PURE__ */ e(i, { element: "span", variant: "body-small", children: r })
|
|
35
|
+
] }),
|
|
36
|
+
/* @__PURE__ */ e("span", { className: _["select-button__icon"], children: l ? /* @__PURE__ */ e(g, {}) : /* @__PURE__ */ e(f, {}) })
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
});
|
|
41
|
+
export {
|
|
42
|
+
N as S,
|
|
43
|
+
_ as s
|
|
44
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._inputSearch_114e1_1 input[type=search]::-webkit-search-cancel-button{width:1rem;height:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_3694_1860)'%3e%3cpath%20d='M7.97207%206.94064L9.46895%205.46876C9.7627%205.17814%2010.2377%205.17814%2010.5033%205.46876C10.8221%205.76251%2010.8221%206.23751%2010.5033%206.50314L9.05957%207.97189L10.5033%209.46876C10.8221%209.76251%2010.8221%2010.2375%2010.5033%2010.5031C10.2377%2010.8219%209.7627%2010.8219%209.46895%2010.5031L7.97207%209.05939L6.50332%2010.5031C6.2377%2010.8219%205.7627%2010.8219%205.46895%2010.5031C5.17832%2010.2375%205.17832%209.76251%205.46895%209.46876L6.94082%207.97189L5.46895%206.50314C5.17832%206.23751%205.17832%205.76251%205.46895%205.46876C5.7627%205.17814%206.2377%205.17814%206.50332%205.46876L7.97207%206.94064Z'%20fill='%23838192'/%3e%3cpath%20opacity='0.4'%20d='M0%208C0%203.58125%203.58125%200%208%200C12.4187%200%2016%203.58125%2016%208C16%2012.4187%2012.4187%2016%208%2016C3.58125%2016%200%2012.4187%200%208ZM5.46875%206.50313L6.94063%207.97188L5.46875%209.46875C5.17812%209.7625%205.17812%2010.2375%205.46875%2010.5031C5.7625%2010.8219%206.2375%2010.8219%206.50313%2010.5031L7.97188%209.05937L9.46875%2010.5031C9.7625%2010.8219%2010.2375%2010.8219%2010.5031%2010.5031C10.8219%2010.2375%2010.8219%209.7625%2010.5031%209.46875L9.05937%207.97188L10.5031%206.50313C10.8219%206.2375%2010.8219%205.7625%2010.5031%205.46875C10.2375%205.17812%209.7625%205.17812%209.46875%205.46875L7.97188%206.94063L6.50313%205.46875C6.2375%205.17812%205.7625%205.17812%205.46875%205.46875C5.17812%205.7625%205.17812%206.2375%205.46875%206.50313Z'%20fill='%23838192'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3694_1860'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat 50% 50%;background-size:contain;border-radius:50%;opacity:0}._inputSearch_114e1_1 input[type=search]:focus::-webkit-search-cancel-button{margin-left:1rem;pointer-events:all;cursor:pointer;opacity:1}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._select_193rj_1{background-color:red}._select__listbox_193rj_4{min-width:10.75rem;max-height:400px;padding:.5rem;margin-top:.25rem;overflow-y:auto;background-color:#fff;border-radius:var(--border-radius);box-shadow:0 6px 12px rgba(var(--black-100-rgb),20%)}._select__listbox__option_193rj_14{display:flex;padding:.625rem;color:rgba(var(--gray-95-rgb),88%);list-style:none;cursor:pointer;border-radius:var(--border-radius-soft)}._select__listbox__option__icon_193rj_22{display:flex;margin-right:.5rem}._select__listbox__option__text_193rj_26{font-weight:700}._select__listbox__option_193rj_14:hover:not(._select__listbox__option--disabled_193rj_29){padding:.625rem;color:var(--accent);background-color:rgba(var(--black-100-rgb),4%);border-radius:var(--border-radius-soft)}._select__listbox__option_193rj_14:active:not(._select__listbox__option--disabled_193rj_29){color:var(--accent-dark)}._select__listbox__option--selected_193rj_38{background-color:var(--accent-lighter)}._select__listbox__option--disabled_193rj_29{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:transparent}._select__listbox__option--disabled_193rj_29 ._select__list__option__icon_193rj_46{color:rgba(var(--gray-95-rgb),25%);fill:rgba(var(--gray-95-rgb),25%)}._select-button_193rj_51{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:11.875rem;min-width:fit-content;padding:.625rem 1rem;color:rgba(var(--gray-95-rgb),88%);cursor:pointer;background-color:var(--white-100);border:1px solid rgba(var(--black-100-rgb),6%);border-radius:var(--border-radius);outline:none}._select-button__text_193rj_66{display:flex;gap:.5rem;width:100%;overflow:hidden;text-align:start;text-overflow:ellipsis;text-wrap:nowrap}._select-button__icon_193rj_75{display:flex}._select-button__icon_193rj_75 svg{color:rgba(var(--gray-95-rgb),88%)}._select-button--active_193rj_81{border:1px solid var(--accent)}._select-button_193rj_51:disabled{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:1px solid var(--gray-10)}._select-button_193rj_51:disabled ._select-button__icon_193rj_75 svg{color:rgba(var(--gray-95-rgb),25%)}._select-button_193rj_51:hover:not(._select-button_193rj_51:disabled){border:1px solid var(--gray-25)}._select-button_193rj_51:focus:not(._select-button_193rj_51:disabled),._select-button_193rj_51:active:not(._select-button_193rj_51:disabled){border:1px solid var(--accent)}
|
package/dist/assets/Snackbar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._snackbar_13dfh_1{display:block;width:40.5rem;margin:0 auto}@keyframes _bottomToTop_13dfh_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._snackbar__snackbar-el-wrapper_13dfh_14{position:fixed;bottom:1rem;z-index:5500}._snackbar--content_13dfh_19{display:flex;align-items:center;justify-content:space-between;width:40.5rem;height:3.5rem;padding:1rem;overflow:hidden;border-radius:8px}._snackbar_13dfh_1:has(._snackbar--success_13dfh_29) ._snackbar--content_13dfh_19{background-color:var(--secondary-green-darker)}._snackbar_13dfh_1:has(._snackbar--error_13dfh_32) ._snackbar--content_13dfh_19{background-color:var(--alert)}._snackbar_13dfh_1:has(._snackbar--warning_13dfh_35) ._snackbar--content_13dfh_19{background-color:var(--secondary-orange)}._snackbar--message_13dfh_38{text-align:start}._snackbar--message_13dfh_38 p{font-size:1rem;font-weight:900;color:var(--white-100)}._snackbar--action_13dfh_46{position:absolute;top:1rem;right:1rem;padding:0;margin:0;cursor:pointer;background:none;border:none}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import '../../assets/InputSearch.css';
|
|
2
2
|
import { jsx as e } from "react/jsx-runtime";
|
|
3
3
|
import { c as m } from "../../clsx-DB4S2d7J.js";
|
|
4
|
-
import { Icon as
|
|
5
|
-
import { Input as
|
|
6
|
-
const l = "
|
|
4
|
+
import { Icon as p } from "../Icon/Icon.js";
|
|
5
|
+
import { Input as u } from "../Input/Input.js";
|
|
6
|
+
const l = "_inputSearch_114e1_1", h = {
|
|
7
7
|
inputSearch: l
|
|
8
8
|
};
|
|
9
9
|
let n;
|
|
10
|
-
const
|
|
10
|
+
const d = ({
|
|
11
11
|
classNameWrapper: r,
|
|
12
12
|
triggerDelay: o = 500,
|
|
13
13
|
value: c,
|
|
@@ -19,16 +19,16 @@ const x = ({
|
|
|
19
19
|
n && clearTimeout(n), n = setTimeout(() => i(t), o);
|
|
20
20
|
};
|
|
21
21
|
return /* @__PURE__ */ e("div", { className: m(h.inputSearch, r), children: /* @__PURE__ */ e(
|
|
22
|
-
|
|
22
|
+
u,
|
|
23
23
|
{
|
|
24
24
|
type: "search",
|
|
25
25
|
...a,
|
|
26
|
-
leftIcon: /* @__PURE__ */ e(
|
|
26
|
+
leftIcon: /* @__PURE__ */ e(p, { icon: "magnifying-glass" }),
|
|
27
27
|
defaultValue: c,
|
|
28
28
|
onChange: (t) => s(t)
|
|
29
29
|
}
|
|
30
30
|
) });
|
|
31
31
|
};
|
|
32
32
|
export {
|
|
33
|
-
|
|
33
|
+
d as InputSearch
|
|
34
34
|
};
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
|
|
3
|
-
type SelectOptionProps = {
|
|
3
|
+
export type SelectOptionProps = {
|
|
4
4
|
disabled?: boolean;
|
|
5
|
-
value: string
|
|
5
|
+
value: string;
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
icon?: ReactNode;
|
|
8
8
|
className?: string;
|
|
9
9
|
'data-testid'?: string;
|
|
10
10
|
};
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
export declare const SelectOption: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export type SelectProps = {
|
|
13
|
+
children?: ReactNode;
|
|
13
14
|
disabled?: boolean;
|
|
14
|
-
placeholder?: string
|
|
15
|
-
|
|
16
|
-
onChange?: (value: number | string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
prefix?: string;
|
|
17
17
|
className?: string;
|
|
18
|
+
value?: string;
|
|
18
19
|
'data-testid'?: string;
|
|
20
|
+
onChange?: (value: string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
|
|
19
21
|
};
|
|
20
|
-
export declare const Option: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
22
|
declare const Select: {
|
|
22
23
|
(props: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
23
24
|
Option: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|