@ponti-studios/ui 0.4.2 → 0.4.4

package/README.md

@@ -2,6 +2,15 @@
 
 The canonical Ponti Studios UI package. It is published from this repository to npm.
 
+## Design
+
+The design system is documented in `docs/`:
+
+- [Foundations](./docs/foundations.md) — color, spacing, radius, typography, elevation, iconography, motion tokens
+- [Primitives](./docs/primitives.md) — component contracts (variants, sizes, states)
+- [Patterns](./docs/patterns.md) — screen composition rules
+- [Review gates](./docs/review-gates.md) — pass/fail review criteria
+
 ## Release
 
 Releases are owned by [release-please](https://github.com/googleapis/release-please), not by hand-edited version numbers or manually pushed tags. The workflow is defined once, in `.github/workflows/publish-ui.yml`, and has three jobs:
@@ -43,10 +52,12 @@ CI consumers should use a secret-backed npm token with read access.
 This package has no build output — every `exports` entry resolves to a file under `src/`. Consumers are expected to transpile the package themselves (Vite, Metro, Next, etc. all do this for workspace/npm packages by default). Tailwind v4 class detection for consumers of `./styles.css` requires an `@source` directive pointing at the installed package's `src/`, e.g.
 
 ```css
+@import "tailwindcss";
+@import "@ponti-studios/ui/styles.css";
 @source "../../../node_modules/@ponti-studios/ui/src";
 ```
 
-Bundling the package would break that detection, since Tailwind can't scan generated/minified output for class names. `pnpm run build` only type-checks; it does not emit JS.
+**Important:** `./styles.css` uses `@reference "tailwindcss"` (it does not import Tailwind itself). Your project owns the `@import "tailwindcss"` — place it before the UI stylesheet. Omitting it will cause missing CSS variables (e.g. `--tw-shadow-color`) and unresolved utilities.
 
 ### `./native` subpath
 

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "private": false,
-  "description": "Shared UI component library for ponti-studios labs",
+  "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ponti-studios/labs.git",
-    "directory": "packages/ui"
+    "url": "git+https://github.com/ponti-studios/ui.git"
   },
   "files": [
     "src",
@@ -83,6 +82,7 @@
     "dev": "vite",
     "storybook": "style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json && storybook dev -p 6006",
     "check:source": "node src/styles/tokens/scripts/check-source.mjs",
+    "test": "vitest --run --config vitest.config.ts",
     "test:a11y": "vitest --run --config vitest.config.ts",
     "tokens:build": "style-dictionary build --config src/styles/tokens/style-dictionary.foundations.json && style-dictionary build --config src/styles/tokens/style-dictionary.light.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json",
     "tokens:check": "pnpm run tokens:build && node src/styles/tokens/scripts/check-foundations.mjs && git diff --exit-code -- src/styles/tokens/generated",
@@ -110,25 +110,25 @@
     "@storybook/addon-themes": "10.5.3",
     "@storybook/addon-vitest": "10.5.3",
     "@storybook/react-vite": "^10.5.3",
-    "@tailwindcss/vite": "catalog:",
-    "@types/node": "catalog:",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
     "@vitest/browser": "4.1.10",
     "@vitest/browser-playwright": "4.1.10",
-    "oxfmt": "catalog:shared",
-    "oxlint": "catalog:shared",
-    "playwright": "catalog:",
+    "oxfmt": "0.61.0",
+    "oxlint": "^1.74.0",
+    "playwright": "^1.61.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-native": "0.86.0",
     "storybook": "^10.5.3",
     "style-dictionary": "5.5.0",
-    "tailwindcss": "catalog:",
+    "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",
-    "vite": "catalog:",
-    "vitest": "catalog:"
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",

package/src/components/layout/scroll-area.stories.tsx

@@ -74,7 +74,7 @@ export const ScreenshotsGallery: Story = {
             className="flex aspect-video w-72 shrink-0 items-center justify-center overflow-hidden rounded-xl border"
             style={{ backgroundColor: item.bg }}
           >
-            <span className="text-foreground/70 text-sm">{item.label}</span>
+            <span className="text-foreground text-sm">{item.label}</span>
           </div>
         ))}
       </ScrollArea>

package/src/styles/index.css

@@ -1,4 +1,19 @@
-@import "tailwindcss";
+/*
+ * DESIGN SYSTEM STYLESHEET — @ponti-studios/ui
+ *
+ * This file provides the design tokens and shared component styles consumed
+ * by your project. It does NOT import Tailwind CSS — your project owns that.
+ *
+ * Required in your project's entry CSS BEFORE this import:
+ *
+ *   @import "tailwindcss";
+ *   @import "@ponti-studios/ui/styles.css";
+ *
+ * If you omit the Tailwind import you may see missing CSS variables
+ * (e.g., --tw-shadow-color) or utilities that fail to resolve.
+ */
+
+@reference "tailwindcss";
 @import "./tokens/generated/foundations.css";
 @import "./tokens/generated/light.css";
 @import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
@@ -128,6 +143,22 @@
   @apply flex min-h-9 flex-col justify-center gap-1;
 }
 
+.ui-flat-card {
+  @apply bg-card border-border rounded-md border p-3;
+}
+
+.ui-data-label {
+  @apply text-muted-foreground text-xs font-medium uppercase tracking-wider;
+}
+
+.ui-data-value {
+  @apply text-foreground text-base font-semibold tabular-nums;
+}
+
+.ui-eyebrow {
+  @apply text-muted-foreground text-xs font-medium uppercase tracking-widest;
+}
+
 @layer base {
   :root {
     color-scheme: light;