@greatapps/common 1.1.695 → 1.1.697

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

@@ -1,117 +1,117 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import { cn } from "../../../infra/utils/clsx"
-
-function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+'use client';
+
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../infra/utils/clsx"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

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,79 +1,79 @@
-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}
-      // i18n-TODO: aria-label hardcoded — CircularProgress has no 'use client' directive and
-      // receives no translate prop, so useTranslations() cannot be called here without
-      // converting it to a client component. Key to use: common.forms.circularProgress.ariaLabel ('Progresso').
-      // Either add 'use client' + useTranslations(), or accept a translate prop from the caller.
-      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}
+      // i18n-TODO: aria-label hardcoded — CircularProgress has no 'use client' directive and
+      // receives no translate prop, so useTranslations() cannot be called here without
+      // converting it to a client component. Key to use: common.forms.circularProgress.ariaLabel ('Progresso').
+      // Either add 'use client' + useTranslations(), or accept a translate prop from the caller.
+      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,67 +1,67 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import {
-  calculateRadius,
-  calculateCircumference,
-  calculatePercentage,
-  calculateCircularProgressOffset,
-} from "../../../infra/utils/percentage";
-import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
-
-interface CircularProgressProps {
-  current: number;
-  total: number;
-  size?: number;
-  strokeWidth?: number;
-}
-
-export default function DefaultCircularProgress({
-  current,
-  total,
-  size = 62,
-  strokeWidth = 3,
-}: CircularProgressProps) {
-  const translate = useTranslations();
-  const isDefaultWl = useIsDefaultWhitelabel();
-  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={translate('common.forms.circularProgress.ariaLabel')}
-    >
-      <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={isDefaultWl ? "var(--color-cyan-300)" : "var(--color-zinc-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>
-  );
-}
+'use client';
+
+import { useTranslations } from 'next-intl';
+import {
+  calculateRadius,
+  calculateCircumference,
+  calculatePercentage,
+  calculateCircularProgressOffset,
+} from "../../../infra/utils/percentage";
+import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
+
+interface CircularProgressProps {
+  current: number;
+  total: number;
+  size?: number;
+  strokeWidth?: number;
+}
+
+export default function DefaultCircularProgress({
+  current,
+  total,
+  size = 62,
+  strokeWidth = 3,
+}: CircularProgressProps) {
+  const translate = useTranslations();
+  const isDefaultWl = useIsDefaultWhitelabel();
+  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={translate('common.forms.circularProgress.ariaLabel')}
+    >
+      <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={isDefaultWl ? "var(--color-cyan-300)" : "var(--color-zinc-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>
+  );
+}