@ponti-studios/ui 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",

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

@@ -6,8 +6,9 @@ import { cn } from "../../lib/utils";
 
 function Accordion({
   type,
-  collapsible: _collapsible,
+  collapsible = true,
   className,
+  onValueChange,
   ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root> & {
   type?: "single" | "multiple";
@@ -17,6 +18,14 @@ function Accordion({
     <AccordionPrimitive.Root
       data-slot="accordion"
       multiple={type === "multiple"}
+      onValueChange={(value, details) => {
+        if (type !== "multiple" && !collapsible && value.length === 0) {
+          details.cancel();
+          return;
+        }
+
+        onValueChange?.(value, details);
+      }}
       {...props}
       className={cn("w-full", className)}
     />

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

@@ -40,7 +40,7 @@ export function EmptyState({
         variant === "default" && "bg-card border",
         variant === "dashed" && "bg-card border border-dashed",
         variant === "search" && "bg-muted border border-dashed",
-        variant === "quiet" && "bg-surface",
+        variant === "quiet" && "bg-card",
         centered
           ? cn(
               "flex flex-col items-center justify-center text-center",

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

@@ -1,7 +1,6 @@
 import { XIcon } from "lucide-react";
 import { memo } from "react";
 
-import { cn } from "../../lib/utils";
 import { ProgressBar } from "./progress-bar";
 
 export interface FileUploadStats {
@@ -47,11 +46,12 @@ export const FileUploadStatus = memo(function FileUploadStatus({
           {typeof progress === "number" ? (
             <ProgressBar
               progress={progress}
-              className={cn("bg-muted h-2", "before:bg-emphasis-high")}
+              className="bg-muted h-2"
+              indicatorClassName="border-primary"
             />
           ) : (
             <div className="bg-muted h-2 overflow-hidden">
-              <div className="bg-emphasis-high void-anim-breezy-progress h-full" />
+              <div className="bg-primary void-anim-breezy-progress h-full" />
             </div>
           )}
         </div>
@@ -66,7 +66,11 @@ export const FileUploadStatus = memo(function FileUploadStatus({
           <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" />
+          <ProgressBar
+            progress={0}
+            className="bg-warning/10 h-2"
+            indicatorClassName="border-warning"
+          />
         </div>
       </output>
     );
@@ -76,7 +80,11 @@ export const FileUploadStatus = memo(function FileUploadStatus({
     return (
       <output className="space-y-3">
         <div className="w-full">
-          <ProgressBar progress={100} className="bg-emphasis-minimal before:bg-emphasis-high h-2" />
+          <ProgressBar
+            progress={100}
+            className="bg-muted h-2"
+            indicatorClassName="border-primary"
+          />
         </div>
         {stats && <ProcessingStats stats={stats} />}
       </output>
@@ -87,7 +95,7 @@ export const FileUploadStatus = memo(function FileUploadStatus({
     return (
       <output className="mt-2" role="alert">
         <div className="bg-destructive/10 text-destructive-text flex items-start gap-2 p-3">
-          <XIcon className="mt-0.5 h-5 w-5 flex-shrink-0" aria-hidden="true" />
+          <XIcon className="mt-0.5 h-5 w-5 shrink-0" aria-hidden="true" />
           <span className="text-sm">{error}</span>
         </div>
       </output>

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

@@ -2,15 +2,16 @@ import { cn } from "../../lib/utils";
 
 export interface ProgressBarProps {
   className?: string;
+  indicatorClassName?: string;
   progress?: number;
 }
 
 /** Thin linear progress indicator, distinct from the Radix-backed `Progress`. */
-export function ProgressBar({ className, progress = 0 }: ProgressBarProps) {
+export function ProgressBar({ className, indicatorClassName, progress = 0 }: ProgressBarProps) {
   return (
     <div className={cn("border-border h-[2px] w-full overflow-hidden border-t", className)}>
       <div
-        className={cn("border-warning h-full border-t")}
+        className={cn("border-warning h-full border-t", indicatorClassName)}
         style={{
           width: `${Math.min(100, Math.max(0, progress))}%`,
           opacity: progress === 100 ? 0 : 0.8,

package/src/components/feedback/spinner.tsx

@@ -9,7 +9,7 @@ const sizeClasses = {
   xl: "size-12",
 } as const;
 
-export interface SpinnerProps extends React.ComponentProps<"div"> {
+export interface SpinnerProps extends React.ComponentProps<"output"> {
   label?: string | false;
   presentation?: "inline" | "centered";
   size?: keyof typeof sizeClasses;
@@ -25,13 +25,12 @@ export function Spinner({
   const accessibleLabel = typeof label === "string" ? label : "Loading";
 
   return (
-    <div
+    <output
       className={cn(
         "inline-flex items-center justify-center gap-2",
         presentation === "centered" && "flex w-full py-12",
         className,
       )}
-      role="status"
       aria-label={accessibleLabel}
       {...props}
     >
@@ -43,6 +42,6 @@ export function Spinner({
         aria-hidden="true"
       />
       {label && <span className="text-muted-foreground text-xs">{label}</span>}
-    </div>
+    </output>
   );
 }

package/src/components/feedback/update-guard.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
   args: {
     hideInDev: false,
     children: (
-      <div className="border-border bg-surface text-muted-foreground rounded-md border p-6 text-sm">
+      <div className="border-border bg-card text-muted-foreground rounded-md border p-6 text-sm">
         App content renders here. Offline/update prompts appear fixed to the bottom of the viewport
         when the service worker reports a change.
       </div>

package/src/components/feedback/update-guard.tsx

@@ -225,7 +225,7 @@ function UpdateGuardClient({
     <>
       {offlineMessage ? (
         <div className="fixed inset-x-0 bottom-16 z-50 flex justify-center px-4">
-          <div className="border-border bg-surface flex items-center gap-3 rounded-md border px-4 py-2">
+          <div className="border-border bg-card flex items-center gap-3 rounded-md border px-4 py-2">
             <span className="text-foreground text-sm">{offlineMessage}</span>
           </div>
         </div>
@@ -233,7 +233,7 @@ function UpdateGuardClient({
 
       {offlineReady || needRefresh ? (
         <div className="fixed inset-x-0 bottom-4 z-50 flex justify-center px-4">
-          <div className="border-border bg-surface flex items-center gap-3 rounded-md border px-4 py-2">
+          <div className="border-border bg-card flex items-center gap-3 rounded-md border px-4 py-2">
             <span className="text-foreground text-sm">
               {offlineReady
                 ? (copy?.offlineReady ?? "App ready to work offline")

package/src/components/filters/active-filters-bar.stories.tsx

@@ -26,6 +26,7 @@ export const Default: Story = {
       { id: "1", label: "Status: Active", onRemove: fn() },
       { id: "2", label: "Created after Jan 1", onRemove: fn() },
     ],
+    onClearAll: fn(),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -62,6 +63,7 @@ export const WithClearAll: Story = {
 export const WithSortOnly: Story = {
   args: {
     filters: [{ id: "1", label: "Date", onRemove: fn(), variant: "sort", direction: "desc" }],
+    onClearAll: fn(),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

package/src/components/filters/active-filters-bar.tsx

@@ -33,31 +33,29 @@ export function ActiveFiltersBar({ filters, className, onClearAll }: ActiveFilte
       <span className="text-muted-foreground shrink-0 self-stretch flex items-center text-sm border-r px-4">
         Filters
       </span>
-      <div
-        role="list"
-        className="flex flex-1 min-w-0 items-center gap-2 overflow-x-auto scroll-fade-x pl-4 py-1.5"
-      >
+      <ul className="flex flex-1 min-w-0 items-center gap-2 overflow-x-auto scroll-fade-x pl-4 py-1.5">
         {filters.map((filter) => (
-          <FilterChip
-            key={filter.id}
-            role="listitem"
-            className="shrink-0"
-            label={filter.label}
-            onRemove={filter.onRemove}
-            onClick={filter.onClick}
-            variant={filter.variant === "sort" ? "sort" : "default"}
-            direction={filter.direction}
-          />
+          <li key={filter.id} className="shrink-0">
+            <FilterChip
+              label={filter.label}
+              onRemove={filter.onRemove}
+              onClick={filter.onClick}
+              variant={filter.variant === "sort" ? "sort" : "default"}
+              direction={filter.direction}
+            />
+          </li>
         ))}
-      </div>
-      <button
-        type="button"
-        onClick={onClearAll}
-        className="hover:bg-muted text-muted-foreground hover:text-foreground inline-flex shrink-0 items-center justify-center self-stretch aspect-square rounded-r-lg border-l border-border transition-colors"
-        aria-label="Clear all"
-      >
-        <X className="size-4" />
-      </button>
+      </ul>
+      {onClearAll ? (
+        <button
+          type="button"
+          onClick={onClearAll}
+          className="hover:bg-muted text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex shrink-0 items-center justify-center self-stretch aspect-square rounded-r-lg border-l border-border transition-colors focus-visible:ring-2 focus-visible:outline-none"
+          aria-label="Clear all"
+        >
+          <X className="size-4" aria-hidden />
+        </button>
+      ) : null}
     </div>
   );
 }

package/src/components/filters/filter-select.tsx

@@ -14,6 +14,7 @@ export interface FilterSelectProps {
   onChange: (value: string) => void;
   options: FilterSelectOption[];
   label: string;
+  loadingText?: string;
   placeholder?: string;
   disabled?: boolean;
   isLoading?: boolean;
@@ -29,6 +30,7 @@ export function FilterSelect({
   value,
   options,
   onChange,
+  loadingText = "Loading...",
   placeholder = "All",
   disabled = false,
   isLoading = false,
@@ -44,7 +46,7 @@ export function FilterSelect({
   );
 
   return (
-    <div className={cn("space-y-2 min-w-36 bg-background", className)}>
+    <div className={cn("space-y-2 min-w-36", className)}>
       <Label htmlFor={selectId}>{label}</Label>
       <Select value={value} onValueChange={onChange} items={items}>
         <SelectTrigger id={selectId} disabled={disabled} aria-label={label} className="w-full">
@@ -53,7 +55,7 @@ export function FilterSelect({
         <SelectContent className="bg-background max-h-[250px] min-w-36 overflow-y-auto">
           <SelectItem value={ALL_VALUE}>{placeholder}</SelectItem>
           {isLoading ? (
-            <div className="text-muted-foreground px-2 py-1.5 text-sm">Loading…</div>
+            <div className="text-muted-foreground px-2 py-1.5 text-sm">{loadingText}</div>
           ) : options.length === 0 ? (
             <div className="text-muted-foreground px-2 py-1.5 text-sm">{emptyLabel}</div>
           ) : (

package/src/components/filters/index.ts

@@ -4,7 +4,3 @@ export { FilterChip } from "./filter-chip";
 export type { FilterChipProps } from "./filter-chip";
 export { FilterSelect } from "./filter-select";
 export type { FilterSelectOption, FilterSelectProps } from "./filter-select";
-export { Filters } from "./filters";
-export type { FiltersProps } from "./filters";
-export { SearchFilterBar } from "./search-filter-bar";
-export type { SearchFilterBarProps } from "./search-filter-bar";

package/src/components/forms/date-month-select.tsx

@@ -42,7 +42,7 @@ export function DateMonthSelect({
 
   return (
     <div className="flex items-center">
-      <div className="flex items-center justify-center size-10 border rounded-l-xl bg-surface-2 text-text-1">
+      <div className="border-border bg-background text-foreground flex size-10 items-center justify-center rounded-l-xl border">
         <Calendar className="size-4" />
       </div>
       <Select
@@ -51,7 +51,7 @@ export function DateMonthSelect({
       >
         <SelectTrigger
           className={cn(
-            "rounded-r-xl rounded-l-none min-h-10 max-h-10 bg-surface-2 text-text-1 border-l-0",
+            "border-border bg-background text-foreground min-h-10 max-h-10 rounded-l-none rounded-r-xl border-l-0",
             className,
           )}
           aria-label={placeholder}

package/src/components/forms/date-picker.tsx

@@ -41,7 +41,7 @@ export function DatePicker({
       ) : null}
       <Popover>
         <div className="flex w-full items-center">
-          <div className="border-border bg-surface-2 text-text-1 flex size-10 shrink-0 items-center justify-center rounded-l-xl border">
+          <div className="border-border bg-background text-foreground flex size-10 shrink-0 items-center justify-center rounded-l-xl border">
             <CalendarIcon className="size-4" aria-hidden />
           </div>
           <PopoverTrigger asChild>
@@ -49,7 +49,7 @@ export function DatePicker({
               id={id}
               variant={variant}
               disabled={disabled}
-              className="border-border bg-surface-2 text-text-1 placeholder:text-muted-foreground min-h-10 max-h-10 w-full justify-start rounded-l-none rounded-r-xl border-l-0 text-left font-normal"
+              className="border-border bg-background text-foreground placeholder:text-muted-foreground min-h-10 max-h-10 w-full justify-start rounded-l-none rounded-r-xl border-l-0 text-left font-normal"
             >
               {value ? format(value, dateFormat) : <span>{placeholder}</span>}
             </Button>

package/src/components/forms/drop-zone.stories.tsx

@@ -1,56 +1,140 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, fireEvent, userEvent, within } from "storybook/test";
 
-import { DropZone } from "./drop-zone";
+import { DropZone, type DropZoneFileInfo, type DropZoneStatus } from "./drop-zone";
 
 const meta = {
   title: "Forms/DropZone",
   component: DropZone,
   tags: ["autodocs"],
+  args: {
+    status: "empty",
+    onFiles: () => {},
+  },
 } satisfies Meta<typeof DropZone>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-function DropZonePreview({ isImporting = false }: { isImporting?: boolean }) {
-  const [dragActive, setDragActive] = useState(false);
-  const [files, setFiles] = useState<File[]>([]);
+function DropZonePreview({ initialStatus = "empty" }: { initialStatus?: DropZoneStatus }) {
+  const [status, setStatus] = useState<DropZoneStatus>(initialStatus);
+  const [file, setFile] = useState<DropZoneFileInfo | null>(
+    initialStatus === "empty" ? null : { name: "applications.csv", size: 24_576 },
+  );
 
   return (
-    <div className="w-96 space-y-3">
+    <div className="w-96">
       <DropZone
-        isImporting={isImporting}
-        dragActive={dragActive}
-        onDragOver={() => setDragActive(true)}
-        onDragLeave={() => setDragActive(false)}
-        onDrop={setFiles}
-        onChange={setFiles}
+        status={status}
+        file={file}
         accept=".csv"
-        helpText="Supported formats: CSV"
+        emptyHint="Supported formats: CSV"
+        error={status === "failed" ? "The file could not be processed." : undefined}
+        busyDescription="This usually takes a moment."
+        onFiles={(files) => {
+          const selectedFile = files[0];
+          if (!selectedFile) return;
+          setFile({ name: selectedFile.name, size: selectedFile.size });
+          setStatus("armed");
+        }}
+        onSubmit={() => setStatus("busy")}
+        onCancel={() => setStatus("armed")}
+        onRetry={() => setStatus("busy")}
+        onClear={() => {
+          setFile(null);
+          setStatus("empty");
+        }}
       />
-      {files.length > 0 ? (
-        <p className="text-muted-foreground text-sm">
-          {files.length} file{files.length > 1 ? "s" : ""} selected
-        </p>
-      ) : null}
     </div>
   );
 }
 
-const baseArgs = {
-  isImporting: false,
-  dragActive: false,
-  onDrop: () => {},
-  onDragOver: () => {},
-  onDragLeave: () => {},
+export const Default: Story = {
+  render: () => <DropZonePreview />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvasElement.querySelector('input[type="file"]') as HTMLInputElement;
+    const file = new File(["name,email\nAda,ada@example.com"], "applications.csv", {
+      type: "text/csv",
+    });
+
+    await expect(canvas.getByText("Drop a file here, or")).toBeInTheDocument();
+    await fireEvent.change(input, { target: { files: [file] } });
+    await expect(canvas.getByText("applications.csv")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: /Upload/ })).toBeInTheDocument();
+
+    await userEvent.click(canvas.getByRole("button", { name: /Upload/ }));
+    await expect(canvas.getByRole("progressbar", { name: "Processing…" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: /Cancel/ })).toBeInTheDocument();
+  },
 };
 
-export const Default: Story = {
-  args: baseArgs,
+export const Armed: Story = {
+  render: () => <DropZonePreview initialStatus="armed" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByText("applications.csv")).toBeInTheDocument();
+    await expect(canvas.getByText("24.0 KB")).toBeInTheDocument();
+    await userEvent.click(canvas.getByRole("button", { name: /Use a different file/ }));
+    await expect(canvas.getByText("Drop a file here, or")).toBeInTheDocument();
+  },
+};
+
+export const Busy: Story = {
+  render: () => <DropZonePreview initialStatus="busy" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByRole("progressbar", { name: "Processing…" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: /Cancel/ })).toBeInTheDocument();
+    await expect(canvas.queryByRole("button", { name: /Upload/ })).not.toBeInTheDocument();
+    await userEvent.click(canvas.getByRole("button", { name: /Cancel/ }));
+    await expect(canvas.getByRole("button", { name: /Upload/ })).toBeInTheDocument();
+  },
+};
+
+export const Dragging: Story = {
   render: () => <DropZonePreview />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const zone = canvas.getByRole("button", { name: "File upload drop zone" });
+    const file = new File(["data"], "applications.csv", { type: "text/csv" });
+
+    await fireEvent.dragEnter(zone);
+    await expect(canvas.getByText("Release to attach")).toBeInTheDocument();
+    await fireEvent.dragLeave(zone);
+    await expect(canvas.getByText("Drop a file here, or")).toBeInTheDocument();
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    Object.defineProperty(dataTransfer, "files", { value: [file] });
+    await fireEvent.drop(zone, { dataTransfer });
+    await expect(canvas.getByText("applications.csv")).toBeInTheDocument();
+  },
 };
 
-export const Importing: Story = {
-  args: { ...baseArgs, isImporting: true },
-  render: () => <DropZonePreview isImporting />,
+export const Failed: Story = {
+  render: () => <DropZonePreview initialStatus="failed" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByText("The file could not be processed.")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: /Try again/ })).toBeInTheDocument();
+    await userEvent.click(canvas.getByRole("button", { name: /Try again/ }));
+    await expect(canvas.getByRole("progressbar", { name: "Processing…" })).toBeInTheDocument();
+  },
+};
+
+export const Disabled: Story = {
+  args: { status: "empty", disabled: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const zone = canvas.getByRole("button", { name: "File upload drop zone" });
+    const input = canvasElement.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await expect(zone).toHaveAttribute("aria-disabled", "true");
+    await expect(zone).toHaveAttribute("tabindex", "-1");
+    await expect(input).toBeDisabled();
+  },
 };