@ttoss/components 2.14.19 → 2.14.21

package/dist/esm/DatePicker/index.js

@@ -1,331 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/DatePicker/DatePicker.tsx
-import { Icon } from "@ttoss/react-icons";
-import { Box, Button, Flex, Label, Text } from "@ttoss/ui";
-import * as React from "react";
-import { DayPicker } from "react-day-picker";
-import { ptBR } from "react-day-picker/locale";
-var formatDate = /* @__PURE__ */__name(date => {
-  return date.toLocaleDateString("pt-BR");
-}, "formatDate");
-var DatePicker = /* @__PURE__ */__name(({
-  label,
-  value,
-  presets,
-  onChange,
-  disabled
-}) => {
-  const [date, setDate] = React.useState(value);
-  const [pickerSelection, setPickerSelection] = React.useState(value);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const containerRef = React.useRef(null);
-  const isResettingRangeRef = React.useRef(false);
-  React.useEffect(() => {
-    setDate(value);
-  }, [value]);
-  React.useEffect(() => {
-    if (isOpen) {
-      setPickerSelection(date);
-    }
-  }, [isOpen, date]);
-  React.useEffect(() => {
-    const handleClickOutside = /* @__PURE__ */__name(event => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }, "handleClickOutside");
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-  const commitSelection = /* @__PURE__ */__name(range => {
-    setDate(range);
-    onChange?.(range);
-  }, "commitSelection");
-  const handlePresetClick = /* @__PURE__ */__name(preset => {
-    const range = preset.getValue();
-    commitSelection(range);
-    setIsOpen(false);
-  }, "handlePresetClick");
-  const handleDayPickerSelect = /* @__PURE__ */__name(selected => {
-    if (isResettingRangeRef.current && !selected && pickerSelection?.from && !pickerSelection?.to) {
-      commitSelection({
-        from: pickerSelection.from,
-        to: pickerSelection.from
-      });
-      setIsOpen(false);
-      return;
-    }
-    isResettingRangeRef.current = false;
-    const hadFullRange = date?.from && date?.to;
-    const hadPartialPicker = pickerSelection?.from && !pickerSelection?.to;
-    if (hadFullRange && !hadPartialPicker && selected?.from && selected?.to) {
-      const clickedDay = selected.from.getTime() === date?.from?.getTime() ? selected.to : selected.from;
-      setPickerSelection({
-        from: clickedDay,
-        to: void 0
-      });
-      return;
-    }
-    setPickerSelection(selected);
-    if (selected?.from && selected?.to) {
-      commitSelection(selected);
-      setIsOpen(false);
-    } else if (!selected?.from && !selected?.to) {
-      commitSelection(void 0);
-    }
-  }, "handleDayPickerSelect");
-  const handleDayClick = /* @__PURE__ */__name(day => {
-    if (date?.from && date?.to) {
-      isResettingRangeRef.current = true;
-      setPickerSelection({
-        from: day,
-        to: void 0
-      });
-    }
-  }, "handleDayClick");
-  return /* @__PURE__ */React.createElement(Flex, {
-    ref: containerRef,
-    sx: {
-      flexDirection: "column",
-      gap: "1",
-      position: "relative"
-    }
-  }, label && /* @__PURE__ */React.createElement(Label, null, label), /* @__PURE__ */React.createElement(Button, {
-    disabled,
-    variant: "secondary",
-    onClick: /* @__PURE__ */__name(() => {
-      return setIsOpen(!isOpen);
-    }, "onClick"),
-    sx: {
-      width: "100%",
-      justifyContent: "space-between",
-      fontSize: ["14px", "14px"],
-      fontWeight: 400,
-      backgroundColor: "white",
-      padding: "8px 12px",
-      borderRadius: "lg",
-      border: "md",
-      borderColor: "display.border.muted.default",
-      height: "40px",
-      minWidth: ["auto", "240px"],
-      "&:disabled": {
-        borderColor: "display.border.muted.default"
-      }
-    }
-  }, date?.from ? date.to ? /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: ["12px", "14px"],
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    }
-  }, formatDate(date.from), " - ", formatDate(date.to)) : /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: ["12px", "14px"],
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    }
-  }, formatDate(date.from)) : /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: ["12px", "14px"]
-    }
-  }, "Selecione o per\xEDodo")), isOpen && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: ["block", "none"],
-      position: "fixed",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      zIndex: 49
-    },
-    onClick: /* @__PURE__ */__name(() => {
-      return setIsOpen(false);
-    }, "onClick")
-  }), /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      position: ["fixed", "absolute"],
-      top: ["auto", "calc(100% + 4px)"],
-      bottom: ["0", "auto"],
-      left: ["0", "0"],
-      right: ["0", "auto"],
-      width: ["100%", "auto"],
-      maxWidth: ["100%", "650px"],
-      zIndex: 50,
-      backgroundColor: "white",
-      border: "1px solid",
-      borderColor: "display.border.muted.default",
-      borderRadius: ["16px 16px 0 0", "8px"],
-      boxShadow: ["0 -4px 6px -1px rgba(0, 0, 0, 0.1)", "0 4px 6px -1px rgba(0, 0, 0, 0.1)"],
-      overflow: "hidden",
-      maxHeight: ["80vh", "none"],
-      display: "flex",
-      flexDirection: "column"
-    }
-  }, /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      display: ["flex", "none"],
-      justifyContent: "space-between",
-      alignItems: "center",
-      padding: "12px 16px",
-      borderBottom: "1px solid",
-      borderColor: "display.border.muted.default"
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "16px",
-      fontWeight: 600
-    }
-  }, label || "Selecione o per\xEDodo"), /* @__PURE__ */React.createElement(Button, {
-    variant: "ghost",
-    onClick: /* @__PURE__ */__name(() => {
-      return setIsOpen(false);
-    }, "onClick"),
-    sx: {
-      padding: "4px",
-      minWidth: "auto",
-      width: "32px",
-      height: "32px"
-    }
-  }, /* @__PURE__ */React.createElement(Icon, {
-    icon: "mdi:close",
-    size: 20
-  }))), /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      minHeight: "300px",
-      flexDirection: ["column", "row"],
-      maxHeight: ["calc(80vh - 60px)", "none"],
-      overflow: ["auto", "visible"]
-    }
-  }, presets && presets.length > 0 && /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      flexDirection: ["row", "column"],
-      gap: "4px",
-      padding: ["8px", "12px"],
-      borderRight: ["none", "1px solid"],
-      borderBottom: ["1px solid", "none"],
-      borderColor: "display.border.muted.default",
-      backgroundColor: "navigation.background.muted.default",
-      minWidth: ["auto", "140px"],
-      width: ["100%", "auto"],
-      overflowX: ["auto", "visible"],
-      overflowY: ["visible", "auto"],
-      flexWrap: ["nowrap", "wrap"],
-      "@media (max-width: 768px)": {
-        "&::-webkit-scrollbar": {
-          display: "none"
-        },
-        scrollbarWidth: "none"
-      }
-    }
-  }, presets?.map(preset => {
-    return /* @__PURE__ */React.createElement(Button, {
-      key: preset.label,
-      variant: "ghost",
-      onClick: /* @__PURE__ */__name(() => {
-        return handlePresetClick(preset);
-      }, "onClick"),
-      sx: {
-        justifyContent: ["center", "flex-start"],
-        fontSize: ["12px", "14px"],
-        fontWeight: 400,
-        padding: ["6px 8px", "8px 12px"],
-        color: "display.text.secondary.default",
-        backgroundColor: "transparent",
-        whiteSpace: "nowrap",
-        minWidth: ["auto", "auto"],
-        flexShrink: 0,
-        "&:hover": {
-          backgroundColor: "input.background.muted.active"
-        }
-      }
-    }, preset.label);
-  })), /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      padding: ["12px", "16px"],
-      flex: 1,
-      overflow: "auto",
-      "& .rdp": {
-        margin: 0
-      },
-      "& .rdp-month": {
-        width: "100%"
-      },
-      "& .rdp-day_button": {
-        borderRadius: "50% !important",
-        border: "none",
-        fontSize: ["12px", "14px"],
-        width: ["32px", "36px"],
-        height: ["32px", "36px"],
-        cursor: "pointer"
-      },
-      "& .rdp-range_start .rdp-day_button": {
-        backgroundColor: "action.background.accent.default",
-        color: "black"
-      },
-      "& .rdp-range_end .rdp-day_button": {
-        backgroundColor: "action.background.accent.default",
-        color: "black"
-      },
-      "& .rdp-day_button:hover": {
-        backgroundColor: "action.background.primary.default",
-        color: "action.text.primary.default"
-      },
-      "& .rdp-day_selected": {
-        backgroundColor: "action.background.accent.default",
-        color: "white",
-        fontWeight: 600
-      },
-      "& .rdp-day_range_middle": {
-        backgroundColor: "action.background.accent.default",
-        color: "white"
-      },
-      "& .rdp-day_range_start, & .rdp-day_range_end": {
-        backgroundColor: "action.background.accent.default",
-        color: "white",
-        fontWeight: 600
-      },
-      "& .rdp-weekday": {
-        fontSize: ["10px", "12px"],
-        fontWeight: 500,
-        color: "display.text.muted.default"
-      },
-      "& .rdp-month_caption": {
-        fontSize: ["12px", "14px"],
-        fontWeight: 600,
-        marginBottom: ["12px", "16px"]
-      },
-      "@media (max-width: 768px)": {
-        "& .rdp-caption": {
-          marginBottom: "8px"
-        },
-        "& .rdp-table": {
-          width: "100%"
-        }
-      }
-    }
-  }, /* @__PURE__ */React.createElement(DayPicker, {
-    disabled,
-    mode: "range",
-    locale: ptBR,
-    selected: pickerSelection?.from ? {
-      from: pickerSelection.from,
-      to: pickerSelection.to ?? pickerSelection.from
-    } : void 0,
-    onSelect: /* @__PURE__ */__name(selected => {
-      return handleDayPickerSelect(selected);
-    }, "onSelect"),
-    onDayClick: handleDayClick,
-    weekStartsOn: 1,
-    showOutsideDays: true
-  }))))));
-}, "DatePicker");
-export { DatePicker };

package/dist/esm/EnhancedTitle/index.js

@@ -1,190 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from 'react';
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/EnhancedTitle/EnhancedTitle.tsx
-import { Icon } from "@ttoss/react-icons";
-import { Badge, Flex, Heading, Stack, Text } from "@ttoss/ui";
-
-// src/components/EnhancedTitle/EnhancedTitle.styles.ts
-import { keyframes } from "@ttoss/ui";
-var gradientFlow = keyframes({
-  "0%": {
-    backgroundPosition: "0% 50%"
-  },
-  "50%": {
-    backgroundPosition: "100% 50%"
-  },
-  "100%": {
-    backgroundPosition: "0% 50%"
-  }
-});
-var getAccentGradientBackground = /* @__PURE__ */__name(t => {
-  const theme = t;
-  const start = theme.colors?.action?.background?.accent?.default || theme.colors?.input?.background?.accent?.default;
-  if (!start) return void 0;
-  const middle = theme.colors?.action?.background?.accent?.active || theme.colors?.input?.background?.accent?.active || start;
-  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
-}, "getAccentGradientBackground");
-var getPrimaryGradientBackground = /* @__PURE__ */__name(t => {
-  const theme = t;
-  const start = theme.colors?.action?.background?.primary?.default;
-  if (!start) return void 0;
-  const middle = theme.colors?.action?.background?.secondary?.default || start;
-  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
-}, "getPrimaryGradientBackground");
-var getEnhancedTitleIconSx = /* @__PURE__ */__name(variant => {
-  const variantStyles = {
-    "spotlight-accent": {
-      backgroundColor: "input.background.accent.default",
-      color: "action.text.accent.default",
-      borderColor: "display.border.muted.default",
-      background: getAccentGradientBackground,
-      backgroundSize: "400% 400%",
-      animation: `${gradientFlow} 6s ease infinite`
-    },
-    "spotlight-primary": {
-      backgroundColor: "action.background.primary.default",
-      color: "display.text.accent.default",
-      borderColor: "display.border.muted.default",
-      background: getPrimaryGradientBackground,
-      backgroundSize: "400% 400%",
-      animation: `${gradientFlow} 6s ease infinite`
-    },
-    primary: {
-      backgroundColor: "action.background.primary.default",
-      color: "action.text.primary.default",
-      borderColor: "display.border.muted.default"
-    },
-    secondary: {
-      backgroundColor: "action.background.secondary.default",
-      color: "action.text.primary.default",
-      borderColor: "display.border.muted.default"
-    },
-    accent: {
-      backgroundColor: "action.background.accent.default",
-      color: "action.text.accent.default",
-      borderColor: "display.border.muted.default"
-    },
-    positive: {
-      backgroundColor: "display.bg.positive.boldest",
-      color: "display.fg.positive.bolder",
-      borderColor: "display.border.muted.default"
-    },
-    negative: {
-      backgroundColor: "display.bg.negative.boldest",
-      color: "display.fg.negative.bolder",
-      borderColor: "display.border.muted.default"
-    },
-    informative: {
-      backgroundColor: "display.bg.informative.boldest",
-      color: "display.fg.informative.bolder",
-      borderColor: "display.border.muted.default"
-    },
-    muted: {
-      backgroundColor: "display.bg.muted.boldest",
-      color: "display.fg.muted.bolder",
-      borderColor: "display.border.muted.default"
-    }
-  };
-  return {
-    flexShrink: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "2xl",
-    border: "md",
-    width: "56px",
-    height: "56px",
-    ...variantStyles[variant]
-  };
-}, "getEnhancedTitleIconSx");
-
-// src/components/EnhancedTitle/EnhancedTitle.tsx
-var EnhancedTitle = /* @__PURE__ */__name(({
-  variant = "spotlight-primary",
-  icon,
-  title,
-  description,
-  frontTitle,
-  topBadges = [],
-  bottomBadges = []
-}) => {
-  return /* @__PURE__ */React.createElement(Stack, {
-    sx: {
-      paddingY: "6",
-      paddingX: "6",
-      width: "full"
-    }
-  }, /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      gap: "6",
-      alignItems: "flex-start",
-      flexDirection: ["column", "row"]
-    }
-  }, icon && /* @__PURE__ */React.createElement(Flex, {
-    sx: getEnhancedTitleIconSx(variant)
-  }, /* @__PURE__ */React.createElement(Icon, {
-    icon,
-    width: 24,
-    height: 24
-  })), /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      flexDirection: "column",
-      gap: ["4", "5"],
-      flex: 1
-    }
-  }, topBadges.length > 0 && /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      flexWrap: "wrap",
-      gap: "2",
-      alignItems: "center"
-    }
-  }, topBadges.map((badge, index) => {
-    return /* @__PURE__ */React.createElement(Badge, {
-      key: index,
-      icon: badge.icon,
-      variant: badge.variant ?? "muted",
-      sx: {
-        borderRadius: "full"
-      }
-    }, badge.label);
-  })), /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      flexDirection: ["column", "row"],
-      alignItems: ["flex-start", "baseline"],
-      gap: ["1", "3"]
-    }
-  }, /* @__PURE__ */React.createElement(Heading, {
-    as: "h2",
-    sx: {
-      fontSize: "4xl",
-      fontWeight: "semibold",
-      color: "display.text.primary.default"
-    }
-  }, title), frontTitle && /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "xl",
-      color: "display.text.secondary.default"
-    }
-  }, frontTitle)), description && /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "md",
-      color: "display.text.secondary.default"
-    }
-  }, description), bottomBadges.length > 0 && /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      flexWrap: "wrap",
-      gap: "2"
-    }
-  }, bottomBadges.map((badge, index) => {
-    return /* @__PURE__ */React.createElement(Badge, {
-      key: index,
-      icon: badge.icon ?? "fluent:checkmark-24-filled",
-      variant: badge.variant ?? "muted",
-      sx: {
-        borderRadius: "full"
-      }
-    }, badge.label);
-  })))));
-}, "EnhancedTitle");
-export { EnhancedTitle };