@ponti-studios/ui 1.5.1 → 1.7.0

package/README.md

@@ -16,13 +16,13 @@ The design system is documented in `docs/`:
 Common development workflows are available through the `Makefile`:
 
 ```bash
-make check          # tokens, source contracts, and typecheck
-make tokens-build   # regenerate token artifacts
-make storybook      # build Storybook themes and start Storybook
-make test-a11y      # run light and dark accessibility tests
+make build      # regenerate token artifacts and typecheck
+make check      # build, then verify tokens/source contracts/lint
+make test       # run light and dark Storybook/vitest tests (implies build)
+make storybook  # build tokens and start Storybook
 ```
 
-The existing `pnpm run` scripts delegate to these targets for compatibility.
+The `pnpm run` scripts (`check`, `build`, `test`, `storybook`, `format`) delegate to these targets for compatibility.
 
 ## Release
 
@@ -37,11 +37,11 @@ Releases are owned by [release-please](https://github.com/googleapis/release-ple
 2. Once on `main`, find or wait for the `chore(main): release ui X.Y.Z` PR that Release Please opens or updates.
 3. Review and merge it. That merge creates the `ui-v<version>` tag; after validation succeeds, the release workflow publishes that exact tag automatically.
 
-`prepack` (`tokens:check && check:source && typecheck`) runs as part of `pnpm install`/publish tooling and is the last gate before anything reaches npm — see "Generated files" below for the failure mode that most commonly trips it.
+`prepack` (`make check`) runs as part of `pnpm install`/publish tooling and is the last gate before anything reaches npm — see "Generated files" below for the failure mode that most commonly trips it.
 
 ### Generated files must never be hand-edited
 
-`src/styles/tokens/generated/**` and `.storybook/generated/**` are produced only by `pnpm run tokens:build` (style-dictionary) from the DTCG source in `src/styles/tokens/source/*.tokens.json`. `tokens:check` enforces this with `git diff --exit-code -- src/styles/tokens/generated` after a fresh rebuild — if the committed file doesn't byte-for-byte match what the tool just produced, the check (and therefore `prepack` and the publish) fails. This has happened in practice when a repo-wide formatter (oxfmt) reformatted a generated CSS file directly; `.oxfmtrc.json`'s `ignorePatterns` now excludes both generated directories specifically to prevent that recurring. If `tokens:check` fails on a file you didn't intend to touch, run `pnpm run tokens:build` and commit the regenerated output — don't hand-format it back into place.
+`src/styles/tokens/generated/**` and `.storybook/generated/**` are produced only by `make build` (style-dictionary) from the DTCG source in `src/styles/tokens/source/*.tokens.json`. `make check` enforces this with `git diff --exit-code -- src/styles/tokens/generated .storybook/generated` after a fresh rebuild — if the committed file doesn't byte-for-byte match what the tool just produced, the check (and therefore `prepack` and the publish) fails. This has happened in practice when a repo-wide formatter (oxfmt) reformatted a generated CSS file directly; `.oxfmtrc.json`'s `ignorePatterns` now excludes both generated directories specifically to prevent that recurring. If `make check` fails on a file you didn't intend to touch, run `make build` and commit the regenerated output — don't hand-format it back into place.
 
 ## Consumers
 
@@ -70,7 +70,3 @@ This package has no build output — every `exports` entry resolves to a file un
 ```
 
 **Important:** `./styles.css` uses `@reference "tailwindcss"` (it does not import Tailwind itself). Your project owns the `@import "tailwindcss"` — place it before the UI stylesheet. Omitting it will cause missing CSS variables (e.g. `--tw-shadow-color`) and unresolved utilities.
-
-### `./native` subpath
-
-`@ponti-studios/ui/native` is the only part of the package that imports `react-native`. Web consumers never pull it in; native consumers get `createMakeStyles`, `nativeShadows`, `useColorMode`, and `useThemeColors`. `react-native` is an optional peer dependency — only declare it in your own `package.json` if you actually import from this subpath.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",
@@ -66,10 +66,6 @@
       "types": "./src/styles/tokens/css-vars.ts",
       "import": "./src/styles/tokens/css-vars.ts"
     },
-    "./native": {
-      "types": "./src/native/index.ts",
-      "import": "./src/native/index.ts"
-    },
     "./hooks": {
       "types": "./src/hooks/index.ts",
       "import": "./src/hooks/index.ts"
@@ -82,29 +78,19 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
+    "check": "make check",
     "build": "make build",
-    "dev": "vite",
-    "storybook": "make storybook",
-    "check:source": "make check-source",
     "test": "make test",
-    "test:a11y": "make test-a11y",
-    "test:a11y:light": "make test-a11y-light",
-    "test:a11y:dark": "make test-a11y-dark",
-    "tokens:build": "make tokens-build",
-    "tokens:check": "make tokens-check",
-    "typecheck": "make typecheck",
-    "lint": "make lint",
+    "storybook": "make storybook",
     "format": "make format",
-    "prepack": "make prepack"
+    "prepack": "make check"
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
     "@radix-ui/colors": "^3.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
     "lucide-react": "^1.24.0",
-    "react-day-picker": "^10.0.1",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
@@ -120,38 +106,27 @@
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
     "@vitest/browser": "4.1.10",
     "@vitest/browser-playwright": "4.1.10",
-    "oxfmt": "0.61.0",
+    "oxfmt": "0.64.0",
     "oxlint": "^1.74.0",
     "playwright": "^1.61.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-native": "0.86.0",
     "storybook": "10.5.6",
     "style-dictionary": "5.5.0",
     "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",
-    "uniwind": "^1.10.1",
     "vite": "^8.1.5",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0",
-    "react-native": ">=0.74",
-    "uniwind": ">=1.10.0"
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
-    },
-    "react-native": {
-      "optional": true
-    },
-    "uniwind": {
-      "optional": true
     }
   },
   "packageManager": "pnpm@11.10.0"

package/src/components/feedback/alert.tsx

@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "border-destructive/50 text-destructive-text bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-text",
+          "border-destructive text-destructive-text bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-text",
       },
     },
     defaultVariants: {
@@ -36,11 +36,13 @@ function Alert({
 
 function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
+    <h2
       data-slot="alert-title"
       className={cn("col-start-2 line-clamp-1 min-h-4 text-sm font-medium", className)}
       {...props}
-    />
+    >
+      {props.children}
+    </h2>
   );
 }
 
@@ -53,7 +55,9 @@ function AlertDescription({ className, ...props }: React.ComponentProps<"div">)
         className,
       )}
       {...props}
-    />
+    >
+      {props.children}
+    </div>
   );
 }
 

package/src/components/feedback/index.ts

@@ -1,11 +1,7 @@
 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 { 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";

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

@@ -16,14 +16,29 @@ export const Default: Story = {
     value: 60,
     "aria-label": "Upload progress",
   },
+  render: (args) => (
+    <div className="w-64">
+      <Progress {...args} />
+    </div>
+  ),
 };
 
 export const Empty: Story = {
   args: { value: 0, "aria-label": "Upload progress" },
+  render: (args) => (
+    <div className="w-64">
+      <Progress {...args} />
+    </div>
+  ),
 };
 
 export const Complete: Story = {
   args: { value: 100, "aria-label": "Upload progress" },
+  render: (args) => (
+    <div className="w-64">
+      <Progress {...args} />
+    </div>
+  ),
 };
 
 export const Partial: Story = {

package/src/components/feedback/progress.tsx

@@ -11,18 +11,29 @@ function Progress({
 }: React.ComponentProps<typeof ProgressPrimitive.Root> & {
   indicatorClassName?: string;
 }) {
+  const isFilling = typeof value === "number" && value > 0 && value < 100;
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+      className={cn("bg-muted relative h-2 w-full overflow-hidden rounded-full", className)}
       value={value}
       {...props}
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className={cn("bg-primary h-full w-full flex-1 transition-all", indicatorClassName)}
+        className={cn(
+          "bg-primary relative h-full w-full flex-1 overflow-hidden transition-transform duration-300 ease-out",
+          indicatorClassName,
+        )}
         style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
-      />
+      >
+        {isFilling && (
+          <span
+            aria-hidden
+            className="animate-progress-shimmer absolute inset-0 bg-[linear-gradient(90deg,transparent_35%,rgba(255,255,255,0.75)_50%,transparent_65%)]"
+          />
+        )}
+      </ProgressPrimitive.Indicator>
     </ProgressPrimitive.Root>
   );
 }

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

@@ -10,7 +10,7 @@ const meta = {
     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`.",
+          "Surfaces an update-available notification. Service-worker registration and update activation are owned by the consuming application.",
       },
     },
   },
@@ -21,12 +21,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    hideInDev: false,
-    children: (
-      <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>
-    ),
+    needRefresh: true,
+    onRefresh: () => undefined,
+    onDismiss: () => undefined,
   },
 };

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

@@ -1,288 +1,57 @@
-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;
-}
-
-function getOnlineServerSnapshot() {
-  return true;
-}
+import { LucideRefreshCcw, LucideX } from "lucide-react";
 
 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;
+  needRefresh: boolean;
+  onRefresh: () => void;
+  onDismiss?: () => void;
+  copyText?: string;
+  refreshText?: string;
 }
 
-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,
-    getOnlineServerSnapshot,
-  );
-
-  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-card 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-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")
-                : (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,
+  needRefresh,
+  onRefresh,
+  onDismiss,
+  copyText = "New content available",
+  refreshText = "Refresh",
 }: UpdateGuardProps) {
-  const isClient = typeof window !== "undefined";
+  if (!needRefresh) {
+    return null;
+  }
 
   return (
-    <>
-      {children}
-      {isClient ? (
-        <UpdateGuardClient
-          serviceWorkerPath={serviceWorkerPath}
-          hasStaleData={hasStaleData}
-          hideInDev={hideInDev}
-          copy={copy}
-        />
-      ) : null}
-    </>
+    <output
+      aria-live="polite"
+      aria-atomic="true"
+      className="fixed inset-x-0 bottom-0 z-50 flex justify-center px-4"
+    >
+      <div className="border-border bg-card flex items-center gap-3 rounded-md border px-4 py-2">
+        <span className="text-foreground text-sm">{copyText}</span>
+        <button
+          type="button"
+          aria-label={refreshText}
+          onClick={onRefresh}
+          className="text-accent-text font-semibold border-muted-foreground rounded-md border px-2 py-1 hover:bg-accent hover:text-accent-foreground"
+        >
+          <LucideRefreshCcw className="size-4" />
+        </button>
+        {onDismiss ? (
+          <button
+            aria-label="Close"
+            type="button"
+            onClick={onDismiss}
+            className="text-accent-text font-semibold border-muted-foreground rounded-md border px-2 py-1 hover:bg-accent hover:text-accent-foreground"
+          >
+            <LucideX className="size-4" />
+          </button>
+        ) : null}
+      </div>
+    </output>
   );
 }

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

@@ -1,8 +1,8 @@
 import { useId, useMemo } from "react";
 
 import { cn } from "../../lib/utils";
+import { Spinner } from "../feedback/spinner";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../forms/select";
-import { Label } from "../primitives/label";
 
 export interface FilterSelectOption {
   value: string;
@@ -14,7 +14,6 @@ export interface FilterSelectProps {
   onChange: (value: string | null) => void;
   options: FilterSelectOption[];
   label: string;
-  loadingText?: string;
   placeholder?: string;
   disabled?: boolean;
   isLoading?: boolean;
@@ -28,7 +27,6 @@ export function FilterSelect({
   value,
   options,
   onChange,
-  loadingText = "Loading...",
   placeholder = "All",
   disabled = false,
   isLoading = false,
@@ -45,7 +43,7 @@ export function FilterSelect({
 
   return (
     <div className={cn("space-y-2 min-w-36", className)}>
-      <Label htmlFor={selectId}>{label}</Label>
+      <label htmlFor={selectId}>{label}</label>
       <Select value={value} onValueChange={onChange} items={items}>
         <SelectTrigger id={selectId} disabled={disabled} aria-label={label} className="w-full">
           <SelectValue placeholder={placeholder} />
@@ -53,7 +51,7 @@ export function FilterSelect({
         <SelectContent className="bg-background max-h-[250px] min-w-36 overflow-y-auto">
           <SelectItem>{placeholder}</SelectItem>
           {isLoading ? (
-            <div className="text-muted-foreground px-2 py-1.5 text-sm">{loadingText}</div>
+            <Spinner presentation="centered" size="sm" />
           ) : options.length === 0 ? (
             <div className="text-muted-foreground px-2 py-1.5 text-sm">{emptyLabel}</div>
           ) : (