@ttoss/components 2.14.20 → 2.14.21

package/dist/Accordion/index.d.mts

@@ -0,0 +1,157 @@
+
+import { BoxProps } from "@ttoss/ui";
+import * as React from "react";
+
+//#region src/components/Accordion/Accordion.d.ts
+/**
+ * Individual item for the Accordion component.
+ */
+type AccordionItem = {
+  /**
+   * Unique identifier for the accordion item.
+   * If not provided, will use the index as the key.
+   */
+  id?: string;
+  /**
+   * Title displayed in the accordion header.
+   */
+  title: React.ReactNode;
+  /**
+   * Content displayed when the accordion item is expanded.
+   */
+  content: React.ReactNode;
+  /**
+   * Whether the item is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+};
+/**
+ * Render props for custom accordion item rendering.
+ */
+type AccordionRenderItemProps = {
+  /**
+   * The accordion item data.
+   */
+  item: AccordionItem;
+  /**
+   * Index of the item in the items array.
+   */
+  index: number;
+  /**
+   * Whether the item is currently expanded.
+   */
+  isExpanded: boolean;
+  /**
+   * Function to toggle the item's expanded state.
+   */
+  toggle: () => void;
+  /**
+   * Generated IDs for accessibility.
+   */
+  ids: {
+    itemId: string;
+    headingId: string;
+    panelId: string;
+  };
+};
+/**
+ * Props for the Accordion component.
+ */
+type AccordionProps = BoxProps & {
+  /**
+   * Array of accordion items to render.
+   */
+  items: AccordionItem[];
+  /**
+   * Whether multiple items can be expanded at once.
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Index or array of indices for initially expanded items.
+   */
+  defaultExpanded?: number | number[];
+  /**
+   * Callback invoked when items are expanded or collapsed.
+   * Receives array of currently expanded indices.
+   */
+  onAccordionChange?: (expandedIndices: number[]) => void;
+  /**
+   * Custom render function for accordion items.
+   * Provides full control over item rendering while maintaining accessibility.
+   */
+  renderItem?: (props: AccordionRenderItemProps) => React.ReactNode;
+};
+/**
+ * Accessible accordion component with collapsible content sections.
+ *
+ * This component provides a simplified API for creating expandable/collapsible
+ * content sections. It uses design tokens from @ttoss/theme for consistent styling
+ * and follows WAI-ARIA accordion pattern for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   items={[
+ *     {
+ *       title: 'Section 1',
+ *       content: 'Content for section 1',
+ *     },
+ *     {
+ *       title: 'Section 2',
+ *       content: 'Content for section 2',
+ *     },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   multiple
+ *   defaultExpanded={[0, 1]}
+ *   items={[
+ *     {
+ *       id: 'item-1',
+ *       title: 'Pre-expanded Section 1',
+ *       content: <div>Rich content</div>,
+ *     },
+ *     {
+ *       id: 'item-2',
+ *       title: 'Pre-expanded Section 2',
+ *       content: <p>More content</p>,
+ *     },
+ *   ]}
+ *   onAccordionChange={(expanded) => console.log('Expanded items:', expanded)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom rendering with renderItem
+ * <Accordion
+ *   items={items}
+ *   renderItem={({ item, isExpanded, toggle, ids }) => (
+ *     <CustomAccordionItem
+ *       item={item}
+ *       isExpanded={isExpanded}
+ *       onToggle={toggle}
+ *       headingId={ids.headingId}
+ *       panelId={ids.panelId}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+declare const Accordion: ({
+  items,
+  multiple,
+  defaultExpanded,
+  onAccordionChange,
+  renderItem,
+  sx,
+  ...boxProps
+}: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps };

package/dist/Accordion/index.mjs

@@ -0,0 +1,175 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Box, Button } from "@ttoss/ui";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Accordion/Accordion.tsx
+/**
+* Accessible accordion component with collapsible content sections.
+*
+* This component provides a simplified API for creating expandable/collapsible
+* content sections. It uses design tokens from @ttoss/theme for consistent styling
+* and follows WAI-ARIA accordion pattern for accessibility.
+*
+* @example
+* ```tsx
+* <Accordion
+*   items={[
+*     {
+*       title: 'Section 1',
+*       content: 'Content for section 1',
+*     },
+*     {
+*       title: 'Section 2',
+*       content: 'Content for section 2',
+*     },
+*   ]}
+* />
+* ```
+*
+* @example
+* ```tsx
+* <Accordion
+*   multiple
+*   defaultExpanded={[0, 1]}
+*   items={[
+*     {
+*       id: 'item-1',
+*       title: 'Pre-expanded Section 1',
+*       content: <div>Rich content</div>,
+*     },
+*     {
+*       id: 'item-2',
+*       title: 'Pre-expanded Section 2',
+*       content: <p>More content</p>,
+*     },
+*   ]}
+*   onAccordionChange={(expanded) => console.log('Expanded items:', expanded)}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // Custom rendering with renderItem
+* <Accordion
+*   items={items}
+*   renderItem={({ item, isExpanded, toggle, ids }) => (
+*     <CustomAccordionItem
+*       item={item}
+*       isExpanded={isExpanded}
+*       onToggle={toggle}
+*       headingId={ids.headingId}
+*       panelId={ids.panelId}
+*     />
+*   )}
+* />
+* ```
+*/
+const Accordion = ({
+  items,
+  multiple = false,
+  defaultExpanded,
+  onAccordionChange,
+  renderItem,
+  sx,
+  ...boxProps
+}) => {
+  const [expandedIndices, setExpandedIndices] = React.useState(() => {
+    if (defaultExpanded === void 0) return [];
+    return Array.isArray(defaultExpanded) ? defaultExpanded : [defaultExpanded];
+  });
+  const toggleItem = React.useCallback(index => {
+    setExpandedIndices(prev => {
+      const isExpanded = prev.includes(index);
+      let newExpanded;
+      if (isExpanded) newExpanded = prev.filter(i => {
+        return i !== index;
+      });else newExpanded = multiple ? [...prev, index] : [index];
+      onAccordionChange?.(newExpanded);
+      return newExpanded;
+    });
+  }, [multiple, onAccordionChange]);
+  return /* @__PURE__ */jsx(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      ...sx
+    },
+    ...boxProps,
+    children: items.map((item, index) => {
+      const isExpanded = expandedIndices.includes(index);
+      const itemId = item.id || `accordion-item-${index}`;
+      const headingId = `${itemId}-heading`;
+      const panelId = `${itemId}-panel`;
+      if (renderItem) return /* @__PURE__ */jsx(React.Fragment, {
+        children: renderItem({
+          item,
+          index,
+          isExpanded,
+          toggle: () => {
+            return toggleItem(index);
+          },
+          ids: {
+            itemId,
+            headingId,
+            panelId
+          }
+        })
+      }, itemId);
+      return /* @__PURE__ */jsxs(Box, {
+        sx: {
+          border: "sm",
+          borderColor: "display.border.muted.default",
+          borderRadius: "md",
+          overflow: "hidden"
+        },
+        children: [/* @__PURE__ */jsx(Button, {
+          id: headingId,
+          type: "button",
+          disabled: item.disabled,
+          onClick: () => {
+            toggleItem(index);
+          },
+          "aria-expanded": isExpanded,
+          "aria-controls": panelId,
+          rightIcon: isExpanded ? "chevron-up" : "chevron-down",
+          sx: {
+            width: "100%",
+            justifyContent: "space-between",
+            backgroundColor: isExpanded ? "display.background.muted.default" : "display.background.primary.default",
+            color: item.disabled ? "display.text.muted.default" : "display.text.primary.default",
+            fontWeight: 500,
+            border: "none",
+            borderRadius: 0,
+            transition: "background-color 0.2s ease",
+            "&:hover:not(:disabled)": {
+              backgroundColor: "display.background.muted.default"
+            },
+            "&:focus": {
+              outline: "none",
+              boxShadow: theme => {
+                return `inset 0 0 0 1px ${theme.colors?.input?.border?.accent?.default || "currentColor"}`;
+              }
+            }
+          },
+          children: item.title
+        }), isExpanded && /* @__PURE__ */jsx(Box, {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": headingId,
+          sx: {
+            padding: 4,
+            borderTop: "sm",
+            borderColor: "display.border.muted.default",
+            backgroundColor: "display.background.primary.default"
+          },
+          children: item.content
+        })]
+      }, itemId);
+    })
+  });
+};
+
+//#endregion
+export { Accordion };

package/dist/DatePicker/index.d.mts

@@ -0,0 +1,26 @@
+
+//#region src/components/DatePicker/DatePicker.d.ts
+interface DateRange {
+  from: Date | undefined;
+  to: Date | undefined;
+}
+interface DateRangePreset {
+  label: string;
+  getValue: () => DateRange;
+}
+interface DatePickerProps {
+  label?: string;
+  value?: DateRange;
+  presets?: DateRangePreset[];
+  onChange?: (range: DateRange | undefined) => void;
+  disabled?: boolean;
+}
+declare const DatePicker: ({
+  label,
+  value,
+  presets,
+  onChange,
+  disabled
+}: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { DatePicker, DateRange };

package/dist/DatePicker/index.mjs

@@ -0,0 +1,339 @@
+/** 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
+const formatDate = date => {
+  return date.toLocaleDateString("pt-BR");
+};
+const 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 };