nexaas-ui-components 1.0.82 → 1.0.84

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.
Files changed (8) hide show
  1. package/dist/index.cjs +96 -110
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.cts +3 -1
  5. package/dist/index.d.ts +3 -1
  6. package/dist/index.js +96 -110
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1314,13 +1314,9 @@ var FilterCalendar = ({
1314
1314
  shortcutsChange,
1315
1315
  singleMonth = false,
1316
1316
  maxDate = void 0,
1317
- labelClassName
1317
+ labelClassName,
1318
+ clearButton = true
1318
1319
  }) => {
1319
- const style = {
1320
- 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",
1321
- filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
1322
- 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"
1323
- };
1324
1320
  const [currentValue, setCurrentValue] = React5.useState([]);
1325
1321
  const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
1326
1322
  const shorcuts = [
@@ -1552,8 +1548,15 @@ var FilterCalendar = ({
1552
1548
  name,
1553
1549
  control,
1554
1550
  render: ({ field }) => {
1555
- var _a;
1551
+ var _a, _b, _c;
1556
1552
  let hasValue = ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 || !!calendarLabel && calendarLabel !== shorcuts[0].label;
1553
+ const clearValue = () => {
1554
+ if (!onClear) return;
1555
+ onClear();
1556
+ setCurrentValue([]);
1557
+ field.onChange([]);
1558
+ };
1559
+ 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 ? dateFns.format(item, "dd/MM/yyyy") : "").join(" - ") : label;
1557
1560
  return /* @__PURE__ */ jsxRuntime.jsx(
1558
1561
  react.Popover,
1559
1562
  {
@@ -1561,121 +1564,104 @@ var FilterCalendar = ({
1561
1564
  { ["w-full"]: isMobileSize },
1562
1565
  "relative text-paragraph"
1563
1566
  ),
1564
- children: ({ open }) => {
1565
- var _a2, _b;
1566
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Float, { composable: true, shift: 8, zIndex: 99, offset: 2, children: [
1567
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Reference, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverButton, { as: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(
1568
- "div",
1567
+ children: ({ open }) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.Float, { composable: true, shift: 8, zIndex: 99, offset: 6, children: [
1568
+ /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Reference, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
1569
+ /* @__PURE__ */ jsxRuntime.jsxs(
1570
+ react.PopoverButton,
1569
1571
  {
1572
+ as: "button",
1570
1573
  className: clsx9__default.default(
1571
- {
1572
- [style.filter]: !hasValue && !open,
1573
- [style.filterOpen]: open && !hasValue,
1574
- [style.filterActive]: open && hasValue || !open && hasValue
1575
- },
1576
- `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`
1574
+ "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]",
1575
+ hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] group-hover:bg-blue-500 group-hover:border-transparent group-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`
1577
1576
  ),
1578
1577
  children: [
1579
- icon && /* @__PURE__ */ jsxRuntime.jsx(
1580
- "div",
1581
- {
1582
- className: clsx9__default.default({
1583
- ["text-label group-active:text-blue-500"]: !hasValue && !open,
1584
- ["text-blue-500"]: open && !hasValue,
1585
- ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
1586
- }),
1587
- children: icon
1588
- }
1589
- ),
1590
- /* @__PURE__ */ jsxRuntime.jsx(
1591
- "label",
1592
- {
1593
- className: clsx9__default.default(
1594
- {
1595
- [`${labelClassName != null ? labelClassName : "text-paragraph"} group-active:text-blue-500`]: !hasValue && !open,
1596
- ["text-blue-500"]: open && !hasValue,
1597
- ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
1598
- },
1599
- "truncate cursor-pointer"
1600
- ),
1601
- 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(
1602
- (item) => item !== null ? dateFns.format(item, "dd/MM/yyyy") : ""
1603
- ).join(" - ") : label
1604
- }
1605
- ),
1578
+ icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[18px] leading-none", children: icon }),
1579
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "truncate cursor-pointer", children: chipLabel }),
1606
1580
  /* @__PURE__ */ jsxRuntime.jsx(
1607
1581
  "i",
1608
1582
  {
1609
1583
  className: clsx9__default.default(
1610
- {
1611
- ["text-label group-active:text-blue-500"]: !hasValue && !open,
1612
- ["text-blue-500"]: open && !hasValue,
1613
- ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
1614
- },
1615
- "uil uil-angle-down text-[18px]"
1584
+ "text-[18px]",
1585
+ open ? "uil uil-angle-up" : "uil uil-angle-down",
1586
+ // Some quando o X de limpar aparece, pra não sobrepor.
1587
+ hasValue && clearButton ? "group-hover:opacity-0 group-active:opacity-0" : ""
1616
1588
  )
1617
1589
  }
1618
1590
  )
1619
1591
  ]
1620
1592
  }
1621
- ) }) }),
1622
- open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1623
- const onClose = () => {
1624
- setCurrentValue(field.value);
1625
- close();
1626
- };
1627
- React5.useEffect(() => {
1628
- setCurrentValue(field.value);
1629
- }, [open]);
1630
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
1631
- calendar,
1632
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end border-t border-t-neutral-200 pt-3", children: [
1633
- onClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
1634
- Button,
1635
- {
1636
- variant: "link",
1637
- size: "xxs",
1638
- onClick: () => {
1639
- if (onClear) {
1640
- onClear();
1641
- setCurrentValue([]);
1642
- field.onChange([]);
1643
- }
1644
- close();
1645
- },
1646
- children: "Limpar"
1647
- }
1648
- ) }),
1649
- /* @__PURE__ */ jsxRuntime.jsx(
1650
- Button,
1651
- {
1652
- size: "xs",
1653
- variant: "secondary",
1654
- onClick: () => {
1655
- onClose();
1656
- },
1657
- children: "Cancelar"
1658
- }
1659
- ),
1660
- /* @__PURE__ */ jsxRuntime.jsx(
1661
- Button,
1662
- {
1663
- size: "xs",
1664
- variant: "primary",
1665
- disabled: JSON.stringify(currentValue) === JSON.stringify(field == null ? void 0 : field.value),
1666
- onClick: () => {
1667
- field.onChange(currentValue);
1668
- if (onApply) onApply();
1669
- close();
1670
- },
1671
- children: "Aplicar"
1672
- }
1673
- )
1674
- ] })
1675
- ] });
1676
- } }) })
1677
- ] });
1678
- }
1593
+ ),
1594
+ hasValue && clearButton && /* @__PURE__ */ jsxRuntime.jsx(
1595
+ "button",
1596
+ {
1597
+ type: "button",
1598
+ "aria-label": "Limpar",
1599
+ onClick: (e) => {
1600
+ e.stopPropagation();
1601
+ e.preventDefault();
1602
+ clearValue();
1603
+ },
1604
+ className: clsx9__default.default(
1605
+ "absolute right-0 top-1/2 hidden h-9 -translate-y-1/2 items-center justify-end rounded-r-lg pl-2 pr-1",
1606
+ "bg-gradient-to-l from-blue-500 via-blue-500 via-[69%] to-transparent",
1607
+ "group-hover:flex group-active:flex group-active:from-[#007fb0] group-active:via-[#007fb0]"
1608
+ ),
1609
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-[18px]" }) })
1610
+ }
1611
+ )
1612
+ ] }) }),
1613
+ open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-200", children: ({ close }) => {
1614
+ const onClose = () => {
1615
+ setCurrentValue(field.value);
1616
+ close();
1617
+ };
1618
+ React5.useEffect(() => {
1619
+ setCurrentValue(field.value);
1620
+ }, [open]);
1621
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
1622
+ calendar,
1623
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end border-t border-t-neutral-200 pt-3", children: [
1624
+ onClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
1625
+ Button,
1626
+ {
1627
+ variant: "link",
1628
+ size: "xxs",
1629
+ onClick: () => {
1630
+ clearValue();
1631
+ close();
1632
+ },
1633
+ children: "Limpar"
1634
+ }
1635
+ ) }),
1636
+ /* @__PURE__ */ jsxRuntime.jsx(
1637
+ Button,
1638
+ {
1639
+ size: "xs",
1640
+ variant: "secondary",
1641
+ onClick: () => {
1642
+ onClose();
1643
+ },
1644
+ children: "Cancelar"
1645
+ }
1646
+ ),
1647
+ /* @__PURE__ */ jsxRuntime.jsx(
1648
+ Button,
1649
+ {
1650
+ size: "xs",
1651
+ variant: "primary",
1652
+ disabled: JSON.stringify(currentValue) === JSON.stringify(field == null ? void 0 : field.value),
1653
+ onClick: () => {
1654
+ field.onChange(currentValue);
1655
+ if (onApply) onApply();
1656
+ close();
1657
+ },
1658
+ children: "Aplicar"
1659
+ }
1660
+ )
1661
+ ] })
1662
+ ] });
1663
+ } }) })
1664
+ ] })
1679
1665
  }
1680
1666
  );
1681
1667
  }
@@ -2309,7 +2295,7 @@ var FilterSelect = ({
2309
2295
  as: "button",
2310
2296
  className: clsx9__default.default(
2311
2297
  "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]",
2312
- 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 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"
2298
+ hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] group-hover:bg-blue-500 group-hover:border-transparent group-hover:text-white active:bg-[#007fb0] active:border-transparent active:text-white" : "bg-surface border-[0.5px] border-stroke 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"
2313
2299
  ),
2314
2300
  children: [
2315
2301
  icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[18px] leading-none", children: icon }),