@apliteni/apliteni-ui 0.43.0 → 0.44.0

package/README.md

@@ -217,42 +217,26 @@ react/                   # React components — private workspace, built to reac
   dist/                  #   tsup output; shipped as …/react and …/react/css
 ```
 
-## Develop
-
-```bash
-npm install
-npm run storybook          # http://localhost:6006, or the next free port
-npm run build-storybook    # -> storybook-static/
-node site/build.mjs        # -> site/public/ (landing + kit.css + /storybook)
-```
-
-The React components build and test through the workspace (`npm install` at the repo
-root covers them — there is no second install):
-
-```bash
-npm run storybook -w react   # http://localhost:6007, or the next free port
-npm test -w react            # vitest
-npm run build                # tsup -> react/dist/ (also runs on prepare)
-```
-
-## Publish (public npm)
-
-Versioned publish runs from CI on a GitHub Release:
-
-```bash
-npm version patch          # or minor / major — bumps package.json + tags
-git push --follow-tags
-gh release create v$(node -p "require('./package.json').version") --generate-notes
-```
-
-The **Release** workflow (`.github/workflows/release.yml`) then publishes to the public
-npm registry over npm Trusted Publishing (OIDC) — there is no long-lived token. No
-manual `npm publish` needed. It runs in two jobs: `build` installs and runs `npm pack`,
-whose `prepare` rebuilds `react/dist` from the tagged commit, and `publish` — the only
-job that can mint an OIDC credential — just publishes that tarball, so no dependency
-or build script ever runs beside the credential. The packaging guard
-(`scripts/packaging.test.js`) fails CI if the React subpath isn't in the tarball, and
-the release itself re-checks the tarball before publishing it.
+## Contribute
+
+Use Node 20 or newer. Install [jq](https://jqlang.github.io/jq/), then run `npm ci` at
+the repository root. Start Storybook with `npm run storybook`. For React, use `npm run
+storybook -w react`. Before opening a PR, run `npm test`, `npm test -w react`, `npm run
+build-storybook`, and `node site/build.mjs`.
+
+To add a component, put its token-based CSS in `src/styles/`. Include it in
+`src/index.css` and in both the `styles` map and `cssText` in `src/inline.js`. Add the
+HTML factory under `src/components/`, export it from `src/index.js`, and add a
+playground and state examples under `stories/components/`. Put React components in
+`react/src/`, with a test and story that use the shared classes and tokens. Read the
+[guidelines](guidelines/overview.md) for the design rules.
+
+Open an issue, branch from `main`, and link the issue in your PR. Changes to published
+files, including this README, require a version bump in `package.json` and
+`package-lock.json`, plus an entry in `site/changelog.mjs`. Merging the bump starts the
+release workflow. Do not push a tag or publish by hand.
+
+[Agent rules](AGENTS.md) cover review, data handling, and release checks.
 
 ## Deploy (ui.apli.tech)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.43.0",
+  "version": "0.44.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`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Button`, `Badge`, `Card`, `Icon`.
+Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `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,
@@ -332,3 +332,9 @@ import '@apliteni/apliteni-ui/react/css';
   ]} />
 </DrawerSection>
 ```
+
+## Tabs
+
+Tabs is controlled through `value` and `onChange`. Pass items with unique values, labels, optional counts, and React panel content. Provide a label for the tablist and a value that matches one item. Inactive panel content is unmounted.
+
+Arrow keys move between tabs and wrap from the last tab to the first. They also activate the selected tab. Home and End select the first and last tabs. Tab moves to the selected panel. New panels use the kit’s fade animation, which is shortened when reduced motion is enabled.

package/react/dist/index.d.ts

@@ -450,7 +450,21 @@ type SnippetProps = {
 };
 declare function Snippet({ label, code, reveal, copyLabel }: SnippetProps): react.JSX.Element;
 
+type TabItem = {
+    value: string;
+    label: string;
+    count?: number;
+    panel: ReactNode;
+};
+type TabsProps = {
+    items: TabItem[];
+    value: string;
+    onChange: (value: string) => void;
+    label: string;
+};
+declare function Tabs({ items, value, onChange, label }: TabsProps): 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, 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 TableSort, sortTableRows };
+export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, 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, sortTableRows };

package/react/dist/index.js

@@ -1748,6 +1748,83 @@ function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy
   ] });
 }
 
+// src/Tabs.tsx
+import { useEffect as useEffect6, useId as useId6, useRef as useRef10 } from "react";
+import { playEntrance } from "@apliteni/apliteni-ui/motion";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+function Tabs({ items, value, onChange, label }) {
+  const id = useId6();
+  const previous = useRef10(value);
+  const activePanel = useRef10(null);
+  const buttons = useRef10([]);
+  useEffect6(() => {
+    if (previous.current !== value) playEntrance(activePanel.current);
+    previous.current = value;
+  }, [value]);
+  return /* @__PURE__ */ jsxs15("div", { className: "ui-tabs", children: [
+    /* @__PURE__ */ jsx19("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs15(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        ref: (el) => {
+          buttons.current[i] = el;
+        },
+        className: `ui-tabs__tab${item.value === value ? " is-active" : ""}`,
+        id: `${id}-tab-${i}`,
+        "aria-controls": `${id}-panel-${i}`,
+        "aria-selected": item.value === value,
+        tabIndex: item.value === value ? 0 : -1,
+        onClick: () => onChange(item.value),
+        onKeyDown: (event) => {
+          let next;
+          switch (event.key) {
+            case "ArrowRight":
+              next = (i + 1) % items.length;
+              break;
+            case "ArrowLeft":
+              next = (i - 1 + items.length) % items.length;
+              break;
+            case "Home":
+              next = 0;
+              break;
+            case "End":
+              next = items.length - 1;
+              break;
+            default:
+              return;
+          }
+          event.preventDefault();
+          buttons.current[next]?.focus();
+          onChange(items[next].value);
+        },
+        children: [
+          item.label,
+          item.count != null && /* @__PURE__ */ jsxs15(Fragment5, { children: [
+            " ",
+            item.count
+          ] })
+        ]
+      },
+      item.value
+    )) }),
+    /* @__PURE__ */ jsx19("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx19(
+      "div",
+      {
+        className: "ui-tabs__panel",
+        role: "tabpanel",
+        ref: item.value === value ? activePanel : void 0,
+        id: `${id}-panel-${i}`,
+        "aria-labelledby": `${id}-tab-${i}`,
+        tabIndex: 0,
+        hidden: item.value !== value,
+        children: item.value === value ? item.panel : null
+      },
+      item.value
+    )) })
+  ] });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -1778,5 +1855,6 @@ export {
   SkeletonTable,
   Snippet,
   StatBand,
+  Tabs,
   sortTableRows
 };

package/src/assets/icons.js

@@ -7,7 +7,7 @@
 // iconCategories drives the Storybook grid.
 //
 // Naming, grouping and provenance, and the gates that hold them:
-// why: CONTRIBUTING.md#add-a-glyph
+// Use Lucide paths and name each glyph for what it depicts.
 import { esc } from '../html.js';
 const NAV = {
   chevronDown: '<path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/>',

package/src/components/pagination.js

@@ -241,7 +241,7 @@ export function pagination({
  *
  * @returns {() => void} a function that removes the listeners.
  *
- * why: CONTRIBUTING.md#pagination-event-wiring
+ * Delegate pager events from the root so handlers survive rerenders.
  */
 export function wirePagination(root = document, { onPage, onPageSize } = {}) {
   const scope = typeof root === 'string' ? document.querySelector(root) : root;
@@ -310,7 +310,7 @@ export function wirePagination(root = document, { onPage, onPageSize } = {}) {
  * @returns {Element|null} the status element, or null when there is nothing to
  * update — safe against a torn-down view.
  *
- * why: CONTRIBUTING.md#pagination-status-updates
+ * Update the existing live region so screen readers can announce it.
  */
 export function setPagerStatus(root, text) {
   const el = typeof root === 'string' ? document.querySelector(root) : root;

package/src/components/tooltip.js

@@ -17,7 +17,7 @@ import { esc } from './index.js';
 const cx = (...a) => a.filter(Boolean).join(' ');
 /* classes: ui-tip__label ui-tip__value ui-tip__detail — built from `k` below, so
    a sweep reading class names off the source cannot see them.
-   why: CONTRIBUTING.md#a-spelling-the-sweep-cannot-see-costs-coverage-in-silence */
+   */
 const PARTS = ['label', 'value', 'detail'];
 const px = (n) => (typeof n === 'number' && Number.isFinite(n) ? `${n}px` : null);
 let seq = 0;

package/src/styles/base.css

@@ -128,7 +128,7 @@ strong {
    so this weighs (0,0,1) and any component rule that sizes an icon outranks it.
    The count of those rules is deliberately not written here — it moved once
    already, and two gates hold it over the ground each actually sweeps.
-   why: CONTRIBUTING.md#the-reset-is-a-floor-and-its-specificity-is-the-whole-of-that */
+   */
 svg:where(:not([width]):not([height])) {
   width: 1.1em;
   height: 1.1em;

package/src/styles/command-palette.css

@@ -114,7 +114,7 @@
   /* Literal px, and a line-height it does not inherit: the target-size gate
      reads declarations rather than a laid-out box, and `var()` inside a padding
      shorthand measures as nothing there.
-     why: CONTRIBUTING.md#an-unresolved-var-measures-nothing-and-reports-green */
+     */
   padding: 16px 0;
   line-height: 1.5;
   font-family: inherit;

package/src/styles/layout.css

@@ -62,7 +62,7 @@
 /* The rail's hover WAS --surface-2, so moving the rail onto it would have made
    hovering a row do nothing. The danger row and the current row are left out by
    name, because this rule outranks the states nav.css writes for them.
-   why: CONTRIBUTING.md#a-rule-that-outranks-another-cancels-every-state-that-other-one-writes */
+   */
 .ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: var(--surface-3); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
 .ui-app__brand {
   display: flex;
@@ -118,7 +118,7 @@
 /* A destructive row of the rail is a navigation row and rests like one; the danger
    intent is the step nav.css writes for it. Both of nav.css's danger states are
    named, not hover alone.
-   why: CONTRIBUTING.md#a-rule-that-outranks-another-cancels-every-state-that-other-one-writes */
+   */
 .ui-app__rail .ui-nav__item.is-danger:not(:hover):not(:focus-visible) { color: var(--text); }
 
 /* One rule closes the rail, and it is this one: the nav's footer slot is empty now
@@ -176,7 +176,7 @@
   /* As tall as the mark inside it plus its own padding — 30 + 4 + 4, written out
      rather than as the calc() it comes from, and held to that arithmetic by
      stories/apps/shell-states.test.js.
-     why: CONTRIBUTING.md#an-unresolved-var-measures-nothing-and-reports-green */
+     */
   min-height: 38px;
   padding: var(--space-1) 0;
   border: 0;
@@ -347,7 +347,7 @@
   min-width: 0;
   padding: 7px 10px;
   /* A family alone leaves the browser's leading behind: `font: inherit` first, then
-     the one step this row takes. why: CONTRIBUTING.md#button-chrome-ledgers */
+     the one step this row takes. */
   font: inherit;
   font-size: var(--text-sm);
   text-align: start;

package/src/styles/pagination.css

@@ -4,7 +4,7 @@
  *   --single  one page of content: the size control alone, no steps
  * The controls are .ui-btn ghost/sm and the size control is a .ui-select, so
  * everything here is layout and the two states those sheets do not own.
- * why: CONTRIBUTING.md#pagination-layout
+ * Keep the status at the start and controls together at the far end.
  * ========================================================================== */
 
 .ui-pager {

package/src/tokens/tokens.css

@@ -86,7 +86,7 @@
    * vocabulary; the fallbacks keep tokens.css self-sufficient when imported
    * without brand.generated.css. Delays are the kit's own, and the reusable
    * effect layer lives in styles/motion.css.
-   * why: CONTRIBUTING.md#brand-tokens-synced-from-design-system */
+   * Change generated brand tokens upstream in apliteni/design-system. */
   --ease: var(--easing-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
   --ease-out: var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
   --ease-in: var(--easing-ease-in, cubic-bezier(0.4, 0, 1, 1));