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 CHANGED
@@ -148,11 +148,15 @@ var variants = {
148
148
  dangerOutline: {
149
149
  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"
150
150
  },
151
+ // Mesmo padrão do primary (node 412:5131): sólido + véu branco (rgba(255,255,255,.15)->0)
152
+ // via ::before + mix-blend-mode (background-blend-mode não funciona, ver primary acima).
153
+ // Blur da sombra era 1.5px — Figma "Shadow/Danger" pede radius 3.
151
154
  danger: {
152
- text: "shadow-[0_1px_1.5px_0_rgba(222,56,56,0.12)] text-white bg-dangerous-500 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)] active:bg-dangerous-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
155
+ 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"
153
156
  },
157
+ // Node 412:5002 — mesmo padrão, véu branco. Blur era 1.5px, Figma "Shadow/Success" pede 3.
154
158
  success: {
155
- text: "shadow-[0_1px_1.5px_0_rgba(13,189,105,0.2)] text-white bg-success-500 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)] active:bg-success-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
159
+ 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"
156
160
  },
157
161
  // Antes usava green-500/green-100 — tokens que não existem no design
158
162
  // system (caem no verde default do Tailwind). Trocado pros tokens success-*.
@@ -1310,13 +1314,9 @@ var FilterCalendar = ({
1310
1314
  shortcutsChange,
1311
1315
  singleMonth = false,
1312
1316
  maxDate = void 0,
1313
- labelClassName
1317
+ labelClassName,
1318
+ clearButton = true
1314
1319
  }) => {
1315
- const style = {
1316
- 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",
1317
- filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
1318
- 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"
1319
- };
1320
1320
  const [currentValue, setCurrentValue] = React5.useState([]);
1321
1321
  const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
1322
1322
  const shorcuts = [
@@ -1548,8 +1548,15 @@ var FilterCalendar = ({
1548
1548
  name,
1549
1549
  control,
1550
1550
  render: ({ field }) => {
1551
- var _a;
1551
+ var _a, _b, _c;
1552
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;
1553
1560
  return /* @__PURE__ */ jsxRuntime.jsx(
1554
1561
  react.Popover,
1555
1562
  {
@@ -1557,121 +1564,104 @@ var FilterCalendar = ({
1557
1564
  { ["w-full"]: isMobileSize },
1558
1565
  "relative text-paragraph"
1559
1566
  ),
1560
- children: ({ open }) => {
1561
- var _a2, _b;
1562
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Float, { composable: true, shift: 8, zIndex: 99, offset: 2, children: [
1563
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Reference, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverButton, { as: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(
1564
- "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,
1565
1571
  {
1572
+ as: "button",
1566
1573
  className: clsx9__default.default(
1567
- {
1568
- [style.filter]: !hasValue && !open,
1569
- [style.filterOpen]: open && !hasValue,
1570
- [style.filterActive]: open && hasValue || !open && hasValue
1571
- },
1572
- `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)] 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`
1573
1576
  ),
1574
1577
  children: [
1575
- icon && /* @__PURE__ */ jsxRuntime.jsx(
1576
- "div",
1577
- {
1578
- className: clsx9__default.default({
1579
- ["text-label group-active:text-blue-500"]: !hasValue && !open,
1580
- ["text-blue-500"]: open && !hasValue,
1581
- ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
1582
- }),
1583
- children: icon
1584
- }
1585
- ),
1586
- /* @__PURE__ */ jsxRuntime.jsx(
1587
- "label",
1588
- {
1589
- className: clsx9__default.default(
1590
- {
1591
- [`${labelClassName != null ? labelClassName : "text-paragraph"} group-active:text-blue-500`]: !hasValue && !open,
1592
- ["text-blue-500"]: open && !hasValue,
1593
- ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
1594
- },
1595
- "truncate cursor-pointer"
1596
- ),
1597
- 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(
1598
- (item) => item !== null ? dateFns.format(item, "dd/MM/yyyy") : ""
1599
- ).join(" - ") : label
1600
- }
1601
- ),
1578
+ icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[18px] leading-none", children: icon }),
1579
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "truncate cursor-pointer", children: chipLabel }),
1602
1580
  /* @__PURE__ */ jsxRuntime.jsx(
1603
1581
  "i",
1604
1582
  {
1605
1583
  className: clsx9__default.default(
1606
- {
1607
- ["text-label group-active:text-blue-500"]: !hasValue && !open,
1608
- ["text-blue-500"]: open && !hasValue,
1609
- ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
1610
- },
1611
- "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" : ""
1612
1588
  )
1613
1589
  }
1614
1590
  )
1615
1591
  ]
1616
1592
  }
1617
- ) }) }),
1618
- 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 }) => {
1619
- const onClose = () => {
1620
- setCurrentValue(field.value);
1621
- close();
1622
- };
1623
- React5.useEffect(() => {
1624
- setCurrentValue(field.value);
1625
- }, [open]);
1626
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
1627
- calendar,
1628
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end border-t border-t-neutral-200 pt-3", children: [
1629
- onClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
1630
- Button,
1631
- {
1632
- variant: "link",
1633
- size: "xxs",
1634
- onClick: () => {
1635
- if (onClear) {
1636
- onClear();
1637
- setCurrentValue([]);
1638
- field.onChange([]);
1639
- }
1640
- close();
1641
- },
1642
- children: "Limpar"
1643
- }
1644
- ) }),
1645
- /* @__PURE__ */ jsxRuntime.jsx(
1646
- Button,
1647
- {
1648
- size: "xs",
1649
- variant: "secondary",
1650
- onClick: () => {
1651
- onClose();
1652
- },
1653
- children: "Cancelar"
1654
- }
1655
- ),
1656
- /* @__PURE__ */ jsxRuntime.jsx(
1657
- Button,
1658
- {
1659
- size: "xs",
1660
- variant: "primary",
1661
- disabled: JSON.stringify(currentValue) === JSON.stringify(field == null ? void 0 : field.value),
1662
- onClick: () => {
1663
- field.onChange(currentValue);
1664
- if (onApply) onApply();
1665
- close();
1666
- },
1667
- children: "Aplicar"
1668
- }
1669
- )
1670
- ] })
1671
- ] });
1672
- } }) })
1673
- ] });
1674
- }
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
+ ] })
1675
1665
  }
1676
1666
  );
1677
1667
  }