eai-frontend-components 2.0.18 → 2.0.20

package/dist/index.js

@@ -382,22 +382,21 @@ const CarouselNext = React__namespace.forwardRef(({ className, variant = "outlin
 });
 CarouselNext.displayName = "CarouselNext";
 
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" };
+const THEMES = { light: '', dark: '.dark' };
 const ChartContext = React__namespace.createContext(null);
 function useChart() {
     const context = React__namespace.useContext(ChartContext);
     if (!context) {
-        throw new Error("useChart must be used within a <ChartContainer />");
+        throw new Error('useChart must be used within a <ChartContainer />');
     }
     return context;
 }
 const ChartContainer = React__namespace.forwardRef(({ id, className, children, config, ...props }, ref) => {
     const uniqueId = React__namespace.useId();
-    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
     return (jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: jsxRuntime.jsxs("div", { "data-chart": chartId, ref: ref, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className), ...props, children: [jsxRuntime.jsx(ChartStyle, { id: chartId, config: config }), jsxRuntime.jsx(RechartsPrimitive__namespace.ResponsiveContainer, { children: children })] }) }));
 });
-ChartContainer.displayName = "Chart";
+ChartContainer.displayName = 'Chart';
 const ChartStyle = ({ id, config }) => {
     const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
     if (!colorConfig.length) {
@@ -411,103 +410,83 @@ const ChartStyle = ({ id, config }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
                 .map(([key, itemConfig]) => {
-                const color = itemConfig.theme?.[theme] ||
-                    itemConfig.color;
+                const color = itemConfig.theme?.[theme] || itemConfig.color;
                 return color ? `  --color-${key}: ${color};` : null;
             })
-                .join("\n")}
+                .join('\n')}
 }
 `)
-                .join("\n"),
+                .join('\n'),
         } }));
 };
 const ChartTooltip = RechartsPrimitive__namespace.Tooltip;
-const ChartTooltipContent = React__namespace.forwardRef(({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
+const ChartTooltipContent = React__namespace.forwardRef(({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
     const { config } = useChart();
     const tooltipLabel = React__namespace.useMemo(() => {
         if (hideLabel || !payload?.length) {
             return null;
         }
         const [item] = payload;
-        const key = `${labelKey || item.dataKey || item.name || "value"}`;
+        const key = `${labelKey || item.dataKey || item.name || 'value'}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        const value = !labelKey && typeof label === "string"
-            ? config[label]?.label || label
-            : itemConfig?.label;
+        const value = !labelKey && typeof label === 'string' ? config[label]?.label || label : itemConfig?.label;
         if (labelFormatter) {
-            return (jsxRuntime.jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
+            return jsxRuntime.jsx("div", { className: cn('font-medium', labelClassName), children: labelFormatter(value, payload) });
         }
         if (!value) {
             return null;
         }
-        return jsxRuntime.jsx("div", { className: cn("font-medium", labelClassName), children: value });
-    }, [
-        label,
-        labelFormatter,
-        payload,
-        hideLabel,
-        labelClassName,
-        config,
-        labelKey,
-    ]);
+        return jsxRuntime.jsx("div", { className: cn('font-medium', labelClassName), children: value });
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
     if (!active || !payload?.length) {
         return null;
     }
-    const nestLabel = payload.length === 1 && indicator !== "dot";
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, jsxRuntime.jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
-                    const key = `${nameKey || item.name || item.dataKey || "value"}`;
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn('grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl', className), children: [!nestLabel ? tooltipLabel : null, jsxRuntime.jsx("div", { className: 'grid gap-1.5', children: payload.map((item, index) => {
+                    const key = `${nameKey || item.name || item.dataKey || 'value'}`;
                     const itemConfig = getPayloadConfigFromPayload(config, item, key);
                     const indicatorColor = color || item.payload.fill || item.color;
-                    return (jsxRuntime.jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [itemConfig?.icon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (!hideIndicator && (jsxRuntime.jsx("div", { className: cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
-                                        "h-2.5 w-2.5": indicator === "dot",
-                                        "w-1": indicator === "line",
-                                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                                        "my-0.5": nestLabel && indicator === "dashed",
+                    return (jsxRuntime.jsx("div", { className: cn('flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground', indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [itemConfig?.icon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (!hideIndicator && (jsxRuntime.jsx("div", { className: cn('shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]', {
+                                        'h-2.5 w-2.5': indicator === 'dot',
+                                        'w-1': indicator === 'line',
+                                        'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                                        'my-0.5': nestLabel && indicator === 'dashed',
                                     }), style: {
-                                        "--color-bg": indicatorColor,
-                                        "--color-border": indicatorColor,
-                                    } }))), jsxRuntime.jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [jsxRuntime.jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, jsxRuntime.jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (jsxRuntime.jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
+                                        '--color-bg': indicatorColor,
+                                        '--color-border': indicatorColor,
+                                    } }))), jsxRuntime.jsxs("div", { className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [jsxRuntime.jsxs("div", { className: 'grid gap-1.5', children: [nestLabel ? tooltipLabel : null, jsxRuntime.jsx("span", { className: 'text-muted-foreground', children: itemConfig?.label || item.name })] }), item.value && (jsxRuntime.jsx("span", { className: 'font-mono font-medium tabular-nums text-foreground', children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
                 }) })] }));
 });
-ChartTooltipContent.displayName = "ChartTooltip";
+ChartTooltipContent.displayName = 'ChartTooltip';
 const ChartLegend = RechartsPrimitive__namespace.Legend;
-const ChartLegendContent = React__namespace.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+const ChartLegendContent = React__namespace.forwardRef(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
     const { config } = useChart();
     if (!payload?.length) {
         return null;
     }
-    return (jsxRuntime.jsx("div", { ref: ref, className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload.map((item) => {
-            const key = `${nameKey || item.dataKey || "value"}`;
+    return (jsxRuntime.jsx("div", { ref: ref, className: cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className), children: payload.map((item) => {
+            const key = `${nameKey || item.dataKey || 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (jsxRuntime.jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+            return (jsxRuntime.jsxs("div", { className: cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'), children: [itemConfig?.icon && !hideIcon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (jsxRuntime.jsx("div", { className: 'h-2 w-2 shrink-0 rounded-[2px]', style: {
                             backgroundColor: item.color,
                         } })), itemConfig?.label] }, item.value));
         }) }));
 });
-ChartLegendContent.displayName = "ChartLegend";
+ChartLegendContent.displayName = 'ChartLegend';
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(config, payload, key) {
-    if (typeof payload !== "object" || payload === null) {
+    if (typeof payload !== 'object' || payload === null) {
         return undefined;
     }
-    const payloadPayload = "payload" in payload &&
-        typeof payload.payload === "object" &&
-        payload.payload !== null
-        ? payload.payload
-        : undefined;
+    const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null ? payload.payload : undefined;
     let configLabelKey = key;
-    if (key in payload &&
-        typeof payload[key] === "string") {
+    if (key in payload && typeof payload[key] === 'string') {
         configLabelKey = payload[key];
     }
-    else if (payloadPayload &&
-        key in payloadPayload &&
-        typeof payloadPayload[key] === "string") {
+    else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === 'string') {
         configLabelKey = payloadPayload[key];
     }
-    return configLabelKey in config
-        ? config[configLabelKey]
-        : config[key];
+    return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
 const Checkbox = React__namespace.forwardRef(({ className, value, ...props }, ref) => (jsxRuntime.jsx(CheckboxPrimitive__namespace.Root, { ref: ref, checked: !!value, className: cn('peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background-primary data-[state=checked]:text-primary-foreground', className), ...props, children: jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: cn('flex items-center justify-center text-current'), children: jsxRuntime.jsx(lucideReact.Check, { className: 'h-4 w-4' }) }) })));
@@ -719,28 +698,98 @@ const HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
 const HoverCardContent = React__namespace.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (jsxRuntime.jsx(HoverCardPrimitive__namespace.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-auto mr-20 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-2', className), ...props })));
 HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
 
+/**
+ * Modify function for phone number input mask.
+ * Automatically adjusts between landline and mobile phone formats.
+ *
+ * @param value - Current input value
+ * @param data - New input data
+ * @param selectionStart - Cursor start position
+ * @param selectionEnd - Cursor end position
+ * @returns Mask configuration object
+ */
 const modifyPhone = ({ value, data, selectionStart, selectionEnd }) => {
     const _value = value.slice(0, selectionStart) + (data ?? '') + value.slice(selectionEnd);
     _value ? _value.replace(/[\D]+/g, '').length : 0;
     return maskPhone(_value);
 };
+/**
+ * Creates a phone number mask based on the input length.
+ * - Landline: (XX) XXXX-XXXX
+ * - Mobile: (XX) X XXXX-XXXX
+ *
+ * @param value - Phone number string (can be null)
+ * @returns Mask configuration object with pattern and replacement rules
+ *
+ * @example
+ * ```tsx
+ * const mask = maskPhone('11987654321');
+ * // Returns: { mask: '(__) _ ____-____', replacement: { _: /\d/ } }
+ * ```
+ */
 function maskPhone(value) {
     const len = value ? value.replace(/[\D]+/g, '').length : 0;
     if (len > 10)
         return { mask: '(__) _ ____-____', replacement: { _: /\d/ } };
     return { mask: '(__) ____-_____', replacement: { _: /\d/ } };
 }
+/**
+ * Modify function for CPF/CNPJ input mask.
+ * Automatically switches between CPF and CNPJ formats based on input length.
+ *
+ * @param value - Current input value
+ * @param data - New input data
+ * @param selectionStart - Cursor start position
+ * @param selectionEnd - Cursor end position
+ * @returns Mask configuration object
+ */
 const modifyCpfCnpj = ({ value, data, selectionStart, selectionEnd }) => {
     const _value = value.slice(0, selectionStart) + (data ?? '') + value.slice(selectionEnd);
     _value ? _value.replace(/[\D]+/g, '').length : 0;
     return maskCpfCnpj(_value);
 };
+/**
+ * Creates a CPF or CNPJ mask based on the input length.
+ * - CPF: XXX.XXX.XXX-XX (up to 11 digits)
+ * - CNPJ: XX.XXX.XXX/XXXX-XX (12+ digits)
+ *
+ * @param value - CPF/CNPJ string (can be null)
+ * @returns Mask configuration object with pattern and replacement rules
+ *
+ * @example
+ * ```tsx
+ * const cpfMask = maskCpfCnpj('12345678901');
+ * // Returns: { mask: '___.___.___-___', replacement: { _: /\d/ } }
+ *
+ * const cnpjMask = maskCpfCnpj('12345678000195');
+ * // Returns: { mask: '__.___.___/____-__', replacement: { _: /\d/ } }
+ * ```
+ */
 function maskCpfCnpj(value) {
     const len = value ? value.replace(/[\D]+/g, '').length : 0;
     if (len > 11)
         return { mask: '__.___.___/____-__', replacement: { _: /\d/ } };
     return { mask: '___.___.___-___', replacement: { _: /\d/ } };
 }
+/**
+ * Removes all non-numeric characters from a string.
+ * Useful for extracting only digits from masked inputs.
+ *
+ * @param value - String with potential mask characters
+ * @returns String containing only numeric characters
+ *
+ * @example
+ * ```tsx
+ * const cleaned = removeMaskNumber('(11) 9 8765-4321');
+ * // Returns: '11987654321'
+ *
+ * const cleanCpf = removeMaskNumber('123.456.789-01');
+ * // Returns: '12345678901'
+ * ```
+ */
+const removeMaskNumber = (value) => {
+    return value?.replace(/\D/g, '');
+};
 
 // PHONE
 function formatPhone(telefone, removerCountryCode = true) {
@@ -3686,8 +3735,11 @@ exports.getFirstDayOfCurrentMonth = getFirstDayOfCurrentMonth;
 exports.getTailwindColorShades = getTailwindColorShades;
 exports.invertDate = invertDate;
 exports.isUUIDv4 = isUUIDv4;
+exports.maskCpfCnpj = maskCpfCnpj;
+exports.maskPhone = maskPhone;
 exports.modifyCpfCnpj = modifyCpfCnpj;
 exports.modifyPhone = modifyPhone;
+exports.removeMaskNumber = removeMaskNumber;
 exports.replaceThemeTailwindColors = replaceThemeTailwindColors;
 exports.roundNumber = roundNumber;
 exports.stringDateToDate = stringDateToDate;