@mohasinac/appkit 2.2.0 → 2.3.0

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

@@ -1,18 +0,0 @@
-import React from "react";
-export interface RadioOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-export interface RadioGroupProps {
-    name: string;
-    options: RadioOption[];
-    value?: string;
-    onChange?: (value: string) => void;
-    label?: React.ReactNode;
-    error?: React.ReactNode;
-    orientation?: "vertical" | "horizontal";
-    variant?: "toggle" | "classic";
-    required?: boolean;
-}
-export declare function RadioGroup({ name, options, value, onChange, label, error, orientation, variant, required, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Radio.js

@@ -1,64 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Label, Span, Text } from "./Typography";
-const UI_RADIO = {
-    group: "appkit-radio-group",
-    stack: {
-        vertical: "appkit-radio-group__stack--vertical",
-        horizontal: "appkit-radio-group__stack--horizontal",
-    },
-    classic: {
-        base: "appkit-radio-classic",
-        disabled: "appkit-radio-classic--disabled",
-        indicator: "appkit-radio-classic__indicator",
-        circle: "appkit-radio-classic__circle",
-        circleSelected: "appkit-radio-classic__circle--selected",
-        dot: "appkit-radio-classic__dot",
-        dotSelected: "appkit-radio-classic__dot--selected",
-    },
-    toggle: {
-        base: "appkit-radio-toggle",
-        disabled: "appkit-radio-toggle--disabled",
-        pill: "appkit-radio-toggle__pill",
-        pillSelected: "appkit-radio-toggle__pill--selected",
-        pillError: "appkit-radio-toggle__pill--error",
-        dotRing: "appkit-radio-toggle__dot-ring",
-        dotRingSelected: "appkit-radio-toggle__dot-ring--selected",
-        dotInner: "appkit-radio-toggle__dot-inner",
-    },
-};
-export function RadioGroup({ name, options, value, onChange, label, error, orientation = "vertical", variant = "toggle", required = false, }) {
-    const stackClass = UI_RADIO.stack[orientation];
-    return (_jsxs("div", { className: UI_RADIO.group, children: [label && (_jsx(Label, { className: "mb-2 block", required: required, children: label })), _jsx("div", { className: stackClass, role: "radiogroup", "aria-label": typeof label === "string" ? label : undefined, children: options.map((option) => {
-                    const selected = option.value === value;
-                    if (variant === "classic") {
-                        return (_jsxs(Label, { className: [
-                                UI_RADIO.classic.base,
-                                option.disabled ? UI_RADIO.classic.disabled : "",
-                            ]
-                                .filter(Boolean)
-                                .join(" "), children: [_jsxs("span", { className: UI_RADIO.classic.indicator, children: [_jsx("input", { type: "radio", name: name, value: option.value, checked: selected, onChange: () => onChange?.(option.value), disabled: option.disabled, className: "peer sr-only" }), _jsx("span", { className: [
-                                                UI_RADIO.classic.circle,
-                                                selected ? UI_RADIO.classic.circleSelected : "",
-                                            ].join(" ") }), _jsx("span", { className: [
-                                                UI_RADIO.classic.dot,
-                                                selected ? UI_RADIO.classic.dotSelected : "",
-                                            ].join(" ") })] }), _jsx(Span, { className: "text-sm text-zinc-700 dark:text-zinc-200", children: option.label })] }, option.value));
-                    }
-                    return (_jsxs("label", { className: [
-                            UI_RADIO.toggle.base,
-                            option.disabled ? UI_RADIO.toggle.disabled : "",
-                        ]
-                            .filter(Boolean)
-                            .join(" "), children: [_jsx("input", { type: "radio", name: name, value: option.value, checked: selected, onChange: () => onChange?.(option.value), disabled: option.disabled, className: "peer sr-only" }), _jsxs("span", { className: [
-                                    UI_RADIO.toggle.pill,
-                                    selected ? UI_RADIO.toggle.pillSelected : "",
-                                    error && !selected ? UI_RADIO.toggle.pillError : "",
-                                ]
-                                    .filter(Boolean)
-                                    .join(" "), children: [_jsx("span", { className: [
-                                            UI_RADIO.toggle.dotRing,
-                                            selected ? UI_RADIO.toggle.dotRingSelected : "",
-                                        ].join(" "), children: _jsx("span", { className: selected ? UI_RADIO.toggle.dotInner : "hidden" }) }), _jsx(Span, { children: option.label })] })] }, option.value));
-                }) }), error && (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error }))] }));
-}

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

@@ -1,155 +0,0 @@
-/* Radio — toggle and classic radio group variants */
-
-.appkit-radio-group {
-  width: 100%;
-}
-.appkit-radio-group__stack--vertical {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.appkit-radio-group__stack--horizontal {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-/* Classic variant — circle + label */
-.appkit-radio-classic {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-  cursor: pointer;
-}
-.appkit-radio-classic--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.appkit-radio-classic__indicator {
-  position: relative;
-  display: inline-flex;
-  height: 1.25rem;
-  width: 1.25rem;
-  align-items: center;
-  justify-content: center;
-}
-.appkit-radio-classic__circle {
-  height: 1.25rem;
-  width: 1.25rem;
-  border-radius: 9999px;
-  border: 1px solid #d4d4d8;
-  transition: border-color 0.15s;
-}
-.appkit-radio-classic__circle--selected {
-  border-color: #65a30d;
-}
-.appkit-radio-classic__dot {
-  pointer-events: none;
-  position: absolute;
-  height: 0.625rem;
-  width: 0.625rem;
-  border-radius: 9999px;
-  transition: transform 0.15s, background-color 0.15s;
-  transform: scale(0);
-  background: transparent;
-}
-.appkit-radio-classic__dot--selected {
-  transform: scale(1);
-  background: #65a30d;
-}
-
-/* Toggle variant — pill button style */
-.appkit-radio-toggle {
-  position: relative;
-  display: inline-flex;
-  cursor: pointer;
-}
-.appkit-radio-toggle--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.appkit-radio-toggle__pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 0.5rem;
-  border: 1px solid #e4e4e7;
-  background: #fff;
-  padding: 0.625rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #3f3f46;
-  transition: border-color 0.15s, background 0.15s;
-}
-.appkit-radio-toggle__pill:hover {
-  border-color: #65a30d;
-}
-.appkit-radio-toggle__pill--selected {
-  border-color: #65a30d;
-  background: #f7fee7;
-  color: #365314;
-}
-.appkit-radio-toggle__pill--error {
-  border-color: #fca5a5;
-}
-
-.appkit-radio-toggle__dot-ring {
-  display: inline-flex;
-  height: 0.875rem;
-  width: 0.875rem;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  border: 1px solid #d4d4d8;
-  transition: border-color 0.15s, background 0.15s;
-}
-.appkit-radio-toggle__dot-ring--selected {
-  border-color: #65a30d;
-  background: #65a30d;
-}
-.appkit-radio-toggle__dot-inner {
-  height: 0.375rem;
-  width: 0.375rem;
-  border-radius: 9999px;
-  background: #fff;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-radio-classic__circle {
-    border-color: #475569;
-  }
-  .appkit-radio-classic__circle--selected {
-    border-color: #ec4899;
-  }
-  .appkit-radio-classic__dot--selected {
-    background: #ec4899;
-  }
-  .appkit-radio-toggle__pill {
-    border-color: #334155;
-    background: #0f172a;
-    color: #e4e4e7;
-  }
-  .appkit-radio-toggle__pill:hover {
-    border-color: #ec4899;
-  }
-  .appkit-radio-toggle__pill--selected {
-    border-color: #ec4899;
-    background: rgba(236, 72, 153, 0.1);
-    color: #fce7f3;
-  }
-  .appkit-radio-toggle__pill--error {
-    border-color: rgba(239, 68, 68, 0.6);
-  }
-  .appkit-radio-toggle__dot-ring {
-    border-color: #475569;
-  }
-  .appkit-radio-toggle__dot-ring--selected {
-    border-color: #ec4899;
-    background: #ec4899;
-  }
-  .appkit-radio-toggle__dot-inner {
-    background: #020617;
-  }
-}

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

@@ -1,8 +0,0 @@
-export interface RatingDisplayProps {
-    rating: number;
-    maxRating?: number;
-    size?: "sm" | "md" | "lg";
-    showValue?: boolean;
-    className?: string;
-}
-export declare function RatingDisplay({ rating, maxRating, size, showValue, className, }: RatingDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/RatingDisplay.js

@@ -1,15 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Span } from "./Typography";
-import { classNames } from "../style.helper";
-const sizeClass = {
-    sm: "appkit-rating-display__star--sm",
-    md: "appkit-rating-display__star--md",
-    lg: "appkit-rating-display__star--lg",
-};
-export function RatingDisplay({ rating, maxRating = 5, size = "sm", showValue = false, className, }) {
-    const starSize = sizeClass[size];
-    return (_jsxs("div", { className: classNames("appkit-rating-display", className), children: [_jsx("div", { className: "appkit-rating-display__stars", children: Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => (_jsx("svg", { className: classNames(starSize, star <= rating
-                        ? "appkit-rating-display__star appkit-rating-display__star--active"
-                        : "appkit-rating-display__star appkit-rating-display__star--inactive"), fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }), showValue && (_jsx(Span, { className: "appkit-rating-display__value", children: rating.toFixed(1) }))] }));
-}

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

@@ -1,50 +0,0 @@
-.appkit-rating-display {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.appkit-rating-display__stars {
-  display: flex;
-}
-
-.appkit-rating-display__star--sm {
-  width: 1rem;
-  height: 1rem;
-}
-
-.appkit-rating-display__star--md {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.appkit-rating-display__star--lg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.appkit-rating-display__star--active {
-  color: #fbbf24;
-}
-
-.dark .appkit-rating-display__star--active {
-  color: #e91e8c;
-}
-
-.appkit-rating-display__star--inactive {
-  color: #d4d4d8;
-}
-
-.dark .appkit-rating-display__star--inactive {
-  color: #3f3f46;
-}
-
-.appkit-rating-display__value {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #3f3f46;
-}
-
-.dark .appkit-rating-display__value {
-  color: #d4d4d8;
-}

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

@@ -1,12 +0,0 @@
-interface ResponsiveViewProps {
-    mobile: React.ReactNode;
-    desktop: React.ReactNode;
-    tablet?: React.ReactNode;
-    breakpoint?: "sm" | "md" | "lg" | "xl";
-}
-/**
- * ResponsiveView keeps both trees in the DOM and lets CSS hide inactive branches.
- * This prevents hydration mismatches caused by client-only media queries.
- */
-export declare function ResponsiveView({ mobile, desktop, tablet, breakpoint, }: ResponsiveViewProps): import("react/jsx-runtime").JSX.Element;
-export type { ResponsiveViewProps };

package/dist/ui/components/ResponsiveView.js

@@ -1,9 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * ResponsiveView keeps both trees in the DOM and lets CSS hide inactive branches.
- * This prevents hydration mismatches caused by client-only media queries.
- */
-export function ResponsiveView({ mobile, desktop, tablet, breakpoint = "md", }) {
-    return (_jsxs("div", { className: `appkit-responsive-view--${breakpoint}`, children: [_jsx("div", { className: "appkit-responsive-view__mobile", children: mobile }), tablet && _jsx("div", { className: "appkit-responsive-view__tablet", children: tablet }), _jsx("div", { className: "appkit-responsive-view__desktop", children: desktop })] }));
-}

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

@@ -1,69 +0,0 @@
-/* ResponsiveView — CSS-driven responsive branch visibility */
-
-.appkit-responsive-view__mobile {
-  display: block;
-}
-
-.appkit-responsive-view__desktop {
-  display: none;
-}
-
-.appkit-responsive-view__tablet {
-  display: none;
-}
-
-/* sm breakpoint */
-.appkit-responsive-view--sm .appkit-responsive-view__mobile {
-  @media (min-width: 640px) {
-    display: none;
-  }
-}
-.appkit-responsive-view--sm .appkit-responsive-view__desktop {
-  @media (min-width: 640px) {
-    display: block;
-  }
-}
-
-/* md breakpoint (default) */
-.appkit-responsive-view--md .appkit-responsive-view__mobile {
-  @media (min-width: 768px) {
-    display: none;
-  }
-}
-.appkit-responsive-view--md .appkit-responsive-view__desktop {
-  @media (min-width: 768px) {
-    display: block;
-  }
-}
-.appkit-responsive-view--md .appkit-responsive-view__tablet {
-  @media (min-width: 768px) {
-    display: block;
-  }
-  @media (min-width: 1024px) {
-    display: none;
-  }
-}
-
-/* lg breakpoint */
-.appkit-responsive-view--lg .appkit-responsive-view__mobile {
-  @media (min-width: 1024px) {
-    display: none;
-  }
-}
-.appkit-responsive-view--lg .appkit-responsive-view__desktop {
-  @media (min-width: 1024px) {
-    display: block;
-  }
-}
-
-/* xl breakpoint */
-.appkit-responsive-view--xl .appkit-responsive-view__mobile {
-  @media (min-width: 1280px) {
-    display: none;
-  }
-}
-.appkit-responsive-view--xl .appkit-responsive-view__desktop {
-  @media (min-width: 1280px) {
-    display: block;
-  }
-}

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

@@ -1,7 +0,0 @@
-export interface RoleBadgeProps {
-    role: string;
-    label?: string;
-    className?: string;
-    roleColorMap?: Record<string, string>;
-}
-export declare function RoleBadge({ role, label, className, roleColorMap, }: RoleBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/RoleBadge.js

@@ -1,21 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from "./Badge";
-const DEFAULT_ROLE_LABELS = {
-    admin: "Admin",
-    moderator: "Moderator",
-    seller: "Seller",
-    user: "User",
-};
-const DEFAULT_ROLE_COLORS = {
-    admin: "admin",
-    moderator: "moderator",
-    seller: "seller",
-    user: "user",
-};
-export function RoleBadge({ role, label, className, roleColorMap, }) {
-    const variant = (roleColorMap?.[role] ??
-        DEFAULT_ROLE_COLORS[role] ??
-        "default");
-    return (_jsx(Badge, { variant: variant, className: `appkit-role-badge ${className ?? ""}`, children: label ?? DEFAULT_ROLE_LABELS[role] ?? role }));
-}

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

@@ -1,7 +0,0 @@
-/* RoleBadge — thin wrapper over Badge with role-specific color mapping */
-/* No additional styles needed — delegates entirely to Badge component */
-/* File exists to satisfy style contract requirement */
-
-.appkit-role-badge {
-  /* Inherits all styling from Badge variant */
-}

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

@@ -1,13 +0,0 @@
-import React from "react";
-export interface RowAction {
-    label: string;
-    onClick: () => void;
-    destructive?: boolean;
-    icon?: React.ReactNode;
-    separator?: boolean;
-}
-export interface RowActionMenuProps {
-    actions: RowAction[];
-    align?: "left" | "right";
-}
-export declare function RowActionMenu({ actions, align, }: RowActionMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/RowActionMenu.js

@@ -1,17 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { MoreHorizontal } from "lucide-react";
-import { Button } from "./Button";
-import { Span } from "./Typography";
-import { useClickOutside, useKeyPress } from "../../react";
-export function RowActionMenu({ actions, align = "right", }) {
-    const [open, setOpen] = useState(false);
-    const ref = useRef(null);
-    useClickOutside(ref, () => setOpen(false), { enabled: open });
-    useKeyPress("Escape", () => setOpen(false), { enabled: open });
-    return (_jsxs("div", { ref: ref, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((v) => !v), className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), open ? (_jsx("div", { role: "menu", className: `appkit-row-action-menu__dropdown ${align === "right" ? "appkit-row-action-menu__dropdown--right" : "appkit-row-action-menu__dropdown--left"}`, children: actions.map((action, idx) => (_jsxs("div", { children: [action.separator && idx > 0 ? (_jsx("div", { className: "appkit-row-action-menu__separator" })) : null, _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", onClick: () => {
-                                action.onClick();
-                                setOpen(false);
-                            }, className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""}`, children: [action.icon ? (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })) : null, action.label] })] }, `${action.label}-${idx}`))) })) : null] }));
-}

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

@@ -1,91 +0,0 @@
-/* RowActionMenu — kebab menu with dropdown action list */
-
-.appkit-row-action-menu {
-  position: relative;
-  display: inline-block;
-}
-
-.appkit-row-action-menu__trigger {
-  border-radius: 0.5rem;
-  padding: 0.375rem;
-}
-
-.appkit-row-action-menu__dropdown {
-  position: absolute;
-  z-index: 50;
-  margin-top: 0.25rem;
-  min-width: 160px;
-  border-radius: 0.75rem;
-  border: 1px solid #e4e4e7;
-  background: white;
-  padding-block: 0.375rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-}
-
-:is(.dark) .appkit-row-action-menu__dropdown {
-  border-color: #334155;
-  background: #0f172a;
-}
-
-.appkit-row-action-menu__dropdown--left {
-  left: 0;
-}
-
-.appkit-row-action-menu__dropdown--right {
-  right: 0;
-}
-
-.appkit-row-action-menu__separator {
-  margin-block: 0.25rem;
-  height: 1px;
-  background: #e4e4e7;
-}
-
-:is(.dark) .appkit-row-action-menu__separator {
-  background: #334155;
-}
-
-.appkit-row-action-menu__item {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.5rem 0.875rem;
-  text-align: left;
-  font-size: 0.875rem;
-  color: #3f3f46;
-}
-
-.appkit-row-action-menu__item:hover {
-  background: #f4f4f5;
-}
-
-:is(.dark) .appkit-row-action-menu__item {
-  color: #f4f4f5;
-}
-
-:is(.dark) .appkit-row-action-menu__item:hover {
-  background: #1e293b;
-}
-
-.appkit-row-action-menu__item--destructive {
-  color: #dc2626;
-}
-
-.appkit-row-action-menu__item--destructive:hover {
-  background: #fef2f2;
-}
-
-:is(.dark) .appkit-row-action-menu__item--destructive {
-  color: #f87171;
-}
-
-:is(.dark) .appkit-row-action-menu__item--destructive:hover {
-  background: rgba(127, 29, 29, 0.4);
-}
-
-.appkit-row-action-menu__icon {
-  height: 1rem;
-  width: 1rem;
-  flex-shrink: 0;
-}

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

@@ -1,19 +0,0 @@
-import React from "react";
-export interface SectionTab {
-    label: string;
-    href?: string;
-    value?: string;
-    icon?: React.ReactNode;
-    count?: number;
-}
-export interface SectionTabsProps {
-    tabs: readonly SectionTab[];
-    variant?: "admin" | "user" | "default";
-    className?: string;
-    value?: string;
-    onChange?: (value: string) => void;
-    inline?: boolean;
-    stickyTopClassName?: string;
-    currentPath?: string;
-}
-export declare function SectionTabs({ tabs, variant, className, value, onChange, inline, stickyTopClassName, currentPath, }: SectionTabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/SectionTabs.js

@@ -1,66 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePathname } from "next/navigation";
-import { Nav } from "./Semantic";
-import { Button } from "./Button";
-import { Span } from "./Typography";
-import { TextLink } from "./TextLink";
-export function SectionTabs({ tabs, variant = "default", className = "", value, onChange, inline = false, stickyTopClassName = "top-12 md:top-[108px]", currentPath, }) {
-    const pathname = usePathname();
-    const isControlled = typeof onChange === "function";
-    const activePath = currentPath ?? pathname ?? "";
-    const isActiveTab = (tab) => {
-        if (isControlled) {
-            return value === (tab.value ?? tab.href ?? "");
-        }
-        const href = tab.href ?? "";
-        if (!href)
-            return false;
-        if (href.endsWith("/dashboard") || href.endsWith("/profile")) {
-            return activePath === href;
-        }
-        return activePath.startsWith(href);
-    };
-    const getTabKey = (tab) => tab.value ?? tab.href ?? tab.label;
-    const gradientClass = variant === "admin"
-        ? "appkit-section-tabs--admin"
-        : variant === "user"
-            ? "appkit-section-tabs--user"
-            : "";
-    const tabActiveClass = "appkit-section-tabs__tab--active";
-    const tabInactiveClass = "appkit-section-tabs__tab--inactive";
-    const tabBaseClass = "appkit-section-tabs__tab";
-    const strip = (_jsx(Nav, { "aria-label": "Section navigation", className: "appkit-section-tabs__nav", children: _jsx("div", { className: [
-                "appkit-section-tabs__scroll",
-                inline ? "" : "appkit-section-tabs__scroll--padded",
-            ]
-                .filter(Boolean)
-                .join(" "), children: _jsx("div", { className: [
-                    "appkit-section-tabs__track",
-                    inline ? "" : "appkit-section-tabs__track--full",
-                ]
-                    .filter(Boolean)
-                    .join(" "), children: tabs.map((tab) => {
-                    const key = getTabKey(tab);
-                    const isActive = isActiveTab(tab);
-                    const tabClass = `${tabBaseClass} ${isActive ? tabActiveClass : tabInactiveClass}`;
-                    const content = (_jsxs(_Fragment, { children: [tab.icon && (_jsx(Span, { variant: "inherit", className: "appkit-section-tabs__icon", "aria-hidden": true, children: tab.icon })), tab.label, tab.count !== undefined && (_jsx(Span, { className: `appkit-section-tabs__count ${isActive
-                                    ? "appkit-section-tabs__count--active"
-                                    : "appkit-section-tabs__count--inactive"}`, children: tab.count }))] }));
-                    if (isControlled) {
-                        return (_jsx(Button, { type: "button", variant: "ghost", role: "tab", "aria-selected": isActive, onClick: () => onChange(tab.value ?? tab.href ?? ""), className: tabClass, children: content }, key));
-                    }
-                    return (_jsx(TextLink, { href: tab.href ?? "#", className: tabClass, children: content }, key));
-                }) }) }) }));
-    if (inline) {
-        return _jsx("div", { className: className, children: strip });
-    }
-    return (_jsx("div", { className: [
-            "appkit-section-tabs",
-            stickyTopClassName,
-            gradientClass,
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), children: _jsx("div", { className: "appkit-section-tabs__container", children: strip }) }));
-}