@passui/react 0.1.26 → 0.1.27

package/dist/types/src/components/segmented-control/segmented-control.d.ts

@@ -10,6 +10,8 @@ export interface SegmentedControlProps<T extends string> {
     onChange: (value: NoInfer<T>) => void;
     /** Accessible name for the group and its compact picker. */
     label: string;
+    /** Custom classes for the control container. */
+    className?: string;
 }
 /**
  * Mutually exclusive choices with a sliding selection, as on Apple
@@ -17,4 +19,4 @@ export interface SegmentedControlProps<T extends string> {
  * translation, a narrow pane) it becomes a pop-up button instead of
  * squeezing or spilling its text.
  */
-export declare function SegmentedControl<T extends string>({ value, options, onChange, label, }: SegmentedControlProps<T>): import("react").JSX.Element;
+export declare function SegmentedControl<T extends string>({ value, options, onChange, label, className, }: SegmentedControlProps<T>): import("react").JSX.Element;

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

@@ -10,6 +10,8 @@ export interface StatTileProps {
     /** Makes the tile a toggle, e.g. a filter. */
     onClick?: () => void;
     active?: boolean;
+    /** Custom classes for the tile container. */
+    className?: string;
 }
 /** One number with its label, optionally a toggle. */
-export declare function StatTile({ label, value, caption, tone, onClick, active }: StatTileProps): import("react").JSX.Element;
+export declare function StatTile({ label, value, caption, tone, onClick, active, className, }: StatTileProps): import("react").JSX.Element;

package/dist/types/src/components/swatch-picker/swatch-picker.d.ts

@@ -12,6 +12,8 @@ export interface SwatchPickerProps<T extends string> {
     onChange: (value: T) => void;
     /** Accessible name for the group. */
     label: string;
+    /** Custom classes for the swatch container. */
+    className?: string;
 }
 /** Colour swatches with a check on the chosen one. */
-export declare function SwatchPicker<T extends string>({ value, options, onChange, label, }: SwatchPickerProps<T>): import("react").JSX.Element;
+export declare function SwatchPicker<T extends string>({ value, options, onChange, label, className, }: SwatchPickerProps<T>): import("react").JSX.Element;

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

@@ -1,6 +1,9 @@
 import { type ComponentProps, type ReactNode } from "react";
+/** Shared text control classes for components that reuse TextField's surface. */
 export declare const textControlClasses: string;
-export type TextFieldProps = ComponentProps<"input"> & {
+/** Size scale shared across TextField, SecureField, and form fields. */
+export type TextFieldSize = "xs" | "sm" | "md" | "lg";
+export type TextFieldProps = Omit<ComponentProps<"input">, "size"> & {
     label: string;
     description?: ReactNode;
     errors?: string[];
@@ -16,5 +19,7 @@ export type TextFieldProps = ComponentProps<"input"> & {
     };
     /** Float the label into the outline on focus or when filled. @default "above" */
     labelPlacement?: "above" | "floating";
+    /** Field height and text scale. @default "md" */
+    size?: TextFieldSize;
 };
-export declare function TextField({ label, description, errors, icon, trailingIcon, action, revealLabels, labelPlacement, placeholder, type, id: suppliedId, className, ...props }: TextFieldProps): import("react").JSX.Element;
+export declare function TextField({ label, description, errors, icon, trailingIcon, action, revealLabels, labelPlacement, size, placeholder, type, id: suppliedId, className, ...props }: TextFieldProps): import("react").JSX.Element;

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

@@ -13,5 +13,7 @@ export interface ToggleProps {
     mixed?: boolean;
     /** Keeps the accessible name while hiding the visible label. @default false */
     labelHidden?: boolean;
+    /** Custom classes for the toggle container. */
+    className?: string;
 }
-export declare function Toggle({ checked, onChange, label, disabled, style, mixed, labelHidden, }: ToggleProps): import("react").JSX.Element;
+export declare function Toggle({ checked, onChange, label, disabled, style, mixed, labelHidden, className, }: ToggleProps): import("react").JSX.Element;

package/package.json

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

package/src/components/segmented-control/segmented-control.tsx

@@ -14,6 +14,8 @@ export interface SegmentedControlProps<T extends string> {
     onChange: (value: NoInfer<T>) => void
     /** Accessible name for the group and its compact picker. */
     label: string
+    /** Custom classes for the control container. */
+    className?: string
 }
 
 /**
@@ -27,6 +29,7 @@ export function SegmentedControl<T extends string>({
     options,
     onChange,
     label,
+    className,
 }: SegmentedControlProps<T>) {
     const id = useId()
     const reducedMotion = useReducedMotion()
@@ -47,7 +50,7 @@ export function SegmentedControl<T extends string>({
     }, [])
 
     return (
-        <div ref={frame} className="relative w-full min-w-0">
+        <div ref={frame} className={cn("relative w-full min-w-0", className)}>
             {/* The control at its natural size, to know whether it fits. */}
             <div
                 ref={measure}

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

@@ -13,10 +13,20 @@ export interface StatTileProps {
     /** Makes the tile a toggle, e.g. a filter. */
     onClick?: () => void
     active?: boolean
+    /** Custom classes for the tile container. */
+    className?: string
 }
 
 /** One number with its label, optionally a toggle. */
-export function StatTile({ label, value, caption, tone, onClick, active = false }: StatTileProps) {
+export function StatTile({
+    label,
+    value,
+    caption,
+    tone,
+    onClick,
+    active = false,
+    className,
+}: StatTileProps) {
     const body = (
         <>
             <span className="text-label-secondary">{label}</span>
@@ -26,17 +36,19 @@ export function StatTile({ label, value, caption, tone, onClick, active = false
             {caption && <span className="text-label-secondary">{caption}</span>}
         </>
     )
-    const className =
-        "flex min-w-0 flex-col gap-2 rounded-2xl border border-separator/35 bg-elevated p-4 text-left shadow-xs"
+    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",
+        className
+    )
 
-    if (!onClick) return <div className={className}>{body}</div>
+    if (!onClick) return <div className={tileClass}>{body}</div>
     return (
         <button
             type="button"
             aria-pressed={active}
             onClick={onClick}
             className={cn(
-                className,
+                tileClass,
                 "ring-1 ring-transparent transition-colors hover:bg-fill/60",
                 active && "bg-fill/70 ring-label/15"
             )}

package/src/components/swatch-picker/swatch-picker.tsx

@@ -20,6 +20,8 @@ export interface SwatchPickerProps<T extends string> {
     onChange: (value: T) => void
     /** Accessible name for the group. */
     label: string
+    /** Custom classes for the swatch container. */
+    className?: string
 }
 
 /** Colour swatches with a check on the chosen one. */
@@ -28,10 +30,11 @@ export function SwatchPicker<T extends string>({
     options,
     onChange,
     label,
+    className,
 }: SwatchPickerProps<T>) {
     const name = useId()
     return (
-        <fieldset className="flex flex-wrap gap-3">
+        <fieldset className={cn("flex flex-wrap gap-3", className)}>
             <legend className="sr-only">{label}</legend>
             {options.map((option) => {
                 const selected = option.value === value

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

@@ -2,6 +2,7 @@ import { type ComponentProps, type ReactNode, useId, useState } from "react"
 import { Button } from "../button/button"
 import { cn } from "../../lib/class-names"
 
+/** Shared text control classes for components that reuse TextField's surface. */
 export const textControlClasses = cn(
     "w-full min-w-0 rounded-xl border border-separator bg-elevated",
     "px-3 py-2 text-body text-label placeholder:text-label-tertiary",
@@ -11,7 +12,55 @@ export const textControlClasses = cn(
 
 const fieldIconClasses = "flex shrink-0 items-center text-label-secondary"
 
-export type TextFieldProps = ComponentProps<"input"> & {
+/** Size scale shared across TextField, SecureField, and form fields. */
+export type TextFieldSize = "xs" | "sm" | "md" | "lg"
+
+interface FieldSize {
+    height: string
+    floatingHeight: string
+    padding: string
+    text: string
+    radius: string
+}
+
+function fieldSize(size: TextFieldSize): FieldSize {
+    switch (size) {
+        case "xs":
+            return {
+                height: "h-8",
+                floatingHeight: "h-9",
+                padding: "px-2.5",
+                text: "text-caption",
+                radius: "rounded-lg",
+            }
+        case "sm":
+            return {
+                height: "h-9",
+                floatingHeight: "h-10",
+                padding: "px-3",
+                text: "text-subheadline",
+                radius: "rounded-xl",
+            }
+        case "lg":
+            return {
+                height: "h-12",
+                floatingHeight: "h-14",
+                padding: "px-4",
+                text: "text-body",
+                radius: "rounded-xl",
+            }
+        default:
+            return {
+                height: "h-11",
+                floatingHeight: "h-12",
+                padding: "px-3",
+                text: "text-body",
+                radius: "rounded-xl",
+            }
+    }
+}
+
+export type TextFieldProps = Omit<ComponentProps<"input">, "size"> & {
     label: string
     description?: ReactNode
     errors?: string[]
@@ -24,6 +73,8 @@ export type TextFieldProps = ComponentProps<"input"> & {
     revealLabels?: { show: string; hide: string }
     /** Float the label into the outline on focus or when filled. @default "above" */
     labelPlacement?: "above" | "floating"
+    /** Field height and text scale. @default "md" */
+    size?: TextFieldSize
 }
 
 export function TextField({
@@ -35,6 +86,7 @@ export function TextField({
     action,
     revealLabels,
     labelPlacement = "above",
+    size = "md",
     placeholder,
     type = "text",
     id: suppliedId,
@@ -46,6 +98,7 @@ export function TextField({
     const [revealed, setRevealed] = useState(false)
     const messages = Array.from(new Set(errors))
     const reveal = type === "password" && revealLabels
+    const dims = fieldSize(size)
     return (
         <div className="not-typeset flex flex-col gap-2">
             {labelPlacement === "above" && (
@@ -55,7 +108,7 @@ export function TextField({
             )}
             <div
                 className={cn(
-                    "relative flex items-center gap-2 rounded-xl bg-elevated px-3",
+                    `relative flex items-center gap-2 ${dims.padding} ${dims.radius} bg-elevated`,
                     labelPlacement === "floating"
                         ? "passui-floating-field"
                         : "border border-separator focus-within:ring-1 focus-within:ring-accent/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent-text/70"
@@ -99,8 +152,9 @@ export function TextField({
                             .join(" ") || undefined
                     }
                     className={cn(
-                        "h-11 w-full min-w-0 bg-transparent text-body text-label outline-none",
-                        labelPlacement === "floating" && "h-12",
+                        labelPlacement === "floating" ? dims.floatingHeight : dims.height,
+                        "w-full min-w-0 bg-transparent text-label outline-none",
+                        dims.text,
                         "placeholder:text-label-tertiary disabled:opacity-40",
                         className
                     )}

package/src/components/toggle/toggle.tsx

@@ -28,6 +28,8 @@ export interface ToggleProps {
     mixed?: boolean
     /** Keeps the accessible name while hiding the visible label. @default false */
     labelHidden?: boolean
+    /** Custom classes for the toggle container. */
+    className?: string
 }
 
 export function Toggle({
@@ -38,6 +40,7 @@ export function Toggle({
     style = "switch",
     mixed = false,
     labelHidden = false,
+    className,
 }: ToggleProps) {
     const input = useRef<HTMLInputElement>(null)
     useEffect(() => {
@@ -48,7 +51,8 @@ export function Toggle({
             <label
                 className={cn(
                     "flex cursor-pointer items-center gap-3 text-subheadline",
-                    disabled && "cursor-not-allowed opacity-40"
+                    disabled && "cursor-not-allowed opacity-40",
+                    className
                 )}
             >
                 <span className="relative inline-flex size-5 shrink-0">
@@ -82,7 +86,15 @@ export function Toggle({
             </label>
         )
     }
-    return <SwitchToggle checked={checked} onChange={onChange} label={label} disabled={disabled} />
+    return (
+        <SwitchToggle
+            checked={checked}
+            onChange={onChange}
+            label={label}
+            disabled={disabled}
+            className={className}
+        />
+    )
 }
 
 function SwitchToggle({
@@ -90,7 +102,8 @@ function SwitchToggle({
     onChange,
     label,
     disabled,
-}: Pick<ToggleProps, "checked" | "onChange" | "label" | "disabled">) {
+    className,
+}: Pick<ToggleProps, "checked" | "onChange" | "label" | "disabled" | "className">) {
     const reducedMotion = useReducedMotion()
     const id = `toggle-goo-${useId().replace(/:/g, "")}`
     const x = useMotionValue(checked ? 22 : 2)
@@ -163,7 +176,8 @@ function SwitchToggle({
             className={cn(
                 "relative h-[30px] w-[50px] shrink-0 touch-pan-y rounded-full transition-colors duration-normal motion-reduce:transition-none",
                 "shadow-[inset_0_1px_2px_rgb(0_0_0/0.10)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:opacity-45",
-                checked ? "bg-accent" : "bg-separator/80"
+                checked ? "bg-accent" : "bg-separator/80",
+                className
             )}
         >
             <svg aria-hidden="true" width="0" height="0" className="absolute">