nexaas-ui-components 1.0.81 → 1.0.83
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/index.cjs +101 -111
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +101 -111
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -116,11 +116,15 @@ var variants = {
|
|
|
116
116
|
dangerOutline: {
|
|
117
117
|
text: "text-dangerous-500 bg-surface border-[0.5px] border-dangerous-500 hover:bg-dangerous-100 active:bg-dangerous-500 active:text-white active:border-transparent active:shadow-none disabled:bg-surface disabled:border-dangerous-300 disabled:text-dangerous-300 disabled:shadow-none"
|
|
118
118
|
},
|
|
119
|
+
// Mesmo padrão do primary (node 412:5131): sólido + véu branco (rgba(255,255,255,.15)->0)
|
|
120
|
+
// via ::before + mix-blend-mode (background-blend-mode não funciona, ver primary acima).
|
|
121
|
+
// Blur da sombra era 1.5px — Figma "Shadow/Danger" pede radius 3.
|
|
119
122
|
danger: {
|
|
120
|
-
text: "shadow-[
|
|
123
|
+
text: "relative isolate bg-dangerous-500 text-white shadow-[0_1px_3px_0_rgba(222,56,56,0.12)] before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:pointer-events-none before:mix-blend-plus-lighter before:bg-gradient-to-b before:from-[rgba(255,255,255,0.15)] before:to-[rgba(255,255,255,0)] hover:bg-gradient-to-b hover:from-danger-start hover:to-danger-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] hover:before:opacity-0 active:bg-dangerous-600 active:shadow-none active:before:opacity-0 disabled:opacity-50 disabled:shadow-none"
|
|
121
124
|
},
|
|
125
|
+
// Node 412:5002 — mesmo padrão, véu branco. Blur era 1.5px, Figma "Shadow/Success" pede 3.
|
|
122
126
|
success: {
|
|
123
|
-
text: "shadow-[
|
|
127
|
+
text: "relative isolate bg-success-500 text-white shadow-[0_1px_3px_0_rgba(13,189,105,0.2)] before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:pointer-events-none before:mix-blend-plus-lighter before:bg-gradient-to-b before:from-[rgba(255,255,255,0.15)] before:to-[rgba(255,255,255,0)] hover:bg-gradient-to-b hover:from-success-start hover:to-success-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] hover:before:opacity-0 active:bg-success-600 active:shadow-none active:before:opacity-0 disabled:opacity-50 disabled:shadow-none"
|
|
124
128
|
},
|
|
125
129
|
// Antes usava green-500/green-100 — tokens que não existem no design
|
|
126
130
|
// system (caem no verde default do Tailwind). Trocado pros tokens success-*.
|
|
@@ -1278,13 +1282,9 @@ var FilterCalendar = ({
|
|
|
1278
1282
|
shortcutsChange,
|
|
1279
1283
|
singleMonth = false,
|
|
1280
1284
|
maxDate = void 0,
|
|
1281
|
-
labelClassName
|
|
1285
|
+
labelClassName,
|
|
1286
|
+
clearButton = true
|
|
1282
1287
|
}) => {
|
|
1283
|
-
const style = {
|
|
1284
|
-
filter: "rounded-3xl shadow-input bg-surface hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
|
|
1285
|
-
filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
|
|
1286
|
-
filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100 shadow-input hover:bg-blue-500 hover:text-accent-label active:text-accent-label active:bg-blue-600 active:border-blue-600"
|
|
1287
|
-
};
|
|
1288
1288
|
const [currentValue, setCurrentValue] = useState([]);
|
|
1289
1289
|
const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
|
|
1290
1290
|
const shorcuts = [
|
|
@@ -1516,8 +1516,15 @@ var FilterCalendar = ({
|
|
|
1516
1516
|
name,
|
|
1517
1517
|
control,
|
|
1518
1518
|
render: ({ field }) => {
|
|
1519
|
-
var _a;
|
|
1519
|
+
var _a, _b, _c;
|
|
1520
1520
|
let hasValue = ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 || !!calendarLabel && calendarLabel !== shorcuts[0].label;
|
|
1521
|
+
const clearValue = () => {
|
|
1522
|
+
if (!onClear) return;
|
|
1523
|
+
onClear();
|
|
1524
|
+
setCurrentValue([]);
|
|
1525
|
+
field.onChange([]);
|
|
1526
|
+
};
|
|
1527
|
+
const chipLabel = calendarLabel ? calendarLabel : ((_b = field == null ? void 0 : field.value) == null ? void 0 : _b.length) > 0 ? (_c = field == null ? void 0 : field.value) == null ? void 0 : _c.map((item) => item !== null ? format(item, "dd/MM/yyyy") : "").join(" - ") : label;
|
|
1521
1528
|
return /* @__PURE__ */ jsx(
|
|
1522
1529
|
Popover,
|
|
1523
1530
|
{
|
|
@@ -1525,121 +1532,104 @@ var FilterCalendar = ({
|
|
|
1525
1532
|
{ ["w-full"]: isMobileSize },
|
|
1526
1533
|
"relative text-paragraph"
|
|
1527
1534
|
),
|
|
1528
|
-
children: ({ open }) => {
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
"div",
|
|
1535
|
+
children: ({ open }) => /* @__PURE__ */ jsxs(Float, { composable: true, shift: 8, zIndex: 99, offset: 6, children: [
|
|
1536
|
+
/* @__PURE__ */ jsx(Float.Reference, { children: /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
|
|
1537
|
+
/* @__PURE__ */ jsxs(
|
|
1538
|
+
PopoverButton,
|
|
1533
1539
|
{
|
|
1540
|
+
as: "button",
|
|
1534
1541
|
className: clsx9(
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
[style.filterOpen]: open && !hasValue,
|
|
1538
|
-
[style.filterActive]: open && hasValue || !open && hasValue
|
|
1539
|
-
},
|
|
1540
|
-
`group px-3 h-[36px] text-p-ls font-bold disabled:shadow-none active:shadow-none flex items-center justify-between outline-none gap-2`
|
|
1542
|
+
"group/chip flex items-center justify-center gap-[6px] rounded-lg px-3 py-2 text-p-md font-bold outline-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px]",
|
|
1543
|
+
hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] hover:bg-blue-500 hover:border-transparent hover:text-white active:bg-[#007fb0] active:border-transparent active:text-white" : `bg-surface border-[0.5px] border-stroke ${labelClassName != null ? labelClassName : "text-paragraph"} shadow-[0px_1px_2px_0px_rgba(56,61,77,0.1)] hover:bg-neutral-50 active:bg-blue-100 active:border-blue-500 active:text-blue-500`
|
|
1541
1544
|
),
|
|
1542
1545
|
children: [
|
|
1543
|
-
icon && /* @__PURE__ */ jsx(
|
|
1544
|
-
|
|
1545
|
-
{
|
|
1546
|
-
className: clsx9({
|
|
1547
|
-
["text-label group-active:text-blue-500"]: !hasValue && !open,
|
|
1548
|
-
["text-blue-500"]: open && !hasValue,
|
|
1549
|
-
["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
|
|
1550
|
-
}),
|
|
1551
|
-
children: icon
|
|
1552
|
-
}
|
|
1553
|
-
),
|
|
1554
|
-
/* @__PURE__ */ jsx(
|
|
1555
|
-
"label",
|
|
1556
|
-
{
|
|
1557
|
-
className: clsx9(
|
|
1558
|
-
{
|
|
1559
|
-
[`${labelClassName != null ? labelClassName : "text-paragraph"} group-active:text-blue-500`]: !hasValue && !open,
|
|
1560
|
-
["text-blue-500"]: open && !hasValue,
|
|
1561
|
-
["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
|
|
1562
|
-
},
|
|
1563
|
-
"truncate cursor-pointer"
|
|
1564
|
-
),
|
|
1565
|
-
children: calendarLabel ? calendarLabel : ((_a2 = field == null ? void 0 : field.value) == null ? void 0 : _a2.length) > 0 ? (_b = field == null ? void 0 : field.value) == null ? void 0 : _b.map(
|
|
1566
|
-
(item) => item !== null ? format(item, "dd/MM/yyyy") : ""
|
|
1567
|
-
).join(" - ") : label
|
|
1568
|
-
}
|
|
1569
|
-
),
|
|
1546
|
+
icon && /* @__PURE__ */ jsx("div", { className: "text-[18px] leading-none", children: icon }),
|
|
1547
|
+
/* @__PURE__ */ jsx("label", { className: "truncate cursor-pointer", children: chipLabel }),
|
|
1570
1548
|
/* @__PURE__ */ jsx(
|
|
1571
1549
|
"i",
|
|
1572
1550
|
{
|
|
1573
1551
|
className: clsx9(
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
},
|
|
1579
|
-
"uil uil-angle-down text-[18px]"
|
|
1552
|
+
"text-[18px]",
|
|
1553
|
+
open ? "uil uil-angle-up" : "uil uil-angle-down",
|
|
1554
|
+
// Some quando o X de limpar aparece, pra não sobrepor.
|
|
1555
|
+
hasValue && clearButton ? "group-hover:opacity-0 group-active:opacity-0" : ""
|
|
1580
1556
|
)
|
|
1581
1557
|
}
|
|
1582
1558
|
)
|
|
1583
1559
|
]
|
|
1584
1560
|
}
|
|
1585
|
-
)
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1561
|
+
),
|
|
1562
|
+
hasValue && clearButton && /* @__PURE__ */ jsx(
|
|
1563
|
+
"button",
|
|
1564
|
+
{
|
|
1565
|
+
type: "button",
|
|
1566
|
+
"aria-label": "Limpar",
|
|
1567
|
+
onClick: (e) => {
|
|
1568
|
+
e.stopPropagation();
|
|
1569
|
+
e.preventDefault();
|
|
1570
|
+
clearValue();
|
|
1571
|
+
},
|
|
1572
|
+
className: clsx9(
|
|
1573
|
+
"absolute right-0 top-1/2 hidden h-9 -translate-y-1/2 items-center justify-end rounded-r-lg pl-2 pr-1",
|
|
1574
|
+
"bg-gradient-to-l from-blue-500 via-blue-500 via-[69%] to-transparent",
|
|
1575
|
+
"group-hover:flex group-active:flex group-active:from-[#007fb0] group-active:via-[#007fb0]"
|
|
1576
|
+
),
|
|
1577
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsx("i", { className: "uil uil-times text-[18px]" }) })
|
|
1578
|
+
}
|
|
1579
|
+
)
|
|
1580
|
+
] }) }),
|
|
1581
|
+
open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-200", children: ({ close }) => {
|
|
1582
|
+
const onClose = () => {
|
|
1583
|
+
setCurrentValue(field.value);
|
|
1584
|
+
close();
|
|
1585
|
+
};
|
|
1586
|
+
useEffect(() => {
|
|
1587
|
+
setCurrentValue(field.value);
|
|
1588
|
+
}, [open]);
|
|
1589
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
1590
|
+
calendar,
|
|
1591
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-end border-t border-t-neutral-200 pt-3", children: [
|
|
1592
|
+
onClear && /* @__PURE__ */ jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsx(
|
|
1593
|
+
Button,
|
|
1594
|
+
{
|
|
1595
|
+
variant: "link",
|
|
1596
|
+
size: "xxs",
|
|
1597
|
+
onClick: () => {
|
|
1598
|
+
clearValue();
|
|
1599
|
+
close();
|
|
1600
|
+
},
|
|
1601
|
+
children: "Limpar"
|
|
1602
|
+
}
|
|
1603
|
+
) }),
|
|
1604
|
+
/* @__PURE__ */ jsx(
|
|
1605
|
+
Button,
|
|
1606
|
+
{
|
|
1607
|
+
size: "xs",
|
|
1608
|
+
variant: "secondary",
|
|
1609
|
+
onClick: () => {
|
|
1610
|
+
onClose();
|
|
1611
|
+
},
|
|
1612
|
+
children: "Cancelar"
|
|
1613
|
+
}
|
|
1614
|
+
),
|
|
1615
|
+
/* @__PURE__ */ jsx(
|
|
1616
|
+
Button,
|
|
1617
|
+
{
|
|
1618
|
+
size: "xs",
|
|
1619
|
+
variant: "primary",
|
|
1620
|
+
disabled: JSON.stringify(currentValue) === JSON.stringify(field == null ? void 0 : field.value),
|
|
1621
|
+
onClick: () => {
|
|
1622
|
+
field.onChange(currentValue);
|
|
1623
|
+
if (onApply) onApply();
|
|
1624
|
+
close();
|
|
1625
|
+
},
|
|
1626
|
+
children: "Aplicar"
|
|
1627
|
+
}
|
|
1628
|
+
)
|
|
1629
|
+
] })
|
|
1630
|
+
] });
|
|
1631
|
+
} }) })
|
|
1632
|
+
] })
|
|
1643
1633
|
}
|
|
1644
1634
|
);
|
|
1645
1635
|
}
|