@greatapps/common 1.1.154 → 1.1.156

package/src/components/ui/buttons/Button.tsx

@@ -1,57 +1,57 @@
-'use client';
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../../../infra/utils/clsx"
-
-const buttonVariants = cva(
-  "paragraph-small-semibold cursor-pointer flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: " bg-gray-950 text-white hover:bg-gray-950/90",
-        secondary:
-          "bg-white text-gray-950 border-gray-200 hover:border-gray-400 border",
-        ghost:
-          "text-gray-600 hover:bg-accent hover:text-gray-950 dark:hover:bg-accent/50",
-        brand: "bg-pages-300 hover:bg-pages-200 text-gray-950",
-      },
-      size: {
-        default: "h-12 px-4 py-2 has-[>svg]:px-3",
-        sm: "rounded-md gap-1.5 px-2 py-2 has-[>svg]:px-2.5",
-        lg: "rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
+'use client';
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../../infra/utils/clsx"
+
+const buttonVariants = cva(
+  "paragraph-small-semibold cursor-pointer flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: " bg-gray-950 text-white hover:bg-gray-950/90",
+        secondary:
+          "bg-white text-gray-950 border-gray-200 hover:border-gray-400 border",
+        ghost:
+          "text-gray-600 hover:bg-accent hover:text-gray-950 dark:hover:bg-accent/50",
+        brand: "bg-pages-300 hover:bg-pages-200 text-gray-950",
+      },
+      size: {
+        default: "h-12 px-4 py-2 has-[>svg]:px-3",
+        sm: "rounded-md gap-1.5 px-2 py-2 has-[>svg]:px-2.5",
+        lg: "rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/buttons/CancelButton.tsx

@@ -1,14 +1,14 @@
-'use client';
-
-import * as React from "react";
-
-export default function CancelButton({
-  ...props
-}: React.ComponentProps<"button">) {
-  return (
-    <button
-      className="flex h-8 px-2 justify-center items-center rounded-lg bg-red-50 text-red-600 font-semibold text-sm px-3 cursor-pointer hover:bg-red-100"
-      {...props}
-    />
-  );
-}
+'use client';
+
+import * as React from "react";
+
+export default function CancelButton({
+  ...props
+}: React.ComponentProps<"button">) {
+  return (
+    <button
+      className="flex h-8 px-2 justify-center items-center rounded-lg bg-red-50 text-red-600 font-semibold text-sm px-3 cursor-pointer hover:bg-red-100"
+      {...props}
+    />
+  );
+}

package/src/components/ui/buttons/CopyButton.tsx

@@ -1,54 +1,54 @@
-'use client';
-
-import { Check, Copy } from "lucide-react";
-import { toast } from "sonner";
-import { Toast } from "../feedback/Toast";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip";
-import useCopyToClipboard from "../../../hooks/copy-to-clipboard.hook";
-import { cn } from "../../../infra/utils/clsx";
-
-interface CopyButtonProps {
-  textToCopy: string;
-  size?: number;
-  className?: string;
-  tooltipText?: string;
-  successMessage?: string;
-}
-
-export function CopyButton({
-  textToCopy,
-  size = 14,
-  className,
-  tooltipText = "Copiar link",
-  successMessage = "Link copiado",
-}: CopyButtonProps) {
-  const { isCopied, copy } = useCopyToClipboard({
-    onSuccess: () => {
-      toast.custom((t) => (
-        <Toast variant="success" message={successMessage} toastId={t} />
-      ));
-    },
-    onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Não foi possível copiar o link" toastId={t} />
-      ));
-    },
-  });
-
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        asChild
-        onClick={(e: React.MouseEvent) => {
-          e.stopPropagation();
-          copy(textToCopy);
-        }}
-      >
-        <span className={cn("cursor-pointer text-gray-500", className)}>
-          {isCopied ? <Check size={size} /> : <Copy size={size} />}
-        </span>
-      </TooltipTrigger>
-      <TooltipContent>{isCopied ? "Copiado!" : tooltipText}</TooltipContent>
-    </Tooltip>
-  );
-}
+'use client';
+
+import { Check, Copy } from "lucide-react";
+import { toast } from "sonner";
+import { Toast } from "../feedback/Toast";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip";
+import useCopyToClipboard from "../../../hooks/copy-to-clipboard.hook";
+import { cn } from "../../../infra/utils/clsx";
+
+interface CopyButtonProps {
+  textToCopy: string;
+  size?: number;
+  className?: string;
+  tooltipText?: string;
+  successMessage?: string;
+}
+
+export function CopyButton({
+  textToCopy,
+  size = 14,
+  className,
+  tooltipText = "Copiar link",
+  successMessage = "Link copiado",
+}: CopyButtonProps) {
+  const { isCopied, copy } = useCopyToClipboard({
+    onSuccess: () => {
+      toast.custom((t) => (
+        <Toast variant="success" message={successMessage} toastId={t} />
+      ));
+    },
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Não foi possível copiar o link" toastId={t} />
+      ));
+    },
+  });
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        asChild
+        onClick={(e: React.MouseEvent) => {
+          e.stopPropagation();
+          copy(textToCopy);
+        }}
+      >
+        <span className={cn("cursor-pointer text-gray-500", className)}>
+          {isCopied ? <Check size={size} /> : <Copy size={size} />}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{isCopied ? "Copiado!" : tooltipText}</TooltipContent>
+    </Tooltip>
+  );
+}

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

@@ -1,81 +1,81 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-import { cn } from "../../../infra/utils/clsx"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  const itemRef = React.useRef<HTMLDivElement>(null);
-
-  return (
-    <AccordionPrimitive.Item
-      ref={itemRef}
-      data-slot="accordion-item"
-      className={cn("cursor-pointer border rounded-lg p-5", className)}
-      onClick={(e) => {
-        // Evita abrir/fechar quando o clique já é no Trigger
-        if ((e.target as HTMLElement).closest("[data-slot='accordion-trigger']")) return;
-
-        // Procura o trigger interno e clica nele
-        const trigger = itemRef.current?.querySelector("[data-slot='accordion-trigger']") as HTMLElement | null;
-        trigger?.click();
-      }}
-      {...props}
-    >
-      {children}
-    </AccordionPrimitive.Item>
-  );
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="size-5! text-gray-950 pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-3 paragraph-small-regular text-gray-500", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+'use client';
+
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+import { cn } from "../../../infra/utils/clsx"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  const itemRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <AccordionPrimitive.Item
+      ref={itemRef}
+      data-slot="accordion-item"
+      className={cn("cursor-pointer border rounded-lg p-5", className)}
+      onClick={(e) => {
+        // Evita abrir/fechar quando o clique já é no Trigger
+        if ((e.target as HTMLElement).closest("[data-slot='accordion-trigger']")) return;
+
+        // Procura o trigger interno e clica nele
+        const trigger = itemRef.current?.querySelector("[data-slot='accordion-trigger']") as HTMLElement | null;
+        trigger?.click();
+      }}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Item>
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="size-5! text-gray-950 pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-3 paragraph-small-regular text-gray-500", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

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

@@ -1,47 +1,47 @@
-'use client';
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../../../infra/utils/clsx"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }
+'use client';
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../../infra/utils/clsx"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }