@mohasinac/appkit 3.7.0 → 3.8.0

package/dist/tokens/themes/default-dark.js

@@ -82,15 +82,15 @@ export const DEFAULT_DARK_THEME = {
         "appkit-space-20": "5rem",
         "appkit-space-24": "6rem",
         "appkit-text-2xs": "0.625rem",
-        "appkit-text-xs": "0.75rem",
-        "appkit-text-sm": "0.875rem",
-        "appkit-text-base": "1rem",
-        "appkit-text-lg": "1.125rem",
-        "appkit-text-xl": "1.25rem",
-        "appkit-text-2xl": "1.5rem",
-        "appkit-text-3xl": "1.875rem",
-        "appkit-text-4xl": "2.25rem",
-        "appkit-text-5xl": "3rem",
+        "appkit-text-xs": "0.6875rem",
+        "appkit-text-sm": "0.8125rem",
+        "appkit-text-base": "0.9375rem",
+        "appkit-text-lg": "1rem",
+        "appkit-text-xl": "1.125rem",
+        "appkit-text-2xl": "1.375rem",
+        "appkit-text-3xl": "1.625rem",
+        "appkit-text-4xl": "1.875rem",
+        "appkit-text-5xl": "2.5rem",
     },
     gradients: {
         brand: "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary))",

package/dist/tokens/themes/default-light.js

@@ -89,15 +89,15 @@ export const DEFAULT_LIGHT_THEME = {
         "appkit-space-20": "5rem",
         "appkit-space-24": "6rem",
         "appkit-text-2xs": "0.625rem",
-        "appkit-text-xs": "0.75rem",
-        "appkit-text-sm": "0.875rem",
-        "appkit-text-base": "1rem",
-        "appkit-text-lg": "1.125rem",
-        "appkit-text-xl": "1.25rem",
-        "appkit-text-2xl": "1.5rem",
-        "appkit-text-3xl": "1.875rem",
-        "appkit-text-4xl": "2.25rem",
-        "appkit-text-5xl": "3rem",
+        "appkit-text-xs": "0.6875rem",
+        "appkit-text-sm": "0.8125rem",
+        "appkit-text-base": "0.9375rem",
+        "appkit-text-lg": "1rem",
+        "appkit-text-xl": "1.125rem",
+        "appkit-text-2xl": "1.375rem",
+        "appkit-text-3xl": "1.625rem",
+        "appkit-text-4xl": "1.875rem",
+        "appkit-text-5xl": "2.5rem",
     },
     gradients: {
         brand: "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary))",

package/dist/tokens/tokens.css

@@ -429,15 +429,15 @@
   --appkit-space-24:   6rem;
 
   --appkit-text-2xs:   0.625rem;
-  --appkit-text-xs:    0.75rem;
-  --appkit-text-sm:    0.875rem;
-  --appkit-text-base:  1rem;
-  --appkit-text-lg:    1.125rem;
-  --appkit-text-xl:    1.25rem;
-  --appkit-text-2xl:   1.5rem;
-  --appkit-text-3xl:   1.875rem;
-  --appkit-text-4xl:   2.25rem;
-  --appkit-text-5xl:   3rem;
+  --appkit-text-xs:    0.6875rem;
+  --appkit-text-sm:    0.8125rem;
+  --appkit-text-base:  0.9375rem;
+  --appkit-text-lg:    1rem;
+  --appkit-text-xl:    1.125rem;
+  --appkit-text-2xl:   1.375rem;
+  --appkit-text-3xl:   1.625rem;
+  --appkit-text-4xl:   1.875rem;
+  --appkit-text-5xl:   2.5rem;
 }
 
 /* --- Theme — Cobalt Night ([data-theme="cobalt-night"]) ------------------- */
@@ -522,15 +522,15 @@
   --appkit-font-mono:      ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
 
   --appkit-text-2xs:       0.625rem;   /* 10px */
-  --appkit-text-xs:        0.75rem;    /* 12px */
-  --appkit-text-sm:        0.875rem;   /* 14px */
-  --appkit-text-base:      1rem;       /* 16px */
-  --appkit-text-lg:        1.125rem;   /* 18px */
-  --appkit-text-xl:        1.25rem;    /* 20px */
-  --appkit-text-2xl:       1.5rem;     /* 24px */
-  --appkit-text-3xl:       1.875rem;   /* 30px */
-  --appkit-text-4xl:       2.25rem;    /* 36px */
-  --appkit-text-5xl:       3rem;       /* 48px */
+  --appkit-text-xs:        0.6875rem;  /* 11px */
+  --appkit-text-sm:        0.8125rem;  /* 13px */
+  --appkit-text-base:      0.9375rem;  /* 15px */
+  --appkit-text-lg:        1rem;       /* 16px */
+  --appkit-text-xl:        1.125rem;   /* 18px */
+  --appkit-text-2xl:       1.375rem;   /* 22px */
+  --appkit-text-3xl:       1.625rem;   /* 26px */
+  --appkit-text-4xl:       1.875rem;   /* 30px */
+  --appkit-text-5xl:       2.5rem;     /* 40px */
 
   --appkit-leading-tight:  1.15;
   --appkit-leading-snug:   1.375;

package/dist/ui/components/ListingToolbar.js

@@ -36,7 +36,7 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx(StickyToolbar, { dataTestId: "listing-toolbar", offset: "header", tone: "translucent", border: true, padding: "none", z: "above-toolbar", className: `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-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [allSelected
                                     ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary)]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] 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-[var(--appkit-color-text)] 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)] 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-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] 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: CLS_CLEAR_ICON_BTN, 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, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] 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-[var(--appkit-color-text)] 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)] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2 sm:shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] 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: CLS_CLEAR_ICON_BTN, 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)] text-white"
                                     : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/package.json

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