@greatapps/common 1.1.217 → 1.1.219

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 }

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

@@ -1,101 +1,101 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { CheckCircle, XCircle, AlertCircle, Info, Circle, X } from "lucide-react"
-import { toast } from "sonner"
-import { cn } from "../../../infra/utils/clsx"
-import { Button } from "../buttons/Button"
-
-const toastVariants = cva(
-  "w-full bg-white rounded-lg p-4 shadow-lg backdrop-blur-sm transition-all",
-  {
-    variants: {
-      variant: {
-        success: "",
-        error: "",
-        warning: "",
-        info: "",
-        default: "",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const toastIconContainerVariants = cva(
-  "size-10 rounded-lg flex items-center justify-center shrink-0",
-  {
-    variants: {
-      variant: {
-        success: "bg-green-50 text-green-500",
-        error: "bg-red-50 text-red-500",
-        warning: "bg-yellow-50 text-yellow-400",
-        info: "bg-pages-50 text-pages-500",
-        default: "bg-gray-50 text-gray-950",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const TOAST_ICONS = {
-  success: CheckCircle,
-  error: XCircle,
-  warning: AlertCircle,
-  info: Info,
-  default: Circle,
-} as const
-
-interface ToastProps extends VariantProps<typeof toastIconContainerVariants> {
-  message?: React.ReactNode
-  icon?: React.ReactNode
-  children?: React.ReactNode
-  className?: string
-  toastId?: string | number
-}
-
-function Toast({
-  variant = "default",
-  message,
-  icon,
-  children,
-  className,
-  toastId,
-}: ToastProps) {
-  const Icon = variant ? TOAST_ICONS[variant] : null
-
-  return (
-    <div data-slot="toast" className={cn(toastVariants({ variant }), className, "md:min-w-[310px] lg:min-w-[310px]")}>
-      {children ? (
-        children
-      ) : (
-        <div className="flex items-center gap-3 flex-1 min-w-0">
-          <div className={cn(toastIconContainerVariants({ variant }))}>
-            {icon || (Icon && <Icon size={16} />)}
-          </div>
-
-          <span className="w-full text-gray-600 paragraph-small-medium">
-            {message}
-          </span>
-          <Button
-            variant={"ghost"}
-            className="size-8 rounded-full"
-            onClick={() => toastId && toast.dismiss(toastId)}
-          >
-            <X size={18} />
-          </Button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export { Toast, toastVariants, toastIconContainerVariants }
-export type { ToastProps }
+'use client';
+
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { IconCircleCheck, IconCircleX, IconAlertCircle, IconInfoCircle, IconCircle, IconX } from "@tabler/icons-react"
+import { toast } from "sonner"
+import { cn } from "../../../infra/utils/clsx"
+import { Button } from "../buttons/Button"
+
+const toastVariants = cva(
+  "w-full bg-white rounded-lg p-4 shadow-lg backdrop-blur-sm transition-all",
+  {
+    variants: {
+      variant: {
+        success: "",
+        error: "",
+        warning: "",
+        info: "",
+        default: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const toastIconContainerVariants = cva(
+  "size-10 rounded-lg flex items-center justify-center shrink-0",
+  {
+    variants: {
+      variant: {
+        success: "bg-green-50 text-green-500",
+        error: "bg-red-50 text-red-500",
+        warning: "bg-yellow-50 text-yellow-400",
+        info: "bg-pages-50 text-pages-500",
+        default: "bg-gray-50 text-gray-950",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const TOAST_ICONS = {
+  success: IconCircleCheck,
+  error: IconCircleX,
+  warning: IconAlertCircle,
+  info: IconInfoCircle,
+  default: IconCircle,
+} as const
+
+interface ToastProps extends VariantProps<typeof toastIconContainerVariants> {
+  message?: React.ReactNode
+  icon?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+  toastId?: string | number
+}
+
+function Toast({
+  variant = "default",
+  message,
+  icon,
+  children,
+  className,
+  toastId,
+}: ToastProps) {
+  const Icon = variant ? TOAST_ICONS[variant] : null
+
+  return (
+    <div data-slot="toast" className={cn(toastVariants({ variant }), className, "md:min-w-[310px] lg:min-w-[310px]")}>
+      {children ? (
+        children
+      ) : (
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          <div className={cn(toastIconContainerVariants({ variant }))}>
+            {icon || (Icon && <Icon size={16} />)}
+          </div>
+
+          <span className="w-full text-gray-600 paragraph-small-medium">
+            {message}
+          </span>
+          <Button
+            variant={"ghost"}
+            className="size-8 rounded-full"
+            onClick={() => toastId && toast.dismiss(toastId)}
+          >
+            <IconX size={18} />
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { Toast, toastVariants, toastIconContainerVariants }
+export type { ToastProps }