@gunjo/ui 0.0.1-alpha.1 → 0.0.1-alpha.2

package/src/components/display/DataTable.tsx

@@ -0,0 +1,522 @@
+"use client"
+
+import * as React from "react"
+import {
+    type Column,
+    type ColumnDef,
+    type ColumnFiltersState,
+    type SortingState,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+import {
+    IconArrowsSort as ArrowUpDown,
+    IconChevronLeft as ChevronLeft,
+    IconChevronLeftPipe as ChevronLeftPipe,
+    IconChevronRight as ChevronRight,
+    IconChevronRightPipe as ChevronRightPipe,
+    IconDots as Dots,
+    IconSortAscending,
+    IconSortDescending,
+} from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+import { Button } from "../inputs/Button"
+import { Input } from "../inputs/Input"
+import { Select } from "../inputs/Select"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+import { Icon, type IconGlyph } from "./Icon"
+
+export interface DataTableLabels {
+    filterPlaceholder?: string
+    noResults?: string
+    page?: string
+    of?: string
+    previous?: string
+    next?: string
+    firstPage?: string
+    lastPage?: string
+    firstPageUnavailable?: string
+    previousPageUnavailable?: string
+    nextPageUnavailable?: string
+    lastPageUnavailable?: string
+    rowsPerPage?: string
+    pageSizeOption?: (pageSize: number) => string
+    paginationSummary?: (from: number, to: number, total: number) => string
+    pageSummary?: (currentPage: number, totalPages: number) => string
+    pageSelect?: string
+    pageOption?: (page: number, totalPages: number) => string
+    goToPage?: (page: number) => string
+    sortAscending?: string
+    sortDescending?: string
+    clearSort?: string
+    sortUnsorted?: string
+    sortCurrentAscending?: string
+    sortCurrentDescending?: string
+}
+
+export interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    /** Optional: column id to filter by + placeholder for the filter input. Pass null to disable. */
+    filter?: { columnId: string; placeholder?: string } | null
+    /** Page size for pagination. Default 10. */
+    pageSize?: number
+    /** Selectable page sizes. Default [10, 25, 50, 100, 200]. */
+    pageSizeOptions?: number[]
+    labels?: DataTableLabels
+    /** Optional actions rendered directly under the summary row in the table header area. */
+    headerActions?: React.ReactNode
+    /** Optional row state used for styling composed tables. */
+    getRowState?: (row: TData, index: number) => string | undefined
+    className?: string
+}
+
+type PageItem = number | "ellipsis-start" | "ellipsis-end"
+
+function getColumnWidth<TData, TValue>(column: Column<TData, TValue>) {
+    const size = column.getSize()
+    return Number.isFinite(size) && size !== 150 ? `${size}px` : undefined
+}
+
+function getActionColumnInteractionClass(columnId: string) {
+    if (columnId !== "__action_row_actions") return null
+
+    return cn(
+        "group-hover:sticky group-hover:right-0 group-hover:z-10 group-hover:border-l group-hover:bg-background",
+        "group-data-[state=selected]:sticky group-data-[state=selected]:right-0 group-data-[state=selected]:z-10 group-data-[state=selected]:border-l group-data-[state=selected]:bg-muted"
+    )
+}
+
+function getPageItems(currentPage: number, pageCount: number): PageItem[] {
+    if (pageCount <= 7) {
+        return Array.from({ length: pageCount }, (_, index) => index + 1)
+    }
+
+    if (currentPage <= 4) {
+        return [1, 2, 3, 4, 5, "ellipsis-end", pageCount]
+    }
+
+    if (currentPage >= pageCount - 3) {
+        return [1, "ellipsis-start", pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1, pageCount]
+    }
+
+    return [1, "ellipsis-start", currentPage - 1, currentPage, currentPage + 1, "ellipsis-end", pageCount]
+}
+
+function PaginationIconButton({
+    label,
+    disabledLabel,
+    disabled,
+    icon,
+    onClick,
+}: {
+    label: string
+    disabledLabel: string
+    disabled: boolean
+    icon: IconGlyph
+    onClick: () => void
+}) {
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <span className="inline-flex">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        className="h-8 w-8"
+                        onClick={onClick}
+                        disabled={disabled}
+                        aria-label={label}
+                    >
+                        <Icon icon={icon} size="sm" />
+                    </Button>
+                </span>
+            </TooltipTrigger>
+            <TooltipContent>{disabled ? disabledLabel : label}</TooltipContent>
+        </Tooltip>
+    )
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    filter,
+    pageSize = 10,
+    pageSizeOptions = [10, 25, 50, 100, 200],
+    labels,
+    headerActions,
+    getRowState,
+    className,
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = React.useState<SortingState>([])
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+        []
+    )
+    const normalizedPageSizeOptions = React.useMemo(
+        () => Array.from(new Set([...pageSizeOptions, pageSize])).filter((value) => value > 0).sort((a, b) => a - b),
+        [pageSize, pageSizeOptions]
+    )
+
+    const table = useReactTable({
+        data,
+        columns,
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onColumnFiltersChange: setColumnFilters,
+        initialState: { pagination: { pageSize } },
+        state: { sorting, columnFilters },
+    })
+
+    const filterColumn =
+        filter !== null ? table.getColumn(filter?.columnId ?? "") : null
+    const pageIndex = table.getState().pagination.pageIndex
+    const currentPage = pageIndex + 1
+    const pageCount = table.getPageCount() || 1
+    const totalRows = table.getFilteredRowModel().rows.length
+    const visibleRows = table.getRowModel().rows.length
+    const rowFrom = totalRows === 0 ? 0 : pageIndex * table.getState().pagination.pageSize + 1
+    const rowTo = totalRows === 0 ? 0 : rowFrom + visibleRows - 1
+    const pageItems = React.useMemo(() => getPageItems(currentPage, pageCount), [currentPage, pageCount])
+    const visibleColumns = table.getVisibleLeafColumns()
+
+    React.useEffect(() => {
+        table.setPageSize(pageSize)
+    }, [pageSize, table])
+
+    React.useEffect(() => {
+        if (pageCount > 0 && pageIndex >= pageCount) {
+            table.setPageIndex(pageCount - 1)
+        }
+    }, [pageCount, pageIndex, table])
+
+    return (
+        <div className={cn("w-full space-y-4", className)}>
+            {filterColumn ? (
+                <div className="flex items-center">
+                    <Input
+                        placeholder={filter?.placeholder ?? labels?.filterPlaceholder ?? "Filter..."}
+                        value={(filterColumn.getFilterValue() as string) ?? ""}
+                        onChange={(event) =>
+                            filterColumn.setFilterValue(event.target.value)
+                        }
+                        className="max-w-sm"
+                    />
+                </div>
+            ) : null}
+
+            <div className="rounded-md border bg-muted/20 px-3 py-2">
+                <div className="flex items-center justify-between gap-2">
+                    <div className="text-sm text-muted-foreground">
+                        {labels?.paginationSummary
+                            ? labels.paginationSummary(rowFrom, rowTo, totalRows)
+                            : `${rowFrom} - ${rowTo} / ${totalRows}`}
+                    </div>
+                    <div className="flex shrink-0 items-center gap-x-3 gap-y-2">
+                        <div className="hidden items-center gap-1 sm:flex">
+                            <PaginationIconButton
+                                label={labels?.firstPage ?? "First page"}
+                                disabledLabel={labels?.firstPageUnavailable ?? "Already on the first page"}
+                                disabled={!table.getCanPreviousPage()}
+                                icon={ChevronLeftPipe}
+                                onClick={() => table.setPageIndex(0)}
+                            />
+                            <PaginationIconButton
+                                label={labels?.previous ?? "Previous"}
+                                disabledLabel={labels?.previousPageUnavailable ?? "No previous page"}
+                                disabled={!table.getCanPreviousPage()}
+                                icon={ChevronLeft}
+                                onClick={() => table.previousPage()}
+                            />
+                            <span className="min-w-20 px-2 text-center text-sm text-muted-foreground">
+                                {labels?.pageSummary
+                                    ? labels.pageSummary(currentPage, pageCount)
+                                    : `${currentPage} / ${pageCount}`}
+                            </span>
+                            <PaginationIconButton
+                                label={labels?.next ?? "Next"}
+                                disabledLabel={labels?.nextPageUnavailable ?? "No next page"}
+                                disabled={!table.getCanNextPage()}
+                                icon={ChevronRight}
+                                onClick={() => table.nextPage()}
+                            />
+                            <PaginationIconButton
+                                label={labels?.lastPage ?? "Last page"}
+                                disabledLabel={labels?.lastPageUnavailable ?? "Already on the last page"}
+                                disabled={!table.getCanNextPage()}
+                                icon={ChevronRightPipe}
+                                onClick={() => table.setPageIndex(pageCount - 1)}
+                            />
+                        </div>
+                        <label className="flex items-center text-sm text-muted-foreground">
+                            <span className="sr-only">{labels?.rowsPerPage ?? "Rows per page"}</span>
+                            <Select
+                                aria-label={labels?.rowsPerPage ?? "Rows per page"}
+                                value={String(table.getState().pagination.pageSize)}
+                                onChange={(event) => {
+                                    table.setPageSize(Number(event.target.value))
+                                    table.setPageIndex(0)
+                                }}
+                                className="h-8 w-[88px] rounded-md py-1 text-sm"
+                            >
+                            {normalizedPageSizeOptions.map((option) => (
+                                <option key={option} value={option}>
+                                    {labels?.pageSizeOption ? labels.pageSizeOption(option) : option}
+                                </option>
+                            ))}
+                        </Select>
+                        </label>
+                    </div>
+                </div>
+                {headerActions ? (
+                    <div className="mt-3 border-t pt-3">
+                        {headerActions}
+                    </div>
+                ) : null}
+            </div>
+
+            <div className="overflow-x-auto rounded-md border">
+                <table className="w-full min-w-[720px] table-fixed caption-bottom text-sm">
+                    <colgroup>
+                        {visibleColumns.map((column) => {
+                            const width = getColumnWidth(column)
+                            return <col key={column.id} style={width ? { width } : undefined} />
+                        })}
+                    </colgroup>
+                    <thead className="border-b bg-muted/50 [&_tr]:border-b">
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <tr key={headerGroup.id} className="border-b">
+                                {headerGroup.headers.map((header) => {
+                                    const canSort = header.column.getCanSort()
+                                    const sorted = header.column.getIsSorted()
+                                    const currentSortLabel =
+                                        sorted === "asc"
+                                            ? labels?.sortCurrentAscending ?? "Current: ascending"
+                                            : sorted === "desc"
+                                                ? labels?.sortCurrentDescending ?? "Current: descending"
+                                                : labels?.sortUnsorted ?? "Current: unsorted"
+                                    const nextSortLabel =
+                                        sorted === "asc"
+                                            ? labels?.sortDescending ?? "Click to sort descending"
+                                            : sorted === "desc"
+                                                ? labels?.clearSort ?? "Click to clear sorting"
+                                                : labels?.sortAscending ?? "Click to sort ascending"
+                                    const sortLabel = `${currentSortLabel}. ${nextSortLabel}`
+                                    const SortIcon =
+                                        sorted === "asc"
+                                            ? IconSortAscending
+                                            : sorted === "desc"
+                                                ? IconSortDescending
+                                                : ArrowUpDown
+                                    return (
+                                        <th
+                                            key={header.id}
+                                            className="h-10 whitespace-nowrap px-3 text-left align-middle font-medium text-muted-foreground"
+                                        >
+                                            {header.isPlaceholder ? null : canSort ? (
+                                                <Tooltip>
+                                                    <TooltipTrigger asChild>
+                                                        <button
+                                                            type="button"
+                                                            aria-label={sortLabel}
+                                                            onClick={header.column.getToggleSortingHandler()}
+                                                            className={cn(
+                                                                "-ml-1 flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-md px-1 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                                                                sorted && "bg-muted text-foreground"
+                                                            )}
+                                                        >
+                                                            <span className="min-w-0 truncate">
+                                                                {flexRender(
+                                                                    header.column.columnDef.header,
+                                                                    header.getContext()
+                                                                )}
+                                                            </span>
+                                                            <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
+                                                                <Icon icon={SortIcon} size="xs" className={cn("opacity-50", sorted && "opacity-100")} />
+                                                            </span>
+                                                        </button>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent>{sortLabel}</TooltipContent>
+                                                </Tooltip>
+                                            ) : (
+                                                flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )
+                                            )}
+                                        </th>
+                                    )
+                                })}
+                            </tr>
+                        ))}
+                    </thead>
+                    <tbody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                (() => {
+                                    const rowState = getRowState?.(row.original, row.index) ?? (row.getIsSelected() ? "selected" : undefined)
+                                    return (
+                                        <tr
+                                            key={row.id}
+                                            className="group border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
+                                            data-state={rowState}
+                                        >
+                                            {row.getVisibleCells().map((cell) => (
+                                                <td
+                                                    key={cell.id}
+                                                    className={cn(
+                                                        "max-w-0 p-3 align-middle",
+                                                        getActionColumnInteractionClass(cell.column.id)
+                                                    )}
+                                                >
+                                                    {flexRender(
+                                                        cell.column.columnDef.cell,
+                                                        cell.getContext()
+                                                    )}
+                                                </td>
+                                            ))}
+                                        </tr>
+                                    )
+                                })()
+                            ))
+                        ) : (
+                            <tr>
+                                <td
+                                    colSpan={columns.length}
+                                    className="h-24 px-3 text-left text-muted-foreground sm:text-center"
+                                >
+                                    {labels?.noResults ?? "No results."}
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            <div className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 sm:hidden">
+                <div className="flex items-center gap-1">
+                    <PaginationIconButton
+                        label={labels?.firstPage ?? "First page"}
+                        disabledLabel={labels?.firstPageUnavailable ?? "Already on the first page"}
+                        disabled={!table.getCanPreviousPage()}
+                        icon={ChevronLeftPipe}
+                        onClick={() => table.setPageIndex(0)}
+                    />
+                    <PaginationIconButton
+                        label={labels?.previous ?? "Previous"}
+                        disabledLabel={labels?.previousPageUnavailable ?? "No previous page"}
+                        disabled={!table.getCanPreviousPage()}
+                        icon={ChevronLeft}
+                        onClick={() => table.previousPage()}
+                    />
+                </div>
+                <div className="flex min-w-0 items-center justify-center sm:hidden">
+                    {pageCount > 1 ? (
+                        <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                            <Select
+                                aria-label={labels?.pageSelect ?? "Go to page"}
+                                value={String(currentPage)}
+                                onChange={(event) => table.setPageIndex(Number(event.target.value) - 1)}
+                                className="h-8 w-14 rounded-md py-1 text-center text-sm"
+                            >
+                                {Array.from({ length: pageCount }, (_, index) => index + 1).map((page) => (
+                                    <option key={page} value={page}>
+                                        {labels?.pageOption
+                                            ? labels.pageOption(page, pageCount)
+                                            : page.toLocaleString()}
+                                    </option>
+                                ))}
+                            </Select>
+                            <span aria-hidden="true">/</span>
+                            <span aria-hidden="true">{pageCount.toLocaleString()}</span>
+                        </div>
+                    ) : (
+                        <span className="min-w-16 text-center text-sm text-muted-foreground">
+                            {labels?.pageSummary
+                                ? labels.pageSummary(currentPage, pageCount)
+                                : `${currentPage} / ${pageCount}`}
+                        </span>
+                    )}
+                </div>
+                <div className="flex items-center justify-end gap-1">
+                    <PaginationIconButton
+                        label={labels?.next ?? "Next"}
+                        disabledLabel={labels?.nextPageUnavailable ?? "No next page"}
+                        disabled={!table.getCanNextPage()}
+                        icon={ChevronRight}
+                        onClick={() => table.nextPage()}
+                    />
+                    <PaginationIconButton
+                        label={labels?.lastPage ?? "Last page"}
+                        disabledLabel={labels?.lastPageUnavailable ?? "Already on the last page"}
+                        disabled={!table.getCanNextPage()}
+                        icon={ChevronRightPipe}
+                        onClick={() => table.setPageIndex(pageCount - 1)}
+                    />
+                </div>
+            </div>
+            <div className="hidden w-full items-center justify-center gap-1 sm:flex">
+                <PaginationIconButton
+                    label={labels?.firstPage ?? "First page"}
+                    disabledLabel={labels?.firstPageUnavailable ?? "Already on the first page"}
+                    disabled={!table.getCanPreviousPage()}
+                    icon={ChevronLeftPipe}
+                    onClick={() => table.setPageIndex(0)}
+                />
+                <PaginationIconButton
+                    label={labels?.previous ?? "Previous"}
+                    disabledLabel={labels?.previousPageUnavailable ?? "No previous page"}
+                    disabled={!table.getCanPreviousPage()}
+                    icon={ChevronLeft}
+                    onClick={() => table.previousPage()}
+                />
+                <div className="flex min-w-0 flex-wrap items-center justify-center gap-1 px-1">
+                    {pageItems.map((item) => (
+                        item === "ellipsis-start" || item === "ellipsis-end" ? (
+                            <span key={item} className="flex h-8 w-8 items-center justify-center text-muted-foreground">
+                                <Icon icon={Dots} size="sm" />
+                            </span>
+                        ) : (
+                            <Button
+                                key={item}
+                                type="button"
+                                variant={item === currentPage ? "default" : "ghost"}
+                                size="icon"
+                                className="h-8 w-8"
+                                aria-label={labels?.goToPage?.(item) ?? `Go to page ${item}`}
+                                aria-current={item === currentPage ? "page" : undefined}
+                                onClick={() => table.setPageIndex(item - 1)}
+                            >
+                                {item}
+                            </Button>
+                        )
+                    ))}
+                </div>
+                <PaginationIconButton
+                    label={labels?.next ?? "Next"}
+                    disabledLabel={labels?.nextPageUnavailable ?? "No next page"}
+                    disabled={!table.getCanNextPage()}
+                    icon={ChevronRight}
+                    onClick={() => table.nextPage()}
+                />
+                <PaginationIconButton
+                    label={labels?.lastPage ?? "Last page"}
+                    disabledLabel={labels?.lastPageUnavailable ?? "Already on the last page"}
+                    disabled={!table.getCanNextPage()}
+                    icon={ChevronRightPipe}
+                    onClick={() => table.setPageIndex(pageCount - 1)}
+                />
+            </div>
+        </div>
+    )
+}
+
+DataTable.displayName = "DataTable"

package/src/components/display/DistributionBar.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import type { ChartDataPoint } from "./chart-utils"
+import {
+    chartLabelToString,
+    defaultChartValueFormatter,
+    getChartColor,
+    normalizeChartValue,
+} from "./chart-utils"
+import { ChartLegend } from "./ChartLegend"
+import { ChartTooltip } from "./chart-tooltip"
+
+export interface DistributionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    segments: ChartDataPoint[]
+    showLegend?: boolean
+    formatValue?: (value: number) => React.ReactNode
+    totalLabel?: React.ReactNode
+}
+
+const baseClasses = "h-9 w-full overflow-hidden rounded-full border border-border/70 bg-muted p-0"
+
+function getPositiveValue(value: number) {
+    return Number.isFinite(value) ? Math.max(value, 0) : 0
+}
+
+const DistributionBar = React.forwardRef<HTMLDivElement, DistributionBarProps>(
+    (
+        {
+            className,
+            segments,
+            showLegend = false,
+            formatValue = defaultChartValueFormatter,
+            totalLabel = "Total",
+            ...props
+        },
+        ref
+    ) => {
+        const total = Math.max(
+            segments.reduce((sum, segment) => sum + getPositiveValue(segment.value), 0),
+            1
+        )
+        const legendItems = segments.map((segment, index) => {
+            const rawValue = getPositiveValue(segment.value)
+            const percent = normalizeChartValue(rawValue, total)
+
+            return {
+                label: segment.label,
+                value: `${defaultChartValueFormatter(percent)}%`,
+                color: segment.color ?? getChartColor(undefined, index),
+                description: [totalLabel, ": ", formatValue(segment.value)],
+            }
+        })
+
+        return (
+            <div ref={ref} className={cn("w-full space-y-3 p-0", className)} {...props}>
+                <div className={baseClasses}>
+                    <div className="flex h-full w-full">
+                        {segments.map((segment, index) => {
+                            const percent = normalizeChartValue(
+                                getPositiveValue(segment.value),
+                                total
+                            )
+                            const percentText = `${defaultChartValueFormatter(percent)}%`
+
+                            return (
+                                <ChartTooltip
+                                    key={`${chartLabelToString(segment.label, "Segment")}-${index}`}
+                                    label={segment.label}
+                                    value={percentText}
+                                    description={[totalLabel, ": ", formatValue(segment.value)]}
+                                >
+                                    <span
+                                        className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                                        style={{
+                                            width: `${percent}%`,
+                                            backgroundColor: getChartColor(segment.color, index),
+                                            boxShadow:
+                                                index < segments.length - 1
+                                                    ? "inset -1px 0 0 hsl(var(--background) / 0.65)"
+                                                    : undefined,
+                                        }}
+                                        tabIndex={0}
+                                        aria-label={`${chartLabelToString(segment.label)}: ${percentText} (${chartLabelToString(totalLabel, "Total")}: ${formatValue(segment.value)})`}
+                                    />
+                                </ChartTooltip>
+                            )
+                        })}
+                    </div>
+                </div>
+                {showLegend ? (
+                    <ChartLegend items={legendItems} variant="horizontal" />
+                ) : null}
+            </div>
+        )
+    }
+)
+DistributionBar.displayName = "DistributionBar"
+
+export { DistributionBar }

package/src/components/display/DocNote.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { docNoteDefaultVariantKey } from "./generated/default-variant-keys"
+import type { DocNoteVariantKey } from "./generated/variant-keys"
+
+const docNoteVariantClasses: Record<DocNoteVariantKey, string> = {
+    default: "bg-muted/45 text-muted-foreground",
+    reference: "bg-secondary/55 text-muted-foreground",
+}
+
+export interface DocNoteProps extends React.HTMLAttributes<HTMLElement> {
+    heading?: React.ReactNode
+    variant?: DocNoteVariantKey
+}
+
+const DocNote = React.forwardRef<HTMLElement, DocNoteProps>(
+    ({ heading, children, className, variant = docNoteDefaultVariantKey, ...props }, ref) => (
+        <aside
+            ref={ref}
+            className={cn(
+                "inline-flex w-full flex-col items-center gap-1 rounded-md border-0 px-4 py-3 text-left text-sm leading-6 shadow-none [align-items:flex-start]",
+                "[&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary",
+                docNoteVariantClasses[variant],
+                className
+            )}
+            {...props}
+        >
+            {heading ? <div className="w-full font-medium text-foreground">{heading}</div> : null}
+            <div className="w-full">{children}</div>
+        </aside>
+    )
+)
+DocNote.displayName = "DocNote"
+
+export { DocNote }