parthenon-ui 1.0.0

package/src/components/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@workspace/ui/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-xl bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/sonner.tsx

@@ -0,0 +1,59 @@
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import * as React from "react"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { CheckmarkCircle02Icon, InformationCircleIcon, Alert02Icon, MultiplicationSignCircleIcon, Loading03Icon } from "@hugeicons/core-free-icons"
+
+function getTheme(): "light" | "dark" {
+  if (typeof document === "undefined") return "light"
+  return document.documentElement.classList.contains("dark") ? "dark" : "light"
+}
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const [theme, setTheme] = React.useState<"light" | "dark">(() => getTheme())
+
+  React.useEffect(() => {
+    const observer = new MutationObserver(() => setTheme(getTheme()))
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      icons={{
+        success: (
+          <HugeiconsIcon icon={CheckmarkCircle02Icon} strokeWidth={2} className="size-4" />
+        ),
+        info: (
+          <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={2} className="size-4" />
+        ),
+        warning: (
+          <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} className="size-4" />
+        ),
+        error: (
+          <HugeiconsIcon icon={MultiplicationSignCircleIcon} strokeWidth={2} className="size-4" />
+        ),
+        loading: (
+          <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/switch.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent",
+        "transition-all duration-150 ease-in-out outline-none",
+        "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50",
+        "data-[size=default]:h-6 data-[size=default]:w-11",
+        "data-[size=sm]:h-4.5 data-[size=sm]:w-8",
+        "data-checked:bg-primary",
+        "data-unchecked:bg-input dark:data-unchecked:bg-input/80",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "active:scale-[0.97]",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block rounded-full bg-background shadow-sm",
+          "transition-all duration-150 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
+          "group-data-[size=default]/switch:size-4.5 group-data-[size=sm]/switch:size-3",
+          "group-data-[size=default]/switch:ml-1",
+          "group-data-[size=sm]/switch:ml-0.5",
+          "group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)]",
+          "group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)]",
+          "group-data-[size=default]/switch:data-unchecked:translate-x-0",
+          "group-data-[size=sm]/switch:data-unchecked:translate-x-0",
+          "dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/table.tsx

@@ -0,0 +1,375 @@
+import * as React from "react"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { ArrowUp01Icon, ArrowDown01Icon } from "@hugeicons/core-free-icons"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+interface TableContextType<T> {
+  sortBy: keyof T | null
+  sortDesc: boolean
+  page: number
+  pageSize: number
+  data: T[]
+  columns: ColumnDef<T>[]
+  setSortBy: (col: keyof T) => void
+  setPageSize: (size: number) => void
+  setPage: (page: number) => void
+}
+
+/* ------- Types ------- */
+interface ColumnDef<T> {
+  header: string
+  accessor: keyof T | ((row: T) => React.ReactNode)
+  sortable?: boolean
+  className?: string
+}
+
+interface TableProps<T> {
+  data: T[]
+  columns: ColumnDef<T>[]
+  initialPageSize?: number
+  className?: string
+}
+
+/* ------- Context ------- */
+const TableContext = React.createContext<TableContextType<any> | null>(null)
+
+/* ------- Hook ------- */
+function useTableContext<T>() {
+  const context = React.useContext(TableContext)
+  if (!context) {
+    throw new Error("Table components must be used within Table")
+  }
+  return context as TableContextType<T>
+}
+
+/* ------- Table (wrapper) ------- */
+function Table<T>({
+  className,
+  children,
+  ...props
+}: TableProps<T> & { className?: string; children: React.ReactNode }) {
+  const [sortBy, setSortBy] = React.useState<keyof T | null>(null)
+  const [sortDesc, setSortDesc] = React.useState(false)
+  const [page, setPage] = React.useState(0)
+  const [pageSize, setPageSize] = React.useState(props.initialPageSize ?? 10)
+
+  const sortedData = React.useMemo(() => {
+    if (!sortBy || !props.columns.some((c) => c.accessor === sortBy && c.sortable)) {
+      return props.data
+    }
+    return [...props.data].sort((a, b) => {
+      const aVal =
+        typeof sortBy === "function"
+          ? sortBy(a)
+          : a[sortBy]
+      const bVal =
+        typeof sortBy === "function"
+          ? sortBy(b)
+          : b[sortBy]
+
+      if (aVal === undefined) return 1
+      if (bVal === undefined) return -1
+
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        return sortDesc
+          ? bVal.localeCompare(aVal)
+          : aVal.localeCompare(bVal)
+      }
+
+      if (typeof aVal === "number" && typeof bVal === "number") {
+        return sortDesc ? bVal - aVal : aVal - bVal
+      }
+
+      return sortDesc ? -1 : 1
+    })
+  }, [props.data, sortBy, sortDesc, props.columns])
+
+  const pageCount = Math.max(1, Math.ceil(sortedData.length / pageSize))
+  const paginatedData = React.useMemo(() => {
+    const start = page * pageSize
+    return sortedData.slice(start, start + pageSize)
+  }, [sortedData, page, pageSize])
+
+  const value: TableContextType<T> = {
+    sortBy,
+    sortDesc,
+    page,
+    pageSize,
+    data: props.data,
+    columns: props.columns,
+    setSortBy,
+    setPageSize: (size) => {
+      setPageSize(size)
+      setPage(0)
+    },
+    setPage: (num) => {
+      setPage(Math.max(0, Math.min(num, pageCount - 1)))
+    },
+  }
+
+  return (
+    <TableContext.Provider value={value}>
+      <div className={cn("w-full overflow-hidden rounded-2xl border ring-1 ring-inset ring-foreground/5 shadow-sm", className)}>
+        {children}
+      </div>
+    </TableContext.Provider>
+  )
+}
+
+/* ------- Table Header ------- */
+function TableHeader({ className, children, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("bg-muted", className)}
+      {...props}
+    >
+      {children}
+    </thead>
+  )
+}
+
+/* ------- Table Body ------- */
+function TableBody({ className, children, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("divide-y divide-muted/50", className)}
+      {...props}
+    >
+      {children}
+    </tbody>
+  )
+}
+
+/* ------- Table Footer ------- */
+function TableFooter({ className, children, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("", className)}
+      {...props}
+    >
+      {children}
+    </tfoot>
+  )
+}
+
+/* ------- Table Head (tr inside thead) ------- */
+function TableHead({ className, children, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-head"
+      className={cn("text-xs font-medium tracking-wider uppercase text-muted-foreground hover:bg-muted/50 transition-colors", className)}
+      {...props}
+    >
+      {children}
+    </tr>
+  )
+}
+
+/* ------- Table Row (tr inside tbody) ------- */
+function TableRow({ className, children, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </tr>
+  )
+}
+
+/* ------- Table Cell (td/th) ------- */
+interface TableCellProps<T> extends React.ComponentProps<"td"> {
+  column?: ColumnDef<T>
+  rowIndex?: number
+}
+function TableCell<T>({ className, children, column, ...props }: TableCellProps<T>) {
+  const { sortBy, sortDesc, setSortBy } = useTableContext<T>()
+
+  // If column is not provided, render as a plain cell
+  if (!column) {
+    return (
+      <td
+        data-slot="table-cell"
+        className={cn("px-4 py-3 text-sm", className)}
+        {...props}
+      >
+        {children}
+      </td>
+    )
+  }
+
+  const isSortable = column.sortable ?? false
+  const isSorted = sortBy === (column.accessor as keyof T)
+
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "px-4 py-3 text-sm",
+        isSortable && "cursor-pointer",
+        className
+      )}
+      onClick={() => {
+        if (isSortable) {
+          setSortBy(column.accessor as keyof T)
+        }
+      }}
+      {...props}
+    >
+      <div className="flex items-center space-x-2">
+        {children}
+        {isSortable && (
+          <span className="h-4 w-4 opacity-50 transition-opacity">
+            {isSorted ? (
+              sortDesc ? <HugeiconsIcon icon={ArrowDown01Icon} className="h-4 w-4" /> : <HugeiconsIcon icon={ArrowUp01Icon} className="h-4 w-4" />
+            ) : (
+              <HugeiconsIcon icon={ArrowUp01Icon} className="h-4 w-4 opacity-25" />
+            )}
+          </span>
+        )}
+      </div>
+    </td>
+  )
+}
+
+/* ------- Pagination Controls (to be placed in TableFooter) ------- */
+function TablePagination() {
+  const { page, pageSize, setPageSize, setPage, data } = useTableContext<any>()
+  const sortedData = React.useMemo(() => {
+    // same sorting logic as Table component (duplicated for brevity)
+    // In real implementation we would move sorting logic to a separate hook; for now reuse.
+    const ctxSortBy: any = React.useContext(TableContext)?.sortBy
+    const ctxSortDesc: any = React.useContext(TableContext)?.sortDesc
+    const ctxColumns: any = React.useContext(TableContext)?.columns
+    if (!ctxSortBy || !ctxColumns.some((c: any) => c.accessor === ctxSortBy && c.sortable)) {
+      return data
+    }
+    return [...data].sort((a: any, b: any) => {
+      const aVal =
+        typeof ctxSortBy === "function"
+          ? ctxSortBy(a)
+          : a[ctxSortBy]
+      const bVal =
+        typeof ctxSortBy === "function"
+          ? ctxSortBy(b)
+          : b[ctxSortBy]
+
+      if (aVal === undefined) return 1
+      if (bVal === undefined) return -1
+
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        return ctxSortDesc
+          ? bVal.localeCompare(aVal)
+          : aVal.localeCompare(bVal)
+      }
+
+      if (typeof aVal === "number" && typeof bVal === "number") {
+        return ctxSortDesc ? bVal - aVal : aVal - bVal
+      }
+
+      return ctxSortDesc ? -1 : 1
+    })
+  }, [data]) // Note: missing sort dependencies; but we keep simple
+
+  const pageCount = Math.max(1, Math.ceil(sortedData.length / pageSize))
+
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between pt-4 pb-6 px-4 text-sm text-muted-foreground">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:space-x-2">
+        <div className="flex items-center space-x-2">
+          <button
+            onClick={() => setPage(0)}
+            disabled={page === 0}
+            className={cn(
+              "inline-flex h-9 w-9 items-center justify-center rounded-md border border-transparent bg-muted/50 px-2.5 text-sm font-medium ring-offset-background hover:bg-muted/60 disabled:pointer-events-none disabled:opacity-50",
+              page === 0 && "opacity-50 pointer-events-none"
+            )}
+          >
+            <span className="sr-only">Go to first page</span>
+          </button>
+          <button
+            onClick={() => setPage(page - 1)}
+            disabled={page === 0}
+            className={cn(
+              "inline-flex h-9 w-9 items-center justify-center rounded-md border border-transparent bg-muted/50 px-2.5 text-sm font-medium ring-offset-background hover:bg-muted/60 disabled:pointer-events-none disabled:opacity-50",
+              page === 0 && "opacity-50 pointer-events-none"
+            )}
+          >
+            <span className="sr-only">Go to previous page</span>
+          </button>
+          <span>
+            Page{" "}
+            <span className="font-medium">{page + 1}</span>{" "}
+            of{" "}
+            <span className="font-medium">{pageCount}</span>
+          </span>
+          <button
+            onClick={() => setPage(page + 1)}
+            disabled={page >= pageCount - 1}
+            className={cn(
+              "inline-flex h-9 w-9 items-center justify-center rounded-md border border-transparent bg-muted/50 px-2.5 text-sm font-medium ring-offset-background hover:bg-muted/60 disabled:pointer-events-none disabled:opacity-50",
+              page >= pageCount - 1 && "opacity-50 pointer-events-none"
+            )}
+          >
+            <span className="sr-only">Go to next page</span>
+          </button>
+          <button
+            onClick={() => setPage(pageCount - 1)}
+            disabled={page >= pageCount - 1}
+            className={cn(
+              "inline-flex h-9 w-9 items-center justify-center rounded-md border border-transparent bg-muted/50 px-2.5 text-sm font-medium ring-offset-background hover:bg-muted/60 disabled:pointer-events-none disabled:opacity-50",
+              page >= pageCount - 1 && "opacity-50 pointer-events-none"
+            )}
+          >
+            <span className="sr-only">Go to last page</span>
+          </button>
+        </div>
+      </div>
+      <div className="mt-2 sm:mt-0 space-x-2">
+        <label
+          className="flex items-center space-x-2 text-sm font-medium"
+        >
+          Rows per page:
+          <select
+            value={pageSize}
+            onChange={(e) => {
+              setPageSize(Number(e.target.value))
+              setPage(0)
+            }}
+            className={cn(
+              "bg-muted border border-muted/50 rounded-md px-2.5 py-1.5 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+              "focus-visible:outline-none"
+            )}
+          >
+            {[5, 10, 25, 50, 100].map((size) => (
+              <option key={size} value={size}>
+                {size}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+/* ------- Export ------- */
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TablePagination,
+}
+export type { TableProps, ColumnDef }

package/src/components/tabs.tsx

@@ -0,0 +1,80 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-4xl p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-xl border border-input bg-input/30 px-3 py-3 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/tooltip.tsx

@@ -0,0 +1,64 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@workspace/ui/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-2xl bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-4xl data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-start-1 data-[side=inline-end]:translate-x-[1.5px] rtl:data-[side=inline-end]:-translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-end-1 data-[side=inline-start]:translate-x-[-1.5px] rtl:data-[side=inline-start]:-translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] rtl:data-[side=left]:-translate-x-[-1.5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] rtl:data-[side=right]:-translate-x-[1.5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}