@apliteni/apliteni-ui 0.133.0 → 0.137.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.133.0",
+  "version": "0.137.0",
 
   "workspaces": [
     "react"

package/react/README.md

@@ -32,7 +32,10 @@ import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 Both stylesheets. The React one adds what React's own components need — it carries no tokens, no
 reset and none of the kit's control CSS, so it cannot stand in for the first import.
 
-Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Chart`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Segmented`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Chart`, `Modal`, `Confirm`, `Feedback`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Segmented`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+
+`Card` accepts `title`, `sub`, children, `level`, `variant`, `pad`, `icon`, `href`, and `className`. `variant` is `accent` or `live`; omit it for the default surface. `pad` is `sm` or `lg`. A title is a heading unless `href` makes the whole card a link. Compose setting rows with `ui-card__row` and kit controls.
+Three-option setting rows use `ui-card__row--tight-choice` to narrow pills below 360 px and stay on one line, while other rows keep full tap width.
 
 `Segmented` is a controlled choice toolbar: pass `options`, `value`, `onChange`,
 and a `label` for its accessible name. `size="sm"` compacts it, `block` makes it
@@ -304,6 +307,19 @@ once installed. In the repo there is no copy to resolve to, so `kit-alias.ts` po
 vitest and Storybook straight at `../src/` — which is why the class-name parity tests
 now compare against the working tree rather than the last published release.
 
+### Table appearance
+
+`DataTable` takes the vanilla table hooks as props. `zebra`, `hover` (on unless `false`), `stack`,
+`density`, `stickyHeader` and `pinnedIdentity` set the table modifiers. `rowState={(row) => 'target' | 'dead' | undefined}`
+marks a row, `footer` takes totals rows, and `caption` names the table for assistive technology. A column takes
+`rowHeader` and `cell` (`'title' | 'code' | 'long' | 'strong' | 'act'`). A `dead` row is muted, so put the word
+that names its state in one of its cells.
+
+```tsx
+<DataTable columns={columns} rows={rows} selectable={false} pager={false}
+  density="dense" zebra stack rowState={(r) => (r.id === landedOn ? 'target' : undefined)} />
+```
+
 ### Tables with another presentation of the same rows
 
 Pass `selectable={false}` to omit selection controls and their callbacks. Existing callers
@@ -447,6 +463,30 @@ and described by its body. Modal also accepts
 `initialFocusRef` for a mounted, focusable element inside its panel. Without it, Modal
 uses its normal opening focus.
 
+## Feedback
+
+`Feedback` lets a reader select a passage and send a note about it. Pass `container`, a ref to
+the element whose text can be selected, and `onSend`. A "Give feedback" pill appears above a
+selection of `minChars` (3) or more. The pill opens a form with a chip for the nearest heading,
+the quoted passage, a note field, Cancel and Send. The quoted passage stays highlighted until the
+form closes. The container may mount after `Feedback`. On close, focus returns to the visible
+control that had it before opening. If that control is gone, hidden, or disabled, focus returns to the pill.
+
+```tsx
+<Feedback container={articleRef}
+  onSend={async ({ note, excerpt, anchor }) => ({ ok: await file(note, excerpt, anchor) })} />
+```
+
+`onSend` receives `note`, `excerpt`, `anchor`, `sectionLabel` and `sectionTitle`. Resolve
+`{ ok: true }` when the note is filed. Resolve `{ ok: false, error }`, or throw, to keep the form
+open with the note intact and the error shown in place. `section` reshapes the chip and the
+payload from the heading. Send stays off until the note has text and shows progress while the
+request runs.
+
+A sent note shows one line, `sentMessage`, and a Close button. Cancel, Escape, the close button
+and the scrim dismiss the form without sending. `Feedback` uses the shared dialog stack and the
+kit's buttons.
+
 ## Timeline
 
 `Timeline` displays a record’s events in the order provided. Pass events from oldest
@@ -817,6 +857,24 @@ the trigger's trailing edge. Without `ariaLabel` the trigger's own text is its a
 name, so a control reading "17 September 2026" is heard as that rather than as its
 placeholder. The popover stays mounted while closed, and is `inert` while it is.
 
+## Footer
+
+`Footer` draws the kit's `full`, `slim` and `app` versions. The full version takes
+brand text, a tagline, social links and link columns. The columns sit side by side
+on an iPad or desktop and stack on a phone. Supply legal text and links for every
+version. Pass `AccentPicker` and `ThemeToggle` through `switcher` when needed.
+
+```tsx
+<Footer variant="full" tagline="A short product line"
+  columns={[{ title: 'Product', links: [{ label: 'Overview', href: '/overview' }] }]}
+  legal="© 2026 Example" switcher={<ThemeToggle />} />
+```
+
+Use `brand` to replace the lockup with React content. Set `brand={false}` to hide
+the brand block. Use `links` for React link columns in place of `columns`.
+Use `legal` for text or React content. The component uses the kit's footer classes
+and stylesheet.
+
 ## AccentPicker
 
 `AccentPicker` is a controlled group of the kit’s four accent swatches. Pass `value`

package/react/dist/index.d.ts

@@ -96,13 +96,22 @@ declare const StatusDot: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTM
 } & react.RefAttributes<HTMLSpanElement>>;
 
 type Level = 2 | 3 | 4 | 5 | 6;
-declare function Card({ title, sub, level, className, children }: {
+type CardProps = {
     title?: ReactNode;
     sub?: ReactNode;
     level?: Level;
+    /** `accent` tints the card with the accent and `live` with green. */
+    variant?: 'accent' | 'live';
+    /** `sm` trims the vertical padding. `lg` is the centred landing card. */
+    pad?: 'sm' | 'lg';
+    /** Glyph name for the chip before the title. Needs a `title`. */
+    icon?: string;
+    /** Makes the whole card a link. Its title is then a plain block, because a link holds no heading. */
+    href?: string;
     className?: string;
     children?: ReactNode;
-}): react.JSX.Element;
+};
+declare function Card({ title, sub, level, variant, pad, icon, href, className, children }: CardProps): react.JSX.Element;
 
 type CalloutVariant = 'neutral' | 'info' | 'success' | 'warn' | 'danger';
 interface CalloutProps {
@@ -156,6 +165,38 @@ type ConfirmProps = {
 };
 declare function Confirm({ open, title, body, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, }: ConfirmProps): react.JSX.Element;
 
+type FeedbackPayload = {
+    note: string;
+    excerpt: string;
+    anchor: string;
+    sectionLabel: string;
+    sectionTitle: string;
+};
+type FeedbackResult = {
+    ok: boolean;
+    error?: string;
+};
+type FeedbackSection = {
+    label?: string;
+    title?: string;
+    anchor?: string;
+};
+type FeedbackProps = {
+    /** The element whose text a reader may select. Pass a ref to it. */
+    container: RefObject<HTMLElement | null>;
+    /** Files the note. Resolve `{ ok: true }` when it is sent, or `{ ok: false, error }` to keep the form open with the error in place. */
+    onSend: (payload: FeedbackPayload) => Promise<FeedbackResult>;
+    /** Shortest selection that offers the pill. */
+    minChars?: number;
+    /** Shapes the chip and the payload from the heading above the selection. */
+    section?: (heading: Element | null) => FeedbackSection;
+    label?: string;
+    placeholder?: string;
+    /** The one line shown once the note is sent. */
+    sentMessage?: string;
+};
+declare function Feedback({ container, onSend, minChars, section, label, placeholder, sentMessage, }: FeedbackProps): react.ReactPortal;
+
 type ModalProps = {
     open: boolean;
     title: string;
@@ -240,6 +281,10 @@ type Column<T> = {
      * why: docs/components.md#dense-financial-tables
      */
     linked?: boolean;
+    /** Renders this column's body cells as row headers (`th scope="row"`), as the kit's compact table does. */
+    rowHeader?: boolean;
+    /** `title` gives the column the remaining width, `code` sets a handle or id in the table's small text, `long` is running text that gets its own line in a stacked row, `strong` bolds a figure, `act` right-aligns a row action. */
+    cell?: 'title' | 'code' | 'long' | 'strong' | 'act';
 };
 type TableSort<T> = {
     key: (keyof T & string) | undefined;
@@ -275,6 +320,16 @@ type PagerProps = {
 type DataTableProps<T> = {
     columns: Column<T>[];
     rows: T[];
+    /** The kit's `--zebra`, `--hover` (on unless `false`) and `--stack` hooks. A stacked table lays each row out as a block below the phone step, so no column scrolls out of reach. */
+    zebra?: boolean;
+    hover?: boolean;
+    stack?: boolean;
+    /** Marks a row the reader landed on (`target`) or a revoked one (`dead`). A dead row is muted, so put the word that names its state in one of its cells. */
+    rowState?: (row: T) => 'target' | 'dead' | undefined;
+    /** Table footer rows, such as totals: `<tr>` elements with a `th scope="row"` label. */
+    footer?: ReactNode;
+    /** A caption read by assistive technology only. */
+    caption?: string;
     dense?: boolean;
     density?: 'default' | 'dense' | 'compact';
     stickyHeader?: boolean;
@@ -304,7 +359,7 @@ type DataTableProps<T> = {
 declare function sortTableRows<T>(rows: T[], sort: TableSort<T>): T[];
 declare function DataTable<T extends {
     name: string;
-}>({ columns, rows, dense, density, stickyHeader, pinnedIdentity, scrollLabel, empty, pageSize, pageSizes, onPageSizeChange, pager, pagerLabel, loading, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, page: controlledPage, onPageChange, total, hasMore, }: DataTableProps<T>): react.JSX.Element;
+}>({ columns, rows, zebra, hover, stack, rowState, footer, caption, dense, density, stickyHeader, pinnedIdentity, scrollLabel, empty, pageSize, pageSizes, onPageSizeChange, pager, pagerLabel, loading, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, page: controlledPage, onPageChange, total, hasMore, }: DataTableProps<T>): react.JSX.Element;
 
 type PaginationProps = {
     page?: number;
@@ -870,6 +925,42 @@ type AppShellProps = {
 };
 declare function AppShell({ sections, pathname, title, children, word, brand, brandHref, width, back, lede, actions, bandControl, account, onSignOut, searchLabel, searchShortLabel, defaultCollapsed, palette, renderLink }: AppShellProps): react.JSX.Element;
 
+type FooterLink = {
+    label: string;
+    href?: string;
+    target?: string;
+};
+type FooterColumn = {
+    title?: string;
+    links: FooterLink[];
+};
+type FooterSocial = {
+    label: string;
+    href?: string;
+    icon?: 'github' | 'x' | 'linkedin' | 'mail';
+};
+type FooterProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** `full` is the marketing footer, `slim` a single legal row, `app` the in-product row. */
+    variant?: 'full' | 'slim' | 'app';
+    /** Product word beside the mark. Default `Strategy`. */
+    word?: string;
+    brandHref?: string;
+    /** Replaces the lockup. `false` hides the whole brand block: lockup, tagline and social links. Full variant only. */
+    brand?: ReactNode | false;
+    /** Short line under the brand. Full variant only. */
+    tagline?: string;
+    /** Link columns. Side by side above the phone step, stacked on a phone. Full variant only. */
+    columns?: FooterColumn[];
+    /** Contents of the link navigation. Takes the place of `columns`. Full variant only. */
+    links?: ReactNode;
+    social?: FooterSocial[];
+    legal?: ReactNode;
+    legalLinks?: FooterLink[];
+    /** Slot for `<AccentPicker>` and `<ThemeToggle>`. */
+    switcher?: ReactNode;
+};
+declare function Footer({ variant, word, brandHref, brand, tagline, columns, links, social, legal, legalLinks, switcher, className, ...rest }: FooterProps): react.JSX.Element;
+
 type EmptyStateVariant = 'first-run' | 'no-matches' | 'not-found' | 'not-yet-built';
 type EmptyStateProps = {
     variant?: EmptyStateVariant;
@@ -1157,4 +1248,4 @@ declare const Breadcrumbs: react.ForwardRefExoticComponent<Omit<Omit<react.Detai
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { type Accent, AccentPicker, type AccentPickerProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, Avatar, type AvatarProps, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, CheckList, type CheckListProps, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownAvatar, 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, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, type NavTabBadge, type NavTabItem, NavTabs, type NavTabsProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, 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 { type Accent, AccentPicker, type AccentPickerProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, Avatar, type AvatarProps, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, CheckList, type CheckListProps, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownAvatar, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Feedback, type FeedbackPayload, type FeedbackProps, type FeedbackResult, type FeedbackSection, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Footer, type FooterColumn, type FooterLink, type FooterProps, type FooterSocial, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, type NavTabBadge, type NavTabItem, NavTabs, type NavTabsProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, 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 };