@ponti-studios/ui 2.0.1 → 3.0.0

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

@@ -1,298 +0,0 @@
-import { FileIcon, UploadIcon, XIcon } from "lucide-react";
-import {
-  useCallback,
-  useId,
-  useRef,
-  useState,
-  type ChangeEvent,
-  type DragEvent,
-  type KeyboardEvent,
-  type ReactNode,
-} from "react";
-
-import { cn } from "../../lib/utils";
-import { Progress } from "../feedback/progress";
-import { Button } from "../primitives/button";
-
-export type DropZoneStatus = "empty" | "armed" | "busy" | "failed";
-
-export type DropZoneFileInfo = {
-  name: string;
-  size: number;
-};
-
-export type DropZoneProps = {
-  status: DropZoneStatus;
-  /** Selected file metadata for armed / busy / failed (with file retained). */
-  file?: DropZoneFileInfo | null;
-  error?: string | null;
-  notice?: string | null;
-  /** File input accept attribute, e.g. `.pdf,application/pdf`. */
-  accept?: string;
-  multiple?: boolean;
-  disabled?: boolean;
-  className?: string;
-  /** Empty idle copy */
-  emptyLabel?: ReactNode;
-  emptyHint?: ReactNode;
-  draggingLabel?: ReactNode;
-  /** Busy copy */
-  busyLabel?: ReactNode;
-  busyDescription?: ReactNode;
-  /** Action labels — parent owns domain language */
-  submitLabel?: string;
-  retryLabel?: string;
-  clearLabel?: string;
-  cancelLabel?: string;
-  /** Extra content under error (e.g. sign-in link). */
-  failedActions?: ReactNode;
-  onFiles: (files: File[]) => void;
-  onSubmit?: () => void;
-  onClear?: () => void;
-  onCancel?: () => void;
-  onRetry?: () => void;
-};
-
-function formatFileSize(bytes: number) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
-}
-
-/**
- * Generic file drop surface. Parent owns validation, network, and domain copy.
- * Modes: empty | armed | busy | failed, plus an internal drag overlay.
- */
-export function DropZone({
-  status,
-  file = null,
-  error = null,
-  notice = null,
-  accept,
-  multiple = false,
-  disabled = false,
-  className,
-  emptyLabel = (
-    <>
-      Drop a file here, or <span className="text-accent-text font-medium">browse</span>
-    </>
-  ),
-  emptyHint,
-  draggingLabel = "Release to attach",
-  busyLabel = "Processing…",
-  busyDescription,
-  submitLabel = "Upload",
-  retryLabel = "Try again",
-  clearLabel = "Use a different file",
-  cancelLabel = "Cancel",
-  failedActions,
-  onFiles,
-  onSubmit,
-  onClear,
-  onCancel,
-  onRetry,
-}: DropZoneProps) {
-  const inputId = useId();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const zoneRef = useRef<HTMLDivElement>(null);
-  const [dragging, setDragging] = useState(false);
-
-  const isBusy = status === "busy";
-  const isInteractive = !disabled && !isBusy;
-
-  const openPicker = useCallback(() => {
-    if (!isInteractive) return;
-    inputRef.current?.click();
-  }, [isInteractive]);
-
-  const handleFiles = useCallback(
-    (list: FileList | File[] | null) => {
-      if (!list || !isInteractive) return;
-      const files = Array.from(list);
-      if (files.length === 0) return;
-      onFiles(files);
-    },
-    [isInteractive, onFiles],
-  );
-
-  const onDragEnter = (event: DragEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!isInteractive) return;
-    setDragging(true);
-  };
-
-  const onDragOver = (event: DragEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
-  };
-
-  const onDragLeave = (event: DragEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    const next = event.relatedTarget;
-    if (next instanceof Node && zoneRef.current?.contains(next)) return;
-    setDragging(false);
-  };
-
-  const onDrop = (event: DragEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setDragging(false);
-    if (!isInteractive) return;
-    handleFiles(event.dataTransfer.files);
-  };
-
-  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-    handleFiles(event.target.files);
-    event.target.value = "";
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      openPicker();
-    }
-  };
-
-  const showDragging = dragging && isInteractive;
-  const frameTone = cn(
-    showDragging && "border-ring bg-primary/5",
-    status === "failed" && !showDragging && "border-destructive bg-destructive/5",
-    status === "busy" && "border-border bg-muted/30",
-    status !== "failed" && status !== "busy" && !showDragging && "border-border bg-card",
-  );
-
-  return (
-    <div className={cn("w-full space-y-3", className)}>
-      <input
-        ref={inputRef}
-        id={inputId}
-        type="file"
-        accept={accept}
-        multiple={multiple}
-        disabled={!isInteractive}
-        className="pointer-events-none sr-only"
-        onChange={onInputChange}
-        tabIndex={-1}
-        aria-hidden
-      />
-
-      <div
-        ref={zoneRef}
-        role="button"
-        tabIndex={isInteractive ? 0 : -1}
-        aria-disabled={!isInteractive}
-        aria-busy={isBusy}
-        aria-label="File upload drop zone"
-        className={cn(
-          "relative flex min-h-44 w-full flex-col items-center justify-center overflow-hidden rounded-2xl border border-dashed p-6 text-center outline-none",
-          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2",
-          "motion-safe:transition-[transform,opacity] motion-safe:duration-200 motion-safe:ease-in-out motion-reduce:transition-none",
-          isInteractive ? "cursor-pointer" : "cursor-default",
-          showDragging ? "scale-[1.01] motion-reduce:scale-100" : "scale-100",
-          frameTone,
-        )}
-        onClick={isInteractive ? openPicker : undefined}
-        onKeyDown={isInteractive ? onKeyDown : undefined}
-        onDragEnter={onDragEnter}
-        onDragOver={onDragOver}
-        onDragLeave={onDragLeave}
-        onDrop={onDrop}
-      >
-        <div className="flex w-full max-w-sm flex-col items-center gap-3">
-          {showDragging ? (
-            <>
-              <UploadIcon
-                className="text-accent-text size-8 motion-safe:transition-[transform,opacity] motion-safe:duration-200 motion-safe:ease-in-out motion-reduce:transition-none motion-safe:-translate-y-0.5 motion-reduce:translate-y-0"
-                aria-hidden
-              />
-              <p className="body-3 text-foreground">{draggingLabel}</p>
-            </>
-          ) : null}
-
-          {!showDragging && status === "empty" ? (
-            <>
-              <UploadIcon className="size-8 text-muted-foreground" aria-hidden />
-              <div className="space-y-1">
-                <p className="body-3 text-foreground">{emptyLabel}</p>
-                {emptyHint ? <p className="body-4 text-muted-foreground">{emptyHint}</p> : null}
-              </div>
-            </>
-          ) : null}
-
-          {!showDragging && status === "armed" && file ? (
-            <>
-              <FileIcon className="size-8 text-muted-foreground" aria-hidden />
-              <div className="min-w-0 max-w-full space-y-1">
-                <p className="subheading-4 truncate text-foreground">{file.name}</p>
-                <p className="body-4 text-muted-foreground">{formatFileSize(file.size)}</p>
-              </div>
-            </>
-          ) : null}
-
-          {!showDragging && status === "busy" ? (
-            <div className="w-full space-y-3">
-              <div className="space-y-1">
-                <p className="subheading-4 text-foreground">{busyLabel}</p>
-                {busyDescription ? (
-                  <p className="body-4 text-muted-foreground">{busyDescription}</p>
-                ) : null}
-                {file ? <p className="body-4 truncate text-muted-foreground">{file.name}</p> : null}
-              </div>
-              <Progress
-                className="h-1.5 opacity-80 motion-safe:animate-pulse"
-                aria-label={typeof busyLabel === "string" ? busyLabel : "Processing"}
-                value={50}
-              />
-            </div>
-          ) : null}
-
-          {!showDragging && status === "failed" ? (
-            <div className="w-full space-y-2">
-              {file ? <p className="subheading-4 truncate text-foreground">{file.name}</p> : null}
-              {error ? <p className="body-3 text-destructive-text">{error}</p> : null}
-              {failedActions}
-            </div>
-          ) : null}
-        </div>
-      </div>
-
-      {notice ? <p className="body-4 text-muted-foreground">{notice}</p> : null}
-
-      <div className="grid gap-2">
-        {status === "armed" && onSubmit ? (
-          <Button type="button" className="w-full" onClick={onSubmit}>
-            <UploadIcon className="size-4" />
-            {submitLabel}
-          </Button>
-        ) : null}
-        {status === "failed" && onRetry ? (
-          <Button type="button" className="w-full" onClick={onRetry}>
-            {retryLabel}
-          </Button>
-        ) : null}
-        {status === "busy" && onCancel ? (
-          <Button type="button" variant="outline" className="w-full" onClick={onCancel}>
-            <XIcon className="size-4" />
-            {cancelLabel}
-          </Button>
-        ) : null}
-        {(status === "armed" || status === "failed") && onClear ? (
-          <Button
-            type="button"
-            variant="ghost"
-            className="w-full"
-            onClick={(event) => {
-              event.stopPropagation();
-              onClear();
-            }}
-          >
-            {clearLabel}
-          </Button>
-        ) : null}
-      </div>
-    </div>
-  );
-}

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

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { booleanControl, selectControl, textControl } from "../../storybook/controls";
-import { inputTypeOptions } from "../../storybook/options";
-import { Input } from "./input";
-
-const meta = {
-  title: "Forms/Input",
-  component: Input,
-  tags: ["autodocs"],
-  argTypes: {
-    type: selectControl(inputTypeOptions, "HTML input type attribute", {
-      defaultValue: "text",
-    }),
-    placeholder: textControl("Placeholder text shown when the input is empty"),
-    disabled: booleanControl("Prevents user interaction and applies disabled styling", false),
-    required: booleanControl("Marks the input as required for form submission", false),
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { placeholder: "Enter text…" },
-};
-
-export const WithLabel: Story = {
-  render: () => (
-    <div className="flex w-72 flex-col gap-2">
-      <label htmlFor="email" className="text-foreground text-sm leading-none font-medium">
-        Email
-      </label>
-      <Input id="email" type="email" placeholder="you@example.com" />
-    </div>
-  ),
-};
-
-export const States: Story = {
-  render: () => (
-    <div className="flex w-72 flex-col gap-4">
-      <Input aria-label="Default input" placeholder="Default" />
-      <Input aria-label="Disabled input" placeholder="Disabled" disabled />
-      <Input aria-label="Input with value" defaultValue="With value" />
-    </div>
-  ),
-};

package/src/components/forms/input.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "bg-background text-foreground border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base transition-colors md:text-sm",
-        "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
-        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
-        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };

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

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Label } from "./label";
-
-const meta = {
-  title: "Forms/Label",
-  component: Label,
-  tags: ["autodocs"],
-} satisfies Meta<typeof Label>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { children: "Email address", htmlFor: "email" },
-};

package/src/components/forms/label.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-function Label({ className, ...props }: React.ComponentProps<"label">) {
-  return (
-    // Association happens at usage (htmlFor or wrapping); the wrapper
-    // itself cannot know its control.
-    // oxlint-disable-next-line jsx-a11y/label-has-associated-control
-    <label
-      data-slot="label"
-      className={cn(
-        "text-sm leading-none font-medium select-none",
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        "group-has-disabled:cursor-not-allowed group-has-disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Label };

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

@@ -1,85 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { PasskeyManagement, type PasskeyRecord } from "./passkey-management";
-
-const meta = {
-  title: "Forms/PasskeyManagement",
-  component: PasskeyManagement,
-  tags: ["autodocs"],
-} satisfies Meta<typeof PasskeyManagement>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const initialPasskeys: PasskeyRecord[] = [
-  { id: "1", name: "MacBook Pro", createdAt: "2025-01-15T00:00:00.000Z" },
-  { id: "2", name: "iPhone", createdAt: "2025-03-02T00:00:00.000Z" },
-];
-
-function PasskeyManagementPreview({ withDeleteError = false }: { withDeleteError?: boolean }) {
-  const [passkeys, setPasskeys] = useState(initialPasskeys);
-
-  return (
-    <div className="w-96">
-      <PasskeyManagement
-        passkeys={passkeys}
-        onAdd={async () => {
-          setPasskeys((prev) => [
-            ...prev,
-            {
-              id: String(prev.length + 1),
-              name: "New device",
-              createdAt: new Date().toISOString(),
-            },
-          ]);
-          return true;
-        }}
-        onDelete={async (id) => {
-          if (withDeleteError && id === "2") return false;
-          setPasskeys((prev) => prev.filter((pk) => pk.id !== id));
-          return true;
-        }}
-      />
-    </div>
-  );
-}
-
-export const Default: Story = {
-  args: {
-    passkeys: initialPasskeys,
-    onAdd: async () => true,
-    onDelete: async () => true,
-  },
-  render: () => <PasskeyManagementPreview />,
-};
-
-export const Empty: Story = {
-  args: {
-    passkeys: [],
-    onAdd: async () => true,
-    onDelete: async () => true,
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    isLoading: true,
-    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,
-    onAdd: async () => true,
-    onDelete: async () => true,
-  },
-  render: () => <PasskeyManagementPreview withDeleteError />,
-};

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

@@ -1,168 +0,0 @@
-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;
-  name?: string;
-  createdAt?: string;
-}
-
-export interface PasskeyManagementProps {
-  passkeys?: PasskeyRecord[];
-  isLoading?: boolean;
-  error?: string | null;
-  onAdd: () => Promise<boolean>;
-  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,
-  isLoading = false,
-  error: externalError,
-  onAdd,
-  onDelete,
-}: PasskeyManagementProps) {
-  const [adding, setAdding] = useState(false);
-  const [deletingId, setDeletingId] = useState<string | null>(null);
-  const [actionError, setActionError] = useState<PasskeyActionError | null>(null);
-
-  const passkeys = passkeysProp ?? [];
-  const error = externalError ?? (actionError?.passkeyId ? null : actionError?.message);
-
-  const handleAdd = useCallback(async () => {
-    setAdding(true);
-    setActionError(null);
-    try {
-      const success = await onAdd();
-      if (!success) {
-        setActionError({ message: "Passkey registration was cancelled or failed." });
-      }
-    } catch {
-      setActionError({ message: "An error occurred during passkey registration." });
-    } finally {
-      setAdding(false);
-    }
-  }, [onAdd]);
-
-  const handleDelete = useCallback(
-    async (id: string) => {
-      setDeletingId(id);
-      setActionError(null);
-      try {
-        const success = await onDelete(id);
-        if (!success) {
-          throw new Error("Failed to delete passkey");
-        }
-      } catch {
-        setActionError({
-          message: "Could not delete passkey. Please try again.",
-          passkeyId: id,
-        });
-      } finally {
-        setDeletingId(null);
-      }
-    },
-    [onDelete],
-  );
-
-  return (
-    <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>
-        <Button
-          type="button"
-          size="sm"
-          onClick={() => void handleAdd()}
-          isLoading={adding}
-          loadingLabel="Adding passkey"
-          aria-label="Add a passkey"
-          className="ml-auto"
-        >
-          <Plus className="size-4" aria-hidden />
-        </Button>
-      </CardHeader>
-
-      {error ? (
-        <p role="alert" className="text-destructive-text border-b px-4 py-3 text-sm">
-          {error}
-        </p>
-      ) : null}
-
-      {isLoading ? (
-        <Spinner presentation="centered" size="sm" label="Loading passkeys" />
-      ) : passkeys.length === 0 ? (
-        <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="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>
-                {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>
-      )}
-    </Card>
-  );
-}