@customafk/lunas-ui 0.0.21 → 0.0.22

package/packages/components/table/data-table.tsx

@@ -1,81 +1,42 @@
-import React, { type CSSProperties } from "react";
-import {
-  type Column,
-  flexRender,
-  type Header,
-  type Table as ReactTable,
-} from "@tanstack/react-table";
-import {
-  ArrowLeftToLineIcon,
-  ArrowRightToLineIcon,
-  ChevronDown,
-  ChevronUp,
-  EllipsisIcon,
-  PackagePlusIcon,
-  PinOffIcon,
-} from "lucide-react";
+import React, { type CSSProperties } from 'react'
+import { type Column, flexRender, type Header, type Table as ReactTable } from '@tanstack/react-table'
+import { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, PackagePlusIcon, PinOffIcon } from 'lucide-react'
 
-import { cn } from "@/lib/utils";
-import type { AnyEntity } from "@/types";
+import { cn } from '@/lib/utils'
+import type { AnyEntity } from '@/types'
 
-import { Button } from "../ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-import { ScrollArea, ScrollBar } from "../ui/scroll-area";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../ui/table";
+import { Button } from '../ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu'
+import { ScrollArea, ScrollBar } from '../ui/scroll-area'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table'
 
 // Helper function to compute pinning styles for columns
 const getPinningStyles = (column: Column<AnyEntity>): CSSProperties => {
-  const isPinned = column.getIsPinned();
+  const isPinned = column.getIsPinned()
   return {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
-    position: isPinned ? "sticky" : "relative",
+    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+    position: isPinned ? 'sticky' : 'relative',
     width: column.getSize(),
     zIndex: isPinned ? 1 : 0,
-  };
-};
+  }
+}
 
 const SortingIndicator = ({ column }: { column: Column<AnyEntity> }) => {
-  const sortDirection = column.getIsSorted();
+  const sortDirection = column.getIsSorted()
 
   const icons = {
-    asc: (
-      <ChevronUp
-        className="shrink-0 opacity-60"
-        size={16}
-        strokeWidth={2}
-        aria-hidden="true"
-      />
-    ),
-    desc: (
-      <ChevronDown
-        className="shrink-0 opacity-60"
-        size={16}
-        strokeWidth={2}
-        aria-hidden="true"
-      />
-    ),
-  };
+    asc: <ChevronUp className="shrink-0 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />,
+    desc: <ChevronDown className="shrink-0 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />,
+  }
 
-  return sortDirection ? icons[sortDirection] : null;
-};
+  return sortDirection ? icons[sortDirection] : null
+}
 
 const PinControls = ({ column }: { column: Column<AnyEntity> }) => {
-  const columnHeader = column.columnDef.header as string;
+  const columnHeader = column.columnDef.header as string
 
-  if (!column.getCanPin()) return null;
+  if (!column.getCanPin()) return null
 
   if (column.getIsPinned()) {
     return (
@@ -89,7 +50,7 @@ const PinControls = ({ column }: { column: Column<AnyEntity> }) => {
       >
         <PinOffIcon className="opacity-60" size={16} aria-hidden="true" />
       </Button>
-    );
+    )
   }
 
   return (
@@ -106,81 +67,68 @@ const PinControls = ({ column }: { column: Column<AnyEntity> }) => {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => column.pin("left")}>
-          <ArrowLeftToLineIcon
-            size={16}
-            className="opacity-60"
-            aria-hidden="true"
-          />
+        <DropdownMenuItem onClick={() => column.pin('left')}>
+          <ArrowLeftToLineIcon size={16} className="opacity-60" aria-hidden="true" />
           Stick to left
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => column.pin("right")}>
-          <ArrowRightToLineIcon
-            size={16}
-            className="opacity-60"
-            aria-hidden="true"
-          />
+        <DropdownMenuItem onClick={() => column.pin('right')}>
+          <ArrowRightToLineIcon size={16} className="opacity-60" aria-hidden="true" />
           Stick to right
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  );
-};
+  )
+}
 
 const HeaderContent = ({ header }: { header: Header<AnyEntity, unknown> }) => {
-  const { column } = header;
+  const { column } = header
 
   const handleSort = (e: React.KeyboardEvent) => {
-    if (column.getCanSort() && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault();
-      column.getToggleSortingHandler()?.(e);
+    if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault()
+      column.getToggleSortingHandler()?.(e)
     }
-  };
+  }
 
   return (
     <div className="flex items-center justify-between gap-2 truncate">
       {!header.isPlaceholder && (
         <div
-          className={cn(
-            column.getCanSort() &&
-              "flex h-full cursor-pointer items-center justify-between gap-2 select-none",
-          )}
+          className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}
           onClick={column.getToggleSortingHandler()}
           onKeyDown={handleSort}
           tabIndex={column.getCanSort() ? 0 : undefined}
         >
-          <span className="truncate">
-            {flexRender(column.columnDef.header, header.getContext())}
-          </span>
+          <span className="truncate">{flexRender(column.columnDef.header, header.getContext())}</span>
           <SortingIndicator column={column} />
         </div>
       )}
       {!header.isPlaceholder && <PinControls column={column} />}
     </div>
-  );
-};
+  )
+}
 
 interface DataTableProps {
-  table: ReactTable<AnyEntity>;
-  columnsLength?: number;
-  isLoading?: boolean;
-  onClickRow?: (id: string) => void;
+  table: ReactTable<AnyEntity>
+  columnsLength?: number
+  isLoading?: boolean
+  onClickRow?: (id: string) => void
 }
 
 export const DataTable = ({ table, isLoading, onClickRow }: DataTableProps) => {
-  "use no memo";
+  'use no memo'
   return (
     <ScrollArea className="border-border bg-background relative w-full overflow-auto rounded-lg border">
       <Table
         className={cn(
-          "!w-full",
-          "[&_td]:border-border",
-          "[&_th]:border-border",
-          "table-fixed border-separate border-spacing-0",
-          "[&_tfoot_td]:border-t",
-          "[&_th]:border-b",
-          "[&_tr]:border-none",
-          "[&_tr:not(:last-child)_td]:border-b",
+          '!w-full',
+          '[&_td]:border-border',
+          '[&_th]:border-border',
+          'table-fixed border-separate border-spacing-0',
+          '[&_tfoot_td]:border-t',
+          '[&_th]:border-b',
+          '[&_tr]:border-none',
+          '[&_tr:not(:last-child)_td]:border-b',
         )}
         style={{
           width: table.getTotalSize(),
@@ -190,34 +138,26 @@ export const DataTable = ({ table, isLoading, onClickRow }: DataTableProps) => {
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id} className="bg-muted/50">
               {headerGroup.headers.map((header) => {
-                const { column } = header;
-                const isPinned = column.getIsPinned();
-                const isLastLeftPinned =
-                  isPinned === "left" && column.getIsLastColumn("left");
-                const isFirstRightPinned =
-                  isPinned === "right" && column.getIsFirstColumn("right");
+                const { column } = header
+                const isPinned = column.getIsPinned()
+                const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')
+                const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')
                 return (
                   <TableHead
                     key={header.id}
                     data-pinned={isPinned || undefined}
-                    data-last-col={
-                      isLastLeftPinned
-                        ? "left"
-                        : isFirstRightPinned
-                          ? "right"
-                          : undefined
-                    }
+                    data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}
                     className={cn(
-                      "text-accent-foreground/60 relative h-9 border-r font-semibold select-none",
-                      "data-pinned:backdrop-blur-xs",
-                      "data-pinned:bg-muted/90",
-                      "[&>.cursor-col-resize]:last:opacity-0",
-                      "[&[data-pinned][data-last-col]]:border-border",
-                      "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0",
-                      "[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0",
-                      "[&[data-pinned=left][data-last-col=left]]:border-r",
-                      "[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0",
-                      "[&[data-pinned=right][data-last-col=right]]:border-l",
+                      'text-accent-foreground/60 relative h-9 border-r font-semibold select-none',
+                      'data-pinned:backdrop-blur-xs',
+                      'data-pinned:bg-muted/90',
+                      '[&>.cursor-col-resize]:last:opacity-0',
+                      '[&[data-pinned][data-last-col]]:border-border',
+                      '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',
+                      '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',
+                      '[&[data-pinned=left][data-last-col=left]]:border-r',
+                      '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',
+                      '[&[data-pinned=right][data-last-col=right]]:border-l',
                     )}
                     {...{
                       colSpan: header.colSpan,
@@ -230,18 +170,13 @@ export const DataTable = ({ table, isLoading, onClickRow }: DataTableProps) => {
                   >
                     <HeaderContent header={header} />
                   </TableHead>
-                );
+                )
               })}
             </TableRow>
           ))}
         </TableHeader>
 
-        <TableBody
-          className={cn(
-            isLoading && "h-36",
-            table.getRowModel().rows?.length === 0 && "h-48",
-          )}
-        >
+        <TableBody className={cn(isLoading && 'h-36', table.getRowModel().rows?.length === 0 && 'h-48')}>
           {isLoading ? (
             <TableRow className="absolute top-9 flex h-36 w-full items-center justify-center">
               <TableCell>loading...</TableCell>
@@ -252,25 +187,15 @@ export const DataTable = ({ table, isLoading, onClickRow }: DataTableProps) => {
                 table.getRowModel().rows.map((row) => (
                   <TableRow
                     key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
+                    data-state={row.getIsSelected() && 'selected'}
                     className="cursor-pointer border-none focus:outline-none"
-                    onClick={() =>
-                      onClickRow?.(
-                        row?.id ||
-                          row.original?.id?.toString() ||
-                          row.original?.uuid ||
-                          undefined,
-                      )
-                    }
+                    onClick={() => onClickRow?.(row?.id || row.original?.id?.toString() || row.original?.uuid || undefined)}
                   >
                     {row.getVisibleCells().map((cell) => {
-                      const { column } = cell;
-                      const isPinned = column.getIsPinned();
-                      const isLastLeftPinned =
-                        isPinned === "left" && column.getIsLastColumn("left");
-                      const isFirstRightPinned =
-                        isPinned === "right" &&
-                        column.getIsFirstColumn("right");
+                      const { column } = cell
+                      const isPinned = column.getIsPinned()
+                      const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')
+                      const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')
                       return (
                         <TableCell
                           key={cell.id}
@@ -280,27 +205,18 @@ export const DataTable = ({ table, isLoading, onClickRow }: DataTableProps) => {
                             maxWidth: cell.column.getSize(),
                           }}
                           data-pinned={isPinned || undefined}
-                          data-last-col={
-                            isLastLeftPinned
-                              ? "left"
-                              : isFirstRightPinned
-                                ? "right"
-                                : undefined
-                          }
+                          data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}
                           className={cn(
-                            "overflow-hidden py-2.5",
-                            "[&[data-pinned][data-last-col]]:border-border",
-                            "[&[data-pinned=left][data-last-col=left]]:border-r",
-                            "[&[data-pinned=right][data-last-col=right]]:border-l",
-                            "data-pinned:bg-background/90",
+                            'overflow-hidden py-2.5',
+                            '[&[data-pinned][data-last-col]]:border-border',
+                            '[&[data-pinned=left][data-last-col=left]]:border-r',
+                            '[&[data-pinned=right][data-last-col=right]]:border-l',
+                            'data-pinned:bg-background/90',
                           )}
                         >
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext(),
-                          )}
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
                         </TableCell>
-                      );
+                      )
                     })}
                   </TableRow>
                 ))
@@ -319,10 +235,7 @@ export const DataTable = ({ table, isLoading, onClickRow }: DataTableProps) => {
         </TableBody>
       </Table>
       <ScrollBar orientation="vertical" className="z-10 w-2" />
-      <ScrollBar
-        orientation="horizontal"
-        className="absolute right-0 bottom-0 left-0 h-2"
-      />
+      <ScrollBar orientation="horizontal" className="absolute right-0 bottom-0 left-0 h-2" />
     </ScrollArea>
-  );
-};
+  )
+}

package/packages/components/table/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 import {
   type ColumnDef,
   type ColumnFiltersState,
@@ -13,26 +13,26 @@ import {
   type SortingState,
   useReactTable,
   type VisibilityState,
-} from "@tanstack/react-table";
+} from '@tanstack/react-table'
 
-import { DataTable } from "./data-table";
-import { DataTablePagination } from "./data-table-pagination";
-import { Flex } from "../layouts/flex";
-import { AddNewBtn } from "../ui/buttons/add-new";
-import { RefreshBtn } from "../ui/buttons/refresh";
-import { SearchInput } from "../ui/inputs/search-input";
+import { DataTable } from './data-table'
+import { DataTablePagination } from './data-table-pagination'
+import { Flex } from '../layouts/flex'
+import { AddNewBtn } from '../ui/buttons/add-new'
+import { RefreshBtn } from '../ui/buttons/refresh'
+import { SearchInput } from '../ui/inputs/search-input'
 
 type Props<T> = {
-  data: T[];
-  totalCount?: number;
-  isLoading?: boolean;
-  columns: ColumnDef<T>[];
-  pagination?: PaginationState;
-  onAdd?: () => void;
-  onRefresh?: () => void;
-  onClickRow?: (id: string) => void;
-  onPaginationChange?: React.Dispatch<React.SetStateAction<PaginationState>>;
-};
+  data: T[]
+  totalCount?: number
+  isLoading?: boolean
+  columns: ColumnDef<T>[]
+  pagination?: PaginationState
+  onAdd?: () => void
+  onRefresh?: () => void
+  onClickRow?: (id: string) => void
+  onPaginationChange?: React.Dispatch<React.SetStateAction<PaginationState>>
+}
 export function Table<T extends Record<string, unknown>>({
   data,
   totalCount,
@@ -44,30 +44,27 @@ export function Table<T extends Record<string, unknown>>({
   onClickRow,
   onPaginationChange,
 }: Props<T>) {
-  "use no memo";
+  'use no memo'
 
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    [],
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
 
   const initialState = React.useMemo(
     () => ({
-      columnPinning: { right: ["actions", "update", "delete"] },
+      columnPinning: { right: ['actions', 'update', 'delete'] },
       pagination: { pageIndex: 0, pageSize: 20 },
     }),
     [],
-  );
+  )
 
   const table = useReactTable<T>({
     initialState,
     data,
     columns,
     rowCount: totalCount,
-    columnResizeMode: "onChange",
+    columnResizeMode: 'onChange',
     manualPagination: true,
     enableColumnResizing: false,
     enableMultiRowSelection: false,
@@ -90,16 +87,10 @@ export function Table<T extends Record<string, unknown>>({
     onColumnVisibilityChange: setColumnVisibility,
     onColumnFiltersChange: setColumnFilters,
     ...(onPaginationChange ? { onPaginationChange } : {}),
-  });
+  })
 
   return (
-    <Flex
-      vertical
-      wrap={false}
-      gap="sm"
-      align="start"
-      className="size-full overflow-y-auto pt-1"
-    >
+    <Flex vertical wrap={false} gap="sm" align="start" className="size-full overflow-y-auto pt-1">
       <Flex justify="between" padding="none" width="full" className="flex-0">
         <SearchInput placeholder="Search..." />
         <Flex className="px-0">
@@ -107,20 +98,10 @@ export function Table<T extends Record<string, unknown>>({
           <RefreshBtn onClick={onRefresh} />
         </Flex>
       </Flex>
-      <Flex
-        padding="none"
-        vertical
-        wrap={false}
-        width="full"
-        className="flex-1 overflow-auto"
-      >
-        <DataTable
-          table={table}
-          isLoading={isLoading}
-          onClickRow={onClickRow}
-        />
+      <Flex padding="none" vertical wrap={false} width="full" className="flex-1 overflow-auto">
+        <DataTable table={table} isLoading={isLoading} onClickRow={onClickRow} />
         <DataTablePagination<T> table={table} />
       </Flex>
     </Flex>
-  );
+  )
 }

package/packages/components/typography/paragraph.tsx

@@ -1,32 +1,29 @@
-"use client";
-import React from "react";
-import { cva } from "class-variance-authority";
+'use client'
+import { cva } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 type Props = {
-  variant?: "p" | "muted" | "lead" | "sm" | "lg";
-  className?: string;
-  children?: React.ReactNode;
-};
+  variant?: 'p' | 'muted' | 'lead' | 'sm' | 'lg'
+  className?: string
+  children?: React.ReactNode
+}
 
-const paragraphVariants = cva("", {
+const paragraphVariants = cva('', {
   variants: {
     variant: {
-      p: "leading-7 [&:not(:first-child)]:mt-6",
-      sm: "text-sm leading-none font-normal",
-      lg: "text-lg font-semibold",
-      lead: "text-muted-foreground text-xl",
-      muted: "text-muted-foreground text-sm",
+      p: 'leading-7 [&:not(:first-child)]:mt-6',
+      sm: 'text-sm leading-none font-normal',
+      lg: 'text-lg font-semibold',
+      lead: 'text-text-positive-strong text-xl',
+      muted: 'text-text-positive-muted text-sm',
     },
     default: {
-      variant: "sm",
+      variant: 'sm',
     },
   },
-});
+})
 
-export const Paragraph = ({ variant = "p", className, children }: Props) => {
-  return (
-    <p className={cn(paragraphVariants({ variant }), className)}>{children}</p>
-  );
-};
+export const Paragraph = ({ variant = 'p', className, children }: Props) => {
+  return <p className={cn('text-text-positive', paragraphVariants({ variant }), className)}>{children}</p>
+}

package/packages/components/typography/title.tsx

@@ -1,36 +1,31 @@
-import type { JSX } from "react";
-import { cva } from "class-variance-authority";
+import type { JSX } from 'react'
+import { cva } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
-const titleVariants = cva(
-  "scroll-m-20 text-secondary-foreground tracking-tight",
-  {
-    variants: {
-      level: {
-        1: "text-center text-4xl font-extrabold text-balance",
-        2: "border-b pb-2 text-3xl font-semibold first:mt-0",
-        3: "text-2xl font-semibold",
-        4: "text-xl font-semibold",
-        5: "text-lg font-semibold",
-        6: "text-base font-semibold",
-      },
-      default: {
-        level: 1,
-      },
+const titleVariants = cva('scroll-m-20 text-text-positive-strong tracking-tight', {
+  variants: {
+    level: {
+      1: 'text-center text-4xl font-extrabold text-balance',
+      2: 'border-b pb-2 text-3xl font-semibold first:mt-0',
+      3: 'text-2xl font-semibold',
+      4: 'text-xl font-semibold',
+      5: 'text-lg font-semibold',
+      6: 'text-base font-semibold',
+    },
+    default: {
+      level: 1,
     },
   },
-);
+})
 
 type Props = {
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  className?: string;
-  children?: React.ReactNode;
-};
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+  className?: string
+  children?: React.ReactNode
+}
 
 export const Title = ({ level = 1, className, children }: Props) => {
-  const Comp = `h${level}` as keyof JSX.IntrinsicElements;
-  return (
-    <Comp className={cn(titleVariants({ level }), className)}>{children}</Comp>
-  );
-};
+  const Comp = `h${level}` as keyof JSX.IntrinsicElements
+  return <Comp className={cn(titleVariants({ level }), className)}>{children}</Comp>
+}