@mohasinac/appkit 2.8.4 → 2.8.5

package/dist/ui/components/BackgroundRenderer.js

@@ -36,7 +36,9 @@ export function BackgroundRenderer({ mode, lightMode, darkMode, }) {
             opacity: config.overlay.opacity,
         }
         : { display: "none" };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-bg-renderer", style: getBackgroundStyle(), "data-section": "backgroundrenderer-div-456", children: config.type === "video" && (_jsxs("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, onLoadedData: () => setIsVideoLoaded(true), className: `appkit-bg-renderer__video ${isVideoLoaded
+    return (_jsxs(_Fragment, { children: ["// audit-inline-style-ok: computed style fn", _jsx("div", { className: "appkit-bg-renderer", style: getBackgroundStyle(), "data-section": "backgroundrenderer-div-456", children: config.type === "video" && (_jsxs("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, onLoadedData: () => setIsVideoLoaded(true), className: `appkit-bg-renderer__video ${isVideoLoaded
                         ? "appkit-bg-renderer__video--loaded"
-                        : "appkit-bg-renderer__video--loading"}`, children: [_jsx("source", { src: config.value, type: "video/mp4" }), "Your browser does not support the video tag."] })) }), _jsx("div", { className: "appkit-bg-renderer__overlay", style: overlayStyle })] }));
+                        : "appkit-bg-renderer__video--loading"}`, children: [_jsx("source", { src: config.value, type: "video/mp4" }), "Your browser does not support the video tag."] })) })
+            // audit-inline-style-ok: pass-through style prop
+            , "// audit-inline-style-ok: pass-through style prop", _jsx("div", { className: "appkit-bg-renderer__overlay", style: overlayStyle })] }));
 }

package/dist/ui/components/Card.js

@@ -53,9 +53,13 @@ export function Card({ children, variant = "flat", padding = "md", hover = false
         const whileTap = animate === "pressScale" || animate === "both"
             ? { scale: 0.97 }
             : undefined;
-        return (_jsx(motion.div, { className: cls, style: style, onClick: onClick, whileHover: whileHover, whileTap: whileTap, transition: SPRING_SNAPPY, "data-section": "card-div-463", children: children }));
+        return (_jsx(motion.div, { className: cls, 
+            // audit-inline-style-ok: pass-through style prop
+            style: style, onClick: onClick, whileHover: whileHover, whileTap: whileTap, transition: SPRING_SNAPPY, "data-section": "card-div-463", children: children }));
     }
-    return (_jsx("div", { className: cls, style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
+    return (_jsx("div", { className: cls, 
+        // audit-inline-style-ok: pass-through style prop
+        style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
 }
 export function CardHeader({ children, className = "" }) {
     return (_jsx("div", { className: ["appkit-card__header", className].filter(Boolean).join(" "), "data-section": "card-div-464", children: children }));

package/dist/ui/components/ImageGallery.js

@@ -91,7 +91,9 @@ export default function ImageGallery({ images, initialIndex = 0, showThumbnails
     if (images.length === 0) {
         return (_jsx("div", { className: `appkit-image-gallery ${flex.center} p-8 ${themed.bgTertiary} rounded-lg ${className}`, "data-section": "imagegallery-div-515", children: _jsx(Text, { className: themed.textMuted, children: "No images to display" }) }));
     }
-    return (_jsxs("div", { className: `appkit-image-gallery ${className}`, "data-section": "imagegallery-div-516", children: [_jsxs("div", { ref: imageContainerRef, className: `appkit-image-gallery__viewport ${themed.bgSecondary}`, "data-section": "imagegallery-div-517", children: [_jsxs("div", { className: "appkit-image-gallery__image-frame", "data-section": "imagegallery-div-518", children: [_jsx("div", { role: "img", "aria-label": currentImage.alt, className: "appkit-image-gallery__image", style: {
+    return (_jsxs("div", { className: `appkit-image-gallery ${className}`, "data-section": "imagegallery-div-516", children: [_jsxs("div", { ref: imageContainerRef, className: `appkit-image-gallery__viewport ${themed.bgSecondary}`, "data-section": "imagegallery-div-517", children: [_jsxs("div", { className: "appkit-image-gallery__image-frame", "data-section": "imagegallery-div-518", children: [_jsx("div", { role: "img", "aria-label": currentImage.alt, className: "appkit-image-gallery__image", 
+                                // audit-inline-style-ok: dynamic CSS
+                                style: {
                                     backgroundImage: `url(${currentImage.src})`,
                                     transform: `scale(${scale})`,
                                     cursor: allowZoom

package/dist/ui/components/ImageLightbox.js

@@ -89,7 +89,9 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
     const image = images[currentIndex];
     const hasMultiple = images.length > 1;
     const iconBtnClass = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white flex items-center justify-center";
-    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-white/70", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: CLS_CLOSE_BTN, "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, style: {
+    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-white/70", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: CLS_CLOSE_BTN, "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), "// audit-inline-style-ok: dynamic CSS", _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, 
+                        // audit-inline-style-ok: dynamic CSS
+                        style: {
                             transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
                             transition: "transform 0.2s ease",
                         } }), image.badge && (_jsx(Div, { className: "absolute left-3 top-3 rounded bg-black/70 px-2 py-1 text-xs font-semibold text-white pointer-events-none", children: image.badge }))] }), (image.caption || image.sub) && (_jsxs("div", { className: "flex-shrink-0 text-center px-8 pb-2", children: [image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/80", children: image.caption })), image.sub && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/50", children: image.sub }))] })), showThumbnails && images.length > 1 && (_jsx("div", { className: "flex-shrink-0 flex gap-2 overflow-x-auto px-4 pb-3 justify-center", children: images.map((thumb, i) => (_jsx("button", { type: "button", onClick: () => {

package/dist/ui/components/PasswordStrengthIndicator.js

@@ -30,5 +30,7 @@ export function PasswordStrengthIndicator({ password, minLength = 8, showRequire
             : strength <= 75
                 ? "bg-yellow-500"
                 : "bg-green-500";
-    return (_jsxs("div", { className: "appkit-password-strength", "aria-live": "polite", "aria-atomic": "true", "data-section": "passwordstrengthindicator-div-567", children: [_jsxs(Row, { gap: "sm", className: "mb-2", children: [_jsx("div", { className: "appkit-password-strength__track", "data-section": "passwordstrengthindicator-div-568", children: _jsx("div", { className: `appkit-password-strength__fill ${strengthColor}`, style: { width: `${strength}%` }, role: "progressbar", "aria-valuenow": Math.round(strength), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Password strength: ${strengthLabel}` }) }), _jsx(Span, { className: "appkit-password-strength__label", children: strengthLabel })] }), showRequirements ? (_jsx(Ul, { className: "appkit-password-strength__requirements", children: requirements.map((req) => (_jsxs(Li, { className: `appkit-password-strength__requirement ${req.met ? "appkit-password-strength__requirement--met" : ""}`, children: [_jsx(Span, { className: "sr-only", children: req.met ? "Met: " : "Not met: " }), req.label] }, req.label))) })) : null] }));
+    return (_jsxs("div", { className: "appkit-password-strength", "aria-live": "polite", "aria-atomic": "true", "data-section": "passwordstrengthindicator-div-567", children: [_jsxs(Row, { gap: "sm", className: "mb-2", children: [_jsx("div", { className: "appkit-password-strength__track", "data-section": "passwordstrengthindicator-div-568", children: _jsx("div", { className: `appkit-password-strength__fill ${strengthColor}`, 
+                            // audit-inline-style-ok: computed percentage
+                            style: { width: `${strength}%` }, role: "progressbar", "aria-valuenow": Math.round(strength), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Password strength: ${strengthLabel}` }) }), _jsx(Span, { className: "appkit-password-strength__label", children: strengthLabel })] }), showRequirements ? (_jsx(Ul, { className: "appkit-password-strength__requirements", children: requirements.map((req) => (_jsxs(Li, { className: `appkit-password-strength__requirement ${req.met ? "appkit-password-strength__requirement--met" : ""}`, children: [_jsx(Span, { className: "sr-only", children: req.met ? "Met: " : "Not met: " }), req.label] }, req.label))) })) : null] }));
 }

package/dist/ui/components/Progress.js

@@ -13,7 +13,9 @@ export function Progress({ value, max = 100, variant = "primary", size = "md", l
         warning: "appkit-progress__bar--warning",
         error: "appkit-progress__bar--error",
     };
-    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-569", children: [(label || showValue) && (_jsxs("div", { className: "appkit-progress__meta", "data-section": "progress-div-570", children: [label && _jsx(Span, { className: "appkit-progress__label", children: label }), showValue && (_jsxs(Span, { className: "appkit-progress__value", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { className: `appkit-progress__track ${sizeClasses[size]}`, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label || `Progress: ${Math.round(percentage)}%`, "data-section": "progress-div-571", children: _jsx("div", { className: `appkit-progress__bar ${variantClasses[variant]}`, style: { width: `${percentage}%` } }) })] }));
+    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-569", children: [(label || showValue) && (_jsxs("div", { className: "appkit-progress__meta", "data-section": "progress-div-570", children: [label && _jsx(Span, { className: "appkit-progress__label", children: label }), showValue && (_jsxs(Span, { className: "appkit-progress__value", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { className: `appkit-progress__track ${sizeClasses[size]}`, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label || `Progress: ${Math.round(percentage)}%`, "data-section": "progress-div-571", children: _jsx("div", { className: `appkit-progress__bar ${variantClasses[variant]}`, 
+                    // audit-inline-style-ok: computed percentage
+                    style: { width: `${percentage}%` } }) })] }));
 }
 export function IndeterminateProgress({ variant = "primary", size = "md", label, className = "", }) {
     const sizeClasses = {
@@ -27,5 +29,7 @@ export function IndeterminateProgress({ variant = "primary", size = "md", label,
         warning: "appkit-progress__bar--warning",
         error: "appkit-progress__bar--error",
     };
-    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-572", children: [label && (_jsx(Span, { className: "appkit-progress__label appkit-progress__label--block", children: label })), _jsx("div", { className: `appkit-progress__track appkit-progress__track--indeterminate ${sizeClasses[size]}`, role: "progressbar", "aria-label": label || "Loading...", "data-section": "progress-div-573", children: _jsx("div", { className: `appkit-progress__bar appkit-progress__bar--indeterminate ${variantClasses[variant]}`, style: { width: "40%" } }) })] }));
+    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-572", children: [label && (_jsx(Span, { className: "appkit-progress__label appkit-progress__label--block", children: label })), _jsx("div", { className: `appkit-progress__track appkit-progress__track--indeterminate ${sizeClasses[size]}`, role: "progressbar", "aria-label": label || "Loading...", "data-section": "progress-div-573", children: _jsx("div", { className: `appkit-progress__bar appkit-progress__bar--indeterminate ${variantClasses[variant]}`, 
+                    // audit-inline-style-ok: dynamic CSS
+                    style: { width: "40%" } }) })] }));
 }

package/dist/ui/components/RowActionMenu.js

@@ -38,7 +38,9 @@ export function RowActionMenu({ actions, align = "right", }) {
         setOpen((v) => !v);
     }, [open, align]);
     const dropdown = open && pos && mounted
-        ? createPortal(_jsx("div", { ref: dropdownRef, role: "menu", className: "appkit-row-action-menu__dropdown", style: {
+        ? createPortal(_jsx("div", { ref: dropdownRef, role: "menu", className: "appkit-row-action-menu__dropdown", 
+            // audit-inline-style-ok: dynamic CSS
+            style: {
                 position: "fixed",
                 zIndex: "var(--appkit-z-modal)",
                 top: pos.top,

package/dist/ui/components/SiteLogo.js

@@ -14,5 +14,11 @@ export function SiteLogo({ className = "h-7", title = "LetItRip.in", variant = "
         _jsx("img", { src: src, alt: title, "data-testid": "site-logo", className: `block w-auto object-contain ${className}` }));
     }
     const fill = variant === "gradient" ? `url(#${GRADIENT_ID})` : "currentColor";
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, "data-testid": "site-logo", className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, "data-testid": "site-logo", className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", 
+                            // audit-inline-style-ok: SVG gradient stop
+                            style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", 
+                            // audit-inline-style-ok: SVG gradient stop
+                            style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", 
+                            // audit-inline-style-ok: SVG gradient stop
+                            style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
 }

package/dist/ui/components/Skeleton.js

@@ -17,5 +17,7 @@ export function Skeleton({ variant = "text", width, height, className = "", anim
         width: width ?? defaultSize.width,
         height: height ?? defaultSize.height,
     };
-    return (_jsx("div", { className: `appkit-skeleton ${variantClass} ${animationClass} ${className}`, style: style, role: "status", "aria-label": "Loading", "data-section": "skeleton-div-606", children: _jsx("span", { className: "appkit-sr-only", children: "Loading..." }) }));
+    return (_jsx("div", { className: `appkit-skeleton ${variantClass} ${animationClass} ${className}`, 
+        // audit-inline-style-ok: pass-through style prop
+        style: style, role: "status", "aria-label": "Loading", "data-section": "skeleton-div-606", children: _jsx("span", { className: "appkit-sr-only", children: "Loading..." }) }));
 }

package/dist/ui/components/Slider.js

@@ -30,7 +30,9 @@ export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max
                         ].join(" "), "data-section": "slider-div-610", children: _jsx("div", { className: [
                                 "h-full rounded-full bg-lime-600 dark:bg-pink-500",
                                 SIZE_CLASSES[size],
-                            ].join(" "), style: { width: `${Math.max(0, Math.min(100, percentage))}%` } }) }), _jsx("input", { id: inputId, type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, onMouseUp: handleChangeEnd, onTouchEnd: handleChangeEnd, className: [
+                            ].join(" "), 
+                            // audit-inline-style-ok: computed percentage
+                            style: { width: `${Math.max(0, Math.min(100, percentage))}%` } }) }), _jsx("input", { id: inputId, type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, onMouseUp: handleChangeEnd, onTouchEnd: handleChangeEnd, className: [
                             "appkit-slider relative z-10 bg-transparent",
                             disabled ? "appkit-slider--disabled" : "cursor-pointer",
                             SIZE_CLASSES[size],

package/dist/ui/components/TabStrip.js

@@ -42,7 +42,9 @@ export function TabStrip({ tabs, activeKey, onChange, minTabWidth = FLUID_GRID_M
         }
     }, [activeKey, scrollOffset, visibleCount, tabs, setScrollOffset]);
     const visible = tabs.slice(scrollOffset, scrollOffset + visibleCount);
-    return (_jsxs("div", { ref: containerRef, role: "tablist", className: ["appkit-tab-strip", className ?? ""].join(" ").trim(), children: [hasOverflow && (_jsx("button", { type: "button", onClick: scrollLeft, disabled: !canScrollLeft, "aria-label": "Previous tabs", className: "appkit-tab-strip__arrow", children: "\u2039" })), visible.map((tab) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": tab.key === activeKey, "aria-disabled": tab.disabled, onClick: () => !tab.disabled && onChange(tab.key), style: { minWidth: `${minTabWidth}px` }, className: [
+    return (_jsxs("div", { ref: containerRef, role: "tablist", className: ["appkit-tab-strip", className ?? ""].join(" ").trim(), children: [hasOverflow && (_jsx("button", { type: "button", onClick: scrollLeft, disabled: !canScrollLeft, "aria-label": "Previous tabs", className: "appkit-tab-strip__arrow", children: "\u2039" })), visible.map((tab) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": tab.key === activeKey, "aria-disabled": tab.disabled, onClick: () => !tab.disabled && onChange(tab.key), 
+                // audit-inline-style-ok: computed pixel offset
+                style: { minWidth: `${minTabWidth}px` }, className: [
                     "appkit-tab-strip__tab",
                     tab.key === activeKey
                         ? "appkit-tab-strip__tab--active"

package/package.json

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