@ponti-studios/ui 1.6.0 → 1.7.0

package/src/components/forms/passkey-management.stories.tsx

@@ -17,14 +17,13 @@ const initialPasskeys: PasskeyRecord[] = [
   { id: "2", name: "iPhone", createdAt: "2025-03-02T00:00:00.000Z" },
 ];
 
-function PasskeyManagementPreview({ withError = false }: { withError?: boolean }) {
+function PasskeyManagementPreview({ withDeleteError = false }: { withDeleteError?: boolean }) {
   const [passkeys, setPasskeys] = useState(initialPasskeys);
 
   return (
     <div className="w-96">
       <PasskeyManagement
         passkeys={passkeys}
-        error={withError ? "Could not delete passkey. Please try again." : null}
         onAdd={async () => {
           setPasskeys((prev) => [
             ...prev,
@@ -37,6 +36,7 @@ function PasskeyManagementPreview({ withError = false }: { withError?: boolean }
           return true;
         }}
         onDelete={async (id) => {
+          if (withDeleteError && id === "2") return false;
           setPasskeys((prev) => prev.filter((pk) => pk.id !== id));
           return true;
         }}
@@ -68,14 +68,18 @@ export const Loading: Story = {
     onAdd: async () => true,
     onDelete: async () => true,
   },
+  render: (args) => (
+    <div className="w-[calc(100vw-2rem)] max-w-md">
+      <PasskeyManagement {...args} />
+    </div>
+  ),
 };
 
 export const WithError: Story = {
   args: {
     passkeys: initialPasskeys,
-    error: "Could not delete passkey. Please try again.",
     onAdd: async () => true,
     onDelete: async () => true,
   },
-  render: () => <PasskeyManagementPreview withError />,
+  render: () => <PasskeyManagementPreview withDeleteError />,
 };

package/src/components/forms/passkey-management.tsx

@@ -1,7 +1,9 @@
-import { KeyRound, Plus, Trash2 } from "lucide-react";
+import { KeyRound, Plus, Trash2, X } from "lucide-react";
 import { useCallback, useState } from "react";
 
+import { Spinner } from "../feedback/spinner";
 import { Button } from "../primitives/button";
+import { Card, CardHeader } from "../primitives/card";
 
 export interface PasskeyRecord {
   id: string;
@@ -17,6 +19,11 @@ export interface PasskeyManagementProps {
   onDelete: (id: string) => Promise<boolean>;
 }
 
+type PasskeyActionError = {
+  message: string;
+  passkeyId?: string;
+};
+
 /** List, add, and remove passkeys. The host app owns the WebAuthn ceremony via `onAdd`/`onDelete`. */
 export function PasskeyManagement({
   passkeys: passkeysProp,
@@ -27,10 +34,10 @@ export function PasskeyManagement({
 }: PasskeyManagementProps) {
   const [adding, setAdding] = useState(false);
   const [deletingId, setDeletingId] = useState<string | null>(null);
-  const [actionError, setActionError] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<PasskeyActionError | null>(null);
 
   const passkeys = passkeysProp ?? [];
-  const error = externalError ?? actionError;
+  const error = externalError ?? (actionError?.passkeyId ? null : actionError?.message);
 
   const handleAdd = useCallback(async () => {
     setAdding(true);
@@ -38,10 +45,10 @@ export function PasskeyManagement({
     try {
       const success = await onAdd();
       if (!success) {
-        setActionError("Passkey registration was cancelled or failed.");
+        setActionError({ message: "Passkey registration was cancelled or failed." });
       }
     } catch {
-      setActionError("An error occurred during passkey registration.");
+      setActionError({ message: "An error occurred during passkey registration." });
     } finally {
       setAdding(false);
     }
@@ -57,7 +64,10 @@ export function PasskeyManagement({
           throw new Error("Failed to delete passkey");
         }
       } catch {
-        setActionError("Could not delete passkey. Please try again.");
+        setActionError({
+          message: "Could not delete passkey. Please try again.",
+          passkeyId: id,
+        });
       } finally {
         setDeletingId(null);
       }
@@ -66,8 +76,8 @@ export function PasskeyManagement({
   );
 
   return (
-    <section aria-labelledby="passkey-heading" className="space-y-4">
-      <div className="flex items-center justify-between">
+    <Card aria-labelledby="passkey-heading" className="gap-0 overflow-hidden w-full">
+      <CardHeader className="flex-row items-center border-b p-4">
         <h2 id="passkey-heading" className="text-foreground text-sm font-medium">
           Passkeys
         </h2>
@@ -75,58 +85,84 @@ export function PasskeyManagement({
           type="button"
           size="sm"
           onClick={() => void handleAdd()}
-          disabled={adding}
+          isLoading={adding}
+          loadingLabel="Adding passkey"
           aria-label="Add a passkey"
+          className="ml-auto"
         >
           <Plus className="size-4" aria-hidden />
-          {adding ? "Adding..." : "Add passkey"}
         </Button>
-      </div>
+      </CardHeader>
 
       {error ? (
-        <p role="alert" className="text-destructive-text text-sm">
+        <p role="alert" className="text-destructive-text border-b px-4 py-3 text-sm">
           {error}
         </p>
       ) : null}
 
       {isLoading ? (
-        <p className="text-muted-foreground text-sm">Loading passkeys...</p>
+        <Spinner presentation="centered" size="sm" label="Loading passkeys" />
       ) : passkeys.length === 0 ? (
-        <div className="border-border text-muted-foreground flex items-center gap-3 border border-dashed p-4 text-sm">
+        <div className="text-muted-foreground flex items-center gap-3 p-4 text-sm">
           <KeyRound className="size-4 shrink-0" aria-hidden />
           <span>No passkeys registered. Add one to sign in faster.</span>
         </div>
       ) : (
-        <ul className="space-y-2" aria-label="Registered passkeys">
-          {passkeys.map((pk) => (
-            <li
-              key={pk.id}
-              className="border-border rounded flex items-center justify-between border px-4 py-3 text-sm"
-            >
-              <div className="flex items-center gap-3">
-                <KeyRound className="text-muted-foreground size-4 shrink-0" aria-hidden />
-                <div>
-                  <span className="font-medium">{pk.name ?? "Passkey"}</span>
-                  {pk.createdAt ? (
-                    <span className="text-muted-foreground ml-2 text-xs">
-                      Added {new Date(pk.createdAt).toLocaleDateString()}
-                    </span>
-                  ) : null}
+        <ul className="divide-border divide-y" aria-label="Registered passkeys">
+          {passkeys.map((pk) => {
+            const rowError = actionError?.passkeyId === pk.id ? actionError.message : null;
+
+            return (
+              <li key={pk.id} className="flex flex-col gap-2 px-4 py-3 text-sm">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex min-w-0 items-center gap-3">
+                    <KeyRound className="text-muted-foreground size-4 shrink-0" aria-hidden />
+                    <div className="min-w-0">
+                      <span className="font-medium">{pk.name ?? "Passkey"}</span>
+                      {pk.createdAt ? (
+                        <span className="text-muted-foreground ml-2 text-xs">
+                          Added {new Date(pk.createdAt).toLocaleDateString()}
+                        </span>
+                      ) : null}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => void handleDelete(pk.id)}
+                    disabled={deletingId === pk.id}
+                    aria-busy={deletingId === pk.id}
+                    aria-label={`Remove passkey ${pk.name ?? pk.id}`}
+                    className="hover:text-destructive-text text-muted-foreground focus-visible:ring-ring rounded-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+                  >
+                    {deletingId === pk.id ? (
+                      <Spinner size="sm" aria-hidden />
+                    ) : (
+                      <Trash2 className="size-4" aria-hidden />
+                    )}
+                  </button>
                 </div>
-              </div>
-              <button
-                type="button"
-                onClick={() => void handleDelete(pk.id)}
-                disabled={deletingId === pk.id}
-                aria-label={`Remove passkey ${pk.name ?? pk.id}`}
-                className="hover:text-destructive-text text-muted-foreground focus-visible:ring-ring rounded-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
-              >
-                <Trash2 className="size-4" aria-hidden />
-              </button>
-            </li>
-          ))}
+                {rowError ? (
+                  <div
+                    role="alert"
+                    className="bg-destructive/5 text-destructive-text flex items-start justify-between gap-3 rounded-md px-3 py-2 text-sm"
+                  >
+                    <span>{rowError}</span>
+                    <button
+                      type="button"
+                      onClick={() => setActionError(null)}
+                      aria-label="Dismiss passkey error"
+                      title="Dismiss error"
+                      className="hover:text-destructive focus-visible:ring-ring -m-1 shrink-0 rounded-sm p-1 focus-visible:ring-2 focus-visible:outline-none"
+                    >
+                      <X className="size-4" aria-hidden />
+                    </button>
+                  </div>
+                ) : null}
+              </li>
+            );
+          })}
         </ul>
       )}
-    </section>
+    </Card>
   );
 }

package/src/components/forms/radio-group.stories.tsx

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import * as React from "react";
 
-import { Label } from "../primitives/label";
 import { RadioGroup, RadioGroupItem } from "./radio-group";
 
 const meta: Meta<typeof RadioGroup> = {
@@ -25,9 +23,9 @@ export const Default: Story = {
       {options.map(({ value, label }) => (
         <div key={value} className="flex items-center gap-3">
           <RadioGroupItem value={value} id={`opt-${value}`} />
-          <Label htmlFor={`opt-${value}`} className="cursor-pointer">
+          <label htmlFor={`opt-${value}`} className="cursor-pointer">
             {label}
-          </Label>
+          </label>
         </div>
       ))}
     </RadioGroup>
@@ -40,7 +38,7 @@ export const Disabled: Story = {
       {options.map(({ value, label }) => (
         <div key={value} className="flex items-center gap-3">
           <RadioGroupItem value={value} id={`dis-${value}`} />
-          <Label htmlFor={`dis-${value}`}>{label}</Label>
+          <label htmlFor={`dis-${value}`}>{label}</label>
         </div>
       ))}
     </RadioGroup>

package/src/components/forms/radio-group.tsx

@@ -23,7 +23,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioPrimitive.Root
       ref={ref}
       className={cn(
-        "border-primary bg-background flex aspect-square size-6 items-center justify-center rounded-full border",
+        "border-ring bg-background flex aspect-square size-6 items-center justify-center rounded-full border",
         "focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
         "disabled:cursor-not-allowed disabled:opacity-50",
         className,
@@ -34,7 +34,7 @@ const RadioGroupItem = React.forwardRef<
         keepMounted
         className="data-unchecked:opacity-0 data-checked:opacity-100 data-starting-style:animate-fade-in data-ending-style:animate-fade-out"
       >
-        <Circle className="fill-primary size-5" />
+        <Circle className="fill-ring size-5" />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
   );

package/src/components/forms/select.stories.tsx

@@ -51,9 +51,9 @@ export const SelectedValue: Story = {
     </Select>
   ),
   play: async ({ canvasElement }) => {
-    await expect(within(canvasElement).getByRole("combobox", { name: "Selected fruit" })).toHaveTextContent(
-      "Banana",
-    );
+    await expect(
+      within(canvasElement).getByRole("combobox", { name: "Selected fruit" }),
+    ).toHaveTextContent("Banana");
   },
 };
 
@@ -76,18 +76,15 @@ export const ExplicitItems: Story = {
     </Select>
   ),
   play: async ({ canvasElement }) => {
-    await expect(within(canvasElement).getByRole("combobox", { name: "Country" })).toHaveTextContent(
-      "United States",
-    );
+    await expect(
+      within(canvasElement).getByRole("combobox", { name: "Country" }),
+    ).toHaveTextContent("United States");
   },
 };
 
 export const NullItem: Story = {
   render: () => (
-    <Select
-      defaultValue={null}
-      items={[{ value: null, label: "All options" }]}
-    >
+    <Select defaultValue={null} items={[{ value: null, label: "All options" }]}>
       <SelectTrigger aria-label="Filter">
         <SelectValue placeholder="Choose a filter" />
       </SelectTrigger>
@@ -142,9 +139,13 @@ export const ControlledNullChange: Story = {
     const trigger = canvas.getByRole("combobox", { name: "Controlled filter" });
 
     await userEvent.click(trigger);
-    await userEvent.click(await within(document.body).findByRole("option", { name: "All options" }));
+    await userEvent.click(
+      await within(document.body).findByRole("option", { name: "All options" }),
+    );
     await expect(trigger).toHaveTextContent("All options");
-    await expect(canvas.getByRole("status", { name: "Last selected value" })).toHaveTextContent("null");
+    await expect(canvas.getByRole("status", { name: "Last selected value" })).toHaveTextContent(
+      "null",
+    );
     await userEvent.keyboard("{Escape}");
   },
 };
@@ -184,7 +185,9 @@ export const Disabled: Story = {
     </Select>
   ),
   play: async ({ canvasElement }) => {
-    await expect(within(canvasElement).getByRole("combobox", { name: "Select a fruit" })).toBeDisabled();
+    await expect(
+      within(canvasElement).getByRole("combobox", { name: "Select a fruit" }),
+    ).toBeDisabled();
   },
 };
 

package/src/components/forms/textarea.stories.tsx

@@ -37,7 +37,7 @@ function TextareaField({
         </p>
       ) : null}
       {error ? (
-        <p id={errorId} className="text-destructive text-sm" role="alert">
+        <p id={errorId} className="text-destructive-text text-sm" role="alert">
           {error}
         </p>
       ) : null}

package/src/components/layout/index.ts

@@ -1,3 +1,5 @@
+export { ParticleBackground } from "./particle-background";
+export type { ParticleBackgroundPalette, ParticleBackgroundProps } from "./particle-background";
 export { ScrollArea } from "./scroll-area";
 export type { ScrollAreaProps } from "./scroll-area";
 export { SectionIntro } from "./section-intro";

package/src/components/layout/particle-background.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { ParticleBackground } from "./particle-background";
+
+const meta = {
+  title: "Layout/ParticleBackground",
+  component: ParticleBackground,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ParticleBackground>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="bg-background relative h-80 w-[640px] overflow-hidden">
+      <ParticleBackground {...args} />
+    </div>
+  ),
+};
+
+export const Static: Story = {
+  args: { interactive: false },
+  render: (args) => (
+    <div className="bg-background relative h-80 w-[640px] overflow-hidden">
+      <ParticleBackground {...args} />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { enabled: false },
+  render: (args) => (
+    <div className="bg-background relative h-80 w-[640px] overflow-hidden">
+      <ParticleBackground {...args} />
+    </div>
+  ),
+};