@mohasinac/appkit 2.7.55 → 2.7.57

package/dist/tokens/index.d.ts

@@ -366,7 +366,7 @@ export declare const THEME_CONSTANTS: {
         readonly bgInput: "bg-white dark:bg-slate-800/60";
         readonly textPrimary: "text-zinc-900 dark:text-zinc-50";
         readonly textSecondary: "text-zinc-500 dark:text-zinc-400";
-        readonly textMuted: "text-zinc-400 dark:text-zinc-500";
+        readonly textMuted: "text-zinc-400 dark:text-zinc-400";
         readonly textError: "text-red-600 dark:text-red-400";
         readonly textSuccess: "text-emerald-600 dark:text-emerald-400";
         readonly textOnPrimary: "text-white";
@@ -585,7 +585,7 @@ export declare const THEME_CONSTANTS: {
         readonly base: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-base sm:text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/40 dark:focus:ring-secondary-400/40 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500";
         readonly error: "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10";
         readonly success: "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500";
-        readonly disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-60";
+        readonly disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-400 cursor-not-allowed opacity-60";
         readonly withIcon: "pl-10";
     };
     readonly card: {
@@ -778,7 +778,7 @@ export declare const THEME_CONSTANTS: {
         readonly emptyState: "flex flex-col items-center justify-center py-12 text-center text-zinc-500 dark:text-zinc-400";
     };
     readonly icon: {
-        readonly muted: "text-zinc-400 dark:text-zinc-500";
+        readonly muted: "text-zinc-400 dark:text-zinc-400";
         readonly primary: "text-primary-600 dark:text-secondary-400";
         readonly success: "text-emerald-500 dark:text-emerald-400";
         readonly danger: "text-red-500 dark:text-red-400";

package/dist/tokens/index.js

@@ -203,7 +203,7 @@ const THEMED = {
     // Text
     textPrimary: "text-zinc-900 dark:text-zinc-50",
     textSecondary: "text-zinc-500 dark:text-zinc-400",
-    textMuted: "text-zinc-400 dark:text-zinc-500",
+    textMuted: "text-zinc-400 dark:text-zinc-400",
     textError: "text-red-600 dark:text-red-400",
     textSuccess: "text-emerald-600 dark:text-emerald-400",
     textOnPrimary: "text-white",
@@ -488,7 +488,7 @@ const INPUT = {
     base: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-base sm:text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/40 dark:focus:ring-secondary-400/40 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500",
     error: "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10",
     success: "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500",
-    disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-60",
+    disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-400 cursor-not-allowed opacity-60",
     withIcon: "pl-10",
 };
 /**
@@ -674,7 +674,7 @@ const PATTERNS = {
 };
 /** Icon colour variants and sizes. */
 const ICON = {
-    muted: "text-zinc-400 dark:text-zinc-500",
+    muted: "text-zinc-400 dark:text-zinc-400",
     primary: "text-primary-600 dark:text-secondary-400",
     success: "text-emerald-500 dark:text-emerald-400",
     danger: "text-red-500 dark:text-red-400",

package/dist/ui/DataTable.js

@@ -98,7 +98,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
     if (data.length === 0) {
         if (emptyState)
             return _jsx(_Fragment, { children: emptyState });
-        return (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-632", children: _jsx("div", { className: "appkit-data-table__empty", "data-section": "datatable-div-633", children: _jsxs("div", { className: "text-center px-4", "data-section": "datatable-div-634", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
+        return (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-632", children: _jsx("div", { className: "appkit-data-table__empty", "data-section": "datatable-div-633", children: _jsxs("div", { className: "text-center px-4", "data-section": "datatable-div-634", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
     }
     const renderViewToggle = () => {
         if (!showViewToggle)
@@ -132,7 +132,7 @@ 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", "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" : ""}`, 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"
@@ -157,7 +157,7 @@ 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", "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" : ""}`, 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/Button.style.css

@@ -107,6 +107,13 @@
   background: var(--appkit-color-secondary-400);
 }
 
+/* Cascade fill foreground to all non-appkit-component children inside filled
+   variants. :not([class*="appkit-"]) preserves Badge / Checkbox / Toggle
+   internal styling. Specificity (0,3,0) beats Tailwind text-* (0,1,0). */
+.appkit-button.appkit-button--primary :not([class*="appkit-"]) {
+  color: inherit;
+}
+
 .appkit-button.appkit-button--secondary {
   background: var(--appkit-color-surface);
   border-color: var(--appkit-color-primary-700);
@@ -173,6 +180,10 @@
   background: var(--appkit-color-error-hover);
 }
 
+.appkit-button.appkit-button--danger :not([class*="appkit-"]) {
+  color: inherit;
+}
+
 .appkit-button.appkit-button--warning {
   background: var(--appkit-color-warning);
   color: var(--appkit-color-text-on-primary);
@@ -182,6 +193,10 @@
   background: var(--appkit-color-amber-400);
 }
 
+.appkit-button.appkit-button--warning :not([class*="appkit-"]) {
+  color: inherit;
+}
+
 .appkit-button__spinner {
   width: 1rem;
   height: 1rem;

package/dist/ui/components/Input.js

@@ -24,6 +24,6 @@ export const Input = React.forwardRef(function Input({ label, error, helperText,
     }
     const adornment = rightIcon ??
         (success && !error ? (_jsx("svg", { className: "h-4 w-4 text-green-600 dark:text-green-400", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.414-1.42l2.493 2.494 6.493-6.494a1 1 0 011.415 0z", clipRule: "evenodd" }) })) : null);
-    return (_jsxs("div", { className: "w-full", "data-section": "input-div-527", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", "data-section": "input-div-528", children: [icon && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400 dark:text-zinc-500", "data-section": "input-div-529", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-500", "data-section": "input-div-530", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
+    return (_jsxs("div", { className: "w-full", "data-section": "input-div-527", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", "data-section": "input-div-528", children: [icon && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-529", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-530", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
 });
 Input.displayName = "Input";

package/dist/ui/components/ListingToolbar.js

@@ -31,7 +31,7 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [allSelected
                                     ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary,theme(colors.violet.600))]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: "text-xs text-zinc-400 hover:text-rose-500 dark:text-zinc-500 transition-colors", children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] font-bold text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap text-xs", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-rose-500 dark:hover:text-rose-400 transition-colors", children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: "text-xs text-zinc-400 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] font-bold text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap text-xs", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-rose-500 dark:hover:text-rose-400 transition-colors", children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
                                     ? "border-transparent bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white"
                                     : "border-zinc-300 dark:border-slate-600 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/dist/ui/components/Select.js

@@ -23,5 +23,5 @@ export function Select({ options, value, onChange, onValueChange, placeholder, l
                             className,
                         ]
                             .filter(Boolean)
-                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-500", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
+                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
 }

package/dist/ui/components/StatsGrid.js

@@ -12,5 +12,5 @@ const variantClass = {
     flat: "appkit-stats-grid--flat",
 };
 export function StatsGrid({ stats, columns = 3, variant = "elevated", className, }) {
-    return (_jsx(Div, { className: classNames("appkit-stats-grid", columnsClass[columns], variantClass[variant], className), children: stats.map((stat, i) => (_jsx(Div, { className: "appkit-stats-grid__item", children: _jsxs(Div, { className: "appkit-stats-grid__item-inner", children: [_jsxs(Div, { children: [_jsx(Text, { className: "appkit-stats-grid__label", children: stat.label }), _jsx(Text, { className: "appkit-stats-grid__value", children: stat.value })] }), stat.icon && (_jsx(Div, { className: classNames("appkit-stats-grid__icon", stat.colorClass ?? "text-zinc-400 dark:text-zinc-500"), children: stat.icon }))] }) }, `${stat.label}-${i}`))) }));
+    return (_jsx(Div, { className: classNames("appkit-stats-grid", columnsClass[columns], variantClass[variant], className), children: stats.map((stat, i) => (_jsx(Div, { className: "appkit-stats-grid__item", children: _jsxs(Div, { className: "appkit-stats-grid__item-inner", children: [_jsxs(Div, { children: [_jsx(Text, { className: "appkit-stats-grid__label", children: stat.label }), _jsx(Text, { className: "appkit-stats-grid__value", children: stat.value })] }), stat.icon && (_jsx(Div, { className: classNames("appkit-stats-grid__icon", stat.colorClass ?? "text-zinc-400 dark:text-zinc-400"), children: stat.icon }))] }) }, `${stat.label}-${i}`))) }));
 }

package/dist/ui/index.d.ts

@@ -189,10 +189,6 @@ export type { StackedViewShellProps, StackedViewShellLabels, } from "./component
 export { StackedViewShell } from "./components/StackedViewShell";
 export type { BulkActionBarProps, BulkActionBarLabels, BulkActionItem, } from "./components/BulkActionBar";
 export { BulkActionBar } from "./components/BulkActionBar";
-export type { BulkActionsBarProps, BulkAction } from "./components/BulkActionsBar";
-export { BulkActionsBar } from "./components/BulkActionsBar";
-export type { StickyBottomBarProps } from "./components/StickyBottomBar";
-export { StickyBottomBar } from "./components/StickyBottomBar";
 export type { ClaimCouponButtonProps } from "./components/ClaimCouponButton";
 export { ClaimCouponButton } from "./components/ClaimCouponButton";
 export type { FlowStep, FlowDiagramProps } from "./components/FlowDiagram";

package/dist/ui/index.js

@@ -100,8 +100,6 @@ export { SlottedListingView } from "./components/SlottedListingView";
 export { DetailViewShell } from "./components/DetailViewShell";
 export { StackedViewShell } from "./components/StackedViewShell";
 export { BulkActionBar } from "./components/BulkActionBar";
-export { BulkActionsBar } from "./components/BulkActionsBar";
-export { StickyBottomBar } from "./components/StickyBottomBar";
 export { ClaimCouponButton } from "./components/ClaimCouponButton";
 export { FlowDiagram } from "./components/FlowDiagram";
 export { BaseListingCard } from "./components/BaseListingCard";

package/package.json

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

package/dist/_internal/client/features/seller/print-center/InventoryLabel.d.ts

@@ -1,12 +0,0 @@
-import type { ProductItem } from "../../../../../features/products/types";
-import type { LabelDesign } from "./types";
-interface InventoryLabelProps {
-    product: ProductItem;
-    publicBaseUrl: string;
-    design: LabelDesign;
-    qrDataUrl?: string;
-    barcodeDataUrl?: string;
-    brandName?: string;
-}
-export declare function InventoryLabel({ product, design, qrDataUrl, barcodeDataUrl, brandName }: InventoryLabelProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/_internal/client/features/seller/print-center/InventoryLabel.js

@@ -1,49 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getListingBadge(product) {
-    const lt = product.listingType;
-    if (lt === "auction") {
-        const sub = product.auctionEndDate
-            ? `Ends ${new Date(product.auctionEndDate).toLocaleDateString("en-IN")}`
-            : undefined;
-        return { label: "AUCTION", sub };
-    }
-    if (lt === "pre-order") {
-        const sub = product.preOrderDeliveryDate
-            ? `Expected ${new Date(product.preOrderDeliveryDate).toLocaleDateString("en-IN")}`
-            : undefined;
-        return { label: "PRE-ORDER", sub };
-    }
-    if (lt === "prize-draw")
-        return { label: "PRIZE DRAW" };
-    return null;
-}
-export function InventoryLabel({ product, design, qrDataUrl, barcodeDataUrl, brandName = "" }) {
-    const { size, show, colorScheme } = design;
-    const isDark = colorScheme === "dark";
-    const bg = isDark ? "#1a1a1a" : "#ffffff";
-    const fg = isDark ? "#f5f5f5" : "#111111";
-    const muted = isDark ? "#999999" : "#666666";
-    const border = isDark ? "#333333" : "#e5e5e5";
-    const badge = show.listingTypeBadge ? getListingBadge(product) : null;
-    const loc = product.physicalLocation;
-    const locStr = loc ? `${loc.zone} / ${loc.shelf} / ${loc.bin}` : null;
-    const priceStr = product.price != null ? `₹${(product.price / 100).toFixed(2)}` : null;
-    return (_jsxs("div", { style: {
-            width: `${size.widthMm}mm`,
-            height: `${size.heightMm}mm`,
-            background: bg,
-            color: fg,
-            border: `1px solid ${border}`,
-            borderRadius: "2px",
-            padding: "2mm",
-            fontFamily: "monospace, sans-serif",
-            fontSize: "7pt",
-            display: "flex",
-            flexDirection: "column",
-            gap: "1mm",
-            overflow: "hidden",
-            boxSizing: "border-box",
-            pageBreakInside: "avoid",
-        }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [show.logo && brandName && (_jsx("span", { style: { fontWeight: 700, fontSize: "6pt", color: muted, letterSpacing: "0.05em" }, children: brandName })), badge && (_jsx("span", { style: { background: "#111", color: "#fff", fontSize: "5pt", fontWeight: 700, padding: "0.5mm 1.5mm", borderRadius: "1px", letterSpacing: "0.05em" }, children: badge.label }))] }), _jsx("div", { style: { fontWeight: 700, fontSize: "8pt", lineHeight: 1.2, flex: 1 }, children: product.title }), badge?.sub && _jsx("div", { style: { fontSize: "6pt", color: muted }, children: badge.sub }), (show.price || show.stock) && (_jsxs("div", { style: { display: "flex", gap: "3mm", alignItems: "center" }, children: [show.price && priceStr && _jsx("span", { style: { fontWeight: 700, fontSize: "8pt" }, children: priceStr }), show.stock && product.stockCount != null && (_jsxs("span", { style: { fontSize: "6pt", color: muted }, children: ["Qty: ", product.stockCount] })), product.condition && _jsx("span", { style: { fontSize: "6pt", color: muted }, children: product.condition })] })), show.location && locStr && _jsx("div", { style: { fontSize: "6pt", color: muted }, children: locStr }), (show.barcode || qrDataUrl) && (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: "auto" }, children: [show.barcode && barcodeDataUrl && (_jsx("img", { src: barcodeDataUrl, alt: "barcode", style: { height: "8mm", maxWidth: "60%" } })), qrDataUrl && _jsx("img", { src: qrDataUrl, alt: "qr", style: { width: "10mm", height: "10mm" } })] })), _jsx("div", { style: { fontSize: "5pt", color: muted, textAlign: "center" }, children: product.id })] }));
-}

package/dist/_internal/client/features/seller/print-center/LabelDesignPicker.d.ts

@@ -1,7 +0,0 @@
-import { type LabelDesign } from "./types";
-interface LabelDesignPickerProps {
-    value: LabelDesign;
-    onChange: (design: LabelDesign) => void;
-}
-export declare function LabelDesignPicker({ value, onChange }: LabelDesignPickerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/_internal/client/features/seller/print-center/LabelDesignPicker.js

@@ -1,32 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Row } from "../../../../../ui/components/Layout";
-import { Button } from "../../../../../ui/components/Button";
-import { Input } from "../../../../../ui/components/Input";
-import { Text } from "../../../../../ui/components/Typography";
-import { LABEL_DESIGN_STORAGE_KEY } from "./types";
-const TEMPLATES = ["minimal", "detailed", "branded"];
-const SCHEMES = [
-    { value: "light", label: "Light" },
-    { value: "dark", label: "Dark" },
-    { value: "store-primary", label: "Brand" },
-];
-const SHOW_FIELDS = [
-    { key: "logo", label: "Logo" },
-    { key: "price", label: "Price" },
-    { key: "stock", label: "Stock" },
-    { key: "barcode", label: "Barcode" },
-    { key: "location", label: "Location" },
-    { key: "listingTypeBadge", label: "Type badge" },
-];
-export function LabelDesignPicker({ value, onChange }) {
-    const set = (key, val) => {
-        const next = { ...value, [key]: val };
-        onChange(next);
-        try {
-            localStorage.setItem(LABEL_DESIGN_STORAGE_KEY, JSON.stringify(next));
-        }
-        catch { /* noop */ }
-    };
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px", padding: "16px" }, children: [_jsxs(_Fragment, { children: [_jsx(Text, { variant: "muted", style: { fontSize: "11px", fontWeight: 600, marginBottom: "6px", display: "block" }, children: "Template" }), _jsx(Row, { gap: "xs", children: TEMPLATES.map(t => (_jsx(Button, { variant: value.template === t ? "primary" : "outline", size: "sm", onClick: () => set("template", t), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { variant: "muted", style: { fontSize: "11px", fontWeight: 600, marginBottom: "6px", display: "block" }, children: "Color" }), _jsx(Row, { gap: "xs", children: SCHEMES.map(s => (_jsx(Button, { variant: value.colorScheme === s.value ? "primary" : "outline", size: "sm", onClick: () => set("colorScheme", s.value), children: s.label }, s.value))) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { variant: "muted", style: { fontSize: "11px", fontWeight: 600, marginBottom: "6px", display: "block" }, children: "Size (mm)" }), _jsxs(Row, { gap: "sm", children: [_jsx(Input, { label: "W", type: "number", value: value.size.widthMm, onChange: e => set("size", { ...value.size, widthMm: Number(e.target.value) }), style: { width: "70px" } }), _jsx(Input, { label: "H", type: "number", value: value.size.heightMm, onChange: e => set("size", { ...value.size, heightMm: Number(e.target.value) }), style: { width: "70px" } })] })] }), _jsxs(_Fragment, { children: [_jsx(Text, { variant: "muted", style: { fontSize: "11px", fontWeight: 600, marginBottom: "6px", display: "block" }, children: "Show" }), _jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px" }, children: SHOW_FIELDS.map(f => (_jsxs("label", { style: { display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "12px" }, children: [_jsx("input", { type: "checkbox", checked: value.show[f.key], onChange: e => set("show", { ...value.show, [f.key]: e.target.checked }) }), f.label] }, f.key))) })] })] }));
-}

package/dist/_internal/client/features/seller/print-center/OrderPackingLabel.d.ts

@@ -1,28 +0,0 @@
-import type { LabelDesign } from "./types";
-export interface OrderForLabel {
-    id: string;
-    createdAt?: string;
-    status?: string;
-    buyerDisplayName?: string;
-    buyerCity?: string;
-    items: {
-        productName: string;
-        quantity: number;
-        price: number;
-    }[];
-    physicalLocation?: {
-        zone: string;
-        shelf: string;
-        bin: string;
-    };
-}
-interface OrderPackingLabelProps {
-    order: OrderForLabel;
-    storeBaseUrl: string;
-    design: LabelDesign;
-    qrDataUrl?: string;
-    barcodeDataUrl?: string;
-    brandName?: string;
-}
-export declare function OrderPackingLabel({ order, design, qrDataUrl, barcodeDataUrl, brandName }: OrderPackingLabelProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/_internal/client/features/seller/print-center/OrderPackingLabel.js

@@ -1,33 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function OrderPackingLabel({ order, design, qrDataUrl, barcodeDataUrl, brandName = "" }) {
-    const { size, show, colorScheme } = design;
-    const isDark = colorScheme === "dark";
-    const bg = isDark ? "#1a1a1a" : "#ffffff";
-    const fg = isDark ? "#f5f5f5" : "#111111";
-    const muted = isDark ? "#999999" : "#666666";
-    const border = isDark ? "#333333" : "#e5e5e5";
-    const MAX_ITEMS = 4;
-    const shownItems = order.items.slice(0, MAX_ITEMS);
-    const extraCount = order.items.length - MAX_ITEMS;
-    const loc = order.physicalLocation;
-    const locStr = loc ? `${loc.zone} / ${loc.shelf} / ${loc.bin}` : null;
-    const dateStr = order.createdAt ? new Date(order.createdAt).toLocaleDateString("en-IN") : "";
-    return (_jsxs("div", { style: {
-            width: `${size.widthMm}mm`,
-            height: `${size.heightMm}mm`,
-            background: bg,
-            color: fg,
-            border: `1px solid ${border}`,
-            borderRadius: "2px",
-            padding: "2mm",
-            fontFamily: "monospace, sans-serif",
-            fontSize: "7pt",
-            display: "flex",
-            flexDirection: "column",
-            gap: "1mm",
-            overflow: "hidden",
-            boxSizing: "border-box",
-            pageBreakInside: "avoid",
-        }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: "9pt", letterSpacing: "0.1em" }, children: "PACKING SLIP" }), show.logo && brandName && _jsx("span", { style: { fontSize: "6pt", color: muted }, children: brandName })] }), _jsx("div", { style: { fontWeight: 700, fontSize: "8pt" }, children: order.id }), _jsxs("div", { style: { fontSize: "6pt", color: muted }, children: [dateStr, order.status ? ` · ${order.status}` : ""] }), _jsxs("div", { style: { borderTop: `1px solid ${border}`, paddingTop: "1mm", flex: 1 }, children: [shownItems.map((item, i) => (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "6pt", marginBottom: "0.5mm" }, children: [_jsxs("span", { style: { flex: 1, overflow: "hidden" }, children: ["x", item.quantity, " ", item.productName] }), _jsxs("span", { children: ["Rs.", (item.price / 100).toFixed(0)] })] }, i))), extraCount > 0 && _jsxs("div", { style: { fontSize: "6pt", color: muted }, children: ["+", extraCount, " more"] })] }), (order.buyerDisplayName || order.buyerCity) && (_jsxs("div", { style: { fontSize: "6pt" }, children: [order.buyerDisplayName?.split(" ")[0], order.buyerCity ? ` · ${order.buyerCity}` : ""] })), show.location && locStr && _jsxs("div", { style: { fontSize: "6pt", color: muted }, children: ["Stage: ", locStr] }), (show.barcode || qrDataUrl) && (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: "auto" }, children: [show.barcode && barcodeDataUrl && (_jsx("img", { src: barcodeDataUrl, alt: "barcode", style: { height: "8mm", maxWidth: "65%" } })), qrDataUrl && _jsx("img", { src: qrDataUrl, alt: "qr", style: { width: "10mm", height: "10mm" } })] }))] }));
-}

package/dist/_internal/client/features/seller/print-center/PhysicalLocationModal.d.ts

@@ -1,12 +0,0 @@
-export interface PhysicalLocation {
-    zone: string;
-    shelf: string;
-    bin: string;
-}
-interface PhysicalLocationModalProps {
-    count: number;
-    onSave: (loc: PhysicalLocation) => Promise<void>;
-    onClose: () => void;
-}
-export declare function PhysicalLocationModal({ count, onSave, onClose }: PhysicalLocationModalProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/_internal/client/features/seller/print-center/PhysicalLocationModal.js

@@ -1,30 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Modal } from "../../../../../ui/components/Modal";
-import { Input } from "../../../../../ui/components/Input";
-import { Button } from "../../../../../ui/components/Button";
-import { Row } from "../../../../../ui/components/Layout";
-import { Text } from "../../../../../ui/components/Typography";
-export function PhysicalLocationModal({ count, onSave, onClose }) {
-    const [zone, setZone] = useState("");
-    const [shelf, setShelf] = useState("");
-    const [bin, setBin] = useState("");
-    const [saving, setSaving] = useState(false);
-    const [error, setError] = useState("");
-    const handleSave = async () => {
-        setSaving(true);
-        setError("");
-        try {
-            await onSave({ zone: zone.trim(), shelf: shelf.trim(), bin: bin.trim() });
-            onClose();
-        }
-        catch (e) {
-            setError(e instanceof Error ? e.message : "Failed to save location");
-        }
-        finally {
-            setSaving(false);
-        }
-    };
-    return (_jsx(Modal, { isOpen: true, onClose: onClose, title: `Set Location — ${count} item${count !== 1 ? "s" : ""}`, size: "sm", actions: _jsxs(Row, { gap: "sm", justify: "end", children: [_jsx(Button, { variant: "ghost", onClick: onClose, disabled: saving, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleSave, disabled: saving, children: saving ? "Saving..." : "Save" })] }), children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [_jsx(Text, { variant: "muted", children: "Assign a physical storage location to the selected items. All fields are optional." }), _jsx(Input, { label: "Zone (e.g. A, B, Storage-1)", value: zone, onChange: e => setZone(e.target.value), placeholder: "A" }), _jsx(Input, { label: "Shelf (e.g. 3, Top, Middle)", value: shelf, onChange: e => setShelf(e.target.value), placeholder: "3" }), _jsx(Input, { label: "Bin (e.g. Blue, Box-12)", value: bin, onChange: e => setBin(e.target.value), placeholder: "Blue" }), error && _jsx(Text, { variant: "error", children: error })] }) }));
-}

package/dist/_internal/client/features/seller/print-center/PrintCenterView.d.ts

@@ -1,12 +0,0 @@
-import type { ProductItem } from "../../../../../features/products/types";
-import { type OrderForLabel } from "./OrderPackingLabel";
-import { type StoreForCard } from "./StoreCard";
-export interface PrintCenterViewProps {
-    store: StoreForCard | null;
-    publicBaseUrl: string;
-    isAdmin?: boolean;
-    initialProducts?: ProductItem[];
-    initialOrders?: OrderForLabel[];
-    brandName?: string;
-}
-export declare function PrintCenterView({ store, publicBaseUrl, isAdmin, initialProducts, initialOrders, brandName, }: PrintCenterViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/_internal/client/features/seller/print-center/PrintCenterView.js

@@ -1,102 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../../../ui/components/Tabs";
-import { Button } from "../../../../../ui/components/Button";
-import { Input } from "../../../../../ui/components/Input";
-import { Text } from "../../../../../ui/components/Typography";
-import { Row } from "../../../../../ui/components/Layout";
-import { DEFAULT_PRODUCT_LABEL_DESIGN, DEFAULT_ORDER_LABEL_DESIGN, DEFAULT_CARD_DESIGN, LABEL_DESIGN_STORAGE_KEY, } from "./types";
-import { LabelDesignPicker } from "./LabelDesignPicker";
-import { PrintGrid } from "./PrintGrid";
-import { InventoryLabel } from "./InventoryLabel";
-import { OrderPackingLabel } from "./OrderPackingLabel";
-import { StoreCard } from "./StoreCard";
-import { WebsiteCard } from "./WebsiteCard";
-import { useInventoryPdf } from "./useInventoryPdf";
-function loadSavedDesign(def) {
-    try {
-        const raw = localStorage.getItem(LABEL_DESIGN_STORAGE_KEY);
-        if (raw)
-            return { ...def, ...JSON.parse(raw) };
-    }
-    catch { /* noop */ }
-    return def;
-}
-async function generateLabelData(id, qrUrl) {
-    try {
-        const [qrcode, jsbarcodeModule] = await Promise.all([
-            import("qrcode"),
-            import("jsbarcode"),
-        ]);
-        const JsBarcode = jsbarcodeModule.default;
-        const qrDataUrl = await qrcode.toDataURL(qrUrl, { width: 80, margin: 1 });
-        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        JsBarcode(svg, id, { format: "CODE128", width: 1, height: 25, displayValue: false });
-        const barcodeDataUrl = "data:image/svg+xml;base64," + btoa(new XMLSerializer().serializeToString(svg));
-        return { qrDataUrl, barcodeDataUrl };
-    }
-    catch {
-        return {};
-    }
-}
-export function PrintCenterView({ store, publicBaseUrl, isAdmin = false, initialProducts = [], initialOrders = [], brandName = "", }) {
-    const [tab, setTab] = useState("products");
-    const [productDesign, setProductDesign] = useState(() => loadSavedDesign(DEFAULT_PRODUCT_LABEL_DESIGN));
-    const [orderDesign, setOrderDesign] = useState(DEFAULT_ORDER_LABEL_DESIGN);
-    const [cardDesign, setCardDesign] = useState(DEFAULT_CARD_DESIGN);
-    const [selectedProductIds, setSelectedProductIds] = useState(new Set());
-    const [selectedOrderIds, setSelectedOrderIds] = useState(new Set());
-    const [storeCardCopies, setStoreCardCopies] = useState(1);
-    const [websiteCardCopies, setWebsiteCardCopies] = useState(1);
-    const [labelCache, setLabelCache] = useState({});
-    const [showGrid, setShowGrid] = useState(false);
-    const [printMode, setPrintMode] = useState("products");
-    const selectedProducts = initialProducts.filter(p => selectedProductIds.has(p.id));
-    const selectedOrders = initialOrders.filter(o => selectedOrderIds.has(o.id));
-    useEffect(() => {
-        const items = [
-            ...initialProducts.map(p => ({ id: p.id, url: `${publicBaseUrl}/products/${p.id}` })),
-            ...initialOrders.map(o => ({ id: o.id, url: `${publicBaseUrl}/store/orders/${o.id}/view` })),
-            ...(store ? [{ id: store.id, url: `${publicBaseUrl}/stores/${store.id}` }] : []),
-        ];
-        for (const item of items) {
-            if (labelCache[item.id])
-                continue;
-            generateLabelData(item.id, item.url).then(data => setLabelCache(prev => ({ ...prev, [item.id]: data })));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initialProducts.length, initialOrders.length, store?.id, publicBaseUrl]);
-    const { downloadPdf: dlProducts, isGenerating: genProducts } = useInventoryPdf({ products: selectedProducts, design: productDesign, publicBaseUrl, brandName });
-    const { downloadPdf: dlOrders, isGenerating: genOrders } = useInventoryPdf({ orders: selectedOrders, design: orderDesign, publicBaseUrl, brandName });
-    const { downloadPdf: dlStore, isGenerating: genStore } = useInventoryPdf({ storeCards: store ? Array(storeCardCopies).fill(store) : [], design: cardDesign, publicBaseUrl, brandName });
-    const { downloadPdf: dlWebsite, isGenerating: genWebsite } = useInventoryPdf({ websiteCards: store ? Array(websiteCardCopies).fill(store) : [], design: cardDesign, publicBaseUrl, brandName });
-    const toggleProduct = useCallback((id) => {
-        setSelectedProductIds(prev => { const s = new Set(prev); if (s.has(id))
-            s.delete(id);
-        else
-            s.add(id); return s; });
-    }, []);
-    const toggleOrder = useCallback((id) => {
-        setSelectedOrderIds(prev => { const s = new Set(prev); if (s.has(id))
-            s.delete(id);
-        else
-            s.add(id); return s; });
-    }, []);
-    if (showGrid && printMode === "products") {
-        return _jsx(PrintGrid, { items: selectedProducts.map(p => _jsx(InventoryLabel, { product: p, publicBaseUrl: publicBaseUrl, design: productDesign, qrDataUrl: labelCache[p.id]?.qrDataUrl, barcodeDataUrl: labelCache[p.id]?.barcodeDataUrl }, p.id)), columns: 4, onBack: () => setShowGrid(false), onDownloadPdf: dlProducts, isGeneratingPdf: genProducts });
-    }
-    if (showGrid && printMode === "orders") {
-        return _jsx(PrintGrid, { items: selectedOrders.map(o => _jsx(OrderPackingLabel, { order: o, storeBaseUrl: publicBaseUrl, design: orderDesign, qrDataUrl: labelCache[o.id]?.qrDataUrl, barcodeDataUrl: labelCache[o.id]?.barcodeDataUrl }, o.id)), columns: 4, onBack: () => setShowGrid(false), onDownloadPdf: dlOrders, isGeneratingPdf: genOrders });
-    }
-    if (showGrid && printMode === "store" && store) {
-        return _jsx(PrintGrid, { items: Array.from({ length: storeCardCopies }, (_, i) => _jsx(StoreCard, { store: store, publicBaseUrl: publicBaseUrl, design: cardDesign, qrDataUrl: labelCache[store.id]?.qrDataUrl, barcodeDataUrl: labelCache[store.id]?.barcodeDataUrl }, i)), columns: 4, onBack: () => setShowGrid(false), onDownloadPdf: dlStore, isGeneratingPdf: genStore });
-    }
-    if (showGrid && printMode === "website" && store) {
-        return _jsx(PrintGrid, { items: Array.from({ length: websiteCardCopies }, (_, i) => _jsx(WebsiteCard, { store: store, publicBaseUrl: publicBaseUrl, design: cardDesign, qrDataUrl: labelCache[store.id]?.qrDataUrl, brandName: brandName }, i)), columns: 4, onBack: () => setShowGrid(false), onDownloadPdf: dlWebsite, isGeneratingPdf: genWebsite });
-    }
-    const PANEL_STYLE = { border: "1px solid #e5e7eb", borderRadius: "6px", overflow: "hidden" };
-    const PANEL_HEAD = { padding: "12px", borderBottom: "1px solid #e5e7eb", fontWeight: 600, fontSize: "13px" };
-    const GRID_LAYOUT = { display: "grid", gridTemplateColumns: "1fr 280px", gap: "16px", marginTop: "16px" };
-    return (_jsxs("div", { style: { maxWidth: "960px" }, children: [isAdmin && (_jsxs("div", { style: { marginBottom: "16px", padding: "12px", background: "var(--appkit-color-primary, #6d28d9)", color: "#fff", borderRadius: "6px", fontSize: "13px" }, children: ["Admin mode \u2014 generating materials for: ", store?.storeName ?? "all stores"] })), _jsxs(Tabs, { value: tab, onChange: setTab, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "products", children: "Product Labels" }), _jsx(TabsTrigger, { value: "orders", children: "Packing Slips" }), _jsx(TabsTrigger, { value: "store", children: "Store Cards" }), _jsx(TabsTrigger, { value: "website", children: "Website Cards" })] }), _jsx(TabsContent, { value: "products", children: _jsxs("div", { style: GRID_LAYOUT, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsxs(Text, { variant: "muted", style: { marginBottom: "8px", display: "block" }, children: ["Select products (", selectedProductIds.size, " selected)"] }), _jsxs("div", { style: PANEL_STYLE, children: [initialProducts.length === 0 && (_jsx("div", { style: { padding: "24px", textAlign: "center", color: "#9ca3af" }, children: "No products loaded" })), initialProducts.map(p => (_jsxs("label", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderBottom: "1px solid #f3f4f6", cursor: "pointer", background: selectedProductIds.has(p.id) ? "#f5f3ff" : "#fff" }, children: [_jsx("input", { type: "checkbox", checked: selectedProductIds.has(p.id), onChange: () => toggleProduct(p.id) }), _jsx("span", { style: { flex: 1, fontSize: "13px", fontWeight: 500 }, children: p.title }), _jsx("span", { style: { fontSize: "11px", color: "#9ca3af" }, children: p.listingType ?? "standard" }), p.physicalLocation && (_jsxs("span", { style: { fontSize: "11px", color: "#6b7280", background: "#f3f4f6", padding: "2px 6px", borderRadius: "4px" }, children: [p.physicalLocation.zone, "/", p.physicalLocation.shelf, "/", p.physicalLocation.bin] }))] }, p.id)))] }), initialProducts.length > 0 && (_jsxs(Row, { gap: "sm", style: { marginTop: "6px" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedProductIds(new Set(initialProducts.map(p => p.id))), children: "All" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedProductIds(new Set()), children: "Clear" })] })), _jsxs(Row, { gap: "sm", style: { marginTop: "12px" }, children: [_jsxs(Button, { variant: "primary", disabled: selectedProductIds.size === 0, onClick: () => { setPrintMode("products"); setShowGrid(true); }, children: ["Print", selectedProductIds.size > 0 ? ` (${selectedProductIds.size})` : ""] }), _jsx(Button, { variant: "outline", disabled: selectedProductIds.size === 0 || genProducts, onClick: dlProducts, children: genProducts ? "Generating..." : "Download PDF" })] })] }), _jsxs("div", { style: PANEL_STYLE, children: [_jsx("div", { style: PANEL_HEAD, children: "Label Design" }), _jsx(LabelDesignPicker, { value: productDesign, onChange: setProductDesign })] })] }) }), _jsx(TabsContent, { value: "orders", children: _jsxs("div", { style: GRID_LAYOUT, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsxs(Text, { variant: "muted", style: { marginBottom: "8px", display: "block" }, children: ["Select orders (", selectedOrderIds.size, " selected)"] }), _jsxs("div", { style: PANEL_STYLE, children: [initialOrders.length === 0 && (_jsx("div", { style: { padding: "24px", textAlign: "center", color: "#9ca3af" }, children: "No orders loaded" })), initialOrders.map(o => (_jsxs("label", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderBottom: "1px solid #f3f4f6", cursor: "pointer", background: selectedOrderIds.has(o.id) ? "#f5f3ff" : "#fff" }, children: [_jsx("input", { type: "checkbox", checked: selectedOrderIds.has(o.id), onChange: () => toggleOrder(o.id) }), _jsx("span", { style: { flex: 1, fontSize: "13px", fontWeight: 500 }, children: o.id }), _jsxs("span", { style: { fontSize: "11px", color: "#9ca3af" }, children: [o.items.length, " item", o.items.length !== 1 ? "s" : ""] })] }, o.id)))] }), initialOrders.length > 0 && (_jsxs(Row, { gap: "sm", style: { marginTop: "6px" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedOrderIds(new Set(initialOrders.map(o => o.id))), children: "All" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedOrderIds(new Set()), children: "Clear" })] })), _jsxs(Row, { gap: "sm", style: { marginTop: "12px" }, children: [_jsxs(Button, { variant: "primary", disabled: selectedOrderIds.size === 0, onClick: () => { setPrintMode("orders"); setShowGrid(true); }, children: ["Print", selectedOrderIds.size > 0 ? ` (${selectedOrderIds.size})` : ""] }), _jsx(Button, { variant: "outline", disabled: selectedOrderIds.size === 0 || genOrders, onClick: dlOrders, children: genOrders ? "Generating..." : "Download PDF" })] })] }), _jsxs("div", { style: PANEL_STYLE, children: [_jsx("div", { style: PANEL_HEAD, children: "Label Design" }), _jsx(LabelDesignPicker, { value: orderDesign, onChange: setOrderDesign })] })] }) }), _jsx(TabsContent, { value: "store", children: _jsxs("div", { style: GRID_LAYOUT, children: [_jsx("div", { style: { minWidth: 0 }, children: !store ? (_jsx(Text, { variant: "muted", children: "No store data available." })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { variant: "muted", style: { marginBottom: "12px", display: "block" }, children: ["Business cards for ", _jsx("strong", { children: store.storeName })] }), _jsxs(Row, { gap: "sm", style: { alignItems: "center", marginBottom: "16px" }, children: [_jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: "Copies:" }), _jsx(Input, { type: "number", value: storeCardCopies, onChange: e => setStoreCardCopies(Math.max(1, Math.min(100, Number(e.target.value)))), style: { width: "80px" } })] }), _jsx("div", { style: { marginBottom: "16px" }, children: _jsx(StoreCard, { store: store, publicBaseUrl: publicBaseUrl, design: cardDesign, qrDataUrl: labelCache[store.id]?.qrDataUrl, barcodeDataUrl: labelCache[store.id]?.barcodeDataUrl }) }), _jsxs(Row, { gap: "sm", children: [_jsxs(Button, { variant: "primary", onClick: () => { setPrintMode("store"); setShowGrid(true); }, children: ["Print ", storeCardCopies, " card", storeCardCopies !== 1 ? "s" : ""] }), _jsx(Button, { variant: "outline", disabled: genStore, onClick: dlStore, children: genStore ? "Generating..." : "Download PDF" })] })] })) }), _jsxs("div", { style: PANEL_STYLE, children: [_jsx("div", { style: PANEL_HEAD, children: "Card Design" }), _jsx(LabelDesignPicker, { value: cardDesign, onChange: setCardDesign })] })] }) }), _jsx(TabsContent, { value: "website", children: _jsxs("div", { style: GRID_LAYOUT, children: [_jsx("div", { style: { minWidth: 0 }, children: !store ? (_jsx(Text, { variant: "muted", children: "No store data available." })) : (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "muted", style: { marginBottom: "12px", display: "block" }, children: "Promotional cards to hand out at physical stalls and events." }), _jsxs(Row, { gap: "sm", style: { alignItems: "center", marginBottom: "16px" }, children: [_jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: "Copies:" }), _jsx(Input, { type: "number", value: websiteCardCopies, onChange: e => setWebsiteCardCopies(Math.max(1, Math.min(100, Number(e.target.value)))), style: { width: "80px" } })] }), _jsx("div", { style: { marginBottom: "16px" }, children: _jsx(WebsiteCard, { store: store, publicBaseUrl: publicBaseUrl, design: cardDesign, qrDataUrl: labelCache[store.id]?.qrDataUrl, brandName: brandName }) }), _jsxs(Row, { gap: "sm", children: [_jsxs(Button, { variant: "primary", onClick: () => { setPrintMode("website"); setShowGrid(true); }, children: ["Print ", websiteCardCopies, " card", websiteCardCopies !== 1 ? "s" : ""] }), _jsx(Button, { variant: "outline", disabled: genWebsite, onClick: dlWebsite, children: genWebsite ? "Generating..." : "Download PDF" })] })] })) }), _jsxs("div", { style: PANEL_STYLE, children: [_jsx("div", { style: PANEL_HEAD, children: "Card Design" }), _jsx(LabelDesignPicker, { value: cardDesign, onChange: setCardDesign })] })] }) })] })] }));
-}

package/dist/_internal/client/features/seller/print-center/PrintGrid.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-interface PrintGridProps {
-    items: React.ReactNode[];
-    columns?: 2 | 4;
-    pageSize?: "A4" | "Letter" | "Label";
-    autoprint?: boolean;
-    onBack?: () => void;
-    onDownloadPdf?: () => void;
-    isGeneratingPdf?: boolean;
-}
-export declare function PrintGrid({ items, columns, autoprint, onBack, onDownloadPdf, isGeneratingPdf }: PrintGridProps): import("react/jsx-runtime").JSX.Element;
-export {};