@passui/react 0.1.31 → 0.1.32

package/dist/types/src/components/skeleton/skeleton.d.ts

@@ -1,6 +1,9 @@
 import type { ComponentProps } from "react";
+export type SkeletonSize = "sm" | "md" | "lg";
 export interface SkeletonProps extends ComponentProps<"div"> {
     label?: string;
+    /** Minimum height and rounding. @default "md" */
+    size?: SkeletonSize;
 }
 /** A loading placeholder that becomes still when Reduce Motion is enabled. */
-export declare function Skeleton({ label, className, ...props }: SkeletonProps): import("react").JSX.Element;
+export declare function Skeleton({ label, size, className, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/types/src/components/stat-tile/stat-tile.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 export type StatTileTone = "critical";
+export type StatTileSize = "sm" | "md" | "lg";
 export interface StatTileProps {
     label: string;
     value: number;
@@ -12,6 +13,8 @@ export interface StatTileProps {
     active?: boolean;
     /** Custom classes for the tile container. */
     className?: string;
+    /** Tile padding and number scale. @default "md" */
+    size?: StatTileSize;
 }
 /** One number with its label, optionally a toggle. */
-export declare function StatTile({ label, value, caption, tone, onClick, active, className, }: StatTileProps): import("react").JSX.Element;
+export declare function StatTile({ label, value, caption, tone, onClick, active, className, size, }: StatTileProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.31",
+    "version": "0.1.32",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {

package/src/components/skeleton/skeleton.tsx

@@ -1,17 +1,27 @@
 import type { ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 
+export type SkeletonSize = "sm" | "md" | "lg"
+
+const minHeights: Record<SkeletonSize, string> = {
+    sm: "min-h-3 rounded-md",
+    md: "min-h-4 rounded-md",
+    lg: "min-h-6 rounded-lg",
+}
+
 export interface SkeletonProps extends ComponentProps<"div"> {
     label?: string
+    /** Minimum height and rounding. @default "md" */
+    size?: SkeletonSize
 }
 /** A loading placeholder that becomes still when Reduce Motion is enabled. */
-export function Skeleton({ label, className, ...props }: SkeletonProps) {
+export function Skeleton({ label, size = "md", className, ...props }: SkeletonProps) {
     return (
         <div
             {...props}
             role={label ? "status" : undefined}
             aria-hidden={label ? undefined : true}
-            className={cn("min-h-4 rounded-md bg-fill motion-safe:animate-pulse", className)}
+            className={cn("bg-fill motion-safe:animate-pulse", minHeights[size], className)}
         >
             {label && <span className="sr-only">{label}</span>}
         </div>

package/src/components/stat-tile/stat-tile.tsx

@@ -2,6 +2,13 @@ import type { ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
 export type StatTileTone = "critical"
+export type StatTileSize = "sm" | "md" | "lg"
+
+const tileSizes: Record<StatTileSize, { padding: string; valueText: string; labelText: string }> = {
+    sm: { padding: "p-3", valueText: "text-title3", labelText: "text-caption" },
+    md: { padding: "p-4", valueText: "text-title1", labelText: "text-footnote" },
+    lg: { padding: "p-5", valueText: "text-title", labelText: "text-subheadline" },
+}
 
 export interface StatTileProps {
     label: string
@@ -15,6 +22,8 @@ export interface StatTileProps {
     active?: boolean
     /** Custom classes for the tile container. */
     className?: string
+    /** Tile padding and number scale. @default "md" */
+    size?: StatTileSize
 }
 
 /** One number with its label, optionally a toggle. */
@@ -26,18 +35,29 @@ export function StatTile({
     onClick,
     active = false,
     className,
+    size = "md",
 }: StatTileProps) {
+    const dims = tileSizes[size]
     const body = (
         <>
-            <span className="text-label-secondary">{label}</span>
-            <span className={cn("tabular-nums", tone === "critical" && value > 0 && "text-danger")}>
+            <span className={cn(dims.labelText, "text-label-secondary")}>{label}</span>
+            <span
+                className={cn(
+                    "tabular-nums font-semibold",
+                    dims.valueText,
+                    tone === "critical" && value > 0 && "text-danger"
+                )}
+            >
                 {value.toLocaleString("en-US")}
             </span>
-            {caption && <span className="text-label-secondary">{caption}</span>}
+            {caption && (
+                <span className={cn(dims.labelText, "text-label-tertiary")}>{caption}</span>
+            )}
         </>
     )
     const tileClass = cn(
-        "flex min-w-0 flex-col gap-2 rounded-2xl border border-separator/35 bg-elevated p-4 text-left shadow-xs",
+        "flex min-w-0 flex-col gap-2 rounded-2xl border border-separator/35 bg-elevated text-left shadow-xs",
+        dims.padding,
         className
     )