@etus/ui 0.4.0-beta.1 → 0.4.0-beta.2

package/dist/index.d.ts

@@ -7510,6 +7510,11 @@ interface SheetOverlayProps extends ComponentProps<typeof SheetPrimitive.Overlay
  * Sheet content component props with variant and size support
  */
 interface SheetContentProps extends ComponentProps<typeof SheetPrimitive.Content>, VariantProps<typeof sheetContentVariants> {
+    /**
+     * Background overlay style
+     * @default "default"
+     */
+    overlayVariant?: SheetOverlayVariant;
     /**
      * Whether to show the close button
      * @default true
@@ -7554,7 +7559,7 @@ declare function SheetTrigger({ ...props }: SheetTriggerProps): react_jsx_runtim
 declare function SheetClose({ ...props }: SheetCloseProps): react_jsx_runtime.JSX.Element;
 declare function SheetPortal({ ...props }: SheetPortalProps): react_jsx_runtime.JSX.Element;
 declare function SheetOverlay({ className, variant, ...props }: SheetOverlayProps): react_jsx_runtime.JSX.Element;
-declare function SheetContent({ className, children, side, size, showCloseButton, ...props }: SheetContentProps): react_jsx_runtime.JSX.Element;
+declare function SheetContent({ className, children, side, size, showCloseButton, overlayVariant, ...props }: SheetContentProps): react_jsx_runtime.JSX.Element;
 declare function SheetHeader({ className, ...props }: SheetHeaderProps): react_jsx_runtime.JSX.Element;
 declare function SheetBody({ className, ...props }: SheetBodyProps): react_jsx_runtime.JSX.Element;
 declare function SheetFooter({ className, ...props }: SheetFooterProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -4435,7 +4435,7 @@ function StatusIndicator({
   const defaultAriaLabel = `Status: ${variant ?? "neutral"}`;
   const accessibleLabel = ariaLabel ?? (label ? void 0 : defaultAriaLabel);
   const isBar = shape === "bar-vertical" || shape === "bar-horizontal";
-  const isProd = process.env["NODE_ENV"] === "production";
+  const isProd = typeof process !== "undefined" && process.env["NODE_ENV"] === "production";
   if (isBar && label && !isProd) {
     console.warn(
       `<StatusIndicator shape="${shape}"> ignores the \`label\` prop. Use shape="dot" to combine with label, or move the label to surrounding context.`
@@ -13672,7 +13672,7 @@ var timePickerTriggerVariants = cva71(
 );
 var timeScrollListVariants = cva71(
   [
-    "flex flex-col overflow-y-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
+    "flex flex-col overflow-y-auto",
     "max-h-60 min-w-12"
   ],
   {
@@ -15376,10 +15376,11 @@ function SheetContent({
   side = "right",
   size = "default",
   showCloseButton = true,
+  overlayVariant,
   ...props
 }) {
   return /* @__PURE__ */ jsxs63(SheetPortal, { children: [
-    /* @__PURE__ */ jsx93(SheetOverlay, {}),
+    /* @__PURE__ */ jsx93(SheetOverlay, { variant: overlayVariant }),
     /* @__PURE__ */ jsxs63(
       SheetPrimitive.Content,
       {
@@ -20704,9 +20705,26 @@ function ChartContainer({
 }) {
   const uniqueId = React72.useId();
   const chartId = `chart-${id ?? uniqueId.replaceAll(":", "")}`;
+  const wrapperRef = React72.useRef(null);
+  const [hasSize, setHasSize] = React72.useState(false);
+  React72.useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      if (entry.contentRect.width > 8 && entry.contentRect.height > 8) {
+        setHasSize(true);
+      }
+    });
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
   return /* @__PURE__ */ jsx115(ChartContext, { value: { config }, children: /* @__PURE__ */ jsxs77(
     "div",
     {
+      ref: wrapperRef,
       className: cn(
         chartContainerVariants(),
         className
@@ -20716,7 +20734,7 @@ function ChartContainer({
       ...props,
       children: [
         /* @__PURE__ */ jsx115(ChartStyle, { config, id: chartId }),
-        /* @__PURE__ */ jsx115(RechartsPrimitive.ResponsiveContainer, { height: "100%", minHeight: 1, minWidth: 1, width: "100%", children })
+        hasSize && /* @__PURE__ */ jsx115(RechartsPrimitive.ResponsiveContainer, { height: "100%", minHeight: 1, minWidth: 1, width: "100%", children })
       ]
     }
   ) });
@@ -20923,7 +20941,7 @@ function ChartLegendContent({
       ref: scrollRef,
       className: cn(
         chartLegendVariants({ position: verticalAlign === "top" ? "top" : "bottom" }),
-        enableSlider && "overflow-x-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
+        enableSlider && "overflow-x-auto",
         className
       ),
       "aria-label": isInteractive ? "Chart legend filters" : void 0,
@@ -32147,7 +32165,7 @@ function ScatterChart({
 ScatterChart.displayName = "ScatterChart";
 
 // src/components/data-display/SingleStat/SingleStat.tsx
-import { useEffect as useEffect26, useRef as useRef37, useState as useState49 } from "react";
+import { useEffect as useEffect27, useRef as useRef37, useState as useState50 } from "react";
 import { jsx as jsx163, jsxs as jsxs119 } from "react/jsx-runtime";
 var sizeClasses = {
   lg: "text-4xl",
@@ -32164,10 +32182,10 @@ var skeletonSizes = {
   xs: "h-6"
 };
 function useAnimatedCounter(targetValue, duration, enabled) {
-  const [count, setCount] = useState49(0);
+  const [count, setCount] = useState50(0);
   const animationFrameRef = useRef37(0);
   const startTimeRef = useRef37(null);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!enabled) {
       return;
     }
@@ -33820,18 +33838,18 @@ import { jsx as jsx170, jsxs as jsxs125 } from "react/jsx-runtime";
 var errorDefaults = {
   "401": {
     code: "401",
-    description: "Faca login para acessar este conteudo.",
-    title: "Nao autenticado"
+    description: "Fa\xE7a login para acessar este conte\xFAdo.",
+    title: "N\xE3o autenticado"
   },
   "403": {
     code: "403",
-    description: "Voce nao tem permissao para acessar este recurso.",
+    description: "Voc\xEA n\xE3o tem permiss\xE3o para acessar este recurso.",
     title: "Acesso negado"
   },
   "404": {
     code: "404",
-    description: "A pagina que voce esta procurando nao existe ou foi movida.",
-    title: "Pagina nao encontrada"
+    description: "A p\xE1gina que voc\xEA est\xE1 procurando n\xE3o existe ou foi movida.",
+    title: "P\xE1gina n\xE3o encontrada"
   },
   "500": {
     code: "500",
@@ -33846,12 +33864,12 @@ var errorDefaults = {
   maintenance: {
     code: "",
     description: "Estamos realizando melhorias. Voltamos em breve!",
-    title: "Em manutencao"
+    title: "Em manuten\xE7\xE3o"
   },
   offline: {
     code: "",
-    description: "Verifique sua conexao com a internet e tente novamente.",
-    title: "Sem conexao"
+    description: "Verifique sua conex\xE3o com a internet e tente novamente.",
+    title: "Sem conex\xE3o"
   }
 };
 function getDefaultIcon(type) {
@@ -41816,6 +41834,7 @@ function Search2({
   const debounceTimerRef = React134.useRef(
     null
   );
+  const blurTimerRef = React134.useRef(null);
   const inputRef = React134.useRef(null);
   const flatResults = React134.useMemo(() => {
     return results;
@@ -41923,7 +41942,7 @@ function Search2({
     onOpenChange?.(true);
   }, [isOpenControlled, onOpenChange]);
   const handleBlur = React134.useCallback(() => {
-    setTimeout(() => {
+    blurTimerRef.current = setTimeout(() => {
       if (!isOpenControlled) {
         setInternalOpen(false);
       }
@@ -41938,6 +41957,9 @@ function Search2({
       if (debounceTimerRef.current) {
         clearTimeout(debounceTimerRef.current);
       }
+      if (blurTimerRef.current) {
+        clearTimeout(blurTimerRef.current);
+      }
     };
   }, []);
   const hasValue = currentValue.length > 0;
@@ -42715,7 +42737,7 @@ function SortableListDragHandle({
 
 // src/components/advanced/VersionControl/VersionControl.tsx
 import { Edit3, GitCompare, Loader2 as Loader23, Minus as Minus2, Plus as Plus4, RotateCcw as RotateCcw2 } from "lucide-react";
-import { useCallback as useCallback69, useState as useState58 } from "react";
+import { useCallback as useCallback69, useState as useState59 } from "react";
 
 // src/components/advanced/VersionControl/VersionControl.variants.ts
 import { cva as cva143 } from "class-variance-authority";
@@ -43367,10 +43389,10 @@ function VersionControl({
   className,
   ...props
 }) {
-  const [selectedVersionId, setSelectedVersionId] = useState58();
-  const [compareVersion, setCompareVersion] = useState58();
-  const [diffLines, setDiffLines] = useState58([]);
-  const [isDiffLoading, setIsDiffLoading] = useState58(false);
+  const [selectedVersionId, setSelectedVersionId] = useState59();
+  const [compareVersion, setCompareVersion] = useState59();
+  const [diffLines, setDiffLines] = useState59([]);
+  const [isDiffLoading, setIsDiffLoading] = useState59(false);
   const displayVersions = maxVersions ? versions.slice(0, maxVersions) : versions;
   const handleVersionSelect = useCallback69(
     (version) => {
@@ -43499,7 +43521,7 @@ import {
   User,
   X as X14
 } from "lucide-react";
-import { useId as useId20, useState as useState59 } from "react";
+import { useId as useId20, useState as useState60 } from "react";
 
 // src/components/workflow/ApprovalFlow/ApprovalFlow.variants.ts
 import { cva as cva144 } from "class-variance-authority";
@@ -43972,7 +43994,7 @@ function ApprovalFlow({
   onComplete: _onComplete,
   ...props
 }) {
-  const [_activeStepIndex, setActiveStepIndex] = useState59(currentStep);
+  const [_activeStepIndex, setActiveStepIndex] = useState60(currentStep);
   const effectiveLayout = layout;
   const handleApprove = (stepId) => {
     onApprove?.({ stepId });
@@ -44348,7 +44370,7 @@ import {
   Trash2 as Trash23,
   X as X15
 } from "lucide-react";
-import { useCallback as useCallback70, useId as useId21, useMemo as useMemo35, useRef as useRef43, useState as useState60 } from "react";
+import { useCallback as useCallback70, useId as useId21, useMemo as useMemo35, useRef as useRef43, useState as useState61 } from "react";
 
 // src/components/workflow/CommentSystem/CommentSystem.types.ts
 var defaultReactions = [
@@ -44689,11 +44711,11 @@ function CommentInput({
 }) {
   const inputId = useId21();
   const textareaRef = useRef43(null);
-  const [content, setContent] = useState60(initialContent);
-  const [isFocused, setIsFocused] = useState60(false);
-  const [showMentions, setShowMentions] = useState60(false);
-  const [mentionSearch, setMentionSearch] = useState60("");
-  const [selectedMentionIndex, setSelectedMentionIndex] = useState60(0);
+  const [content, setContent] = useState61(initialContent);
+  const [isFocused, setIsFocused] = useState61(false);
+  const [showMentions, setShowMentions] = useState61(false);
+  const [mentionSearch, setMentionSearch] = useState61("");
+  const [selectedMentionIndex, setSelectedMentionIndex] = useState61(0);
   const filteredUsers = useMemo35(() => {
     if (!mentionSearch) return mentionableUsers.slice(0, 5);
     return mentionableUsers.filter((u) => u.name.toLowerCase().includes(mentionSearch.toLowerCase())).slice(0, 5);
@@ -44927,7 +44949,7 @@ function CommentReactions({
   readOnly = false,
   onReact
 }) {
-  const [showPicker, setShowPicker] = useState60(false);
+  const [showPicker, setShowPicker] = useState61(false);
   const handleReact = (emoji) => {
     onReact?.({ commentId, reaction: emoji });
     setShowPicker(false);
@@ -45012,9 +45034,9 @@ function CommentItem({
   ...props
 }) {
   const commentId = useId21();
-  const [isReplying, setIsReplying] = useState60(false);
-  const [isEditing, setIsEditing] = useState60(false);
-  const [showActions, setShowActions] = useState60(false);
+  const [isReplying, setIsReplying] = useState61(false);
+  const [isEditing, setIsEditing] = useState61(false);
+  const [showActions, setShowActions] = useState61(false);
   const isOwn = currentUser?.id === comment.author.id;
   const canReply = allowReplies && depth < maxDepth && !readOnly;
   const canEdit = allowEditing && isOwn && !readOnly && !comment.isDeleted;
@@ -45421,7 +45443,7 @@ function CommentSystem({
 
 // src/components/workflow/Dashboard/Dashboard.tsx
 import { LayoutGrid, Loader2 as Loader25, RefreshCw as RefreshCw2, X as X16 } from "lucide-react";
-import { useCallback as useCallback71, useEffect as useEffect32, useId as useId22, useRef as useRef44 } from "react";
+import { useCallback as useCallback71, useEffect as useEffect33, useId as useId22, useRef as useRef44 } from "react";
 
 // src/components/workflow/Dashboard/Dashboard.variants.ts
 import { cva as cva147 } from "class-variance-authority";
@@ -45814,7 +45836,7 @@ function Dashboard({
     },
     [onWidgetClick]
   );
-  useEffect32(() => {
+  useEffect33(() => {
     if (refreshInterval && refreshInterval > 0 && onRefresh) {
       refreshTimerRef.current = setInterval(() => {
         onRefresh({ timestamp: Date.now() });
@@ -45950,7 +45972,7 @@ import {
   Undo2,
   X as X17
 } from "lucide-react";
-import { useCallback as useCallback72, useId as useId23, useMemo as useMemo36, useRef as useRef45, useState as useState61 } from "react";
+import { useCallback as useCallback72, useId as useId23, useMemo as useMemo36, useRef as useRef45, useState as useState62 } from "react";
 
 // src/components/workflow/DashboardBuilder/DashboardBuilder.variants.ts
 import { cva as cva148 } from "class-variance-authority";
@@ -46320,7 +46342,7 @@ function DashboardBuilderToolbar({
 function DashboardBuilderWidgetLibrary({
   widgets
 }) {
-  const [collapsed, setCollapsed] = useState61(false);
+  const [collapsed, setCollapsed] = useState62(false);
   const groupedWidgets = useMemo36(() => {
     return widgets.reduce((acc, widget) => {
       const category = widget.category || "default";
@@ -46392,7 +46414,7 @@ function DashboardBuilderCanvas({
   widgets
 }) {
   const canvasRef = useRef45(null);
-  const [isDragOver, setIsDragOver] = useState61(false);
+  const [isDragOver, setIsDragOver] = useState62(false);
   const handleDragOver = (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
@@ -46648,12 +46670,12 @@ function DashboardBuilder({
   ...props
 }) {
   const builderId = useId23();
-  const [widgets, setWidgets] = useState61(initialWidgets);
-  const [selectedWidgetId, setSelectedWidgetId] = useState61(null);
-  const [_builderMode, setBuilderMode] = useState61("edit");
-  const [_builderState, setBuilderState] = useState61("idle");
-  const [history, setHistory] = useState61([initialWidgets]);
-  const [historyIndex, setHistoryIndex] = useState61(0);
+  const [widgets, setWidgets] = useState62(initialWidgets);
+  const [selectedWidgetId, setSelectedWidgetId] = useState62(null);
+  const [_builderMode, setBuilderMode] = useState62("edit");
+  const [_builderState, setBuilderState] = useState62("idle");
+  const [history, setHistory] = useState62([initialWidgets]);
+  const [historyIndex, setHistoryIndex] = useState62(0);
   void snapToGrid;
   void allowOverlap;
   void enableAutoSave;
@@ -46886,13 +46908,15 @@ import {
   Plus as Plus5,
   Search as Search3
 } from "lucide-react";
-import { useId as useId24, useMemo as useMemo37, useState as useState62 } from "react";
+import { useId as useId24, useMemo as useMemo37, useState as useState63 } from "react";
 
 // src/components/workflow/KanbanBoard/KanbanBoard.variants.ts
 import { cva as cva149 } from "class-variance-authority";
 var kanbanBoardVariants = cva149(
   [
     "flex",
+    "w-full",
+    "min-w-0",
     "gap-4",
     "p-4",
     "bg-muted/30",
@@ -47488,9 +47512,9 @@ function KanbanBoard({
   ...props
 }) {
   const _boardId = useId24();
-  const [searchQuery, setSearchQuery] = useState62("");
-  const [activeId, setActiveId] = useState62(null);
-  const [collapsedColumns, setCollapsedColumns] = useState62(() => /* @__PURE__ */ new Set());
+  const [searchQuery, setSearchQuery] = useState63("");
+  const [activeId, setActiveId] = useState63(null);
+  const [collapsedColumns, setCollapsedColumns] = useState63(() => /* @__PURE__ */ new Set());
   const filteredItems = useMemo37(() => {
     let result = [...items];
     if (searchQuery) {
@@ -48592,7 +48616,7 @@ import {
   Settings2,
   Table2 as Table22
 } from "lucide-react";
-import { useCallback as useCallback73, useId as useId25, useMemo as useMemo38, useState as useState63 } from "react";
+import { useCallback as useCallback73, useId as useId25, useMemo as useMemo38, useState as useState64 } from "react";
 import { jsx as jsx199, jsxs as jsxs150 } from "react/jsx-runtime";
 var STEPS = [
   { label: "Selecionar Template", description: "Escolha o tipo de relat\xF3rio" },
@@ -49008,15 +49032,15 @@ function ReportGenerator({
   layout
 }) {
   const componentId = useId25();
-  const [currentStep, setCurrentStep] = useState63(0);
-  const [completedSteps, setCompletedSteps] = useState63([]);
-  const [generatorState, setGeneratorState] = useState63("idle");
-  const [selectedTemplateId, setSelectedTemplateId] = useState63(
+  const [currentStep, setCurrentStep] = useState64(0);
+  const [completedSteps, setCompletedSteps] = useState64([]);
+  const [generatorState, setGeneratorState] = useState64("idle");
+  const [selectedTemplateId, setSelectedTemplateId] = useState64(
     defaultTemplate
   );
-  const [config, setConfig] = useState63({});
-  const [previewData, setPreviewData] = useState63([]);
-  const [error, setError] = useState63(null);
+  const [config, setConfig] = useState64({});
+  const [previewData, setPreviewData] = useState64([]);
+  const [error, setError] = useState64(null);
   const selectedTemplate = useMemo38(
     () => templates.find((t) => t.id === selectedTemplateId),
     [templates, selectedTemplateId]
@@ -49931,7 +49955,7 @@ function TaskCard({
 
 // src/components/workflow/TaskList/TaskList.tsx
 import { Check as Check13, ChevronDown as ChevronDown8, ChevronUp as ChevronUp2, Filter, X as X20 } from "lucide-react";
-import { useCallback as useCallback74, useMemo as useMemo39, useState as useState64 } from "react";
+import { useCallback as useCallback74, useMemo as useMemo39, useState as useState65 } from "react";
 
 // src/components/workflow/TaskList/TaskList.variants.ts
 import { cva as cva154 } from "class-variance-authority";
@@ -50275,10 +50299,10 @@ function TaskList2({
   variant = "default",
   ...props
 }) {
-  const [selectedIds, setSelectedIds] = useState64(() => /* @__PURE__ */ new Set());
-  const [sortField, setSortField] = useState64("title");
-  const [sortDirection, setSortDirection] = useState64("asc");
-  const [filterStatus, setFilterStatus] = useState64(null);
+  const [selectedIds, setSelectedIds] = useState65(() => /* @__PURE__ */ new Set());
+  const [sortField, setSortField] = useState65("title");
+  const [sortDirection, setSortDirection] = useState65("asc");
+  const [filterStatus, setFilterStatus] = useState65(null);
   const filteredTasks = useMemo39(() => {
     if (!filterStatus) return tasks;
     return tasks.filter((task) => task.status === filterStatus);
@@ -50467,7 +50491,7 @@ import {
   ClockIcon as ClockIcon3,
   EyeIcon as EyeIcon2
 } from "lucide-react";
-import { useId as useId26, useMemo as useMemo40, useState as useState65 } from "react";
+import { useId as useId26, useMemo as useMemo40, useState as useState66 } from "react";
 
 // src/components/workflow/TaskStatus/TaskStatus.variants.ts
 import { cva as cva155 } from "class-variance-authority";
@@ -50641,7 +50665,7 @@ function TaskStatus({
   ...props
 }) {
   const id = useId26();
-  const [isOpen, setIsOpen] = useState65(false);
+  const [isOpen, setIsOpen] = useState66(false);
   const statusConfigs = useMemo40(
     () => ({
       ...DEFAULT_STATUS_CONFIGS,
@@ -50751,7 +50775,7 @@ function TaskStatus({
 }
 
 // src/components/workflow/Wizard/Wizard.tsx
-import { useCallback as useCallback75, useEffect as useEffect33, useRef as useRef46, useState as useState66 } from "react";
+import { useCallback as useCallback75, useEffect as useEffect34, useRef as useRef46, useState as useState67 } from "react";
 
 // src/components/workflow/Wizard/Wizard.variants.ts
 import { cva as cva156 } from "class-variance-authority";
@@ -50872,7 +50896,7 @@ function Wizard({
   variant = "default",
   ...props
 }) {
-  const [isValidating, setIsValidating] = useState66(false);
+  const [isValidating, setIsValidating] = useState67(false);
   const contentRef = useRef46(null);
   const isLastStep = currentStep >= steps.length - 1;
   const isFirstStep = currentStep === 0;
@@ -50880,7 +50904,7 @@ function Wizard({
   const stepperSteps = steps.map(
     (step, index) => convertToStepItem(step, index, currentStep)
   );
-  useEffect33(() => {
+  useEffect34(() => {
     if (contentRef.current) {
       contentRef.current.focus();
     }