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

package/src/components/display/generated/default-variant-keys.ts

@@ -0,0 +1,90 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+import type { AccordionVariantKey, AccordionGroupVariantKey, ActionDataTableVariantKey, ActivityTimelineCardVariantKey, AnalyticsCardVariantKey, AssetCardVariantKey, AssetGridVariantKey, AvatarVariantKey, BadgeVariantKey, BarChartVariantKey, ChartLegendVariantKey, ChatMessageVariantKey, ChoroplethMapVariantKey, ConcentricProgressCardVariantKey, DocNoteVariantKey, DonutChartVariantKey, FileTreeVariantKey, GaugeChartVariantKey, HeatmapChartVariantKey, IconVariantKey, ImagePreviewVariantKey, ImgVariantKey, LabeledDonutCardVariantKey, LineChartVariantKey, ListVariantKey, MetadataListVariantKey, MiniDistributionBarCardVariantKey, PieChartVariantKey, QuadrantMatrixVariantKey, RadarChartVariantKey, RadialBarChartVariantKey, RetentionCohortCardVariantKey, RibbonChartVariantKey, SearchableAccordionVariantKey, SegmentedGaugeCardVariantKey, SegmentTimelineCardVariantKey, SeparatorVariantKey, SparklineChartVariantKey, StackedBarChartVariantKey, TagEditorVariantKey, ToolPillVariantKey } from "./variant-keys";
+
+export const accordionDefaultVariantKey: AccordionVariantKey = "collapsed";
+export const accordionGroupDefaultVariantKey: AccordionGroupVariantKey = "default";
+export const actionDataTableDefaultVariantKey: ActionDataTableVariantKey = "default";
+export const activityTimelineCardDefaultVariantKey: ActivityTimelineCardVariantKey = "default";
+export const analyticsCardDefaultVariantKey: AnalyticsCardVariantKey = "default";
+export const assetCardDefaultVariantKey: AssetCardVariantKey = "default";
+export const assetGridDefaultVariantKey: AssetGridVariantKey = "default";
+export const avatarDefaultVariantKey: AvatarVariantKey = "fallback";
+export const badgeDefaultVariantKey: BadgeVariantKey = "default";
+export const barChartDefaultVariantKey: BarChartVariantKey = "vertical";
+export const chartLegendDefaultVariantKey: ChartLegendVariantKey = "horizontal";
+export const chatMessageDefaultVariantKey: ChatMessageVariantKey = "assistant";
+export const choroplethMapDefaultVariantKey: ChoroplethMapVariantKey = "default";
+export const concentricProgressCardDefaultVariantKey: ConcentricProgressCardVariantKey = "default";
+export const docNoteDefaultVariantKey: DocNoteVariantKey = "default";
+export const donutChartDefaultVariantKey: DonutChartVariantKey = "default";
+export const fileTreeDefaultVariantKey: FileTreeVariantKey = "single";
+export const gaugeChartDefaultVariantKey: GaugeChartVariantKey = "default";
+export const heatmapChartDefaultVariantKey: HeatmapChartVariantKey = "default";
+export const iconDefaultVariantKey: IconVariantKey = "sm";
+export const imagePreviewDefaultVariantKey: ImagePreviewVariantKey = "default";
+export const imgDefaultVariantKey: ImgVariantKey = "loading";
+export const labeledDonutCardDefaultVariantKey: LabeledDonutCardVariantKey = "default";
+export const lineChartDefaultVariantKey: LineChartVariantKey = "line";
+export const listDefaultVariantKey: ListVariantKey = "dot";
+export const metadataListDefaultVariantKey: MetadataListVariantKey = "default";
+export const miniDistributionBarCardDefaultVariantKey: MiniDistributionBarCardVariantKey = "default";
+export const pieChartDefaultVariantKey: PieChartVariantKey = "default";
+export const quadrantMatrixDefaultVariantKey: QuadrantMatrixVariantKey = "default";
+export const radarChartDefaultVariantKey: RadarChartVariantKey = "default";
+export const radialBarChartDefaultVariantKey: RadialBarChartVariantKey = "default";
+export const retentionCohortCardDefaultVariantKey: RetentionCohortCardVariantKey = "default";
+export const ribbonChartDefaultVariantKey: RibbonChartVariantKey = "flow";
+export const searchableAccordionDefaultVariantKey: SearchableAccordionVariantKey = "default";
+export const segmentedGaugeCardDefaultVariantKey: SegmentedGaugeCardVariantKey = "default";
+export const segmentTimelineCardDefaultVariantKey: SegmentTimelineCardVariantKey = "default";
+export const separatorDefaultVariantKey: SeparatorVariantKey = "horizontal";
+export const sparklineChartDefaultVariantKey: SparklineChartVariantKey = "line";
+export const stackedBarChartDefaultVariantKey: StackedBarChartVariantKey = "vertical";
+export const tagEditorDefaultVariantKey: TagEditorVariantKey = "default";
+export const toolPillDefaultVariantKey: ToolPillVariantKey = "primary";
+
+export const displayDefaultVariantKeys = {
+  accordion: accordionDefaultVariantKey,
+  accordionGroup: accordionGroupDefaultVariantKey,
+  actionDataTable: actionDataTableDefaultVariantKey,
+  activityTimelineCard: activityTimelineCardDefaultVariantKey,
+  analyticsCard: analyticsCardDefaultVariantKey,
+  assetCard: assetCardDefaultVariantKey,
+  assetGrid: assetGridDefaultVariantKey,
+  avatar: avatarDefaultVariantKey,
+  badge: badgeDefaultVariantKey,
+  barChart: barChartDefaultVariantKey,
+  chartLegend: chartLegendDefaultVariantKey,
+  chatMessage: chatMessageDefaultVariantKey,
+  choroplethMap: choroplethMapDefaultVariantKey,
+  concentricProgressCard: concentricProgressCardDefaultVariantKey,
+  docNote: docNoteDefaultVariantKey,
+  donutChart: donutChartDefaultVariantKey,
+  fileTree: fileTreeDefaultVariantKey,
+  gaugeChart: gaugeChartDefaultVariantKey,
+  heatmapChart: heatmapChartDefaultVariantKey,
+  icon: iconDefaultVariantKey,
+  imagePreview: imagePreviewDefaultVariantKey,
+  img: imgDefaultVariantKey,
+  labeledDonutCard: labeledDonutCardDefaultVariantKey,
+  lineChart: lineChartDefaultVariantKey,
+  list: listDefaultVariantKey,
+  metadataList: metadataListDefaultVariantKey,
+  miniDistributionBarCard: miniDistributionBarCardDefaultVariantKey,
+  pieChart: pieChartDefaultVariantKey,
+  quadrantMatrix: quadrantMatrixDefaultVariantKey,
+  radarChart: radarChartDefaultVariantKey,
+  radialBarChart: radialBarChartDefaultVariantKey,
+  retentionCohortCard: retentionCohortCardDefaultVariantKey,
+  ribbonChart: ribbonChartDefaultVariantKey,
+  searchableAccordion: searchableAccordionDefaultVariantKey,
+  segmentedGaugeCard: segmentedGaugeCardDefaultVariantKey,
+  segmentTimelineCard: segmentTimelineCardDefaultVariantKey,
+  separator: separatorDefaultVariantKey,
+  sparklineChart: sparklineChartDefaultVariantKey,
+  stackedBarChart: stackedBarChartDefaultVariantKey,
+  tagEditor: tagEditorDefaultVariantKey,
+  toolPill: toolPillDefaultVariantKey,
+} as const;

package/src/components/display/generated/variant-keys.ts

@@ -0,0 +1,169 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+export const accordionVariantKeys = ["collapsed", "expanded"] as const;
+export type AccordionVariantKey = (typeof accordionVariantKeys)[number];
+
+export const accordionGroupVariantKeys = ["default", "withDescription", "withoutControls"] as const;
+export type AccordionGroupVariantKey = (typeof accordionGroupVariantKeys)[number];
+
+export const actionDataTableVariantKeys = ["default", "rowActions", "selection"] as const;
+export type ActionDataTableVariantKey = (typeof actionDataTableVariantKeys)[number];
+
+export const activityTimelineCardVariantKeys = ["compact", "default"] as const;
+export type ActivityTimelineCardVariantKey = (typeof activityTimelineCardVariantKeys)[number];
+
+export const analyticsCardVariantKeys = ["default", "flatWithFooter", "positive", "riskIncrease"] as const;
+export type AnalyticsCardVariantKey = (typeof analyticsCardVariantKeys)[number];
+
+export const assetCardVariantKeys = ["compact", "default"] as const;
+export type AssetCardVariantKey = (typeof assetCardVariantKeys)[number];
+
+export const assetGridVariantKeys = ["compact", "default"] as const;
+export type AssetGridVariantKey = (typeof assetGridVariantKeys)[number];
+
+export const avatarVariantKeys = ["fallback", "image"] as const;
+export type AvatarVariantKey = (typeof avatarVariantKeys)[number];
+
+export const badgeVariantKeys = ["default", "destructive", "outline", "secondary"] as const;
+export type BadgeVariantKey = (typeof badgeVariantKeys)[number];
+
+export const barChartVariantKeys = ["horizontal", "vertical"] as const;
+export type BarChartVariantKey = (typeof barChartVariantKeys)[number];
+
+export const chartLegendVariantKeys = ["horizontal", "vertical"] as const;
+export type ChartLegendVariantKey = (typeof chartLegendVariantKeys)[number];
+
+export const chatMessageVariantKeys = ["assistant", "system", "typing", "user"] as const;
+export type ChatMessageVariantKey = (typeof chatMessageVariantKeys)[number];
+
+export const choroplethMapVariantKeys = ["compact", "default"] as const;
+export type ChoroplethMapVariantKey = (typeof choroplethMapVariantKeys)[number];
+
+export const concentricProgressCardVariantKeys = ["compact", "default"] as const;
+export type ConcentricProgressCardVariantKey = (typeof concentricProgressCardVariantKeys)[number];
+
+export const docNoteVariantKeys = ["default", "reference"] as const;
+export type DocNoteVariantKey = (typeof docNoteVariantKeys)[number];
+
+export const donutChartVariantKeys = ["compact", "default"] as const;
+export type DonutChartVariantKey = (typeof donutChartVariantKeys)[number];
+
+export const fileTreeVariantKeys = ["actions", "multiple", "single"] as const;
+export type FileTreeVariantKey = (typeof fileTreeVariantKeys)[number];
+
+export const gaugeChartVariantKeys = ["compact", "default"] as const;
+export type GaugeChartVariantKey = (typeof gaugeChartVariantKeys)[number];
+
+export const heatmapChartVariantKeys = ["compact", "default"] as const;
+export type HeatmapChartVariantKey = (typeof heatmapChartVariantKeys)[number];
+
+export const iconVariantKeys = ["lg", "md", "sm", "xl", "xs"] as const;
+export type IconVariantKey = (typeof iconVariantKeys)[number];
+
+export const imagePreviewVariantKeys = ["contain", "default", "empty"] as const;
+export type ImagePreviewVariantKey = (typeof imagePreviewVariantKeys)[number];
+
+export const imgVariantKeys = ["error", "loaded", "loading"] as const;
+export type ImgVariantKey = (typeof imgVariantKeys)[number];
+
+export const labeledDonutCardVariantKeys = ["compact", "default"] as const;
+export type LabeledDonutCardVariantKey = (typeof labeledDonutCardVariantKeys)[number];
+
+export const lineChartVariantKeys = ["area", "line"] as const;
+export type LineChartVariantKey = (typeof lineChartVariantKeys)[number];
+
+export const listVariantKeys = ["check", "circle", "dot"] as const;
+export type ListVariantKey = (typeof listVariantKeys)[number];
+
+export const metadataListVariantKeys = ["compact", "default"] as const;
+export type MetadataListVariantKey = (typeof metadataListVariantKeys)[number];
+
+export const miniDistributionBarCardVariantKeys = ["compact", "default"] as const;
+export type MiniDistributionBarCardVariantKey = (typeof miniDistributionBarCardVariantKeys)[number];
+
+export const pieChartVariantKeys = ["compact", "default"] as const;
+export type PieChartVariantKey = (typeof pieChartVariantKeys)[number];
+
+export const quadrantMatrixVariantKeys = ["compact", "default"] as const;
+export type QuadrantMatrixVariantKey = (typeof quadrantMatrixVariantKeys)[number];
+
+export const radarChartVariantKeys = ["compact", "default"] as const;
+export type RadarChartVariantKey = (typeof radarChartVariantKeys)[number];
+
+export const radialBarChartVariantKeys = ["compact", "default"] as const;
+export type RadialBarChartVariantKey = (typeof radialBarChartVariantKeys)[number];
+
+export const retentionCohortCardVariantKeys = ["compact", "default"] as const;
+export type RetentionCohortCardVariantKey = (typeof retentionCohortCardVariantKeys)[number];
+
+export const ribbonChartVariantKeys = ["flow", "stacked"] as const;
+export type RibbonChartVariantKey = (typeof ribbonChartVariantKeys)[number];
+
+export const searchableAccordionVariantKeys = ["default", "empty", "withCategories"] as const;
+export type SearchableAccordionVariantKey = (typeof searchableAccordionVariantKeys)[number];
+
+export const segmentedGaugeCardVariantKeys = ["compact", "default"] as const;
+export type SegmentedGaugeCardVariantKey = (typeof segmentedGaugeCardVariantKeys)[number];
+
+export const segmentTimelineCardVariantKeys = ["compact", "default"] as const;
+export type SegmentTimelineCardVariantKey = (typeof segmentTimelineCardVariantKeys)[number];
+
+export const separatorVariantKeys = ["horizontal", "vertical"] as const;
+export type SeparatorVariantKey = (typeof separatorVariantKeys)[number];
+
+export const sparklineChartVariantKeys = ["area", "line", "step"] as const;
+export type SparklineChartVariantKey = (typeof sparklineChartVariantKeys)[number];
+
+export const stackedBarChartVariantKeys = ["horizontal", "vertical"] as const;
+export type StackedBarChartVariantKey = (typeof stackedBarChartVariantKeys)[number];
+
+export const tagEditorVariantKeys = ["compact", "default"] as const;
+export type TagEditorVariantKey = (typeof tagEditorVariantKeys)[number];
+
+export const toolPillVariantKeys = ["danger", "primary", "secondary"] as const;
+export type ToolPillVariantKey = (typeof toolPillVariantKeys)[number];
+
+export const displayVariantKeys = {
+  accordion: accordionVariantKeys,
+  accordionGroup: accordionGroupVariantKeys,
+  actionDataTable: actionDataTableVariantKeys,
+  activityTimelineCard: activityTimelineCardVariantKeys,
+  analyticsCard: analyticsCardVariantKeys,
+  assetCard: assetCardVariantKeys,
+  assetGrid: assetGridVariantKeys,
+  avatar: avatarVariantKeys,
+  badge: badgeVariantKeys,
+  barChart: barChartVariantKeys,
+  chartLegend: chartLegendVariantKeys,
+  chatMessage: chatMessageVariantKeys,
+  choroplethMap: choroplethMapVariantKeys,
+  concentricProgressCard: concentricProgressCardVariantKeys,
+  docNote: docNoteVariantKeys,
+  donutChart: donutChartVariantKeys,
+  fileTree: fileTreeVariantKeys,
+  gaugeChart: gaugeChartVariantKeys,
+  heatmapChart: heatmapChartVariantKeys,
+  icon: iconVariantKeys,
+  imagePreview: imagePreviewVariantKeys,
+  img: imgVariantKeys,
+  labeledDonutCard: labeledDonutCardVariantKeys,
+  lineChart: lineChartVariantKeys,
+  list: listVariantKeys,
+  metadataList: metadataListVariantKeys,
+  miniDistributionBarCard: miniDistributionBarCardVariantKeys,
+  pieChart: pieChartVariantKeys,
+  quadrantMatrix: quadrantMatrixVariantKeys,
+  radarChart: radarChartVariantKeys,
+  radialBarChart: radialBarChartVariantKeys,
+  retentionCohortCard: retentionCohortCardVariantKeys,
+  ribbonChart: ribbonChartVariantKeys,
+  searchableAccordion: searchableAccordionVariantKeys,
+  segmentedGaugeCard: segmentedGaugeCardVariantKeys,
+  segmentTimelineCard: segmentTimelineCardVariantKeys,
+  separator: separatorVariantKeys,
+  sparklineChart: sparklineChartVariantKeys,
+  stackedBarChart: stackedBarChartVariantKeys,
+  tagEditor: tagEditorVariantKeys,
+  toolPill: toolPillVariantKeys,
+} as const;

package/src/components/{atoms → feedback}/Alert.tsx

@@ -6,13 +6,19 @@ import type { AlertVariantKey } from "./generated/variant-keys"
 import { alertDefaultVariantKey } from "./generated/default-variant-keys"
 
 const alertVariantClasses: Record<AlertVariantKey, string> = {
-    default: "border-border bg-background text-foreground",
+    default: "border-border bg-background text-foreground [&_[data-alert-description]]:text-muted-foreground",
+    info:
+        "border-info-border bg-info-subtle text-info-subtle-foreground [&>svg]:text-info [&_[data-alert-description]]:text-info-subtle-foreground/85",
+    success:
+        "border-success-border bg-success-subtle text-success-subtle-foreground [&>svg]:text-success [&_[data-alert-description]]:text-success-subtle-foreground/85",
+    warning:
+        "border-warning-border bg-warning-subtle text-warning-subtle-foreground [&>svg]:text-warning [&_[data-alert-description]]:text-warning-subtle-foreground/85",
     destructive:
-        "border-destructive/20 bg-destructive/10 text-destructive [&>svg]:text-destructive",
+        "border-destructive-border bg-destructive-subtle text-destructive-subtle-foreground [&>svg]:text-destructive [&_[data-alert-description]]:text-destructive-subtle-foreground/85",
 }
 
 const alertVariants = cva(
-    "relative inline-flex h-fit w-[320px] max-w-full items-center gap-1 rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+    "relative inline-flex h-fit w-[320px] max-w-full flex-col items-center gap-1 rounded-lg border px-4 py-3 text-sm [&>*]:self-start [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3 [&>svg]:text-foreground [&>svg~*]:w-full [&>svg~*]:pl-7",
     {
         variants: {
             variant: alertVariantClasses,
@@ -42,7 +48,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <h5
         ref={ref}
-        className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+        className={cn("flex min-h-4 items-center font-medium font-semibold leading-none tracking-tight", className)}
         {...props}
     />
 ))
@@ -54,7 +60,8 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={cn("text-sm [&_p]:leading-relaxed", className)}
+        data-alert-description=""
+        className={cn("text-xs leading-relaxed [&_p]:leading-relaxed", className)}
         {...props}
     />
 ))

package/src/components/feedback/Banner.tsx

@@ -0,0 +1,90 @@
+"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 bannerVariants = cva(
+    "flex h-10 w-full items-center justify-between gap-3 px-4 py-0 text-sm",
+    {
+        variants: {
+            variant: {
+                default: "bg-foreground text-background",
+                info: "border border-info-border bg-info-subtle text-info-subtle-foreground [&>div:first-child>span:first-child]:text-info",
+                success: "border border-success-border bg-success-subtle text-success-subtle-foreground [&>div:first-child>span:first-child]:text-success",
+                warning: "border border-warning-border bg-warning-subtle text-warning-subtle-foreground [&>div:first-child>span:first-child]:text-warning",
+                destructive: "border border-destructive-border bg-destructive-subtle text-destructive-subtle-foreground [&>div:first-child>span:first-child]:text-destructive",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+)
+
+export interface BannerProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof bannerVariants> {
+    icon?: React.ReactNode
+    /** Optional CTA element rendered before the close button. */
+    action?: React.ReactNode
+    /** When provided, an × button shows. Click triggers this callback. */
+    onDismiss?: () => void
+    dismissLabel?: string
+}
+
+const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
+    (
+        {
+            className,
+            variant,
+            icon,
+            action,
+            onDismiss,
+            dismissLabel = "Dismiss",
+            children,
+            ...props
+        },
+        ref
+    ) => (
+        <div
+            ref={ref}
+            role="status"
+            className={cn(bannerVariants({ variant }), className)}
+            {...props}
+        >
+            <div className="flex min-w-0 items-center gap-2">
+                {icon ? (
+                    <span className="flex shrink-0 items-center" aria-hidden>
+                        {icon}
+                    </span>
+                ) : null}
+                <span className="min-w-0 truncate">{children}</span>
+            </div>
+            <div className="flex items-center gap-2">
+                {action}
+                {onDismiss ? (
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <button
+                                type="button"
+                                onClick={onDismiss}
+                                aria-label={dismissLabel}
+                                className="inline-flex h-6 w-6 items-center justify-center rounded opacity-80 transition-colors hover:bg-foreground/10 hover:opacity-100"
+                            >
+                                <X className="h-4 w-4" />
+                            </button>
+                        </TooltipTrigger>
+                        <TooltipContent>{dismissLabel}</TooltipContent>
+                    </Tooltip>
+                ) : null}
+            </div>
+        </div>
+    )
+)
+Banner.displayName = "Banner"
+
+export { Banner }

package/src/components/{molecules → feedback}/NotificationCenter.tsx

@@ -1,10 +1,11 @@
 "use client"
 
 import * as React from "react"
-import { Bell, Check } from "lucide-react"
-import { Button } from "../atoms/Button"
-import { Popover, PopoverContent, PopoverTrigger } from "./Popover"
-import { ScrollArea } from "./ScrollArea"
+import { IconBell as Bell, IconCheck as Check } from "@tabler/icons-react";
+import { Button } from "../inputs/Button"
+import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover"
+import { ScrollArea } from "../layout/ScrollArea"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
 import { cn } from "../../lib/utils"
 
 export interface Notification {
@@ -15,11 +16,21 @@ export interface Notification {
     read: boolean
 }
 
+export interface NotificationCenterLabels {
+    toggle?: string
+    title?: string
+    clearAll?: string
+    emptyTitle?: string
+    markAsRead?: string
+    viewHistory?: string
+}
+
 export interface NotificationCenterProps {
     notifications: Notification[]
     onMarkAsRead?: (id: string) => void
     onLinkClick?: (id: string) => void
     onClearAll?: () => void
+    labels?: NotificationCenterLabels
 }
 
 const NotificationCenter = ({
@@ -27,24 +38,42 @@ const NotificationCenter = ({
     onMarkAsRead,
     onLinkClick,
     onClearAll,
+    labels,
 }: NotificationCenterProps) => {
     const unreadCount = notifications.filter((n) => !n.read).length
     const [isOpen, setIsOpen] = React.useState(false)
+    const resolvedLabels: Required<NotificationCenterLabels> = {
+        toggle: labels?.toggle ?? "Toggle notifications",
+        title: labels?.title ?? "Notifications",
+        clearAll: labels?.clearAll ?? "Clear all",
+        emptyTitle: labels?.emptyTitle ?? "No notifications",
+        markAsRead: labels?.markAsRead ?? "Mark as read",
+        viewHistory: labels?.viewHistory ?? "View all notification history",
+    }
 
     return (
         <Popover open={isOpen} onOpenChange={setIsOpen}>
-            <PopoverTrigger asChild>
-                <Button variant="ghost" size="icon" className="relative text-muted-foreground hover:text-foreground">
-                    <Bell className="h-5 w-5" />
-                    {unreadCount > 0 && (
-                        <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-destructive ring-2 ring-background" />
-                    )}
-                    <span className="sr-only">Toggle notifications</span>
-                </Button>
-            </PopoverTrigger>
+            <Tooltip>
+                <PopoverTrigger asChild>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="relative text-muted-foreground hover:text-foreground"
+                            aria-label={resolvedLabels.toggle}
+                        >
+                            <Bell className="h-5 w-5" />
+                            {unreadCount > 0 && (
+                                <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-destructive ring-2 ring-background" />
+                            )}
+                        </Button>
+                    </TooltipTrigger>
+                </PopoverTrigger>
+                <TooltipContent>{resolvedLabels.toggle}</TooltipContent>
+            </Tooltip>
             <PopoverContent align="end" className="w-[320px] w-80 p-0" sideOffset={8}>
                 <div className="flex items-center justify-between border-b px-4 py-3 bg-muted/50 backdrop-blur">
-                    <h4 className="font-semibold text-sm">Notifications</h4>
+                    <h4 className="font-semibold text-sm">{resolvedLabels.title}</h4>
                     {unreadCount > 0 && onClearAll && (
                         <Button
                             variant="ghost"
@@ -52,7 +81,7 @@ const NotificationCenter = ({
                             className="h-auto px-2 text-xs text-muted-foreground hover:text-foreground"
                             onClick={onClearAll}
                         >
-                            Clear all
+                            {resolvedLabels.clearAll}
                         </Button>
                     )}
                 </div>
@@ -60,7 +89,7 @@ const NotificationCenter = ({
                     {notifications.length === 0 ? (
                         <div className="flex h-full flex-col items-center justify-center p-4 text-center text-muted-foreground">
                             <Bell className="h-8 w-8 mb-2 opacity-20" />
-                            <p className="text-sm">No notifications</p>
+                            <p className="text-sm">{resolvedLabels.emptyTitle}</p>
                         </div>
                     ) : (
                         <div className="grid">
@@ -69,7 +98,7 @@ const NotificationCenter = ({
                                     key={notification.id}
                                     className={cn(
                                         "flex flex-col gap-1 border-b p-4 text-sm transition-colors hover:bg-muted/50",
-                                        !notification.read && "bg-primary/10"
+                                        !notification.read && "bg-primary-subtle"
                                     )}
                                     onClick={() => onLinkClick?.(notification.id)}
                                 >
@@ -78,19 +107,23 @@ const NotificationCenter = ({
                                             {notification.title}
                                         </p>
                                         {!notification.read && onMarkAsRead && (
-                                            <Button
-                                                variant="ghost"
-                                                size="icon"
-                                                className="h-6 w-6 -mr-2 -mt-1 text-muted-foreground hover:text-primary"
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    onMarkAsRead(notification.id);
-                                                }}
-                                                title="Mark as read"
-                                            >
-                                                <span className="sr-only">Mark as read</span>
-                                                <div className="h-1.5 w-1.5 rounded-full bg-primary" />
-                                            </Button>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Button
+                                                        variant="ghost"
+                                                        size="icon"
+                                                        className="h-6 w-6 -mr-2 -mt-1 text-muted-foreground hover:text-primary"
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            onMarkAsRead(notification.id);
+                                                        }}
+                                                        aria-label={resolvedLabels.markAsRead}
+                                                    >
+                                                        <div className="h-1.5 w-1.5 rounded-full bg-primary" />
+                                                    </Button>
+                                                </TooltipTrigger>
+                                                <TooltipContent>{resolvedLabels.markAsRead}</TooltipContent>
+                                            </Tooltip>
                                         )}
                                     </div>
                                     <p className="text-muted-foreground line-clamp-2">
@@ -106,7 +139,7 @@ const NotificationCenter = ({
                 </ScrollArea>
                 <div className="border-t p-2">
                     <Button variant="ghost" className="h-8 w-full text-xs text-muted-foreground hover:text-foreground">
-                        View all notification history
+                        {resolvedLabels.viewHistory}
                     </Button>
                 </div>
             </PopoverContent>

package/src/components/feedback/ProgressWidget.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Progress } from "./Progress"
+import { Card, CardContent, CardHeader, CardTitle } from "../display/Card"
+
+export interface ProgressWidgetProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string
+    value: number
+    max?: number
+    label?: string
+    subtext?: string
+    progressLabel?: string
+    subtextLive?: "off" | "polite" | "assertive"
+    icon?: React.ReactNode
+}
+
+const ProgressWidget = React.forwardRef<HTMLDivElement, ProgressWidgetProps>(
+    ({ className, title, value, max = 100, label, subtext, progressLabel, subtextLive = "off", icon, ...props }, ref) => {
+        const safeMax = max > 0 ? max : 100
+        const boundedValue = Math.min(safeMax, Math.max(0, value))
+        const percentage = Math.round((boundedValue / safeMax) * 100)
+
+        return (
+            <Card ref={ref} className={cn("flex flex-col w-[320px] rounded-lg border overflow-hidden", className)} {...props}>
+                <CardHeader className="flex flex-row items-center justify-between gap-3 space-y-0 pb-2">
+                    <CardTitle className="min-w-0 truncate text-sm font-medium">{title}</CardTitle>
+                    {icon && <div className="shrink-0 text-muted-foreground">{icon}</div>}
+                </CardHeader>
+                <CardContent>
+                    <div className="text-2xl font-bold tabular-nums">{label || `${percentage}%`}</div>
+                    <Progress value={boundedValue} max={safeMax} className="mt-2 h-2" aria-label={progressLabel ?? title} />
+                    {subtext && (
+                        <p className="text-xs text-muted-foreground mt-2" aria-live={subtextLive}>{subtext}</p>
+                    )}
+                </CardContent>
+            </Card>
+        )
+    }
+)
+ProgressWidget.displayName = "ProgressWidget"
+
+export { ProgressWidget }

package/src/components/{atoms → feedback}/Spinner.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react"
-import { RefreshCw } from "lucide-react"
+import { IconLoader2 as Loader2 } from "@tabler/icons-react";
 import { cn } from "../../lib/utils"
 import type { SpinnerVariantKey } from "./generated/variant-keys"
 import { spinnerDefaultVariantKey } from "./generated/default-variant-keys"
@@ -22,7 +22,7 @@ export interface SpinnerProps extends ComponentProps<"svg"> {
 
 export function Spinner({ className, size = spinnerDefaultVariantKey, ...props }: SpinnerProps) {
     return (
-        <RefreshCw
+        <Loader2
             className={cn(
                 "animate-spin text-muted-foreground",
                 isSpinnerVariantKey(size) ? spinnerSizeClasses[size] : "h-10 w-10",

package/src/components/{molecules → feedback}/StatusBar.tsx

@@ -15,21 +15,21 @@ const StatusBar = React.forwardRef<HTMLDivElement, StatusBarProps>(
             <div
                 ref={ref}
                 className={cn(
-                    "flex flex-col flex-row items-center w-[640px] justify-between px-4 py-1 bg-primary text-primary-foreground text-xs z-50 shadow-md",
+                    "grid w-[640px] max-w-full grid-cols-2 items-center justify-between gap-x-3 gap-y-1 overflow-hidden px-4 py-1 bg-primary text-primary-foreground text-xs z-50 shadow-md sm:flex sm:flex-col sm:flex-row sm:gap-2",
                     fixed && "fixed bottom-0 left-0 right-0",
                     className
                 )}
                 {...props}
             >
-                <div className="flex items-center gap-4">
+                <div className="order-2 flex min-w-0 items-center justify-start gap-4 text-left sm:order-none sm:max-w-[30%] [&>*]:truncate">
                     {leftNode}
                 </div>
 
-                <div className="flex items-center gap-2">
+                <div className="order-1 col-span-2 flex min-w-0 w-full flex-1 items-center justify-center gap-2 text-center sm:order-none sm:w-auto [&>*]:truncate">
                     {children}
                 </div>
 
-                <div className="flex items-center gap-4">
+                <div className="order-3 flex min-w-0 items-center justify-end gap-4 text-right sm:order-none sm:max-w-[30%] [&>*]:truncate">
                     {rightNode}
                 </div>
             </div>