@passui/react 0.1.33 → 0.1.35

package/dist/types/src/components/content-unavailable-view/content-unavailable-view.d.ts

@@ -1,9 +1,12 @@
 import type { ReactNode, ComponentProps } from "react";
+export type ContentUnavailableViewSize = "sm" | "md" | "lg";
 export interface ContentUnavailableViewProps extends Omit<ComponentProps<"div">, "title"> {
     title: string;
     description?: string;
     icon?: ReactNode;
     actions?: ReactNode;
+    /** Title, description and vertical rhythm. @default "md" */
+    size?: ContentUnavailableViewSize;
 }
 /** A focused empty or unavailable state with an optional next action. */
-export declare function ContentUnavailableView({ title, description, icon, actions, className, ...props }: ContentUnavailableViewProps): import("react").JSX.Element;
+export declare function ContentUnavailableView({ title, description, icon, actions, size, className, ...props }: ContentUnavailableViewProps): import("react").JSX.Element;

package/dist/types/src/components/keyboard-shortcut/keyboard-shortcut.d.ts

@@ -1,5 +1,8 @@
 import type { ComponentProps } from "react";
+export type KeyboardShortcutSize = "sm" | "md";
 export interface KeyboardShortcutProps extends ComponentProps<"kbd"> {
+    /** Keycap padding density. Text stays at caption2 in both sizes. @default "md" */
+    size?: KeyboardShortcutSize;
 }
 /** A quiet keycap for a shortcut supplied and localized by the application. */
-export declare function KeyboardShortcut({ className, ...props }: KeyboardShortcutProps): import("react").JSX.Element;
+export declare function KeyboardShortcut({ size, className, ...props }: KeyboardShortcutProps): import("react").JSX.Element;

package/dist/types/src/components/profile-image/profile-image.d.ts

@@ -1,4 +1,9 @@
 import { type ComponentProps } from "react";
-export declare function ProfileImage({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+export type ProfileImageSize = "sm" | "md" | "lg";
+export interface ProfileImageProps extends ComponentProps<"span"> {
+    /** Avatar diameter; fallback initials scale with it. @default "md" */
+    size?: ProfileImageSize;
+}
+export declare function ProfileImage({ size, className, ...props }: ProfileImageProps): import("react").JSX.Element;
 export declare function ProfileImageContent({ src, className, onLoad, onError, ...props }: ComponentProps<"img">): import("react").JSX.Element | null;
 export declare function ProfileImageFallback({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element | null;

package/dist/types/src/components/status-indicator/status-indicator.d.ts

@@ -5,10 +5,13 @@ declare const dots: {
     readonly offline: "bg-label-tertiary";
 };
 export type StatusIndicatorState = keyof typeof dots;
+export type StatusIndicatorSize = "sm" | "md";
 export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
     /** Visual treatment of the status dot. */
     state: StatusIndicatorState;
     children: ReactNode;
+    /** Dot diameter and text scale. @default "md" */
+    size?: StatusIndicatorSize;
 }
-export declare function StatusIndicator({ state, children, className, ...props }: StatusIndicatorProps): import("react").JSX.Element;
+export declare function StatusIndicator({ state, children, size, className, ...props }: StatusIndicatorProps): import("react").JSX.Element;
 export {};

package/package.json

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

package/src/components/content-unavailable-view/content-unavailable-view.tsx

@@ -1,11 +1,33 @@
 import type { ReactNode, ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 
+export type ContentUnavailableViewSize = "sm" | "md" | "lg"
+
+const titleSizes: Record<ContentUnavailableViewSize, string> = {
+    sm: "text-subheadline",
+    md: "text-headline",
+    lg: "text-title3",
+}
+
+const descriptionSizes: Record<ContentUnavailableViewSize, string> = {
+    sm: "text-caption",
+    md: "text-footnote",
+    lg: "text-subheadline",
+}
+
+const spacings: Record<ContentUnavailableViewSize, string> = {
+    sm: "gap-2 px-6 py-6",
+    md: "gap-3 px-6 py-10",
+    lg: "gap-4 px-6 py-14",
+}
+
 export interface ContentUnavailableViewProps extends Omit<ComponentProps<"div">, "title"> {
     title: string
     description?: string
     icon?: ReactNode
     actions?: ReactNode
+    /** Title, description and vertical rhythm. @default "md" */
+    size?: ContentUnavailableViewSize
 }
 
 /** A focused empty or unavailable state with an optional next action. */
@@ -14,22 +36,25 @@ export function ContentUnavailableView({
     description,
     icon,
     actions,
+    size = "md",
     className,
     ...props
 }: ContentUnavailableViewProps) {
     return (
         <div
             {...props}
-            className={cn("flex flex-col items-center gap-3 px-6 py-10 text-center", className)}
+            className={cn("flex flex-col items-center text-center", spacings[size], className)}
         >
             {icon && (
                 <span aria-hidden="true" className="text-label-tertiary">
                     {icon}
                 </span>
             )}
-            <p className="text-headline font-semibold text-label">{title}</p>
+            <p className={cn(titleSizes[size], "font-semibold text-label")}>{title}</p>
             {description && (
-                <p className="max-w-sm text-footnote text-label-secondary">{description}</p>
+                <p className={cn(descriptionSizes[size], "max-w-sm text-label-secondary")}>
+                    {description}
+                </p>
             )}
             {actions && <div className="mt-1 flex flex-wrap justify-center gap-2">{actions}</div>}
         </div>

package/src/components/keyboard-shortcut/keyboard-shortcut.tsx

@@ -1,15 +1,26 @@
 import type { ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 
-export interface KeyboardShortcutProps extends ComponentProps<"kbd"> {}
+export type KeyboardShortcutSize = "sm" | "md"
+
+const sizes: Record<KeyboardShortcutSize, string> = {
+    sm: "px-1 py-0 text-caption2",
+    md: "px-1.5 py-0.5 text-caption2",
+}
+
+export interface KeyboardShortcutProps extends ComponentProps<"kbd"> {
+    /** Keycap padding density. Text stays at caption2 in both sizes. @default "md" */
+    size?: KeyboardShortcutSize
+}
 
 /** A quiet keycap for a shortcut supplied and localized by the application. */
-export function KeyboardShortcut({ className, ...props }: KeyboardShortcutProps) {
+export function KeyboardShortcut({ size = "md", className, ...props }: KeyboardShortcutProps) {
     return (
         <kbd
             {...props}
             className={cn(
-                "inline-flex shrink-0 items-center rounded-md border border-separator/70 bg-fill/50 px-1.5 py-0.5 font-mono text-caption2 leading-none text-label-secondary",
+                "inline-flex shrink-0 items-center rounded-md border border-separator/70 bg-fill/50 font-mono leading-none text-label-secondary",
+                sizes[size],
                 className
             )}
         />

package/src/components/profile-image/profile-image.tsx

@@ -1,18 +1,40 @@
 import { createContext, useContext, useEffect, useState, type ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 
+export type ProfileImageSize = "sm" | "md" | "lg"
+
+const diameters: Record<ProfileImageSize, string> = {
+    sm: "size-7",
+    md: "size-9",
+    lg: "size-12",
+}
+
+const fallbackTextSizes: Record<ProfileImageSize, string> = {
+    sm: "text-caption",
+    md: "text-footnote",
+    lg: "text-subheadline",
+}
+
 const ImageContext = createContext<{
     loaded: boolean
     setLoaded: (loaded: boolean) => void
-}>({ loaded: false, setLoaded: () => {} })
-export function ProfileImage({ className, ...props }: ComponentProps<"span">) {
+    size: ProfileImageSize
+}>({ loaded: false, setLoaded: () => {}, size: "md" })
+
+export interface ProfileImageProps extends ComponentProps<"span"> {
+    /** Avatar diameter; fallback initials scale with it. @default "md" */
+    size?: ProfileImageSize
+}
+
+export function ProfileImage({ size = "md", className, ...props }: ProfileImageProps) {
     const [loaded, setLoaded] = useState(false)
     return (
-        <ImageContext value={{ loaded, setLoaded }}>
+        <ImageContext value={{ loaded, setLoaded, size }}>
             <span
                 {...props}
                 className={cn(
-                    "relative inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-fill text-label-secondary",
+                    "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-fill text-label-secondary",
+                    diameters[size],
                     className
                 )}
             />
@@ -51,8 +73,8 @@ export function ProfileImageContent({
     )
 }
 export function ProfileImageFallback({ className, ...props }: ComponentProps<"span">) {
-    const { loaded } = useContext(ImageContext)
+    const { loaded, size } = useContext(ImageContext)
     return loaded ? null : (
-        <span {...props} className={cn("text-footnote font-medium", className)} />
+        <span {...props} className={cn(fallbackTextSizes[size], "font-medium", className)} />
     )
 }

package/src/components/status-indicator/status-indicator.tsx

@@ -8,20 +8,43 @@ const dots = {
 } as const
 
 export type StatusIndicatorState = keyof typeof dots
+export type StatusIndicatorSize = "sm" | "md"
+
+const dotSizes: Record<StatusIndicatorSize, string> = {
+    sm: "size-[6px]",
+    md: "size-[7px]",
+}
+
+const textSizes: Record<StatusIndicatorSize, string> = {
+    sm: "text-caption",
+    md: "text-footnote",
+}
 
 export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
     /** Visual treatment of the status dot. */
     state: StatusIndicatorState
     children: ReactNode
+    /** Dot diameter and text scale. @default "md" */
+    size?: StatusIndicatorSize
 }
 
-export function StatusIndicator({ state, children, className, ...props }: StatusIndicatorProps) {
+export function StatusIndicator({
+    state,
+    children,
+    size = "md",
+    className,
+    ...props
+}: StatusIndicatorProps) {
     return (
         <span
-            className={cn("flex items-center gap-1.5 text-footnote text-label-tertiary", className)}
+            className={cn(
+                "flex items-center gap-1.5 text-label-tertiary",
+                textSizes[size],
+                className
+            )}
             {...props}
         >
-            <span aria-hidden="true" className={cn("size-[7px] rounded-full", dots[state])} />
+            <span aria-hidden="true" className={cn(dotSizes[size], "rounded-full", dots[state])} />
             {children}
         </span>
     )