@mohasinac/appkit 3.3.5 → 3.4.0

package/dist/ui/components/FormActionBar.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { ChevronRight } from "lucide-react";
 import { Button } from "./Button";
+import { TextLink } from "./TextLink";
 export function FormActionBar({ title, breadcrumbs, onSaveDraft, onPublish, publishLabel = "Publish", onPreview, onDiscard, isDirty, isSubmitting, className, }) {
-    return (_jsxs("div", { className: `appkit-form-action-bar${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "appkit-form-action-bar__meta", children: [breadcrumbs && breadcrumbs.length > 0 && (_jsx("div", { className: "appkit-form-action-bar__breadcrumbs", children: breadcrumbs.map((crumb, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" }), crumb.href ? (_jsx("a", { href: crumb.href, className: "hover:underline truncate", children: crumb.label })) : (_jsx("span", { className: "truncate", children: crumb.label }))] }, i))) })), title && (_jsxs("div", { className: "appkit-form-action-bar__title", children: [isDirty && (_jsx("span", { className: "appkit-form-action-bar__dirty-dot mr-1.5", "aria-label": "Unsaved changes" })), title] }))] }), _jsxs("div", { className: "appkit-form-action-bar__actions", children: [isDirty && onDiscard && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSubmitting, children: "Discard" })), onPreview && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onPreview, disabled: isSubmitting, children: "Preview" })), onSaveDraft && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onSaveDraft, isLoading: isSubmitting, disabled: isSubmitting, children: "Save draft" })), _jsx(Button, { type: "button", size: "sm", onClick: onPublish, isLoading: isSubmitting, disabled: isSubmitting, children: publishLabel })] })] }));
+    return (_jsxs("div", { className: `appkit-form-action-bar${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "appkit-form-action-bar__meta", children: [breadcrumbs && breadcrumbs.length > 0 && (_jsx("div", { className: "appkit-form-action-bar__breadcrumbs", children: breadcrumbs.map((crumb, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" }), crumb.href ? (_jsx(TextLink, { href: crumb.href, variant: "inherit", truncate: true, children: crumb.label })) : (_jsx("span", { className: "truncate", children: crumb.label }))] }, i))) })), title && (_jsxs("div", { className: "appkit-form-action-bar__title", children: [isDirty && (_jsx("span", { className: "appkit-form-action-bar__dirty-dot mr-1.5", "aria-label": "Unsaved changes" })), title] }))] }), _jsxs("div", { className: "appkit-form-action-bar__actions", children: [isDirty && onDiscard && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSubmitting, children: "Discard" })), onPreview && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onPreview, disabled: isSubmitting, children: "Preview" })), onSaveDraft && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onSaveDraft, isLoading: isSubmitting, disabled: isSubmitting, children: "Save draft" })), _jsx(Button, { type: "button", size: "sm", onClick: onPublish, isLoading: isSubmitting, disabled: isSubmitting, children: publishLabel })] })] }));
 }

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

@@ -69,4 +69,4 @@ export interface ListingLayoutProps {
     /** When provided, the entire layout is replaced with this view (detail/edit mode). */
     detailView?: ReactNode;
 }
-export declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen, filterPendingCount, className, loading, errorSlot, labels, portal, overlays, detailView, }: ListingLayoutProps): import("react").JSX.Element;
+export declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen, filterPendingCount, className, loading: _loading, errorSlot, labels, portal, overlays, detailView, }: ListingLayoutProps): import("react").JSX.Element;

package/dist/ui/components/ListingLayout.js

@@ -35,7 +35,7 @@ const DEFAULT_LABELS = {
     hideFilters: "Hide filters",
     filterActiveCount: (count) => `${count} active`,
 };
-export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen = false, filterPendingCount, className = "", loading = false, errorSlot, labels, portal, overlays, detailView, }) {
+export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen = false, filterPendingCount, className = "", loading: _loading = false, errorSlot, labels, portal, overlays, detailView, }) {
     // useState must run unconditionally on every render — these were
     // previously declared after the detail-view early return below, which
     // skipped both hook calls whenever `detailView` was passed, violating the

package/dist/ui/components/Motion.js

@@ -10,7 +10,7 @@ function useMotionProps(props) {
     const reduced = useReducedMotion();
     if (!reduced)
         return props;
-    const { initial, animate, exit, whileHover, whileTap, whileInView, transition, ...rest } = props;
+    const { initial: _initial, animate: _animate, exit: _exit, whileHover: _whileHover, whileTap: _whileTap, whileInView: _whileInView, transition: _transition, ...rest } = props;
     return { ...rest, initial: false, animate: false };
 }
 export function FadeIn({ delay = 0, duration = 0.3, children, ...props }) {

package/dist/ui/components/QuickCreateModal.js

@@ -6,6 +6,7 @@ import { Button } from "./Button";
 import { Div } from "./Div";
 import { Heading } from "./Typography";
 import { Row } from "./Layout";
+import { TextLink } from "./TextLink";
 export function QuickCreateModal({ isOpen, title, onSave, onSaved, onCancel, children, fullPageHref, saveLabel = "Save", cancelLabel = "Cancel", isSaving = false, saveDisabled = false, }) {
     const [busy, setBusy] = React.useState(false);
     const titleId = React.useId();
@@ -44,5 +45,5 @@ export function QuickCreateModal({ isOpen, title, onSave, onSaved, onCancel, chi
     if (!isOpen || typeof document === "undefined")
         return null;
     const saving = busy || isSaving;
-    return createPortal(_jsxs(Div, { className: "appkit-quick-create-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [_jsx(Div, { className: "appkit-quick-create-modal__backdrop", "aria-hidden": "true", onClick: () => !saving && onCancel() }), _jsxs(Div, { ref: panelRef, tabIndex: -1, className: "appkit-quick-create-modal__panel", children: [_jsxs(Div, { className: "appkit-quick-create-modal__header", children: [_jsx(Heading, { level: 2, id: titleId, className: "appkit-quick-create-modal__title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onCancel, "aria-label": "Close", disabled: saving, children: "\u00D7" })] }), _jsx(Div, { className: "appkit-quick-create-modal__body", children: children }), _jsxs(Div, { className: "appkit-quick-create-modal__footer", children: [fullPageHref ? (_jsx("a", { href: fullPageHref, target: "_blank", rel: "noreferrer", className: "appkit-quick-create-modal__full-link", children: "Add more details \u2192" })) : (_jsx("span", {})), _jsxs(Row, { className: "appkit-quick-create-modal__actions", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, disabled: saving, children: cancelLabel }), _jsx(Button, { variant: "primary", type: "button", onClick: handleSave, disabled: saving || saveDisabled, isLoading: saving, children: saveLabel })] })] })] })] }), document.body);
+    return createPortal(_jsxs(Div, { className: "appkit-quick-create-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [_jsx(Div, { className: "appkit-quick-create-modal__backdrop", "aria-hidden": "true", onClick: () => !saving && onCancel() }), _jsxs(Div, { ref: panelRef, tabIndex: -1, className: "appkit-quick-create-modal__panel", children: [_jsxs(Div, { className: "appkit-quick-create-modal__header", children: [_jsx(Heading, { level: 2, id: titleId, className: "appkit-quick-create-modal__title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onCancel, "aria-label": "Close", disabled: saving, children: "\u00D7" })] }), _jsx(Div, { className: "appkit-quick-create-modal__body", children: children }), _jsxs(Div, { className: "appkit-quick-create-modal__footer", children: [fullPageHref ? (_jsx(TextLink, { variant: "none", href: fullPageHref, target: "_blank", rel: "noreferrer", className: "appkit-quick-create-modal__full-link", children: "Add more details \u2192" })) : (_jsx("span", {})), _jsxs(Row, { className: "appkit-quick-create-modal__actions", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, disabled: saving, children: cancelLabel }), _jsx(Button, { variant: "primary", type: "button", onClick: handleSave, disabled: saving || saveDisabled, isLoading: saving, children: saveLabel })] })] })] })] }), document.body);
 }

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

@@ -58,4 +58,4 @@ export interface SlottedListingViewProps {
     isLoading?: boolean;
     className?: string;
 }
-export declare function SlottedListingView({ title, labels, portal, renderHeader, renderTabs, renderSearch, renderSort, renderFilters, renderActiveFilters, renderBulkActions, renderTable, renderPagination, overlays, manageSearch, manageSelection, manageSort, inlineToolbar, total, isLoading, className, }: SlottedListingViewProps): React.JSX.Element;
+export declare function SlottedListingView({ title, labels, portal, renderHeader, renderTabs, renderSearch, renderSort, renderFilters, renderActiveFilters, renderBulkActions, renderTable, renderPagination, overlays, manageSearch: _manageSearch, manageSelection, manageSort: _manageSort, inlineToolbar, total, isLoading, className, }: SlottedListingViewProps): React.JSX.Element;

package/dist/ui/components/SlottedListingView.js

@@ -25,8 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from "react";
 import { Div } from "./Div";
 import { Heading } from "./Typography";
-export function SlottedListingView({ title, labels = {}, portal, renderHeader, renderTabs, renderSearch, renderSort, renderFilters, renderActiveFilters, renderBulkActions, renderTable, renderPagination, overlays, manageSearch, manageSelection, manageSort = false, inlineToolbar = false, total = 0, isLoading = false, className = "", }) {
-    const effectiveManageSearch = manageSearch ?? (portal === "admin" || portal === "seller" || portal === "user");
+export function SlottedListingView({ title, labels = {}, portal, renderHeader, renderTabs, renderSearch, renderSort, renderFilters, renderActiveFilters, renderBulkActions, renderTable, renderPagination, overlays, manageSearch: _manageSearch, manageSelection, manageSort: _manageSort = false, inlineToolbar = false, total = 0, isLoading = false, className = "", }) {
     const effectiveManageSelection = manageSelection ?? (portal === "admin" || portal === "seller");
     const [search, setSearch] = useState("");
     const [selectedIds, setSelectedIds] = useState([]);

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

@@ -175,7 +175,7 @@ export declare function Caption({ variant, color, weight, className, children, .
 /** Inline-decorations allowed on Span (pill chips, code-like wraps, etc). */
 type SpanRounded = "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 type SpanBorder = "none" | "default" | "subtle" | "strong";
-type SpanPadding = "none" | "2xs" | "x-xs" | "x-sm" | "x-md" | "y-2xs" | "y-xs" | "y-sm" | "inline-sm" | "inline" | "pill-2xs" | "pill-xs" | "pill-sm" | "pill-sm-tall" | "pill-md" | "pill-lg";
+type SpanPadding = "none" | "1" | "2xs" | "x-xs" | "x-sm" | "x-md" | "y-2xs" | "y-xs" | "y-sm" | "inline-sm" | "inline" | "pill-2xs" | "pill-xs" | "pill-sm" | "pill-sm-tall" | "pill-md" | "pill-lg";
 type SpanBg = "none" | "muted" | "subtle" | "default" | "success-surface" | "danger-surface" | "warning-surface" | "info-surface" | "overlay-xs" | "overlay-sm" | "overlay-md" | "overlay-lg" | "overlay-xl";
 type SpanLayout = "inline" | "inline-flex" | "flex" | "inline-flex-center" | "flex-center" | "inline-block" | "block";
 type SpanGap = "none" | "2xs" | "xs" | "sm" | "md" | "lg";

package/dist/ui/components/Typography.js

@@ -231,6 +231,7 @@ const SPAN_ROUNDED_MAP = {
 };
 const SPAN_PADDING_MAP = {
     none: "",
+    "1": "p-1",
     "2xs": "p-2",
     "x-xs": "px-2",
     "x-sm": "px-3",

package/dist/ui/components/surface-tokens.d.ts

@@ -216,7 +216,7 @@ export declare const PADDING_PRESETS: {
     readonly "content-banner": "py-10 md:py-12 lg:py-16";
 };
 export type PaddingPresetKey = PaddingKey;
-export type XPaddingKey = "none" | "x-xs" | "x-sm" | "x-md" | "x-5" | "x-lg" | "x-xl" | "x-sm-md" | "x-sm-lg-md" | "x-md-lg" | "x-md-xl" | "x-md-2xl" | "x-page";
+export type XPaddingKey = "none" | "x-xs" | "x-sm" | "x-md" | "x-5" | "x-lg" | "x-xl" | "x-sm-md" | "x-sm-lg-md" | "x-md-lg" | "x-md-xl" | "x-md-2xl" | "x-page" | "l-xl";
 type YPaddingKey = "none" | "y-2xs" | "y-2xs-tall" | "y-xs" | "y-xs-tall" | "y-sm" | "y-sm-tall" | "y-md" | "y-md-lg" | "y-lg" | "y-xl" | "y-2xl" | "y-3xl" | "y-4xl" | "y-5xl" | "y-6xl" | "y-2-5xl" | "t-2xs" | "b-2xs" | "t-xs" | "b-xs" | "t-sm" | "b-sm" | "t-md" | "b-md" | "b-md-lg" | "b-lg" | "t-md-b-lg";
 export declare const X_ONLY_MAP: Record<XPaddingKey, string>;
 export type OverflowKey = "auto" | "hidden" | "scroll" | "visible" | "x-auto" | "x-hidden" | "y-auto" | "y-hidden";

package/dist/ui/components/surface-tokens.js

@@ -210,6 +210,10 @@ export const X_ONLY_MAP = {
     "x-md-2xl": "px-4 sm:px-8",
     /** Responsive: `px-4 sm:px-6 lg:px-8` — canonical page-container horizontal padding. */
     "x-page": "px-4 sm:px-6 lg:px-8",
+    // Asymmetric left one-sided value (for sites that pad just one edge, e.g. a
+    // selection-checkbox gutter).
+    /** Asymmetric: `pl-8` — reserves a left gutter (e.g. for an overlaid selection checkbox). */
+    "l-xl": "pl-8",
 };
 const Y_ONLY_MAP = {
     none: "",

package/package.json

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