@ponti-studios/ui 1.5.1 → 1.7.0

package/src/styles/tokens/typography.stories.tsx

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { fontFamilies, fontWeights, textLineHeights, textSizes, tracking } from "./index";
+
+const meta: Meta = { title: "Foundations/Typography", parameters: { layout: "fullscreen" } };
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sizeTokens = Object.keys(textSizes) as Array<keyof typeof textSizes>;
+const weightTokens = Object.keys(fontWeights) as Array<keyof typeof fontWeights>;
+const trackingTokens = Object.keys(tracking) as Array<keyof typeof tracking>;
+const familyTokens = Object.keys(fontFamilies) as Array<keyof typeof fontFamilies>;
+
+export const TypeScale: Story = {
+  render: () => (
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid gap-2">
+        <h1 className="text-2xl font-semibold">Typography</h1>
+        <p className="text-muted-foreground max-w-prose text-sm">
+          Font sizes, weights, tracking, and families as defined by the shared design tokens (
+          <code className="font-mono">src/styles/tokens</code>).
+        </p>
+      </header>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Type scale
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {sizeTokens.map((token) => (
+            <div key={token} className="grid grid-cols-[6rem_5rem_1fr] items-baseline gap-4 p-4">
+              <span className="text-muted-foreground font-mono text-xs">text-{token}</span>
+              <span className="text-muted-foreground font-mono text-xs tabular-nums">
+                {textSizes[token]}px / {textLineHeights[token]?.toFixed(2)}
+              </span>
+              <span
+                className="truncate"
+                style={{ fontSize: textSizes[token], lineHeight: textLineHeights[token] }}
+              >
+                The quick brown fox jumps
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Font weights
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {weightTokens.map((token) => (
+            <div key={token} className="grid grid-cols-[8rem_1fr] items-baseline gap-4 p-4">
+              <span className="text-muted-foreground font-mono text-xs">
+                {token} / {fontWeights[token]}
+              </span>
+              <span className="text-lg" style={{ fontWeight: fontWeights[token] }}>
+                The quick brown fox jumps over the lazy dog
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Tracking
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {trackingTokens.map((token) => (
+            <div key={token} className="grid grid-cols-[8rem_1fr] items-baseline gap-4 p-4">
+              <span className="text-muted-foreground font-mono text-xs">
+                {token} / {tracking[token]}
+              </span>
+              <span className="text-lg" style={{ letterSpacing: tracking[token] }}>
+                The quick brown fox jumps over the lazy dog
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Font families
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {familyTokens.map((token) => (
+            <div key={token} className="grid gap-2 p-4">
+              <span className="text-muted-foreground font-mono text-xs">--font-{token}</span>
+              <span className="text-2xl" style={{ fontFamily: fontFamilies[token] }}>
+                The quick brown fox jumps over the lazy dog. 0123456789
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  ),
+};
+
+const headingSpecimens = [
+  { tag: "h1" as const, className: "text-4xl" },
+  { tag: "h2" as const, className: "text-3xl" },
+  { tag: "h3" as const, className: "text-2xl" },
+  { tag: "h4" as const, className: "text-xl" },
+  { tag: "h5" as const, className: "text-lg" },
+  { tag: "h6" as const, className: "text-base" },
+];
+
+export const Headings: Story = {
+  render: () => (
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid gap-2">
+        <h1 className="text-2xl font-semibold">Headings</h1>
+        <p className="text-muted-foreground max-w-prose text-sm">
+          `h1`–`h6` only carry font-family, weight, and tracking from the base layer — size is unset
+          by tag, so components pair a heading element with an explicit{" "}
+          <code className="font-mono">text-*</code> utility. The sizes below match this
+          codebase&apos;s own usage, not an enforced per-level scale.
+        </p>
+      </header>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Display utilities
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          <div className="grid gap-2 p-4">
+            <span className="text-muted-foreground font-mono text-xs">display-1</span>
+            <p className="display-1">Display one</p>
+          </div>
+          <div className="grid gap-2 p-4">
+            <span className="text-muted-foreground font-mono text-xs">display-2</span>
+            <p className="display-2">Display two</p>
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+          Semantic headings
+        </h2>
+        <div className="border-border divide-border grid divide-y rounded-md border">
+          {headingSpecimens.map(({ tag: Tag, className }) => (
+            <div key={Tag} className="grid grid-cols-[6rem_1fr] items-baseline gap-4 p-4">
+              <span className="text-muted-foreground font-mono text-xs">
+                {Tag} / {className}
+              </span>
+              <Tag className={className}>The quick brown fox jumps over the lazy dog</Tag>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  ),
+};

package/src/components/feedback/file-upload-status.stories.tsx

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { FileUploadStatus } from "./file-upload-status";
-
-const meta = {
-  title: "Feedback/FileUploadStatus",
-  component: FileUploadStatus,
-  tags: ["autodocs"],
-} satisfies Meta<typeof FileUploadStatus>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Uploading: Story = {
-  render: () => (
-    <div className="w-80">
-      <FileUploadStatus uploadStatus={{ status: "uploading", stats: { progress: 42 } }} />
-    </div>
-  ),
-};
-
-export const Queued: Story = {
-  render: () => (
-    <div className="w-80">
-      <FileUploadStatus uploadStatus={{ status: "queued" }} />
-    </div>
-  ),
-};
-
-export const Done: Story = {
-  render: () => (
-    <div className="w-80">
-      <FileUploadStatus
-        uploadStatus={{
-          status: "done",
-          stats: {
-            processingTime: 4200,
-            total: 128,
-            created: 90,
-            updated: 30,
-            skipped: 8,
-          },
-        }}
-      />
-    </div>
-  ),
-};
-
-export const Error: Story = {
-  render: () => (
-    <div className="w-80">
-      <FileUploadStatus
-        uploadStatus={{ status: "error", error: "Could not parse the CSV file." }}
-      />
-    </div>
-  ),
-};

package/src/components/feedback/file-upload-status.tsx

@@ -1,160 +0,0 @@
-import { XIcon } from "lucide-react";
-import { memo } from "react";
-
-import { ProgressBar } from "./progress-bar";
-
-export interface FileUploadStats {
-  progress?: number;
-  processingTime?: number;
-  total?: number;
-  created?: number;
-  updated?: number;
-  skipped?: number;
-  merged?: number;
-  invalid?: number;
-  errors?: unknown[];
-}
-
-export interface FileUploadState {
-  status: "uploading" | "processing" | "queued" | "done" | "error" | (string & {});
-  error?: string;
-  stats?: FileUploadStats;
-}
-
-export const FileUploadStatus = memo(function FileUploadStatus({
-  uploadStatus,
-}: {
-  uploadStatus?: FileUploadState;
-}) {
-  if (!uploadStatus) return null;
-  const { status, error, stats } = uploadStatus;
-
-  if (status === "uploading" || status === "processing") {
-    const progress = stats?.progress;
-
-    return (
-      <output className="w-full">
-        <div className="mb-1.5 flex items-center justify-between">
-          <span className="text-muted-foreground text-sm font-medium">
-            {status === "uploading" ? "Uploading" : "Processing"}
-          </span>
-          <span className="text-foreground text-sm font-medium">
-            {progress !== undefined ? `${Math.round(progress)}%` : ""}
-          </span>
-        </div>
-        <div className="w-full">
-          {typeof progress === "number" ? (
-            <ProgressBar
-              progress={progress}
-              className="bg-muted h-2"
-              indicatorClassName="border-primary"
-            />
-          ) : (
-            <div className="bg-muted h-2 overflow-hidden">
-              <div className="bg-primary void-anim-breezy-progress h-full" />
-            </div>
-          )}
-        </div>
-      </output>
-    );
-  }
-
-  if (status === "queued") {
-    return (
-      <output className="w-full">
-        <div className="mb-1.5 flex items-center justify-between">
-          <span className="text-muted-foreground text-sm font-medium">Queue position</span>
-        </div>
-        <div className="w-full">
-          <ProgressBar
-            progress={0}
-            className="bg-warning/10 h-2"
-            indicatorClassName="border-warning"
-          />
-        </div>
-      </output>
-    );
-  }
-
-  if (status === "done") {
-    return (
-      <output className="space-y-3">
-        <div className="w-full">
-          <ProgressBar
-            progress={100}
-            className="bg-muted h-2"
-            indicatorClassName="border-primary"
-          />
-        </div>
-        {stats && <ProcessingStats stats={stats} />}
-      </output>
-    );
-  }
-
-  if (status === "error") {
-    return (
-      <output className="mt-2" role="alert">
-        <div className="bg-destructive/10 text-destructive-text flex items-start gap-2 p-3">
-          <XIcon className="mt-0.5 h-5 w-5 shrink-0" aria-hidden="true" />
-          <span className="text-sm">{error}</span>
-        </div>
-      </output>
-    );
-  }
-
-  return <output className="text-muted-foreground text-sm">{status}</output>;
-});
-
-const ProcessingStats = memo(function ProcessingStats({ stats }: { stats: FileUploadStats }) {
-  if (!stats || typeof stats !== "object") return null;
-
-  return (
-    <dl className="divide-border mt-3 divide-y">
-      {stats.processingTime !== undefined && (
-        <div className="py-2 first:pt-0 last:pb-0">
-          <dt className="sr-only">Processing time</dt>
-          <dd className="text-foreground text-sm font-medium">
-            Completed in {(stats.processingTime / 1000).toFixed(1)}s
-          </dd>
-        </div>
-      )}
-      {stats.total !== undefined && Object.values(stats).length ? (
-        <>
-          <ProcessingStat label="Total" value={stats.total} />
-          <ProcessingStat label="Created" value={stats.created} />
-          <ProcessingStat label="Updated" value={stats.updated} />
-          <ProcessingStat label="Skipped" value={stats.skipped} />
-          <ProcessingStat label="Merged" value={stats.merged} />
-          <ProcessingStat label="Invalid" value={stats.invalid} />
-        </>
-      ) : null}
-
-      {stats.errors?.length && stats.errors.length > 0 ? (
-        <div className="py-2">
-          <dt className="text-foreground text-sm font-medium">Errors</dt>
-          <dd className="mt-1">
-            <span className="bg-destructive/10 text-destructive-text inline-flex items-center px-2 py-1 text-xs font-medium">
-              {stats.errors.length} error{stats.errors.length > 1 ? "s" : ""}
-            </span>
-          </dd>
-        </div>
-      ) : null}
-    </dl>
-  );
-});
-
-const ProcessingStat = memo(function ProcessingStat({
-  label,
-  value,
-}: {
-  label: string;
-  value?: number | undefined;
-}) {
-  if (value === undefined) return null;
-  return (
-    <div className="py-2">
-      <dt className="text-muted-foreground text-sm font-medium">{label}</dt>
-      <dd className="text-foreground mt-1 text-sm">{value.toLocaleString()}</dd>
-    </div>
-  );
-});

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

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { ProgressBar } from "./progress-bar";
-
-const meta = {
-  title: "Feedback/ProgressBar",
-  component: ProgressBar,
-  tags: ["autodocs"],
-} satisfies Meta<typeof ProgressBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { progress: 60 },
-  render: (args) => (
-    <div className="w-64">
-      <ProgressBar {...args} />
-    </div>
-  ),
-};
-
-export const Empty: Story = {
-  args: { progress: 0 },
-  render: (args) => (
-    <div className="w-64">
-      <ProgressBar {...args} />
-    </div>
-  ),
-};
-
-export const Complete: Story = {
-  args: { progress: 100 },
-  render: (args) => (
-    <div className="w-64">
-      <ProgressBar {...args} />
-    </div>
-  ),
-};

package/src/components/feedback/progress-bar.tsx

@@ -1,22 +0,0 @@
-import { cn } from "../../lib/utils";
-
-export interface ProgressBarProps {
-  className?: string;
-  indicatorClassName?: string;
-  progress?: number;
-}
-
-/** Thin linear progress indicator, distinct from the Radix-backed `Progress`. */
-export function ProgressBar({ className, indicatorClassName, progress = 0 }: ProgressBarProps) {
-  return (
-    <div className={cn("border-border h-[2px] w-full overflow-hidden border-t", className)}>
-      <div
-        className={cn("border-warning h-full border-t", indicatorClassName)}
-        style={{
-          width: `${Math.min(100, Math.max(0, progress))}%`,
-          opacity: progress === 100 ? 0 : 0.8,
-        }}
-      />
-    </div>
-  );
-}

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

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { Calendar } from "./calendar";
-
-const meta = {
-  title: "Forms/Calendar",
-  component: Calendar,
-  tags: ["autodocs"],
-} satisfies Meta<typeof Calendar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-    return (
-      <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
-    );
-  },
-};
-
-export const WithoutOutsideDays: Story = {
-  render: () => <Calendar mode="single" showOutsideDays={false} className="rounded-md border" />,
-};
-
-export const RangeMode: Story = {
-  render: () => <Calendar mode="range" className="rounded-md border" />,
-};

package/src/components/forms/calendar.tsx

@@ -1,70 +0,0 @@
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
-import type * as React from "react";
-import { DayPicker } from "react-day-picker";
-
-import { cn } from "../../lib/utils";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("relative w-fit rounded-md p-4", className)}
-      classNames={{
-        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 z-10 flex items-center justify-between",
-        button_previous:
-          "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 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-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-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,
-      }}
-      components={{
-        Chevron: ({ className: iconClassName, orientation, ...iconProps }) => {
-          if (orientation === "left") {
-            return <ChevronLeft className={cn("size-4", iconClassName)} {...iconProps} />;
-          }
-
-          if (orientation === "right") {
-            return <ChevronRight className={cn("size-4", iconClassName)} {...iconProps} />;
-          }
-
-          if (orientation === "up") {
-            return <ChevronUp className={cn("size-4", iconClassName)} {...iconProps} />;
-          }
-
-          return <ChevronDown className={cn("size-4", iconClassName)} {...iconProps} />;
-        },
-      }}
-      {...props}
-    />
-  );
-}
-
-Calendar.displayName = "Calendar";
-
-export { Calendar };