@mohasinac/appkit 2.8.3 → 2.8.5

package/dist/features/stores/components/StoreProductsPageView.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { sieveFilter, sieveAnd, SIEVE_OP } from "@mohasinac/appkit";
 import { productRepository } from "../../../repositories";
 import { parseListingSearchParams } from "../../../utils/listing-params";
 import { getStoreBySlug } from "./StoreDetailLayoutView";
@@ -18,7 +19,7 @@ export async function StoreProductsPageView({ storeSlug, searchParams, }) {
     const pageSize = std.pageSize ?? DEFAULT_PAGE_SIZE;
     const result = await productRepository
         .list({
-        filters: `storeId==${storeId},status==published,listingType==standard`,
+        filters: sieveAnd(sieveFilter("storeId", SIEVE_OP.EQ, storeId), sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "standard")),
         sorts,
         page,
         pageSize,

package/dist/features/stores/components/StoreProductsView.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { sortBy } from "@mohasinac/appkit";
 import { useState } from "react";
 import { Div, Heading, Input, Select, SlottedListingView } from "../../../ui";
 export function StoreProductsView({ storeSlug, labels = {}, renderProducts, renderSearch, renderSort, renderFilters, renderActiveFilters, renderViewToggle, renderPagination, items = [], total = 0, isLoading = false, className = "", }) {
@@ -8,9 +9,9 @@ export function StoreProductsView({ storeSlug, labels = {}, renderProducts, rend
     const [viewMode, setViewMode] = useState("grid");
     void storeSlug;
     return (_jsx(Div, { className: `py-4 ${className}`, children: _jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-4", renderHeader: () => labels.title ? (_jsx(Heading, { level: 2, className: "mb-1 text-xl font-semibold", children: labels.title })) : null, renderSearch: () => renderSearch?.(search, setSearch) ?? (_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search store products", className: "max-w-sm" })), renderSort: () => renderSort?.(sort, setSort) ?? (_jsx(Select, { value: sort, onValueChange: setSort, options: [
-                    { value: "-createdAt", label: "Newest" },
-                    { value: "createdAt", label: "Oldest" },
-                    { value: "price", label: "Price: Low to High" },
-                    { value: "-price", label: "Price: High to Low" },
+                    { value: sortBy("createdAt", "DESC"), label: "Newest" },
+                    { value: sortBy("createdAt", "ASC"), label: "Oldest" },
+                    { value: sortBy("price", "ASC"), label: "Price: Low to High" },
+                    { value: sortBy("price", "DESC"), label: "Price: High to Low" },
                 ], className: "min-w-44" })), renderFilters: renderFilters, renderActiveFilters: renderActiveFilters, renderBulkActions: () => renderViewToggle?.(viewMode, setViewMode) ?? null, renderTable: () => renderProducts(items, isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading }) }));
 }

package/dist/features/stores/components/StoresIndexListing.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { useState, useCallback, useMemo } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useStores } from "../hooks/useStores";
@@ -103,12 +104,12 @@ export function StoresIndexListing({ initialData }) {
     if (ratingRaw) {
         const ratings = ratingRaw.split("|").filter(Boolean);
         if (ratings.length === 1)
-            filterParts.push(`averageRating>=${ratings[0]}`);
+            filterParts.push(sieveFilter("averageRating", SIEVE_OP.GTE, ratings[0]));
     }
     if (minProductCount)
-        filterParts.push(`stats.totalProducts>=${minProductCount}`);
+        filterParts.push(sieveFilter("stats.totalProducts", SIEVE_OP.GTE, minProductCount));
     if (maxProductCount)
-        filterParts.push(`stats.totalProducts<=${maxProductCount}`);
+        filterParts.push(sieveFilter("stats.totalProducts", SIEVE_OP.LTE, maxProductCount));
     if (featured === "true")
         filterParts.push("isFeatured==true");
     const { stores, totalPages, isLoading } = useStores({

package/dist/features/stores/hooks/useStoreAddressSelector.d.ts

@@ -16,7 +16,7 @@ export declare function useStoreAddressSelector(options?: {
 }): {
     addresses: SavedAddress[];
     isLoading: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<SavedAddress[]>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<SavedAddress[], Error>>;
     createAddress: import("@tanstack/react-query").UseMutateFunction<CreateAddressApiResponse, Error, AddressFormData, unknown>;
     isSaving: boolean;
 };

package/dist/features/stores/hooks/useStores.d.ts

@@ -12,16 +12,16 @@ export declare function useStores(params?: StoreListParams, opts?: UseStoresOpti
     hasMore: boolean;
     isLoading: false;
     error: string | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<StoreListResponse>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<StoreListResponse, Error>>;
 };
 export declare function useStoreBySlug(storeSlug: string, opts?: {
     enabled?: boolean;
     endpoint?: string;
 }): {
-    store: NonNullable<NoInfer<StoreDetail | null>> | null;
+    store: StoreDetail | null;
     isLoading: boolean;
     error: string | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<StoreDetail | null>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<StoreDetail | null, Error>>;
 };
 export declare function useStoreProducts(storeSlug: string, params?: string, opts?: {
     enabled?: boolean;
@@ -32,7 +32,7 @@ export declare function useStoreProducts(storeSlug: string, params?: string, opt
     totalPages: number;
     isLoading: boolean;
     error: string | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<StoreProductsResponse>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<StoreProductsResponse, Error>>;
 };
 export declare function useStoreAuctions(storeSlug: string, params?: string, opts?: {
     enabled?: boolean;
@@ -43,7 +43,7 @@ export declare function useStoreAuctions(storeSlug: string, params?: string, opt
     totalPages: number;
     isLoading: boolean;
     error: string | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<StoreAuctionsResponse>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<StoreAuctionsResponse, Error>>;
 };
 export declare function useStoreReviews(storeSlug: string, params?: {
     rating?: number;
@@ -66,6 +66,6 @@ export declare function useStoreReviews(storeSlug: string, params?: {
     ratingDistribution: Record<number, number>;
     isLoading: boolean;
     error: string | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<StoreReviewsData>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<StoreReviewsData, Error>>;
 };
 export {};

package/dist/features/wishlist/components/WishlistPage.js

@@ -6,7 +6,9 @@ const CLS_REMOVE_BTN = "self-start text-zinc-400 dark:text-zinc-400 transition h
 export function WishlistCard({ item, onRemove, onProductClick, }) {
     return (_jsxs(Div, { surface: "card", padding: "sm", className: "flex gap-4", children: [_jsx(Div, { role: onProductClick ? "button" : undefined, tabIndex: onProductClick ? 0 : undefined, onClick: onProductClick ? () => onProductClick(item) : undefined, onKeyDown: onProductClick
                     ? (e) => e.key === "Enter" && onProductClick(item)
-                    : undefined, className: `h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-neutral-100 dark:bg-slate-800 ${onProductClick ? "cursor-pointer" : ""}`, children: item.productImage && (_jsx(Div, { role: "img", "aria-label": item.productTitle ?? "", className: "h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${item.productImage})` } })) }), _jsxs(Div, { className: "flex flex-1 flex-col justify-between", children: [_jsx(Text, { className: `font-medium text-neutral-900 dark:text-zinc-100 ${THEME_CONSTANTS.utilities.textClamp2}`, children: item.productTitle }), item.productPrice !== undefined && (_jsx(Text, { className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100", children: formatCurrency(item.productPrice, item.productCurrency) }))] }), onRemove && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onRemove(item.id), "aria-label": "Remove from wishlist", className: CLS_REMOVE_BTN, children: "\u2715" }))] }));
+                    : undefined, className: `h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-neutral-100 dark:bg-slate-800 ${onProductClick ? "cursor-pointer" : ""}`, children: item.productImage && (_jsx(Div, { role: "img", "aria-label": item.productTitle ?? "", className: "h-full w-full bg-center bg-cover", 
+                    // audit-inline-style-ok: dynamic image URL
+                    style: { backgroundImage: `url(${item.productImage})` } })) }), _jsxs(Div, { className: "flex flex-1 flex-col justify-between", children: [_jsx(Text, { className: `font-medium text-neutral-900 dark:text-zinc-100 ${THEME_CONSTANTS.utilities.textClamp2}`, children: item.productTitle }), item.productPrice !== undefined && (_jsx(Text, { className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100", children: formatCurrency(item.productPrice, item.productCurrency) }))] }), onRemove && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onRemove(item.id), "aria-label": "Remove from wishlist", className: CLS_REMOVE_BTN, children: "\u2715" }))] }));
 }
 export function WishlistPage({ items, isLoading, onRemove, onProductClick, emptyLabel = "Your wishlist is empty", }) {
     if (isLoading) {

package/dist/features/wishlist/components/WishlistView.js

@@ -1,14 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sortBy } from "@mohasinac/appkit";
 import React from "react";
 import { Div, Heading, Row, Text } from "../../../ui";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useWishlist } from "../hooks/useWishlist";
 const WISHLIST_SORT_OPTIONS = [
-    { value: "-addedAt", label: "Newest first" },
+    { value: sortBy("addedAt", "DESC"), label: "Newest first" },
     { value: "addedAt", label: "Oldest first" },
-    { value: "-price", label: "Price: high → low" },
-    { value: "price", label: "Price: low → high" },
+    { value: sortBy("price", "DESC"), label: "Price: high → low" },
+    { value: sortBy("price", "ASC"), label: "Price: low → high" },
 ];
 export function WishlistView({ userId, initialData, labels = {}, renderTabs, renderSearch, renderSort, renderViewToggle, renderProducts, renderTabPlaceholder, renderBulkActions, renderPagination, className = "", }) {
     const table = useUrlTable({ defaults: { sort: "-addedAt", view: "card" } });

package/dist/features/wishlist/hooks/useUserWishlist.d.ts

@@ -17,7 +17,7 @@ interface UseUserWishlistOptions<TProduct> {
 }
 export declare function useUserWishlist<TProduct = unknown>(options?: UseUserWishlistOptions<TProduct>): {
     total: number;
-    data: NoInfer<UserWishlistResponse<TProduct>>;
+    data: UserWishlistResponse<TProduct>;
     error: Error;
     isError: true;
     isPending: false;
@@ -40,12 +40,12 @@ export declare function useUserWishlist<TProduct = unknown>(options?: UseUserWis
     isRefetching: boolean;
     isStale: boolean;
     isEnabled: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<UserWishlistResponse<TProduct>>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<UserWishlistResponse<TProduct>, Error>>;
     fetchStatus: import("@tanstack/query-core").FetchStatus;
-    promise: Promise<NoInfer<UserWishlistResponse<TProduct>>>;
+    promise: Promise<UserWishlistResponse<TProduct>>;
 } | {
     total: number;
-    data: NoInfer<UserWishlistResponse<TProduct>>;
+    data: UserWishlistResponse<TProduct>;
     error: null;
     isError: false;
     isPending: false;
@@ -68,9 +68,9 @@ export declare function useUserWishlist<TProduct = unknown>(options?: UseUserWis
     isRefetching: boolean;
     isStale: boolean;
     isEnabled: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<UserWishlistResponse<TProduct>>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<UserWishlistResponse<TProduct>, Error>>;
     fetchStatus: import("@tanstack/query-core").FetchStatus;
-    promise: Promise<NoInfer<UserWishlistResponse<TProduct>>>;
+    promise: Promise<UserWishlistResponse<TProduct>>;
 } | {
     total: number;
     data: undefined;
@@ -96,9 +96,9 @@ export declare function useUserWishlist<TProduct = unknown>(options?: UseUserWis
     isRefetching: boolean;
     isStale: boolean;
     isEnabled: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<UserWishlistResponse<TProduct>>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<UserWishlistResponse<TProduct>, Error>>;
     fetchStatus: import("@tanstack/query-core").FetchStatus;
-    promise: Promise<NoInfer<UserWishlistResponse<TProduct>>>;
+    promise: Promise<UserWishlistResponse<TProduct>>;
 } | {
     total: number;
     data: undefined;
@@ -124,9 +124,9 @@ export declare function useUserWishlist<TProduct = unknown>(options?: UseUserWis
     isRefetching: boolean;
     isStale: boolean;
     isEnabled: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<UserWishlistResponse<TProduct>>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<UserWishlistResponse<TProduct>, Error>>;
     fetchStatus: import("@tanstack/query-core").FetchStatus;
-    promise: Promise<NoInfer<UserWishlistResponse<TProduct>>>;
+    promise: Promise<UserWishlistResponse<TProduct>>;
 } | {
     total: number;
     data: undefined;
@@ -152,12 +152,12 @@ export declare function useUserWishlist<TProduct = unknown>(options?: UseUserWis
     isRefetching: boolean;
     isStale: boolean;
     isEnabled: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<UserWishlistResponse<TProduct>>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<UserWishlistResponse<TProduct>, Error>>;
     fetchStatus: import("@tanstack/query-core").FetchStatus;
-    promise: Promise<NoInfer<UserWishlistResponse<TProduct>>>;
+    promise: Promise<UserWishlistResponse<TProduct>>;
 } | {
     total: number;
-    data: NoInfer<UserWishlistResponse<TProduct>>;
+    data: UserWishlistResponse<TProduct>;
     isError: false;
     error: null;
     isPending: false;
@@ -180,8 +180,8 @@ export declare function useUserWishlist<TProduct = unknown>(options?: UseUserWis
     isRefetching: boolean;
     isStale: boolean;
     isEnabled: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<UserWishlistResponse<TProduct>>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<UserWishlistResponse<TProduct>, Error>>;
     fetchStatus: import("@tanstack/query-core").FetchStatus;
-    promise: Promise<NoInfer<UserWishlistResponse<TProduct>>>;
+    promise: Promise<UserWishlistResponse<TProduct>>;
 };
 export {};

package/dist/features/wishlist/hooks/useWishlist.d.ts

@@ -11,6 +11,6 @@ export declare function useWishlist(userId: string, opts?: UseWishlistOptions):
     isWishlisted: (productId: string) => boolean;
     isLoading: boolean;
     error: Error | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<WishlistResponse>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<WishlistResponse, Error>>;
 };
 export {};

package/dist/features/wishlist/hooks/useWishlistWithGuest.d.ts

@@ -17,7 +17,7 @@ export declare function useWishlistWithGuest(userId: string | null | undefined,
     isWishlisted: (productId: string) => boolean;
     isLoading: boolean;
     error: Error | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<WishlistResponse>, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<WishlistResponse, Error>>;
     isGuest: boolean;
     guestWishlist?: undefined;
 } | {

package/dist/providers/db-firebase/admin.js

@@ -8,7 +8,6 @@ function nodeCwd() { return module.require("process").cwd(); }
 // Lazy loaders — prevents webpack from bundling firebase-admin into browser chunks.
 // (module as any).require() is used because webpack's static analysis does NOT trace
 // module.require() calls, unlike calls to the literal `require` or aliased `require`.
-/* eslint-disable @typescript-eslint/no-require-imports */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function loadApp() {
     return module.require("firebase-admin/app");

package/dist/ui/DataTable.js

@@ -134,7 +134,9 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                                         ? "ascending"
                                                         : "descending"
                                                     : "none"
-                                                : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx(Span, { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                                : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, 
+                                            // audit-inline-style-ok: dynamic CSS
+                                            style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx(Span, { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                         "appkit-data-table__row",
                                         striped && index % 2 === 1
                                             ? "appkit-data-table__row--striped"
@@ -159,7 +161,9 @@ function DataTableTableView({ columns, paginatedData, keyExtractor, selectable,
                                         ? sortKey === col.key
                                             ? sortDirection === "asc" ? "ascending" : "descending"
                                             : "none"
-                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx(Span, { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, 
+                                    // audit-inline-style-ok: dynamic CSS
+                                    style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx(Span, { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                 "appkit-data-table__row",
                                 striped && index % 2 === 1 ? "appkit-data-table__row--striped" : "",
                                 onRowClick ? "appkit-data-table__row--clickable" : "",

package/dist/ui/components/AvatarDisplay.js

@@ -44,7 +44,9 @@ export function AvatarDisplay({ cropData, size = "md", className = "", alt = "Pr
             className,
         ]
             .filter(Boolean)
-            .join(" "), "data-section": "avatardisplay-div-455", children: _jsx("div", { className: UI_AVATAR_DISPLAY.imageInner, style: {
+            .join(" "), "data-section": "avatardisplay-div-455", children: _jsx("div", { className: UI_AVATAR_DISPLAY.imageInner, 
+            // audit-inline-style-ok: dynamic CSS
+            style: {
                 backgroundImage: `url(${cropData.url})`,
                 backgroundSize: "cover",
                 width: `${(cropData.zoom || 1) * 100}%`,

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.3",
+  "version": "2.8.5",
   "license": "MIT",
   "publishConfig": {
     "access": "public"