@apliteni/apliteni-ui 0.43.1 → 0.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.43.1",
+  "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
 };