@ponti-studios/ui 2.0.1 → 3.0.0

package/src/styles/tokens/generated/foundations.generated.ts

@@ -1,454 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export default {
-  spacing: "0.25rem",
-  "spacing-scale": {
-    0: "0rem",
-    1: "0.25rem",
-    2: "0.5rem",
-    3: "0.75rem",
-    4: "1rem",
-    5: "1.25rem",
-    6: "1.5rem",
-    7: "1.75rem",
-    8: "2rem",
-    9: "2.25rem",
-    10: "2.5rem",
-    11: "2.75rem",
-    12: "3rem",
-    14: "3.5rem",
-    16: "4rem",
-    20: "5rem",
-    24: "6rem",
-    28: "7rem",
-    32: "8rem",
-    36: "9rem",
-    40: "10rem",
-    44: "11rem",
-    48: "12rem",
-    52: "13rem",
-    56: "14rem",
-    60: "15rem",
-    64: "16rem",
-    72: "18rem",
-    80: "20rem",
-    96: "24rem",
-    px: "1px",
-    "0-5": "0.125rem",
-    "1-5": "0.375rem",
-    "2-5": "0.625rem",
-    "3-5": "0.875rem",
-  },
-  font: {
-    sans: [
-      "Geist",
-      "system-ui",
-      "-apple-system",
-      "BlinkMacSystemFont",
-      "Segoe UI",
-      "Roboto",
-      "Helvetica Neue",
-      "Noto Sans",
-      "Arial",
-      "sans-serif",
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol",
-      "Noto Color Emoji",
-    ],
-    serif: [
-      "system-ui",
-      "-apple-system",
-      "BlinkMacSystemFont",
-      "Segoe UI",
-      "Roboto",
-      "Helvetica Neue",
-      "Noto Sans",
-      "Arial",
-      "sans-serif",
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol",
-      "Noto Color Emoji",
-    ],
-    mono: [
-      "Geist Mono",
-      "ui-monospace",
-      "SFMono-Regular",
-      "Menlo",
-      "Monaco",
-      "Consolas",
-      "Liberation Mono",
-      "Courier New",
-      "monospace",
-    ],
-  },
-  text: {
-    xs: "0.75rem",
-    sm: "0.875rem",
-    base: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "1.875rem",
-    "4xl": "2.25rem",
-    "5xl": "3rem",
-    "6xl": "3.75rem",
-    "7xl": "4.5rem",
-    "8xl": "6rem",
-    "9xl": "8rem",
-  },
-  "text-line-height": {
-    xs: 1.3333333333,
-    sm: 1.4285714286,
-    base: 1.5,
-    lg: 1.5555555556,
-    xl: 1.4,
-    "2xl": 1.3333333333,
-    "3xl": 1.2,
-    "4xl": 1.1111111111,
-    "5xl": 1,
-    "6xl": 1,
-    "7xl": 1,
-    "8xl": 1,
-    "9xl": 1,
-  },
-  "font-weight": {
-    thin: 100,
-    extralight: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900,
-  },
-  tracking: {
-    tighter: "-0.05em",
-    tight: "-0.025em",
-    normal: "0em",
-    wide: "0.025em",
-    wider: "0.05em",
-    widest: "0.1em",
-  },
-  leading: {
-    tight: 1.25,
-    snug: 1.375,
-    normal: 1.5,
-    relaxed: 1.625,
-    loose: 2,
-  },
-  radius: {
-    xs: "0.125rem",
-    sm: "0.25rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    xl: "0.75rem",
-    "2xl": "1rem",
-    "3xl": "1.5rem",
-    "4xl": "2rem",
-    full: "9999px",
-  },
-  shadow: {
-    "2xs": [
-      {
-        color: "rgb(0 0 0 / 0.05)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 1,
-          unit: "px",
-        },
-        blur: {
-          value: 0,
-          unit: "px",
-        },
-        spread: {
-          value: 0,
-          unit: "px",
-        },
-      },
-    ],
-    xs: [
-      {
-        color: "rgb(0 0 0 / 0.05)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 1,
-          unit: "px",
-        },
-        blur: {
-          value: 2,
-          unit: "px",
-        },
-        spread: {
-          value: 0,
-          unit: "px",
-        },
-      },
-    ],
-    sm: [
-      {
-        color: "rgb(0 0 0 / 0.1)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 1,
-          unit: "px",
-        },
-        blur: {
-          value: 3,
-          unit: "px",
-        },
-        spread: {
-          value: 0,
-          unit: "px",
-        },
-      },
-      {
-        color: "rgb(0 0 0 / 0.1)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 1,
-          unit: "px",
-        },
-        blur: {
-          value: 2,
-          unit: "px",
-        },
-        spread: {
-          value: -1,
-          unit: "px",
-        },
-      },
-    ],
-    md: [
-      {
-        color: "rgb(0 0 0 / 0.1)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 4,
-          unit: "px",
-        },
-        blur: {
-          value: 6,
-          unit: "px",
-        },
-        spread: {
-          value: -1,
-          unit: "px",
-        },
-      },
-      {
-        color: "rgb(0 0 0 / 0.1)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 2,
-          unit: "px",
-        },
-        blur: {
-          value: 4,
-          unit: "px",
-        },
-        spread: {
-          value: -2,
-          unit: "px",
-        },
-      },
-    ],
-    lg: [
-      {
-        color: "rgb(0 0 0 / 0.1)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 10,
-          unit: "px",
-        },
-        blur: {
-          value: 15,
-          unit: "px",
-        },
-        spread: {
-          value: -3,
-          unit: "px",
-        },
-      },
-      {
-        color: "rgb(0 0 0 / 0.1)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 4,
-          unit: "px",
-        },
-        blur: {
-          value: 6,
-          unit: "px",
-        },
-        spread: {
-          value: -4,
-          unit: "px",
-        },
-      },
-    ],
-    xl: [
-      {
-        color: "rgb(0 0 0 / 0.1)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 20,
-          unit: "px",
-        },
-        blur: {
-          value: 25,
-          unit: "px",
-        },
-        spread: {
-          value: -5,
-          unit: "px",
-        },
-      },
-      {
-        color: "rgb(0 0 0 / 0.1)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 8,
-          unit: "px",
-        },
-        blur: {
-          value: 10,
-          unit: "px",
-        },
-        spread: {
-          value: -6,
-          unit: "px",
-        },
-      },
-    ],
-    "2xl": [
-      {
-        color: "rgb(0 0 0 / 0.25)",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 25,
-          unit: "px",
-        },
-        blur: {
-          value: 50,
-          unit: "px",
-        },
-        spread: {
-          value: -12,
-          unit: "px",
-        },
-      },
-    ],
-    none: [
-      {
-        color: "transparent",
-        offsetX: {
-          value: 0,
-          unit: "px",
-        },
-        offsetY: {
-          value: 0,
-          unit: "px",
-        },
-        blur: {
-          value: 0,
-          unit: "px",
-        },
-        spread: {
-          value: 0,
-          unit: "px",
-        },
-      },
-    ],
-  },
-  breakpoint: {
-    sm: "40rem",
-    md: "48rem",
-    lg: "64rem",
-    xl: "80rem",
-    "2xl": "96rem",
-  },
-  container: {
-    "3xs": "16rem",
-    "2xs": "18rem",
-    xs: "20rem",
-    sm: "24rem",
-    md: "28rem",
-    lg: "32rem",
-    xl: "36rem",
-    "2xl": "42rem",
-    "3xl": "48rem",
-    "4xl": "56rem",
-    "5xl": "64rem",
-    "6xl": "72rem",
-    "7xl": "80rem",
-  },
-  "z-index": {
-    0: 0,
-    10: 10,
-    20: 20,
-    30: 30,
-    40: 40,
-    50: 50,
-    auto: "auto",
-  },
-  ease: {
-    in: [0.4, 0, 1, 1],
-    out: [0, 0, 0.2, 1],
-    "in-out": [0.4, 0, 0.2, 1],
-    drawer: [0.32, 0.72, 0, 1],
-  },
-  duration: {
-    75: "75ms",
-    100: "100ms",
-    150: "150ms",
-    200: "200ms",
-    300: "300ms",
-    500: "500ms",
-    700: "700ms",
-    1000: "1000ms",
-  },
-  animate: {
-    spin: "spin 1s linear infinite",
-    ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
-    pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-    bounce: "bounce 1s infinite",
-  },
-};

package/src/styles/tokens/generated/light.colors.generated.ts

@@ -1,39 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export default {
-  background: "#ffffff",
-  card: "#ffffff",
-  secondary: "#f5f5f5",
-  popover: "#ffffff",
-  muted: "#fafafa",
-  "text-primary": "#111111",
-  "text-secondary": "#6b6b6b",
-  tertiary: "#6b6b6b",
-  primary: "#171717",
-  accent: "#eff6ff",
-  destructive: "#dc2626",
-  success: "#16a34a",
-  warning: "#d97706",
-  "text-success": "#15803d",
-  "text-warning": "#92400e",
-  "success-foreground": "#0a0a0a",
-  "warning-foreground": "#0a0a0a",
-  "primary-foreground": "#ffffff",
-  "accent-foreground": "#1d4ed8",
-  "destructive-foreground": "#ffffff",
-  "text-destructive": "#b91c1c",
-  "text-accent": "#2563eb",
-  "border-default": "#e5e5e5",
-  "focus-ring": "#2563eb",
-  "chart-1": "#2563eb",
-  "chart-2": "#111111",
-  "chart-3": "#737373",
-  "chart-4": "#93c5fd",
-  "chart-5": "#d4d4d8",
-  "chart-positive": "#15803d",
-  "chart-negative": "#dc2626",
-  "chart-neutral": "#737373",
-  "overlay-scrim": "#000000",
-};

package/src/styles/tokens/generated/light.css

@@ -1,39 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --background: #ffffff;
-  --card: #ffffff;
-  --secondary: #f5f5f5;
-  --popover: #ffffff;
-  --muted: #fafafa;
-  --text-primary: #111111;
-  --text-secondary: #6b6b6b;
-  --tertiary: #6b6b6b;
-  --primary: #171717;
-  --accent: #eff6ff;
-  --destructive: #dc2626;
-  --success: #16a34a;
-  --warning: #d97706;
-  --text-success: #15803d;
-  --text-warning: #92400e;
-  --success-foreground: #0a0a0a;
-  --warning-foreground: #0a0a0a;
-  --primary-foreground: #ffffff;
-  --accent-foreground: #1d4ed8;
-  --destructive-foreground: #ffffff;
-  --text-destructive: #b91c1c;
-  --text-accent: #2563eb;
-  --border-default: #e5e5e5;
-  --focus-ring: #2563eb;
-  --chart-1: #2563eb;
-  --chart-2: #111111;
-  --chart-3: #737373;
-  --chart-4: #93c5fd;
-  --chart-5: #d4d4d8;
-  --chart-positive: #15803d;
-  --chart-negative: #dc2626;
-  --chart-neutral: #737373;
-  --overlay-scrim: #000000;
-}

package/src/styles/tokens/index.ts

@@ -1,70 +0,0 @@
-import darkTokens from "./generated/dark.colors.generated";
-import foundations from "./generated/foundations.generated";
-import lightTokens from "./generated/light.colors.generated";
-
-const toPixels = (value: string) => {
-  if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
-  if (value.endsWith("px")) return Number.parseFloat(value);
-  throw new Error(`Unsupported foundation dimension: ${value}`);
-};
-
-const toMilliseconds = (value: string) => Number.parseFloat(value);
-const toBezier = (value: number[]) => `cubic-bezier(${value.join(", ")})`;
-type NormalizedSpacingKey<Key> = Key extends number
-  ? `${Key}`
-  : Key extends `${infer Whole}-${infer Fraction}`
-    ? `${Whole}.${Fraction}`
-    : Key;
-export type SpacingToken = NormalizedSpacingKey<keyof (typeof foundations)["spacing-scale"]>;
-
-export const colorTokenNames = Object.keys(lightTokens) as Array<keyof typeof lightTokens>;
-export type ColorToken = keyof typeof lightTokens;
-export type ColorMode = "light" | "dark";
-export type ColorTheme = Readonly<Record<ColorToken, string>>;
-
-export const colorThemes = {
-  light: lightTokens,
-  dark: darkTokens,
-} as const satisfies Record<ColorMode, ColorTheme>;
-
-export const spacing = Object.fromEntries(
-  Object.entries(foundations["spacing-scale"]).map(([key, value]) => [
-    key.replace("-", "."),
-    toPixels(value),
-  ]),
-) as Record<SpacingToken, number>;
-
-export const fontFamilies = Object.fromEntries(
-  Object.entries(foundations.font).map(([key, value]) => [key, value.join(", ")]),
-) as Record<keyof typeof foundations.font, string>;
-
-export const textSizes = Object.fromEntries(
-  Object.entries(foundations.text).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof typeof foundations.text, number>;
-export const textLineHeights = foundations["text-line-height"];
-export const fontWeights = Object.fromEntries(
-  Object.entries(foundations["font-weight"]).map(([key, value]) => [key, String(value)]),
-) as Record<keyof (typeof foundations)["font-weight"], string>;
-export const tracking = foundations.tracking;
-export const leading = foundations.leading;
-export const radii = Object.fromEntries(
-  Object.entries(foundations.radius).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof typeof foundations.radius, number>;
-export const shadows = foundations.shadow;
-export const breakpoints = foundations.breakpoint;
-export const containers = foundations.container;
-export const zIndices = foundations["z-index"];
-export const easing = Object.fromEntries(
-  Object.entries(foundations.ease).map(([key, value]) => [key, toBezier(value)]),
-) as Record<keyof typeof foundations.ease, string>;
-export const transitionDurations = Object.fromEntries(
-  Object.entries(foundations.duration).map(([key, value]) => [key, toMilliseconds(value)]),
-) as Record<keyof typeof foundations.duration, number>;
-export const animations = foundations.animate;
-
-export type RadiusToken = keyof typeof radii;
-export type TextSizeToken = keyof typeof textSizes;
-export type FontWeightToken = keyof typeof fontWeights;
-export type TrackingToken = keyof typeof tracking;
-export type LeadingToken = keyof typeof leading;
-export type ShadowToken = keyof typeof shadows;

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

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-const meta = {
-  title: "Foundations/Layout Rhythm",
-  parameters: { layout: "fullscreen" },
-} satisfies Meta;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const PageShell: Story = {
-  render: () => (
-    <main className="page-shell bg-background text-foreground">
-      <header className="flex flex-col gap-4">
-        <p className="text-muted-foreground text-sm">Page shell</p>
-        <h1 className="text-4xl font-semibold tracking-tight">
-          A consistent starting point for content pages.
-        </h1>
-      </header>
-      <section className="flex flex-col gap-4">
-        <h2 className="text-2xl font-semibold">Section rhythm</h2>
-        <p className="text-muted-foreground max-w-2xl text-base">
-          Layout helpers compose standard Tailwind spacing and semantic colors.
-        </p>
-      </section>
-    </main>
-  ),
-};
-
-export const ListRows: Story = {
-  render: () => (
-    <main className="page-shell bg-background text-foreground">
-      <div className="flex flex-col gap-4">
-        <h1 className="text-4xl font-semibold tracking-tight">List row rhythm</h1>
-        <div className="divide-border border-border divide-y border-b">
-          {["A compact row", "A readable row", "A responsive row"].map((title, index) => (
-            <div key={title} className="flex gap-4 py-6">
-              <span className="text-muted-foreground font-mono text-sm">0{index + 1}</span>
-              <div className="flex min-w-0 flex-1 flex-col gap-1">
-                <h2 className="text-lg font-semibold">{title}</h2>
-                <p className="text-muted-foreground text-sm">
-                  Consistent padding keeps scanning calm.
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </main>
-  ),
-};