@passui/react 0.1.37 → 0.1.39

package/dist/types/src/components/compact-date-picker/compact-date-picker.d.ts

@@ -1,3 +1,4 @@
+import { type PickerSize } from "../picker/picker-trigger";
 export interface CompactDatePickerProps {
     /** `YYYY-MM-DD`, or "" when no date is chosen. */
     value: string;
@@ -18,10 +19,12 @@ export interface CompactDatePickerProps {
     className?: string;
     /** Prevents opening the date panel. @default false */
     disabled?: boolean;
+    /** Trigger button density; matches Picker's sm | md | lg. @default "md" */
+    size?: PickerSize;
 }
 /**
  * A date as a compact button that opens a month calendar, like SwiftUI's
  * compact DatePicker: for dates on a calendar, such as an event or an
  * invoice. For dates people know by heart, like a birthday, use DatePicker.
  */
-export declare function CompactDatePicker({ value, onChange, label, locale, min, max, placeholder, labels, className, disabled, }: CompactDatePickerProps): import("react").JSX.Element;
+export declare function CompactDatePicker({ value, onChange, label, locale, min, max, placeholder, labels, className, disabled, size, }: CompactDatePickerProps): import("react").JSX.Element;

package/dist/types/src/components/compact-time-picker/compact-time-picker.d.ts

@@ -1,3 +1,4 @@
+import { type PickerSize } from "../picker/picker-trigger";
 export interface CompactTimePickerProps {
     /** `HH:MM` on a 24 hour clock, or "" when no time is chosen. */
     value: string;
@@ -17,10 +18,12 @@ export interface CompactTimePickerProps {
     className?: string;
     /** Prevents opening the time panel. @default false */
     disabled?: boolean;
+    /** Trigger button density; matches Picker's sm | md | lg. @default "md" */
+    size?: PickerSize;
 }
 /**
  * A time as a compact button that opens columns of hours and minutes,
  * like SwiftUI's compact DatePicker for times, on the clock the locale
  * reads (12 hours with AM and PM, or 24).
  */
-export declare function CompactTimePicker({ value, onChange, label, locale, minuteStep, placeholder, labels, className, disabled, }: CompactTimePickerProps): import("react").JSX.Element;
+export declare function CompactTimePicker({ value, onChange, label, locale, minuteStep, placeholder, labels, className, disabled, size, }: CompactTimePickerProps): import("react").JSX.Element;

package/dist/types/src/components/search-field/search-field.d.ts

@@ -1,6 +1,9 @@
 import { type InputHTMLAttributes } from "react";
-export interface SearchFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+export type SearchFieldSize = "sm" | "md" | "lg";
+export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** Expand a single pill from its search icon on focus. @default false */
     collapsible?: boolean;
+    /** Pill height, icon size and text scale (non-collapsible variant). @default "md" */
+    size?: SearchFieldSize;
 }
 export declare const SearchField: import("react").ForwardRefExoticComponent<SearchFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/src/components/tab-bar/tab-bar.d.ts

@@ -12,6 +12,7 @@ export interface TabBarLinkProps {
     children: ReactNode;
 }
 export type TabBarMinimizeBehavior = "platform" | "scroll" | "never";
+export type TabBarSize = "sm" | "md" | "lg";
 export interface TabBarProps<Tab extends TabBarTab> {
     /** `platform` follows the platform, `scroll` always minimizes, `never` stays expanded. @default "platform" */
     minimizeBehavior?: TabBarMinimizeBehavior;
@@ -26,6 +27,8 @@ export interface TabBarProps<Tab extends TabBarTab> {
     };
     /** Accessible name for the navigation. */
     label: string;
+    /** Tab height, label text, minimized width and search button diameter. @default "md" */
+    size?: TabBarSize;
     className?: string;
 }
 /**
@@ -37,4 +40,4 @@ export interface TabBarProps<Tab extends TabBarTab> {
  *
  * Links stay the app's own (`renderLink`), so the bar works with any router.
  */
-export declare function TabBar<Tab extends TabBarTab>({ tabs, active, renderLink, search, label, className, minimizeBehavior, }: TabBarProps<Tab>): import("react").JSX.Element;
+export declare function TabBar<Tab extends TabBarTab>({ tabs, active, renderLink, search, label, className, size, minimizeBehavior, }: TabBarProps<Tab>): import("react").JSX.Element;

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

@@ -1,5 +1,8 @@
 import type * as React from "react";
-declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+export type TableSize = "sm" | "md" | "lg";
+declare function Table({ className, size, ...props }: React.ComponentProps<"table"> & {
+    /** Row height, cell padding and text scale. @default "md" */ size?: TableSize;
+}): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
 declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;

package/dist/types/src/components/text-editor/text-editor.d.ts

@@ -1,2 +1,9 @@
 import type { ComponentProps } from "react";
-export declare function TextEditor({ className, ...props }: ComponentProps<"textarea">): import("react").JSX.Element;
+import { type TextFieldSize } from "../text-field/text-field";
+export type TextEditorSize = TextFieldSize;
+export interface TextEditorProps extends Omit<ComponentProps<"textarea">, "size"> {
+    /** Field surface scale; matches TextField's xs | sm | md | lg. @default "md" */
+    size?: TextEditorSize;
+}
+/** A multi-line text field that reuses TextField's shared surface treatment. */
+export declare function TextEditor({ className, size, ...props }: TextEditorProps): import("react").JSX.Element;

package/dist/types/src/components/text-field/text-field.d.ts

@@ -3,6 +3,14 @@ import { type ComponentProps, type ReactNode } from "react";
 export declare const textControlClasses: string;
 /** Size scale shared across TextField, SecureField, and form fields. */
 export type TextFieldSize = "xs" | "sm" | "md" | "lg";
+export interface FieldSize {
+    height: string;
+    floatingHeight: string;
+    padding: string;
+    text: string;
+    radius: string;
+}
+export declare function fieldSize(size: TextFieldSize): FieldSize;
 export type TextFieldProps = Omit<ComponentProps<"input">, "size"> & {
     label: string;
     description?: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.37",
+    "version": "0.1.39",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {
@@ -300,7 +300,7 @@
         "clsx": "^2.1.1",
         "tailwind-merge": "^3.7.0",
         "tw-animate-css": "^1.4.0",
-        "@passui/tokens": "^0.1.1"
+        "@passui/tokens": "^0.1.3"
     },
     "types": "./dist/types/src/index.d.ts",
     "sideEffects": [

package/src/components/compact-date-picker/compact-date-picker.tsx

@@ -6,7 +6,7 @@ import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../../icons/ico
 import { cn } from "../../lib/class-names"
 import { haptic } from "../../lib/haptics"
 import { IconButton } from "../button/icon-button"
-import { pickerTriggerStyle } from "../picker/picker-trigger"
+import { pickerTriggerStyle, type PickerSize } from "../picker/picker-trigger"
 import {
     addDays,
     addMonths,
@@ -38,6 +38,8 @@ export interface CompactDatePickerProps {
     className?: string
     /** Prevents opening the date panel. @default false */
     disabled?: boolean
+    /** Trigger button density; matches Picker's sm | md | lg. @default "md" */
+    size?: PickerSize
 }
 
 const WIDTH = 308
@@ -69,6 +71,7 @@ export function CompactDatePicker({
     labels,
     className,
     disabled = false,
+    size = "md",
 }: CompactDatePickerProps) {
     const panel = useAnchoredDisclosure(disabled)
     const { open } = panel
@@ -98,7 +101,7 @@ export function CompactDatePicker({
                 aria-controls={open && !disabled ? calendarId : undefined}
                 disabled={disabled}
                 onClick={() => panel.toggle()}
-                className={pickerTriggerStyle(className)}
+                className={pickerTriggerStyle(className, size)}
             >
                 <span
                     className={cn(

package/src/components/compact-time-picker/compact-time-picker.tsx

@@ -5,7 +5,7 @@ import { createPortal } from "react-dom"
 import { ClockIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
 import { haptic } from "../../lib/haptics"
-import { pickerTriggerStyle } from "../picker/picker-trigger"
+import { pickerTriggerStyle, type PickerSize } from "../picker/picker-trigger"
 import {
     formatTime,
     fromTwelveHours,
@@ -31,6 +31,8 @@ export interface CompactTimePickerProps {
     className?: string
     /** Prevents opening the time panel. @default false */
     disabled?: boolean
+    /** Trigger button density; matches Picker's sm | md | lg. @default "md" */
+    size?: PickerSize
 }
 
 /**
@@ -48,6 +50,7 @@ export function CompactTimePicker({
     labels,
     className,
     disabled = false,
+    size = "md",
 }: CompactTimePickerProps) {
     const panel = useAnchoredDisclosure(disabled)
     const { open } = panel
@@ -73,7 +76,7 @@ export function CompactTimePicker({
                 aria-controls={open && !disabled ? panelId : undefined}
                 disabled={disabled}
                 onClick={() => panel.toggle()}
-                className={pickerTriggerStyle(className)}
+                className={pickerTriggerStyle(className, size)}
             >
                 <span
                     className={cn(

package/src/components/search-field/search-field.tsx

@@ -3,13 +3,28 @@ import { SearchIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
 import { ExpandingSearchField } from "./expanding-search-field"
 
-export interface SearchFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+export type SearchFieldSize = "sm" | "md" | "lg"
+
+const pillSizes: Record<SearchFieldSize, string> = {
+    sm: "control-field flex items-center gap-1.5 rounded-full px-2.5 py-1 text-caption text-label-tertiary",
+    md: "control-field flex items-center gap-2 rounded-full px-3 py-2 text-subheadline text-label-tertiary",
+    lg: "control-field flex items-center gap-2.5 rounded-full px-4 py-2.5 text-body text-label-tertiary",
+}
+const iconSizes: Record<SearchFieldSize, number> = {
+    sm: 13,
+    md: 15,
+    lg: 17,
+}
+
+export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** Expand a single pill from its search icon on focus. @default false */
     collapsible?: boolean
+    /** Pill height, icon size and text scale (non-collapsible variant). @default "md" */
+    size?: SearchFieldSize
 }
 
 export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(
-    { className, placeholder = "Search", collapsible = false, ...props },
+    { className, placeholder = "Search", collapsible = false, size = "md", ...props },
     ref
 ) {
     if (collapsible)
@@ -25,14 +40,9 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(functi
         ? undefined
         : (props["aria-label"] ?? placeholder)
     return (
-        <label
-            className={cn(
-                "control-field flex items-center gap-2 rounded-full px-3 py-2 text-subheadline text-label-tertiary",
-                className
-            )}
-        >
+        <label className={cn(pillSizes[size], className)}>
             <span aria-hidden="true" className="shrink-0">
-                <SearchIcon size={15} strokeWidth={2} />
+                <SearchIcon size={iconSizes[size]} strokeWidth={2} />
             </span>
             <input
                 ref={ref}

package/src/components/tab-bar/tab-bar.tsx

@@ -20,6 +20,33 @@ export interface TabBarLinkProps {
 }
 
 export type TabBarMinimizeBehavior = "platform" | "scroll" | "never"
+export type TabBarSize = "sm" | "md" | "lg"
+
+const tabHeights: Record<TabBarSize, string> = {
+    sm: "h-9",
+    md: "h-11",
+    lg: "h-13",
+}
+const tabMinimizedWidths: Record<TabBarSize, string> = {
+    sm: "w-9",
+    md: "w-11",
+    lg: "w-13",
+}
+const tabText: Record<TabBarSize, string> = {
+    sm: "text-caption",
+    md: "text-caption2",
+    lg: "text-subheadline",
+}
+const searchButtonSizes: Record<TabBarSize, string> = {
+    sm: "size-10",
+    md: "size-12",
+    lg: "size-14",
+}
+const searchIconSizes: Record<TabBarSize, number> = {
+    sm: 17,
+    md: 19,
+    lg: 21,
+}
 
 export interface TabBarProps<Tab extends TabBarTab> {
     /** `platform` follows the platform, `scroll` always minimizes, `never` stays expanded. @default "platform" */
@@ -32,6 +59,8 @@ export interface TabBarProps<Tab extends TabBarTab> {
     search?: { label: string; onPress: () => void }
     /** Accessible name for the navigation. */
     label: string
+    /** Tab height, label text, minimized width and search button diameter. @default "md" */
+    size?: TabBarSize
     className?: string
 }
 
@@ -51,6 +80,7 @@ export function TabBar<Tab extends TabBarTab>({
     search,
     label,
     className,
+    size = "md",
     minimizeBehavior = "platform",
 }: TabBarProps<Tab>) {
     // Scopes the sliding selection to this bar, so two bars on one
@@ -97,8 +127,10 @@ export function TabBar<Tab extends TabBarTab>({
                                 // Switching tabs is silent, as on Apple and Android: no haptic.
                                 onClick: () => {},
                                 className: cn(
-                                    "relative isolate flex h-11 min-w-0 flex-col items-center justify-center gap-0.5 rounded-full font-semibold text-caption2 tracking-[0.01em] no-underline transition-[color,transform] duration-fast active:scale-[0.94]",
-                                    minimized ? "w-11" : "flex-1 px-1",
+                                    "relative isolate flex min-w-0 flex-col items-center justify-center gap-0.5 rounded-full font-semibold tracking-[0.01em] no-underline transition-[color,transform] duration-fast active:scale-[0.94]",
+                                    tabHeights[size],
+                                    tabText[size],
+                                    minimized ? tabMinimizedWidths[size] : "flex-1 px-1",
                                     current ? "text-accent-text" : "text-label-secondary"
                                 ),
                                 children: (
@@ -133,10 +165,11 @@ export function TabBar<Tab extends TabBarTab>({
                     aria-label={search.label}
                     onClick={search.onPress}
                     className={cn(
-                        "glass ms-auto flex size-12 shrink-0 items-center justify-center rounded-full text-label transition-transform duration-fast active:scale-[0.92]"
+                        "glass ms-auto flex shrink-0 items-center justify-center rounded-full text-label transition-transform duration-fast active:scale-[0.92]",
+                        searchButtonSizes[size]
                     )}
                 >
-                    <SearchIcon size={19} strokeWidth={2} />
+                    <SearchIcon size={searchIconSizes[size]} strokeWidth={2} />
                 </button>
             )}
         </nav>

package/src/components/table/table.tsx

@@ -1,15 +1,46 @@
+import { createContext, useContext } from "react"
 import type * as React from "react"
 
 import { cn } from "../../lib/class-names"
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+export type TableSize = "sm" | "md" | "lg"
+
+const tableText: Record<TableSize, string> = {
+    sm: "text-footnote text-label",
+    md: "text-subheadline text-label",
+    lg: "text-body text-label",
+}
+const headCell: Record<TableSize, string> = {
+    sm: "h-8 px-2 text-start align-middle text-caption2 font-semibold whitespace-nowrap",
+    md: "h-10 px-3 text-start align-middle text-footnote font-semibold whitespace-nowrap",
+    lg: "h-12 px-4 text-start align-middle text-subheadline font-semibold whitespace-nowrap",
+}
+const bodyCell: Record<TableSize, string> = {
+    sm: "px-2 py-1.5 align-middle whitespace-nowrap",
+    md: "px-3 py-2.5 align-middle whitespace-nowrap",
+    lg: "px-4 py-3.5 align-middle whitespace-nowrap",
+}
+const captionText: Record<TableSize, string> = {
+    sm: "mt-3 text-caption2 text-label-secondary",
+    md: "mt-4 text-footnote text-label-secondary",
+    lg: "mt-5 text-subheadline text-label-secondary",
+}
+
+const TableSizeContext = createContext<TableSize>("md")
+const useTableSize = () => useContext(TableSizeContext)
+
+function Table({
+    className,
+    size = "md",
+    ...props
+}: React.ComponentProps<"table"> & {
+    /** Row height, cell padding and text scale. @default "md" */ size?: TableSize
+}) {
     return (
         <div data-slot="table-container" className="relative w-full overflow-x-auto">
-            <table
-                data-slot="table"
-                className={cn("w-full caption-bottom text-subheadline text-label", className)}
-                {...props}
-            />
+            <TableSizeContext value={size}>
+                <table data-slot="table" className={cn(tableText[size], className)} {...props} />
+            </TableSizeContext>
         </div>
     )
 }
@@ -62,11 +93,12 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+    const size = useTableSize()
     return (
         <th
             data-slot="table-head"
             className={cn(
-                "h-10 px-3 text-start align-middle text-footnote font-semibold whitespace-nowrap",
+                headCell[size],
                 "text-label-secondary has-[[role=checkbox]]:pe-0",
                 className
             )}
@@ -76,23 +108,22 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+    const size = useTableSize()
     return (
         <td
             data-slot="table-cell"
-            className={cn(
-                "px-3 py-2.5 align-middle whitespace-nowrap has-[[role=checkbox]]:pe-0",
-                className
-            )}
+            className={cn(bodyCell[size], "has-[[role=checkbox]]:pe-0", className)}
             {...props}
         />
     )
 }
 
 function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+    const size = useTableSize()
     return (
         <caption
             data-slot="table-caption"
-            className={cn("mt-4 text-footnote text-label-secondary", className)}
+            className={cn(captionText[size], className)}
             {...props}
         />
     )

package/src/components/text-editor/text-editor.tsx

@@ -1,9 +1,37 @@
 import type { ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
-import { textControlClasses } from "../text-field/text-field"
+import { fieldSize, type TextFieldSize } from "../text-field/text-field"
 
-export function TextEditor({ className, ...props }: ComponentProps<"textarea">) {
+const minHeights: Record<TextFieldSize, string> = {
+    xs: "min-h-24",
+    sm: "min-h-24",
+    md: "min-h-28",
+    lg: "min-h-32",
+}
+
+export type TextEditorSize = TextFieldSize
+
+export interface TextEditorProps extends Omit<ComponentProps<"textarea">, "size"> {
+    /** Field surface scale; matches TextField's xs | sm | md | lg. @default "md" */
+    size?: TextEditorSize
+}
+
+/** A multi-line text field that reuses TextField's shared surface treatment. */
+export function TextEditor({ className, size = "md", ...props }: TextEditorProps) {
+    const surface = fieldSize(size)
     return (
-        <textarea {...props} className={cn(textControlClasses, "min-h-28 resize-y", className)} />
+        <textarea
+            {...props}
+            className={cn(
+                "w-full min-w-0 resize-y border border-separator bg-elevated text-label placeholder:text-label-tertiary",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+                "disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger",
+                surface.radius,
+                surface.padding,
+                surface.text,
+                minHeights[size],
+                className
+            )}
+        />
     )
 }

package/src/components/text-field/text-field.tsx

@@ -15,7 +15,7 @@ const fieldIconClasses = "flex shrink-0 items-center text-label-secondary"
 /** Size scale shared across TextField, SecureField, and form fields. */
 export type TextFieldSize = "xs" | "sm" | "md" | "lg"
 
-interface FieldSize {
+export interface FieldSize {
     height: string
     floatingHeight: string
     padding: string
@@ -23,7 +23,7 @@ interface FieldSize {
     radius: string
 }
 
-function fieldSize(size: TextFieldSize): FieldSize {
+export function fieldSize(size: TextFieldSize): FieldSize {
     switch (size) {
         case "xs":
             return {