@apliteni/apliteni-ui 0.46.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -389,3 +389,38 @@ entire batch, and adds a new event. Timeline only calls `onUndo`; it does not
 modify history.
 Import both the kit CSS and React CSS. The Privileged story shows confirmation
 and a reversing event.
+
+## Fields
+
+`TextField`, `TextArea`, `SelectField`, and `FileField` pair a label with a native
+control. Each creates its own IDs and links hints or errors automatically. Use
+native control props. `SelectField` accepts option children.
+
+```tsx
+<TextField label="Weight" type="number" unit="kg" required />
+<TextArea label="Notes" hint="Optional" />
+<SelectField label="Currency"><option>EUR</option><option>USD</option></SelectField>
+<FileField label="Attachment" accept=".pdf" hint="PDF, up to 5 MB."
+  onFileChange={file => setAttachment(file)} />
+```
+
+`FileField` accepts one file from a picker or a drop and reports it through
+`onFileChange`. Use `accept` and `hint` to describe allowed file types and size.
+Your application must validate files before upload.
+
+## Toast
+
+Wrap your app in `Toast`, then call `useToast()` inside it to add a notice.
+Pass `title`, optional `text`, and a `tone`: success (default), danger, warn, info,
+or neutral. Notices disappear after five seconds, pausing while hovered or focused.
+Danger notices are announced assertively; other tones are polite. An `action` with a `label` and
+`onClick` stays until selected or dismissed. New notices appear at the bottom.
+
+```tsx
+function SaveButton() {
+  const push = useToast();
+  return <Button onClick={() => push({ title: 'Saved', text: 'Your changes were saved.' })}>Save</Button>;
+}
+
+<Toast><SaveButton /></Toast>
+```

package/react/dist/index.css

@@ -208,3 +208,320 @@
 .ui-timeline__undo:focus-visible {
   color: var(--pink);
 }
+
+/* ../src/styles/input.css */
+.ui-field {
+  display: block;
+}
+.ui-field__label {
+  display: block;
+  color: var(--strong);
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
+  margin-bottom: 8px;
+}
+.ui-field__req {
+  color: var(--pink);
+  margin-left: 4px;
+}
+.ui-field__hint {
+  color: var(--text);
+  font-size: var(--text-sm);
+  margin-top: 7px;
+  line-height: 1.5;
+}
+.ui-field__error {
+  color: var(--pink);
+  font-size: var(--text-sm);
+  margin-top: 7px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ui-field__error svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  stroke-width: 2.4;
+}
+.ui-input,
+.ui-textarea,
+.ui-select {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  color: var(--strong);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 12px 15px;
+  width: 100%;
+  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
+}
+.ui-textarea {
+  resize: vertical;
+  min-height: 96px;
+  line-height: 1.55;
+}
+.ui-input:hover,
+.ui-textarea:hover,
+.ui-select:hover {
+  border-color: var(--border-strong);
+}
+.ui-input:focus-visible,
+.ui-textarea:focus-visible,
+.ui-select:focus-visible {
+  outline: 2px solid transparent;
+  border-color: var(--accent);
+  box-shadow: var(--ring);
+}
+.ui-input::placeholder,
+.ui-textarea::placeholder {
+  color: var(--muted);
+  opacity: 0.9;
+}
+.ui-input:disabled,
+.ui-select:disabled,
+.ui-textarea:disabled {
+  background: var(--disabled-surface);
+  border-color: var(--disabled-border);
+  color: var(--disabled-ink);
+  cursor: not-allowed;
+}
+.ui-input.is-invalid,
+.ui-select.is-invalid,
+.ui-textarea.is-invalid {
+  border-color: var(--pink);
+}
+.ui-input-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.ui-input-group .ui-input {
+  padding-left: 42px;
+}
+.ui-input-group__icon {
+  position: absolute;
+  left: 14px;
+  width: 17px;
+  height: 17px;
+  color: var(--muted);
+  pointer-events: none;
+}
+.ui-input-group__icon svg {
+  width: 100%;
+  height: 100%;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2.2;
+}
+.ui-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a29db6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 15px center;
+  padding-right: 40px;
+  cursor: pointer;
+}
+:root[data-theme=light] .ui-select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+}
+.ui-check {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 11px;
+  cursor: pointer;
+  font-size: var(--text-base);
+  color: var(--text);
+  line-height: 1.5;
+}
+.ui-check input {
+  appearance: none;
+  width: 19px;
+  height: 19px;
+  flex: none;
+  margin-top: 1px;
+  border: 1.5px solid var(--border-strong);
+  border-radius: var(--radius-xs);
+  background: var(--surface-2);
+  cursor: pointer;
+  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+  position: relative;
+}
+.ui-check input::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+}
+.ui-check input[type=radio] {
+  border-radius: 50%;
+}
+.ui-check input:hover {
+  border-color: var(--accent);
+}
+.ui-check input:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.ui-check input[type=checkbox]:checked::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 1.5px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--accent-contrast);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.ui-check input[type=radio]:checked::after {
+  content: "";
+  position: absolute;
+  inset: 4px;
+  border-radius: 50%;
+  background: var(--accent-contrast);
+}
+.ui-check input:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--ring);
+}
+.ui-switch {
+  --sw-w: 44px;
+  --sw-h: 26px;
+  position: relative;
+  display: inline-block;
+  width: var(--sw-w);
+  height: var(--sw-h);
+  flex: none;
+}
+.ui-switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.ui-switch__track {
+  position: absolute;
+  inset: 0;
+  background: var(--surface-3);
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+  transition: background var(--dur-med) var(--ease);
+}
+.ui-switch__track::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: calc(var(--sw-h) - 6px);
+  height: calc(var(--sw-h) - 6px);
+  background: var(--control-knob);
+  border: 1px solid var(--border-strong);
+  box-sizing: border-box;
+  border-radius: 50%;
+  transition: transform var(--dur-med) var(--ease);
+}
+.ui-switch input:checked + .ui-switch__track {
+  background: var(--accent);
+}
+.ui-switch input:checked + .ui-switch__track::before {
+  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
+}
+.ui-switch input:focus-visible + .ui-switch__track {
+  outline: 2px solid transparent;
+  box-shadow: var(--ring);
+}
+.ui-switch input:disabled + .ui-switch__track {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* src/Field.css */
+.ui-field-number {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.ui-field-number .ui-input {
+  padding-right: 4.5em;
+}
+.ui-field-number__unit {
+  position: absolute;
+  right: 15px;
+  color: var(--text);
+  pointer-events: none;
+}
+.ui-file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 24px;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: var(--text-base);
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+.ui-file:hover {
+  border-color: var(--border-strong);
+}
+.ui-file:focus-within,
+.ui-file.is-dragging {
+  border-color: var(--accent);
+  box-shadow: var(--ring);
+  outline: 2px solid transparent;
+}
+.ui-file.is-invalid {
+  border-color: var(--pink);
+}
+.ui-file__glyph {
+  display: flex;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface-3);
+}
+.ui-file__glyph svg {
+  width: 24px;
+  height: 24px;
+}
+.ui-file__choose {
+  position: relative;
+  display: inline-flex;
+  margin-top: 8px;
+}
+.ui-file__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.ui-file.is-disabled {
+  background: var(--disabled-surface);
+  border-color: var(--disabled-border);
+  color: var(--disabled-ink);
+}
+.ui-file.is-disabled .ui-file__input {
+  cursor: not-allowed;
+}
+
+/* src/Toast.css */
+.rx-toast-stack {
+  position: fixed;
+  right: var(--space-4);
+  bottom: var(--space-4);
+  max-width: calc(100% - 2 * var(--space-4));
+  z-index: var(--z-toast);
+  pointer-events: none;
+}
+.rx-toast-stack > .ui-toast {
+  pointer-events: auto;
+}

package/react/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ButtonHTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
 declare function Icon({ name }: {
     name: string;
@@ -506,7 +506,42 @@ type TimelineProps = Omit<ComponentPropsWithoutRef<'ol'>, 'children' | 'reversed
 };
 declare function Timeline({ events, className, ...rest }: TimelineProps): react.JSX.Element;
 
+type FieldMessage = {
+    label: string;
+    hint?: string;
+    error?: string;
+};
+type Wiring = 'id' | 'aria-describedby' | 'aria-invalid';
+type TextFieldProps = FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>, Wiring | 'type'> & {
+    type?: 'text' | 'number' | 'email';
+    unit?: string;
+};
+declare function TextField({ label, hint, error, required, type, unit, className, ...props }: TextFieldProps): react.JSX.Element;
+type TextAreaProps = FieldMessage & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, Wiring>;
+declare function TextArea({ label, hint, error, required, className, ...props }: TextAreaProps): react.JSX.Element;
+type SelectFieldProps = FieldMessage & Omit<SelectHTMLAttributes<HTMLSelectElement>, Wiring>;
+declare function SelectField({ label, hint, error, required, className, children, ...props }: SelectFieldProps): react.JSX.Element;
+type FileFieldProps = FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>, Wiring | 'type' | 'multiple' | 'value' | 'defaultValue' | 'onChange'> & {
+    onFileChange?: (file: File | null) => void;
+};
+declare function FileField({ label, hint, error, required, disabled, onFileChange, className, ...props }: FileFieldProps): react.JSX.Element;
+
+type ToastNotice = {
+    tone?: 'success' | 'danger' | 'warn' | 'info' | 'neutral';
+    title: string;
+    text?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+type ToastProps = {
+    children: ReactNode;
+};
+declare function useToast(): (notice: ToastNotice) => void;
+declare function Toast({ children }: ToastProps): react.JSX.Element;
+
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TabItem, type TableSort, Tabs, type TabsProps, Timeline, type TimelineEvent, type TimelineProps, sortTableRows };
+export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Timeline, type TimelineEvent, type TimelineProps, Toast, type ToastNotice, type ToastProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -51,7 +51,7 @@ var cx = (...a) => a.filter(Boolean).join(" ");
 var Button = forwardRef(function Button2({
   variant = "secondary",
   size = "md",
-  icon: icon4,
+  icon: icon5,
   iconRight,
   iconOnly,
   block,
@@ -107,7 +107,7 @@ var Button = forwardRef(function Button2({
     iconOnly && "ui-btn--icon"
   );
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
-  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon4;
+  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon5;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
   return /* @__PURE__ */ jsxs(
     "button",
@@ -141,7 +141,7 @@ var Button = forwardRef(function Button2({
         if (!blockKey(event)) onKeyUp?.(event);
       },
       children: [
-        icon4 && /* @__PURE__ */ jsx2(Icon, { name: icon4 }),
+        icon5 && /* @__PURE__ */ jsx2(Icon, { name: icon5 }),
         !iconOnly && renderedChildren != null && /* @__PURE__ */ jsx2("span", { className: "ui-btn__label-slot", children: /* @__PURE__ */ jsx2("span", { className: "ui-btn__label", ref: labelRef, children: renderedChildren }) }),
         iconRight && /* @__PURE__ */ jsx2(Icon, { name: iconRight }),
         busy && /* @__PURE__ */ jsxs("span", { className: "ui-btn__dots", "aria-hidden": "true", children: [
@@ -1200,12 +1200,12 @@ function Denied({
   title = "You don\u2019t have access",
   sub,
   need,
-  icon: icon4 = "lock",
+  icon: icon5 = "lock",
   className,
   children
 }) {
   return /* @__PURE__ */ jsxs10("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx12("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx12(Icon, { name: icon4 }) }),
+    /* @__PURE__ */ jsx12("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx12(Icon, { name: icon5 }) }),
     /* @__PURE__ */ jsx12("div", { className: "ui-denied__title", children: title }),
     sub && /* @__PURE__ */ jsx12("div", { className: "ui-denied__sub", children: sub }),
     need && /* @__PURE__ */ jsxs10("div", { className: "ui-denied__need", children: [
@@ -1892,6 +1892,253 @@ function Timeline({ events, className, ...rest }) {
   ] }, event.id)) });
 }
 
+// src/Field.tsx
+import { useEffect as useEffect7, useId as useId8, useRef as useRef12, useState as useState7 } from "react";
+import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+function Frame({ id, label, hint, error, required, children }) {
+  return /* @__PURE__ */ jsxs18("div", { className: "ui-field", children: [
+    /* @__PURE__ */ jsxs18("label", { className: "ui-field__label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx22("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
+    ] }),
+    children,
+    (error || hint) && /* @__PURE__ */ jsx22(
+      "div",
+      {
+        id: `${id}-message`,
+        className: error ? "ui-field__error" : "ui-field__hint",
+        dangerouslySetInnerHTML: { __html: (error ? icon4("alert") : "") + esc(error || hint) }
+      }
+    )
+  ] });
+}
+function wiring(id, hint, error) {
+  return { id, "aria-describedby": error || hint ? `${id}-message` : void 0, "aria-invalid": error ? true : void 0 };
+}
+function TextField({ label, hint, error, required, type = "text", unit, className = "", ...props }) {
+  const id = useId8();
+  const hasUnit = type === "number" && !!unit;
+  const describedBy = [error || hint ? `${id}-message` : "", hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
+  const control = /* @__PURE__ */ jsx22(
+    "input",
+    {
+      ...props,
+      ...wiring(id, hint, error),
+      required,
+      type,
+      "aria-describedby": describedBy,
+      inputMode: type === "number" ? "decimal" : props.inputMode,
+      className: `ui-input${error ? " is-invalid" : ""} ${className}`
+    }
+  );
+  return /* @__PURE__ */ jsx22(Frame, { ...{ id, label, hint, error, required }, children: hasUnit ? /* @__PURE__ */ jsxs18("div", { className: "ui-field-number", children: [
+    control,
+    /* @__PURE__ */ jsx22("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit })
+  ] }) : control });
+}
+function TextArea({ label, hint, error, required, className = "", ...props }) {
+  const id = useId8();
+  return /* @__PURE__ */ jsx22(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx22(
+    "textarea",
+    {
+      rows: 4,
+      ...props,
+      ...wiring(id, hint, error),
+      required,
+      className: `ui-textarea${error ? " is-invalid" : ""} ${className}`
+    }
+  ) });
+}
+function SelectField({ label, hint, error, required, className = "", children, ...props }) {
+  const id = useId8();
+  return /* @__PURE__ */ jsx22(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx22(
+    "select",
+    {
+      ...props,
+      ...wiring(id, hint, error),
+      required,
+      className: `ui-select${error ? " is-invalid" : ""} ${className}`,
+      children
+    }
+  ) });
+}
+function FileField({ label, hint, error, required, disabled, onFileChange, className = "", ...props }) {
+  const id = useId8();
+  const input = useRef12(null);
+  const [file, setFile] = useState7(null);
+  const [dragging, setDragging] = useState7(false);
+  useEffect7(() => {
+    const form = input.current?.form;
+    const reset = () => {
+      setFile(null);
+      setDragging(false);
+    };
+    form?.addEventListener("reset", reset);
+    return () => form?.removeEventListener("reset", reset);
+  }, []);
+  const update = (next) => {
+    setFile(next);
+    onFileChange?.(next);
+  };
+  return /* @__PURE__ */ jsx22(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      className: `ui-file${dragging && !disabled ? " is-dragging" : ""}${file ? " has-file" : ""}${error ? " is-invalid" : ""}${disabled ? " is-disabled" : ""}`,
+      onDragOver: (event) => {
+        event.preventDefault();
+        if (!disabled) setDragging(true);
+      },
+      onDragLeave: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+      },
+      onDrop: (event) => {
+        event.preventDefault();
+        setDragging(false);
+        if (disabled || !event.dataTransfer.files.length || !input.current) return;
+        const transfer = new DataTransfer();
+        transfer.items.add(event.dataTransfer.files[0]);
+        input.current.files = transfer.files;
+        update(transfer.files[0]);
+      },
+      children: [
+        /* @__PURE__ */ jsx22("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx22(Icon, { name: "upload" }) }),
+        /* @__PURE__ */ jsx22("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
+        /* @__PURE__ */ jsx22("div", { children: "or choose one from your device" }),
+        /* @__PURE__ */ jsxs18("span", { className: "ui-file__choose", children: [
+          /* @__PURE__ */ jsx22("span", { className: "ui-btn ui-btn--secondary ui-btn--sm", "aria-hidden": "true", "aria-disabled": disabled || void 0, children: file ? "Replace file" : "Choose file" }),
+          /* @__PURE__ */ jsx22(
+            "input",
+            {
+              ...props,
+              ...wiring(id, hint, error),
+              ref: input,
+              type: "file",
+              required,
+              disabled,
+              className: `ui-file__input ${className}`,
+              onChange: (event) => update(event.currentTarget.files?.[0] ?? null)
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/Toast.tsx
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect8, useRef as useRef13, useState as useState8 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+var Context = createContext2(null);
+var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
+function useToast() {
+  const push = useContext2(Context);
+  if (!push) throw new Error("useToast requires a Toast provider");
+  return push;
+}
+function Notice({ notice, remove }) {
+  const root = useRef13(null);
+  const [leaving2, setLeaving] = useState8(false);
+  const dismissed = useRef13(false);
+  const remaining = useRef13(5e3);
+  const [hovered, setHovered] = useState8(false);
+  const [focused, setFocused] = useState8(false);
+  const paused = hovered || focused;
+  const tone = notice.tone ?? "success";
+  const dismiss = useCallback3(() => {
+    if (dismissed.current) return;
+    dismissed.current = true;
+    if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
+    else setLeaving(true);
+  }, [remove]);
+  useEffect8(() => {
+    if (leaving2) {
+      const element = root.current;
+      const finish = (event) => {
+        if (event.target === element) remove();
+      };
+      element?.addEventListener("animationend", finish);
+      const timer = setTimeout(remove, 260);
+      return () => {
+        clearTimeout(timer);
+        element?.removeEventListener("animationend", finish);
+      };
+    }
+  }, [leaving2, remove]);
+  useEffect8(() => {
+    if (leaving2 || notice.action || paused) return;
+    const started = Date.now();
+    const timer = setTimeout(dismiss, remaining.current);
+    return () => {
+      clearTimeout(timer);
+      remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+    };
+  }, [dismiss, leaving2, notice.action, paused]);
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      ref: root,
+      className: `ui-toast ui-toast--${tone} ui-toast--soft${leaving2 ? " is-leaving" : ""}`,
+      role: tone === "danger" ? "alert" : "status",
+      "aria-live": tone === "danger" ? "assertive" : "polite",
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx23("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx23(Icon, { name: glyphs[tone] }) }),
+        /* @__PURE__ */ jsxs19("div", { className: "ui-toast__body", children: [
+          /* @__PURE__ */ jsx23("div", { className: "ui-toast__title", children: notice.title }),
+          notice.text && /* @__PURE__ */ jsx23("div", { className: "ui-toast__text", children: notice.text })
+        ] }),
+        notice.action && /* @__PURE__ */ jsx23(
+          "button",
+          {
+            type: "button",
+            className: "ui-toast__action",
+            disabled: leaving2,
+            onClick: () => {
+              if (!dismissed.current) {
+                dismiss();
+                notice.action.onClick();
+              }
+            },
+            children: notice.action.label
+          }
+        ),
+        /* @__PURE__ */ jsx23("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx23(Icon, { name: "x" }) }),
+        !notice.action && /* @__PURE__ */ jsx23(
+          "span",
+          {
+            className: "ui-toast__timer is-running",
+            "aria-hidden": "true",
+            style: { animationPlayState: paused ? "paused" : "running" }
+          }
+        )
+      ]
+    }
+  );
+}
+function Toast({ children }) {
+  const [entries, setEntries] = useState8([]);
+  const nextId = useRef13(0);
+  const push = useCallback3((notice) => {
+    const id = nextId.current++;
+    const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
+    setEntries((current) => [...current, { id, notice, remove }]);
+  }, []);
+  return /* @__PURE__ */ jsxs19(Context.Provider, { value: push, children: [
+    children,
+    typeof document !== "undefined" && createPortal4(
+      /* @__PURE__ */ jsx23("div", { className: "ui-toast-stack rx-toast-stack", children: entries.map((entry) => /* @__PURE__ */ jsx23(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      document.body
+    )
+  ] });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -1910,6 +2157,7 @@ export {
   Drawer,
   DrawerSection,
   Dropdown,
+  FileField,
   FilterBar,
   Icon,
   KeyValueList,
@@ -1919,11 +2167,16 @@ export {
   Pagination,
   RowIdentity,
   Segmented,
+  SelectField,
   Skeleton,
   SkeletonTable,
   Snippet,
   StatBand,
   Tabs,
+  TextArea,
+  TextField,
   Timeline,
-  sortTableRows
+  Toast,
+  sortTableRows,
+  useToast
 };

package/src/styles/input.css

@@ -63,7 +63,7 @@
   cursor: not-allowed;
 }
 
-.ui-input.is-invalid,
+.ui-input.is-invalid, .ui-select.is-invalid,
 .ui-textarea.is-invalid { border-color: var(--pink); }
 /* Invalid fields keep the shared focus indicator; their border carries the error. */