@apliteni/apliteni-ui 0.50.0 → 0.51.0

package/package.json

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

package/react/README.md

@@ -28,7 +28,7 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Callout`, `Icon`.
+Components: `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Callout`, `Icon`.
 
 `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,
@@ -77,6 +77,13 @@ vanilla factory where the steps have to be real links. `PAGE_SIZES` and
 either number. They are declared in this package's own types, and `PAGE_SIZES` is a
 `readonly number[]`: pass it to `pageSizes`, but do not add sizes to it.
 
+## EmptyState
+
+`EmptyState` uses the vanilla layout. `variant` selects `first-run`, `no-matches`,
+`not-found`, or `not-yet-built` copy; `title`, `sub`, and `icon` override it.
+`art` accepts a vanilla illustration name, trusted SVG string, or React node; `actions` accepts React nodes. Use at most one primary action and one ghost
+action. The page supplies its own h1; EmptyState uses vanilla’s div title.
+
 ## What the Modal does with focus
 
 Opening moves focus to the first eligible control in the body, in DOM order, or to

package/react/dist/index.d.ts

@@ -586,7 +586,18 @@ type AppShellProps = {
 };
 declare function AppShell({ sections, pathname, title, children, word, brand, brandHref, width, back, lede, actions, bandControl, account, onSignOut, defaultCollapsed, palette, renderLink }: AppShellProps): react.JSX.Element;
 
+type EmptyStateVariant = 'first-run' | 'no-matches' | 'not-found' | 'not-yet-built';
+type EmptyStateProps = {
+    variant?: EmptyStateVariant;
+    title?: string;
+    sub?: string;
+    icon?: string;
+    art?: ReactNode;
+    actions?: ReactNode;
+};
+declare function EmptyState({ variant, title, sub, icon, art, actions }: EmptyStateProps): 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, 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, Toast, type ToastNotice, type ToastProps, 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, 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, Toast, type ToastNotice, type ToastProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -2312,6 +2312,28 @@ function AppShell({
   ] });
 }
 
+// src/EmptyState.tsx
+import { icon as kitIcon2, illo } from "@apliteni/apliteni-ui";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+var cases = {
+  "first-run": { title: "Nothing needs you yet", sub: "New items will appear here when they need your attention.", icon: "check" },
+  "no-matches": { title: "No results in this view", sub: "Try another search or clear your filters.", icon: "search" },
+  "not-found": { title: "We can't find that page", sub: "Check the address or return to the home page.", icon: "folder" },
+  "not-yet-built": { title: "This ships later", sub: "This screen is not available yet. Check back later.", icon: "clock" }
+};
+function EmptyState({ variant = "first-run", title, sub, icon: icon5, art, actions }) {
+  const preset = cases[variant];
+  const heading = title ?? preset.title;
+  const guidance = sub ?? preset.sub;
+  const glyph = icon5 ?? preset.icon;
+  return /* @__PURE__ */ jsxs22("div", { className: "ui-empty", children: [
+    art ? typeof art === "string" ? /* @__PURE__ */ jsx26("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx26("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx26("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
+    heading && /* @__PURE__ */ jsx26("div", { className: "ui-empty__title", children: heading }),
+    guidance && /* @__PURE__ */ jsx26("div", { className: "ui-empty__sub", children: guidance }),
+    actions && /* @__PURE__ */ jsx26("div", { className: "ui-empty__actions", children: actions })
+  ] });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -2332,6 +2354,7 @@ export {
   Drawer,
   DrawerSection,
   Dropdown,
+  EmptyState,
   FileField,
   FilterBar,
   Icon,