@apliteni/apliteni-ui 0.59.0 → 0.61.0

package/package.json

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

package/react/README.md

@@ -7,9 +7,10 @@ This directory is a **private workspace**, not a package. It builds to `react/di
 and ships as the `@apliteni/apliteni-ui/react` subpath of the kit — one package, one
 version, one pin. There is no `@apliteni/apliteni-ui-react` on npm.
 
-**Decision rule:** does this surface hold meaningful client state?
-No → use the vanilla factories from `@apliteni/apliteni-ui`.
-Yes → use these React components.
+Use React components for new React screens. The vanilla factories are deprecated
+and scheduled for removal under #429. This version still ships them, working as
+before: keep existing vanilla surfaces on them, and move a surface to React when
+you next change it.
 
 ## Install (as a consumer)
 
@@ -28,7 +29,19 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Callout`, `Icon`.
+Components: `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+
+`Pill` renders metadata with the existing pill spacing. Omit `variant` for neutral
+metadata or use `live` or `soon`. Its children accept React content.
+`StatusDot` takes `live` (default `false`). Place it beside visible status text;
+it is decorative by default. Use `aria-label` or `aria-labelledby` to expose a
+meaningful dot as a named image. Neither component announces changes automatically.
+Both forward a span ref and native span attributes, including `className`.
+
+```tsx
+<Pill variant="soon">Coming soon</Pill>
+<span><StatusDot live /> API online</span>
+```
 
 `Snippet` accepts `label`, `code`, `reveal`, and `copyLabel` props. It treats `code`
 as plain text and copies it exactly as provided. After a successful clipboard write,
@@ -420,7 +433,10 @@ Import both the kit CSS and React CSS. The Privileged story shows Undo adding a
 
 `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.
+native control props. `SelectField` accepts option children. `TextField` takes
+text, number, email, password and search, forwards its ref to the input, and
+places a decorative kit glyph with `icon` — the same glyph names `Button` and
+`Dropdown` take. Number fields can combine a glyph with a `unit`.
 
 ```tsx
 <TextField label="Weight" type="number" unit="kg" required />
@@ -434,6 +450,19 @@ native control props. `SelectField` accepts option children.
 `onFileChange`. Use `accept` and `hint` to describe allowed file types and size.
 Your application must validate files before upload.
 
+Use `Field` when an existing labelled control needs the kit frame. Spread its
+render-prop attributes onto one labelable control, and apply the existing control
+class and invalid styling as appropriate:
+
+```tsx
+<Field label="Due date" hint="Use the delivery date." required>
+  {control => <input {...control} className="ui-input" type="date" />}
+</Field>
+```
+
+The frame supplies a stable ID, required state, and linked hint/error messages.
+An optional `id` lets the caller choose the control ID; it must be unique.
+
 ## Toast
 
 Wrap your app in `Toast`, then call `useToast()` inside it to add a notice.

package/react/dist/index.css

@@ -416,6 +416,10 @@
 .ui-textarea.is-invalid {
   border-color: var(--pink);
 }
+.ui-input[type=search]::-webkit-search-cancel-button {
+  appearance: none;
+  display: none;
+}
 .ui-input-group {
   position: relative;
   display: flex;

package/react/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, HTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
 declare function Icon({ name }: {
     name: string;
@@ -37,6 +37,20 @@ declare function Badge({ variant, children }: {
     children: ReactNode;
 }): react.JSX.Element;
 
+type PillProps = HTMLAttributes<HTMLSpanElement> & {
+    variant?: 'live' | 'soon';
+};
+declare const Pill: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+    variant?: "live" | "soon";
+} & react.RefAttributes<HTMLSpanElement>>;
+
+type StatusDotProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    live?: boolean;
+};
+declare const StatusDot: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    live?: boolean;
+} & react.RefAttributes<HTMLSpanElement>>;
+
 type Level = 2 | 3 | 4 | 5 | 6;
 declare function Card({ title, sub, level, children }: {
     title?: ReactNode;
@@ -532,11 +546,33 @@ type FieldMessage = {
     error?: string;
 };
 type Wiring = 'id' | 'aria-describedby' | 'aria-invalid';
+type FieldControlProps = {
+    id: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: true;
+    required?: boolean;
+};
+type FieldProps = FieldMessage & {
+    id?: string;
+    required?: boolean;
+    children: (control: FieldControlProps) => ReactNode;
+};
+/** Spread the supplied attributes onto one labelable control. */
+declare function Field({ id: suppliedId, label, hint, error, required, children }: FieldProps): react.JSX.Element;
 type TextFieldProps = FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>, Wiring | 'type'> & {
-    type?: 'text' | 'number' | 'email';
+    type?: 'text' | 'number' | 'email' | 'password' | 'search';
     unit?: string;
+    /** Kit glyph name, as Button, Dropdown and vanilla input() take it. Decorative;
+        the label supplies the control's name. */
+    icon?: string;
 };
-declare function TextField({ label, hint, error, required, type, unit, className, ...props }: TextFieldProps): react.JSX.Element;
+declare const TextField: react.ForwardRefExoticComponent<FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | Wiring> & {
+    type?: "text" | "number" | "email" | "password" | "search";
+    unit?: string;
+    /** Kit glyph name, as Button, Dropdown and vanilla input() take it. Decorative;
+        the label supplies the control's name. */
+    icon?: string;
+} & react.RefAttributes<HTMLInputElement>>;
 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>;
@@ -626,4 +662,4 @@ declare function Tooltip({ text, children }: TooltipProps): react.JSX.Element;
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, 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, EmptyState, type EmptyStateProps, type EmptyStateVariant, 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, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
+export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, 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, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, 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, Pill, type PillProps, 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, StatusDot, type StatusDotProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };