@yr3/ui 1.0.15 → 1.0.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/components/Group/group.css +12 -6
- package/dist/components/Group/group.css.map +1 -1
- package/dist/components/Slide/slide.css +4 -0
- package/dist/components/Slide/slide.css.map +1 -1
- package/dist/index.cjs +207 -143
- package/dist/index.d.cts +10 -3
- package/dist/index.d.ts +10 -3
- package/dist/index.js +206 -143
- package/dist/styles/index.css +16 -6
- package/dist/styles/index.css.map +1 -1
- package/package.json +1 -1
|
@@ -21,21 +21,22 @@
|
|
|
21
21
|
border-color: var(--group-border-color, var(--color-primary));
|
|
22
22
|
background: var(--bg-group, var(--color-primary));
|
|
23
23
|
--group-bg-item: var(--color-surface, #fff);
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
.yr3Group--filled .yr3Group--item {
|
|
27
|
-
color: var(--color-surface, var(--color-surface));
|
|
28
|
-
border-radius: var(--group-border-radius, 40px);
|
|
24
|
+
transition: all 0.2s;
|
|
29
25
|
}
|
|
30
26
|
.yr3Group--filled .yr3Group--item--active {
|
|
31
27
|
background: var(--color-surface);
|
|
32
28
|
color: var(--group-color-text);
|
|
29
|
+
border-radius: var(--group-border-radius, 0px);
|
|
30
|
+
}
|
|
31
|
+
.yr3Group--filled .yr3Group--item--exclude {
|
|
32
|
+
background: var(--color-surface);
|
|
33
|
+
color: var(--group-color-text);
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
.yr3Group--outlined {
|
|
36
37
|
border: 1px solid;
|
|
37
38
|
border-color: var(--group-border-color, var(--color-primary));
|
|
38
|
-
|
|
39
|
+
transition: all 0.2s;
|
|
39
40
|
}
|
|
40
41
|
.yr3Group--outlined .yr3Group--item {
|
|
41
42
|
background: var(--group-bg-item, transparent);
|
|
@@ -44,6 +45,11 @@
|
|
|
44
45
|
.yr3Group--outlined .yr3Group--item--active {
|
|
45
46
|
background: var(--group-active, var(--color-surface));
|
|
46
47
|
color: var(--color-surface);
|
|
48
|
+
border-radius: var(--group-border-radius, 0px);
|
|
49
|
+
}
|
|
50
|
+
.yr3Group--outlined .yr3Group--item--exclude {
|
|
51
|
+
background: var(--color-surface);
|
|
52
|
+
color: var(--group-color-text);
|
|
47
53
|
}
|
|
48
54
|
|
|
49
55
|
.yr3Group--text {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/components/Group/group.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/components/Group/group.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEE;EACE;EACA;EACA;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;;AAKN;EACE;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAON;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKF;EACE;;;AAEF;EACE","file":"group.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/components/Slide/slide.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;AAGI;EACI;EACA;EACA;;AAJR;EAMG;;;AAIE;EACG;EACA;EACA;;AAJR;EAMG;;;AAGH;EACE;;;AAIE;EACI;EACA;EACA;;AAJR;EAMG;;;AAGH;AAEA;EACE","file":"slide.css"}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/components/Slide/slide.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;AAGI;EACI;EACA;EACA;;AAJR;EAMG;;;AAIE;EACG;EACA;EACA;;AAJR;EAMG;;;AAGH;EACE;;;AAIE;EACI;EACA;EACA;;AAJR;EAMG;;;AAGH;AAEA;EACE;;;AAGF;EACE","file":"slide.css"}
|
package/dist/index.cjs
CHANGED
|
@@ -95,6 +95,7 @@ __export(index_exports, {
|
|
|
95
95
|
getNumberPhone: () => getNumberPhone,
|
|
96
96
|
hexToRgb: () => hexToRgb,
|
|
97
97
|
initTheme: () => initTheme,
|
|
98
|
+
inputCurrency: () => inputCurrency,
|
|
98
99
|
isEmpty: () => isEmpty,
|
|
99
100
|
lighten: () => lighten,
|
|
100
101
|
mergeDeep: () => mergeDeep,
|
|
@@ -461,6 +462,15 @@ function mergeDeep(target, source) {
|
|
|
461
462
|
return output;
|
|
462
463
|
}
|
|
463
464
|
|
|
465
|
+
// src/utils/input.ts
|
|
466
|
+
var inputCurrency = (e, value, alloweds) => {
|
|
467
|
+
const allowed = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].concat(alloweds);
|
|
468
|
+
if (allowed.includes(e.key)) return;
|
|
469
|
+
if (/^\d$/.test(e.key)) return;
|
|
470
|
+
if ((e.key === "," || e.key === ".") && !(value || "").includes(",") && !(value || "").includes(".")) return;
|
|
471
|
+
e.preventDefault();
|
|
472
|
+
};
|
|
473
|
+
|
|
464
474
|
// src/theme/breakpoint.ts
|
|
465
475
|
var breakpoints = {
|
|
466
476
|
xs: 0,
|
|
@@ -1659,7 +1669,14 @@ var initialComponents = {
|
|
|
1659
1669
|
},
|
|
1660
1670
|
item: {
|
|
1661
1671
|
ui: {},
|
|
1662
|
-
style: {}
|
|
1672
|
+
style: {},
|
|
1673
|
+
text: {
|
|
1674
|
+
variant: "caption",
|
|
1675
|
+
color: "primary",
|
|
1676
|
+
as: "span",
|
|
1677
|
+
ui: {},
|
|
1678
|
+
style: {}
|
|
1679
|
+
}
|
|
1663
1680
|
}
|
|
1664
1681
|
};
|
|
1665
1682
|
var Group = ({
|
|
@@ -1669,8 +1686,10 @@ var Group = ({
|
|
|
1669
1686
|
variant,
|
|
1670
1687
|
type = "rounded",
|
|
1671
1688
|
color = "primary",
|
|
1672
|
-
|
|
1689
|
+
exclude = false,
|
|
1690
|
+
propsComponent
|
|
1673
1691
|
}) => {
|
|
1692
|
+
const properties = mergeDeep(initialComponents, propsComponent || {});
|
|
1674
1693
|
const [internalValue, setInternalValue] = React10.useState(null);
|
|
1675
1694
|
const isControlled = value !== void 0;
|
|
1676
1695
|
React10.useEffect(() => {
|
|
@@ -1679,20 +1698,51 @@ var Group = ({
|
|
|
1679
1698
|
}
|
|
1680
1699
|
}, [value, isControlled]);
|
|
1681
1700
|
const classItems = bem("yr3Group--item");
|
|
1701
|
+
const clasess = (item) => classItems(void 0, {
|
|
1702
|
+
item: !!item,
|
|
1703
|
+
active: !exclude ? Array.isArray(value) ? value.includes(item?.value) : internalValue === item.value : false,
|
|
1704
|
+
exclude: exclude && Array.isArray(value) ? !value.includes(item?.value) : ""
|
|
1705
|
+
});
|
|
1706
|
+
const mappingStyle = React10.useMemo(() => {
|
|
1707
|
+
if (!exclude) {
|
|
1708
|
+
const checked = options.filter((opt) => Array.isArray(value) ? value.includes(opt.value) : internalValue === opt.value);
|
|
1709
|
+
return checked.map((opt, index) => ({
|
|
1710
|
+
...opt,
|
|
1711
|
+
index,
|
|
1712
|
+
style: {
|
|
1713
|
+
borderTopLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1714
|
+
borderBottomLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1715
|
+
borderTopRightRadius: index === checked.length - 1 ? "var(--group-border-radius, 0px)" : 0,
|
|
1716
|
+
borderBottomRightRadius: index === checked.length - 1 ? "var(--group-border-radius, 0px)" : 0
|
|
1717
|
+
}
|
|
1718
|
+
}));
|
|
1719
|
+
}
|
|
1720
|
+
const diference = options.filter((opt) => Array.isArray(value) ? !value.includes(opt.value) : internalValue !== opt.value);
|
|
1721
|
+
return diference.map((opt, index) => ({
|
|
1722
|
+
...opt,
|
|
1723
|
+
index,
|
|
1724
|
+
style: {
|
|
1725
|
+
borderTopLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1726
|
+
borderBottomLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1727
|
+
borderTopRightRadius: index === diference.length - 1 ? "var(--group-border-radius, 0px)" : 0,
|
|
1728
|
+
borderBottomRightRadius: index === diference.length - 1 ? "var(--group-border-radius, 0px)" : 0
|
|
1729
|
+
}
|
|
1730
|
+
}));
|
|
1731
|
+
}, [exclude, value, options]);
|
|
1682
1732
|
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1683
1733
|
"div",
|
|
1684
1734
|
{
|
|
1685
1735
|
className: groupVariants({ variant, color, type }),
|
|
1686
1736
|
"data-testid": "yr3Group",
|
|
1687
|
-
style: composeStyles(
|
|
1688
|
-
children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1737
|
+
style: composeStyles(properties.group?.ui, properties.group?.style),
|
|
1738
|
+
children: options.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1689
1739
|
"div",
|
|
1690
1740
|
{
|
|
1691
1741
|
"data-testid": "yr3Group-item",
|
|
1692
|
-
className:
|
|
1693
|
-
onClick: () => onChange?.(opt.value),
|
|
1694
|
-
style: composeStyles(
|
|
1695
|
-
children: opt.label
|
|
1742
|
+
className: clasess(opt),
|
|
1743
|
+
onClick: () => (!opt.disabled && !exclude || exclude && mappingStyle?.find((e) => e.value === opt.value)?.index === 0) && onChange?.(opt.value),
|
|
1744
|
+
style: composeStyles(properties.item?.ui, { ...properties.item?.style, ...mappingStyle?.find((o) => o.value === opt.value)?.style }),
|
|
1745
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { ...properties.item?.text, children: opt.label })
|
|
1696
1746
|
},
|
|
1697
1747
|
opt.value
|
|
1698
1748
|
))
|
|
@@ -1862,11 +1912,12 @@ var Input = React12.forwardRef(
|
|
|
1862
1912
|
defaultValue,
|
|
1863
1913
|
onChange,
|
|
1864
1914
|
variant = "outlined",
|
|
1865
|
-
error =
|
|
1915
|
+
error = "ce un errore",
|
|
1916
|
+
separatorCurrency = ",",
|
|
1866
1917
|
ui,
|
|
1867
1918
|
style,
|
|
1868
1919
|
propsComponent = initiaPropsComponent,
|
|
1869
|
-
|
|
1920
|
+
pattern = "text",
|
|
1870
1921
|
color = "primary",
|
|
1871
1922
|
size = "auto",
|
|
1872
1923
|
...props
|
|
@@ -1876,20 +1927,24 @@ var Input = React12.forwardRef(
|
|
|
1876
1927
|
const isControlled = value !== void 0;
|
|
1877
1928
|
const currentValue = isControlled ? value : internalValue;
|
|
1878
1929
|
const isActive = focused || !!currentValue;
|
|
1879
|
-
const checkPattern = (
|
|
1880
|
-
switch (
|
|
1930
|
+
const checkPattern = (type, value2) => {
|
|
1931
|
+
switch (type) {
|
|
1881
1932
|
case "email":
|
|
1882
1933
|
return /^[\w.-]+@[\w.-]+\.\w{2,}$/.test(value2);
|
|
1883
1934
|
case "phone":
|
|
1884
1935
|
return /^\d{10}$/.test(value2);
|
|
1885
1936
|
case "number":
|
|
1886
1937
|
return /^\d+$/.test(value2);
|
|
1938
|
+
case "currency":
|
|
1939
|
+
if (separatorCurrency === ",") return /^\d+(\,\d{0,2})?$/.test(value2);
|
|
1940
|
+
if (separatorCurrency === ".") return /^\d+(\.\d{0,2})?$/.test(value2);
|
|
1887
1941
|
default:
|
|
1888
1942
|
return true;
|
|
1889
1943
|
}
|
|
1890
1944
|
};
|
|
1891
1945
|
const handleChange = (e) => {
|
|
1892
1946
|
const newValue = e.target.value;
|
|
1947
|
+
if (newValue && !checkPattern(pattern, newValue)) return;
|
|
1893
1948
|
if (!isControlled) {
|
|
1894
1949
|
setInternalValue(newValue);
|
|
1895
1950
|
}
|
|
@@ -1911,10 +1966,10 @@ var Input = React12.forwardRef(
|
|
|
1911
1966
|
{
|
|
1912
1967
|
ref,
|
|
1913
1968
|
value: currentValue,
|
|
1914
|
-
|
|
1969
|
+
inputMode: pattern === "currency" ? "numeric" : pattern === "phone" ? "tel" : void 0,
|
|
1915
1970
|
autoComplete: "off",
|
|
1971
|
+
type: "text",
|
|
1916
1972
|
onChange: handleChange,
|
|
1917
|
-
onKeyDown: (e) => checkPattern(type, e.key),
|
|
1918
1973
|
onFocus: () => setFocused(true),
|
|
1919
1974
|
onBlur: () => setFocused(false),
|
|
1920
1975
|
className: classes,
|
|
@@ -2547,104 +2602,7 @@ var Radio = ({
|
|
|
2547
2602
|
};
|
|
2548
2603
|
|
|
2549
2604
|
// src/components/Select/Select.tsx
|
|
2550
|
-
var React22 = __toESM(require("react"), 1);
|
|
2551
|
-
|
|
2552
|
-
// src/theme/ThemeProvider.tsx
|
|
2553
|
-
var React20 = __toESM(require("react"), 1);
|
|
2554
|
-
|
|
2555
|
-
// src/theme/notistackContext.tsx
|
|
2556
2605
|
var React19 = __toESM(require("react"), 1);
|
|
2557
|
-
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2558
|
-
var NotistackContext = React19.createContext(null);
|
|
2559
|
-
var NotistackProvider = ({ children }) => {
|
|
2560
|
-
const [snacks, setSnacks] = React19.useState([]);
|
|
2561
|
-
const notistack = (snack) => {
|
|
2562
|
-
const id = Date.now();
|
|
2563
|
-
setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
|
|
2564
|
-
const duration = snack.duration || 3e3;
|
|
2565
|
-
const exitDuration = 300;
|
|
2566
|
-
setTimeout(() => {
|
|
2567
|
-
setSnacks(
|
|
2568
|
-
(prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
|
|
2569
|
-
);
|
|
2570
|
-
}, duration);
|
|
2571
|
-
setTimeout(() => {
|
|
2572
|
-
setSnacks((prev) => prev.filter((s) => s.id !== id));
|
|
2573
|
-
}, duration + exitDuration);
|
|
2574
|
-
};
|
|
2575
|
-
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
|
|
2576
|
-
children,
|
|
2577
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Notistack, { ...snack }, snack.id)) })
|
|
2578
|
-
] });
|
|
2579
|
-
};
|
|
2580
|
-
var useNotistack = () => {
|
|
2581
|
-
const ctx = React19.useContext(NotistackContext);
|
|
2582
|
-
if (!ctx) {
|
|
2583
|
-
throw new Error("NotistackProvider missing");
|
|
2584
|
-
}
|
|
2585
|
-
return ctx;
|
|
2586
|
-
};
|
|
2587
|
-
|
|
2588
|
-
// src/theme/ThemeProvider.tsx
|
|
2589
|
-
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2590
|
-
var ThemeContext = React20.createContext(null);
|
|
2591
|
-
var ThemeProvider = ({ theme, children }) => {
|
|
2592
|
-
React20.useEffect(() => {
|
|
2593
|
-
applyTheme(theme);
|
|
2594
|
-
}, [theme]);
|
|
2595
|
-
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BackdropProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NotistackProvider, { children }) }) });
|
|
2596
|
-
};
|
|
2597
|
-
var useTheme = () => React20.useContext(ThemeContext);
|
|
2598
|
-
|
|
2599
|
-
// src/theme/tokens.ts
|
|
2600
|
-
var baseTokens = {
|
|
2601
|
-
colors: {
|
|
2602
|
-
primary: "#6C5CE7",
|
|
2603
|
-
secondary: "#00CEC9",
|
|
2604
|
-
background: "#0f0f1a",
|
|
2605
|
-
surface: "#1a1a2e",
|
|
2606
|
-
textPrimary: "#ffffff",
|
|
2607
|
-
textSecondary: "#b2bec3"
|
|
2608
|
-
},
|
|
2609
|
-
spacing: (factor) => `${factor * 8}px`,
|
|
2610
|
-
radius: {
|
|
2611
|
-
sm: "6px",
|
|
2612
|
-
md: "12px",
|
|
2613
|
-
lg: "20px"
|
|
2614
|
-
}
|
|
2615
|
-
};
|
|
2616
|
-
|
|
2617
|
-
// src/theme/useMediaQuery.tsx
|
|
2618
|
-
var React21 = __toESM(require("react"), 1);
|
|
2619
|
-
function useMediaQuery(query) {
|
|
2620
|
-
const theme = useTheme();
|
|
2621
|
-
const computedQuery = typeof query === "function" ? query(theme) : query;
|
|
2622
|
-
const [matches, setMatches] = React21.useState(() => {
|
|
2623
|
-
if (typeof window === "undefined") return false;
|
|
2624
|
-
return window.matchMedia(computedQuery).matches;
|
|
2625
|
-
});
|
|
2626
|
-
React21.useEffect(() => {
|
|
2627
|
-
if (typeof window === "undefined") return;
|
|
2628
|
-
const media = window.matchMedia(computedQuery);
|
|
2629
|
-
const listener = () => setMatches(media.matches);
|
|
2630
|
-
media.addEventListener("change", listener);
|
|
2631
|
-
return () => media.removeEventListener("change", listener);
|
|
2632
|
-
}, [computedQuery]);
|
|
2633
|
-
return matches;
|
|
2634
|
-
}
|
|
2635
|
-
function useBreakpointValue(values) {
|
|
2636
|
-
const xs = useMediaQuery(`(min-width: ${breakpoints.xs}px)`);
|
|
2637
|
-
const sm = useMediaQuery(`(min-width: ${breakpoints.sm}px)`);
|
|
2638
|
-
const md = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
|
|
2639
|
-
const lg = useMediaQuery(`(min-width: ${breakpoints.lg}px)`);
|
|
2640
|
-
const xl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
|
|
2641
|
-
if (xl && values.xl !== void 0) return values.xl;
|
|
2642
|
-
if (lg && values.lg !== void 0) return values.lg;
|
|
2643
|
-
if (md && values.md !== void 0) return values.md;
|
|
2644
|
-
if (sm && values.sm !== void 0) return values.sm;
|
|
2645
|
-
if (xs && values.xs !== void 0) return values.xs;
|
|
2646
|
-
return void 0;
|
|
2647
|
-
}
|
|
2648
2606
|
|
|
2649
2607
|
// src/components/Select/select.variants.ts
|
|
2650
2608
|
var selectVariants = createVariants({
|
|
@@ -2704,7 +2662,7 @@ var selectIconVariants = createVariants({
|
|
|
2704
2662
|
});
|
|
2705
2663
|
|
|
2706
2664
|
// src/components/Select/Select.tsx
|
|
2707
|
-
var
|
|
2665
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2708
2666
|
var initiaPropsComponent3 = {
|
|
2709
2667
|
control: {
|
|
2710
2668
|
variant: "outlined",
|
|
@@ -2744,36 +2702,35 @@ var initiaPropsComponent3 = {
|
|
|
2744
2702
|
}
|
|
2745
2703
|
};
|
|
2746
2704
|
var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
|
|
2747
|
-
const [open, setOpen] =
|
|
2748
|
-
const [valueState, setValueState] =
|
|
2749
|
-
const ref =
|
|
2705
|
+
const [open, setOpen] = React19.useState(false);
|
|
2706
|
+
const [valueState, setValueState] = React19.useState(value || defaultValue || null);
|
|
2707
|
+
const ref = React19.useRef(null);
|
|
2750
2708
|
useClickAway(ref, () => setOpen(false));
|
|
2751
|
-
const theme = useTheme();
|
|
2752
2709
|
const properties = mergeDeep(initiaPropsComponent3, propsComponent || {});
|
|
2753
2710
|
const classesIcon = selectIconVariants({ color: properties?.icon?.color, animated: open, open });
|
|
2754
2711
|
const classes = selectVariants({ wrapper: true });
|
|
2755
|
-
return /* @__PURE__ */ (0,
|
|
2756
|
-
/* @__PURE__ */ (0,
|
|
2712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: classes, ref, children: [
|
|
2713
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2757
2714
|
Input,
|
|
2758
2715
|
{
|
|
2759
2716
|
label,
|
|
2760
2717
|
variant: "base",
|
|
2761
2718
|
disabled: true,
|
|
2762
|
-
value: valueState,
|
|
2719
|
+
value: options.find((opt) => opt.value === valueState)?.label || "",
|
|
2763
2720
|
propsComponent: {
|
|
2764
2721
|
control: properties?.control,
|
|
2765
2722
|
label: properties?.label
|
|
2766
2723
|
}
|
|
2767
2724
|
}
|
|
2768
2725
|
),
|
|
2769
|
-
/* @__PURE__ */ (0,
|
|
2726
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2770
2727
|
"div",
|
|
2771
2728
|
{
|
|
2772
2729
|
className: classesIcon,
|
|
2773
2730
|
style: properties?.icon?.style,
|
|
2774
2731
|
onClick: () => setOpen((prev) => !prev),
|
|
2775
2732
|
"data-testid": "yr3Select-icon",
|
|
2776
|
-
children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0,
|
|
2733
|
+
children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2777
2734
|
IconDown,
|
|
2778
2735
|
{
|
|
2779
2736
|
width: properties?.icon?.style?.width,
|
|
@@ -2784,13 +2741,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
|
|
|
2784
2741
|
)
|
|
2785
2742
|
}
|
|
2786
2743
|
),
|
|
2787
|
-
open && /* @__PURE__ */ (0,
|
|
2744
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2788
2745
|
"div",
|
|
2789
2746
|
{
|
|
2790
2747
|
className: "yr3Select--menu",
|
|
2791
2748
|
style: composeStyles(properties?.menu?.ui, properties?.menu?.style),
|
|
2792
2749
|
"data-testid": "yr3Select-menu",
|
|
2793
|
-
children: options.map((opt) => /* @__PURE__ */ (0,
|
|
2750
|
+
children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2794
2751
|
"div",
|
|
2795
2752
|
{
|
|
2796
2753
|
className: "yr3Select--option",
|
|
@@ -2812,7 +2769,7 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
|
|
|
2812
2769
|
onChange?.(event, opt.value);
|
|
2813
2770
|
},
|
|
2814
2771
|
style: composeStyles(properties?.menu?.options?.ui, properties?.menu?.options?.style),
|
|
2815
|
-
children: /* @__PURE__ */ (0,
|
|
2772
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
|
|
2816
2773
|
},
|
|
2817
2774
|
opt.value
|
|
2818
2775
|
))
|
|
@@ -2822,8 +2779,15 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
|
|
|
2822
2779
|
};
|
|
2823
2780
|
|
|
2824
2781
|
// src/components/Slide/Slide.tsx
|
|
2825
|
-
var
|
|
2826
|
-
var
|
|
2782
|
+
var React20 = __toESM(require("react"), 1);
|
|
2783
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2784
|
+
var initialPropsComponent4 = {
|
|
2785
|
+
slide: {
|
|
2786
|
+
ui: {},
|
|
2787
|
+
style: {}
|
|
2788
|
+
},
|
|
2789
|
+
box: {}
|
|
2790
|
+
};
|
|
2827
2791
|
var Slide = ({
|
|
2828
2792
|
in: inProp,
|
|
2829
2793
|
children,
|
|
@@ -2832,12 +2796,14 @@ var Slide = ({
|
|
|
2832
2796
|
onTransitionEnd,
|
|
2833
2797
|
propsComponent
|
|
2834
2798
|
}) => {
|
|
2799
|
+
const properties = mergeDeep(initialPropsComponent4, propsComponent || {});
|
|
2835
2800
|
const bemContent = bem("yr3Slide--content");
|
|
2836
2801
|
const classNameContent = bemContent(void 0, {
|
|
2837
2802
|
[direction]: true,
|
|
2838
|
-
"in": !!inProp
|
|
2803
|
+
"in": !!inProp,
|
|
2804
|
+
"out": !inProp
|
|
2839
2805
|
});
|
|
2840
|
-
|
|
2806
|
+
React20.useEffect(() => {
|
|
2841
2807
|
let timeoutId;
|
|
2842
2808
|
if (inProp) {
|
|
2843
2809
|
timeoutId = setTimeout(() => {
|
|
@@ -2846,20 +2812,20 @@ var Slide = ({
|
|
|
2846
2812
|
}
|
|
2847
2813
|
return () => clearTimeout(timeoutId);
|
|
2848
2814
|
}, [inProp, duration, onTransitionEnd]);
|
|
2849
|
-
const uiStyleContent = uiStyle({ ...
|
|
2850
|
-
return /* @__PURE__ */ (0,
|
|
2815
|
+
const uiStyleContent = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
|
|
2816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2851
2817
|
"div",
|
|
2852
2818
|
{
|
|
2853
2819
|
className: "yr3Slide",
|
|
2854
|
-
style:
|
|
2820
|
+
style: composeStyles(),
|
|
2855
2821
|
"data-testid": "yr3Slide",
|
|
2856
|
-
children: /* @__PURE__ */ (0,
|
|
2822
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2857
2823
|
"div",
|
|
2858
2824
|
{
|
|
2859
2825
|
className: classNameContent,
|
|
2860
|
-
style: composeStyles(uiStyleContent,
|
|
2826
|
+
style: composeStyles(uiStyleContent, properties?.slide?.style || {}),
|
|
2861
2827
|
"data-testid": "yr3Slide-content",
|
|
2862
|
-
children: /* @__PURE__ */ (0,
|
|
2828
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
|
|
2863
2829
|
}
|
|
2864
2830
|
)
|
|
2865
2831
|
}
|
|
@@ -2867,7 +2833,7 @@ var Slide = ({
|
|
|
2867
2833
|
};
|
|
2868
2834
|
|
|
2869
2835
|
// src/components/Switch/Switch.tsx
|
|
2870
|
-
var
|
|
2836
|
+
var React21 = __toESM(require("react"), 1);
|
|
2871
2837
|
|
|
2872
2838
|
// src/components/Switch/switch.variants.ts
|
|
2873
2839
|
var switchVariants = createVariants({
|
|
@@ -2904,7 +2870,7 @@ var switchVariants = createVariants({
|
|
|
2904
2870
|
});
|
|
2905
2871
|
|
|
2906
2872
|
// src/components/Switch/Switch.tsx
|
|
2907
|
-
var
|
|
2873
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2908
2874
|
var Switch = ({
|
|
2909
2875
|
checked,
|
|
2910
2876
|
defaultChecked,
|
|
@@ -2916,7 +2882,7 @@ var Switch = ({
|
|
|
2916
2882
|
placement = "end",
|
|
2917
2883
|
propsComponent
|
|
2918
2884
|
}) => {
|
|
2919
|
-
const [internal, setInternal] =
|
|
2885
|
+
const [internal, setInternal] = React21.useState(defaultChecked || false);
|
|
2920
2886
|
const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal, placement });
|
|
2921
2887
|
const isControlled = checked !== void 0;
|
|
2922
2888
|
const value = isControlled ? checked : internal;
|
|
@@ -2924,13 +2890,13 @@ var Switch = ({
|
|
|
2924
2890
|
if (!isControlled) setInternal(e.target.checked);
|
|
2925
2891
|
onChange?.(e, e.target.checked);
|
|
2926
2892
|
};
|
|
2927
|
-
return /* @__PURE__ */ (0,
|
|
2893
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2928
2894
|
"label",
|
|
2929
2895
|
{
|
|
2930
2896
|
className: classname,
|
|
2931
2897
|
"data-testid": "yr3Switch",
|
|
2932
2898
|
children: [
|
|
2933
|
-
/* @__PURE__ */ (0,
|
|
2899
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2934
2900
|
"input",
|
|
2935
2901
|
{
|
|
2936
2902
|
type: "checkbox",
|
|
@@ -2939,8 +2905,8 @@ var Switch = ({
|
|
|
2939
2905
|
disabled
|
|
2940
2906
|
}
|
|
2941
2907
|
),
|
|
2942
|
-
/* @__PURE__ */ (0,
|
|
2943
|
-
/* @__PURE__ */ (0,
|
|
2908
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "yr3Switch--thumb" }) }),
|
|
2909
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2944
2910
|
"span",
|
|
2945
2911
|
{
|
|
2946
2912
|
className: "yr3Switch--label",
|
|
@@ -2955,9 +2921,9 @@ var Switch = ({
|
|
|
2955
2921
|
};
|
|
2956
2922
|
|
|
2957
2923
|
// src/Icons/IconSearch.tsx
|
|
2958
|
-
var
|
|
2924
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2959
2925
|
var IconSearch = (props) => {
|
|
2960
|
-
return /* @__PURE__ */ (0,
|
|
2926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { width: props.width || "64px", height: props.height || "64px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2961
2927
|
"path",
|
|
2962
2928
|
{
|
|
2963
2929
|
d: "M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z",
|
|
@@ -2969,6 +2935,103 @@ var IconSearch = (props) => {
|
|
|
2969
2935
|
) });
|
|
2970
2936
|
};
|
|
2971
2937
|
|
|
2938
|
+
// src/theme/ThemeProvider.tsx
|
|
2939
|
+
var React23 = __toESM(require("react"), 1);
|
|
2940
|
+
|
|
2941
|
+
// src/theme/notistackContext.tsx
|
|
2942
|
+
var React22 = __toESM(require("react"), 1);
|
|
2943
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2944
|
+
var NotistackContext = React22.createContext(null);
|
|
2945
|
+
var NotistackProvider = ({ children }) => {
|
|
2946
|
+
const [snacks, setSnacks] = React22.useState([]);
|
|
2947
|
+
const notistack = (snack) => {
|
|
2948
|
+
const id = Date.now();
|
|
2949
|
+
setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
|
|
2950
|
+
const duration = snack.duration || 3e3;
|
|
2951
|
+
const exitDuration = 300;
|
|
2952
|
+
setTimeout(() => {
|
|
2953
|
+
setSnacks(
|
|
2954
|
+
(prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
|
|
2955
|
+
);
|
|
2956
|
+
}, duration);
|
|
2957
|
+
setTimeout(() => {
|
|
2958
|
+
setSnacks((prev) => prev.filter((s) => s.id !== id));
|
|
2959
|
+
}, duration + exitDuration);
|
|
2960
|
+
};
|
|
2961
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
|
|
2962
|
+
children,
|
|
2963
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Notistack, { ...snack }, snack.id)) })
|
|
2964
|
+
] });
|
|
2965
|
+
};
|
|
2966
|
+
var useNotistack = () => {
|
|
2967
|
+
const ctx = React22.useContext(NotistackContext);
|
|
2968
|
+
if (!ctx) {
|
|
2969
|
+
throw new Error("NotistackProvider missing");
|
|
2970
|
+
}
|
|
2971
|
+
return ctx;
|
|
2972
|
+
};
|
|
2973
|
+
|
|
2974
|
+
// src/theme/ThemeProvider.tsx
|
|
2975
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2976
|
+
var ThemeContext = React23.createContext(null);
|
|
2977
|
+
var ThemeProvider = ({ theme, children }) => {
|
|
2978
|
+
React23.useEffect(() => {
|
|
2979
|
+
applyTheme(theme);
|
|
2980
|
+
}, [theme]);
|
|
2981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(BackdropProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NotistackProvider, { children }) }) });
|
|
2982
|
+
};
|
|
2983
|
+
var useTheme = () => React23.useContext(ThemeContext);
|
|
2984
|
+
|
|
2985
|
+
// src/theme/tokens.ts
|
|
2986
|
+
var baseTokens = {
|
|
2987
|
+
colors: {
|
|
2988
|
+
primary: "#6C5CE7",
|
|
2989
|
+
secondary: "#00CEC9",
|
|
2990
|
+
background: "#0f0f1a",
|
|
2991
|
+
surface: "#1a1a2e",
|
|
2992
|
+
textPrimary: "#ffffff",
|
|
2993
|
+
textSecondary: "#b2bec3"
|
|
2994
|
+
},
|
|
2995
|
+
spacing: (factor) => `${factor * 8}px`,
|
|
2996
|
+
radius: {
|
|
2997
|
+
sm: "6px",
|
|
2998
|
+
md: "12px",
|
|
2999
|
+
lg: "20px"
|
|
3000
|
+
}
|
|
3001
|
+
};
|
|
3002
|
+
|
|
3003
|
+
// src/theme/useMediaQuery.tsx
|
|
3004
|
+
var React24 = __toESM(require("react"), 1);
|
|
3005
|
+
function useMediaQuery(query) {
|
|
3006
|
+
const theme = useTheme();
|
|
3007
|
+
const computedQuery = typeof query === "function" ? query(theme) : query;
|
|
3008
|
+
const [matches, setMatches] = React24.useState(() => {
|
|
3009
|
+
if (typeof window === "undefined") return false;
|
|
3010
|
+
return window.matchMedia(computedQuery).matches;
|
|
3011
|
+
});
|
|
3012
|
+
React24.useEffect(() => {
|
|
3013
|
+
if (typeof window === "undefined") return;
|
|
3014
|
+
const media = window.matchMedia(computedQuery);
|
|
3015
|
+
const listener = () => setMatches(media.matches);
|
|
3016
|
+
media.addEventListener("change", listener);
|
|
3017
|
+
return () => media.removeEventListener("change", listener);
|
|
3018
|
+
}, [computedQuery]);
|
|
3019
|
+
return matches;
|
|
3020
|
+
}
|
|
3021
|
+
function useBreakpointValue(values) {
|
|
3022
|
+
const xs = useMediaQuery(`(min-width: ${breakpoints.xs}px)`);
|
|
3023
|
+
const sm = useMediaQuery(`(min-width: ${breakpoints.sm}px)`);
|
|
3024
|
+
const md = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
|
|
3025
|
+
const lg = useMediaQuery(`(min-width: ${breakpoints.lg}px)`);
|
|
3026
|
+
const xl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
|
|
3027
|
+
if (xl && values.xl !== void 0) return values.xl;
|
|
3028
|
+
if (lg && values.lg !== void 0) return values.lg;
|
|
3029
|
+
if (md && values.md !== void 0) return values.md;
|
|
3030
|
+
if (sm && values.sm !== void 0) return values.sm;
|
|
3031
|
+
if (xs && values.xs !== void 0) return values.xs;
|
|
3032
|
+
return void 0;
|
|
3033
|
+
}
|
|
3034
|
+
|
|
2972
3035
|
// src/hooks/usePlaces.ts
|
|
2973
3036
|
var import_autocomplete_places2 = require("@yr3/autocomplete-places");
|
|
2974
3037
|
var usePlaces = ({ input, language, apiKey, provider }) => {
|
|
@@ -3083,6 +3146,7 @@ initTheme();
|
|
|
3083
3146
|
getNumberPhone,
|
|
3084
3147
|
hexToRgb,
|
|
3085
3148
|
initTheme,
|
|
3149
|
+
inputCurrency,
|
|
3086
3150
|
isEmpty,
|
|
3087
3151
|
lighten,
|
|
3088
3152
|
mergeDeep,
|