@ponti-studios/ui 0.3.0 → 0.4.0

package/src/components/overlays/sheet.tsx

@@ -8,10 +8,16 @@ import { cn } from "../../lib/utils";
 
 const Sheet = SheetPrimitive.Root;
 
-function SheetTrigger({ asChild, children, ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger> & { asChild?: boolean }) {
+function SheetTrigger({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger> & { asChild?: boolean }) {
   return (
     <SheetPrimitive.Trigger
-      {...(asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {})}
+      {...(asChild && React.isValidElement(children)
+        ? { render: children as React.ReactElement }
+        : {})}
       {...props}
     >
       {!asChild && children}
@@ -19,10 +25,16 @@ function SheetTrigger({ asChild, children, ...props }: React.ComponentProps<type
   );
 }
 
-function SheetClose({ asChild, children, ...props }: React.ComponentProps<typeof SheetPrimitive.Close> & { asChild?: boolean }) {
+function SheetClose({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close> & { asChild?: boolean }) {
   return (
     <SheetPrimitive.Close
-      {...(asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {})}
+      {...(asChild && React.isValidElement(children)
+        ? { render: children as React.ReactElement }
+        : {})}
       {...props}
     >
       {!asChild && children}
@@ -38,7 +50,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Backdrop
     className={cn(
-      "bg-black/80 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 transition-opacity",
+      "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 transition-opacity",
       className,
     )}
     {...props}
@@ -59,7 +71,7 @@ const SheetContent = React.forwardRef<
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Popup ref={ref} className={cn(sheetClassName, className)} {...props}>
-      <SheetPrimitive.Close className="text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-11 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none md:top-4 md:right-4">
+      <SheetPrimitive.Close className="text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none md:top-4 md:right-4">
         <X className="size-4.5" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -86,7 +98,11 @@ const SheetTitle = React.forwardRef<
   React.ComponentRef<typeof SheetPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold tracking-tight", className)} {...props} />
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold tracking-tight", className)}
+    {...props}
+  />
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
@@ -96,7 +112,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("max-w-prose text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground max-w-prose text-sm", className)}
     {...props}
   />
 ));

package/src/components/primitives/avatar.tsx

@@ -46,7 +46,11 @@ function Avatar({
     <AvatarContext.Provider value={{ size }}>
       <AvatarPrimitive.Root
         data-slot="avatar"
-        className={cn("relative shrink-0 rounded-full select-none", avatarSize[size], className)}
+        className={cn(
+          "relative inline-flex shrink-0 rounded-full select-none",
+          avatarSize[size],
+          className,
+        )}
         {...props}
       >
         {children}
@@ -54,7 +58,7 @@ function Avatar({
           <span
             data-slot="avatar-badge"
             className={cn(
-              "bg-accent ring-background absolute right-0 bottom-0 z-10 rounded-full ring-2",
+              "bg-primary ring-background absolute right-0 bottom-0 z-10 rounded-full ring-2",
               badgeDotSize[size],
             )}
           />

package/src/components/primitives/badge.tsx

@@ -4,16 +4,19 @@ import * as React from "react";
 import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded border border-transparent px-1.5 py-px text-xs font-medium [&>svg]:size-3 [&>svg]:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+  "state-settle inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded border border-transparent px-1.5 py-px text-xs font-medium [&>svg]:size-3 [&>svg]:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80",
         destructive: "bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90",
-        outline: "border-border text-foreground [a&]:hover:bg-accent",
+        outline: "border-border text-foreground [a&]:hover:bg-muted",
         ghost: "[a&]:[a&]: [a&]: [a&]:",
         link: "text-foreground underline-offset-4 [a&]:hover:underline",
+        /** Quiet metadata marker for real reference IDs (case/appointment/feed
+         * numbers) — never for decorative sequence markers. */
+        ref: "ref-tag border-transparent bg-transparent px-0 py-0 font-normal",
       },
     },
     defaultVariants: {

package/src/components/primitives/button.tsx

@@ -6,28 +6,22 @@ import { cn } from "../../lib/utils";
 import { Spinner } from "../feedback/spinner";
 
 const buttonVariants = cva(
-  "inline-flex min-h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent px-4 py-2 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "border-input bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "border-transparent bg-transparent hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border-input bg-background hover:bg-muted hover:text-muted-foreground",
+        secondary: "border-input bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "border-transparent bg-transparent hover:bg-muted hover:text-muted-foreground",
         link: "border-transparent bg-transparent px-0 text-primary underline-offset-4 hover:underline",
       },
       size: {
-        sm: "min-h-11 px-2.5 text-sm",
-        md: "min-h-11 px-3 text-sm",
-        lg: "min-h-12 px-4 text-base",
-        default: "",
-        icon: "size-11 rounded-md p-0",
+        sm: "min-h-8 px-2.5 text-xs",
+        md: "min-h-9 px-3 text-sm",
+        lg: "min-h-10 px-4 text-base",
+        icon: "size-9 rounded-md p-0",
       },
     },
     defaultVariants: {
@@ -65,7 +59,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       const renderedChild = React.cloneElement(child, {
         children: isLoading ? (
           <>
-            <span className="opacity-0" aria-hidden="true">{child.props.children}</span>
+            <span className="opacity-0" aria-hidden="true">
+              {child.props.children}
+            </span>
             <span className="absolute inset-0 inline-flex items-center justify-center">
               <Spinner size="sm" aria-hidden="true" />
             </span>
@@ -105,7 +101,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {isLoading ? (
           <>
-            <span className="opacity-0" aria-hidden="true">{children}</span>
+            <span className="opacity-0" aria-hidden="true">
+              {children}
+            </span>
             <span className="absolute inset-0 inline-flex items-center justify-center">
               <Spinner size="sm" aria-hidden="true" />
             </span>

package/src/components/primitives/card.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story = {
         <CardDescription>A short description of the card's content.</CardDescription>
       </CardHeader>
       <CardContent>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-muted-foreground text-sm">
           Card body content goes here. It can be any React node.
         </p>
       </CardContent>
@@ -47,7 +47,7 @@ export const Minimal: Story = {
   render: () => (
     <Card className="w-80">
       <CardContent>
-        <p className="text-sm text-muted-foreground">Minimal card with only content.</p>
+        <p className="text-muted-foreground text-sm">Minimal card with only content.</p>
       </CardContent>
     </Card>
   ),

package/src/components/primitives/card.tsx

@@ -6,10 +6,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col rounded-xl border",
-        className,
-      )}
+      className={cn("bg-card text-card-foreground flex flex-col rounded-xl border", className)}
       {...props}
     />
   );
@@ -36,7 +33,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   );

package/src/constants/chart-colors.ts

@@ -14,14 +14,14 @@ export const CHART_COLORS = {
   negative: "var(--color-chart-negative)",
   neutral: "var(--color-chart-neutral)",
 
-  background: "var(--color-surface-canvas)",
+  background: "var(--color-background)",
   grid: "var(--color-border)",
 
   axis: "var(--color-muted-foreground)",
   label: "var(--color-muted-foreground)",
 
   tooltip: {
-    background: "var(--color-surface-panel)",
+    background: "var(--color-card)",
     text: "var(--color-foreground)",
     border: "var(--color-border)",
   },

package/src/styles.css

@@ -4,85 +4,175 @@
 @import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
 @import "./animations.css";
 
-/* Keep generated token names isolated from Tailwind's standard role names. */
-:root {
-  --ponti-primary: var(--color-accent);
-  --ponti-primary-foreground: var(--color-text-on-accent);
-  --ponti-destructive: var(--color-destructive);
-  --ponti-destructive-foreground: var(--color-text-on-destructive);
-  --ponti-foreground: var(--color-text-primary);
-  --ponti-muted-foreground: var(--color-text-secondary);
-  --ponti-border: var(--color-border-default);
-  --ponti-ring: var(--color-ring-focus);
-}
-
 /* shadcn New York semantic contract. Values are generated from the DTCG
  * source; this file only names the roles consumed by web components. */
 @theme inline {
-  --color-background: var(--color-surface-canvas);
-  --color-foreground: var(--ponti-foreground);
-  --color-card: var(--color-surface-panel);
-  --color-card-foreground: var(--color-text-primary);
-  --color-popover: var(--color-surface-raised);
-  --color-popover-foreground: var(--color-text-primary);
-  --color-primary: var(--ponti-primary);
-  --color-primary-foreground: var(--ponti-primary-foreground);
-  --color-secondary: var(--color-surface-panel);
-  --color-secondary-foreground: var(--color-text-primary);
-  --color-muted: var(--color-surface-inset);
-  --color-muted-foreground: var(--ponti-muted-foreground);
-  --color-accent-foreground: var(--color-text-primary);
-  --color-destructive-foreground: var(--ponti-destructive-foreground);
-  --color-border: var(--ponti-border);
-  --color-input: var(--ponti-border);
-  --color-ring: var(--ponti-ring);
-  --color-chart-1: var(--color-border-focus);
-  --color-chart-2: var(--color-chart-positive);
-  --color-chart-3: var(--color-border-focus);
-  --color-chart-4: var(--color-text-warning);
-  --color-chart-5: var(--color-border-strong);
+  --color-background: var(--background);
+  --color-foreground: var(--text-primary);
+  --color-card: var(--card);
+  --color-card-foreground: var(--text-primary);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--text-primary);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--card);
+  --color-secondary-foreground: var(--text-primary);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--text-secondary);
+  --color-accent: var(--primary);
+  --color-accent-foreground: var(--primary-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-border: var(--border-default);
+  --color-input: var(--border-default);
+  --color-ring: var(--focus-ring);
 }
 
-@utility pb-safe-area-inset-bottom { padding-bottom: env(safe-area-inset-bottom); }
-@utility mb-safe-area-inset-bottom { margin-bottom: env(safe-area-inset-bottom); }
-@utility min-h-screen { min-height: 100vh; min-height: 100dvh; }
-@utility min-h-screen-dynamic { min-height: 100dvh; }
-@utility h-screen { height: 100vh; height: 100dvh; }
+@utility display-1 {
+  font-size: clamp(2.5rem, 5vw, 6rem);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.1;
+  letter-spacing: var(--tracking-tight);
+}
+@utility display-2 {
+  font-size: clamp(2rem, 3vw, 3.5rem);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.15;
+  letter-spacing: var(--tracking-tight);
+}
+@utility ref-tag {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--tertiary);
+  letter-spacing: var(--tracking-wide);
+}
+/* Quiet state-change "settle" — used on state-bearing indicators
+ * (Badge, StatusBadge, FilterChip) when their represented value changes. */
+@utility state-settle {
+  transition:
+    transform 120ms ease-out,
+    opacity 120ms ease-out;
+}
+@utility pb-safe-area-inset-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+@utility mb-safe-area-inset-bottom {
+  margin-bottom: env(safe-area-inset-bottom);
+}
+@utility min-h-screen {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+@utility min-h-screen-dynamic {
+  min-height: 100dvh;
+}
+@utility h-screen {
+  height: 100vh;
+  height: 100dvh;
+}
 
 /* Shared layout rhythm. Product components own their layout; this does not
  * define visual component families. */
-.page-shell { @apply relative mx-auto flex w-full flex-col gap-12 px-4 py-16 md:gap-16 md:px-6 md:py-20; }
-.page-shell-detail { @apply relative mx-auto flex w-full flex-col gap-10 px-4 py-16 md:gap-12 md:px-6 md:py-20; }
-.page-bleed { @apply flex w-full flex-col; }
-.layout-stack { @apply flex flex-col gap-4; }
-.list-row { @apply flex gap-4 px-0 py-6 md:gap-6 md:py-8; }
-.list-media { @apply relative isolate flex shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-card p-2 shadow-none; }
-.list-media-wide { @apply h-14 w-32; }
-.list-media-square { @apply size-10 sm:size-12; }
-.list-media-placeholder { @apply pointer-events-none absolute inset-0 flex items-center justify-center gap-1.5 transition-opacity duration-150; }
-.section { @apply flex flex-col gap-4 border-b border-border px-4 py-12 md:px-6 md:py-16; }
-.section-hero { @apply gap-6 py-16 md:py-20; }
-.detail-hero { @apply gap-4 py-10 md:gap-6 md:py-16; }
-.section-compact { @apply gap-4 py-8 md:py-12; }
-.detail-navigation { @apply flex flex-col gap-6 sm:flex-row sm:justify-between; }
-.detail-navigation-link { @apply flex min-h-11 flex-col justify-center gap-1; }
+.page-shell {
+  @apply relative mx-auto flex w-full flex-col gap-12 px-4 py-16 md:gap-16 md:px-6 md:py-20;
+}
+.page-shell-detail {
+  @apply relative mx-auto flex w-full flex-col gap-10 px-4 py-16 md:gap-12 md:px-6 md:py-20;
+}
+.page-bleed {
+  @apply flex w-full flex-col;
+}
+.layout-stack {
+  @apply flex flex-col gap-4;
+}
+.list-row {
+  @apply flex gap-4 px-0 py-6 md:gap-6 md:py-8;
+}
+.list-media {
+  @apply border-border bg-card relative isolate flex shrink-0 items-center justify-center overflow-hidden rounded-md border p-2 shadow-none;
+}
+.list-media-wide {
+  @apply h-14 w-32;
+}
+.list-media-square {
+  @apply size-10 sm:size-12;
+}
+.list-media-placeholder {
+  @apply pointer-events-none absolute inset-0 flex items-center justify-center gap-1.5 transition-opacity duration-150;
+}
+.section {
+  @apply border-border flex flex-col gap-4 border-b px-4 py-12 md:px-6 md:py-16;
+}
+.section-hero {
+  @apply gap-6 py-16 md:py-20;
+}
+.detail-hero {
+  @apply gap-4 py-10 md:gap-6 md:py-16;
+}
+.section-compact {
+  @apply gap-4 py-8 md:py-12;
+}
+.detail-navigation {
+  @apply flex flex-col gap-6 sm:flex-row sm:justify-between;
+}
+.detail-navigation-link {
+  @apply flex min-h-9 flex-col justify-center gap-1;
+}
 
 @layer base {
-  :root { color-scheme: light; }
-  @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
-  html, body {
+  :root {
+    color-scheme: light;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+    }
+  }
+  html,
+  body {
     background-color: var(--color-background);
     color: var(--color-foreground);
     font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-  * { border-color: var(--color-border, currentColor); }
-  *:focus { outline: none; }
-  *:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: inherit; }
-  button { cursor: pointer; font-family: inherit; }
-  h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-tight); }
+  * {
+    border-color: var(--color-border, currentColor);
+  }
+  *:focus {
+    outline: none;
+  }
+  *:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+    border-radius: inherit;
+  }
+  button {
+    cursor: pointer;
+    font-family: inherit;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-sans);
+    font-weight: 600;
+    letter-spacing: var(--tracking-tight);
+  }
   @media (prefers-reduced-motion: reduce) {
-    *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
   }
 }