@apliteni/apliteni-ui 0.60.0 → 0.61.1

package/guidelines/iconography.md

@@ -8,7 +8,7 @@
 
 **Why:** Without a legend, readers need labels for unfamiliar glyphs.
 
-**Except:** The list grows by decision, not review debate. Today: `x` (close or dismiss), `copy` (copy to clipboard), `moreHorizontal` (overflow menu), `moreVertical` (overflow menu), `chevronDown` (expand or collapse), and `chevronUp` (expand or collapse).
+**Except:** The list grows by decision, not review debate. Today: `x` (close or dismiss), `copy` (copy to clipboard), `moreHorizontal` (overflow menu), `moreVertical` (overflow menu), `chevronDown` (expand or collapse), `chevronUp` (expand or collapse), and the shell’s theme toggle, sidebar toggle and collapsed-rail links.
 
 **Do:** Show an overflow menu without words; keep the Settings label.
 

package/package.json

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

package/react/README.md

@@ -433,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 />
@@ -447,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

@@ -546,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>;
@@ -640,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, 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 };
+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 };

package/react/dist/index.js

@@ -2167,7 +2167,7 @@ function Timeline({ events, className, ...rest }) {
 }
 
 // src/Field.tsx
-import { useEffect as useEffect10, useId as useId10, useRef as useRef15, useState as useState9 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect10, useId as useId10, useRef as useRef15, useState as useState9 } from "react";
 import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
 import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function messages(id, hint, error) {
@@ -2195,13 +2195,19 @@ function Frame({ id, label, hint, error, required, children }) {
 function wiring(id, hint, error) {
   return { id, "aria-describedby": messages(id, hint, error), "aria-invalid": error ? true : void 0 };
 }
-function TextField({ label, hint, error, required, type = "text", unit, className = "", ...props }) {
+function Field({ id: suppliedId, label, hint, error, required, children }) {
+  const generatedId = useId10();
+  const id = suppliedId ?? generatedId;
+  return /* @__PURE__ */ jsx26(Frame, { ...{ id, label, hint, error, required }, children: children({ ...wiring(id, hint, error), required }) });
+}
+var TextField = forwardRef4(function TextField2({ label, hint, error, required, type = "text", unit, icon: glyph, className = "", ...props }, ref) {
   const id = useId10();
   const hasUnit = type === "number" && !!unit;
   const describedBy = [messages(id, hint, error), hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsx26(
     "input",
     {
+      ref,
       ...props,
       ...wiring(id, hint, error),
       required,
@@ -2211,11 +2217,16 @@ function TextField({ label, hint, error, required, type = "text", unit, classNam
       className: `ui-input${error ? " is-invalid" : ""} ${className}`
     }
   );
-  return /* @__PURE__ */ jsx26(Frame, { ...{ id, label, hint, error, required }, children: hasUnit ? /* @__PURE__ */ jsxs21("div", { className: "ui-field-number", children: [
+  const unitSpan = hasUnit ? /* @__PURE__ */ jsx26("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit }) : null;
+  return /* @__PURE__ */ jsx26(Frame, { ...{ id, label, hint, error, required }, children: glyph ? /* @__PURE__ */ jsxs21("div", { className: `ui-input-group${hasUnit ? " ui-field-number" : ""}`, children: [
+    /* @__PURE__ */ jsx26("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon4(glyph) } }),
+    control,
+    unitSpan
+  ] }) : hasUnit ? /* @__PURE__ */ jsxs21("div", { className: "ui-field-number", children: [
     control,
-    /* @__PURE__ */ jsx26("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit })
+    unitSpan
   ] }) : control });
-}
+});
 function TextArea({ label, hint, error, required, className = "", ...props }) {
   const id = useId10();
   return /* @__PURE__ */ jsx26(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx26(
@@ -2714,6 +2725,7 @@ export {
   DrawerSection,
   Dropdown,
   EmptyState,
+  Field,
   FileField,
   FilterBar,
   Icon,

package/src/styles/input.css

@@ -69,6 +69,20 @@
 .ui-textarea.is-invalid { border-color: var(--pink); }
 /* Invalid fields keep the shared focus indicator; their border carries the error. */
 
+/* A search field with a value gets the browser's own clear button, and the
+   browser paints it — near-black on the light field, white on the dark one,
+   beside the kit's --muted magnifier. Two glyphs, and only one answers to a
+   token. .ui-select refuses UA chrome for the same reason, hand-drawing its
+   chevron per theme; and the vanilla search specimen is a text input with a
+   `search` glyph and no clear button, so a field without one is what the
+   design already says. Measured in Chromium; Firefox draws nothing here and
+   Edge is untested.
+   why: docs/specification.md#colour-and-contrast */
+.ui-input[type="search"]::-webkit-search-cancel-button {
+  appearance: none;
+  display: none;
+}
+
 /* Input with a leading icon / adornment */
 .ui-input-group { position: relative; display: flex; align-items: center; }
 .ui-input-group .ui-input { padding-left: 42px; }