@ttoss/components 2.14.24 → 2.14.26

package/dist/DatePicker/index.mjs

@@ -1,339 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Box, Button, Flex, Label, Text } from "@ttoss/ui";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "@ttoss/react-icons";
-import { DayPicker } from "react-day-picker";
-import { ptBR } from "react-day-picker/locale";
-
-//#region src/components/DatePicker/DatePicker.tsx
-var formatDate = date => {
-  return date.toLocaleDateString("pt-BR");
-};
-var DatePicker = ({
-  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 = event => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) setIsOpen(false);
-    };
-    if (isOpen) document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-  const commitSelection = range => {
-    setDate(range);
-    onChange?.(range);
-  };
-  const handlePresetClick = preset => {
-    commitSelection(preset.getValue());
-    setIsOpen(false);
-  };
-  const handleDayPickerSelect = 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) {
-      setPickerSelection({
-        from: selected.from.getTime() === date?.from?.getTime() ? selected.to : selected.from,
-        to: void 0
-      });
-      return;
-    }
-    setPickerSelection(selected);
-    if (selected?.from && selected?.to) {
-      commitSelection(selected);
-      setIsOpen(false);
-    } else if (!selected?.from && !selected?.to) commitSelection(void 0);
-  };
-  const handleDayClick = day => {
-    if (date?.from && date?.to) {
-      isResettingRangeRef.current = true;
-      setPickerSelection({
-        from: day,
-        to: void 0
-      });
-    }
-  };
-  return /* @__PURE__ */jsxs(Flex, {
-    ref: containerRef,
-    sx: {
-      flexDirection: "column",
-      gap: "1",
-      position: "relative"
-    },
-    children: [label && /* @__PURE__ */jsx(Label, {
-      children: label
-    }), /* @__PURE__ */jsx(Button, {
-      disabled,
-      variant: "secondary",
-      onClick: () => {
-        return setIsOpen(!isOpen);
-      },
-      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"
-        }
-      },
-      children: date?.from ? date.to ? /* @__PURE__ */jsxs(Text, {
-        sx: {
-          fontSize: ["12px", "14px"],
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        children: [formatDate(date.from), " - ", formatDate(date.to)]
-      }) : /* @__PURE__ */jsx(Text, {
-        sx: {
-          fontSize: ["12px", "14px"],
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        children: formatDate(date.from)
-      }) : /* @__PURE__ */jsx(Text, {
-        sx: {
-          fontSize: ["12px", "14px"]
-        },
-        children: "Selecione o período"
-      })
-    }), isOpen && /* @__PURE__ */jsxs(Fragment, {
-      children: [/* @__PURE__ */jsx(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: () => {
-          return setIsOpen(false);
-        }
-      }), /* @__PURE__ */jsxs(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"
-        },
-        children: [/* @__PURE__ */jsxs(Flex, {
-          sx: {
-            display: ["flex", "none"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: "12px 16px",
-            borderBottom: "1px solid",
-            borderColor: "display.border.muted.default"
-          },
-          children: [/* @__PURE__ */jsx(Text, {
-            sx: {
-              fontSize: "16px",
-              fontWeight: 600
-            },
-            children: label || "Selecione o período"
-          }), /* @__PURE__ */jsx(Button, {
-            variant: "ghost",
-            onClick: () => {
-              return setIsOpen(false);
-            },
-            sx: {
-              padding: "4px",
-              minWidth: "auto",
-              width: "32px",
-              height: "32px"
-            },
-            children: /* @__PURE__ */jsx(Icon, {
-              icon: "mdi:close",
-              size: 20
-            })
-          })]
-        }), /* @__PURE__ */jsxs(Flex, {
-          sx: {
-            minHeight: "300px",
-            flexDirection: ["column", "row"],
-            maxHeight: ["calc(80vh - 60px)", "none"],
-            overflow: ["auto", "visible"]
-          },
-          children: [presets && presets.length > 0 && /* @__PURE__ */jsx(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"
-              }
-            },
-            children: presets?.map(preset => {
-              return /* @__PURE__ */jsx(Button, {
-                variant: "ghost",
-                onClick: () => {
-                  return handlePresetClick(preset);
-                },
-                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"
-                  }
-                },
-                children: preset.label
-              }, preset.label);
-            })
-          }), /* @__PURE__ */jsx(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%"
-                }
-              }
-            },
-            children: /* @__PURE__ */jsx(DayPicker, {
-              disabled,
-              mode: "range",
-              locale: ptBR,
-              selected: pickerSelection?.from ? {
-                from: pickerSelection.from,
-                to: pickerSelection.to ?? pickerSelection.from
-              } : void 0,
-              onSelect: selected => {
-                return handleDayPickerSelect(selected);
-              },
-              onDayClick: handleDayClick,
-              weekStartsOn: 1,
-              showOutsideDays: true
-            })
-          })]
-        })]
-      })]
-    })]
-  });
-};
-
-//#endregion
-export { DatePicker };

package/dist/Drawer/index.d.mts

@@ -1,17 +0,0 @@
-
-import { BoxProps } from "@ttoss/ui";
-import * as React from "react";
-import DrawerUi from "react-modern-drawer";
-
-//#region src/components/Drawer/Drawer.d.ts
-type DrawerUiProps = React.ComponentProps<typeof DrawerUi>;
-type DrawerProps = DrawerUiProps & {
-  sx?: BoxProps['sx'];
-};
-declare const Drawer: ({
-  children,
-  sx,
-  ...props
-}: DrawerProps) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { Drawer, DrawerProps };

package/dist/Drawer/index.mjs

@@ -1,66 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Box } from "@ttoss/ui";
-import "react";
-import { jsx } from "react/jsx-runtime";
-import DrawerUi from "react-modern-drawer";
-
-//#region src/components/Drawer/Drawer.tsx
-var Drawer = ({
-  children,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */jsx(Box, {
-    "data-testid": "drawer-container",
-    sx: {
-      /**
-      * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
-      */
-      zIndex: "overlay",
-      width: "100%",
-      height: "100%",
-      ".EZDrawer__checkbox": {
-        display: "none"
-      },
-      ".EZDrawer__checkbox:checked ~ .EZDrawer__overlay": {
-        display: "block",
-        opacity: 1
-      },
-      ".EZDrawer__checkbox:checked ~ .EZDrawer__container": {
-        visibility: "visible",
-        transform: "translate3d(0, 0, 0) !important"
-      },
-      ".EZDrawer__overlay ": {
-        display: "none",
-        height: "100vh",
-        left: "0",
-        position: "fixed",
-        top: "0",
-        width: "100%"
-      },
-      ".EZDrawer__container": {
-        position: "fixed",
-        visibility: "hidden",
-        backgroundColor: "navigation.background.muted.default",
-        transition: "all",
-        boxShadow: "0 0 10px 5px rgba(0, 0, 0, 0.1)",
-        paddingX: "6",
-        overflowY: "auto"
-      },
-      ...sx
-    },
-    children: /* @__PURE__ */jsx(DrawerUi, {
-      ...props,
-      children: /* @__PURE__ */jsx(Box, {
-        sx: {
-          width: "100%",
-          height: "100%"
-        },
-        children
-      })
-    })
-  });
-};
-
-//#endregion
-export { Drawer };

package/dist/EnhancedTitle/index.d.mts

@@ -1,107 +0,0 @@
-
-import { BadgeProps } from "@ttoss/ui";
-
-//#region src/components/EnhancedTitle/EnhancedTitle.types.d.ts
-/**
- * Visual variant for the icon wrapper.
- */
-type EnhancedTitleVariant = 'spotlight-accent' | 'spotlight-primary' | 'primary' | 'secondary' | 'accent' | 'positive' | 'negative' | 'informative' | 'muted';
-/**
- * Badge configuration for top and bottom badge sections.
- */
-interface EnhancedTitleBadge {
-  /**
-   * Icon to display in the badge.
-   */
-  icon?: string;
-  /**
-   * Badge label text.
-   */
-  label: string;
-  /**
-   * Badge visual variant.
-   */
-  variant?: BadgeProps['variant'];
-}
-/**
- * Props for the EnhancedTitle component.
- */
-interface EnhancedTitleProps {
-  /**
-   * Visual variant for the icon wrapper.
-   * @default 'primary'
-   */
-  variant?: EnhancedTitleVariant;
-  /**
-   * Icon to display next to the title.
-   */
-  icon?: string;
-  /**
-   * Main title text (heading).
-   */
-  title: string;
-  /**
-   * Optional subtitle/description text.
-   */
-  description?: string;
-  /**
-   * Optional text displayed next to the title (e.g., price, metadata).
-   */
-  frontTitle?: string;
-  /**
-   * Badges to display above the title.
-   */
-  topBadges?: EnhancedTitleBadge[];
-  /**
-   * Badges to display below the title.
-   */
-  bottomBadges?: EnhancedTitleBadge[];
-}
-//#endregion
-//#region src/components/EnhancedTitle/EnhancedTitle.d.ts
-/**
- * EnhancedTitle component renders a structured title section with icon, badges, and metadata.
- *
- * This component is useful for displaying rich title sections with status indicators,
- * feature tags, and supplementary information in a consistent layout.
- *
- * @example
- * ```tsx
- * <EnhancedTitle
- *   icon="fluent:shield-24-filled"
- *   title="Starter Plan"
- *   frontTitle="R$ 49,90/mês"
- *   description="Perfect for small teams"
- *   variant="primary"
- *   topBadges={[
- *     { label: 'Active', variant: 'positive', icon: 'fluent:checkmark-circle-24-filled' }
- *   ]}
- *   bottomBadges={[
- *     { label: 'OneClick Tracking', icon: 'fluent:checkmark-24-filled' }
- *   ]}
- * />
- * ```
- *
- * @example
- * ```tsx
- * <EnhancedTitle
- *   title="Pro Plan"
- *   frontTitle="$99/month"
- *   variant="accent"
- *   topBadges={[
- *     { label: 'Most Popular', variant: 'informative' }
- *   ]}
- * />
- * ```
- */
-declare const EnhancedTitle: ({
-  variant,
-  icon,
-  title,
-  description,
-  frontTitle,
-  topBadges,
-  bottomBadges
-}: EnhancedTitleProps) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant };