@dragunio/fe-libs 0.1.8 → 0.1.9

package/README.md

@@ -56,6 +56,8 @@ Available review routes:
 - `http://127.0.0.1:3000/#/datetime` — DateTimePicker
 - `http://127.0.0.1:3000/#/currency` — CurrencyInput
 - `http://127.0.0.1:3000/#/number` — NumberInput
+- `http://127.0.0.1:3000/#/file-upload` — FileUpload
+- `http://127.0.0.1:3000/#/file-preview` — FilePreview
 - `http://127.0.0.1:3000/#/tooltip` — Tooltip
 - `http://127.0.0.1:3000/#/expandable` — ExpandableSection
 - `http://127.0.0.1:3000/#/loading` — Loading
@@ -65,6 +67,7 @@ Available review routes:
 - `http://127.0.0.1:3000/#/chip` — Chip
 - `http://127.0.0.1:3000/#/avatar` — Avatar
 - `http://127.0.0.1:3000/#/text-input` — TextInput & TextArea
+- `http://127.0.0.1:3000/#/validated-inputs` — EmailInput, PasswordInput & PhoneNumberInput
 - `http://127.0.0.1:3000/#/pagination` — Pagination
 - `http://127.0.0.1:3000/#/message` — Message
 - `http://127.0.0.1:3000/#/snackbar` — Snackbar
@@ -191,14 +194,17 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
 
 ### New form and overlay primitives
 
-- `Drawer` is a portal-based modal panel with `left`, `right`, `top`, and `bottom` slide-in animations. Use `fullScreen` for a full-viewport panel and `footer` for fixed actions below the scrollable body.
+- `Drawer` is a portal-based modal panel with `left`, `right`, `top`, and `bottom` slide-in animations. Use `DrawerWidths.small`, `.medium`, or `.large` (360px, 400px, 480px) with `width`, or provide any custom CSS width. Use `fullScreen` for a full-viewport panel and `footer` for fixed actions below the scrollable body. It automatically adapts to smaller screens: side drawers use the available viewport width, while top and bottom drawers become sheet-style panels.
 - `Selection` is a rounded custom dropdown inspired by DropdownCustom, with single/multiple modes, optional search, clear action, tags, form-field values, and keyboard navigation.
 - `DateTimePicker` supports `mode="single"` and `mode="range"`; its default format is `dd/MM/yyyy HH:mm`.
 - `NumberInput` and `CurrencyInput` format values immediately while typing (`1000` → `1,000`) and keep up to two fractional digits by default. Both include accessible up/down controls (and arrow-key support); use `step` or `showStepper` to configure them. `NumberInput` also accepts `prefix`/`suffix` adornments. Use `allowDecimal`, `decimals`, `min`, and `max` to control decimal input and numeric limits. Both support `error` and `errorMessage` with the same red border/message treatment as `TextInput`. `CurrencyInput` adds a `VND` suffix by default, or a currency dropdown through `currencies`.
+- `FileUpload` accepts browser `File` objects from selecting or dropping files. Choose its preset `accept` groups—such as `image`, `pdf`, `document`, `audio`, and `video`—instead of manually assembling MIME patterns; it validates them with `maxSize`, `maxFiles`, and duplicate checks locally, then emits `onChange`, `onAccept`, `onReject`, and `onRemove` synchronously. It deliberately contains no endpoint, request, `async`, or upload-progress behavior.
+- `FilePreview` is a local, portal-based File viewer. It displays the current file count in its backdrop header, supports buttons and ArrowLeft/ArrowRight navigation, calls `onEscape` then `onClose('escape')`, and reports `onDelete`/`onDownload` with the active `File`. Its Download action starts a direct local browser download—there is no endpoint or transport behavior.
 - `Tooltip` shows accessible content on hover and focus.
 - `ExpandableSection` provides controlled and uncontrolled expand/collapse behavior.
 - `TextInput` and `TextArea` support `error`/`errorMessage`, `helperText`, `clearable`, `onClear`, and `onValueChange`. `TextArea` also accepts `autosize` (default `false`) to grow with its content. `TextInput` also accepts `label`, `isRequired`, and `prefix`/`suffix` adornments. Passing a string to `error` shows it below the field and applies the error border.
-- `Modal` is a centered portal dialog in `small`, `medium`, `large`, `xlarge`, and `full` sizes. Its close control and `actions` are library `Button` instances.
+- `EmailInput`, `PasswordInput`, and `PhoneNumberInput` add their standard mailbox, show/hide password, and phone adornments. They validate their formats on blur by default; use `validateOn="change"` for immediate feedback and `validate={(value) => ...}` for an additional rule. Passwords require at least eight characters including uppercase, lowercase, and a number; phone numbers accept digits, spaces, parentheses, and plus signs, and require 7–15 digits.
+- `Modal` is a centered portal dialog in `small`, `medium`, `large`, `xlarge`, and `full` sizes. Its close control and `actions` are library `Button` instances. Modal and Drawer trap keyboard focus, lock background scrolling, return focus to their opener, and respect reduced-motion preferences. Use `initialFocusRef`, `restoreFocus`, `closeOnEscape`, and `closeOnBackdropClick` to customize that behavior.
 - `Loading` provides `small`, `medium`, and `large` circular indicators (or a custom pixel `size`); use `Skeleton.Circle` and `Skeleton.Square` with `size`, or `Skeleton.Box` and `Skeleton.Line` with `width` and `height`.
 - `ProgressBar` is determinate when `value` is supplied and renders an indeterminate back-and-forth animation when it is omitted.
 - `Chip` supports the standard `default`, `success`, `error`, `info`, and `warning` palettes, plus `color` for any CSS color and `subtle`, `solid`, or `outline` variants.
@@ -219,6 +225,17 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
   clearable
 />
 
+<EmailInput
+  label="Work email"
+  value={email}
+  onValueChange={setEmail}
+  validate={(value) =>
+    value.endsWith('@dragunio.com') || 'Use your work email.'
+  }
+/>
+<PasswordInput label="Password" />
+<PhoneNumberInput label="Phone number" placeholder="+84 (123) 456 789" />
+
 <ProgressBar label="Upload" value={72} />
 <ProgressBar label="Synchronising" />
 <Chip status="success" dot>Complete</Chip>

package/dist/{chunk-HM3V3DVO.mjs → chunk-BAZJ5UJ5.mjs}

@@ -169,6 +169,82 @@ function SearchIcon(props) {
     )
   ] });
 }
+function MailboxIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ jsx4(
+      "rect",
+      {
+        x: "3.5",
+        y: "5.5",
+        width: "17",
+        height: "13",
+        rx: "2",
+        stroke: "currentColor",
+        strokeWidth: "1.8"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "m4.5 7 6.04 4.53a2.4 2.4 0 0 0 2.92 0L19.5 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function PhoneIcon(props) {
+  return /* @__PURE__ */ jsx4("svg", { ...iconProps4(props), children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      d: "M8.05 3.75 5.84 4.8c-.76.36-1.15 1.2-.94 2.02 1.55 6.14 6.34 10.93 12.48 12.48.82.21 1.66-.18 2.02-.94l1.05-2.21a1.5 1.5 0 0 0-.57-1.91l-2.41-1.48a1.5 1.5 0 0 0-1.8.18l-1.23 1.06a10.38 10.38 0 0 1-4.45-4.45l1.06-1.23a1.5 1.5 0 0 0 .18-1.8L9.96 4.32a1.5 1.5 0 0 0-1.91-.57Z",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function EyeIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M2.9 12s3.1-5 9.1-5 9.1 5 9.1 5-3.1 5-9.1 5-9.1-5-9.1-5Z",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "2.4", stroke: "currentColor", strokeWidth: "1.8" })
+  ] });
+}
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M10.58 7.16A6.1 6.1 0 0 1 12 7c6 0 9.1 5 9.1 5a16.1 16.1 0 0 1-2.54 2.84M13.28 16.83A6.1 6.1 0 0 1 12 17c-6 0-9.1-5-9.1-5a16.1 16.1 0 0 1 2.59-2.87",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "m3.5 3.5 17 17M10.1 10.1a2.7 2.7 0 0 0 3.8 3.8",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
 
 export {
   plus,
@@ -194,5 +270,9 @@ export {
   CloseIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
-  SearchIcon
+  SearchIcon,
+  MailboxIcon,
+  PhoneIcon,
+  EyeIcon,
+  EyeOffIcon
 };

package/dist/icons.d.mts

@@ -31,5 +31,9 @@ declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function MoreHorizontalIcon(props: IconProps): react.JSX.Element;
 declare function MoreVerticalIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
+declare function MailboxIcon(props: IconProps): react.JSX.Element;
+declare function PhoneIcon(props: IconProps): react.JSX.Element;
+declare function EyeIcon(props: IconProps): react.JSX.Element;
+declare function EyeOffIcon(props: IconProps): react.JSX.Element;
 
-export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, EyeIcon, EyeOffIcon, type IconProps, MailboxIcon, MoreHorizontalIcon, MoreVerticalIcon, PhoneIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };

package/dist/icons.d.ts

@@ -31,5 +31,9 @@ declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function MoreHorizontalIcon(props: IconProps): react.JSX.Element;
 declare function MoreVerticalIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
+declare function MailboxIcon(props: IconProps): react.JSX.Element;
+declare function PhoneIcon(props: IconProps): react.JSX.Element;
+declare function EyeIcon(props: IconProps): react.JSX.Element;
+declare function EyeOffIcon(props: IconProps): react.JSX.Element;
 
-export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, EyeIcon, EyeOffIcon, type IconProps, MailboxIcon, MoreHorizontalIcon, MoreVerticalIcon, PhoneIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };

package/dist/icons.js

@@ -23,8 +23,12 @@ __export(icons_exports, {
   ChevronDownIcon: () => ChevronDownIcon,
   ChevronUpIcon: () => ChevronUpIcon,
   CloseIcon: () => CloseIcon,
+  EyeIcon: () => EyeIcon,
+  EyeOffIcon: () => EyeOffIcon,
+  MailboxIcon: () => MailboxIcon,
   MoreHorizontalIcon: () => MoreHorizontalIcon,
   MoreVerticalIcon: () => MoreVerticalIcon,
+  PhoneIcon: () => PhoneIcon,
   PlusIcon: () => PlusIcon,
   SearchIcon: () => SearchIcon,
   arrow_left: () => arrow_left,
@@ -218,13 +222,93 @@ function SearchIcon(props) {
     )
   ] });
 }
+function MailboxIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "rect",
+      {
+        x: "3.5",
+        y: "5.5",
+        width: "17",
+        height: "13",
+        rx: "2",
+        stroke: "currentColor",
+        strokeWidth: "1.8"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "m4.5 7 6.04 4.53a2.4 2.4 0 0 0 2.92 0L19.5 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function PhoneIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "path",
+    {
+      d: "M8.05 3.75 5.84 4.8c-.76.36-1.15 1.2-.94 2.02 1.55 6.14 6.34 10.93 12.48 12.48.82.21 1.66-.18 2.02-.94l1.05-2.21a1.5 1.5 0 0 0-.57-1.91l-2.41-1.48a1.5 1.5 0 0 0-1.8.18l-1.23 1.06a10.38 10.38 0 0 1-4.45-4.45l1.06-1.23a1.5 1.5 0 0 0 .18-1.8L9.96 4.32a1.5 1.5 0 0 0-1.91-.57Z",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function EyeIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "M2.9 12s3.1-5 9.1-5 9.1 5 9.1 5-3.1 5-9.1 5-9.1-5-9.1-5Z",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "2.4", stroke: "currentColor", strokeWidth: "1.8" })
+  ] });
+}
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "M10.58 7.16A6.1 6.1 0 0 1 12 7c6 0 9.1 5 9.1 5a16.1 16.1 0 0 1-2.54 2.84M13.28 16.83A6.1 6.1 0 0 1 12 17c-6 0-9.1-5-9.1-5a16.1 16.1 0 0 1 2.59-2.87",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        d: "m3.5 3.5 17 17M10.1 10.1a2.7 2.7 0 0 0 3.8 3.8",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,

package/dist/icons.mjs

@@ -2,8 +2,12 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,
@@ -23,13 +27,17 @@ import {
   search,
   trash,
   x_close
-} from "./chunk-HM3V3DVO.mjs";
+} from "./chunk-BAZJ5UJ5.mjs";
 export {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, MouseEvent, KeyboardEvent, TableHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
-export { ChevronDownIcon, ChevronUpIcon, CloseIcon, IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.mjs';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, MouseEvent, KeyboardEvent, TableHTMLAttributes, InputHTMLAttributes, RefObject, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
+export { ChevronDownIcon, ChevronUpIcon, CloseIcon, EyeIcon, EyeOffIcon, IconProps, MailboxIcon, MoreHorizontalIcon, MoreVerticalIcon, PhoneIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.mjs';
 
 type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
 type ButtonSize = '24' | '32' | '40';
@@ -183,22 +183,39 @@ declare const Toggle: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<H
     labelPosition?: "top" | "right";
 } & react.RefAttributes<HTMLInputElement>>;
 
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+/** Named width presets for left and right drawers. */
+declare const DrawerWidths: {
+    readonly small: 360;
+    readonly medium: 400;
+    readonly large: 480;
+};
+type DrawerWidthPreset = (typeof DrawerWidths)[keyof typeof DrawerWidths];
+type DrawerWidth = DrawerWidthPreset | number | string;
 type DrawerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
     open: boolean;
     onClose: () => void;
     title?: ReactNode;
+    description?: ReactNode;
     /** Optional content pinned below the scrollable body. */
     footer?: ReactNode;
-    side?: 'left' | 'right' | 'top' | 'bottom';
-    /** Width of a left/right drawer. Defaults to 400px. */
-    width?: number | string;
+    side?: DrawerSide;
+    /** Width of a left/right drawer. Use DrawerWidths presets or any CSS width. Defaults to DrawerWidths.medium (400px). */
+    width?: DrawerWidth;
     /** Makes the panel fill the entire viewport while retaining the chosen entrance direction. */
     fullScreen?: boolean;
     children?: ReactNode;
     closeOnBackdropClick?: boolean;
+    /** Allows Escape to request closing the drawer. Defaults to true. */
+    closeOnEscape?: boolean;
+    closeLabel?: string;
+    /** Element that receives focus when the drawer opens. The dialog itself is focused by default. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Restores focus to the opener after closing. Defaults to true. */
+    restoreFocus?: boolean;
 };
 /** A modal panel with fixed header/footer regions and a scrollable body. */
-declare function Drawer({ open, onClose, title, footer, side, width, fullScreen, children, closeOnBackdropClick, className, style, ...props }: DrawerProps): react.ReactPortal | null;
+declare function Drawer({ open, onClose, title, description, footer, side, width, fullScreen, children, closeOnBackdropClick, closeOnEscape, closeLabel, initialFocusRef, restoreFocus, className, style, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, ...props }: DrawerProps): react.ReactPortal | null;
 
 type FieldError = boolean | ReactNode;
 type DescriptionDisplay = 'inline' | 'tooltip';
@@ -251,6 +268,63 @@ type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'valu
     Suffix?: ReactNode;
 };
 
+/**
+ * Return a message (or `false`) to mark a value invalid. Return `undefined`,
+ * `null`, or `true` when the value is valid.
+ */
+type InputValidator = (value: string) => string | boolean | null | undefined;
+type ValidationTiming = 'blur' | 'change';
+/** Shared public props for inputs with built-in format validation. */
+type ValidatedTextInputProps = Omit<TextInputProps, 'type' | 'prefix' | 'suffix' | 'Prefix' | 'Suffix'> & {
+    /**
+     * Extra validation run after the built-in format check. Return an error
+     * message (or `false`) when invalid.
+     */
+    validate?: InputValidator;
+    /** When validation runs. It runs on blur by default. */
+    validateOn?: ValidationTiming;
+};
+
+declare function validateEmail(value: string, required?: boolean): string | undefined;
+declare function validatePassword(value: string, required?: boolean): string | undefined;
+declare function validatePhoneNumber(value: string, required?: boolean): string | undefined;
+declare function normalizePhoneNumber(value: string): string;
+
+/** An email field with a mailbox prefix and built-in format validation. */
+declare const EmailInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "prefix" | "type" | "suffix" | "Prefix" | "Suffix"> & {
+    validate?: InputValidator;
+    validateOn?: ValidationTiming;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type EmailInputProps = ValidatedTextInputProps;
+
+/** A password field with reveal/hide control and built-in strength validation. */
+declare const PasswordInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "prefix" | "type" | "suffix" | "Prefix" | "Suffix"> & {
+    validate?: InputValidator;
+    validateOn?: ValidationTiming;
+} & {
+    showPasswordLabel?: string;
+    hidePasswordLabel?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type PasswordInputProps = ValidatedTextInputProps & {
+    /** Accessible label for the control that reveals the password. */
+    showPasswordLabel?: string;
+    /** Accessible label for the control that hides the password. */
+    hidePasswordLabel?: string;
+};
+
+/**
+ * A phone field that accepts digits, spaces, parentheses, and plus signs,
+ * with built-in digit-count validation.
+ */
+declare const PhoneNumberInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "prefix" | "type" | "suffix" | "Prefix" | "Suffix"> & {
+    validate?: InputValidator;
+    validateOn?: ValidationTiming;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type PhoneNumberInputProps = ValidatedTextInputProps;
+
 /** A multi-line text field with helper/error text and a Button-powered clear action. */
 declare const TextArea: react.ForwardRefExoticComponent<Omit<react.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue"> & FieldBaseProps & {
     clearable?: boolean;
@@ -571,11 +645,17 @@ type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
     actions?: ModalAction[];
     size?: ModalSize;
     closeOnBackdropClick?: boolean;
+    /** Allows Escape to request closing the modal. Defaults to true. */
+    closeOnEscape?: boolean;
     closeButton?: boolean;
     closeLabel?: string;
+    /** Element that receives focus when the modal opens. The dialog itself is focused by default. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Restores focus to the opener after closing. Defaults to true. */
+    restoreFocus?: boolean;
 };
 /** A centered, portal-based dialog with Button-powered close and footer actions. */
-declare function Modal({ open, onClose, title, description, children, footer, actions, size, closeOnBackdropClick, closeButton, closeLabel, className, ...props }: ModalProps): react.ReactPortal | null;
+declare function Modal({ open, onClose, title, description, children, footer, actions, size, closeOnBackdropClick, closeOnEscape, closeButton, closeLabel, initialFocusRef, restoreFocus, className, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, ...props }: ModalProps): react.ReactPortal | null;
 
 type ProgressBarSize = 'small' | 'medium' | 'large';
 type ProgressBarProps = HTMLAttributes<HTMLDivElement> & {
@@ -718,4 +798,143 @@ declare function Avatar({ src, content, alt, size, shape, fallbackIndex, classNa
  */
 declare function AvatarGroup({ children, maxCount, className, style, role, ...props }: AvatarGroupProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };
+type FileUploadRejectionCode = 'accept' | 'max-files' | 'max-size' | 'duplicate';
+type FileUploadRejection = {
+    file: File;
+    code: FileUploadRejectionCode;
+    message: string;
+};
+/**
+ * Predefined file groups that FileUpload maps to native accept patterns and
+ * validates locally. Use `all` to leave the file picker unrestricted.
+ */
+declare const FILE_UPLOAD_ACCEPTS: {
+    readonly all: readonly [];
+    readonly image: readonly ["image/*", ".avif", ".bmp", ".gif", ".heic", ".heif", ".ico", ".jpeg", ".jpg", ".png", ".svg", ".tif", ".tiff", ".webp"];
+    readonly pdf: readonly [".pdf"];
+    readonly word: readonly [".doc", ".docm", ".docx", ".dot", ".dotx", ".odt", ".rtf"];
+    readonly spreadsheet: readonly [".csv", ".ods", ".xls", ".xlsb", ".xlsm", ".xlsx"];
+    readonly presentation: readonly [".odp", ".pot", ".potx", ".pps", ".ppsx", ".ppt", ".pptx"];
+    readonly document: readonly [".pdf", ".doc", ".docm", ".docx", ".dot", ".dotx", ".odt", ".rtf", ".csv", ".xls", ".xlsb", ".xlsx", ".xlsm", ".ods", ".pot", ".potx", ".pps", ".ppsx", ".ppt", ".pptx", ".odp"];
+    readonly text: readonly [".log", ".md", ".rtf", ".text", ".txt"];
+    readonly csv: readonly [".csv"];
+    readonly json: readonly [".json"];
+    readonly xml: readonly [".xml"];
+    readonly code: readonly [".c", ".cpp", ".cs", ".css", ".go", ".html", ".java", ".js", ".jsx", ".php", ".py", ".rb", ".rs", ".scss", ".sh", ".sql", ".swift", ".ts", ".tsx", ".vue", ".yml", ".yaml"];
+    readonly archive: readonly [".7z", ".bz2", ".gz", ".rar", ".tar", ".tgz", ".xz", ".zip"];
+    readonly audio: readonly ["audio/*", ".aac", ".aiff", ".flac", ".m4a", ".mp3", ".ogg", ".opus", ".wav", ".wma"];
+    readonly video: readonly ["video/*", ".avi", ".mkv", ".mov", ".mp4", ".mpeg", ".mpg", ".webm", ".wmv"];
+    readonly font: readonly [".ttf", ".otf", ".woff", ".woff2"];
+    readonly email: readonly [".eml", ".msg"];
+};
+/** A predefined FileUpload group name. */
+type FileUploadFileType = keyof typeof FILE_UPLOAD_ACCEPTS;
+/** One or more predefined FileUpload file groups. */
+type FileUploadAccept = FileUploadFileType | readonly FileUploadFileType[];
+type FileUploadProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> & {
+    /** Controlled files currently shown by the component. */
+    value?: readonly File[];
+    /** Initial files for uncontrolled use. */
+    defaultValue?: readonly File[];
+    /** Called synchronously whenever the accepted file list changes. */
+    onChange?: (files: File[]) => void;
+    /** Called with only the files accepted during one selection or drop. */
+    onAccept?: (files: File[]) => void;
+    /** Called with validation failures; no upload or API request is made. */
+    onReject?: (rejections: FileUploadRejection[]) => void;
+    /** Called before a file is removed from the list. */
+    onRemove?: (file: File, index: number) => void;
+    /** Predefined file group(s) used to select and validate files. */
+    accept?: FileUploadAccept;
+    /** Maximum bytes allowed for one file. Defaults to no limit. */
+    maxSize?: number;
+    /** Maximum files in the list. Defaults to no limit. */
+    maxFiles?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Rejects files with the same name, size, and last-modified timestamp. */
+    preventDuplicate?: boolean;
+    label?: ReactNode;
+    description?: ReactNode;
+    dropLabel?: ReactNode;
+    browseLabel?: ReactNode;
+    removeLabel?: (file: File) => string;
+    /** Shows local image previews and file metadata below the drop zone. */
+    showFileList?: boolean;
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'accept' | 'disabled' | 'multiple' | 'onChange' | 'type' | 'value'>;
+};
+declare function formatFileSize(bytes: number): string;
+/**
+ * A local file picker and drop zone. It validates and emits browser File
+ * objects only; callers own all persistence, uploads, progress, and API work.
+ */
+declare const FileUpload: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    /** Controlled files currently shown by the component. */
+    value?: readonly File[];
+    /** Initial files for uncontrolled use. */
+    defaultValue?: readonly File[];
+    /** Called synchronously whenever the accepted file list changes. */
+    onChange?: (files: File[]) => void;
+    /** Called with only the files accepted during one selection or drop. */
+    onAccept?: (files: File[]) => void;
+    /** Called with validation failures; no upload or API request is made. */
+    onReject?: (rejections: FileUploadRejection[]) => void;
+    /** Called before a file is removed from the list. */
+    onRemove?: (file: File, index: number) => void;
+    /** Predefined file group(s) used to select and validate files. */
+    accept?: FileUploadAccept;
+    /** Maximum bytes allowed for one file. Defaults to no limit. */
+    maxSize?: number;
+    /** Maximum files in the list. Defaults to no limit. */
+    maxFiles?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Rejects files with the same name, size, and last-modified timestamp. */
+    preventDuplicate?: boolean;
+    label?: ReactNode;
+    description?: ReactNode;
+    dropLabel?: ReactNode;
+    browseLabel?: ReactNode;
+    removeLabel?: (file: File) => string;
+    /** Shows local image previews and file metadata below the drop zone. */
+    showFileList?: boolean;
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "accept" | "disabled" | "multiple" | "onChange" | "type" | "value">;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type FilePreviewKind = 'audio' | 'image' | 'pdf' | 'unsupported' | 'video';
+type FilePreviewCloseReason = 'backdrop' | 'close' | 'escape';
+type FilePreviewActionHandler = (file: File, index: number) => void;
+type FilePreviewProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'onClose'> & {
+    open: boolean;
+    files: readonly File[];
+    /** Controlled zero-based index of the file currently shown. */
+    activeIndex?: number;
+    /** Initial zero-based file index for uncontrolled use. */
+    defaultActiveIndex?: number;
+    /** Called after a previous/next control or Arrow key changes the active file. */
+    onActiveIndexChange?: (index: number, file: File) => void;
+    /** Called when the preview requests closing, including the reason. */
+    onClose: (reason: FilePreviewCloseReason) => void;
+    /** Called immediately before `onClose('escape')`. */
+    onEscape?: () => void;
+    /** Called when the Delete action is pressed. The owner removes files. */
+    onDelete?: FilePreviewActionHandler;
+    /** Called when the Download action is pressed, before the local browser download starts. */
+    onDownload?: FilePreviewActionHandler;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    closeLabel?: string;
+    downloadLabel?: ReactNode;
+    deleteLabel?: ReactNode;
+    /** Hides the local browser Download action. Defaults to false. */
+    hideDownload?: boolean;
+};
+/** Identifies browser-native previews supported by FilePreview. */
+declare function getFilePreviewKind(file: File): FilePreviewKind;
+/**
+ * A local File viewer with click and keyboard navigation. It makes no network
+ * request: deletion and download notifications always carry the active File.
+ */
+declare function FilePreview({ open, files, activeIndex, defaultActiveIndex, onActiveIndexChange, onClose, onEscape, onDelete, onDownload, closeOnBackdropClick, closeOnEscape, closeLabel, downloadLabel, deleteLabel, hideDownload, className, 'aria-label': ariaLabel, ...props }: FilePreviewProps): react.ReactPortal | null;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };