@ponti-studios/ui 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.1.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

@@ -196,7 +196,11 @@ function UpdateGuardClient({
     updateServiceWorker,
   } = useRegisterSW({ serviceWorkerPath });
 
-  const isOnline = useSyncExternalStore(subscribeOnline, getOnlineSnapshot, getOnlineServerSnapshot);
+  const isOnline = useSyncExternalStore(
+    subscribeOnline,
+    getOnlineSnapshot,
+    getOnlineServerSnapshot,
+  );
 
   const closePrompt = () => {
     setOfflineReady(false);
@@ -221,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>
@@ -229,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

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import { fn } from 'storybook/test';
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { fn } from "storybook/test";
 
-import { ActiveFiltersBar } from './active-filters-bar';
+import { ActiveFiltersBar } from "./active-filters-bar";
 
 const meta = {
-  title: 'Filters/ActiveFiltersBar',
+  title: "Filters/ActiveFiltersBar",
   component: ActiveFiltersBar,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   decorators: [
     (Story) => (
       <div className="w-[600px]">
@@ -23,36 +23,37 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     filters: [
-      { id: '1', label: 'Status: Active', onRemove: fn() },
-      { id: '2', label: 'Created after Jan 1', onRemove: fn() },
+      { 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);
-    const list = canvas.getByRole('list');
+    const list = canvas.getByRole("list");
     await expect(list).toBeInTheDocument();
-    const items = within(list).getAllByRole('listitem');
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(2);
-    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
-    await expect(canvas.getByText('Created after Jan 1')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
+    await expect(canvas.getByText("Created after Jan 1")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };
 
 export const WithClearAll: Story = {
   args: {
     filters: [
-      { id: '1', label: 'Status: Active', onRemove: fn() },
-      { id: '2', label: 'Role: Engineer', onRemove: fn() },
+      { id: "1", label: "Status: Active", onRemove: fn() },
+      { id: "2", label: "Role: Engineer", onRemove: fn() },
     ],
     onClearAll: fn(),
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
-    const items = within(list).getAllByRole('listitem');
+    const list = canvas.getByRole("list");
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(2);
-    const clearButton = canvas.getByRole('button', { name: 'Clear all' });
+    const clearButton = canvas.getByRole("button", { name: "Clear all" });
     await expect(clearButton).toBeInTheDocument();
     await userEvent.click(clearButton);
     await expect(args.onClearAll).toHaveBeenCalledTimes(1);
@@ -61,36 +62,35 @@ export const WithClearAll: Story = {
 
 export const WithSortOnly: Story = {
   args: {
-    filters: [
-      { id: '1', label: 'Date', onRemove: fn(), variant: 'sort', direction: 'desc' },
-    ],
+    filters: [{ id: "1", label: "Date", onRemove: fn(), variant: "sort", direction: "desc" }],
+    onClearAll: fn(),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
-    const items = within(list).getAllByRole('listitem');
+    const list = canvas.getByRole("list");
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(1);
-    await expect(canvas.getByText('Date')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Date")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };
 
 export const WithSortAndFilter: Story = {
   args: {
     filters: [
-      { id: 'filter-1', label: 'Status: Active', onRemove: fn(), variant: 'filter' },
-      { id: 'sort-1', label: 'Date', onRemove: fn(), variant: 'sort', direction: 'desc' },
+      { id: "filter-1", label: "Status: Active", onRemove: fn(), variant: "filter" },
+      { id: "sort-1", label: "Date", onRemove: fn(), variant: "sort", direction: "desc" },
     ],
     onClearAll: fn(),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
-    const items = within(list).getAllByRole('listitem');
+    const list = canvas.getByRole("list");
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(2);
-    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
-    await expect(canvas.getByText('Date')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
+    await expect(canvas.getByText("Date")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };
 
@@ -98,17 +98,17 @@ export const Empty: Story = {
   args: { filters: [] },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    expect(canvas.queryByRole('list')).toBeNull();
+    expect(canvas.queryByRole("list")).toBeNull();
   },
 };
 
 export const WithClassName: Story = {
   args: {
-    filters: [{ id: '1', label: 'Status: Active', onRemove: fn() }],
-    className: 'mt-4',
+    filters: [{ id: "1", label: "Status: Active", onRemove: fn() }],
+    className: "mt-4",
   },
   play: async ({ canvasElement }) => {
-    const container = canvasElement.querySelector('.mt-4');
+    const container = canvasElement.querySelector(".mt-4");
     await expect(container).not.toBeNull();
   },
 };

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.stories.tsx

@@ -1,22 +1,22 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, within } from 'storybook/test';
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
 
-import { FilterSelect } from './filter-select';
+import { FilterSelect } from "./filter-select";
 
 const meta = {
-  title: 'Filters/FilterSelect',
+  title: "Filters/FilterSelect",
   component: FilterSelect,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   args: {
     options: [
-      { value: 'active', label: 'Active' },
-      { value: 'interview', label: 'Interview' },
-      { value: 'offer', label: 'Offer' },
-      { value: 'rejected', label: 'Rejected' },
-      { value: 'archived', label: 'Archived' },
+      { value: "active", label: "Active" },
+      { value: "interview", label: "Interview" },
+      { value: "offer", label: "Offer" },
+      { value: "rejected", label: "Rejected" },
+      { value: "archived", label: "Archived" },
     ],
-    placeholder: 'All statuses',
-    label: 'Status',
+    placeholder: "All statuses",
+    label: "Status",
     onChange: () => {},
   },
 } satisfies Meta<typeof FilterSelect>;
@@ -25,47 +25,47 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: { value: '' },
+  args: { value: "" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('combobox', { name: 'Status' });
+    const trigger = canvas.getByRole("combobox", { name: "Status" });
     await expect(trigger).toBeInTheDocument();
-    await expect(trigger).toHaveTextContent('All statuses');
+    await expect(trigger).toHaveTextContent("All statuses");
   },
 };
 
 export const WithValue: Story = {
-  args: { value: 'active' },
+  args: { value: "active" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('combobox', { name: 'Status' });
-    await expect(trigger).toHaveTextContent('Active');
+    const trigger = canvas.getByRole("combobox", { name: "Status" });
+    await expect(trigger).toHaveTextContent("Active");
   },
 };
 
 export const Loading: Story = {
-  args: { value: '', isLoading: true, options: [] },
+  args: { value: "", isLoading: true, options: [] },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
-    await expect(canvas.getByText('Status')).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
+    await expect(canvas.getByText("Status")).toBeInTheDocument();
   },
 };
 
 export const Empty: Story = {
-  args: { value: '', options: [], emptyLabel: 'No statuses found' },
+  args: { value: "", options: [], emptyLabel: "No statuses found" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
-    await expect(canvas.getByText('Status')).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
+    await expect(canvas.getByText("Status")).toBeInTheDocument();
   },
 };
 
 export const Disabled: Story = {
-  args: { value: 'active', disabled: true },
+  args: { value: "active", disabled: true },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('combobox', { name: 'Status' });
+    const trigger = canvas.getByRole("combobox", { name: "Status" });
     await expect(trigger).toBeDisabled();
   },
 };

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,21 +46,16 @@ 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"
-        >
+        <SelectTrigger id={selectId} disabled={disabled} aria-label={label} className="w-full">
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <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>