@ponti-studios/ui 0.1.2 → 0.3.0

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

@@ -0,0 +1,146 @@
+import type React from "react";
+import { useCallback, useId } from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface DropZoneProps {
+  isImporting: boolean;
+  dragActive: boolean;
+  onDrop: (files: File[]) => void;
+  onDragOver: () => void;
+  onDragLeave: () => void;
+  onChange?: (files: File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+  className?: string;
+  label?: string;
+  helpText?: string;
+}
+
+/** Drag-and-drop file picker with a click-to-browse fallback. */
+export function DropZone({
+  isImporting,
+  dragActive,
+  onDrop,
+  onDragOver,
+  onDragLeave,
+  onChange,
+  accept,
+  multiple = true,
+  className,
+  label = "Drag and drop files here, or",
+  helpText,
+}: DropZoneProps) {
+  const inputId = useId();
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onDragLeave();
+
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        onDrop(Array.from(e.dataTransfer.files));
+      }
+    },
+    [onDrop, onDragLeave],
+  );
+
+  const triggerFileInput = useCallback(() => {
+    if (!isImporting) {
+      document.getElementById(inputId)?.click();
+    }
+  }, [isImporting, inputId]);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onDragOver();
+    },
+    [onDragOver],
+  );
+
+  const handleDragLeave = useCallback(
+    (e: React.DragEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onDragLeave();
+    },
+    [onDragLeave],
+  );
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      triggerFileInput();
+    },
+    [triggerFileInput],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        triggerFileInput();
+      }
+    },
+    [triggerFileInput],
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      e.stopPropagation();
+      if (onChange) {
+        onChange(e.target.files ? Array.from(e.target.files) : []);
+      }
+    },
+    [onChange],
+  );
+
+  return (
+    <div>
+      <button
+        type="button"
+        className={cn(
+          "relative border-2 border-dashed p-12",
+          {
+            "border-primary bg-primary/5": dragActive,
+            "border-border bg-muted": !dragActive,
+          },
+          "flex flex-col items-center justify-center gap-4",
+          {
+            "pointer-events-none cursor-not-allowed": isImporting,
+          },
+          className,
+        )}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        tabIndex={isImporting ? -1 : 0}
+        aria-disabled={isImporting}
+        aria-label="Upload file area. Press Enter or Space to open file browser"
+      >
+        <div className="space-y-2 text-center">
+          <p className="text-muted-foreground">
+            {label} <span className="text-foreground font-medium">click to browse</span>
+          </p>
+          {helpText ? <p className="text-muted-foreground text-sm">{helpText}</p> : null}
+        </div>
+      </button>
+      <input
+        id={inputId}
+        type="file"
+        multiple={multiple}
+        accept={accept}
+        onChange={handleInputChange}
+        className="sr-only"
+        disabled={isImporting}
+        aria-label="File input"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { EntitySelect } from "./entity-select";
+
+const meta = {
+  title: "Forms/EntitySelect",
+  component: EntitySelect,
+  tags: ["autodocs"],
+} satisfies Meta<typeof EntitySelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { id: "checking", name: "Checking" },
+  { id: "savings", name: "Savings" },
+  { id: "credit-card", name: "Credit Card" },
+];
+
+function EntitySelectPreview() {
+  const [value, setValue] = useState("all");
+  return (
+    <EntitySelect
+      value={value}
+      onValueChange={setValue}
+      options={options}
+      allOptionLabel="All accounts"
+      placeholder="All accounts"
+      label="Account"
+      showLabel
+    />
+  );
+}
+
+export const Default: Story = {
+  args: {
+    value: "all",
+    onValueChange: () => {},
+    options,
+  },
+  render: () => <EntitySelectPreview />,
+};
+
+export const Loading: Story = {
+  args: {
+    value: "all",
+    onValueChange: () => {},
+    options: [],
+    isLoading: true,
+    label: "Account",
+    showLabel: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    value: "all",
+    onValueChange: () => {},
+    options: [],
+    label: "Account",
+    showLabel: true,
+    emptyLabel: "No accounts available",
+  },
+};

package/src/components/forms/entity-select.tsx

@@ -0,0 +1,79 @@
+import { useId } from "react";
+
+import { Label } from "../primitives/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+
+export interface EntitySelectOption {
+  id: string;
+  name: string;
+}
+
+export interface EntitySelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: EntitySelectOption[];
+  isLoading?: boolean;
+  placeholder?: string;
+  label?: string;
+  showLabel?: boolean;
+  allOptionLabel?: string;
+  emptyLabel?: string;
+  className?: string;
+}
+
+/** Labeled `Select` over an `{ id, name }[]` list, with loading/empty states and an "all" option. */
+export function EntitySelect({
+  value,
+  onValueChange,
+  options,
+  isLoading = false,
+  placeholder = "All",
+  label = "Filter",
+  showLabel = false,
+  allOptionLabel = "All",
+  emptyLabel = "No options available",
+  className,
+}: EntitySelectProps) {
+  const id = useId();
+
+  const selectElement = (
+    <Select
+      name={label}
+      value={value}
+      onValueChange={(v: string | null) => v != null && onValueChange(v)}
+    >
+      <SelectTrigger id={id} className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className="max-h-[250px] overflow-y-auto">
+        <SelectItem value="all">{allOptionLabel}</SelectItem>
+        {isLoading ? (
+          <SelectItem value="loading" disabled>
+            Loading...
+          </SelectItem>
+        ) : options.length === 0 ? (
+          <SelectItem value="empty" disabled>
+            {emptyLabel}
+          </SelectItem>
+        ) : (
+          options.map((option) => (
+            <SelectItem key={option.id} value={option.id}>
+              {option.name}
+            </SelectItem>
+          ))
+        )}
+      </SelectContent>
+    </Select>
+  );
+
+  if (showLabel) {
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={id}>{label}</Label>
+        {selectElement}
+      </div>
+    );
+  }
+
+  return selectElement;
+}

package/src/components/forms/field.tsx

@@ -29,7 +29,7 @@ function Field({ label, helpText, error, required, children, id: externalId }: F
         <label
           htmlFor={id}
           className={cn(
-            "body-3 text-primary font-medium",
+            "text-sm text-foreground font-medium",
             required && "after:text-destructive after:ml-0.5 after:content-['*']",
           )}
         >
@@ -50,11 +50,11 @@ function Field({ label, helpText, error, required, children, id: externalId }: F
         : children}
 
       {error ? (
-        <p id={errorId} role="alert" className="body-4 text-destructive">
+        <p id={errorId} role="alert" className="text-sm text-destructive">
           {error}
         </p>
       ) : helpText ? (
-        <p id={descId} className="body-4 text-tertiary">
+        <p id={descId} className="text-sm text-muted-foreground">
           {helpText}
         </p>
       ) : null}

package/src/components/forms/group-by-select.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { GroupBySelect } from "./group-by-select";
+
+const meta = {
+  title: "Forms/GroupBySelect",
+  component: GroupBySelect,
+  tags: ["autodocs"],
+} satisfies Meta<typeof GroupBySelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function GroupBySelectPreview() {
+  const [groupBy, setGroupBy] = useState<"month" | "week" | "day">("month");
+  return <GroupBySelect groupBy={groupBy} onGroupByChange={setGroupBy} />;
+}
+
+export const Default: Story = {
+  args: {
+    groupBy: "month",
+    onGroupByChange: () => {},
+  },
+  render: () => <GroupBySelectPreview />,
+};

package/src/components/forms/group-by-select.tsx

@@ -0,0 +1,47 @@
+import { useId } from "react";
+
+import { Label } from "../primitives/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+
+type GroupByOption = "month" | "week" | "day";
+
+export interface GroupBySelectProps {
+  groupBy: GroupByOption;
+  onGroupByChange: (value: GroupByOption) => void;
+  label?: string;
+  className?: string;
+}
+
+/** Month/week/day grouping select. */
+export function GroupBySelect({
+  groupBy,
+  onGroupByChange,
+  label = "Group By",
+  className,
+}: GroupBySelectProps) {
+  const id = useId();
+
+  return (
+    <div className={`space-y-2 ${className || ""}`}>
+      <Label htmlFor={id}>{label}</Label>
+      <Select
+        name="groupBy"
+        value={groupBy}
+        onValueChange={(value) => {
+          if (value === "month" || value === "week" || value === "day") {
+            onGroupByChange(value);
+          }
+        }}
+      >
+        <SelectTrigger id={id}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="month">Month</SelectItem>
+          <SelectItem value="week">Week</SelectItem>
+          <SelectItem value="day">Day</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/src/components/forms/index.ts

@@ -2,9 +2,19 @@ export { Calendar } from "./calendar";
 export type { CalendarProps } from "./calendar";
 export { DatePicker } from "./date-picker";
 export type { DatePickerProps } from "./date-picker";
+export { DateMonthSelect, getCurrentMonthYear } from "./date-month-select";
+export type { DateMonthSelectProps } from "./date-month-select";
+export { DropZone } from "./drop-zone";
+export type { DropZoneProps } from "./drop-zone";
+export { EntitySelect } from "./entity-select";
+export type { EntitySelectOption, EntitySelectProps } from "./entity-select";
 export { Field } from "./field";
 export type { FieldProps } from "./field";
+export { GroupBySelect } from "./group-by-select";
+export type { GroupBySelectProps } from "./group-by-select";
 export { Input } from "./input";
+export { PasskeyManagement } from "./passkey-management";
+export type { PasskeyManagementProps, PasskeyRecord } from "./passkey-management";
 export { RadioGroup, RadioGroupItem } from "./radio-group";
 export {
   Select,

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

@@ -28,7 +28,7 @@ export const Default: Story = {
 export const WithLabel: Story = {
   render: () => (
     <div className="flex w-72 flex-col gap-2">
-      <label htmlFor="email" className="text-primary text-sm leading-none font-medium">
+      <label htmlFor="email" className="text-foreground text-sm leading-none font-medium">
         Email
       </label>
       <Input id="email" type="email" placeholder="you@example.com" />
@@ -39,9 +39,9 @@ export const WithLabel: Story = {
 export const States: Story = {
   render: () => (
     <div className="flex w-72 flex-col gap-4">
-      <Input placeholder="Default" />
-      <Input placeholder="Disabled" disabled />
-      <Input defaultValue="With value" />
+      <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

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

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

@@ -0,0 +1,81 @@
+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({ withError = false }: { withError?: 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,
+            {
+              id: String(prev.length + 1),
+              name: "New device",
+              createdAt: new Date().toISOString(),
+            },
+          ]);
+          return true;
+        }}
+        onDelete={async (id) => {
+          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,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    passkeys: initialPasskeys,
+    error: "Could not delete passkey. Please try again.",
+    onAdd: async () => true,
+    onDelete: async () => true,
+  },
+  render: () => <PasskeyManagementPreview withError />,
+};

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

@@ -0,0 +1,138 @@
+import { KeyRound, Plus, Trash2 } from "lucide-react";
+import { useCallback, useState } from "react";
+
+import { Button } from "../primitives/button";
+
+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>;
+}
+
+/** 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<string | null>(null);
+
+  const passkeys = passkeysProp ?? [];
+  const error = externalError ?? actionError;
+
+  const handleAdd = useCallback(async () => {
+    setAdding(true);
+    setActionError(null);
+    try {
+      const success = await onAdd();
+      if (!success) {
+        setActionError("Passkey registration was cancelled or failed.");
+      }
+    } catch {
+      setActionError("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("Could not delete passkey. Please try again.");
+      } finally {
+        setDeletingId(null);
+      }
+    },
+    [onDelete],
+  );
+
+  return (
+    <section aria-labelledby="passkey-heading" className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 id="passkey-heading" className="text-sm font-medium text-foreground">
+            Passkeys
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Sign in without a password using biometrics or a security key.
+          </p>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => void handleAdd()}
+          disabled={adding}
+          aria-label="Add a passkey"
+        >
+          <Plus className="size-4" aria-hidden />
+          {adding ? "Adding..." : "Add passkey"}
+        </Button>
+      </div>
+
+      {error ? (
+        <p role="alert" className="text-destructive text-sm">
+          {error}
+        </p>
+      ) : null}
+
+      {isLoading ? (
+        <p className="text-muted-foreground text-sm">Loading passkeys...</p>
+      ) : passkeys.length === 0 ? (
+        <div className="border-border text-muted-foreground flex items-center gap-3 border border-dashed 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 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}
+                </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-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>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}