@greatapps/common 1.1.215 → 1.1.217

package/src/components/ui/data-display/Tabs.tsx

@@ -1,67 +1,67 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-import { cn } from "../../../infra/utils/clsx"
-
-function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        "inline-flex w-full items-center justify-start border-b border-gray-200",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-500 transition-all border-b-2 border-transparent hover:text-gray-900 cursor-pointer data-[state=active]:text-gray-950 data-[state=active]:border-gray-950 disabled:pointer-events-none disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
-  )
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+'use client';
+
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "../../../infra/utils/clsx"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "inline-flex w-full items-center justify-start border-b border-gray-200",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-500 transition-all border-b-2 border-transparent hover:text-gray-900 cursor-pointer data-[state=active]:text-gray-950 data-[state=active]:border-gray-950 disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/ui/feedback/CircularProgress.tsx

@@ -1,75 +1,75 @@
-import { ReactNode } from "react";
-import {
-  calculateRadius,
-  calculateCircumference,
-  calculatePercentage,
-  calculateCircularProgressOffset,
-} from "../../../infra/utils/percentage";
-
-interface CircularProgressProps {
-  current: number;
-  total: number;
-  size?: number;
-  strokeWidth?: number;
-  children?: ReactNode;
-}
-
-export default function CircularProgress({
-  current,
-  total,
-  size = 62,
-  strokeWidth = 3,
-  children,
-}: CircularProgressProps) {
-  const radius = calculateRadius(size, strokeWidth);
-  const circumference = calculateCircumference(radius);
-  const percentage = calculatePercentage(current, total);
-  const offset = calculateCircularProgressOffset(percentage, circumference);
-
-  return (
-    <div
-      className="relative flex items-center justify-center"
-      style={{ width: size, height: size }}
-      role="progressbar"
-      aria-valuenow={current}
-      aria-valuemin={0}
-      aria-valuemax={total}
-      aria-label="Progresso"
-    >
-      <svg width={size} height={size} className="absolute">
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          stroke="var(--color-gray-50)"
-          strokeWidth={strokeWidth}
-          fill="white"
-        />
-
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          stroke="var(--color-gray-950)"
-          strokeWidth={strokeWidth}
-          fill="none"
-          strokeDasharray={circumference}
-          strokeDashoffset={offset}
-          strokeLinecap="round"
-          transform={`rotate(-90 ${size / 2} ${size / 2})`}
-          className="transition-all duration-300 ease-in-out"
-        />
-      </svg>
-
-      <div className="relative z-10 flex items-center justify-center w-[50px] h-[50px] rounded-full bg-gray-50 paragraph-small-semibold">
-        {children ?? (
-          <>
-            <span className="text-gray-600">{current}</span>
-            <span className="text-gray-500">/</span>
-            <span className="text-gray-600">{total}</span>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
+import { ReactNode } from "react";
+import {
+  calculateRadius,
+  calculateCircumference,
+  calculatePercentage,
+  calculateCircularProgressOffset,
+} from "../../../infra/utils/percentage";
+
+interface CircularProgressProps {
+  current: number;
+  total: number;
+  size?: number;
+  strokeWidth?: number;
+  children?: ReactNode;
+}
+
+export default function CircularProgress({
+  current,
+  total,
+  size = 62,
+  strokeWidth = 3,
+  children,
+}: CircularProgressProps) {
+  const radius = calculateRadius(size, strokeWidth);
+  const circumference = calculateCircumference(radius);
+  const percentage = calculatePercentage(current, total);
+  const offset = calculateCircularProgressOffset(percentage, circumference);
+
+  return (
+    <div
+      className="relative flex items-center justify-center"
+      style={{ width: size, height: size }}
+      role="progressbar"
+      aria-valuenow={current}
+      aria-valuemin={0}
+      aria-valuemax={total}
+      aria-label="Progresso"
+    >
+      <svg width={size} height={size} className="absolute">
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="var(--color-gray-50)"
+          strokeWidth={strokeWidth}
+          fill="white"
+        />
+
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="var(--color-gray-950)"
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+          className="transition-all duration-300 ease-in-out"
+        />
+      </svg>
+
+      <div className="relative z-10 flex items-center justify-center w-[50px] h-[50px] rounded-full bg-gray-50 paragraph-small-semibold">
+        {children ?? (
+          <>
+            <span className="text-gray-600">{current}</span>
+            <span className="text-gray-500">/</span>
+            <span className="text-gray-600">{total}</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/feedback/DefaultCircularProgress.tsx

@@ -1,61 +1,61 @@
-import {
-  calculateRadius,
-  calculateCircumference,
-  calculatePercentage,
-  calculateCircularProgressOffset,
-} from "../../../infra/utils/percentage";
-
-interface CircularProgressProps {
-  current: number;
-  total: number;
-  size?: number;
-  strokeWidth?: number;
-}
-
-export default function DefaultCircularProgress({
-  current,
-  total,
-  size = 62,
-  strokeWidth = 3,
-}: CircularProgressProps) {
-  const radius = calculateRadius(size, strokeWidth);
-  const circumference = calculateCircumference(radius);
-  const percentage = calculatePercentage(current, total);
-  const offset = calculateCircularProgressOffset(percentage, circumference);
-
-  return (
-    <div
-      className="relative flex items-center justify-center"
-      style={{ width: size, height: size }}
-      role="progressbar"
-      aria-valuenow={current}
-      aria-valuemin={0}
-      aria-valuemax={total}
-      aria-label="Progresso de exportação"
-    >
-      <svg width={size} height={size} className="absolute">
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          stroke="var(--color-zinc-200)"
-          strokeWidth={strokeWidth}
-          fill="none"
-        />
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          stroke="var(--color-cyan-300)"
-          strokeWidth={strokeWidth}
-          fill="none"
-          strokeDasharray={circumference}
-          strokeDashoffset={offset}
-          strokeLinecap="round"
-          transform={`rotate(-90 ${size / 2} ${size / 2})`}
-          className="transition-all duration-300 ease-in-out"
-        />
-      </svg>
-    </div>
-  );
-}
+import {
+  calculateRadius,
+  calculateCircumference,
+  calculatePercentage,
+  calculateCircularProgressOffset,
+} from "../../../infra/utils/percentage";
+
+interface CircularProgressProps {
+  current: number;
+  total: number;
+  size?: number;
+  strokeWidth?: number;
+}
+
+export default function DefaultCircularProgress({
+  current,
+  total,
+  size = 62,
+  strokeWidth = 3,
+}: CircularProgressProps) {
+  const radius = calculateRadius(size, strokeWidth);
+  const circumference = calculateCircumference(radius);
+  const percentage = calculatePercentage(current, total);
+  const offset = calculateCircularProgressOffset(percentage, circumference);
+
+  return (
+    <div
+      className="relative flex items-center justify-center"
+      style={{ width: size, height: size }}
+      role="progressbar"
+      aria-valuenow={current}
+      aria-valuemin={0}
+      aria-valuemax={total}
+      aria-label="Progresso de exportação"
+    >
+      <svg width={size} height={size} className="absolute">
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="var(--color-zinc-200)"
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="var(--color-cyan-300)"
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+          className="transition-all duration-300 ease-in-out"
+        />
+      </svg>
+    </div>
+  );
+}

package/src/components/ui/feedback/LoadingOverlay.tsx

@@ -1,31 +1,31 @@
-'use client';
-
-import Image from 'next/image';
-import { ReactNode } from 'react';
-
-interface LoadingOverlayProps {
-  isLoading: boolean;
-  message?: string;
-  icon?: ReactNode;
-}
-
-export function LoadingOverlay({ isLoading, message, icon }: LoadingOverlayProps) {
-  if (!isLoading) return null;
-
-  const defaultIcon = <Image src="/icons/great-icon.svg" alt="Great Icon" width={20} height={20} />;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-[2px]">
-      <div className="bg-white rounded-2xl shadow-xl px-16 py-12 flex flex-col items-center gap-6 min-w-[380px]">
-        <div className="relative flex items-center justify-center w-20 h-20">
-          <div className="absolute inset-0 border-[5px] border-gray-100 rounded-full" />
-          <div className="absolute inset-0 border-[5px] border-transparent border-t-black rounded-full animate-spin" />
-          <div className="relative z-20 flex items-center justify-center w-14 h-14 bg-gray-100 rounded-full">
-            {icon ?? defaultIcon}
-          </div>
-        </div>
-        <span className="font-bold text-gray-900 text-lg">{message}</span>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import Image from 'next/image';
+import { ReactNode } from 'react';
+
+interface LoadingOverlayProps {
+  isLoading: boolean;
+  message?: string;
+  icon?: ReactNode;
+}
+
+export function LoadingOverlay({ isLoading, message, icon }: LoadingOverlayProps) {
+  if (!isLoading) return null;
+
+  const defaultIcon = <Image src="/icons/great-icon.svg" alt="Great Icon" width={20} height={20} />;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-[2px]">
+      <div className="bg-white rounded-2xl shadow-xl px-16 py-12 flex flex-col items-center gap-6 min-w-[380px]">
+        <div className="relative flex items-center justify-center w-20 h-20">
+          <div className="absolute inset-0 border-[5px] border-gray-100 rounded-full" />
+          <div className="absolute inset-0 border-[5px] border-transparent border-t-black rounded-full animate-spin" />
+          <div className="relative z-20 flex items-center justify-center w-14 h-14 bg-gray-100 rounded-full">
+            {icon ?? defaultIcon}
+          </div>
+        </div>
+        <span className="font-bold text-gray-900 text-lg">{message}</span>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/feedback/Progress.tsx

@@ -1,40 +1,40 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-import { cn } from "../../../infra/utils/clsx"
-
-interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root> {
-  indicatorColor?: string
-}
-
-function Progress({
-  className,
-  value,
-  indicatorColor,
-  ...props
-}: ProgressProps) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className={cn(
-          "bg-primary h-full w-full flex-1 transition-all rounded-full",
-          indicatorColor
-        )}
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
-}
-
-export { Progress }
+'use client';
+
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { cn } from "../../../infra/utils/clsx"
+
+interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root> {
+  indicatorColor?: string
+}
+
+function Progress({
+  className,
+  value,
+  indicatorColor,
+  ...props
+}: ProgressProps) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className={cn(
+          "bg-primary h-full w-full flex-1 transition-all rounded-full",
+          indicatorColor
+        )}
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }