@greatapps/common 1.1.516 → 1.1.517

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

@@ -1,75 +1,75 @@
-'use client';
-
-import { useState } from 'react';
-import { IconDotsVertical, IconTrash } from '@tabler/icons-react';
-import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
-import { NavBarItem } from '../../layouts/NavBarItem';
-import { CardBrandIcon } from './CardBrandIcons';
-import type { Card } from '../../../modules/cards/types';
-
-type CardItemProps = {
-  card: Card;
-  isSelected?: boolean;
-  onSelect?: () => void;
-  showMenu?: boolean;
-  canDelete?: boolean;
-  onDelete?: () => void;
-};
-
-export function CardItem({
-  card,
-  isSelected,
-  onSelect,
-  showMenu = false,
-  canDelete = true,
-  onDelete,
-}: CardItemProps) {
-  const [popoverOpen, setPopoverOpen] = useState(false);
-
-  return (
-    <div
-      className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${
-        isSelected ? 'bg-zinc-50 border-zinc-950' : 'bg-white border-zinc-200 hover:bg-zinc-50'
-      }`}
-      onClick={onSelect}
-    >
-      <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-        <span className="paragraph-small-semibold text-zinc-950 truncate">
-          {card.name}
-        </span>
-        <span className="paragraph-small-medium text-zinc-950">
-          •••• {(card.number ?? '').replaceAll(/\D/g, '').slice(-4)}
-        </span>
-      </div>
-      <CardBrandIcon brand={card.brand} />
-      {showMenu && (
-        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-          <PopoverTrigger asChild>
-            <button
-              className="size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <IconDotsVertical className="size-5 text-zinc-500" />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent
-            align="end"
-            className="w-[140px] p-2 bg-white rounded-2xl shadow-md border border-zinc-200"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {canDelete && (
-              <NavBarItem
-                icon={<IconTrash size={20} className="text-zinc-400" />}
-                label="Excluir"
-                onClick={() => {
-                  setPopoverOpen(false);
-                  onDelete?.();
-                }}
-              />
-            )}
-          </PopoverContent>
-        </Popover>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { IconDotsVertical, IconTrash } from '@tabler/icons-react';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
+import { NavBarItem } from '../../layouts/NavBarItem';
+import { CardBrandIcon } from './CardBrandIcons';
+import type { Card } from '../../../modules/cards/types';
+
+type CardItemProps = {
+  card: Card;
+  isSelected?: boolean;
+  onSelect?: () => void;
+  showMenu?: boolean;
+  canDelete?: boolean;
+  onDelete?: () => void;
+};
+
+export function CardItem({
+  card,
+  isSelected,
+  onSelect,
+  showMenu = false,
+  canDelete = true,
+  onDelete,
+}: CardItemProps) {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  return (
+    <div
+      className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${
+        isSelected ? 'bg-zinc-50 border-zinc-950' : 'bg-white border-zinc-200 hover:bg-zinc-50'
+      }`}
+      onClick={onSelect}
+    >
+      <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+        <span className="paragraph-small-semibold text-zinc-950 truncate">
+          {card.name}
+        </span>
+        <span className="paragraph-small-medium text-zinc-950">
+          •••• {(card.number ?? '').replaceAll(/\D/g, '').slice(-4)}
+        </span>
+      </div>
+      <CardBrandIcon brand={card.brand} />
+      {showMenu && (
+        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+          <PopoverTrigger asChild>
+            <button
+              className="size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <IconDotsVertical className="size-5 text-zinc-500" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="w-[140px] p-2 bg-white rounded-2xl shadow-md border border-zinc-200"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {canDelete && (
+              <NavBarItem
+                icon={<IconTrash size={20} className="text-zinc-400" />}
+                label="Excluir"
+                onClick={() => {
+                  setPopoverOpen(false);
+                  onDelete?.();
+                }}
+              />
+            )}
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}

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

@@ -1,126 +1,126 @@
-'use client';
-
-import * as React from "react"
-import {
-  IconChevronLeft,
-  IconChevronRight,
-  IconDots,
-} from "@tabler/icons-react"
-import { cn } from "../../../infra/utils/clsx"
-import { Button, buttonVariants } from "../buttons/Button"
-
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn("mx-auto flex w-full justify-center", className)}
-      {...props}
-    />
-  )
-}
-
-function PaginationContent({
-  className,
-  ...props
-}: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1.5", className)}
-      {...props}
-    />
-  )
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />
-}
-
-type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
-
-function PaginationLink({
-  className,
-  isActive,
-  size = "icon-sm",
-  ...props
-}: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? "secondary" : "ghost",
-          size,
-        }),
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function PaginationPrevious({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn("gap-1 size-8 sm:pl-2.5", className)}
-      {...props}
-    >
-      <IconChevronLeft />
-    </PaginationLink>
-  )
-}
-
-function PaginationNext({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn("gap-1 size-8 sm:pr-2.5", className)}
-      {...props}
-    >
-      <IconChevronRight />
-    </PaginationLink>
-  )
-}
-
-function PaginationEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <IconDots className="size-4 mt-1.5" />
-      <span className="sr-only">More pages</span>
-    </span>
-  )
-}
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-}
+'use client';
+
+import * as React from "react"
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconDots,
+} from "@tabler/icons-react"
+import { cn } from "../../../infra/utils/clsx"
+import { Button, buttonVariants } from "../buttons/Button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon-sm",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "secondary" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 size-8 sm:pl-2.5", className)}
+      {...props}
+    >
+      <IconChevronLeft />
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 size-8 sm:pr-2.5", className)}
+      {...props}
+    >
+      <IconChevronRight />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <IconDots className="size-4 mt-1.5" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}