@mohasinac/appkit 3.9.1 → 4.0.0

package/dist/ui/DataTable.js

@@ -123,7 +123,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                 mobileCardRender &&
                 renderCardGrid(activeViewMode), activeViewMode === "table" && mobileCardRender && (_jsx(Div, { className: "appkit-data-table__mobile-cards", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), onToggle: (id, checked) => onSelectionChange?.(checked
                         ? [...selectedIds, id]
-                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx(Div, { className: "appkit-data-table__wrapper", children: _jsx(Div, { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx(Checkbox, { bare: true, className: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
+                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx(Div, { className: `appkit-data-table__wrapper ${mobileCardRender ? "appkit-data-table__wrapper--has-mobile-cards" : ""}`, children: _jsx(Div, { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx(Checkbox, { bare: true, className: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
                                                     paginatedData.every((item) => selectedIds.includes(keyExtractor(item))), onChange: (e) => {
                                                     const pageIds = paginatedData.map(keyExtractor);
                                                     onSelectionChange?.(e.target.checked

package/dist/ui/DataTable.style.css

@@ -190,3 +190,13 @@
     display: none;
   }
 }
+
+/* When mobileCardRender is supplied, the desktop table wrapper must hide
+   below the same breakpoint the mobile-cards block uses above — otherwise
+   both render simultaneously on small screens. Wrapper has no modifier
+   (and always renders) when mobileCardRender is absent. */
+@media (max-width: 767px) {
+  .appkit-data-table__wrapper--has-mobile-cards {
+    display: none;
+  }
+}

package/dist/ui/components/DetailPageTabs.d.ts

@@ -31,4 +31,4 @@ export interface DetailPageTabsProps {
  *
  * W1-14 — extracted 2026-05-23.
  */
-export declare function DetailPageTabs({ tabs, activeTab: activeTabProp, defaultTab, onTabChange, className, }: DetailPageTabsProps): React.JSX.Element;
+export declare function DetailPageTabs({ tabs, activeTab, defaultTab, onTabChange, className, }: DetailPageTabsProps): React.JSX.Element;

package/dist/ui/components/DetailPageTabs.js

@@ -1,11 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Div } from "./Div";
-import { Span } from "./Typography";
-const __O = {
-    xAuto: "overflow-x-auto",
-};
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
 /**
  * `DetailPageTabs` — tab shell used by Product, Auction and Event detail
  * pages. Renders an accessible trigger strip + a single visible panel.
@@ -14,29 +10,9 @@ const __O = {
  *
  * W1-14 — extracted 2026-05-23.
  */
-export function DetailPageTabs({ tabs, activeTab: activeTabProp, defaultTab, onTabChange, className, }) {
-    const [internalActive, setInternalActive] = useState(defaultTab ?? tabs[0]?.id ?? "");
-    const activeTab = activeTabProp ?? internalActive;
-    const active = tabs.find((t) => t.id === activeTab) ?? tabs[0];
-    const handleChange = (id) => {
-        if (activeTabProp === undefined)
-            setInternalActive(id);
-        onTabChange?.(id);
-    };
-    return (_jsxs(Div, { className: [
-            "appkit-detail-tabs",
-            "space-y-4",
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), children: [_jsx(Div, { role: "tablist", "aria-orientation": "horizontal", className: `flex gap-2 border-b border-[var(--appkit-color-border)] ${__O.xAuto}`, children: tabs.map((tab) => {
-                    const isActive = tab.id === active?.id;
-                    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, "aria-controls": `detail-tab-panel-${tab.id}`, id: `detail-tab-trigger-${tab.id}`, disabled: tab.disabled, onClick: () => handleChange(tab.id), className: [
-                            "flex-shrink-0 px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
-                            isActive
-                                ? "border-[var(--appkit-color-primary)] text-[var(--appkit-color-text)]"
-                                : "border-transparent text-[var(--appkit-color-text-muted)] hover:text-zinc-700 hover:text-[var(--appkit-color-text-muted)]",
-                            tab.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-                        ].join(" "), children: [tab.label, typeof tab.count === "number" ? (_jsx(Span, { size: "xs", className: "ml-2 inline-flex items-center justify-center rounded-full bg-[var(--appkit-color-surface)] px-2 py-0.5", children: tab.count })) : null] }, tab.id));
-                }) }), active ? (_jsx(Div, { role: "tabpanel", id: `detail-tab-panel-${active.id}`, "aria-labelledby": `detail-tab-trigger-${active.id}`, children: active.content })) : null] }));
+export function DetailPageTabs({ tabs, activeTab, defaultTab, onTabChange, className, }) {
+    return (_jsxs(Tabs, { value: activeTab, defaultValue: defaultTab ?? tabs[0]?.id ?? "", onChange: onTabChange, className: ["appkit-detail-tabs", "space-y-4", className].filter(Boolean).join(" "), children: [_jsx(TabsList, { children: tabs.map((tab) => {
+                    const label = typeof tab.label === "string" ? tab.label : undefined;
+                    return (_jsx(TabsTrigger, { value: tab.id, disabled: tab.disabled, badge: tab.count, label: label, children: tab.label }, tab.id));
+                }) }), tabs.map((tab) => (_jsx(TabsContent, { value: tab.id, children: _jsx(Div, { children: tab.content }) }, tab.id)))] }));
 }

package/dist/ui/components/Tabs.d.ts

@@ -15,6 +15,14 @@ export interface TabsTriggerProps {
     disabled?: boolean;
     className?: string;
     children?: React.ReactNode;
+    /** Optional count badge rendered as a small pill after the label. */
+    badge?: number;
+    /**
+     * Plain-text label to use for the collapsed mobile dropdown's option text
+     * when `children` isn't a plain string (e.g. it renders a badge pill).
+     * Falls back to `value` when omitted and `children` isn't a string.
+     */
+    label?: string;
 }
 export interface TabsContentProps {
     value: string;
@@ -23,6 +31,6 @@ export interface TabsContentProps {
 }
 export declare function Tabs({ defaultValue, value, onChange, className, children, }: TabsProps): React.JSX.Element;
 export declare function TabsList({ className, children }: TabsListProps): React.JSX.Element;
-export declare function TabsTrigger({ value, disabled, className, children, }: TabsTriggerProps): React.JSX.Element;
+export declare function TabsTrigger({ value, disabled, className, children, badge, }: TabsTriggerProps): React.JSX.Element;
 export declare function TabsContent({ value, className, children, }: TabsContentProps): React.JSX.Element | null;
 export default Tabs;

package/dist/ui/components/Tabs.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useState } from "react";
 import { Select } from "./Select";
 const UI_TABS = {
@@ -7,6 +7,7 @@ const UI_TABS = {
     listDropdown: "appkit-tabs-list--dropdown",
     trigger: "appkit-tabs-trigger",
     content: "appkit-tabs-content",
+    badge: "appkit-tabs-trigger__badge",
 };
 /** Past this many items, TabsList renders a <Select> dropdown instead of a
  * horizontal row — a scrollable row of 6+ tabs is unreadable/unreachable on
@@ -34,19 +35,23 @@ export function TabsList({ className = "", children }) {
     const { active, setActive } = useContext(TabsContext);
     const items = React.Children.toArray(children).filter((child) => React.isValidElement(child));
     if (items.length > TABS_DROPDOWN_THRESHOLD) {
-        const options = items.map((item) => ({
-            value: item.props.value,
-            label: typeof item.props.children === "string" ? item.props.children : item.props.value,
-            disabled: item.props.disabled,
-        }));
+        const options = items.map((item) => {
+            const baseLabel = item.props.label ??
+                (typeof item.props.children === "string" ? item.props.children : item.props.value);
+            return {
+                value: item.props.value,
+                label: item.props.badge ? `${baseLabel} (${item.props.badge})` : baseLabel,
+                disabled: item.props.disabled,
+            };
+        });
         return (_jsx(Select, { bare: true, "aria-label": "Tabs", role: "tablist", options: options, value: active, onValueChange: setActive, className: [UI_TABS.list, UI_TABS.listDropdown, className].filter(Boolean).join(" ") }));
     }
     return (_jsx("div", { role: "tablist", className: [UI_TABS.list, className].filter(Boolean).join(" "), "data-section": "tabs-div-615", children: children }));
 }
-export function TabsTrigger({ value, disabled, className = "", children, }) {
+export function TabsTrigger({ value, disabled, className = "", children, badge, }) {
     const { active, setActive } = useContext(TabsContext);
     const isActive = active === value;
-    return (_jsx("button", { role: "tab", type: "button", disabled: disabled, "aria-selected": isActive, onClick: () => setActive(value), className: [UI_TABS.trigger, className].filter(Boolean).join(" "), children: children }));
+    return (_jsxs("button", { role: "tab", type: "button", disabled: disabled, "aria-selected": isActive, onClick: () => setActive(value), className: [UI_TABS.trigger, className].filter(Boolean).join(" "), children: [children, typeof badge === "number" && badge > 0 && (_jsx("span", { className: UI_TABS.badge, children: badge > 99 ? "99+" : badge }))] }));
 }
 export function TabsContent({ value, className = "", children, }) {
     const { active } = useContext(TabsContext);

package/dist/ui/components/Tabs.style.css

@@ -49,6 +49,25 @@
   opacity: 0.5;
 }
 
+.appkit-tabs-trigger__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.5rem;
+  padding: 0 0.4rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  background: var(--appkit-color-surface-elevated);
+  color: var(--appkit-color-text-muted);
+}
+.appkit-tabs-trigger[aria-selected="true"] .appkit-tabs-trigger__badge {
+  background: color-mix(in srgb, var(--appkit-color-primary) 15%, transparent);
+  color: var(--appkit-color-primary);
+}
+
 .appkit-tabs-content {
   padding-top: 1rem;
   padding-bottom: 1rem;

package/dist/ui/components/index.style.css

@@ -22,7 +22,6 @@
 @import "./PriceDisplay.style.css";
 @import "./ItemRow.style.css";
 @import "./Tooltip.style.css";
-@import "./TabStrip.style.css";
 @import "./Layout.style.css";
 @import "./SortDropdown.style.css";
 @import "./TablePagination.style.css";

package/dist/ui/index.d.ts

@@ -113,8 +113,6 @@ export type { ItemRowProps } from "./components/ItemRow";
 export { ItemRow } from "./components/ItemRow";
 export type { HorizontalScrollerProps, PerViewConfig, } from "./components/HorizontalScroller";
 export { HorizontalScroller } from "./components/HorizontalScroller";
-export type { TabStripProps, TabStripTab } from "./components/TabStrip";
-export { TabStrip } from "./components/TabStrip";
 export type { FormGridProps, FormFieldProps } from "./components/FormGrid";
 export { FormGrid, FormField as FormGridField } from "./components/FormGrid";
 export type { SettingsSectionProps, ToggleRowProps } from "./components/SettingsSection";

package/dist/ui/index.js

@@ -59,7 +59,6 @@ export { SummaryCard } from "./components/SummaryCard";
 export { CountdownDisplay } from "./components/CountdownDisplay";
 export { ItemRow } from "./components/ItemRow";
 export { HorizontalScroller } from "./components/HorizontalScroller";
-export { TabStrip } from "./components/TabStrip";
 export { FormGrid, FormField as FormGridField } from "./components/FormGrid";
 export { SettingsSection, ToggleRow } from "./components/SettingsSection";
 export { DetailPageHero } from "./components/DetailPageHero";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.9.1",
+  "version": "4.0.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"