@passui/react 0.1.38 → 0.1.39

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.38",
+    "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/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}
         />
     )