@apliteni/apliteni-ui 0.58.2 → 0.60.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.58.2",
+  "version": "0.60.0",
   "workspaces": [
     "react"
   ],
@@ -18,9 +18,17 @@
     "access": "public"
   },
   "exports": {
-    ".": "./src/index.js",
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
     "./guidelines/*": "./guidelines/*",
-    "./motion": "./src/motion.js",
+    "./motion": {
+      "types": "./src/motion.d.ts",
+      "import": "./src/motion.js",
+      "default": "./src/motion.js"
+    },
     "./inline": "./src/inline.js",
     "./css": "./src/index.css",
     "./tokens": "./src/tokens/tokens.css",

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,

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;
@@ -465,7 +479,7 @@ type FilterBarProps = {
     onClear: () => void;
     onChange: (id: string, value: string | undefined) => void;
 };
-declare function FilterBar(props: FilterBarProps): react.JSX.Element;
+declare function FilterBar({ filters, label, clearLabel, disabled, busy, onRemove, onClear, onChange }: FilterBarProps): react.JSX.Element;
 
 type KeyValueRow = {
     label: string;
@@ -626,4 +640,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, 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 };