@ponti-studios/ui 0.1.2 → 0.3.0

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

@@ -0,0 +1,21 @@
+import { cn } from "../../lib/utils";
+
+export interface ProgressBarProps {
+  className?: string;
+  progress?: number;
+}
+
+/** Thin linear progress indicator, distinct from the Radix-backed `Progress`. */
+export function ProgressBar({ className, 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")}
+        style={{
+          width: `${Math.min(100, Math.max(0, progress))}%`,
+          opacity: progress === 100 ? 0 : 0.8,
+        }}
+      />
+    </div>
+  );
+}

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

@@ -14,24 +14,26 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     value: 60,
+    "aria-label": "Upload progress",
   },
 };
 
 export const Empty: Story = {
-  args: { value: 0 },
+  args: { value: 0, "aria-label": "Upload progress" },
 };
 
 export const Complete: Story = {
-  args: { value: 100 },
+  args: { value: 100, "aria-label": "Upload progress" },
 };
 
 export const Partial: Story = {
+  args: { value: 60 },
   render: () => (
     <div className="flex w-64 flex-col gap-4">
-      <Progress value={10} />
-      <Progress value={33} />
-      <Progress value={66} />
-      <Progress value={90} />
+      <Progress value={10} aria-label="Upload progress" />
+      <Progress value={33} aria-label="Upload progress" />
+      <Progress value={66} aria-label="Upload progress" />
+      <Progress value={90} aria-label="Upload progress" />
     </div>
   ),
 };

package/src/components/feedback/progress.tsx

@@ -1,4 +1,4 @@
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import * as React from "react";
 
 import { cn } from "../../lib/utils";

package/src/components/feedback/skeleton.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Skeleton } from "./skeleton";
+
+const meta = {
+  title: "Feedback/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Skeleton className="h-4 w-48" />,
+};
+
+export const TextLines: Story = {
+  render: () => (
+    <div className="w-64 space-y-2">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="h-4 w-2/3" />
+    </div>
+  ),
+};
+
+export const CardShape: Story = {
+  render: () => (
+    <div className="w-64 space-y-3">
+      <Skeleton className="h-32 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-1/2" />
+    </div>
+  ),
+};

package/src/components/feedback/skeleton.tsx

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "../../lib/utils";
+
+export function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("bg-muted animate-pulse rounded-md", className)} {...props} />;
+}

package/src/components/feedback/spinner.tsx

@@ -37,12 +37,12 @@ export function Spinner({
     >
       <span
         className={cn(
-          "border-default border-t-accent rounded-full border-2 motion-safe:animate-spin",
+          "border-border border-t-primary rounded-full border-2 motion-safe:animate-spin",
           sizeClasses[size],
         )}
         aria-hidden="true"
       />
-      {label && <span className="text-secondary text-xs">{label}</span>}
+      {label && <span className="text-muted-foreground text-xs">{label}</span>}
     </div>
   );
 }

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { UpdateGuard } from "./update-guard";
+
+const meta = {
+  title: "Feedback/UpdateGuard",
+  component: UpdateGuard,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Registers a service worker at `serviceWorkerPath` and surfaces offline/update-available prompts. In Storybook there is no service worker to register against, so the prompts stay hidden — this story documents the wrapper's pass-through behavior for `children`.",
+      },
+    },
+  },
+} satisfies Meta<typeof UpdateGuard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    hideInDev: false,
+    children: (
+      <div className="border-border bg-surface 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

@@ -0,0 +1,280 @@
+import type { ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+
+interface RegisterSWOptions {
+  onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void;
+  onRegisterError?: (error: Error) => void;
+  serviceWorkerPath?: string;
+}
+
+interface RegisterSWResult {
+  offlineReady: [boolean, (value: boolean) => void];
+  needRefresh: [boolean, (value: boolean) => void];
+  updateServiceWorker: (reload?: boolean) => void;
+}
+
+function useRegisterSW(options?: RegisterSWOptions): RegisterSWResult {
+  const [offlineReady, setOfflineReady] = useState(false);
+  const [needRefresh, setNeedRefresh] = useState(false);
+  const registrationRef = useRef<ServiceWorkerRegistration | undefined>(undefined);
+  const shouldReloadRef = useRef(false);
+  const hasReloadedRef = useRef(false);
+  const onRegisteredRef = useRef(options?.onRegistered);
+  const onRegisterErrorRef = useRef(options?.onRegisterError);
+  const serviceWorkerPathRef = useRef(options?.serviceWorkerPath ?? "/sw.js");
+
+  useEffect(() => {
+    onRegisteredRef.current = options?.onRegistered;
+    onRegisterErrorRef.current = options?.onRegisterError;
+    serviceWorkerPathRef.current = options?.serviceWorkerPath ?? "/sw.js";
+  }, [options?.onRegistered, options?.onRegisterError, options?.serviceWorkerPath]);
+
+  useEffect(() => {
+    if (
+      typeof window === "undefined" ||
+      !("serviceWorker" in navigator) ||
+      !window.isSecureContext
+    ) {
+      return;
+    }
+
+    let isMounted = true;
+
+    const handleControllerChange = () => {
+      if (!shouldReloadRef.current || hasReloadedRef.current) {
+        return;
+      }
+
+      hasReloadedRef.current = true;
+      window.location.reload();
+    };
+
+    navigator.serviceWorker.addEventListener("controllerchange", handleControllerChange);
+
+    const handleWaitingServiceWorker = (registration: ServiceWorkerRegistration) => {
+      registrationRef.current = registration;
+      if (!isMounted) {
+        return;
+      }
+
+      setNeedRefresh(true);
+      setOfflineReady(false);
+    };
+
+    const handleInstalledServiceWorker = (registration: ServiceWorkerRegistration) => {
+      registrationRef.current = registration;
+      if (!isMounted) {
+        return;
+      }
+
+      if (navigator.serviceWorker.controller) {
+        setNeedRefresh(true);
+        setOfflineReady(false);
+        return;
+      }
+
+      setOfflineReady(true);
+    };
+
+    const trackRegistration = (registration: ServiceWorkerRegistration) => {
+      registrationRef.current = registration;
+      onRegisteredRef.current?.(registration);
+
+      if (registration.waiting) {
+        handleWaitingServiceWorker(registration);
+      }
+
+      registration.addEventListener("updatefound", () => {
+        const installingWorker = registration.installing;
+        if (!installingWorker) {
+          return;
+        }
+
+        installingWorker.addEventListener("statechange", () => {
+          if (installingWorker.state === "installed") {
+            handleInstalledServiceWorker(registration);
+          }
+        });
+      });
+    };
+
+    void navigator.serviceWorker
+      .register(serviceWorkerPathRef.current)
+      .then((registration) => {
+        if (!isMounted) {
+          return;
+        }
+
+        trackRegistration(registration);
+        return navigator.serviceWorker.ready.then(() => {
+          if (!isMounted || navigator.serviceWorker.controller) {
+            return;
+          }
+
+          setOfflineReady(true);
+        });
+      })
+      .catch((error: Error) => {
+        if (isMounted) {
+          onRegisterErrorRef.current?.(error);
+        }
+      });
+
+    return () => {
+      isMounted = false;
+      navigator.serviceWorker.removeEventListener("controllerchange", handleControllerChange);
+    };
+  }, []);
+
+  return {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker: (reload = true) => {
+      shouldReloadRef.current = reload;
+      registrationRef.current?.waiting?.postMessage({ type: "SKIP_WAITING" });
+    },
+  };
+}
+
+function subscribeOnline(onStoreChange: () => void) {
+  if (typeof window === "undefined") {
+    return () => {};
+  }
+
+  window.addEventListener("online", onStoreChange);
+  window.addEventListener("offline", onStoreChange);
+
+  return () => {
+    window.removeEventListener("online", onStoreChange);
+    window.removeEventListener("offline", onStoreChange);
+  };
+}
+
+function getOnlineSnapshot() {
+  if (typeof navigator === "undefined") {
+    return true;
+  }
+
+  return navigator.onLine;
+}
+
+export interface UpdateGuardCopy {
+  offlineReady?: string;
+  newContentAvailable?: string;
+  refreshButton?: string;
+  closeButton?: string;
+  offlineMessage?: string;
+  offlineStaleMessage?: string;
+}
+
+export interface UpdateGuardProps {
+  children: ReactNode;
+  serviceWorkerPath?: string;
+  hasStaleData?: boolean;
+  hideInDev?: boolean;
+  copy?: UpdateGuardCopy;
+}
+
+function UpdateGuardClient({
+  serviceWorkerPath,
+  hasStaleData = false,
+  hideInDev = true,
+  copy,
+}: Omit<UpdateGuardProps, "children">) {
+  const isDev =
+    typeof import.meta !== "undefined" &&
+    typeof import.meta.env !== "undefined" &&
+    Boolean(import.meta.env.DEV);
+
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({ serviceWorkerPath });
+
+  const isOnline = useSyncExternalStore(subscribeOnline, getOnlineSnapshot, () => true);
+
+  const closePrompt = () => {
+    setOfflineReady(false);
+    setNeedRefresh(false);
+  };
+
+  const offlineMessage = useMemo(() => {
+    if (isOnline) {
+      return null;
+    }
+
+    return hasStaleData
+      ? (copy?.offlineStaleMessage ?? "Offline - showing cached data where available")
+      : (copy?.offlineMessage ?? "Offline - data may be unavailable");
+  }, [copy?.offlineMessage, copy?.offlineStaleMessage, hasStaleData, isOnline]);
+
+  if (hideInDev && isDev) {
+    return null;
+  }
+
+  return (
+    <>
+      {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">
+            <span className="text-foreground text-sm">{offlineMessage}</span>
+          </div>
+        </div>
+      ) : null}
+
+      {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">
+            <span className="text-foreground text-sm">
+              {offlineReady
+                ? (copy?.offlineReady ?? "App ready to work offline")
+                : (copy?.newContentAvailable ?? "New content available")}
+            </span>
+            {needRefresh ? (
+              <button
+                type="button"
+                onClick={() => updateServiceWorker(true)}
+                className="text-accent text-sm font-semibold"
+              >
+                {copy?.refreshButton ?? "Refresh"}
+              </button>
+            ) : null}
+          <button type="button" onClick={closePrompt} className="text-muted-foreground text-sm">
+              {copy?.closeButton ?? "Close"}
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * Registers a service worker and surfaces "offline ready" / "update
+ * available" prompts around `children`. No-op (renders only `children`) when
+ * rendered on the server.
+ */
+export function UpdateGuard({
+  children,
+  serviceWorkerPath,
+  hasStaleData = false,
+  hideInDev = true,
+  copy,
+}: UpdateGuardProps) {
+  const isClient = typeof window !== "undefined";
+
+  return (
+    <>
+      {children}
+      {isClient ? (
+        <UpdateGuardClient
+          serviceWorkerPath={serviceWorkerPath}
+          hasStaleData={hasStaleData}
+          hideInDev={hideInDev}
+          copy={copy}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/components/forms/calendar.tsx

@@ -12,31 +12,31 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
       showOutsideDays={showOutsideDays}
       className={cn("relative w-fit rounded-md p-4", className)}
       classNames={{
-        root: "text-primary",
+        root: "text-foreground",
         months: "flex flex-col gap-4 sm:flex-row",
         month: "flex flex-col gap-4",
         month_caption: "relative flex h-8 items-center justify-center",
         caption_label: "text-sm font-medium",
         nav: "absolute inset-x-4 top-4 flex items-center justify-between",
         button_previous:
-          "inline-flex size-8 p-2 items-center justify-center rounded-full border border-default bg-canvas text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+          "inline-flex size-8 p-2 items-center justify-center rounded-full border bg-background text-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         button_next:
-          "inline-flex size-8 p-2 items-center justify-center rounded-full border border-default bg-canvas text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+          "inline-flex size-8 p-2 items-center justify-center rounded-full border bg-background text-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         month_grid: "w-full border-collapse",
         weekdays: "flex",
-        weekday: "flex size-8 items-center justify-center text-[0.8rem] font-normal text-secondary",
+        weekday: "flex size-8 items-center justify-center text-[0.8rem] font-normal text-muted-foreground",
         week: "mt-1 flex w-full",
         day: "relative size-8 p-0 text-center text-lg focus-within:z-20",
         day_button:
           "inline-flex size-6 items-center justify-center rounded-md text-sm font-normal disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         selected:
-          "[&>button]:bg-accent [&>button]:text-on-accent [&>button]:hover:bg-accent [&>button]:hover:text-on-accent",
-        today: "[&>button]:bg-accent [&>button]:text-on-accent",
-        outside: "text-secondary opacity-50 [&>button]:text-secondary",
-        disabled: "text-secondary opacity-50",
-        range_start: "rounded-l-md bg-accent [&>button]:bg-accent [&>button]:text-on-accent",
-        range_middle: "bg-accent [&>button]:rounded-none [&>button]:text-on-accent",
-        range_end: "rounded-r-md bg-accent [&>button]:bg-accent [&>button]:text-on-accent",
+          "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary/90",
+        today: "[&>button]:bg-primary [&>button]:text-primary-foreground",
+        outside: "text-muted-foreground [&>button]:text-muted-foreground",
+        disabled: "text-muted-foreground opacity-50",
+        range_start: "rounded-l-md bg-primary [&>button]:bg-primary [&>button]:text-primary-foreground",
+        range_middle: "bg-primary [&>button]:rounded-none [&>button]:text-primary-foreground",
+        range_end: "rounded-r-md bg-primary [&>button]:bg-primary [&>button]:text-primary-foreground",
         hidden: "invisible",
         ...classNames,
       }}

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { DateMonthSelect, getCurrentMonthYear } from "./date-month-select";
+
+const meta = {
+  title: "Forms/DateMonthSelect",
+  component: DateMonthSelect,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DateMonthSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DateMonthSelectPreview() {
+  const [value, setValue] = useState(getCurrentMonthYear());
+  return <DateMonthSelect selectedMonthYear={value} onMonthChange={setValue} />;
+}
+
+export const Default: Story = {
+  args: {
+    selectedMonthYear: getCurrentMonthYear(),
+    onMonthChange: () => {},
+  },
+  render: () => <DateMonthSelectPreview />,
+};

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

@@ -0,0 +1,70 @@
+import { Calendar } from "lucide-react";
+import { useMemo } from "react";
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+
+interface MonthOption {
+  value: string;
+  label: string;
+}
+
+export interface DateMonthSelectProps {
+  selectedMonthYear: string;
+  onMonthChange: (value: string) => void;
+  monthsBack?: number;
+  className?: string;
+  placeholder?: string;
+}
+
+/** Select a `YYYY-MM` month from the last `monthsBack` months. */
+export function DateMonthSelect({
+  selectedMonthYear,
+  onMonthChange,
+  monthsBack = 12,
+  className = "w-[200px]",
+  placeholder = "Select month",
+}: DateMonthSelectProps) {
+  const monthOptions = useMemo<MonthOption[]>(() => {
+    const options: MonthOption[] = [];
+    const today = new Date();
+    for (let i = 0; i < monthsBack; i++) {
+      const date = new Date(today.getFullYear(), today.getMonth() - i, 1);
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      options.push({
+        value: `${year}-${month}`,
+        label: date.toLocaleString("default", { month: "long", year: "numeric" }),
+      });
+    }
+    return options;
+  }, [monthsBack]);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Calendar className="size-4" />
+      <Select
+        value={selectedMonthYear}
+        onValueChange={(v: string | null) => v != null && onMonthChange(v)}
+      >
+        <SelectTrigger className={className} aria-label={placeholder}>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {monthOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+/** Current month in `YYYY-MM` format. */
+export const getCurrentMonthYear = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = (now.getMonth() + 1).toString().padStart(2, "0");
+  return `${year}-${month}`;
+};

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

@@ -35,7 +35,7 @@ export function DatePicker({
   return (
     <div className={containerClassName}>
       {showLabel && label ? (
-        <label htmlFor={id} className="text-primary mb-2 block text-sm font-medium">
+        <label htmlFor={id} className="text-foreground mb-2 block text-sm font-medium">
           {label}
         </label>
       ) : null}
@@ -45,13 +45,13 @@ export function DatePicker({
             id={id}
             variant={variant}
             disabled={disabled}
-            className="bg-inset placeholder:text-secondary w-full justify-start text-left font-normal backdrop-blur-sm"
+            className="bg-muted placeholder:text-muted-foreground w-full justify-start text-left font-normal"
           >
             <CalendarIcon className="mr-2 size-4" />
             {value ? format(value, dateFormat) : <span>{placeholder}</span>}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="bg-canvas w-auto p-0" align={popoverAlign}>
+        <PopoverContent className="bg-popover w-auto p-0" align={popoverAlign}>
           <Calendar mode="single" selected={value} onSelect={onSelect} />
         </PopoverContent>
       </Popover>

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

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { DropZone } from "./drop-zone";
+
+const meta = {
+  title: "Forms/DropZone",
+  component: DropZone,
+  tags: ["autodocs"],
+} 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[]>([]);
+
+  return (
+    <div className="w-96 space-y-3">
+      <DropZone
+        isImporting={isImporting}
+        dragActive={dragActive}
+        onDragOver={() => setDragActive(true)}
+        onDragLeave={() => setDragActive(false)}
+        onDrop={setFiles}
+        onChange={setFiles}
+        accept=".csv"
+        helpText="Supported formats: CSV"
+      />
+      {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 = {
+  args: baseArgs,
+  render: () => <DropZonePreview />,
+};
+
+export const Importing: Story = {
+  args: { ...baseArgs, isImporting: true },
+  render: () => <DropZonePreview isImporting />,
+};