@mohasinac/appkit 2.4.11 → 2.5.0

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

@@ -1,196 +1,196 @@
-.appkit-bulk-bar {
-  position: relative;
-  border-radius: 0.5rem;
-  overflow: hidden;
-  border: 1px solid rgba(80, 156, 2, 0.2);
-  animation: appkit-slide-in 150ms ease;
-}
-
-@keyframes appkit-slide-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.appkit-bulk-bar__stripe {
-  height: 3px;
-  width: 100%;
-  background: linear-gradient(90deg, #3e7708, #509c02, #3e7708);
-}
-
-.appkit-bulk-bar__row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-}
-
-/* count pill */
-.appkit-bulk-bar__count-pill {
-  display: inline-flex !important;
-  align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-  min-height: 0 !important;
-  height: 2rem;
-  padding: 0 0.75rem 0 0.5rem;
-  border-radius: 9999px;
-  border: 1px solid rgba(80, 156, 2, 0.3);
-  background: rgba(80, 156, 2, 0.07);
-  color: #3e7708;
-  transition: background-color 0.15s ease;
-}
-
-.appkit-bulk-bar__count-pill:hover {
-  background: rgba(80, 156, 2, 0.14);
-}
-
-.appkit-bulk-bar__count-icon {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-}
-
-.appkit-bulk-bar__count-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-}
-
-/* picker trigger */
-.appkit-bulk-bar__picker-trigger {
-  flex: 1;
-  min-width: 0;
-  height: 2.5rem;
-  display: flex !important;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0 0.75rem;
-  border-radius: 0.5rem;
-  border: 1px solid #e4e4e7;
-  font-size: 0.875rem;
-  font-weight: 500;
-  background: #fafafa;
-  color: #18181b;
-  transition: background-color 0.15s ease;
-}
-
-.appkit-bulk-bar__picker-trigger:hover { background: #f4f4f5; }
-.appkit-bulk-bar__picker-trigger--danger { color: #be123c; }
-
-.appkit-bulk-bar__picker-icon {
-  flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.appkit-bulk-bar__picker-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: left;
-  line-height: 1;
-}
-
-.appkit-bulk-bar__picker-chevron {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  color: #a1a1aa;
-}
-
-/* apply button */
-.appkit-bulk-bar__apply {
-  flex-shrink: 0;
-  height: 2.5rem;
-}
-
-/* dropdown */
-.appkit-bulk-bar__dropdown {
-  overflow: hidden;
-  border-top: 1px solid rgba(228, 228, 231, 0.8);
-  max-height: 0;
-  opacity: 0;
-  pointer-events: none;
-  transition: max-height 0.2s ease, opacity 0.2s ease;
-}
-
-.appkit-bulk-bar__dropdown--open {
-  max-height: 16rem;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* dropdown options */
-.appkit-bulk-bar__option {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.625rem 1rem;
-  font-size: 0.875rem;
-  text-align: left;
-  color: #3f3f46;
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.1s ease;
-}
-
-.appkit-bulk-bar__option:hover { background: #fafafa; }
-.appkit-bulk-bar__option--danger { color: #be123c; }
-.appkit-bulk-bar__option--selected { background: #fafafa; font-weight: 500; }
-.appkit-bulk-bar__option--disabled { opacity: 0.4; cursor: not-allowed; }
-
-.appkit-bulk-bar__option-icon {
-  flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.appkit-bulk-bar__option-label { flex: 1; }
-
-/* dark */
-.dark .appkit-bulk-bar {
-  border-color: rgba(233, 30, 140, 0.3);
-}
-
-.dark .appkit-bulk-bar__stripe {
-  background: linear-gradient(90deg, #be185d, #e91e8c, #be185d);
-}
-
-.dark .appkit-bulk-bar__count-pill {
-  border-color: rgba(233, 30, 140, 0.35);
-  background: rgba(233, 30, 140, 0.1);
-  color: #f9a8d4;
-}
-
-.dark .appkit-bulk-bar__count-pill:hover {
-  background: rgba(233, 30, 140, 0.18);
-}
-
-.dark .appkit-bulk-bar__picker-trigger {
-  border-color: #334155;
-  background: rgba(30, 41, 59, 0.6);
-  color: #f1f5f9;
-}
-
-.dark .appkit-bulk-bar__picker-trigger:hover { background: rgba(51, 65, 85, 0.6); }
-.dark .appkit-bulk-bar__picker-trigger--danger { color: #fda4af; }
-
-.dark .appkit-bulk-bar__dropdown {
-  border-top-color: rgba(51, 65, 85, 0.8);
-}
-
-.dark .appkit-bulk-bar__option { color: #e2e8f0; }
-.dark .appkit-bulk-bar__option:hover { background: rgba(30, 41, 59, 0.6); }
-.dark .appkit-bulk-bar__option--danger { color: #fda4af; }
-.dark .appkit-bulk-bar__option--selected { background: rgba(30, 41, 59, 0.6); }
+.appkit-bulk-bar {
+  position: relative;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid rgba(80, 156, 2, 0.2);
+  animation: appkit-slide-in 150ms ease;
+}
+
+@keyframes appkit-slide-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.appkit-bulk-bar__stripe {
+  height: 3px;
+  width: 100%;
+  background: linear-gradient(90deg, var(--appkit-color-secondary-700), var(--appkit-color-secondary-600), var(--appkit-color-secondary-700));
+}
+
+.appkit-bulk-bar__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+/* count pill */
+.appkit-bulk-bar__count-pill {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  min-height: 0 !important;
+  height: 2rem;
+  padding: 0 0.75rem 0 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(80, 156, 2, 0.3);
+  background: rgba(80, 156, 2, 0.07);
+  color: var(--appkit-color-secondary-700);
+  transition: background-color 0.15s ease;
+}
+
+.appkit-bulk-bar__count-pill:hover {
+  background: rgba(80, 156, 2, 0.14);
+}
+
+.appkit-bulk-bar__count-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.appkit-bulk-bar__count-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* picker trigger */
+.appkit-bulk-bar__picker-trigger {
+  flex: 1;
+  min-width: 0;
+  height: 2.5rem;
+  display: flex !important;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--appkit-color-border);
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: var(--appkit-color-bg);
+  color: var(--appkit-color-text);
+  transition: background-color 0.15s ease;
+}
+
+.appkit-bulk-bar__picker-trigger:hover { background: var(--appkit-color-zinc-100); }
+.appkit-bulk-bar__picker-trigger--danger { color: var(--appkit-color-rose-700); }
+
+.appkit-bulk-bar__picker-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.appkit-bulk-bar__picker-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  line-height: 1;
+}
+
+.appkit-bulk-bar__picker-chevron {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--appkit-color-text-faint);
+}
+
+/* apply button */
+.appkit-bulk-bar__apply {
+  flex-shrink: 0;
+  height: 2.5rem;
+}
+
+/* dropdown */
+.appkit-bulk-bar__dropdown {
+  overflow: hidden;
+  border-top: 1px solid rgba(228, 228, 231, 0.8);
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: max-height 0.2s ease, opacity 0.2s ease;
+}
+
+.appkit-bulk-bar__dropdown--open {
+  max-height: 16rem;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* dropdown options */
+.appkit-bulk-bar__option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--appkit-color-zinc-700);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.appkit-bulk-bar__option:hover { background: var(--appkit-color-bg); }
+.appkit-bulk-bar__option--danger { color: var(--appkit-color-rose-700); }
+.appkit-bulk-bar__option--selected { background: var(--appkit-color-bg); font-weight: 500; }
+.appkit-bulk-bar__option--disabled { opacity: 0.4; cursor: not-allowed; }
+
+.appkit-bulk-bar__option-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.appkit-bulk-bar__option-label { flex: 1; }
+
+/* dark */
+.dark .appkit-bulk-bar {
+  border-color: rgba(233, 30, 140, 0.3);
+}
+
+.dark .appkit-bulk-bar__stripe {
+  background: linear-gradient(90deg, var(--appkit-color-primary-700), var(--appkit-color-primary), var(--appkit-color-primary-700));
+}
+
+.dark .appkit-bulk-bar__count-pill {
+  border-color: rgba(233, 30, 140, 0.35);
+  background: rgba(233, 30, 140, 0.1);
+  color: var(--appkit-color-primary-300);
+}
+
+.dark .appkit-bulk-bar__count-pill:hover {
+  background: rgba(233, 30, 140, 0.18);
+}
+
+.dark .appkit-bulk-bar__picker-trigger {
+  border-color: var(--appkit-color-border);
+  background: rgba(30, 41, 59, 0.6);
+  color: var(--appkit-color-text);
+}
+
+.dark .appkit-bulk-bar__picker-trigger:hover { background: rgba(51, 65, 85, 0.6); }
+.dark .appkit-bulk-bar__picker-trigger--danger { color: var(--appkit-color-rose-300); }
+
+.dark .appkit-bulk-bar__dropdown {
+  border-top-color: rgba(51, 65, 85, 0.8);
+}
+
+.dark .appkit-bulk-bar__option { color: var(--appkit-color-text); }
+.dark .appkit-bulk-bar__option:hover { background: rgba(30, 41, 59, 0.6); }
+.dark .appkit-bulk-bar__option--danger { color: var(--appkit-color-rose-300); }
+.dark .appkit-bulk-bar__option--selected { background: rgba(30, 41, 59, 0.6); }

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

@@ -6,6 +6,8 @@ export interface BulkAction {
     onClick: () => void;
     variant?: "primary" | "secondary" | "danger";
     requiresAuth?: boolean;
+    /** When true the button renders disabled (e.g. selection count out of range). */
+    disabled?: boolean;
 }
 export interface BulkActionsBarProps {
     selectedCount: number;

package/dist/ui/components/BulkActionsBar.js

@@ -14,9 +14,12 @@ export function BulkActionsBar({ selectedCount, onClearSelection, actions, isAut
         ].join(" "), style: { zIndex: "var(--appkit-z-modal, 1000)" }, "aria-live": "polite", "aria-label": `${selectedCount} items selected`, children: _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 bg-white/[.98] dark:bg-slate-900/[.98] backdrop-blur-md px-4 py-3 shadow-2xl", children: _jsxs("div", { className: "mx-auto flex max-w-5xl items-center gap-3", children: [_jsxs("span", { className: "shrink-0 text-sm font-semibold text-zinc-700 dark:text-zinc-200", children: [selectedCount, " selected"] }), _jsx("div", { className: "h-4 w-px shrink-0 bg-zinc-200 dark:bg-slate-700" }), _jsx("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: actions.map((action) => {
                             if (action.requiresAuth && !isAuthenticated)
                                 return null;
-                            return (_jsxs("button", { type: "button", onClick: action.onClick, className: [
+                            return (_jsxs("button", { type: "button", onClick: action.onClick, disabled: action.disabled, "aria-disabled": action.disabled || undefined, className: [
                                     "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all active:scale-95",
                                     ACTION_VARIANT_CLASS[action.variant ?? "secondary"],
-                                ].join(" "), children: [action.icon, action.label] }, action.key));
+                                    action.disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "",
+                                ]
+                                    .filter(Boolean)
+                                    .join(" "), children: [action.icon, action.label] }, action.key));
                         }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClearSelection, "aria-label": "Clear selection", className: "ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] }) }) }));
 }

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

@@ -26,6 +26,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     size?: keyof typeof UI_BUTTON.sizes;
     isLoading?: boolean;
     children?: React.ReactNode;
+    /** Render as the child element (e.g. next/link) with button styling applied */
+    asChild?: boolean;
 }
-export declare function Button({ variant, size, className, isLoading, disabled, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ variant, size, className, isLoading, disabled, children, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/components/Button.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { twMerge } from "tailwind-merge";
 import { Loader2 } from "lucide-react";
 /**
@@ -24,6 +25,15 @@ const UI_BUTTON = {
         lg: "appkit-button--lg",
     },
 };
-export function Button({ variant = "primary", size = "md", className = "", isLoading = false, disabled, children, ...props }) {
-    return (_jsxs("button", { className: twMerge(UI_BUTTON.base, UI_BUTTON.variants[variant], UI_BUTTON.sizes[size], className), disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: children })) : (_jsx("span", { className: "appkit-button__content", children: children }))] }));
+export function Button({ variant = "primary", size = "md", className = "", isLoading = false, disabled, children, asChild = false, ...props }) {
+    const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[variant], UI_BUTTON.sizes[size], className);
+    if (asChild && React.isValidElement(children)) {
+        const child = children;
+        return React.cloneElement(child, {
+            ...props,
+            className: twMerge(String(child.props.className ?? ""), classes),
+            ...(disabled ? { "aria-disabled": true } : {}),
+        });
+    }
+    return (_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: children })) : (_jsx("span", { className: "appkit-button__content", children: children }))] }));
 }