@ponti-studios/ui 2.0.1 → 3.0.0

package/src/styles/tokens/source/light.tokens.json

@@ -1,138 +0,0 @@
-{
-  "$extensions": {
-    "org.ponti.license": "MIT",
-    "org.ponti.identity": "mono"
-  },
-  "background": {
-    "$type": "color",
-    "$value": "rgb(255, 255, 255)"
-  },
-  "card": {
-    "$type": "color",
-    "$value": "rgb(255, 255, 255)"
-  },
-  "secondary": {
-    "$type": "color",
-    "$value": "rgb(245, 245, 245)"
-  },
-  "popover": {
-    "$type": "color",
-    "$value": "rgb(255, 255, 255)"
-  },
-  "muted": {
-    "$type": "color",
-    "$value": "rgb(250, 250, 250)"
-  },
-  "text-primary": {
-    "$type": "color",
-    "$value": "rgb(17, 17, 17)"
-  },
-  "text-secondary": {
-    "$type": "color",
-    "$value": "rgb(107, 107, 107)"
-  },
-  "tertiary": {
-    "$type": "color",
-    "$value": "{text-secondary}"
-  },
-  "primary": {
-    "$type": "color",
-    "$value": "rgb(23, 23, 23)"
-  },
-  "accent": {
-    "$type": "color",
-    "$value": "rgb(239, 246, 255)"
-  },
-  "destructive": {
-    "$type": "color",
-    "$value": "rgb(220, 38, 38)"
-  },
-  "success": {
-    "$type": "color",
-    "$value": "rgb(22, 163, 74)"
-  },
-  "warning": {
-    "$type": "color",
-    "$value": "rgb(217, 119, 6)"
-  },
-  "text-success": {
-    "$type": "color",
-    "$value": "rgb(21, 128, 61)"
-  },
-  "text-warning": {
-    "$type": "color",
-    "$value": "rgb(146, 64, 14)"
-  },
-  "success-foreground": {
-    "$type": "color",
-    "$value": "rgb(10, 10, 10)"
-  },
-  "warning-foreground": {
-    "$type": "color",
-    "$value": "rgb(10, 10, 10)"
-  },
-  "primary-foreground": {
-    "$type": "color",
-    "$value": "rgb(255, 255, 255)"
-  },
-  "accent-foreground": {
-    "$type": "color",
-    "$value": "rgb(29, 78, 216)"
-  },
-  "destructive-foreground": {
-    "$type": "color",
-    "$value": "rgb(255, 255, 255)"
-  },
-  "text-destructive": {
-    "$type": "color",
-    "$value": "rgb(185, 28, 28)"
-  },
-  "text-accent": {
-    "$type": "color",
-    "$value": "rgb(37, 99, 235)"
-  },
-  "border-default": {
-    "$type": "color",
-    "$value": "rgb(229, 229, 229)"
-  },
-  "focus-ring": {
-    "$type": "color",
-    "$value": "rgb(37, 99, 235)"
-  },
-  "chart-1": {
-    "$type": "color",
-    "$value": "rgb(37, 99, 235)"
-  },
-  "chart-2": {
-    "$type": "color",
-    "$value": "rgb(17, 17, 17)"
-  },
-  "chart-3": {
-    "$type": "color",
-    "$value": "rgb(115, 115, 115)"
-  },
-  "chart-4": {
-    "$type": "color",
-    "$value": "rgb(147, 197, 253)"
-  },
-  "chart-5": {
-    "$type": "color",
-    "$value": "rgb(212, 212, 216)"
-  },
-  "chart-positive": {
-    "$type": "color",
-    "$value": "rgb(21, 128, 61)"
-  },
-  "chart-negative": {
-    "$type": "color",
-    "$value": "rgb(220, 38, 38)"
-  },
-  "chart-neutral": {
-    "$type": "color",
-    "$value": "rgb(115, 115, 115)"
-  },
-  "overlay-scrim": {
-    "$type": "color",
-    "$value": "rgb(0, 0, 0)"
-  }
-}

package/src/styles/tokens/style-dictionary.dark-class.json

@@ -1,16 +0,0 @@
-{
-  "source": ["src/styles/tokens/source/dark.tokens.json"],
-  "platforms": {
-    "css": {
-      "transformGroup": "css",
-      "buildPath": "src/styles/tokens/generated/",
-      "files": [
-        {
-          "destination": "dark-class.css",
-          "format": "css/variables",
-          "options": { "selector": ":root.dark" }
-        }
-      ]
-    }
-  }
-}

package/src/styles/tokens/style-dictionary.dark-storybook.json

@@ -1,16 +0,0 @@
-{
-  "source": ["src/styles/tokens/source/dark.tokens.json"],
-  "platforms": {
-    "css": {
-      "transformGroup": "css",
-      "buildPath": ".storybook/generated/",
-      "files": [
-        {
-          "destination": "dark-theme-class.css",
-          "format": "css/variables",
-          "options": { "selector": ":root.storybook-theme-dark" }
-        }
-      ]
-    }
-  }
-}

package/src/styles/tokens/style-dictionary.dark.json

@@ -1,21 +0,0 @@
-{
-  "source": ["src/styles/tokens/source/dark.tokens.json"],
-  "platforms": {
-    "css": {
-      "transformGroup": "css",
-      "buildPath": "src/styles/tokens/generated/",
-      "files": [{ "destination": "dark.css", "format": "css/variables" }]
-    },
-    "typescript": {
-      "transformGroup": "js",
-      "buildPath": "src/styles/tokens/generated/",
-      "files": [
-        {
-          "destination": "dark.colors.generated.ts",
-          "format": "javascript/esm",
-          "options": { "minify": true }
-        }
-      ]
-    }
-  }
-}

package/src/styles/tokens/style-dictionary.foundations.json

@@ -1,21 +0,0 @@
-{
-  "source": ["src/styles/tokens/source/foundations.tokens.json"],
-  "platforms": {
-    "css": {
-      "transformGroup": "css",
-      "buildPath": "src/styles/tokens/generated/",
-      "files": [{ "destination": "foundations.css", "format": "css/variables" }]
-    },
-    "typescript": {
-      "transformGroup": "js",
-      "buildPath": "src/styles/tokens/generated/",
-      "files": [
-        {
-          "destination": "foundations.generated.ts",
-          "format": "javascript/esm",
-          "options": { "minify": true }
-        }
-      ]
-    }
-  }
-}

package/src/styles/tokens/style-dictionary.light-storybook.json

@@ -1,16 +0,0 @@
-{
-  "source": ["src/styles/tokens/source/light.tokens.json"],
-  "platforms": {
-    "css": {
-      "transformGroup": "css",
-      "buildPath": ".storybook/generated/",
-      "files": [
-        {
-          "destination": "light-theme-class.css",
-          "format": "css/variables",
-          "options": { "selector": ":root.storybook-theme-light" }
-        }
-      ]
-    }
-  }
-}

package/src/styles/tokens/style-dictionary.light.json

@@ -1,21 +0,0 @@
-{
-  "source": ["src/styles/tokens/source/light.tokens.json"],
-  "platforms": {
-    "css": {
-      "transformGroup": "css",
-      "buildPath": "src/styles/tokens/generated/",
-      "files": [{ "destination": "light.css", "format": "css/variables" }]
-    },
-    "typescript": {
-      "transformGroup": "js",
-      "buildPath": "src/styles/tokens/generated/",
-      "files": [
-        {
-          "destination": "light.colors.generated.ts",
-          "format": "javascript/esm",
-          "options": { "minify": true }
-        }
-      ]
-    }
-  }
-}

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

@@ -1,157 +0,0 @@
-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/translations/en.ts

@@ -1,34 +0,0 @@
-export const UI_TRANSLATIONS_EN = {
-  auth: {
-    emailEntry: {
-      title: "Sign in",
-      helper: "Enter your email to continue.",
-      emailPlaceholder: "you@example.com",
-      emailLabel: "Email address",
-      submitButton: "Continue",
-      submitButtonLoading: "Sending...",
-      passkeyButton: "Use passkey",
-      passkeyLoadingButton: "Connecting...",
-      emailRequiredError: "Email is required.",
-      emailInvalidError: "Enter a valid email address.",
-      sendFailedError: "Unable to send verification code.",
-    },
-    otpVerification: {
-      title: "Verify",
-      helper: "Code sent to {{email}}.",
-      codeLabel: "Verification code",
-      verifyButton: "Verify",
-      verifyButtonLoading: "Verifying...",
-      resendButton: "Resend code",
-      resendButtonLoading: "Resending...",
-      changeEmailLink: "Use a different email",
-      codeRequiredError: "Code is required.",
-      codeLengthError: "Code must be 6 digits.",
-      verifyFailedError: "There was a problem signing in. Our team is working on it.",
-      resendFailedError: "Unable to resend verification code.",
-    },
-    passkey: {
-      genericError: "Passkey sign-in failed.",
-    },
-  },
-} as const;

package/src/translations/index.ts

@@ -1,32 +0,0 @@
-import { UI_TRANSLATIONS_EN } from "./en";
-
-type TranslationValue = string | number | boolean;
-type TranslationOptions = Record<string, TranslationValue>;
-
-function getTranslationValue(key: string): unknown {
-  return key.split(".").reduce<unknown>((value, part) => {
-    if (value && typeof value === "object" && part in value) {
-      return (value as Record<string, unknown>)[part];
-    }
-
-    return undefined;
-  }, UI_TRANSLATIONS_EN);
-}
-
-export function registerUiTranslations() {
-  return UI_TRANSLATIONS_EN;
-}
-
-export function translateUi(key: string, options?: TranslationOptions) {
-  const value = getTranslationValue(key);
-  if (typeof value !== "string") {
-    return key;
-  }
-
-  return value.replace(/{{\s*([a-zA-Z0-9_]+)\s*}}/g, (_, token: string) => {
-    const replacement = options?.[token];
-    return replacement === undefined ? "" : String(replacement);
-  });
-}
-
-export { UI_TRANSLATIONS_EN };

package/src/types/upload.ts

@@ -1,42 +0,0 @@
-// ============================================================================
-// File Processing Types
-// ============================================================================
-
-/**
- * Processed file from server-side file processing
- */
-interface ProcessedFile {
-  id: string;
-  originalName: string;
-  type: "image" | "document" | "audio" | "video" | "unknown";
-  mimetype: string;
-  size: number;
-  content?: string;
-  textContent?: string;
-  metadata?: Record<string, unknown>;
-  thumbnail?: string;
-  duration?: number;
-  transcription?: string;
-}
-
-/**
- * Successfully uploaded file (API response)
- */
-export interface UploadedFile extends ProcessedFile {
-  url: string;
-  uploadedAt: Date;
-  vectorIds?: string[];
-}
-
-export interface FailedUpload {
-  name: string;
-  error: string;
-}
-
-export interface UploadResponse {
-  success: boolean;
-  files: UploadedFile[];
-  failed: FailedUpload[];
-  message: string;
-  error?: string;
-}