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

package/src/components/display/StackedBarChart.tsx

@@ -0,0 +1,393 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import type { ChartColor } from "./chart-utils"
+import {
+    chartLabelToString,
+    defaultChartValueFormatter,
+    getChartColor,
+    normalizeChartValue,
+} from "./chart-utils"
+import { ChartLegend } from "./ChartLegend"
+import { ChartTooltip } from "./chart-tooltip"
+import type { StackedBarChartVariantKey } from "./generated/variant-keys"
+import { stackedBarChartDefaultVariantKey } from "./generated/default-variant-keys"
+
+export interface StackedBarChartSegment {
+    label?: React.ReactNode
+    value: number
+    color?: ChartColor
+}
+
+export interface StackedBarChartGroup {
+    label?: React.ReactNode
+    segments: StackedBarChartSegment[]
+}
+
+export interface StackedBarChartProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    data: StackedBarChartGroup[]
+    variant?: StackedBarChartVariantKey
+    max?: number
+    normalize?: boolean
+    showGrid?: boolean
+    showLabels?: boolean
+    showValues?: boolean
+    showLegend?: boolean
+    formatValue?: (value: number) => React.ReactNode
+    totalLabel?: React.ReactNode
+}
+
+const stackedBarChartVariantClasses: Record<StackedBarChartVariantKey, string> = {
+    horizontal: "h-[224px] w-full p-0",
+    vertical: "h-[224px] w-full p-0",
+}
+
+function getPositiveValue(value: number) {
+    return Number.isFinite(value) ? Math.max(value, 0) : 0
+}
+
+function getGroupTotal(group: StackedBarChartGroup) {
+    return group.segments.reduce(
+        (sum, segment) => sum + getPositiveValue(segment.value),
+        0
+    )
+}
+
+function getMaxTotal(data: StackedBarChartGroup[], max?: number) {
+    return Math.max(max ?? 0, ...data.map(getGroupTotal), 1)
+}
+
+function getHorizontalGridClass(showLabels: boolean, showValues: boolean) {
+    if (showLabels && showValues) {
+        return "grid-cols-[minmax(0,0.8fr)_minmax(0,2.8fr)_auto]"
+    }
+
+    if (showLabels) {
+        return "grid-cols-[minmax(0,1fr)_minmax(0,3fr)]"
+    }
+
+    if (showValues) {
+        return "grid-cols-[minmax(0,1fr)_auto]"
+    }
+
+    return "grid-cols-1"
+}
+
+function getStackedSegmentDescription(
+    totalLabel: React.ReactNode,
+    total: number,
+    percentText: string,
+    formatValue: (value: number) => React.ReactNode
+) {
+    return (
+        <>
+            {totalLabel}: {formatValue(total)} / {percentText}
+        </>
+    )
+}
+
+function getLegendItems(
+    data: StackedBarChartGroup[],
+    formatValue: (value: number) => React.ReactNode,
+    totalLabel: React.ReactNode
+) {
+    const segmentCount = Math.max(0, ...data.map((group) => group.segments.length))
+    const grandTotal = Math.max(
+        data.reduce((sum, group) => sum + getGroupTotal(group), 0),
+        1
+    )
+
+    return Array.from({ length: segmentCount }, (_, index) => {
+        const firstSegment = data.find((group) => group.segments[index])?.segments[index]
+        const total = data.reduce(
+            (sum, group) => sum + getPositiveValue(group.segments[index]?.value ?? 0),
+            0
+        )
+        const percentText = `${defaultChartValueFormatter((total / grandTotal) * 100)}%`
+
+        return {
+            label: firstSegment?.label ?? `Segment ${index + 1}`,
+            value: formatValue(total),
+            color: firstSegment?.color,
+            description: [totalLabel, ": ", formatValue(grandTotal), " / ", percentText],
+        }
+    })
+}
+
+const StackedBarChart = React.forwardRef<HTMLDivElement, StackedBarChartProps>(
+    (
+        {
+            className,
+            data,
+            variant = stackedBarChartDefaultVariantKey,
+            max,
+            normalize = false,
+            showGrid = true,
+            showLabels = true,
+            showValues = false,
+            showLegend = false,
+            formatValue = defaultChartValueFormatter,
+            totalLabel = "Total",
+            ...props
+        },
+        ref
+    ) => {
+        const maxTotal = getMaxTotal(data, max)
+        const legendItems = getLegendItems(data, formatValue, totalLabel)
+        const shouldConstrainVerticalTrack = variant === "vertical" && data.length <= 5
+        const verticalTrackStyle: React.CSSProperties = {
+            width: "100%",
+            maxWidth: shouldConstrainVerticalTrack
+                ? `${Math.max(280, data.length * 88)}px`
+                : undefined,
+            marginInline: shouldConstrainVerticalTrack ? "auto" : undefined,
+        }
+        const verticalGridStyle: React.CSSProperties = {
+            ...verticalTrackStyle,
+            gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))`,
+        }
+        const verticalBarMaxWidth =
+            data.length <= 3 ? "4.5rem" : data.length <= 5 ? "4rem" : "3rem"
+
+        if (variant === "horizontal") {
+            return (
+                <div
+                    ref={ref}
+                    className={cn(
+                        stackedBarChartVariantClasses[variant],
+                        "flex flex-col justify-center gap-3",
+                        className
+                    )}
+                    {...props}
+                >
+                    {data.map((group, groupIndex) => {
+                        const total = getGroupTotal(group)
+                        const stackPercent = normalize
+                            ? 100
+                            : normalizeChartValue(total, maxTotal)
+
+                        return (
+                            <div
+                                key={`${chartLabelToString(group.label, "Group")}-${groupIndex}`}
+                                className={cn(
+                                    "grid min-w-0 items-center gap-3 text-sm",
+                                    getHorizontalGridClass(showLabels, showValues)
+                                )}
+                            >
+                                {showLabels ? (
+                                    <span className="truncate text-muted-foreground">
+                                        {group.label}
+                                    </span>
+                                ) : null}
+                                <div className="relative h-4 min-w-0 rounded-full bg-muted">
+                                    {showGrid && !normalize
+                                        ? [25, 50, 75].map((percent) => (
+                                              <span
+                                                  key={percent}
+                                                  className="pointer-events-none absolute inset-y-0 border-l border-dashed border-border/70"
+                                                  style={{ left: `${percent}%` }}
+                                                  aria-hidden="true"
+                                              />
+                                          ))
+                                        : null}
+                                    <div
+                                        className="flex h-full overflow-hidden rounded-full"
+                                        style={{ width: `${stackPercent}%` }}
+                                    >
+                                        {group.segments.map((segment, segmentIndex) => {
+                                            const percent = normalizeChartValue(
+                                                getPositiveValue(segment.value),
+                                                total
+                                            )
+                                            const percentText = `${formatValue(percent)}%`
+
+                                            return (
+                                                <ChartTooltip
+                                                    key={`${chartLabelToString(segment.label, "Segment")}-${segmentIndex}`}
+                                                    label={
+                                                        <>
+                                                            {group.label}
+                                                            {group.label && segment.label ? " / " : null}
+                                                            {segment.label}
+                                                        </>
+                                                    }
+                                                    value={formatValue(segment.value)}
+                                                    description={getStackedSegmentDescription(
+                                                        totalLabel,
+                                                        total,
+                                                        percentText,
+                                                        formatValue
+                                                    )}
+                                                >
+                                                    <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,
+                                                                segmentIndex
+                                                            ),
+                                                            boxShadow:
+                                                                segmentIndex < group.segments.length - 1
+                                                                    ? "inset -1px 0 0 hsl(var(--background) / 0.65)"
+                                                                    : undefined,
+                                                        }}
+                                                        tabIndex={0}
+                                                        aria-label={`${chartLabelToString(group.label, "Group")} ${chartLabelToString(segment.label, "Segment")}: ${formatValue(segment.value)} (${chartLabelToString(totalLabel, "Total")} ${formatValue(total)} / ${percentText})`}
+                                                    />
+                                                </ChartTooltip>
+                                            )
+                                        })}
+                                    </div>
+                                </div>
+                                {showValues ? (
+                                    <span className="text-xs tabular-nums text-muted-foreground">
+                                        {formatValue(total)}
+                                    </span>
+                                ) : null}
+                            </div>
+                        )
+                    })}
+                    {showLegend ? (
+                        <ChartLegend items={legendItems} variant="horizontal" />
+                    ) : null}
+                </div>
+            )
+        }
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    stackedBarChartVariantClasses[variant],
+                    "flex flex-col justify-end",
+                    className
+                )}
+                {...props}
+            >
+                {showValues ? (
+                    <div
+                        className="grid pb-1 text-xs font-medium tabular-nums text-foreground"
+                        style={verticalGridStyle}
+                    >
+                        {data.map((group, index) => (
+                            <span
+                                key={`${chartLabelToString(group.label, "Group")}-value-${index}`}
+                                className="min-w-0 truncate text-center"
+                            >
+                                {formatValue(getGroupTotal(group))}
+                            </span>
+                        ))}
+                    </div>
+                ) : null}
+                <div
+                    className="relative flex min-h-0 flex-1 items-end gap-2 border-b border-border/70"
+                    style={verticalTrackStyle}
+                >
+                    {showGrid
+                        ? [25, 50, 75].map((percent) => (
+                              <span
+                                  key={percent}
+                                  className="pointer-events-none absolute inset-x-0 border-t border-dashed border-border/70"
+                                  style={{ bottom: `${percent}%` }}
+                                  aria-hidden="true"
+                              />
+                          ))
+                        : null}
+                    {data.map((group, groupIndex) => {
+                        const total = getGroupTotal(group)
+                        const stackPercent = normalize
+                            ? 100
+                            : normalizeChartValue(total, maxTotal)
+
+                        return (
+                            <div
+                                key={`${chartLabelToString(group.label, "Group")}-${groupIndex}`}
+                                className="relative z-10 flex h-full min-w-0 flex-1 items-end justify-center"
+                            >
+                                <div
+                                    className="flex w-full flex-col-reverse overflow-hidden rounded-t-md bg-muted shadow-sm"
+                                    style={{
+                                        height: `${stackPercent}%`,
+                                        maxWidth: verticalBarMaxWidth,
+                                    }}
+                                >
+                                    {group.segments.map((segment, segmentIndex) => {
+                                        const percent = normalizeChartValue(
+                                            getPositiveValue(segment.value),
+                                            total
+                                        )
+                                        const percentText = `${formatValue(percent)}%`
+
+                                        return (
+                                            <ChartTooltip
+                                                key={`${chartLabelToString(segment.label, "Segment")}-${segmentIndex}`}
+                                                label={
+                                                    <>
+                                                        {group.label}
+                                                        {group.label && segment.label ? " / " : null}
+                                                        {segment.label}
+                                                    </>
+                                                }
+                                                value={formatValue(segment.value)}
+                                                description={getStackedSegmentDescription(
+                                                    totalLabel,
+                                                    total,
+                                                    percentText,
+                                                    formatValue
+                                                )}
+                                            >
+                                                <span
+                                                    className="block w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                                                    style={{
+                                                        height: `${percent}%`,
+                                                        backgroundColor: getChartColor(
+                                                            segment.color,
+                                                            segmentIndex
+                                                        ),
+                                                        boxShadow:
+                                                            segmentIndex < group.segments.length - 1
+                                                                ? "inset 0 1px 0 hsl(var(--background) / 0.65)"
+                                                                : undefined,
+                                                    }}
+                                                    tabIndex={0}
+                                                    aria-label={`${chartLabelToString(group.label, "Group")} ${chartLabelToString(segment.label, "Segment")}: ${formatValue(segment.value)} (${chartLabelToString(totalLabel, "Total")} ${formatValue(total)} / ${percentText})`}
+                                                />
+                                            </ChartTooltip>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+                {showLabels ? (
+                    <div
+                        className="grid pt-2 text-xs text-muted-foreground"
+                        style={verticalGridStyle}
+                    >
+                        {data.map((group, index) => (
+                            <span
+                                key={`${chartLabelToString(group.label, "Group")}-label-${index}`}
+                                className="min-w-0 truncate text-center"
+                            >
+                                {group.label}
+                            </span>
+                        ))}
+                    </div>
+                ) : null}
+                {showLegend ? (
+                    <div className="pt-3">
+                        <ChartLegend items={legendItems} variant="horizontal" />
+                    </div>
+                ) : null}
+            </div>
+        )
+    }
+)
+StackedBarChart.displayName = "StackedBarChart"
+
+export { StackedBarChart }

package/src/components/display/Statistic.tsx

@@ -0,0 +1,70 @@
+import * as React from "react"
+import { IconArrowDown as ArrowDown, IconArrowUp as ArrowUp, IconMinus as Minus } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+
+export type StatisticTrend = "up" | "down" | "flat"
+export type StatisticTone = "positive" | "negative" | "neutral"
+
+export interface StatisticProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: React.ReactNode
+    value: React.ReactNode
+    /** Optional change indicator (e.g. "+20.1%", "-3.4%"). */
+    change?: React.ReactNode
+    /** Trend direction for the change indicator. Default "flat" (muted). */
+    trend?: StatisticTrend
+    /** Visual meaning for the change indicator. Defaults from trend. */
+    tone?: StatisticTone
+    /** Optional helper text below the value or after the change. */
+    hint?: React.ReactNode
+}
+
+const TONE_CLASS: Record<StatisticTone, string> = {
+    positive: "text-success",
+    negative: "text-destructive",
+    neutral: "text-muted-foreground",
+}
+
+const TREND_ICON: Record<StatisticTrend, React.ComponentType<{ className?: string }>> = {
+    up: ArrowUp,
+    down: ArrowDown,
+    flat: Minus,
+}
+
+const Statistic = React.forwardRef<HTMLDivElement, StatisticProps>(
+    (
+        { className, label, value, change, trend = "flat", tone, hint, ...props },
+        ref
+    ) => {
+        const TrendIcon = TREND_ICON[trend]
+        const resolvedTone = tone ?? (trend === "up" ? "positive" : trend === "down" ? "negative" : "neutral")
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "flex flex-col gap-1 rounded-lg border border-border bg-card p-4 text-card-foreground",
+                    className
+                )}
+                {...props}
+            >
+                <p className="text-xs font-medium text-muted-foreground">{label}</p>
+                <p className="text-2xl font-bold tracking-tight [overflow-wrap:anywhere]">{value}</p>
+                {change !== undefined ? (
+                    <div className={cn("flex flex-wrap items-center gap-x-1 gap-y-0.5 text-xs", TONE_CLASS[resolvedTone])}>
+                        <TrendIcon className="h-3 w-3" />
+                        <span className="font-medium">{change}</span>
+                        {hint ? (
+                            <span className="text-muted-foreground">{hint}</span>
+                        ) : null}
+                    </div>
+                ) : hint ? (
+                    <p className="text-xs text-muted-foreground">{hint}</p>
+                ) : null}
+            </div>
+        )
+    }
+)
+Statistic.displayName = "Statistic"
+
+export { Statistic }

package/src/components/{molecules → display}/Table.tsx

@@ -2,14 +2,23 @@ import * as React from "react"
 
 import { cn } from "../../lib/utils"
 
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+    /** Alternates body row background color to improve readability in dense tables. */
+    striped?: boolean
+}
+
 const Table = React.forwardRef<
     HTMLTableElement,
-    React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
+    TableProps
+>(({ className, striped = false, ...props }, ref) => (
     <div className="relative flex flex-col w-[400px] w-full overflow-auto rounded-md rounded-lg border bg-card">
         <table
             ref={ref}
-            className={cn("w-full caption-bottom text-sm", className)}
+            className={cn(
+                "w-full caption-bottom text-sm",
+                striped && "[&_tbody_tr:nth-child(even)]:bg-muted/25",
+                className
+            )}
             {...props}
         />
     </div>
@@ -43,7 +52,7 @@ const TableFooter = React.forwardRef<
     <tfoot
         ref={ref}
         className={cn(
-            "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+            "border-t bg-accent/55 font-medium [&>tr]:last:border-b-0",
             className
         )}
         {...props}
@@ -73,7 +82,7 @@ const TableHead = React.forwardRef<
     <th
         ref={ref}
         className={cn(
-            "h-10 px-3 py-3 text-left align-middle text-xs font-semibold text-muted-foreground [&:has([role=checkbox])]:pr-0",
+            "h-10 min-w-0 break-words bg-accent/55 px-3 py-3 text-left align-middle text-xs font-semibold text-muted-foreground [overflow-wrap:anywhere] [&:has([role=checkbox])]:pr-0",
             className
         )}
         {...props}
@@ -87,7 +96,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <td
         ref={ref}
-        className={cn("px-3 py-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
+        className={cn(
+            "min-w-0 break-words px-3 py-3 align-middle [overflow-wrap:anywhere] [&:has([role=checkbox])]:pr-0",
+            className
+        )}
         {...props}
     />
 ))
@@ -99,7 +111,10 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <caption
         ref={ref}
-        className={cn("mt-4 text-sm text-muted-foreground", className)}
+        className={cn(
+            "border-t bg-accent/55 px-3 py-2 text-left text-xs leading-5 text-muted-foreground",
+            className
+        )}
         {...props}
     />
 ))

package/src/components/display/Tag.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { IconX as X } from "@tabler/icons-react";
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+
+export const tagVariants = cva(
+    "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium transition-colors",
+    {
+        variants: {
+            variant: {
+                default: "bg-secondary text-secondary-foreground",
+                secondary: "bg-foreground text-background",
+                outline: "border border-border bg-transparent text-foreground",
+                destructive: "bg-destructive-strong text-destructive-strong-foreground",
+            },
+            size: {
+                sm: "h-5 px-1.5 text-[11px]",
+                default: "h-6 px-2 text-xs",
+                lg: "h-7 px-2.5 text-sm",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+)
+
+export interface TagProps
+    extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onRemove">,
+        VariantProps<typeof tagVariants> {
+    /** When provided, an × button appears at the end. */
+    onRemove?: () => void
+    removeLabel?: string
+}
+
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+    (
+        {
+            className,
+            variant,
+            size,
+            onRemove,
+            removeLabel = "Remove",
+            children,
+            ...props
+        },
+        ref
+    ) => (
+        <span
+            ref={ref}
+            className={cn(tagVariants({ variant, size }), className)}
+            {...props}
+        >
+            {children}
+            {onRemove ? (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <button
+                            type="button"
+                            onClick={onRemove}
+                            className="ml-0.5 -mr-1 inline-flex items-center justify-center rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring"
+                            aria-label={removeLabel}
+                        >
+                            <X className="h-3 w-3" />
+                        </button>
+                    </TooltipTrigger>
+                    <TooltipContent className="text-xs">{removeLabel}</TooltipContent>
+                </Tooltip>
+            ) : null}
+        </span>
+    )
+)
+Tag.displayName = "Tag"
+
+export { Tag }