@ponti-studios/ui 0.3.0 → 0.4.1

package/src/components/overlays/dropdown-menu.tsx

@@ -12,11 +12,17 @@ function DropdownMenuPortal(props: React.ComponentProps<typeof DropdownMenuPrimi
   return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
-function DropdownMenuTrigger({ asChild, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & { asChild?: boolean }) {
+function DropdownMenuTrigger({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & { asChild?: boolean }) {
   return (
     <DropdownMenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
-      {...(asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {})}
+      {...(asChild && React.isValidElement(children)
+        ? { render: children as React.ReactElement }
+        : {})}
       {...props}
     >
       {!asChild && children}
@@ -24,7 +30,12 @@ function DropdownMenuTrigger({ asChild, children, ...props }: React.ComponentPro
   );
 }
 
-function DropdownMenuContent({ className, sideOffset = 4, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Popup> & { sideOffset?: number }) {
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Popup> & { sideOffset?: number }) {
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Positioner sideOffset={sideOffset}>
@@ -47,54 +58,159 @@ function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimit
   return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
-function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.GroupLabel> & { inset?: boolean }) {
-  return <DropdownMenuPrimitive.GroupLabel data-slot="dropdown-menu-label" data-inset={inset} className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)} {...props} />;
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.GroupLabel> & { inset?: boolean }) {
+  return (
+    <DropdownMenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+      {...props}
+    />
+  );
 }
 
-function DropdownMenuItem({ className, inset, variant = "default", ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & { inset?: boolean; variant?: "default" | "destructive" }) {
-  return <DropdownMenuPrimitive.Item data-slot="dropdown-menu-item" data-inset={inset} data-variant={variant} className={cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className)} {...props} />;
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
-function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
   return (
-    <DropdownMenuPrimitive.CheckboxItem data-slot="dropdown-menu-checkbox-item" className={cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50", className)} checked={checked} {...props}>
-      <span className="absolute left-2 flex size-3.5 items-center justify-center"><DropdownMenuPrimitive.CheckboxItemIndicator><CheckIcon className="size-4" /></DropdownMenuPrimitive.CheckboxItemIndicator></span>
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.CheckboxItemIndicator>
+      </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
   );
 }
 
-function DropdownMenuRadioGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+function DropdownMenuRadioGroup(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,
+) {
   return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
-function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
   return (
-    <DropdownMenuPrimitive.RadioItem data-slot="dropdown-menu-radio-item" className={cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50", className)} {...props}>
-      <span className="absolute left-2 flex size-3.5 items-center justify-center"><DropdownMenuPrimitive.RadioItemIndicator><CircleIcon className="size-2 fill-current" /></DropdownMenuPrimitive.RadioItemIndicator></span>
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.RadioItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.RadioItemIndicator>
+      </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
   );
 }
 
-function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return <DropdownMenuPrimitive.Separator data-slot="dropdown-menu-separator" className={cn("bg-border -mx-1 my-1 h-px", className)} {...props} />;
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
-  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
+  return (
+    <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+  );
 }
 
 function DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuRoot>) {
   return <DropdownMenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
 }
 
-function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuTrigger> & { inset?: boolean }) {
-  return <DropdownMenuPrimitive.SubmenuTrigger data-slot="dropdown-menu-sub-trigger" data-inset={inset} className={cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8", className)} {...props}>{children}<ChevronRightIcon className="ml-auto size-4" /></DropdownMenuPrimitive.SubmenuTrigger>;
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuTrigger> & { inset?: boolean }) {
+  return (
+    <DropdownMenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-open:bg-muted data-open:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubmenuTrigger>
+  );
 }
 
-function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Popup>) {
-  return <DropdownMenuPrimitive.Popup data-slot="dropdown-menu-sub-content" className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg outline-none", className)} {...props} />;
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Popup>) {
+  return (
+    <DropdownMenuPrimitive.Popup
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export {

package/src/components/overlays/popover.tsx

@@ -7,11 +7,17 @@ function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({ asChild, children, ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger> & { asChild?: boolean }) {
+function PopoverTrigger({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger> & { asChild?: boolean }) {
   return (
     <PopoverPrimitive.Trigger
       data-slot="popover-trigger"
-      {...(asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {})}
+      {...(asChild && React.isValidElement(children)
+        ? { render: children as React.ReactElement }
+        : {})}
       {...props}
     >
       {!asChild && children}
@@ -35,7 +41,12 @@ function PopoverContent({
 }) {
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Positioner align={align} side={side} sideOffset={sideOffset} collisionAvoidance={avoidCollisions ? undefined : { side: "none", align: "none" }}>
+      <PopoverPrimitive.Positioner
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        collisionAvoidance={avoidCollisions ? undefined : { side: "none", align: "none" }}
+      >
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(

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/index.ts

@@ -9,9 +9,9 @@ export { normalizeOtp, OTP_LENGTH } from "./lib/auth";
 export { copyToClipboard } from "./lib/clipboard";
 export { createMemoryStorage } from "./lib/create-memory-storage";
 export { cn } from "./lib/utils";
+export { colors } from "./tokens/css-vars";
 export {
   animations,
-  colors,
   colorThemes,
   colorTokenNames,
   containers,

package/src/native/index.ts

@@ -0,0 +1,11 @@
+/**
+ * React Native entry point.
+ *
+ * Kept as its own subpath (`@ponti-studios/ui/native`) because it is the only
+ * part of the package that imports `react-native`. Nothing here may import web
+ * code, so web consumers never pull React Native into their graph and native
+ * consumers never pull in react-dom.
+ */
+export { createMakeStyles, type NamedStyles } from "./make-styles";
+export { nativeShadows, type NativeShadowLayer } from "./shadows";
+export { useColorMode, useThemeColors } from "./use-theme-colors";

package/src/native/make-styles.ts

@@ -0,0 +1,32 @@
+import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
+
+export type NamedStyles = Record<string, ViewStyle | TextStyle | ImageStyle>;
+
+/**
+ * Builds a `makeStyles` helper bound to a consuming app's own theme hook.
+ *
+ * The theme *shape* stays owned by the app — this package supplies only the
+ * mechanism — so `Theme` is a type parameter rather than a type exported from
+ * here. An app calls this once with its `useTheme` and uses the result
+ * everywhere:
+ *
+ * ```ts
+ * export const makeStyles = createMakeStyles(useTheme);
+ *
+ * const useStyles = makeStyles((theme) => ({
+ *   card: { backgroundColor: theme.colors.card },
+ * }));
+ * ```
+ *
+ * The returned `useStyles` is a hook: it calls `useTheme` on every render, so
+ * styles re-resolve when the color mode changes. Styles are returned as plain
+ * objects rather than passed through `StyleSheet.create`, since they are
+ * rebuilt per render and React Native accepts plain style objects directly.
+ */
+export function createMakeStyles<Theme>(useTheme: () => Theme) {
+  return function makeStyles<T extends NamedStyles>(factory: (theme: Theme) => T & NamedStyles) {
+    return function useStyles(): T {
+      return factory(useTheme());
+    };
+  };
+}

package/src/native/shadows.ts

@@ -0,0 +1,38 @@
+import { shadows, type ShadowToken } from "../tokens";
+
+/**
+ * One layer of a shadow in the shape React Native's `boxShadow` expects.
+ *
+ * The shared shadow tokens are authored for CSS, where each dimension carries
+ * its own unit. React Native takes bare numbers (density-independent pixels),
+ * so the unit is dropped here rather than at every call site.
+ */
+export interface NativeShadowLayer {
+  color: string;
+  offsetX: number;
+  offsetY: number;
+  blurRadius: number;
+  spreadDistance: number;
+  inset: boolean;
+}
+
+/**
+ * The shared shadow scale translated to React Native's `boxShadow` shape.
+ *
+ * Every token maps to an array of layers, including `none`, which is a single
+ * fully transparent layer rather than an empty array — that keeps the value
+ * assignable wherever a real shadow is expected.
+ */
+export const nativeShadows = Object.fromEntries(
+  Object.entries(shadows).map(([name, layers]) => [
+    name,
+    layers.map((layer) => ({
+      color: layer.color,
+      offsetX: layer.offsetX.value,
+      offsetY: layer.offsetY.value,
+      blurRadius: layer.blur.value,
+      spreadDistance: layer.spread.value,
+      inset: false,
+    })),
+  ]),
+) as Record<ShadowToken, NativeShadowLayer[]>;

package/src/native/use-theme-colors.ts

@@ -0,0 +1,19 @@
+import { useColorScheme } from "react-native";
+
+import { colorThemes, type ColorMode, type ColorTheme } from "../tokens";
+
+/**
+ * Resolves the active color mode from the OS appearance setting.
+ *
+ * React Native's `useColorScheme` reports `null` before the appearance module
+ * has settled, so anything that isn't explicitly "dark" resolves to light —
+ * callers always receive a concrete mode rather than having to handle null.
+ */
+export function useColorMode(): ColorMode {
+  return useColorScheme() === "dark" ? "dark" : "light";
+}
+
+/** The full color token set for the active OS appearance. */
+export function useThemeColors(): ColorTheme {
+  return colorThemes[useColorMode()];
+}