@ponti-studios/ui 0.1.2 → 0.3.0

package/src/components/data-display/metric-card.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+
+interface MetricCardProps extends ComponentProps<"div"> {
+  label: string;
+  value: ReactNode;
+  change?: ReactNode;
+}
+
+/** Label/value/change stat tile. */
+export function MetricCard({ label, value, change, className, ...props }: MetricCardProps) {
+  return (
+    <div className={cn("ui-flat-card", className)} {...props}>
+      <p className="ui-data-label mb-2">{label}</p>
+      <p className="ui-data-value">{value ?? "—"}</p>
+      {change != null ? <p className="text-muted-foreground mt-1.5 text-xs">{change}</p> : null}
+    </div>
+  );
+}

package/src/components/data-display/sort-controls.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import type { SortOption } from "../../hooks/sort.types";
+import { SortControls } from "./sort-controls";
+
+const meta = {
+  title: "DataDisplay/SortControls",
+  component: SortControls,
+  tags: ["autodocs"],
+} satisfies Meta<typeof SortControls>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sortableFields = ["amount", "date", "description", "category"];
+
+function SortControlsPreview() {
+  const [sortOptions, setSortOptions] = useState<SortOption[]>([
+    { field: "date", direction: "desc" },
+  ]);
+
+  return (
+    <SortControls
+      sortOptions={sortOptions}
+      sortableFields={sortableFields}
+      addSortOption={(option) => setSortOptions((prev) => [...prev, option])}
+      updateSortOption={(index, option) =>
+        setSortOptions((prev) => prev.map((o, i) => (i === index ? option : o)))
+      }
+      removeSortOption={(index) => setSortOptions((prev) => prev.filter((_, i) => i !== index))}
+    />
+  );
+}
+
+export const Default: Story = {
+  args: {
+    sortOptions: [],
+    sortableFields,
+    addSortOption: () => {},
+    updateSortOption: () => {},
+    removeSortOption: () => {},
+  },
+  render: () => <SortControlsPreview />,
+};

package/src/components/data-display/sort-controls.tsx

@@ -0,0 +1,99 @@
+import { ListOrdered, PlusCircle } from "lucide-react";
+
+import type { SortField, SortOption } from "../../hooks/sort.types";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../overlays/dropdown-menu";
+import { Button } from "../primitives/button";
+import { SortRow } from "./sort-row";
+
+export interface SortControlsProps {
+  sortOptions: SortOption[];
+  sortableFields: SortField[];
+  addSortOption: (option: SortOption) => void;
+  updateSortOption: (index: number, option: SortOption) => void;
+  removeSortOption: (index: number) => void;
+  open?: boolean | undefined;
+  onOpenChange?: ((open: boolean) => void) | undefined;
+  focusedSortIndex?: (number | null) | undefined;
+}
+
+/** Multi-field sort builder, driven by the `SortOption`/`SortField` shared types. */
+export function SortControls({
+  sortOptions,
+  sortableFields,
+  addSortOption,
+  updateSortOption,
+  removeSortOption,
+  open,
+  onOpenChange,
+  focusedSortIndex,
+}: SortControlsProps) {
+  const availableFieldsToAdd = sortableFields.filter(
+    (field) => !sortOptions.some((option) => option.field === field),
+  );
+
+  return (
+    <DropdownMenu {...(open !== undefined && { open })} {...(onOpenChange && { onOpenChange })}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">
+          <ListOrdered className="mr-2 size-4" />
+          Sort
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-80 space-y-2 p-2">
+        <DropdownMenuLabel>Define Sort Order</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        <DropdownMenuGroup className="space-y-1">
+          {sortOptions.map((sort, index) => {
+            const usedFields = sortOptions
+              .filter((_, i) => i !== index)
+              .map((option) => option.field);
+            return (
+              <DropdownMenuItem
+                key={sort.field}
+                onSelect={(e) => e.preventDefault()}
+                className={`p-0 focus:bg-transparent ${index === focusedSortIndex ? "bg-accent" : ""}`}
+              >
+                <SortRow
+                  sortOption={sort}
+                  index={index}
+                  sortableFields={sortableFields}
+                  usedFields={usedFields}
+                  updateSortOption={updateSortOption}
+                  removeSortOption={removeSortOption}
+                />
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuGroup>
+        {availableFieldsToAdd.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={(e) => {
+                e.preventDefault();
+                const firstAvailable = availableFieldsToAdd[0];
+                if (firstAvailable) {
+                  addSortOption({ field: firstAvailable, direction: "desc" });
+                }
+              }}
+              disabled={availableFieldsToAdd.length === 0}
+              className="mt-1"
+            >
+              <PlusCircle className="mr-2 size-4" />
+              Add Sort Criterion
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/data-display/sort-row.tsx

@@ -0,0 +1,74 @@
+import type { SortField, SortOption } from "../../hooks/sort.types";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../forms/select";
+import { Button } from "../primitives/button";
+import { X } from "lucide-react";
+
+export interface SortRowProps {
+  sortOption: SortOption;
+  index: number;
+  sortableFields: SortField[];
+  usedFields: SortField[];
+  updateSortOption: (index: number, option: SortOption) => void;
+  removeSortOption: (index: number) => void;
+}
+
+export function SortRow({
+  sortOption,
+  index,
+  sortableFields,
+  usedFields,
+  updateSortOption,
+  removeSortOption,
+}: SortRowProps) {
+  const availableFieldsForCurrentSelect = sortableFields.filter(
+    (field) => !usedFields.includes(field) || field === sortOption.field,
+  );
+
+  return (
+    <div key={sortOption.field} className="flex items-center gap-2">
+      <Select
+        value={sortOption.field}
+        onValueChange={(value) => updateSortOption(index, { ...sortOption, field: value })}
+      >
+        <SelectTrigger className="h-8 w-[130px] text-xs">
+          <SelectValue placeholder="Select field" />
+        </SelectTrigger>
+        <SelectContent>
+          {availableFieldsForCurrentSelect.map((field) => (
+            <SelectItem key={field} value={field} className="text-xs">
+              {field.charAt(0).toUpperCase() + field.slice(1)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Select
+        value={sortOption.direction}
+        onValueChange={(value) => {
+          if (value === "asc" || value === "desc") {
+            updateSortOption(index, { ...sortOption, direction: value });
+          }
+        }}
+      >
+        <SelectTrigger className="h-8 w-[110px] text-xs">
+          <SelectValue placeholder="Direction" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="asc" className="text-xs">
+            Ascending
+          </SelectItem>
+          <SelectItem value="desc" className="text-xs">
+            Descending
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => removeSortOption(index)}
+        className="size-8 p-0"
+      >
+        <X className="text-muted-foreground size-4" />
+      </Button>
+    </div>
+  );
+}

package/src/components/data-display/table.tsx

@@ -5,7 +5,7 @@ import { cn } from "../../lib/utils";
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
     <div className="w-full overflow-auto">
-      <table ref={ref} className={cn("body-3 w-full caption-bottom", className)} {...props} />
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
     </div>
   ),
 );
@@ -31,7 +31,7 @@ const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn("bg-accent text-on-accent font-medium", className)} {...props} />
+  <tfoot ref={ref} className={cn("bg-muted font-medium", className)} {...props} />
 ));
 TableFooter.displayName = "TableFooter";
 
@@ -39,7 +39,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
-      className={cn("data-[state=selected]:bg-inset border-default border-b", className)}
+      className={cn("data-[state=selected]:bg-muted border-b", className)}
       {...props}
     />
   ),
@@ -53,7 +53,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "ui-eyebrow h-9 px-3 text-left align-middle [&:has([role=checkbox])]:pr-0",
+      "h-9 px-3 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -77,7 +77,7 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("body-4 text-secondary mt-4", className)} {...props} />
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
 ));
 TableCaption.displayName = "TableCaption";
 

package/src/components/feedback/alert.tsx

@@ -8,9 +8,9 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-panel text-primary",
+        default: "bg-card text-card-foreground",
         destructive:
-          "text-destructive bg-panel [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+          "border-destructive/50 text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
       },
     },
     defaultVariants: {
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-title"
-      className={cn("subheading-4 col-start-2 line-clamp-1 min-h-4", className)}
+      className={cn("col-start-2 line-clamp-1 min-h-4 text-sm font-medium", className)}
       {...props}
     />
   );
@@ -49,7 +49,7 @@ function AlertDescription({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="alert-description"
       className={cn(
-        "text-secondary body-3 col-start-2 grid justify-items-start gap-1 [&_p]:leading-relaxed",
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
         className,
       )}
       {...props}

package/src/components/feedback/empty-state.tsx

@@ -37,9 +37,9 @@ export function EmptyState({
     <section
       className={cn(
         "rounded-lg px-5 py-8",
-        variant === "default" && "border-subtle bg-panel border",
-        variant === "dashed" && "border-subtle bg-panel border border-dashed",
-        variant === "search" && "border-subtle bg-surface border border-dashed",
+        variant === "default" && "border bg-card",
+        variant === "dashed" && "border bg-card border-dashed",
+        variant === "search" && "border bg-muted border-dashed",
         variant === "quiet" && "bg-surface",
         centered
           ? cn(
@@ -51,13 +51,13 @@ export function EmptyState({
       )}
     >
       {icon ? (
-        <div className="text-secondary mb-3 flex size-11 items-center justify-center" aria-hidden>
+        <div className="text-muted-foreground mb-3 flex size-11 items-center justify-center" aria-hidden>
           {icon}
         </div>
       ) : null}
       <div className={cn("space-y-2", centered && "max-w-[34ch]")}>
-        <h2 className={cn("text-primary", large ? "heading-3" : "heading-4")}>{title}</h2>
-        {description ? <p className="body-3 text-secondary">{description}</p> : null}
+        <h2 className={cn("text-foreground font-semibold tracking-tight", large ? "text-lg" : "text-base")}>{title}</h2>
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
       </div>
       {children ? <div className="mt-3">{children}</div> : null}
       {action ? <div className="mt-4">{action}</div> : null}

package/src/components/feedback/file-upload-status-badge.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FileUploadStatusBadge } from "./file-upload-status-badge";
+
+const meta = {
+  title: "Feedback/FileUploadStatusBadge",
+  component: FileUploadStatusBadge,
+  tags: ["autodocs"],
+} satisfies Meta<typeof FileUploadStatusBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { status: "uploading" },
+};
+
+export const AllStatuses: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <FileUploadStatusBadge status="uploading" />
+      <FileUploadStatusBadge status="processing" />
+      <FileUploadStatusBadge status="queued" />
+      <FileUploadStatusBadge status="done" />
+      <FileUploadStatusBadge status="error" />
+    </div>
+  ),
+};

package/src/components/feedback/file-upload-status-badge.tsx

@@ -0,0 +1,33 @@
+import { memo } from "react";
+
+import { cn } from "../../lib/utils";
+
+export type FileUploadStatusValue = "uploading" | "processing" | "queued" | "done" | "error";
+
+const STATUS_CONFIG: Record<FileUploadStatusValue, { bg: string; text: string; label: string }> = {
+  uploading: { bg: "bg-muted", text: "text-foreground", label: "Uploading" },
+  processing: { bg: "bg-muted", text: "text-foreground", label: "Processing" },
+  queued: { bg: "bg-secondary", text: "text-secondary-foreground", label: "Queued" },
+  done: { bg: "bg-accent", text: "text-accent-foreground", label: "Complete" },
+  error: { bg: "bg-destructive/10", text: "text-destructive", label: "Error" },
+};
+
+export const FileUploadStatusBadge = memo(function FileUploadStatusBadge({
+  status,
+}: {
+  status?: string | undefined;
+}) {
+  if (!status) return null;
+
+  const config = STATUS_CONFIG[status as FileUploadStatusValue] ?? {
+    bg: "bg-muted",
+    text: "text-foreground",
+    label: status,
+  };
+
+  return (
+    <span className={cn("px-2 py-1 text-xs font-medium", config.bg, config.text)}>
+      {config.label}
+    </span>
+  );
+});

package/src/components/feedback/file-upload-status.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FileUploadStatus } from "./file-upload-status";
+
+const meta = {
+  title: "Feedback/FileUploadStatus",
+  component: FileUploadStatus,
+  tags: ["autodocs"],
+} satisfies Meta<typeof FileUploadStatus>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Uploading: Story = {
+  render: () => (
+    <div className="w-80">
+      <FileUploadStatus uploadStatus={{ status: "uploading", stats: { progress: 42 } }} />
+    </div>
+  ),
+};
+
+export const Queued: Story = {
+  render: () => (
+    <div className="w-80">
+      <FileUploadStatus uploadStatus={{ status: "queued" }} />
+    </div>
+  ),
+};
+
+export const Done: Story = {
+  render: () => (
+    <div className="w-80">
+      <FileUploadStatus
+        uploadStatus={{
+          status: "done",
+          stats: {
+            processingTime: 4200,
+            total: 128,
+            created: 90,
+            updated: 30,
+            skipped: 8,
+          },
+        }}
+      />
+    </div>
+  ),
+};
+
+export const Error: Story = {
+  render: () => (
+    <div className="w-80">
+      <FileUploadStatus
+        uploadStatus={{ status: "error", error: "Could not parse the CSV file." }}
+      />
+    </div>
+  ),
+};

package/src/components/feedback/file-upload-status.tsx

@@ -0,0 +1,152 @@
+import { XIcon } from "lucide-react";
+import { memo } from "react";
+
+import { cn } from "../../lib/utils";
+import { ProgressBar } from "./progress-bar";
+
+export interface FileUploadStats {
+  progress?: number;
+  processingTime?: number;
+  total?: number;
+  created?: number;
+  updated?: number;
+  skipped?: number;
+  merged?: number;
+  invalid?: number;
+  errors?: unknown[];
+}
+
+export interface FileUploadState {
+  status: "uploading" | "processing" | "queued" | "done" | "error" | (string & {});
+  error?: string;
+  stats?: FileUploadStats;
+}
+
+export const FileUploadStatus = memo(function FileUploadStatus({
+  uploadStatus,
+}: {
+  uploadStatus?: FileUploadState;
+}) {
+  if (!uploadStatus) return null;
+  const { status, error, stats } = uploadStatus;
+
+  if (status === "uploading" || status === "processing") {
+    const progress = stats?.progress;
+
+    return (
+      <output className="w-full">
+        <div className="mb-1.5 flex items-center justify-between">
+          <span className="text-muted-foreground text-sm font-medium">
+            {status === "uploading" ? "Uploading" : "Processing"}
+          </span>
+          <span className="text-foreground text-sm font-medium">
+            {progress !== undefined ? `${Math.round(progress)}%` : ""}
+          </span>
+        </div>
+        <div className="w-full">
+          {typeof progress === "number" ? (
+            <ProgressBar
+              progress={progress}
+              className={cn("bg-muted h-2", "before:bg-emphasis-high")}
+            />
+          ) : (
+            <div className="bg-muted h-2 overflow-hidden">
+              <div className="bg-emphasis-high void-anim-breezy-progress h-full" />
+            </div>
+          )}
+        </div>
+      </output>
+    );
+  }
+
+  if (status === "queued") {
+    return (
+      <output className="w-full">
+        <div className="mb-1.5 flex items-center justify-between">
+          <span className="text-muted-foreground text-sm font-medium">Queue position</span>
+        </div>
+        <div className="w-full">
+          <ProgressBar progress={0} className="bg-warning-subtle before:bg-warning h-2" />
+        </div>
+      </output>
+    );
+  }
+
+  if (status === "done") {
+    return (
+      <output className="space-y-3">
+        <div className="w-full">
+          <ProgressBar progress={100} className="bg-emphasis-minimal before:bg-emphasis-high h-2" />
+        </div>
+        {stats && <ProcessingStats stats={stats} />}
+      </output>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <output className="mt-2" role="alert">
+        <div className="bg-destructive/10 text-destructive flex items-start gap-2 p-3">
+          <XIcon className="mt-0.5 h-5 w-5 flex-shrink-0" aria-hidden="true" />
+          <span className="text-sm">{error}</span>
+        </div>
+      </output>
+    );
+  }
+
+  return <output className="text-muted-foreground text-sm">{status}</output>;
+});
+
+const ProcessingStats = memo(function ProcessingStats({ stats }: { stats: FileUploadStats }) {
+  if (!stats || typeof stats !== "object") return null;
+
+  return (
+    <dl className="divide-border mt-3 divide-y">
+      {stats.processingTime !== undefined && (
+        <div className="py-2 first:pt-0 last:pb-0">
+          <dt className="sr-only">Processing time</dt>
+          <dd className="text-foreground text-sm font-medium">
+            Completed in {(stats.processingTime / 1000).toFixed(1)}s
+          </dd>
+        </div>
+      )}
+      {stats.total !== undefined && Object.values(stats).length ? (
+        <>
+          <ProcessingStat label="Total" value={stats.total} />
+          <ProcessingStat label="Created" value={stats.created} />
+          <ProcessingStat label="Updated" value={stats.updated} />
+          <ProcessingStat label="Skipped" value={stats.skipped} />
+          <ProcessingStat label="Merged" value={stats.merged} />
+          <ProcessingStat label="Invalid" value={stats.invalid} />
+        </>
+      ) : null}
+
+      {stats.errors?.length && stats.errors.length > 0 ? (
+        <div className="py-2">
+          <dt className="text-foreground text-sm font-medium">Errors</dt>
+          <dd className="mt-1">
+            <span className="bg-destructive/10 text-destructive inline-flex items-center px-2 py-1 text-xs font-medium">
+              {stats.errors.length} error{stats.errors.length > 1 ? "s" : ""}
+            </span>
+          </dd>
+        </div>
+      ) : null}
+    </dl>
+  );
+});
+
+const ProcessingStat = memo(function ProcessingStat({
+  label,
+  value,
+}: {
+  label: string;
+  value?: number | undefined;
+}) {
+  if (value === undefined) return null;
+  return (
+    <div className="py-2">
+      <dt className="text-muted-foreground text-sm font-medium">{label}</dt>
+      <dd className="text-foreground mt-1 text-sm">{value.toLocaleString()}</dd>
+    </div>
+  );
+});

package/src/components/feedback/index.ts

@@ -1,6 +1,15 @@
 export { Alert, AlertDescription, AlertTitle } from "./alert";
 export { EmptyState } from "./empty-state";
 export type { EmptyStateProps } from "./empty-state";
+export { FileUploadStatus } from "./file-upload-status";
+export type { FileUploadState, FileUploadStats } from "./file-upload-status";
+export { FileUploadStatusBadge } from "./file-upload-status-badge";
+export type { FileUploadStatusValue } from "./file-upload-status-badge";
 export { Progress } from "./progress";
+export { ProgressBar } from "./progress-bar";
+export type { ProgressBarProps } from "./progress-bar";
+export { Skeleton } from "./skeleton";
 export { Spinner } from "./spinner";
 export type { SpinnerProps } from "./spinner";
+export { UpdateGuard } from "./update-guard";
+export type { UpdateGuardCopy, UpdateGuardProps } from "./update-guard";

package/src/components/feedback/progress-bar.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { ProgressBar } from "./progress-bar";
+
+const meta = {
+  title: "Feedback/ProgressBar",
+  component: ProgressBar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { progress: 60 },
+  render: (args) => (
+    <div className="w-64">
+      <ProgressBar {...args} />
+    </div>
+  ),
+};
+
+export const Empty: Story = {
+  args: { progress: 0 },
+  render: (args) => (
+    <div className="w-64">
+      <ProgressBar {...args} />
+    </div>
+  ),
+};
+
+export const Complete: Story = {
+  args: { progress: 100 },
+  render: (args) => (
+    <div className="w-64">
+      <ProgressBar {...args} />
+    </div>
+  ),
+};