[filigran-ui] improve ui table

packages/filigran-ui/src/components/clients/data-table.tsx

@@ -90,11 +90,11 @@ const DataTableSelectColumnVisibility = <TData,>() => {
   return   <DropdownMenu>
     <DropdownMenuTrigger asChild>
       <Button
-        variant="outline"
+        variant="ghost"
         size="icon"
         aria-label="Manage columns visibility"
-        className="rounded border border-black">
-         <TableTuneIcon className="h-4 w-4" />
+        className="rounded border border-gray-600 h-8 box-content">
+         <TableTuneIcon className="p-1.5 h-6 w-6" />
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end">
@@ -116,7 +116,7 @@ const DataTableSelectColumnVisibility = <TData,>() => {
 
 const DataTableOptionsHeader = <TData, TValue>({column, menuItems, title, className}: { column: Column<TData, TValue> , menuItems?: ReactNode, title: string, className?: string}) => {
   if(!column.getCanHide() && !column.getCanSort() ) {
-    return <> {title}</>;
+    return <span className="font-title font-bold"> {title}</span>;
   }
 
   return (
@@ -128,33 +128,33 @@ const DataTableOptionsHeader = <TData, TValue>({column, menuItems, title, classN
             size="sm"
             className="-ml-3 h-8 data-[state=open]:bg-accent"
           >
-            {title}
+            <span className="font-title font-bold"> {title}</span>
             {column.getIsSorted() === "desc" ? (
-              <KeyboardArrowDownIcon className="ml-2 h-4 w-4" />
+              <KeyboardArrowDownIcon className="ml-s p-1.5 h-6 w-6" />
             ) : column.getIsSorted() === "asc" ? (
-              <KeyboardArrowUpIcon className="ml-2 h-4 w-4" />
+              <KeyboardArrowUpIcon className="ml-s p-1.5 h-6 w-6" />
             ) : (
-              <UnfoldMoreIcon className="ml-2 h-4 w-4" />
+              <UnfoldMoreIcon className="ml-s p-1.5 h-6 w-6" />
             )}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
         {
           column.getCanSort() && <>
             <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-              <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+              <ArrowUpIcon className="mr-2 p-1.5 h-6 w-6 text-muted-foreground/70" />
               Asc
             </DropdownMenuItem>
             <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-              <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+              <ArrowDownIcon className="mr-2 p-1.5 h-6 w-6 text-muted-foreground/70" />
               Desc
             </DropdownMenuItem>
           </>
         }
         { ((menuItems) || column.getCanHide()) && <DropdownMenuSeparator />}
 
           {column.getCanHide() && <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeOff className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <EyeOff className="mr-2 p-1.5 h-6 w-6 text-muted-foreground/70" />
             Hide
           </DropdownMenuItem>}
           {menuItems}
@@ -187,15 +187,15 @@ const DraggableTableHeader = <TData, TValue>({ header }: { header: Header<TData,
         {header.isPlaceholder ? null : (
           typeof header.column.columnDef.header === 'string' ?
           <DataTableOptionsHeader column={header.column} title={header.column.columnDef.header}/>:
-          <> {flexRender(header.column.columnDef.header, header.getContext())}</>
+          <span className="font-title font-bold"> {flexRender(header.column.columnDef.header, header.getContext())}</span>
 
         )}
 
           <button
             className={cn('opacity-0 group-hover:opacity-100 cursor-grab', isDragging && 'cursor-grabbing')}
             {...attributes}
             {...listeners}>
-            <GripHorizontal className="mx-2 h-6 w-6" />
+            <GripHorizontal className="mx-s p-xs h-6 w-6" />
           </button>
 
       </div>
@@ -241,17 +241,19 @@ const DragAlongCell = <TData,>({ cell }: { cell: Cell<TData, unknown> }) => {
 
 const DataTableRowPerPage = ({rowPerPage = [50, 100, 200, 300, 500]}: {rowPerPage?: number[]}) => {
   const table = useContext(TableContext);
-  return <div className="flex items-center space-x-2">
-    <p className="text-sm font-medium">Rows per page</p>
+  return <div className="flex items-center gap-s">
+    <p className="text-sub-content">Rows per page</p>
     <Select
       value={`${table.getState().pagination.pageSize}`}
       onValueChange={(value) => {
         table.setPageSize(Number(value))
       }}
     >
-      <SelectTrigger className="h-10 w-[70px] border-black">
-        <SelectValue placeholder={table.getState().pagination.pageSize} />
-      </SelectTrigger>
+      <div  className="w-[70px] rounded h-8 border border-gray-600 text-sub-content box-content">
+        <SelectTrigger className="border-none">
+          <SelectValue  placeholder={table.getState().pagination.pageSize} />
+        </SelectTrigger>
+      </div>
       <SelectContent side="top">
         {rowPerPage.map((pageSize) => (
           <SelectItem key={pageSize} value={`${pageSize}`}>
@@ -268,45 +270,49 @@ const DataTablePagination = () => {
   const pageSize = table.getState().pagination.pageSize;
   return  <>
 
-    <div className="flex items-center space-x-2">
+    <div className="flex items-center border rounded divide-x divide-gray-600 border-gray-600">
       <Button
-        variant="outline"
-        className=" h-8 w-8 p-0"
+        variant="ghost"
+        size="icon"
+        className="h-8 p-s rounded-none"
+        aria-label="Go to first page"
         onClick={() => table.setPageIndex(0)}
         disabled={!table.getCanPreviousPage()}
       >
-        <span className="sr-only">Go to first page</span>
-        <ArrowFirstIcon className="h-4 w-4" />
+        <ArrowFirstIcon className="p-1.5 h-6 w-6" />
       </Button>
       <Button
-        variant="outline"
-        className="h-8 w-8 p-0"
+        variant="ghost"
+        size="icon"
+        className="h-8 p-s rounded-none"
         onClick={() => table.previousPage()}
         disabled={!table.getCanPreviousPage()}
+        aria-label="Go to previous page"
       >
-        <span className="sr-only">Go to previous page</span>
-        <ArrowPreviousIcon className="h-4 w-4" />
+        <ArrowPreviousIcon className="p-1.5 h-6 w-6" />
       </Button>
-      <div className=" text-sm font-medium">
-        Rows {(pageIndex* pageSize) + 1 } to {Math.min((pageIndex + 1)* pageSize, table.getRowCount())} / {table.getRowCount()}
+      <div className="text-sub-content p-s h-8 text-gray-500">
+        Rows <span className="text-gray-1000">{(pageIndex* pageSize) + 1 } to {Math.min((pageIndex + 1)* pageSize, table.getRowCount())}</span> / {table.getRowCount()}
       </div>
       <Button
-        variant="outline"
-        className="h-8 w-8 p-0"
+        variant="ghost"
+        size="icon"
+        className="h-8 p-s rounded-none"
         onClick={() => table.nextPage()}
         disabled={!table.getCanNextPage()}
+        aria-label="Go to next page"
       >
-        <span className="sr-only">Go to next page</span>
-        <ArrowNextIcon className="h-4 w-4" />
+        <ArrowNextIcon className="p-1.5 h-6 w-6" />
       </Button>
       <Button
-        variant="outline"
-        className=" h-8 w-8 p-0"
+        variant="ghost"
+        size="icon"
+        className="h-8 p-s rounded-none"
         onClick={() => table.setPageIndex(table.getPageCount() - 1)}
         disabled={!table.getCanNextPage()}
+        aria-label="Go to last page"
       >
-        <span className="sr-only">Go to last page</span>
-        <ArrowLastIcon className="h-4 w-4" />
+        <ArrowLastIcon className="p-1.5 h-6 w-6" />
       </Button>
     </div>
   </>
@@ -362,7 +368,7 @@ function GenericDataTable<TData extends { id: string }, TValue>(
         modifiers={[restrictToHorizontalAxis]}
         onDragEnd={handleDragEnd}
         sensors={sensors}>
-        <div className="rounded-md">
+        <div className="pt-xl">
           <Table style={{ width: table.getCenterTotalSize() }}>
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (

packages/filigran-ui/src/components/clients/select.tsx

@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
 import {cn} from '../../lib/utils'
+import {CheckIcon, KeyboardArrowDownIcon, KeyboardArrowUpIcon} from 'filigran-icon'
 
 const Select = SelectPrimitive.Root
 
@@ -19,14 +19,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex w-full items-center justify-between rounded-md border border-input bg-background px-s py-xs text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <KeyboardArrowDownIcon className="p-s h-6 w-6 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -44,7 +44,8 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <KeyboardArrowUpIcon className="p-s h-6 w-6 " />
+
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -61,7 +62,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <KeyboardArrowDownIcon className="p-s h-6 w-6 opacity-50" />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName =
@@ -125,7 +126,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <CheckIcon className="p-1.5 h-6 w-6" />
       </SelectPrimitive.ItemIndicator>
     </span>
 

packages/filigran-ui/src/components/clients/table.tsx

@@ -77,7 +77,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'align-center relative h-12 px-4 text-left font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      ' font-title font-bold align-center relative h-12 px-4 text-left text-muted-foreground [&:has([role=checkbox])]:pr-0',
       className
     )}
     {...props}

packages/filigran-ui/src/globals.css

@@ -145,11 +145,15 @@
   * {
     @apply border-border;
     font-family: var(--font-ibm-plex-sans), system-ui, sans-serif;
+
   }
   h1,h2,h3,h4,h5,h6 {
     font-family: var(--font-geologica), system-ui, sans-serif;
   }
   body {
     @apply bg-background text-foreground;
+    font-size: 0.875rem;
+    line-height: 1.52;
+    letter-spacing: 0.0035rem;
   }
 }

packages/filigran-ui/src/plugin.ts

@@ -220,7 +220,12 @@ const FiligranUIPlugin = () => {
             'l': '1rem',
             'xl': '1.5rem',
             'xxl': '2rem'
-          }
+          },
+          fontFamily: {
+            'title': ['var(--font-geologica)', 'system-ui', 'sans-serif'],
+            'body': ['var(--font-ibm-plex-sans)', 'system-ui', 'sans-serif'],
+          },
+
         },
       },
     },

projects/filigran-website/app/docs/[...slug]/page.tsx

@@ -16,8 +16,8 @@ export default async function Blog({params}: {params: {slug: string[]}}) {
     notFound()
   }
   return (
-    <section className="mr-[276px]">
-      <article className="prose mx-auto dark:prose-invert prose-headings:scroll-mt-32">
+    <section>
+      <article>
         <CustomMDX source={content.content} />
       </article>
     </section>

projects/filigran-website/app/docs/layout.tsx

@@ -60,7 +60,7 @@ export default async function RootLayout({
           )
         })}
       </aside>
-      <div className="prose ml-[250px] max-w-none flex-1 dark:prose-invert">
+      <div className="prose ml-[250px] max-w-none flex-1 dark:prose-invert overflow-auto">
         {children}
       </div>
     </main>

projects/filigran-website/app/page.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import {Button} from 'filigran-ui/servers'
 export default async function Home() {
   return (
-    <main className="prose mx-auto flex max-w-4xl flex-1 dark:prose-invert">
+    <main className="mx-auto flex max-w-4xl flex-1">
       <div className="flex flex-col justify-center text-center">
         <h1 className="text-8xl font-bold tracking-tight">
           Uncover threats.

projects/filigran-website/components/example-data-table.tsx

@@ -2,12 +2,11 @@
 import {ColumnDef, getPaginationRowModel, getSortedRowModel, PaginationState} from '@tanstack/react-table'
 import {
   Checkbox,
-  DataTable, DataTableOptionsHeader, DataTablePagination, DropdownMenuItem,
+  DataTable, DataTableOptionsHeader, DropdownMenuItem,
 } from 'filigran-ui/clients'
 import { useMemo, useState} from 'react'
 import {Input} from 'filigran-ui'
 import {makeData, Person} from '@/utils/makeData'
-import {ArrowDownIcon} from 'lucide-react'
 
 
 
@@ -74,12 +73,12 @@ export function ExampleDataTable() {
       {
         id: 'age',
         accessorKey: 'age',
-        header: () => 'Age',
+        header:  'Age',
       },
       {
         id: 'visits',
         accessorKey: 'visits',
-        header: () => <span>Visits</span>,
+        header: () => <span className="font-title"> Visits</span>,
       },
       {
         id: 'status',
@@ -122,12 +121,15 @@ export function ExampleDataTable() {
   }
   return (
     <>
-      <Input
-        placeholder="underline text"
-        onChange={(e) => setInputSearch(e.target.value)}
-        value={inputSearch}
-        className="w-[200px] border-primary p-4"
-      />
+      <div className="py-4">
+        <Input
+          placeholder="underline text"
+          onChange={(e) => setInputSearch(e.target.value)}
+          value={inputSearch}
+          className="w-[200px] border-primary p-4"
+        />
+      </div>
+
       <DataTable
         data={data}
         columns={columns}

projects/filigran-website/components/mdx-component.tsx

@@ -3,8 +3,6 @@ import React from 'react'
 import remarkGfm from 'remark-gfm'
 import ReactLiveDisplay from '@/components/react-live/ReactLiveDisplay'
 import rehypeSlug from 'rehype-slug'
-import rehypeToc from '@jsdevtools/rehype-toc'
-import {customizeTOCUtil} from '@/utils/customizeTOC.util' // https://unifiedjs.com/explore/package/remark-toc/
 import * as FiligranUIComponent from 'filigran-ui'
 import * as FiligranIcon from 'filigran-icon'
 import * as LucidIcon from 'lucide-react'
@@ -18,7 +16,7 @@ import {ExampleToast} from '@/components/example-toast'
 const options = {
   mdxOptions: {
     remarkPlugins: [remarkGfm],
-    rehypePlugins: [rehypeSlug, [rehypeToc, {customizeTOC: customizeTOCUtil}]],
+    rehypePlugins: [rehypeSlug],
   },
 }
 

projects/filigran-website/tailwind.config.ts

@@ -11,7 +11,6 @@ const config = {
   prefix: '',
   plugins: [
     require('tailwindcss-animate'),
-    require('@tailwindcss/typography'),
     FiligranUIPlugin(),
   ],
 }