@ponti-studios/ui 0.4.1 → 0.4.3

package/src/styles/tokens/scripts/check-source.mjs

@@ -0,0 +1,43 @@
+import { fileURLToPath } from "node:url";
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+
+const sourceDirectory = fileURLToPath(new URL("../../../", import.meta.url));
+const sourceFiles = [];
+
+function collectFiles(directory) {
+  for (const entry of readdirSync(directory)) {
+    const path = join(directory, entry);
+    if (entry === "generated" && statSync(path).isDirectory()) continue;
+    if (statSync(path).isDirectory()) collectFiles(path);
+    else if (/\.(css|ts|tsx)$/.test(entry)) sourceFiles.push(path);
+  }
+}
+
+collectFiles(sourceDirectory);
+
+const checks = [
+  { name: "Radix imports", pattern: /@radix-ui\// },
+  { name: "legacy semantic utility classes", pattern: /(?:\bbg-canvas\b|\bborder-default\b)/ },
+  {
+    name: "invalid shadcn semantic classes",
+    pattern: /(?:text|bg|border)-foreground-foreground\b/,
+  },
+];
+const failures = [];
+
+for (const file of sourceFiles) {
+  const source = readFileSync(file, "utf8");
+  for (const check of checks) {
+    if (check.name === "legacy semantic utility classes" && file.endsWith(".css")) continue;
+    if (check.pattern.test(source))
+      failures.push(`${check.name}: ${relative(sourceDirectory, file)}`);
+  }
+}
+
+if (failures.length > 0) {
+  console.error(failures.join("\n"));
+  process.exit(1);
+}
+
+console.log(`Source contract passed (${sourceFiles.length} source files checked).`);

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

@@ -0,0 +1,105 @@
+{
+  "$extensions": {
+    "org.ponti.license": "MIT"
+  },
+  "background": {
+    "$type": "color",
+    "$value": "rgb(17, 17, 19)"
+  },
+  "card": {
+    "$type": "color",
+    "$value": "rgb(24, 25, 27)"
+  },
+  "popover": {
+    "$type": "color",
+    "$value": "rgb(33, 34, 37)"
+  },
+  "muted": {
+    "$type": "color",
+    "$value": "rgb(24, 25, 27)"
+  },
+  "text-primary": {
+    "$type": "color",
+    "$value": "rgb(237, 238, 240)"
+  },
+  "text-secondary": {
+    "$type": "color",
+    "$value": "rgb(176, 180, 186)"
+  },
+  "tertiary": {
+    "$type": "color",
+    "$value": "rgb(119, 123, 132)"
+  },
+  "primary": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "destructive": {
+    "$type": "color",
+    "$value": "rgb(206, 44, 49)"
+  },
+  "success": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "warning": {
+    "$type": "color",
+    "$value": "rgb(255, 197, 61)"
+  },
+  "primary-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "destructive-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "text-destructive": {
+    "$type": "color",
+    "$value": "rgb(255, 149, 146)"
+  },
+  "border-default": {
+    "$type": "color",
+    "$value": "rgb(67, 72, 78)"
+  },
+  "focus-ring": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-1": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-2": {
+    "$type": "color",
+    "$value": "rgb(110, 86, 207)"
+  },
+  "chart-3": {
+    "$type": "color",
+    "$value": "rgb(18, 165, 148)"
+  },
+  "chart-4": {
+    "$type": "color",
+    "$value": "rgb(247, 107, 21)"
+  },
+  "chart-5": {
+    "$type": "color",
+    "$value": "rgb(105, 110, 119)"
+  },
+  "chart-positive": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "chart-negative": {
+    "$type": "color",
+    "$value": "rgb(229, 72, 77)"
+  },
+  "chart-neutral": {
+    "$type": "color",
+    "$value": "rgb(90, 97, 105)"
+  },
+  "overlay-scrim": {
+    "$type": "color",
+    "$value": "rgb(0, 0, 0)"
+  }
+}

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

@@ -0,0 +1,341 @@
+{
+  "$description": "Non-color foundations copied from tailwindcss@4.3.3/theme.css. Keep this file value-for-value aligned with Tailwind.",
+  "spacing": { "$type": "dimension", "$value": { "value": 0.25, "unit": "rem" } },
+  "spacing-scale": {
+    "$type": "dimension",
+    "0": { "$value": { "value": 0, "unit": "rem" } },
+    "px": { "$value": { "value": 1, "unit": "px" } },
+    "0-5": { "$value": { "value": 0.125, "unit": "rem" } },
+    "1": { "$value": { "value": 0.25, "unit": "rem" } },
+    "1-5": { "$value": { "value": 0.375, "unit": "rem" } },
+    "2": { "$value": { "value": 0.5, "unit": "rem" } },
+    "2-5": { "$value": { "value": 0.625, "unit": "rem" } },
+    "3": { "$value": { "value": 0.75, "unit": "rem" } },
+    "3-5": { "$value": { "value": 0.875, "unit": "rem" } },
+    "4": { "$value": { "value": 1, "unit": "rem" } },
+    "5": { "$value": { "value": 1.25, "unit": "rem" } },
+    "6": { "$value": { "value": 1.5, "unit": "rem" } },
+    "7": { "$value": { "value": 1.75, "unit": "rem" } },
+    "8": { "$value": { "value": 2, "unit": "rem" } },
+    "9": { "$value": { "value": 2.25, "unit": "rem" } },
+    "10": { "$value": { "value": 2.5, "unit": "rem" } },
+    "11": { "$value": { "value": 2.75, "unit": "rem" } },
+    "12": { "$value": { "value": 3, "unit": "rem" } },
+    "14": { "$value": { "value": 3.5, "unit": "rem" } },
+    "16": { "$value": { "value": 4, "unit": "rem" } },
+    "20": { "$value": { "value": 5, "unit": "rem" } },
+    "24": { "$value": { "value": 6, "unit": "rem" } },
+    "28": { "$value": { "value": 7, "unit": "rem" } },
+    "32": { "$value": { "value": 8, "unit": "rem" } },
+    "36": { "$value": { "value": 9, "unit": "rem" } },
+    "40": { "$value": { "value": 10, "unit": "rem" } },
+    "44": { "$value": { "value": 11, "unit": "rem" } },
+    "48": { "$value": { "value": 12, "unit": "rem" } },
+    "52": { "$value": { "value": 13, "unit": "rem" } },
+    "56": { "$value": { "value": 14, "unit": "rem" } },
+    "60": { "$value": { "value": 15, "unit": "rem" } },
+    "64": { "$value": { "value": 16, "unit": "rem" } },
+    "72": { "$value": { "value": 18, "unit": "rem" } },
+    "80": { "$value": { "value": 20, "unit": "rem" } },
+    "96": { "$value": { "value": 24, "unit": "rem" } }
+  },
+  "font": {
+    "$type": "fontFamily",
+    "sans": {
+      "$value": [
+        "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": {
+      "$value": [
+        "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": {
+      "$value": [
+        "ui-monospace",
+        "SFMono-Regular",
+        "Menlo",
+        "Monaco",
+        "Consolas",
+        "Liberation Mono",
+        "Courier New",
+        "monospace"
+      ]
+    }
+  },
+  "text": {
+    "$type": "dimension",
+    "xs": { "$value": { "value": 0.75, "unit": "rem" } },
+    "sm": { "$value": { "value": 0.875, "unit": "rem" } },
+    "base": { "$value": { "value": 1, "unit": "rem" } },
+    "lg": { "$value": { "value": 1.125, "unit": "rem" } },
+    "xl": { "$value": { "value": 1.25, "unit": "rem" } },
+    "2xl": { "$value": { "value": 1.5, "unit": "rem" } },
+    "3xl": { "$value": { "value": 1.875, "unit": "rem" } },
+    "4xl": { "$value": { "value": 2.25, "unit": "rem" } },
+    "5xl": { "$value": { "value": 3, "unit": "rem" } },
+    "6xl": { "$value": { "value": 3.75, "unit": "rem" } },
+    "7xl": { "$value": { "value": 4.5, "unit": "rem" } },
+    "8xl": { "$value": { "value": 6, "unit": "rem" } },
+    "9xl": { "$value": { "value": 8, "unit": "rem" } }
+  },
+  "text-line-height": {
+    "$type": "number",
+    "xs": { "$value": 1.3333333333 },
+    "sm": { "$value": 1.4285714286 },
+    "base": { "$value": 1.5 },
+    "lg": { "$value": 1.5555555556 },
+    "xl": { "$value": 1.4 },
+    "2xl": { "$value": 1.3333333333 },
+    "3xl": { "$value": 1.2 },
+    "4xl": { "$value": 1.1111111111 },
+    "5xl": { "$value": 1 },
+    "6xl": { "$value": 1 },
+    "7xl": { "$value": 1 },
+    "8xl": { "$value": 1 },
+    "9xl": { "$value": 1 }
+  },
+  "font-weight": {
+    "$type": "fontWeight",
+    "thin": { "$value": 100 },
+    "extralight": { "$value": 200 },
+    "light": { "$value": 300 },
+    "normal": { "$value": 400 },
+    "medium": { "$value": 500 },
+    "semibold": { "$value": 600 },
+    "bold": { "$value": 700 },
+    "extrabold": { "$value": 800 },
+    "black": { "$value": 900 }
+  },
+  "tracking": {
+    "$type": "dimension",
+    "tighter": { "$value": { "value": -0.05, "unit": "em" } },
+    "tight": { "$value": { "value": -0.025, "unit": "em" } },
+    "normal": { "$value": { "value": 0, "unit": "em" } },
+    "wide": { "$value": { "value": 0.025, "unit": "em" } },
+    "wider": { "$value": { "value": 0.05, "unit": "em" } },
+    "widest": { "$value": { "value": 0.1, "unit": "em" } }
+  },
+  "leading": {
+    "$type": "number",
+    "tight": { "$value": 1.25 },
+    "snug": { "$value": 1.375 },
+    "normal": { "$value": 1.5 },
+    "relaxed": { "$value": 1.625 },
+    "loose": { "$value": 2 }
+  },
+  "radius": {
+    "$type": "dimension",
+    "xs": { "$value": { "value": 0.125, "unit": "rem" } },
+    "sm": { "$value": { "value": 0.25, "unit": "rem" } },
+    "md": { "$value": { "value": 0.375, "unit": "rem" } },
+    "lg": { "$value": { "value": 0.5, "unit": "rem" } },
+    "xl": { "$value": { "value": 0.75, "unit": "rem" } },
+    "2xl": { "$value": { "value": 1, "unit": "rem" } },
+    "3xl": { "$value": { "value": 1.5, "unit": "rem" } },
+    "4xl": { "$value": { "value": 2, "unit": "rem" } },
+    "full": { "$value": { "value": 9999, "unit": "px" } }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "2xs": {
+      "$value": [
+        {
+          "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": {
+      "$value": [
+        {
+          "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": {
+      "$value": [
+        {
+          "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": {
+      "$value": [
+        {
+          "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": {
+      "$value": [
+        {
+          "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": {
+      "$value": [
+        {
+          "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": {
+      "$value": [
+        {
+          "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": {
+      "$value": [
+        {
+          "color": "transparent",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 0, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" }
+        }
+      ]
+    }
+  },
+  "breakpoint": {
+    "$type": "dimension",
+    "sm": { "$value": { "value": 40, "unit": "rem" } },
+    "md": { "$value": { "value": 48, "unit": "rem" } },
+    "lg": { "$value": { "value": 64, "unit": "rem" } },
+    "xl": { "$value": { "value": 80, "unit": "rem" } },
+    "2xl": { "$value": { "value": 96, "unit": "rem" } }
+  },
+  "container": {
+    "$type": "dimension",
+    "3xs": { "$value": { "value": 16, "unit": "rem" } },
+    "2xs": { "$value": { "value": 18, "unit": "rem" } },
+    "xs": { "$value": { "value": 20, "unit": "rem" } },
+    "sm": { "$value": { "value": 24, "unit": "rem" } },
+    "md": { "$value": { "value": 28, "unit": "rem" } },
+    "lg": { "$value": { "value": 32, "unit": "rem" } },
+    "xl": { "$value": { "value": 36, "unit": "rem" } },
+    "2xl": { "$value": { "value": 42, "unit": "rem" } },
+    "3xl": { "$value": { "value": 48, "unit": "rem" } },
+    "4xl": { "$value": { "value": 56, "unit": "rem" } },
+    "5xl": { "$value": { "value": 64, "unit": "rem" } },
+    "6xl": { "$value": { "value": 72, "unit": "rem" } },
+    "7xl": { "$value": { "value": 80, "unit": "rem" } }
+  },
+  "z-index": {
+    "$type": "number",
+    "auto": { "$value": "auto" },
+    "0": { "$value": 0 },
+    "10": { "$value": 10 },
+    "20": { "$value": 20 },
+    "30": { "$value": 30 },
+    "40": { "$value": 40 },
+    "50": { "$value": 50 }
+  },
+  "ease": {
+    "$type": "cubicBezier",
+    "in": { "$value": [0.4, 0, 1, 1] },
+    "out": { "$value": [0, 0, 0.2, 1] },
+    "in-out": { "$value": [0.4, 0, 0.2, 1] }
+  },
+  "duration": {
+    "$type": "duration",
+    "75": { "$value": "75ms" },
+    "100": { "$value": "100ms" },
+    "150": { "$value": "150ms" },
+    "200": { "$value": "200ms" },
+    "300": { "$value": "300ms" },
+    "500": { "$value": "500ms" },
+    "700": { "$value": "700ms" },
+    "1000": { "$value": "1000ms" }
+  },
+  "animate": {
+    "$type": "string",
+    "spin": { "$value": "spin 1s linear infinite" },
+    "ping": { "$value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" },
+    "pulse": { "$value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" },
+    "bounce": { "$value": "bounce 1s infinite" }
+  }
+}

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

@@ -0,0 +1,105 @@
+{
+  "$extensions": {
+    "org.ponti.license": "MIT"
+  },
+  "background": {
+    "$type": "color",
+    "$value": "rgb(252, 252, 253)"
+  },
+  "card": {
+    "$type": "color",
+    "$value": "rgb(249, 249, 251)"
+  },
+  "popover": {
+    "$type": "color",
+    "$value": "rgb(240, 240, 243)"
+  },
+  "muted": {
+    "$type": "color",
+    "$value": "rgb(249, 249, 251)"
+  },
+  "text-primary": {
+    "$type": "color",
+    "$value": "rgb(28, 32, 36)"
+  },
+  "text-secondary": {
+    "$type": "color",
+    "$value": "rgb(96, 100, 108)"
+  },
+  "tertiary": {
+    "$type": "color",
+    "$value": "rgb(128, 131, 141)"
+  },
+  "primary": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "destructive": {
+    "$type": "color",
+    "$value": "rgb(206, 44, 49)"
+  },
+  "success": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "warning": {
+    "$type": "color",
+    "$value": "rgb(255, 197, 61)"
+  },
+  "primary-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "destructive-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "text-destructive": {
+    "$type": "color",
+    "$value": "rgb(200, 44, 49)"
+  },
+  "border-default": {
+    "$type": "color",
+    "$value": "rgb(205, 206, 214)"
+  },
+  "focus-ring": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-1": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-2": {
+    "$type": "color",
+    "$value": "rgb(110, 86, 207)"
+  },
+  "chart-3": {
+    "$type": "color",
+    "$value": "rgb(18, 165, 148)"
+  },
+  "chart-4": {
+    "$type": "color",
+    "$value": "rgb(247, 107, 21)"
+  },
+  "chart-5": {
+    "$type": "color",
+    "$value": "rgb(139, 141, 152)"
+  },
+  "chart-positive": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "chart-negative": {
+    "$type": "color",
+    "$value": "rgb(229, 72, 77)"
+  },
+  "chart-neutral": {
+    "$type": "color",
+    "$value": "rgb(185, 187, 198)"
+  },
+  "overlay-scrim": {
+    "$type": "color",
+    "$value": "rgb(0, 0, 0)"
+  }
+}

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

@@ -0,0 +1,16 @@
+{
+  "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

@@ -0,0 +1,21 @@
+{
+  "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

@@ -0,0 +1,21 @@
+{
+  "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.json

@@ -0,0 +1,21 @@
+{
+  "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 }
+        }
+      ]
+    }
+  }
+}