@passui/react 0.1.32 → 0.1.34

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+export type BreadcrumbSize = "sm" | "md";
 export interface BreadcrumbItem {
     label: string;
     href?: string;
@@ -11,6 +12,8 @@ export interface BreadcrumbProps {
     renderLink?: (item: BreadcrumbItem & {
         href: string;
     }) => ReactNode;
+    /** Text scale. @default "md" */
+    size?: BreadcrumbSize;
 }
 /** Ancestors stay links; the final item identifies the current page. */
-export declare function Breadcrumb({ label, items, className, renderLink }: BreadcrumbProps): import("react").JSX.Element;
+export declare function Breadcrumb({ label, items, className, renderLink, size }: BreadcrumbProps): 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/section/section.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from "react";
+export type SectionSize = "sm" | "md" | "lg";
 export interface SectionProps extends HTMLAttributes<HTMLElement> {
     /** Optional group heading and accessible name. */
     title?: string;
@@ -6,10 +7,12 @@ export interface SectionProps extends HTMLAttributes<HTMLElement> {
     footer?: ReactNode;
     /** Rows, typically LabeledContent. */
     children?: ReactNode;
+    /** Title and footer text scale + padding. @default "md" */
+    size?: SectionSize;
 }
 /**
  * A titled, inset group of rows with an optional footer, as in iOS Settings
  * and SwiftUI's grouped `List` with `Section(header:footer:)`. Rows are
  * usually `LabeledContent`; dividers between them come for free.
  */
-export declare function Section({ title, footer, children, className, ...props }: SectionProps): import("react").JSX.Element;
+export declare function Section({ title, footer, children, className, size, ...props }: SectionProps): import("react").JSX.Element;

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.32",
+    "version": "0.1.34",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {

package/src/components/breadcrumb/breadcrumb.tsx

@@ -1,6 +1,13 @@
 import type { ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
+export type BreadcrumbSize = "sm" | "md"
+
+const sizes: Record<BreadcrumbSize, string> = {
+    sm: "text-caption",
+    md: "text-footnote",
+}
+
 export interface BreadcrumbItem {
     label: string
     href?: string
@@ -11,12 +18,19 @@ export interface BreadcrumbProps {
     className?: string
     /** Integrate a client router without nesting interactive elements. */
     renderLink?: (item: BreadcrumbItem & { href: string }) => ReactNode
+    /** Text scale. @default "md" */
+    size?: BreadcrumbSize
 }
 /** Ancestors stay links; the final item identifies the current page. */
-export function Breadcrumb({ label, items, className, renderLink }: BreadcrumbProps) {
+export function Breadcrumb({ label, items, className, renderLink, size = "md" }: BreadcrumbProps) {
     return (
         <nav aria-label={label} className={cn("not-typeset", className)}>
-            <ol className="m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0 text-footnote text-label-secondary">
+            <ol
+                className={cn(
+                    "m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0 text-label-secondary",
+                    sizes[size]
+                )}
+            >
                 {items.map((item, index) => (
                     <li
                         key={`${index}-${item.label}`}

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/section/section.tsx

@@ -1,6 +1,20 @@
 import { useId, type HTMLAttributes, type ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
+export type SectionSize = "sm" | "md" | "lg"
+
+const titleSizes: Record<SectionSize, string> = {
+    sm: "px-3 text-caption",
+    md: "px-4 text-footnote",
+    lg: "px-5 text-subheadline",
+}
+
+const footerSizes: Record<SectionSize, string> = {
+    sm: "px-3",
+    md: "px-4",
+    lg: "px-5",
+}
+
 export interface SectionProps extends HTMLAttributes<HTMLElement> {
     /** Optional group heading and accessible name. */
     title?: string
@@ -8,6 +22,8 @@ export interface SectionProps extends HTMLAttributes<HTMLElement> {
     footer?: ReactNode
     /** Rows, typically LabeledContent. */
     children?: ReactNode
+    /** Title and footer text scale + padding. @default "md" */
+    size?: SectionSize
 }
 
 /**
@@ -15,7 +31,14 @@ export interface SectionProps extends HTMLAttributes<HTMLElement> {
  * and SwiftUI's grouped `List` with `Section(header:footer:)`. Rows are
  * usually `LabeledContent`; dividers between them come for free.
  */
-export function Section({ title, footer, children, className, ...props }: SectionProps) {
+export function Section({
+    title,
+    footer,
+    children,
+    className,
+    size = "md",
+    ...props
+}: SectionProps) {
     const headingId = useId()
     return (
         <section
@@ -24,7 +47,10 @@ export function Section({ title, footer, children, className, ...props }: Sectio
             {...props}
         >
             {title && (
-                <h2 id={headingId} className="px-4 text-footnote font-medium text-label-tertiary">
+                <h2
+                    id={headingId}
+                    className={cn(titleSizes[size], "font-medium text-label-tertiary")}
+                >
                     {title}
                 </h2>
             )}
@@ -35,7 +61,14 @@ export function Section({ title, footer, children, className, ...props }: Sectio
                 </div>
             ) : null}
             {footer && (
-                <div className="px-4 text-caption leading-snug text-label-tertiary">{footer}</div>
+                <div
+                    className={cn(
+                        footerSizes[size],
+                        "text-caption leading-snug text-label-tertiary"
+                    )}
+                >
+                    {footer}
+                </div>
             )}
         </section>
     )

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>
     )