@passui/react 0.1.37 → 0.1.38

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

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/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 {