@podoba/react 0.0.14 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.14",
+	"version": "0.0.15",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -25,8 +25,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.14",
-		"@podoba/tailwind": "^0.0.14",
+		"@podoba/tokens": "^0.0.15",
+		"@podoba/tailwind": "^0.0.15",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/brand-page-header.tsx

@@ -116,7 +116,7 @@ export function BrandPageHeader({
 							))}
 						</nav>
 					) : null}
-					<h1 className="text-display font-medium leading-[1.12] tracking-[-0.56px] text-fg">
+					<h1 className="text-display font-medium leading-[1.12] tracking-wide text-fg">
 						{parentLink ? (
 							// gs "title to go back": muted clickable parent line above the title.
 							// `[&_a]` styles the nested router <Link> (anchor) without @app/ui

package/src/components/context-menu.tsx

@@ -126,7 +126,7 @@ const MenuItem = uic(RACMenuItem, {
 // gs `.panel`: 258px, radius 12px, 8px/6px padding, 180deg #242424→#1f1f1f
 // gradient, 0 12px 28px rgba(0,0,0,.22) shadow. No token covers the gradient/shadow.
 const panelClass =
-	'w-[258px] max-w-[calc(100vw-16px)] rounded-xl bg-gradient-to-b from-[#242424] to-[#1f1f1f] ' +
+	'w-[258px] max-w-[calc(100vw-16px)] rounded-lg bg-gradient-to-b from-[#242424] to-[#1f1f1f] ' +
 	'px-1.5 py-2 shadow-[0_12px_28px_rgba(0,0,0,0.22)] outline-none'
 const menuClass = 'grid max-h-[calc(100vh-16px)] gap-0.5 overflow-y-auto outline-none'
 
@@ -178,7 +178,7 @@ function ContextMenuBody({
 								<span className="min-w-0 flex-1 truncate">{item.label}</span>
 								{badge ? (
 									// gs `.badge`: 24px pill, #333437 bg / #c8c8ca text, 10px (text-micro).
-									<span className="ml-auto inline-flex h-6 items-center justify-center rounded-full bg-[#333437] px-3 py-0.5 text-micro font-medium leading-5 tracking-[-0.2px] text-[#c8c8ca]">
+									<span className="ml-auto inline-flex h-6 items-center justify-center rounded-full bg-[#333437] px-3 py-0.5 text-micro font-medium leading-5 tracking-tight text-[#c8c8ca]">
 										{badge}
 									</span>
 								) : null}

package/src/components/cta-pill.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+
+/**
+ * CtaPill — the gs Brand Core hero CTA: a GS-green bar reading "Let's create
+ * something" (the middle word emphasised) with an action control on the right.
+ *
+ * The copy is three fragments (`lead` · `emphasis` · `tail`) so a consumer can
+ * translate each per-locale while keeping the middle-word highlight. Presentational
+ * only (hard rule #1): every string arrives via props — no i18n, no domain data.
+ *
+ * a11y NOTE: the background is the light brand-green (#6eddb1); the emphasised word is
+ * rendered WHITE per the gs design — white-on-green is ~1.66:1, below WCAG AA, so it
+ * reads as a decorative highlight (it also carries a bold weight), not load-bearing
+ * copy. The surrounding text stays on the dark `fg` (~10:1).
+ */
+export interface CtaPillProps {
+	/** Regular lead-in before the emphasised word (e.g. "Let's"). */
+	lead: ReactNode
+	/** The emphasised bold, white middle word (e.g. "create"). */
+	emphasis: ReactNode
+	/** Regular trailing text after the emphasis (e.g. "something"). */
+	tail: ReactNode
+	/** Right-side action control (e.g. a Create button). */
+	children: ReactNode
+}
+
+export function CtaPill({ lead, emphasis, tail, children }: CtaPillProps) {
+	return (
+		<div className="flex min-w-[560px] items-center justify-between gap-4 rounded-lg bg-brand-secondary px-6 py-4">
+			<p className="text-subtitle font-medium leading-[22px] tracking-normal text-fg">
+				{lead} <span className="font-semibold text-white">{emphasis}</span> {tail}
+			</p>
+			<div className="shrink-0">{children}</div>
+		</div>
+	)
+}

package/src/components/stats-card.tsx

@@ -85,7 +85,7 @@ function StatsCardBody({
 			 * `-0.02em` (`AssetsTile.module.scss .count`).
 			 */}
 			<span
-				className={`flex flex-1 items-center text-[1.875rem] font-medium leading-[2rem] ${dark ? 'tracking-[-0.02em] text-white' : 'tracking-wide text-fg'}`}
+				className={`flex flex-1 items-center text-[1.875rem] font-medium leading-[2rem] ${dark ? 'tracking-normal text-white' : 'tracking-wide text-fg'}`}
 			>
 				{value}
 			</span>

package/src/components/subtle.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Subtle — inline de-emphasised text (the light `fg-subtle` grey, #b3b3b3). Wraps its
+ * children in a `text-fg-subtle` span; anything OUTSIDE it stays at the surrounding
+ * full-contrast `fg`. Compose it freely to two-tone arbitrary runs of a line — unlike
+ * a fixed-slot header it handles mid-line emphasis in ANY order and ANY language:
+ *
+ *   <h1>
+ *     <Subtle>Good afternoon</Subtle> {name} 👋
+ *     <br />
+ *     <Subtle>You have</Subtle> {count} planned tasks <Subtle>today</Subtle>
+ *   </h1>
+ *
+ * With i18n, put the `<subtle>…</subtle>` runs INSIDE the translation string and render
+ * it via `<Trans components={{ subtle: <Subtle /> }} />`, so each locale places the
+ * emphasis where its own word order needs it. Presentational only (hard rule #1).
+ */
+export function Subtle({ children }: { children: ReactNode }) {
+	return <span className="text-fg-subtle">{children}</span>
+}

package/src/components/tile.tsx

@@ -64,7 +64,7 @@ function TileBody({ head, children, tail }: Pick<TileProps, 'head' | 'children'
 	)
 }
 
-const baseSurface = 'flex h-full min-h-[200px] flex-col gap-6 rounded-panel p-6'
+const baseSurface = 'flex h-full min-h-[200px] flex-col gap-6 rounded-lg p-6'
 
 export function Tile({ theme = 'light', head, children, tail, link, className }: TileProps) {
 	const surface = [baseSurface, THEME[theme], className].filter(Boolean).join(' ')

package/src/index.ts

@@ -52,6 +52,8 @@ export * from "./layout/persistent-page-shell";
 
 // --- product patterns (label-driven; no domain coupling) ---
 export * from "./components/brand-page-header";
+export * from "./components/cta-pill";
+export * from "./components/subtle";
 export * from "./components/stats-card";
 export * from "./components/tile";
 export * from "./components/dashboard-grid";

package/src/layout/card.tsx

@@ -4,9 +4,8 @@ import { uic } from '../utils/uic'
  * Card — surface panel (port of gs-manager's `Card`).
  *
  * gs SCSS → our tokens (Tailwind + `@app/tokens` CSS vars, no SCSS — hard rule #3):
- *   - `--radius-lg` (8px) → `rounded-lg` (our `--radius-lg` is 0.5rem = 8px). NB the
- *     `rounded-panel` token is 1.1rem (~17.6px), NOT the 8px card radius — gs's Card
- *     used `--radius-lg`, so this maps to `rounded-lg`.
+ *   - `rounded-lg` (`--radius-lg` = 0.5rem = 8px) — the single unified card/panel
+ *     radius across the design system (the old 1.1rem soft-panel radius was retired).
  *   - `--color-background-secondary` (the light card fill) → `bg-surface-card`
  *     (our `--color-surface-card` = #f7f6f2).
  *   - `outlined` → 1px `--color-border` (#eceae1) → `border border-border`.