@ponti-studios/ui 0.1.2 → 0.4.0

package/src/components/forms/calendar.tsx

@@ -12,31 +12,34 @@ 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 />,
+};

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-foreground text-sm 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-destructive text-sm">
           {error}
         </p>
       ) : helpText ? (
-        <p id={descId} className="body-4 text-tertiary">
+        <p id={descId} className="text-muted-foreground text-sm">
           {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 border-input 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",
         "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
         className,
       )}