@konce-pt/react 0.16.1 → 0.18.0

package/dist/tabs/llms.txt

@@ -5,12 +5,15 @@ Import: `import { KptTabs } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-tabs-host" style="--kpt-anim-duration: 500ms; --kpt-anim-dir: 1">
-      <div class="kpt-tabs__header" role="tablist">
-        <button class="kpt-tabs__tab is-active" role="tab" id="kpt-tabs-r1-tab-0"
-                aria-selected="true" aria-controls="kpt-tabs-r1-panel" tabindex="0">General</button>
-        <button class="kpt-tabs__tab" role="tab" id="kpt-tabs-r1-tab-1"
-                aria-selected="false" tabindex="-1">Advanced</button>
-        <span class="kpt-tabs__ink" style="width: 95px; transform: translateX(85px)"></span>
+      <div class="kpt-tabs__header">
+        <div class="kpt-tabs__list" role="tablist">
+          <button class="kpt-tabs__tab is-active" role="tab" id="kpt-tabs-r1-tab-0"
+                  aria-selected="true" aria-controls="kpt-tabs-r1-panel" tabindex="0">General</button>
+          <button class="kpt-tabs__tab" role="tab" id="kpt-tabs-r1-tab-1"
+                  aria-selected="false" tabindex="-1">Advanced</button>
+          <span class="kpt-tabs__ink" style="width: 95px; transform: translateX(85px)"></span>
+        </div>
+        <div class="kpt-tabs__links"><a class="kpt-tabs__tab kpt-tabs__link" href="...">Docs</a></div>
       </div>
       <div class="kpt-tabs__body" role="tabpanel" tabindex="0" id="kpt-tabs-r1-panel"
            aria-labelledby="kpt-tabs-r1-tab-0">
@@ -21,13 +24,42 @@ Import: `import { KptTabs } from '@konce-pt/react';`
 ## Props
 - `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange` - controlled or uncontrolled
 - `animated`: boolean (default true), `animationDuration`: number (ms, default 500)
+- `onNavigate`: (event: KptNavigateEvent<KptTabProps>) => void - a plain click on a link tab
 - `children` - `<KptTabs.Tab>` elements
 
 ## KptTabs.Tab
-`label` (required), `disabled`, `children`. The tab component never renders itself - `KptTabs`
+`label` (required), `disabled`, `icon`, `iconEnd`, `iconColor`, `iconEndColor`, `href`, `target`, `rel`, `children`. The tab component never renders itself - `KptTabs`
 reads its props and decides what to show, exactly as the Angular version reads the `kpt-tab`
 template. Only the active tab's content is in the DOM.
 
+## Icons
+`icon` goes before the label, `iconEnd` after it - either, both or none. `iconColor` /
+`iconEndColor` take a `KptTabIconColor` (`'primary' | 'success' | 'warning' | 'danger' | 'info'`),
+set as `data-color` and mapped to `--kpt-color-<name>`, or any CSS color (`var(--brand-accent)`),
+set inline as `color`. Without a color the icon inherits the tab's text color. Same markup as
+Angular: `<span class="kpt-icon-host kpt-tabs__icon" data-color="success">` inside the button.
+
+    <KptTabs.Tab label="Checks" icon="circle-check" iconColor="success">...</KptTabs.Tab>
+    <KptTabs.Tab label="Issues" icon="bell" iconEnd="alert-triangle" iconEndColor="warning">...</KptTabs.Tab>
+
+## Link tabs
+A tab with `href` is a link to another page or an external service, not a tab: it has no panel
+(its content is ignored), it does not count towards `activeIndex`, and it renders **after** the
+tabs, outside `role="tablist"` - a tablist may only contain tabs, and a link announced as a tab would
+promise a panel that does not exist. In the keyboard order the links come after the tab row and
+before the panel. `target="_blank"` gets `rel="noopener noreferrer"` unless you pass `rel`.
+A disabled link renders as `<span aria-disabled="true">` without `href`.
+
+A plain click (left button, no modifier keys, no `target`) also emits `onNavigate` with
+`{ item, url, event }`; an app with a router calls `event.preventDefault()` and navigates itself,
+without a page reload.
+
+    <KptTabs onNavigate={({ event, url }) => { event.preventDefault(); navigate(url); }}>
+      <KptTabs.Tab label="Overview">...</KptTabs.Tab>
+      <KptTabs.Tab label="Settings" href="/settings" />
+      <KptTabs.Tab label="npm" href="https://www.npmjs.com/package/@konce-pt/react" target="_blank" iconEnd="external-link" />
+    </KptTabs>
+
 ## The underline is measured, not computed
 `__ink` takes its width and offset from the active button in the DOM, not from the index: tabs have
 different widths and the labels change with the language. The measurement runs after every render,
@@ -47,7 +79,7 @@ schedule another render and the component would loop.
 `--kpt-color-border`, `--kpt-motion-easing-standard`.
 
 ## Accessibility
-The header is `role="tablist"` with `role="tab"` buttons carrying `aria-selected`; the body is
+The tab list (`__list`) is `role="tablist"` with `role="tab"` buttons carrying `aria-selected`; the body is
 `role="tabpanel"`, named by the active tab (`aria-labelledby`), which points back at it with
 `aria-controls`. The tab row is a single `Tab` stop (roving `tabindex`): `ArrowLeft`/`ArrowRight`
 move between tabs, wrapping at the ends, `Home`/`End` jump to the first/last one, and disabled tabs

package/dist/tabs/tabs.d.ts

@@ -1,7 +1,27 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptNavigateEvent } from '../shared/types.ts';
+/** Barwa semantyczna ikony zakładki - nazwa tokenu `--kpt-color-*`. */
+export type KptTabIconColor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
 export interface KptTabProps {
     label: string;
     disabled?: boolean;
+    /** Ikona przed etykietą - nazwa z rejestru ikon. */
+    icon?: string;
+    /** Ikona za etykietą - nazwa z rejestru ikon. */
+    iconEnd?: string;
+    /** Kolor ikony przed etykietą: nazwa semantyczna albo dowolna wartość CSS (`var(--brand)`). */
+    iconColor?: KptTabIconColor | (string & {});
+    /** Kolor ikony za etykietą: nazwa semantyczna albo dowolna wartość CSS (`var(--brand)`). */
+    iconEndColor?: KptTabIconColor | (string & {});
+    /**
+     * Adres - zakładka staje się odnośnikiem do strony albo serwisu zewnętrznego. Nie ma panelu
+     * (`children` są pomijane), nie liczy się do `activeIndex` i stoi za zakładkami, poza `tablist`.
+     */
+    href?: string;
+    /** `target` odnośnika, np. `_blank`. */
+    target?: string;
+    /** `rel` odnośnika; przy `target="_blank"` domyślnie `noopener noreferrer`. */
+    rel?: string;
     children?: ReactNode;
 }
 /**
@@ -13,11 +33,17 @@ export declare namespace KptTab {
     var kptTabsSlot: "tab";
 }
 export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    /** Indeks wśród zakładek z panelem - odnośniki (`href`) się nie liczą. */
     activeIndex?: number;
     defaultActiveIndex?: number;
     onActiveIndexChange?: (index: number) => void;
     animated?: boolean;
     animationDuration?: number;
+    /**
+     * Zwykły klik w zakładkę-odnośnik bez `target`. Aplikacja z routerem woła
+     * `event.preventDefault()` i nawiguje sama, bez przeładowania strony.
+     */
+    onNavigate?: (event: KptNavigateEvent<KptTabProps>) => void;
     children?: ReactNode;
 }
 /**
@@ -25,7 +51,10 @@ export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChan
  *
  * Klawiatura według wzorca WAI-ARIA "tabs": rząd zakładek to jeden przystanek Tab, strzałki
  * w lewo/prawo oraz `Home`/`End` przechodzą po zakładkach (z pominięciem wyłączonych) i od razu je
- * aktywują, a kolejny `Tab` prowadzi do panelu.
+ * aktywują, a kolejny `Tab` prowadzi do odnośników (jeśli są) i dalej do panelu.
+ *
+ * Zakładka z `href` jest odnośnikiem: stoi za zakładkami, poza `tablist` (ta może zawierać wyłącznie
+ * zakładki), nie ma panelu i nie liczy się do `activeIndex`.
  *
  * Podkreślenie aktywnej zakładki (`__ink`) jest mierzone z DOM przycisku, nie liczone z indeksu:
  * zakładki mają różne szerokości, a etykiety zmieniają się z językiem.
@@ -33,10 +62,10 @@ export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChan
  * @example
  * <KptTabs>
  *   <KptTabs.Tab label="Ogólne">...</KptTabs.Tab>
- *   <KptTabs.Tab label="Zaawansowane">...</KptTabs.Tab>
+ *   <KptTabs.Tab label="Zaawansowane" iconEnd="settings">...</KptTabs.Tab>
  * </KptTabs>
  */
-export declare function KptTabs({ activeIndex, defaultActiveIndex, onActiveIndexChange, animated, animationDuration, className, style, children, ...rest }: Readonly<KptTabsProps>): import("react").JSX.Element;
+export declare function KptTabs({ activeIndex, defaultActiveIndex, onActiveIndexChange, animated, animationDuration, onNavigate, className, style, children, ...rest }: Readonly<KptTabsProps>): import("react").JSX.Element;
 export declare namespace KptTabs {
     var Tab: typeof KptTab;
 }

package/dist/tabs/tabs.js

@@ -1,11 +1,27 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { KptIcon } from "../icon/icon.js";
 import { cn } from "../internal/cn.js";
 import { slotChildren, warnUnslottedChild } from "../internal/slot-children.js";
 import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
+import { kptIsPlainClick } from "../shared/types.js";
+const ICON_TONES = new Set(['primary', 'success', 'warning', 'danger', 'info']);
+/** Etykieta z ikonami - wspólna dla zakładki i odnośnika. */
+function TabInner({ tab }) {
+    return (_jsxs(_Fragment, { children: [tab.icon && _jsx(TabIcon, { name: tab.icon, color: tab.iconColor }), tab.label, tab.iconEnd && _jsx(TabIcon, { name: tab.iconEnd, color: tab.iconEndColor })] }));
+}
+/**
+ * Ikona zakładki. Nazwa semantyczna idzie w `data-color` (barwa z tokenu, zmienia się z motywem),
+ * a każdy inny napis - np. `var(--brand-accent)` - trafia wprost do `color`. Bez koloru ikona
+ * dziedziczy barwę tekstu zakładki.
+ */
+function TabIcon({ name, color }) {
+    const tone = color && ICON_TONES.has(color) ? color : undefined;
+    return (_jsx(KptIcon, { className: "kpt-tabs__icon", name: name, "data-color": tone, style: color && !tone ? { color } : undefined }));
+}
 /**
  * Pojedyncza zakładka. Umieszczaj w `<KptTabs>`. Treść renderuje się leniwie - dopiero gdy
  * zakładka jest aktywna, tak samo jak szablon `kpt-tab` w porcie Angulara.
@@ -21,7 +37,10 @@ KptTab.kptTabsSlot = 'tab';
  *
  * Klawiatura według wzorca WAI-ARIA "tabs": rząd zakładek to jeden przystanek Tab, strzałki
  * w lewo/prawo oraz `Home`/`End` przechodzą po zakładkach (z pominięciem wyłączonych) i od razu je
- * aktywują, a kolejny `Tab` prowadzi do panelu.
+ * aktywują, a kolejny `Tab` prowadzi do odnośników (jeśli są) i dalej do panelu.
+ *
+ * Zakładka z `href` jest odnośnikiem: stoi za zakładkami, poza `tablist` (ta może zawierać wyłącznie
+ * zakładki), nie ma panelu i nie liczy się do `activeIndex`.
  *
  * Podkreślenie aktywnej zakładki (`__ink`) jest mierzone z DOM przycisku, nie liczone z indeksu:
  * zakładki mają różne szerokości, a etykiety zmieniają się z językiem.
@@ -29,10 +48,10 @@ KptTab.kptTabsSlot = 'tab';
  * @example
  * <KptTabs>
  *   <KptTabs.Tab label="Ogólne">...</KptTabs.Tab>
- *   <KptTabs.Tab label="Zaawansowane">...</KptTabs.Tab>
+ *   <KptTabs.Tab label="Zaawansowane" iconEnd="settings">...</KptTabs.Tab>
  * </KptTabs>
  */
-export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, className, style, children, ...rest }) {
+export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, onNavigate, className, style, children, ...rest }) {
     const [active, setActive] = useControllableState({
         value: activeIndex,
         defaultValue: defaultActiveIndex,
@@ -43,6 +62,7 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
     const buttonsRef = useRef([]);
     const baseId = useKptId(undefined, 'kpt-tabs');
     const tabs = [];
+    const links = [];
     const contents = [];
     for (const child of slotChildren(children)) {
         if (!isValidElement(child) || child.type?.kptTabsSlot !== 'tab') {
@@ -50,9 +70,18 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
             continue;
         }
         const props = child.props;
+        if (props.href) {
+            links.push(props);
+            continue;
+        }
         tabs.push(props);
         contents.push(props.children);
     }
+    const onLinkClick = (event, link) => {
+        if (link.href && onNavigate && kptIsPlainClick(event, event.currentTarget.target)) {
+            onNavigate({ item: link, url: link.href, event: event.nativeEvent });
+        }
+    };
     const disabled = tabs.map((tab) => !!tab.disabled);
     /**
      * Zakładka pokazywana i jedyna w kolejności Tab: aktywna, a gdy ta jest wyłączona - pierwsza
@@ -102,8 +131,11 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
             ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
             ['--kpt-anim-dir']: direction,
             ...style,
-        }, ...rest, children: [_jsxs("div", { ref: headerRef, className: "kpt-tabs__header", role: "tablist", onKeyDown: onKeyDown, children: [tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
-                            buttonsRef.current[index] = el;
-                        }, type: "button", className: cn('kpt-tabs__tab', index === shown && 'is-active'), role: "tab", id: `${baseId}-tab-${index}`, disabled: tab.disabled, "aria-selected": index === shown, "aria-controls": index === shown ? `${baseId}-panel` : undefined, tabIndex: index === shown ? 0 : -1, onClick: () => select(index), children: tab.label }, index))), _jsx("span", { className: "kpt-tabs__ink", style: { width: ink.w, transform: `translateX(${ink.x}px)` } })] }), _jsx("div", { className: "kpt-tabs__body", role: "tabpanel", tabIndex: 0, id: `${baseId}-panel`, "aria-labelledby": `${baseId}-tab-${shown}`, children: contents[shown] !== undefined ? (_jsx("div", { className: "kpt-tabs__panel", children: contents[shown] }, shown)) : null })] }));
+        }, ...rest, children: [_jsxs("div", { ref: headerRef, className: "kpt-tabs__header", children: [_jsxs("div", { className: "kpt-tabs__list", role: "tablist", onKeyDown: onKeyDown, children: [tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
+                                    buttonsRef.current[index] = el;
+                                }, type: "button", className: cn('kpt-tabs__tab', index === shown && 'is-active'), role: "tab", id: `${baseId}-tab-${index}`, disabled: tab.disabled, "aria-selected": index === shown, "aria-controls": index === shown ? `${baseId}-panel` : undefined, tabIndex: index === shown ? 0 : -1, onClick: () => select(index), children: _jsx(TabInner, { tab: tab }) }, index))), _jsx("span", { className: "kpt-tabs__ink", style: { width: ink.w, transform: `translateX(${ink.x}px)` } })] }), links.length > 0 && (_jsx("div", { className: "kpt-tabs__links", children: links.map((link, index) => 
+                        // Wyłączony odnośnik nie jest `<a>` - z `href` dałoby się go otworzyć klawiaturą albo
+                        // środkowym przyciskiem, a `<a>` bez `href` i tak nie jest już odnośnikiem.
+                        link.disabled ? (_jsx("span", { className: "kpt-tabs__tab kpt-tabs__link", role: "link", "aria-disabled": "true", children: _jsx(TabInner, { tab: link }) }, index)) : (_jsx("a", { className: "kpt-tabs__tab kpt-tabs__link", href: link.href, target: link.target, rel: link.rel ?? (link.target === '_blank' ? 'noopener noreferrer' : undefined), onClick: (event) => onLinkClick(event, link), children: _jsx(TabInner, { tab: link }) }, index))) }))] }), _jsx("div", { className: "kpt-tabs__body", role: "tabpanel", tabIndex: 0, id: `${baseId}-panel`, "aria-labelledby": `${baseId}-tab-${shown}`, children: contents[shown] !== undefined ? (_jsx("div", { className: "kpt-tabs__panel", children: contents[shown] }, shown)) : null })] }));
 }
 KptTabs.Tab = KptTab;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "Open-source React 19 component library on the Koncept UI design system - the same kpt-* CSS layer and --kpt-* tokens as the Angular port. Zero runtime dependencies.",
   "license": "MIT",
   "author": "konce.pt",
@@ -65,19 +65,19 @@
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/backdrop": "0.16.1",
-    "@konce-pt/datetime": "0.16.1",
-    "@konce-pt/chart": "0.16.1",
-    "@konce-pt/mention": "0.16.1",
-    "@konce-pt/icons": "0.16.1",
-    "@konce-pt/roadmap": "0.16.1",
-    "@konce-pt/chat": "0.16.1",
-    "@konce-pt/tokens": "0.16.1",
-    "@konce-pt/i18n": "0.16.1",
-    "@konce-pt/speech": "0.16.1",
-    "@konce-pt/motion": "0.16.1",
-    "@konce-pt/table": "0.16.1",
-    "@konce-pt/map": "0.16.1"
+    "@konce-pt/backdrop": "0.18.0",
+    "@konce-pt/mention": "0.18.0",
+    "@konce-pt/chat": "0.18.0",
+    "@konce-pt/chart": "0.18.0",
+    "@konce-pt/speech": "0.18.0",
+    "@konce-pt/i18n": "0.18.0",
+    "@konce-pt/icons": "0.18.0",
+    "@konce-pt/motion": "0.18.0",
+    "@konce-pt/roadmap": "0.18.0",
+    "@konce-pt/datetime": "0.18.0",
+    "@konce-pt/table": "0.18.0",
+    "@konce-pt/tokens": "0.18.0",
+    "@konce-pt/map": "0.18.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",