@ponti-studios/ui 0.1.2 → 0.4.0

package/src/components/data-display/filter-chip.tsx

@@ -13,24 +13,30 @@ export interface FilterChipProps {
 /** An applied filter with an optional edit action and an explicit remove action. */
 export function FilterChip({ label, onRemove, onClick, className }: FilterChipProps) {
   const labelContent = onClick ? (
-    <button type="button" className="min-h-11 px-3 text-left" onClick={onClick}>
+    <button
+      type="button"
+      className="focus-visible:ring-ring min-h-9 rounded-full px-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+      onClick={onClick}
+    >
       {label}
     </button>
   ) : (
-    <span className="flex min-h-11 items-center px-3">{label}</span>
+    <span className="flex min-h-9 items-center px-3">{label}</span>
   );
 
   return (
     <span
+      role="group"
+      aria-label={typeof label === "string" ? `${label} filter` : "filter"}
       className={cn(
-        "border-subtle bg-panel text-primary inline-flex items-center rounded-full border text-sm font-medium",
+        "border-border bg-secondary text-secondary-foreground inline-flex items-center rounded-full border text-sm font-medium",
         className,
       )}
     >
       {labelContent}
       <button
         type="button"
-        className="text-secondary hover:text-primary mr-1 flex size-10 items-center justify-center rounded-full"
+        className="text-muted-foreground hover:text-foreground focus-visible:ring-ring mr-1 flex size-9 items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
         onClick={onRemove}
         aria-label={`Remove filter: ${typeof label === "string" ? label : "selected filter"}`}
       >

package/src/components/data-display/index.ts

@@ -1,6 +1,11 @@
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
 export { FilterChip } from "./filter-chip";
 export type { FilterChipProps } from "./filter-chip";
+export { MetricCard } from "./metric-card";
+export { SortControls } from "./sort-controls";
+export type { SortControlsProps } from "./sort-controls";
+export { SortRow } from "./sort-row";
+export type { SortRowProps } from "./sort-row";
 export {
   Table,
   TableBody,

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { MetricCard } from "./metric-card";
+
+const meta = {
+  title: "DataDisplay/MetricCard",
+  component: MetricCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof MetricCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Net worth",
+    value: "$48,210",
+  },
+};
+
+export const WithChange: Story = {
+  args: {
+    label: "Monthly spend",
+    value: "$3,120",
+    change: "+4.2% vs last month",
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    label: "Runway",
+    value: undefined,
+  },
+};
+
+export const Grid: Story = {
+  args: {
+    label: "Net worth",
+    value: "$48,210",
+  },
+  render: () => (
+    <div className="grid w-[520px] grid-cols-3 gap-3">
+      <MetricCard label="Net worth" value="$48,210" change="+2.1%" />
+      <MetricCard label="Income" value="$6,400" />
+      <MetricCard label="Expenses" value="$3,120" change="-1.4%" />
+    </div>
+  ),
+};

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-muted" : ""}`}
+              >
+                <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,17 +31,13 @@ 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";
 
 const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
   ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn("data-[state=selected]:bg-inset border-default border-b", className)}
-      {...props}
-    />
+    <tr ref={ref} className={cn("data-[state=selected]:bg-muted border-b", className)} {...props} />
   ),
 );
 TableRow.displayName = "TableRow";
@@ -53,7 +49,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",
+      "text-muted-foreground h-9 px-3 text-left align-middle text-xs font-medium [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -77,7 +73,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("text-muted-foreground mt-4 text-sm", 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" && "bg-card border",
+        variant === "dashed" && "bg-card border border-dashed",
+        variant === "search" && "bg-muted border border-dashed",
         variant === "quiet" && "bg-surface",
         centered
           ? cn(
@@ -51,13 +51,23 @@ 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-muted-foreground text-sm">{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-muted", text: "text-muted-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>
+  ),
+};