@yr3/ui 1.0.15 → 1.0.17
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 +33 -13
- 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 +236 -145
- package/dist/index.d.cts +13 -3
- package/dist/index.d.ts +13 -3
- package/dist/index.js +235 -145
- package/dist/styles/index.css +37 -13
- package/dist/styles/index.css.map +1 -1
- package/package.json +1 -1
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,
|
|
@@ -1652,16 +1662,24 @@ var groupVariants = createVariants({
|
|
|
1652
1662
|
|
|
1653
1663
|
// src/components/Group/Group.tsx
|
|
1654
1664
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1655
|
-
var initialComponents = {
|
|
1665
|
+
var initialComponents = (color) => ({
|
|
1656
1666
|
group: {
|
|
1657
1667
|
ui: {},
|
|
1658
1668
|
style: {}
|
|
1659
1669
|
},
|
|
1660
1670
|
item: {
|
|
1671
|
+
variant: "text",
|
|
1661
1672
|
ui: {},
|
|
1662
|
-
style: {}
|
|
1673
|
+
style: {},
|
|
1674
|
+
text: {
|
|
1675
|
+
variant: "caption",
|
|
1676
|
+
color,
|
|
1677
|
+
as: "span",
|
|
1678
|
+
ui: {},
|
|
1679
|
+
style: {}
|
|
1680
|
+
}
|
|
1663
1681
|
}
|
|
1664
|
-
};
|
|
1682
|
+
});
|
|
1665
1683
|
var Group = ({
|
|
1666
1684
|
options,
|
|
1667
1685
|
value,
|
|
@@ -1669,8 +1687,13 @@ var Group = ({
|
|
|
1669
1687
|
variant,
|
|
1670
1688
|
type = "rounded",
|
|
1671
1689
|
color = "primary",
|
|
1672
|
-
|
|
1690
|
+
exclude = false,
|
|
1691
|
+
propsComponent
|
|
1673
1692
|
}) => {
|
|
1693
|
+
const properties = mergeDeep(
|
|
1694
|
+
initialComponents(type === "rounded" ? "text" : color),
|
|
1695
|
+
propsComponent || {}
|
|
1696
|
+
);
|
|
1674
1697
|
const [internalValue, setInternalValue] = React10.useState(null);
|
|
1675
1698
|
const isControlled = value !== void 0;
|
|
1676
1699
|
React10.useEffect(() => {
|
|
@@ -1679,20 +1702,74 @@ var Group = ({
|
|
|
1679
1702
|
}
|
|
1680
1703
|
}, [value, isControlled]);
|
|
1681
1704
|
const classItems = bem("yr3Group--item");
|
|
1705
|
+
const clasess = (item) => classItems(void 0, {
|
|
1706
|
+
item: !!item,
|
|
1707
|
+
active: !exclude ? Array.isArray(value) ? value.includes(item?.value) : internalValue === item.value : false,
|
|
1708
|
+
exclude: exclude && Array.isArray(value) ? !value.includes(item?.value) : ""
|
|
1709
|
+
});
|
|
1710
|
+
const mappingStyle = React10.useMemo(() => {
|
|
1711
|
+
if (variant !== "filled") return options.map((opt, index) => ({
|
|
1712
|
+
...opt,
|
|
1713
|
+
index,
|
|
1714
|
+
ui: {}
|
|
1715
|
+
}));
|
|
1716
|
+
if (!exclude) {
|
|
1717
|
+
const checked = options.filter((opt) => Array.isArray(value) ? value.includes(opt.value) : internalValue === opt.value);
|
|
1718
|
+
return checked.map((opt, index) => ({
|
|
1719
|
+
...opt,
|
|
1720
|
+
index,
|
|
1721
|
+
style: {
|
|
1722
|
+
borderTopLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1723
|
+
borderBottomLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1724
|
+
borderTopRightRadius: index === checked.length - 1 ? "var(--group-border-radius, 0px)" : 0,
|
|
1725
|
+
borderBottomRightRadius: index === checked.length - 1 ? "var(--group-border-radius, 0px)" : 0
|
|
1726
|
+
}
|
|
1727
|
+
}));
|
|
1728
|
+
}
|
|
1729
|
+
const diference = options.filter((opt) => Array.isArray(value) ? !value.includes(opt.value) : internalValue !== opt.value);
|
|
1730
|
+
return diference.map((opt, index) => ({
|
|
1731
|
+
...opt,
|
|
1732
|
+
index,
|
|
1733
|
+
style: {
|
|
1734
|
+
borderTopLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1735
|
+
borderBottomLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1736
|
+
borderTopRightRadius: index === diference.length - 1 ? "var(--group-border-radius, 0px)" : 0,
|
|
1737
|
+
borderBottomRightRadius: index === diference.length - 1 ? "var(--group-border-radius, 0px)" : 0
|
|
1738
|
+
}
|
|
1739
|
+
}));
|
|
1740
|
+
}, [exclude, value, options, type]);
|
|
1682
1741
|
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1683
1742
|
"div",
|
|
1684
1743
|
{
|
|
1685
1744
|
className: groupVariants({ variant, color, type }),
|
|
1686
1745
|
"data-testid": "yr3Group",
|
|
1687
|
-
style: composeStyles(
|
|
1688
|
-
children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1746
|
+
style: composeStyles(properties.group?.ui, properties.group?.style),
|
|
1747
|
+
children: options.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1689
1748
|
"div",
|
|
1690
1749
|
{
|
|
1691
1750
|
"data-testid": "yr3Group-item",
|
|
1692
|
-
className:
|
|
1693
|
-
onClick: () => onChange?.(opt.value),
|
|
1694
|
-
style: composeStyles(
|
|
1695
|
-
|
|
1751
|
+
className: clasess(opt),
|
|
1752
|
+
onClick: () => (!opt.disabled && !exclude || exclude && mappingStyle?.find((e) => e.value === opt.value)?.index === 0) && onChange?.(opt.value),
|
|
1753
|
+
style: composeStyles(
|
|
1754
|
+
{
|
|
1755
|
+
...properties.item?.ui,
|
|
1756
|
+
...opt?.ui,
|
|
1757
|
+
...mappingStyle?.find((o) => o.value === opt.value)?.ui
|
|
1758
|
+
},
|
|
1759
|
+
{
|
|
1760
|
+
...properties.item?.style,
|
|
1761
|
+
...opt?.style,
|
|
1762
|
+
...mappingStyle?.find((o) => o.value === opt.value)?.style
|
|
1763
|
+
}
|
|
1764
|
+
),
|
|
1765
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1766
|
+
Text,
|
|
1767
|
+
{
|
|
1768
|
+
...properties.item?.text,
|
|
1769
|
+
color: opt.value === value ? opt?.active : properties.item?.text?.color || color,
|
|
1770
|
+
children: opt.label
|
|
1771
|
+
}
|
|
1772
|
+
)
|
|
1696
1773
|
},
|
|
1697
1774
|
opt.value
|
|
1698
1775
|
))
|
|
@@ -1862,11 +1939,12 @@ var Input = React12.forwardRef(
|
|
|
1862
1939
|
defaultValue,
|
|
1863
1940
|
onChange,
|
|
1864
1941
|
variant = "outlined",
|
|
1865
|
-
error =
|
|
1942
|
+
error = "ce un errore",
|
|
1943
|
+
separatorCurrency = ",",
|
|
1866
1944
|
ui,
|
|
1867
1945
|
style,
|
|
1868
1946
|
propsComponent = initiaPropsComponent,
|
|
1869
|
-
|
|
1947
|
+
pattern = "text",
|
|
1870
1948
|
color = "primary",
|
|
1871
1949
|
size = "auto",
|
|
1872
1950
|
...props
|
|
@@ -1876,20 +1954,24 @@ var Input = React12.forwardRef(
|
|
|
1876
1954
|
const isControlled = value !== void 0;
|
|
1877
1955
|
const currentValue = isControlled ? value : internalValue;
|
|
1878
1956
|
const isActive = focused || !!currentValue;
|
|
1879
|
-
const checkPattern = (
|
|
1880
|
-
switch (
|
|
1957
|
+
const checkPattern = (type, value2) => {
|
|
1958
|
+
switch (type) {
|
|
1881
1959
|
case "email":
|
|
1882
1960
|
return /^[\w.-]+@[\w.-]+\.\w{2,}$/.test(value2);
|
|
1883
1961
|
case "phone":
|
|
1884
1962
|
return /^\d{10}$/.test(value2);
|
|
1885
1963
|
case "number":
|
|
1886
1964
|
return /^\d+$/.test(value2);
|
|
1965
|
+
case "currency":
|
|
1966
|
+
if (separatorCurrency === ",") return /^\d+(\,\d{0,2})?$/.test(value2);
|
|
1967
|
+
if (separatorCurrency === ".") return /^\d+(\.\d{0,2})?$/.test(value2);
|
|
1887
1968
|
default:
|
|
1888
1969
|
return true;
|
|
1889
1970
|
}
|
|
1890
1971
|
};
|
|
1891
1972
|
const handleChange = (e) => {
|
|
1892
1973
|
const newValue = e.target.value;
|
|
1974
|
+
if (newValue && !checkPattern(pattern, newValue)) return;
|
|
1893
1975
|
if (!isControlled) {
|
|
1894
1976
|
setInternalValue(newValue);
|
|
1895
1977
|
}
|
|
@@ -1911,10 +1993,10 @@ var Input = React12.forwardRef(
|
|
|
1911
1993
|
{
|
|
1912
1994
|
ref,
|
|
1913
1995
|
value: currentValue,
|
|
1914
|
-
|
|
1996
|
+
inputMode: pattern === "currency" ? "numeric" : pattern === "phone" ? "tel" : void 0,
|
|
1915
1997
|
autoComplete: "off",
|
|
1998
|
+
type: "text",
|
|
1916
1999
|
onChange: handleChange,
|
|
1917
|
-
onKeyDown: (e) => checkPattern(type, e.key),
|
|
1918
2000
|
onFocus: () => setFocused(true),
|
|
1919
2001
|
onBlur: () => setFocused(false),
|
|
1920
2002
|
className: classes,
|
|
@@ -2547,104 +2629,7 @@ var Radio = ({
|
|
|
2547
2629
|
};
|
|
2548
2630
|
|
|
2549
2631
|
// 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
2632
|
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
2633
|
|
|
2649
2634
|
// src/components/Select/select.variants.ts
|
|
2650
2635
|
var selectVariants = createVariants({
|
|
@@ -2704,7 +2689,7 @@ var selectIconVariants = createVariants({
|
|
|
2704
2689
|
});
|
|
2705
2690
|
|
|
2706
2691
|
// src/components/Select/Select.tsx
|
|
2707
|
-
var
|
|
2692
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2708
2693
|
var initiaPropsComponent3 = {
|
|
2709
2694
|
control: {
|
|
2710
2695
|
variant: "outlined",
|
|
@@ -2744,36 +2729,35 @@ var initiaPropsComponent3 = {
|
|
|
2744
2729
|
}
|
|
2745
2730
|
};
|
|
2746
2731
|
var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
|
|
2747
|
-
const [open, setOpen] =
|
|
2748
|
-
const [valueState, setValueState] =
|
|
2749
|
-
const ref =
|
|
2732
|
+
const [open, setOpen] = React19.useState(false);
|
|
2733
|
+
const [valueState, setValueState] = React19.useState(value || defaultValue || null);
|
|
2734
|
+
const ref = React19.useRef(null);
|
|
2750
2735
|
useClickAway(ref, () => setOpen(false));
|
|
2751
|
-
const theme = useTheme();
|
|
2752
2736
|
const properties = mergeDeep(initiaPropsComponent3, propsComponent || {});
|
|
2753
2737
|
const classesIcon = selectIconVariants({ color: properties?.icon?.color, animated: open, open });
|
|
2754
2738
|
const classes = selectVariants({ wrapper: true });
|
|
2755
|
-
return /* @__PURE__ */ (0,
|
|
2756
|
-
/* @__PURE__ */ (0,
|
|
2739
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: classes, ref, children: [
|
|
2740
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2757
2741
|
Input,
|
|
2758
2742
|
{
|
|
2759
2743
|
label,
|
|
2760
2744
|
variant: "base",
|
|
2761
2745
|
disabled: true,
|
|
2762
|
-
value: valueState,
|
|
2746
|
+
value: options.find((opt) => opt.value === valueState)?.label || "",
|
|
2763
2747
|
propsComponent: {
|
|
2764
2748
|
control: properties?.control,
|
|
2765
2749
|
label: properties?.label
|
|
2766
2750
|
}
|
|
2767
2751
|
}
|
|
2768
2752
|
),
|
|
2769
|
-
/* @__PURE__ */ (0,
|
|
2753
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2770
2754
|
"div",
|
|
2771
2755
|
{
|
|
2772
2756
|
className: classesIcon,
|
|
2773
2757
|
style: properties?.icon?.style,
|
|
2774
2758
|
onClick: () => setOpen((prev) => !prev),
|
|
2775
2759
|
"data-testid": "yr3Select-icon",
|
|
2776
|
-
children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0,
|
|
2760
|
+
children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2777
2761
|
IconDown,
|
|
2778
2762
|
{
|
|
2779
2763
|
width: properties?.icon?.style?.width,
|
|
@@ -2784,13 +2768,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
|
|
|
2784
2768
|
)
|
|
2785
2769
|
}
|
|
2786
2770
|
),
|
|
2787
|
-
open && /* @__PURE__ */ (0,
|
|
2771
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2788
2772
|
"div",
|
|
2789
2773
|
{
|
|
2790
2774
|
className: "yr3Select--menu",
|
|
2791
2775
|
style: composeStyles(properties?.menu?.ui, properties?.menu?.style),
|
|
2792
2776
|
"data-testid": "yr3Select-menu",
|
|
2793
|
-
children: options.map((opt) => /* @__PURE__ */ (0,
|
|
2777
|
+
children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2794
2778
|
"div",
|
|
2795
2779
|
{
|
|
2796
2780
|
className: "yr3Select--option",
|
|
@@ -2812,7 +2796,7 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
|
|
|
2812
2796
|
onChange?.(event, opt.value);
|
|
2813
2797
|
},
|
|
2814
2798
|
style: composeStyles(properties?.menu?.options?.ui, properties?.menu?.options?.style),
|
|
2815
|
-
children: /* @__PURE__ */ (0,
|
|
2799
|
+
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
2800
|
},
|
|
2817
2801
|
opt.value
|
|
2818
2802
|
))
|
|
@@ -2822,8 +2806,15 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
|
|
|
2822
2806
|
};
|
|
2823
2807
|
|
|
2824
2808
|
// src/components/Slide/Slide.tsx
|
|
2825
|
-
var
|
|
2826
|
-
var
|
|
2809
|
+
var React20 = __toESM(require("react"), 1);
|
|
2810
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2811
|
+
var initialPropsComponent4 = {
|
|
2812
|
+
slide: {
|
|
2813
|
+
ui: {},
|
|
2814
|
+
style: {}
|
|
2815
|
+
},
|
|
2816
|
+
box: {}
|
|
2817
|
+
};
|
|
2827
2818
|
var Slide = ({
|
|
2828
2819
|
in: inProp,
|
|
2829
2820
|
children,
|
|
@@ -2832,12 +2823,14 @@ var Slide = ({
|
|
|
2832
2823
|
onTransitionEnd,
|
|
2833
2824
|
propsComponent
|
|
2834
2825
|
}) => {
|
|
2826
|
+
const properties = mergeDeep(initialPropsComponent4, propsComponent || {});
|
|
2835
2827
|
const bemContent = bem("yr3Slide--content");
|
|
2836
2828
|
const classNameContent = bemContent(void 0, {
|
|
2837
2829
|
[direction]: true,
|
|
2838
|
-
"in": !!inProp
|
|
2830
|
+
"in": !!inProp,
|
|
2831
|
+
"out": !inProp
|
|
2839
2832
|
});
|
|
2840
|
-
|
|
2833
|
+
React20.useEffect(() => {
|
|
2841
2834
|
let timeoutId;
|
|
2842
2835
|
if (inProp) {
|
|
2843
2836
|
timeoutId = setTimeout(() => {
|
|
@@ -2846,20 +2839,20 @@ var Slide = ({
|
|
|
2846
2839
|
}
|
|
2847
2840
|
return () => clearTimeout(timeoutId);
|
|
2848
2841
|
}, [inProp, duration, onTransitionEnd]);
|
|
2849
|
-
const uiStyleContent = uiStyle({ ...
|
|
2850
|
-
return /* @__PURE__ */ (0,
|
|
2842
|
+
const uiStyleContent = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
|
|
2843
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2851
2844
|
"div",
|
|
2852
2845
|
{
|
|
2853
2846
|
className: "yr3Slide",
|
|
2854
|
-
style:
|
|
2847
|
+
style: composeStyles(),
|
|
2855
2848
|
"data-testid": "yr3Slide",
|
|
2856
|
-
children: /* @__PURE__ */ (0,
|
|
2849
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2857
2850
|
"div",
|
|
2858
2851
|
{
|
|
2859
2852
|
className: classNameContent,
|
|
2860
|
-
style: composeStyles(uiStyleContent,
|
|
2853
|
+
style: composeStyles(uiStyleContent, properties?.slide?.style || {}),
|
|
2861
2854
|
"data-testid": "yr3Slide-content",
|
|
2862
|
-
children: /* @__PURE__ */ (0,
|
|
2855
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
|
|
2863
2856
|
}
|
|
2864
2857
|
)
|
|
2865
2858
|
}
|
|
@@ -2867,7 +2860,7 @@ var Slide = ({
|
|
|
2867
2860
|
};
|
|
2868
2861
|
|
|
2869
2862
|
// src/components/Switch/Switch.tsx
|
|
2870
|
-
var
|
|
2863
|
+
var React21 = __toESM(require("react"), 1);
|
|
2871
2864
|
|
|
2872
2865
|
// src/components/Switch/switch.variants.ts
|
|
2873
2866
|
var switchVariants = createVariants({
|
|
@@ -2904,7 +2897,7 @@ var switchVariants = createVariants({
|
|
|
2904
2897
|
});
|
|
2905
2898
|
|
|
2906
2899
|
// src/components/Switch/Switch.tsx
|
|
2907
|
-
var
|
|
2900
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2908
2901
|
var Switch = ({
|
|
2909
2902
|
checked,
|
|
2910
2903
|
defaultChecked,
|
|
@@ -2916,7 +2909,7 @@ var Switch = ({
|
|
|
2916
2909
|
placement = "end",
|
|
2917
2910
|
propsComponent
|
|
2918
2911
|
}) => {
|
|
2919
|
-
const [internal, setInternal] =
|
|
2912
|
+
const [internal, setInternal] = React21.useState(defaultChecked || false);
|
|
2920
2913
|
const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal, placement });
|
|
2921
2914
|
const isControlled = checked !== void 0;
|
|
2922
2915
|
const value = isControlled ? checked : internal;
|
|
@@ -2924,13 +2917,13 @@ var Switch = ({
|
|
|
2924
2917
|
if (!isControlled) setInternal(e.target.checked);
|
|
2925
2918
|
onChange?.(e, e.target.checked);
|
|
2926
2919
|
};
|
|
2927
|
-
return /* @__PURE__ */ (0,
|
|
2920
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2928
2921
|
"label",
|
|
2929
2922
|
{
|
|
2930
2923
|
className: classname,
|
|
2931
2924
|
"data-testid": "yr3Switch",
|
|
2932
2925
|
children: [
|
|
2933
|
-
/* @__PURE__ */ (0,
|
|
2926
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2934
2927
|
"input",
|
|
2935
2928
|
{
|
|
2936
2929
|
type: "checkbox",
|
|
@@ -2939,8 +2932,8 @@ var Switch = ({
|
|
|
2939
2932
|
disabled
|
|
2940
2933
|
}
|
|
2941
2934
|
),
|
|
2942
|
-
/* @__PURE__ */ (0,
|
|
2943
|
-
/* @__PURE__ */ (0,
|
|
2935
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "yr3Switch--track", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "yr3Switch--thumb" }) }),
|
|
2936
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2944
2937
|
"span",
|
|
2945
2938
|
{
|
|
2946
2939
|
className: "yr3Switch--label",
|
|
@@ -2955,9 +2948,9 @@ var Switch = ({
|
|
|
2955
2948
|
};
|
|
2956
2949
|
|
|
2957
2950
|
// src/Icons/IconSearch.tsx
|
|
2958
|
-
var
|
|
2951
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2959
2952
|
var IconSearch = (props) => {
|
|
2960
|
-
return /* @__PURE__ */ (0,
|
|
2953
|
+
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
2954
|
"path",
|
|
2962
2955
|
{
|
|
2963
2956
|
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 +2962,103 @@ var IconSearch = (props) => {
|
|
|
2969
2962
|
) });
|
|
2970
2963
|
};
|
|
2971
2964
|
|
|
2965
|
+
// src/theme/ThemeProvider.tsx
|
|
2966
|
+
var React23 = __toESM(require("react"), 1);
|
|
2967
|
+
|
|
2968
|
+
// src/theme/notistackContext.tsx
|
|
2969
|
+
var React22 = __toESM(require("react"), 1);
|
|
2970
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2971
|
+
var NotistackContext = React22.createContext(null);
|
|
2972
|
+
var NotistackProvider = ({ children }) => {
|
|
2973
|
+
const [snacks, setSnacks] = React22.useState([]);
|
|
2974
|
+
const notistack = (snack) => {
|
|
2975
|
+
const id = Date.now();
|
|
2976
|
+
setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
|
|
2977
|
+
const duration = snack.duration || 3e3;
|
|
2978
|
+
const exitDuration = 300;
|
|
2979
|
+
setTimeout(() => {
|
|
2980
|
+
setSnacks(
|
|
2981
|
+
(prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
|
|
2982
|
+
);
|
|
2983
|
+
}, duration);
|
|
2984
|
+
setTimeout(() => {
|
|
2985
|
+
setSnacks((prev) => prev.filter((s) => s.id !== id));
|
|
2986
|
+
}, duration + exitDuration);
|
|
2987
|
+
};
|
|
2988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
|
|
2989
|
+
children,
|
|
2990
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Notistack, { ...snack }, snack.id)) })
|
|
2991
|
+
] });
|
|
2992
|
+
};
|
|
2993
|
+
var useNotistack = () => {
|
|
2994
|
+
const ctx = React22.useContext(NotistackContext);
|
|
2995
|
+
if (!ctx) {
|
|
2996
|
+
throw new Error("NotistackProvider missing");
|
|
2997
|
+
}
|
|
2998
|
+
return ctx;
|
|
2999
|
+
};
|
|
3000
|
+
|
|
3001
|
+
// src/theme/ThemeProvider.tsx
|
|
3002
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3003
|
+
var ThemeContext = React23.createContext(null);
|
|
3004
|
+
var ThemeProvider = ({ theme, children }) => {
|
|
3005
|
+
React23.useEffect(() => {
|
|
3006
|
+
applyTheme(theme);
|
|
3007
|
+
}, [theme]);
|
|
3008
|
+
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 }) }) });
|
|
3009
|
+
};
|
|
3010
|
+
var useTheme = () => React23.useContext(ThemeContext);
|
|
3011
|
+
|
|
3012
|
+
// src/theme/tokens.ts
|
|
3013
|
+
var baseTokens = {
|
|
3014
|
+
colors: {
|
|
3015
|
+
primary: "#6C5CE7",
|
|
3016
|
+
secondary: "#00CEC9",
|
|
3017
|
+
background: "#0f0f1a",
|
|
3018
|
+
surface: "#1a1a2e",
|
|
3019
|
+
textPrimary: "#ffffff",
|
|
3020
|
+
textSecondary: "#b2bec3"
|
|
3021
|
+
},
|
|
3022
|
+
spacing: (factor) => `${factor * 8}px`,
|
|
3023
|
+
radius: {
|
|
3024
|
+
sm: "6px",
|
|
3025
|
+
md: "12px",
|
|
3026
|
+
lg: "20px"
|
|
3027
|
+
}
|
|
3028
|
+
};
|
|
3029
|
+
|
|
3030
|
+
// src/theme/useMediaQuery.tsx
|
|
3031
|
+
var React24 = __toESM(require("react"), 1);
|
|
3032
|
+
function useMediaQuery(query) {
|
|
3033
|
+
const theme = useTheme();
|
|
3034
|
+
const computedQuery = typeof query === "function" ? query(theme) : query;
|
|
3035
|
+
const [matches, setMatches] = React24.useState(() => {
|
|
3036
|
+
if (typeof window === "undefined") return false;
|
|
3037
|
+
return window.matchMedia(computedQuery).matches;
|
|
3038
|
+
});
|
|
3039
|
+
React24.useEffect(() => {
|
|
3040
|
+
if (typeof window === "undefined") return;
|
|
3041
|
+
const media = window.matchMedia(computedQuery);
|
|
3042
|
+
const listener = () => setMatches(media.matches);
|
|
3043
|
+
media.addEventListener("change", listener);
|
|
3044
|
+
return () => media.removeEventListener("change", listener);
|
|
3045
|
+
}, [computedQuery]);
|
|
3046
|
+
return matches;
|
|
3047
|
+
}
|
|
3048
|
+
function useBreakpointValue(values) {
|
|
3049
|
+
const xs = useMediaQuery(`(min-width: ${breakpoints.xs}px)`);
|
|
3050
|
+
const sm = useMediaQuery(`(min-width: ${breakpoints.sm}px)`);
|
|
3051
|
+
const md = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
|
|
3052
|
+
const lg = useMediaQuery(`(min-width: ${breakpoints.lg}px)`);
|
|
3053
|
+
const xl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
|
|
3054
|
+
if (xl && values.xl !== void 0) return values.xl;
|
|
3055
|
+
if (lg && values.lg !== void 0) return values.lg;
|
|
3056
|
+
if (md && values.md !== void 0) return values.md;
|
|
3057
|
+
if (sm && values.sm !== void 0) return values.sm;
|
|
3058
|
+
if (xs && values.xs !== void 0) return values.xs;
|
|
3059
|
+
return void 0;
|
|
3060
|
+
}
|
|
3061
|
+
|
|
2972
3062
|
// src/hooks/usePlaces.ts
|
|
2973
3063
|
var import_autocomplete_places2 = require("@yr3/autocomplete-places");
|
|
2974
3064
|
var usePlaces = ({ input, language, apiKey, provider }) => {
|
|
@@ -3083,6 +3173,7 @@ initTheme();
|
|
|
3083
3173
|
getNumberPhone,
|
|
3084
3174
|
hexToRgb,
|
|
3085
3175
|
initTheme,
|
|
3176
|
+
inputCurrency,
|
|
3086
3177
|
isEmpty,
|
|
3087
3178
|
lighten,
|
|
3088
3179
|
mergeDeep,
|