@apliteni/apliteni-ui 0.46.0 → 0.47.0

package/package.json

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

package/react/README.md

@@ -389,3 +389,21 @@ 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.

package/react/dist/index.css

@@ -208,3 +208,307 @@
 .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;
+}

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,27 @@ 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;
+
 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, sortTableRows };

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,140 @@ 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/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -1910,6 +2044,7 @@ export {
   Drawer,
   DrawerSection,
   Dropdown,
+  FileField,
   FilterBar,
   Icon,
   KeyValueList,
@@ -1919,11 +2054,14 @@ export {
   Pagination,
   RowIdentity,
   Segmented,
+  SelectField,
   Skeleton,
   SkeletonTable,
   Snippet,
   StatBand,
   Tabs,
+  TextArea,
+  TextField,
   Timeline,
   sortTableRows
 };

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. */