@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.js
CHANGED
|
@@ -344,6 +344,15 @@ function mergeDeep(target, source) {
|
|
|
344
344
|
return output;
|
|
345
345
|
}
|
|
346
346
|
|
|
347
|
+
// src/utils/input.ts
|
|
348
|
+
var inputCurrency = (e, value, alloweds) => {
|
|
349
|
+
const allowed = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].concat(alloweds);
|
|
350
|
+
if (allowed.includes(e.key)) return;
|
|
351
|
+
if (/^\d$/.test(e.key)) return;
|
|
352
|
+
if ((e.key === "," || e.key === ".") && !(value || "").includes(",") && !(value || "").includes(".")) return;
|
|
353
|
+
e.preventDefault();
|
|
354
|
+
};
|
|
355
|
+
|
|
347
356
|
// src/theme/breakpoint.ts
|
|
348
357
|
var breakpoints = {
|
|
349
358
|
xs: 0,
|
|
@@ -1535,16 +1544,24 @@ var groupVariants = createVariants({
|
|
|
1535
1544
|
|
|
1536
1545
|
// src/components/Group/Group.tsx
|
|
1537
1546
|
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
1538
|
-
var initialComponents = {
|
|
1547
|
+
var initialComponents = (color) => ({
|
|
1539
1548
|
group: {
|
|
1540
1549
|
ui: {},
|
|
1541
1550
|
style: {}
|
|
1542
1551
|
},
|
|
1543
1552
|
item: {
|
|
1553
|
+
variant: "text",
|
|
1544
1554
|
ui: {},
|
|
1545
|
-
style: {}
|
|
1555
|
+
style: {},
|
|
1556
|
+
text: {
|
|
1557
|
+
variant: "caption",
|
|
1558
|
+
color,
|
|
1559
|
+
as: "span",
|
|
1560
|
+
ui: {},
|
|
1561
|
+
style: {}
|
|
1562
|
+
}
|
|
1546
1563
|
}
|
|
1547
|
-
};
|
|
1564
|
+
});
|
|
1548
1565
|
var Group = ({
|
|
1549
1566
|
options,
|
|
1550
1567
|
value,
|
|
@@ -1552,8 +1569,13 @@ var Group = ({
|
|
|
1552
1569
|
variant,
|
|
1553
1570
|
type = "rounded",
|
|
1554
1571
|
color = "primary",
|
|
1555
|
-
|
|
1572
|
+
exclude = false,
|
|
1573
|
+
propsComponent
|
|
1556
1574
|
}) => {
|
|
1575
|
+
const properties = mergeDeep(
|
|
1576
|
+
initialComponents(type === "rounded" ? "text" : color),
|
|
1577
|
+
propsComponent || {}
|
|
1578
|
+
);
|
|
1557
1579
|
const [internalValue, setInternalValue] = React10.useState(null);
|
|
1558
1580
|
const isControlled = value !== void 0;
|
|
1559
1581
|
React10.useEffect(() => {
|
|
@@ -1562,20 +1584,74 @@ var Group = ({
|
|
|
1562
1584
|
}
|
|
1563
1585
|
}, [value, isControlled]);
|
|
1564
1586
|
const classItems = bem("yr3Group--item");
|
|
1587
|
+
const clasess = (item) => classItems(void 0, {
|
|
1588
|
+
item: !!item,
|
|
1589
|
+
active: !exclude ? Array.isArray(value) ? value.includes(item?.value) : internalValue === item.value : false,
|
|
1590
|
+
exclude: exclude && Array.isArray(value) ? !value.includes(item?.value) : ""
|
|
1591
|
+
});
|
|
1592
|
+
const mappingStyle = React10.useMemo(() => {
|
|
1593
|
+
if (variant !== "filled") return options.map((opt, index) => ({
|
|
1594
|
+
...opt,
|
|
1595
|
+
index,
|
|
1596
|
+
ui: {}
|
|
1597
|
+
}));
|
|
1598
|
+
if (!exclude) {
|
|
1599
|
+
const checked = options.filter((opt) => Array.isArray(value) ? value.includes(opt.value) : internalValue === opt.value);
|
|
1600
|
+
return checked.map((opt, index) => ({
|
|
1601
|
+
...opt,
|
|
1602
|
+
index,
|
|
1603
|
+
style: {
|
|
1604
|
+
borderTopLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1605
|
+
borderBottomLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1606
|
+
borderTopRightRadius: index === checked.length - 1 ? "var(--group-border-radius, 0px)" : 0,
|
|
1607
|
+
borderBottomRightRadius: index === checked.length - 1 ? "var(--group-border-radius, 0px)" : 0
|
|
1608
|
+
}
|
|
1609
|
+
}));
|
|
1610
|
+
}
|
|
1611
|
+
const diference = options.filter((opt) => Array.isArray(value) ? !value.includes(opt.value) : internalValue !== opt.value);
|
|
1612
|
+
return diference.map((opt, index) => ({
|
|
1613
|
+
...opt,
|
|
1614
|
+
index,
|
|
1615
|
+
style: {
|
|
1616
|
+
borderTopLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1617
|
+
borderBottomLeftRadius: index === 0 ? "var(--group-border-radius, 0px)" : 0,
|
|
1618
|
+
borderTopRightRadius: index === diference.length - 1 ? "var(--group-border-radius, 0px)" : 0,
|
|
1619
|
+
borderBottomRightRadius: index === diference.length - 1 ? "var(--group-border-radius, 0px)" : 0
|
|
1620
|
+
}
|
|
1621
|
+
}));
|
|
1622
|
+
}, [exclude, value, options, type]);
|
|
1565
1623
|
return /* @__PURE__ */ jsx20(
|
|
1566
1624
|
"div",
|
|
1567
1625
|
{
|
|
1568
1626
|
className: groupVariants({ variant, color, type }),
|
|
1569
1627
|
"data-testid": "yr3Group",
|
|
1570
|
-
style: composeStyles(
|
|
1571
|
-
children: options.map((opt) => /* @__PURE__ */ jsx20(
|
|
1628
|
+
style: composeStyles(properties.group?.ui, properties.group?.style),
|
|
1629
|
+
children: options.map((opt, index) => /* @__PURE__ */ jsx20(
|
|
1572
1630
|
"div",
|
|
1573
1631
|
{
|
|
1574
1632
|
"data-testid": "yr3Group-item",
|
|
1575
|
-
className:
|
|
1576
|
-
onClick: () => onChange?.(opt.value),
|
|
1577
|
-
style: composeStyles(
|
|
1578
|
-
|
|
1633
|
+
className: clasess(opt),
|
|
1634
|
+
onClick: () => (!opt.disabled && !exclude || exclude && mappingStyle?.find((e) => e.value === opt.value)?.index === 0) && onChange?.(opt.value),
|
|
1635
|
+
style: composeStyles(
|
|
1636
|
+
{
|
|
1637
|
+
...properties.item?.ui,
|
|
1638
|
+
...opt?.ui,
|
|
1639
|
+
...mappingStyle?.find((o) => o.value === opt.value)?.ui
|
|
1640
|
+
},
|
|
1641
|
+
{
|
|
1642
|
+
...properties.item?.style,
|
|
1643
|
+
...opt?.style,
|
|
1644
|
+
...mappingStyle?.find((o) => o.value === opt.value)?.style
|
|
1645
|
+
}
|
|
1646
|
+
),
|
|
1647
|
+
children: /* @__PURE__ */ jsx20(
|
|
1648
|
+
Text,
|
|
1649
|
+
{
|
|
1650
|
+
...properties.item?.text,
|
|
1651
|
+
color: opt.value === value ? opt?.active : properties.item?.text?.color || color,
|
|
1652
|
+
children: opt.label
|
|
1653
|
+
}
|
|
1654
|
+
)
|
|
1579
1655
|
},
|
|
1580
1656
|
opt.value
|
|
1581
1657
|
))
|
|
@@ -1745,11 +1821,12 @@ var Input = React12.forwardRef(
|
|
|
1745
1821
|
defaultValue,
|
|
1746
1822
|
onChange,
|
|
1747
1823
|
variant = "outlined",
|
|
1748
|
-
error =
|
|
1824
|
+
error = "ce un errore",
|
|
1825
|
+
separatorCurrency = ",",
|
|
1749
1826
|
ui,
|
|
1750
1827
|
style,
|
|
1751
1828
|
propsComponent = initiaPropsComponent,
|
|
1752
|
-
|
|
1829
|
+
pattern = "text",
|
|
1753
1830
|
color = "primary",
|
|
1754
1831
|
size = "auto",
|
|
1755
1832
|
...props
|
|
@@ -1759,20 +1836,24 @@ var Input = React12.forwardRef(
|
|
|
1759
1836
|
const isControlled = value !== void 0;
|
|
1760
1837
|
const currentValue = isControlled ? value : internalValue;
|
|
1761
1838
|
const isActive = focused || !!currentValue;
|
|
1762
|
-
const checkPattern = (
|
|
1763
|
-
switch (
|
|
1839
|
+
const checkPattern = (type, value2) => {
|
|
1840
|
+
switch (type) {
|
|
1764
1841
|
case "email":
|
|
1765
1842
|
return /^[\w.-]+@[\w.-]+\.\w{2,}$/.test(value2);
|
|
1766
1843
|
case "phone":
|
|
1767
1844
|
return /^\d{10}$/.test(value2);
|
|
1768
1845
|
case "number":
|
|
1769
1846
|
return /^\d+$/.test(value2);
|
|
1847
|
+
case "currency":
|
|
1848
|
+
if (separatorCurrency === ",") return /^\d+(\,\d{0,2})?$/.test(value2);
|
|
1849
|
+
if (separatorCurrency === ".") return /^\d+(\.\d{0,2})?$/.test(value2);
|
|
1770
1850
|
default:
|
|
1771
1851
|
return true;
|
|
1772
1852
|
}
|
|
1773
1853
|
};
|
|
1774
1854
|
const handleChange = (e) => {
|
|
1775
1855
|
const newValue = e.target.value;
|
|
1856
|
+
if (newValue && !checkPattern(pattern, newValue)) return;
|
|
1776
1857
|
if (!isControlled) {
|
|
1777
1858
|
setInternalValue(newValue);
|
|
1778
1859
|
}
|
|
@@ -1794,10 +1875,10 @@ var Input = React12.forwardRef(
|
|
|
1794
1875
|
{
|
|
1795
1876
|
ref,
|
|
1796
1877
|
value: currentValue,
|
|
1797
|
-
|
|
1878
|
+
inputMode: pattern === "currency" ? "numeric" : pattern === "phone" ? "tel" : void 0,
|
|
1798
1879
|
autoComplete: "off",
|
|
1880
|
+
type: "text",
|
|
1799
1881
|
onChange: handleChange,
|
|
1800
|
-
onKeyDown: (e) => checkPattern(type, e.key),
|
|
1801
1882
|
onFocus: () => setFocused(true),
|
|
1802
1883
|
onBlur: () => setFocused(false),
|
|
1803
1884
|
className: classes,
|
|
@@ -2430,104 +2511,7 @@ var Radio = ({
|
|
|
2430
2511
|
};
|
|
2431
2512
|
|
|
2432
2513
|
// src/components/Select/Select.tsx
|
|
2433
|
-
import * as React22 from "react";
|
|
2434
|
-
|
|
2435
|
-
// src/theme/ThemeProvider.tsx
|
|
2436
|
-
import * as React20 from "react";
|
|
2437
|
-
|
|
2438
|
-
// src/theme/notistackContext.tsx
|
|
2439
2514
|
import * as React19 from "react";
|
|
2440
|
-
import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2441
|
-
var NotistackContext = React19.createContext(null);
|
|
2442
|
-
var NotistackProvider = ({ children }) => {
|
|
2443
|
-
const [snacks, setSnacks] = React19.useState([]);
|
|
2444
|
-
const notistack = (snack) => {
|
|
2445
|
-
const id = Date.now();
|
|
2446
|
-
setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
|
|
2447
|
-
const duration = snack.duration || 3e3;
|
|
2448
|
-
const exitDuration = 300;
|
|
2449
|
-
setTimeout(() => {
|
|
2450
|
-
setSnacks(
|
|
2451
|
-
(prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
|
|
2452
|
-
);
|
|
2453
|
-
}, duration);
|
|
2454
|
-
setTimeout(() => {
|
|
2455
|
-
setSnacks((prev) => prev.filter((s) => s.id !== id));
|
|
2456
|
-
}, duration + exitDuration);
|
|
2457
|
-
};
|
|
2458
|
-
return /* @__PURE__ */ jsxs15(NotistackContext.Provider, { value: { notistack }, children: [
|
|
2459
|
-
children,
|
|
2460
|
-
/* @__PURE__ */ jsx36("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx36(Notistack, { ...snack }, snack.id)) })
|
|
2461
|
-
] });
|
|
2462
|
-
};
|
|
2463
|
-
var useNotistack = () => {
|
|
2464
|
-
const ctx = React19.useContext(NotistackContext);
|
|
2465
|
-
if (!ctx) {
|
|
2466
|
-
throw new Error("NotistackProvider missing");
|
|
2467
|
-
}
|
|
2468
|
-
return ctx;
|
|
2469
|
-
};
|
|
2470
|
-
|
|
2471
|
-
// src/theme/ThemeProvider.tsx
|
|
2472
|
-
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
2473
|
-
var ThemeContext = React20.createContext(null);
|
|
2474
|
-
var ThemeProvider = ({ theme, children }) => {
|
|
2475
|
-
React20.useEffect(() => {
|
|
2476
|
-
applyTheme(theme);
|
|
2477
|
-
}, [theme]);
|
|
2478
|
-
return /* @__PURE__ */ jsx37(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx37(BackdropProvider, { children: /* @__PURE__ */ jsx37(NotistackProvider, { children }) }) });
|
|
2479
|
-
};
|
|
2480
|
-
var useTheme = () => React20.useContext(ThemeContext);
|
|
2481
|
-
|
|
2482
|
-
// src/theme/tokens.ts
|
|
2483
|
-
var baseTokens = {
|
|
2484
|
-
colors: {
|
|
2485
|
-
primary: "#6C5CE7",
|
|
2486
|
-
secondary: "#00CEC9",
|
|
2487
|
-
background: "#0f0f1a",
|
|
2488
|
-
surface: "#1a1a2e",
|
|
2489
|
-
textPrimary: "#ffffff",
|
|
2490
|
-
textSecondary: "#b2bec3"
|
|
2491
|
-
},
|
|
2492
|
-
spacing: (factor) => `${factor * 8}px`,
|
|
2493
|
-
radius: {
|
|
2494
|
-
sm: "6px",
|
|
2495
|
-
md: "12px",
|
|
2496
|
-
lg: "20px"
|
|
2497
|
-
}
|
|
2498
|
-
};
|
|
2499
|
-
|
|
2500
|
-
// src/theme/useMediaQuery.tsx
|
|
2501
|
-
import * as React21 from "react";
|
|
2502
|
-
function useMediaQuery(query) {
|
|
2503
|
-
const theme = useTheme();
|
|
2504
|
-
const computedQuery = typeof query === "function" ? query(theme) : query;
|
|
2505
|
-
const [matches, setMatches] = React21.useState(() => {
|
|
2506
|
-
if (typeof window === "undefined") return false;
|
|
2507
|
-
return window.matchMedia(computedQuery).matches;
|
|
2508
|
-
});
|
|
2509
|
-
React21.useEffect(() => {
|
|
2510
|
-
if (typeof window === "undefined") return;
|
|
2511
|
-
const media = window.matchMedia(computedQuery);
|
|
2512
|
-
const listener = () => setMatches(media.matches);
|
|
2513
|
-
media.addEventListener("change", listener);
|
|
2514
|
-
return () => media.removeEventListener("change", listener);
|
|
2515
|
-
}, [computedQuery]);
|
|
2516
|
-
return matches;
|
|
2517
|
-
}
|
|
2518
|
-
function useBreakpointValue(values) {
|
|
2519
|
-
const xs = useMediaQuery(`(min-width: ${breakpoints.xs}px)`);
|
|
2520
|
-
const sm = useMediaQuery(`(min-width: ${breakpoints.sm}px)`);
|
|
2521
|
-
const md = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
|
|
2522
|
-
const lg = useMediaQuery(`(min-width: ${breakpoints.lg}px)`);
|
|
2523
|
-
const xl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
|
|
2524
|
-
if (xl && values.xl !== void 0) return values.xl;
|
|
2525
|
-
if (lg && values.lg !== void 0) return values.lg;
|
|
2526
|
-
if (md && values.md !== void 0) return values.md;
|
|
2527
|
-
if (sm && values.sm !== void 0) return values.sm;
|
|
2528
|
-
if (xs && values.xs !== void 0) return values.xs;
|
|
2529
|
-
return void 0;
|
|
2530
|
-
}
|
|
2531
2515
|
|
|
2532
2516
|
// src/components/Select/select.variants.ts
|
|
2533
2517
|
var selectVariants = createVariants({
|
|
@@ -2587,7 +2571,7 @@ var selectIconVariants = createVariants({
|
|
|
2587
2571
|
});
|
|
2588
2572
|
|
|
2589
2573
|
// src/components/Select/Select.tsx
|
|
2590
|
-
import { jsx as
|
|
2574
|
+
import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2591
2575
|
var initiaPropsComponent3 = {
|
|
2592
2576
|
control: {
|
|
2593
2577
|
variant: "outlined",
|
|
@@ -2627,36 +2611,35 @@ var initiaPropsComponent3 = {
|
|
|
2627
2611
|
}
|
|
2628
2612
|
};
|
|
2629
2613
|
var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
|
|
2630
|
-
const [open, setOpen] =
|
|
2631
|
-
const [valueState, setValueState] =
|
|
2632
|
-
const ref =
|
|
2614
|
+
const [open, setOpen] = React19.useState(false);
|
|
2615
|
+
const [valueState, setValueState] = React19.useState(value || defaultValue || null);
|
|
2616
|
+
const ref = React19.useRef(null);
|
|
2633
2617
|
useClickAway(ref, () => setOpen(false));
|
|
2634
|
-
const theme = useTheme();
|
|
2635
2618
|
const properties = mergeDeep(initiaPropsComponent3, propsComponent || {});
|
|
2636
2619
|
const classesIcon = selectIconVariants({ color: properties?.icon?.color, animated: open, open });
|
|
2637
2620
|
const classes = selectVariants({ wrapper: true });
|
|
2638
|
-
return /* @__PURE__ */
|
|
2639
|
-
/* @__PURE__ */
|
|
2621
|
+
return /* @__PURE__ */ jsxs15("div", { className: classes, ref, children: [
|
|
2622
|
+
/* @__PURE__ */ jsx36(
|
|
2640
2623
|
Input,
|
|
2641
2624
|
{
|
|
2642
2625
|
label,
|
|
2643
2626
|
variant: "base",
|
|
2644
2627
|
disabled: true,
|
|
2645
|
-
value: valueState,
|
|
2628
|
+
value: options.find((opt) => opt.value === valueState)?.label || "",
|
|
2646
2629
|
propsComponent: {
|
|
2647
2630
|
control: properties?.control,
|
|
2648
2631
|
label: properties?.label
|
|
2649
2632
|
}
|
|
2650
2633
|
}
|
|
2651
2634
|
),
|
|
2652
|
-
/* @__PURE__ */
|
|
2635
|
+
/* @__PURE__ */ jsx36(
|
|
2653
2636
|
"div",
|
|
2654
2637
|
{
|
|
2655
2638
|
className: classesIcon,
|
|
2656
2639
|
style: properties?.icon?.style,
|
|
2657
2640
|
onClick: () => setOpen((prev) => !prev),
|
|
2658
2641
|
"data-testid": "yr3Select-icon",
|
|
2659
|
-
children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */
|
|
2642
|
+
children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ jsx36(
|
|
2660
2643
|
IconDown,
|
|
2661
2644
|
{
|
|
2662
2645
|
width: properties?.icon?.style?.width,
|
|
@@ -2667,13 +2650,13 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
|
|
|
2667
2650
|
)
|
|
2668
2651
|
}
|
|
2669
2652
|
),
|
|
2670
|
-
open && /* @__PURE__ */
|
|
2653
|
+
open && /* @__PURE__ */ jsx36(
|
|
2671
2654
|
"div",
|
|
2672
2655
|
{
|
|
2673
2656
|
className: "yr3Select--menu",
|
|
2674
2657
|
style: composeStyles(properties?.menu?.ui, properties?.menu?.style),
|
|
2675
2658
|
"data-testid": "yr3Select-menu",
|
|
2676
|
-
children: options.map((opt) => /* @__PURE__ */
|
|
2659
|
+
children: options.map((opt) => /* @__PURE__ */ jsx36(
|
|
2677
2660
|
"div",
|
|
2678
2661
|
{
|
|
2679
2662
|
className: "yr3Select--option",
|
|
@@ -2695,7 +2678,7 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
|
|
|
2695
2678
|
onChange?.(event, opt.value);
|
|
2696
2679
|
},
|
|
2697
2680
|
style: composeStyles(properties?.menu?.options?.ui, properties?.menu?.options?.style),
|
|
2698
|
-
children: /* @__PURE__ */
|
|
2681
|
+
children: /* @__PURE__ */ jsx36(Text, { as: "span", variant: "caption", color: properties?.menu?.options?.text?.color || "primary", ...properties?.menu?.options?.text, children: opt.label })
|
|
2699
2682
|
},
|
|
2700
2683
|
opt.value
|
|
2701
2684
|
))
|
|
@@ -2705,8 +2688,15 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
|
|
|
2705
2688
|
};
|
|
2706
2689
|
|
|
2707
2690
|
// src/components/Slide/Slide.tsx
|
|
2708
|
-
import * as
|
|
2709
|
-
import { jsx as
|
|
2691
|
+
import * as React20 from "react";
|
|
2692
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
2693
|
+
var initialPropsComponent4 = {
|
|
2694
|
+
slide: {
|
|
2695
|
+
ui: {},
|
|
2696
|
+
style: {}
|
|
2697
|
+
},
|
|
2698
|
+
box: {}
|
|
2699
|
+
};
|
|
2710
2700
|
var Slide = ({
|
|
2711
2701
|
in: inProp,
|
|
2712
2702
|
children,
|
|
@@ -2715,12 +2705,14 @@ var Slide = ({
|
|
|
2715
2705
|
onTransitionEnd,
|
|
2716
2706
|
propsComponent
|
|
2717
2707
|
}) => {
|
|
2708
|
+
const properties = mergeDeep(initialPropsComponent4, propsComponent || {});
|
|
2718
2709
|
const bemContent = bem("yr3Slide--content");
|
|
2719
2710
|
const classNameContent = bemContent(void 0, {
|
|
2720
2711
|
[direction]: true,
|
|
2721
|
-
"in": !!inProp
|
|
2712
|
+
"in": !!inProp,
|
|
2713
|
+
"out": !inProp
|
|
2722
2714
|
});
|
|
2723
|
-
|
|
2715
|
+
React20.useEffect(() => {
|
|
2724
2716
|
let timeoutId;
|
|
2725
2717
|
if (inProp) {
|
|
2726
2718
|
timeoutId = setTimeout(() => {
|
|
@@ -2729,20 +2721,20 @@ var Slide = ({
|
|
|
2729
2721
|
}
|
|
2730
2722
|
return () => clearTimeout(timeoutId);
|
|
2731
2723
|
}, [inProp, duration, onTransitionEnd]);
|
|
2732
|
-
const uiStyleContent = uiStyle({ ...
|
|
2733
|
-
return /* @__PURE__ */
|
|
2724
|
+
const uiStyleContent = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
|
|
2725
|
+
return /* @__PURE__ */ jsx37(
|
|
2734
2726
|
"div",
|
|
2735
2727
|
{
|
|
2736
2728
|
className: "yr3Slide",
|
|
2737
|
-
style:
|
|
2729
|
+
style: composeStyles(),
|
|
2738
2730
|
"data-testid": "yr3Slide",
|
|
2739
|
-
children: /* @__PURE__ */
|
|
2731
|
+
children: /* @__PURE__ */ jsx37(
|
|
2740
2732
|
"div",
|
|
2741
2733
|
{
|
|
2742
2734
|
className: classNameContent,
|
|
2743
|
-
style: composeStyles(uiStyleContent,
|
|
2735
|
+
style: composeStyles(uiStyleContent, properties?.slide?.style || {}),
|
|
2744
2736
|
"data-testid": "yr3Slide-content",
|
|
2745
|
-
children: /* @__PURE__ */
|
|
2737
|
+
children: /* @__PURE__ */ jsx37(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
|
|
2746
2738
|
}
|
|
2747
2739
|
)
|
|
2748
2740
|
}
|
|
@@ -2750,7 +2742,7 @@ var Slide = ({
|
|
|
2750
2742
|
};
|
|
2751
2743
|
|
|
2752
2744
|
// src/components/Switch/Switch.tsx
|
|
2753
|
-
import * as
|
|
2745
|
+
import * as React21 from "react";
|
|
2754
2746
|
|
|
2755
2747
|
// src/components/Switch/switch.variants.ts
|
|
2756
2748
|
var switchVariants = createVariants({
|
|
@@ -2787,7 +2779,7 @@ var switchVariants = createVariants({
|
|
|
2787
2779
|
});
|
|
2788
2780
|
|
|
2789
2781
|
// src/components/Switch/Switch.tsx
|
|
2790
|
-
import { jsx as
|
|
2782
|
+
import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2791
2783
|
var Switch = ({
|
|
2792
2784
|
checked,
|
|
2793
2785
|
defaultChecked,
|
|
@@ -2799,7 +2791,7 @@ var Switch = ({
|
|
|
2799
2791
|
placement = "end",
|
|
2800
2792
|
propsComponent
|
|
2801
2793
|
}) => {
|
|
2802
|
-
const [internal, setInternal] =
|
|
2794
|
+
const [internal, setInternal] = React21.useState(defaultChecked || false);
|
|
2803
2795
|
const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal, placement });
|
|
2804
2796
|
const isControlled = checked !== void 0;
|
|
2805
2797
|
const value = isControlled ? checked : internal;
|
|
@@ -2807,13 +2799,13 @@ var Switch = ({
|
|
|
2807
2799
|
if (!isControlled) setInternal(e.target.checked);
|
|
2808
2800
|
onChange?.(e, e.target.checked);
|
|
2809
2801
|
};
|
|
2810
|
-
return /* @__PURE__ */
|
|
2802
|
+
return /* @__PURE__ */ jsxs16(
|
|
2811
2803
|
"label",
|
|
2812
2804
|
{
|
|
2813
2805
|
className: classname,
|
|
2814
2806
|
"data-testid": "yr3Switch",
|
|
2815
2807
|
children: [
|
|
2816
|
-
/* @__PURE__ */
|
|
2808
|
+
/* @__PURE__ */ jsx38(
|
|
2817
2809
|
"input",
|
|
2818
2810
|
{
|
|
2819
2811
|
type: "checkbox",
|
|
@@ -2822,8 +2814,8 @@ var Switch = ({
|
|
|
2822
2814
|
disabled
|
|
2823
2815
|
}
|
|
2824
2816
|
),
|
|
2825
|
-
/* @__PURE__ */
|
|
2826
|
-
/* @__PURE__ */
|
|
2817
|
+
/* @__PURE__ */ jsx38("span", { className: "yr3Switch--track", children: /* @__PURE__ */ jsx38("span", { className: "yr3Switch--thumb" }) }),
|
|
2818
|
+
/* @__PURE__ */ jsx38(
|
|
2827
2819
|
"span",
|
|
2828
2820
|
{
|
|
2829
2821
|
className: "yr3Switch--label",
|
|
@@ -2838,9 +2830,9 @@ var Switch = ({
|
|
|
2838
2830
|
};
|
|
2839
2831
|
|
|
2840
2832
|
// src/Icons/IconSearch.tsx
|
|
2841
|
-
import { jsx as
|
|
2833
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
2842
2834
|
var IconSearch = (props) => {
|
|
2843
|
-
return /* @__PURE__ */
|
|
2835
|
+
return /* @__PURE__ */ jsx39("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__ */ jsx39(
|
|
2844
2836
|
"path",
|
|
2845
2837
|
{
|
|
2846
2838
|
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",
|
|
@@ -2852,6 +2844,103 @@ var IconSearch = (props) => {
|
|
|
2852
2844
|
) });
|
|
2853
2845
|
};
|
|
2854
2846
|
|
|
2847
|
+
// src/theme/ThemeProvider.tsx
|
|
2848
|
+
import * as React23 from "react";
|
|
2849
|
+
|
|
2850
|
+
// src/theme/notistackContext.tsx
|
|
2851
|
+
import * as React22 from "react";
|
|
2852
|
+
import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2853
|
+
var NotistackContext = React22.createContext(null);
|
|
2854
|
+
var NotistackProvider = ({ children }) => {
|
|
2855
|
+
const [snacks, setSnacks] = React22.useState([]);
|
|
2856
|
+
const notistack = (snack) => {
|
|
2857
|
+
const id = Date.now();
|
|
2858
|
+
setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
|
|
2859
|
+
const duration = snack.duration || 3e3;
|
|
2860
|
+
const exitDuration = 300;
|
|
2861
|
+
setTimeout(() => {
|
|
2862
|
+
setSnacks(
|
|
2863
|
+
(prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
|
|
2864
|
+
);
|
|
2865
|
+
}, duration);
|
|
2866
|
+
setTimeout(() => {
|
|
2867
|
+
setSnacks((prev) => prev.filter((s) => s.id !== id));
|
|
2868
|
+
}, duration + exitDuration);
|
|
2869
|
+
};
|
|
2870
|
+
return /* @__PURE__ */ jsxs17(NotistackContext.Provider, { value: { notistack }, children: [
|
|
2871
|
+
children,
|
|
2872
|
+
/* @__PURE__ */ jsx40("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx40(Notistack, { ...snack }, snack.id)) })
|
|
2873
|
+
] });
|
|
2874
|
+
};
|
|
2875
|
+
var useNotistack = () => {
|
|
2876
|
+
const ctx = React22.useContext(NotistackContext);
|
|
2877
|
+
if (!ctx) {
|
|
2878
|
+
throw new Error("NotistackProvider missing");
|
|
2879
|
+
}
|
|
2880
|
+
return ctx;
|
|
2881
|
+
};
|
|
2882
|
+
|
|
2883
|
+
// src/theme/ThemeProvider.tsx
|
|
2884
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
2885
|
+
var ThemeContext = React23.createContext(null);
|
|
2886
|
+
var ThemeProvider = ({ theme, children }) => {
|
|
2887
|
+
React23.useEffect(() => {
|
|
2888
|
+
applyTheme(theme);
|
|
2889
|
+
}, [theme]);
|
|
2890
|
+
return /* @__PURE__ */ jsx41(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx41(BackdropProvider, { children: /* @__PURE__ */ jsx41(NotistackProvider, { children }) }) });
|
|
2891
|
+
};
|
|
2892
|
+
var useTheme = () => React23.useContext(ThemeContext);
|
|
2893
|
+
|
|
2894
|
+
// src/theme/tokens.ts
|
|
2895
|
+
var baseTokens = {
|
|
2896
|
+
colors: {
|
|
2897
|
+
primary: "#6C5CE7",
|
|
2898
|
+
secondary: "#00CEC9",
|
|
2899
|
+
background: "#0f0f1a",
|
|
2900
|
+
surface: "#1a1a2e",
|
|
2901
|
+
textPrimary: "#ffffff",
|
|
2902
|
+
textSecondary: "#b2bec3"
|
|
2903
|
+
},
|
|
2904
|
+
spacing: (factor) => `${factor * 8}px`,
|
|
2905
|
+
radius: {
|
|
2906
|
+
sm: "6px",
|
|
2907
|
+
md: "12px",
|
|
2908
|
+
lg: "20px"
|
|
2909
|
+
}
|
|
2910
|
+
};
|
|
2911
|
+
|
|
2912
|
+
// src/theme/useMediaQuery.tsx
|
|
2913
|
+
import * as React24 from "react";
|
|
2914
|
+
function useMediaQuery(query) {
|
|
2915
|
+
const theme = useTheme();
|
|
2916
|
+
const computedQuery = typeof query === "function" ? query(theme) : query;
|
|
2917
|
+
const [matches, setMatches] = React24.useState(() => {
|
|
2918
|
+
if (typeof window === "undefined") return false;
|
|
2919
|
+
return window.matchMedia(computedQuery).matches;
|
|
2920
|
+
});
|
|
2921
|
+
React24.useEffect(() => {
|
|
2922
|
+
if (typeof window === "undefined") return;
|
|
2923
|
+
const media = window.matchMedia(computedQuery);
|
|
2924
|
+
const listener = () => setMatches(media.matches);
|
|
2925
|
+
media.addEventListener("change", listener);
|
|
2926
|
+
return () => media.removeEventListener("change", listener);
|
|
2927
|
+
}, [computedQuery]);
|
|
2928
|
+
return matches;
|
|
2929
|
+
}
|
|
2930
|
+
function useBreakpointValue(values) {
|
|
2931
|
+
const xs = useMediaQuery(`(min-width: ${breakpoints.xs}px)`);
|
|
2932
|
+
const sm = useMediaQuery(`(min-width: ${breakpoints.sm}px)`);
|
|
2933
|
+
const md = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
|
|
2934
|
+
const lg = useMediaQuery(`(min-width: ${breakpoints.lg}px)`);
|
|
2935
|
+
const xl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
|
|
2936
|
+
if (xl && values.xl !== void 0) return values.xl;
|
|
2937
|
+
if (lg && values.lg !== void 0) return values.lg;
|
|
2938
|
+
if (md && values.md !== void 0) return values.md;
|
|
2939
|
+
if (sm && values.sm !== void 0) return values.sm;
|
|
2940
|
+
if (xs && values.xs !== void 0) return values.xs;
|
|
2941
|
+
return void 0;
|
|
2942
|
+
}
|
|
2943
|
+
|
|
2855
2944
|
// src/hooks/usePlaces.ts
|
|
2856
2945
|
import { useAutocompletePlaces as useAutocompletePlaces2 } from "@yr3/autocomplete-places";
|
|
2857
2946
|
var usePlaces = ({ input, language, apiKey, provider }) => {
|
|
@@ -2965,6 +3054,7 @@ export {
|
|
|
2965
3054
|
getNumberPhone,
|
|
2966
3055
|
hexToRgb,
|
|
2967
3056
|
initTheme,
|
|
3057
|
+
inputCurrency,
|
|
2968
3058
|
isEmpty,
|
|
2969
3059
|
lighten,
|
|
2970
3060
|
mergeDeep,
|