@mohasinac/appkit 2.3.2 → 2.4.0

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

@@ -116,40 +116,38 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-radio-classic__circle {
-    border-color: #475569;
-  }
-  .appkit-radio-classic__circle--selected {
-    border-color: #ec4899;
-  }
-  .appkit-radio-classic__dot--selected {
-    background: #ec4899;
-  }
-  .appkit-radio-toggle__pill {
-    border-color: #334155;
-    background: #0f172a;
-    color: #e4e4e7;
-  }
-  .appkit-radio-toggle__pill:hover {
-    border-color: #ec4899;
-  }
-  .appkit-radio-toggle__pill--selected {
-    border-color: #ec4899;
-    background: rgba(236, 72, 153, 0.1);
-    color: #fce7f3;
-  }
-  .appkit-radio-toggle__pill--error {
-    border-color: rgba(239, 68, 68, 0.6);
-  }
-  .appkit-radio-toggle__dot-ring {
-    border-color: #475569;
-  }
-  .appkit-radio-toggle__dot-ring--selected {
-    border-color: #ec4899;
-    background: #ec4899;
-  }
-  .appkit-radio-toggle__dot-inner {
-    background: #020617;
-  }
+.dark .appkit-radio-classic__circle {
+  border-color: #475569;
+}
+.dark .appkit-radio-classic__circle--selected {
+  border-color: #ec4899;
+}
+.dark .appkit-radio-classic__dot--selected {
+  background: #ec4899;
+}
+.dark .appkit-radio-toggle__pill {
+  border-color: #334155;
+  background: #0f172a;
+  color: #e4e4e7;
+}
+.dark .appkit-radio-toggle__pill:hover {
+  border-color: #ec4899;
+}
+.dark .appkit-radio-toggle__pill--selected {
+  border-color: #ec4899;
+  background: rgba(236, 72, 153, 0.1);
+  color: #fce7f3;
+}
+.dark .appkit-radio-toggle__pill--error {
+  border-color: rgba(239, 68, 68, 0.6);
+}
+.dark .appkit-radio-toggle__dot-ring {
+  border-color: #475569;
+}
+.dark .appkit-radio-toggle__dot-ring--selected {
+  border-color: #ec4899;
+  background: #ec4899;
+}
+.dark .appkit-radio-toggle__dot-inner {
+  background: #020617;
 }

package/dist/ui/components/RichTextEditor.js

@@ -55,5 +55,5 @@ export function RichTextEditor({ value, onChange, disabled = false, className =
             editor.innerHTML = value;
         }
     }, [value]);
-    return (_jsxs("div", { className: `rounded-lg border border-zinc-200 bg-white dark:border-slate-700 dark:bg-slate-900 ${className}`, "data-section": "richtexteditor-div-582", children: [_jsx("div", { className: "flex flex-wrap gap-1 border-b border-zinc-200 p-2 dark:border-slate-700", "data-section": "richtexteditor-div-583", children: toolbarActions.map((action) => (_jsx("button", { type: "button", title: action.title, onClick: action.run, disabled: disabled, className: "rounded border border-zinc-200 px-2 py-1 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:text-zinc-200 dark:hover:bg-slate-800", children: action.label }, action.title))) }), _jsx("div", { ref: editorRef, role: "textbox", "aria-label": "Rich text editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, onInput: emitChange, onBlur: emitChange, className: `prose prose-sm max-w-none p-3 focus:outline-none dark:prose-invert ${minHeightClassName} ${disabled ? "cursor-not-allowed opacity-70" : ""}` })] }));
+    return (_jsxs("div", { className: `appkit-rich-text-editor rounded-lg border border-zinc-200 bg-white dark:border-slate-700 dark:bg-slate-900 ${className}`, "data-section": "richtexteditor-div-582", children: [_jsx("div", { className: "appkit-rich-text-editor__toolbar flex flex-wrap gap-1 border-b border-zinc-200 p-2 dark:border-slate-700", "data-section": "richtexteditor-div-583", children: toolbarActions.map((action) => (_jsx("button", { type: "button", title: action.title, onClick: action.run, disabled: disabled, className: "appkit-rich-text-editor__btn rounded px-2 py-1 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-zinc-200 dark:hover:bg-slate-800", children: action.label }, action.title))) }), _jsx("div", { ref: editorRef, role: "textbox", "aria-label": "Rich text editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, onInput: emitChange, onBlur: emitChange, className: `prose prose-sm max-w-none p-3 focus:outline-none dark:prose-invert ${minHeightClassName} ${disabled ? "cursor-not-allowed opacity-70" : ""}` })] }));
 }

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

@@ -3,6 +3,7 @@ export interface RowAction {
     label: string;
     onClick: () => void;
     destructive?: boolean;
+    disabled?: boolean;
     icon?: React.ReactNode;
     separator?: boolean;
 }

package/dist/ui/components/RowActionMenu.js

@@ -10,8 +10,10 @@ export function RowActionMenu({ actions, align = "right", }) {
     const ref = useRef(null);
     useClickOutside(ref, () => setOpen(false), { enabled: open });
     useKeyPress("Escape", () => setOpen(false), { enabled: open });
-    return (_jsxs("div", { ref: ref, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((v) => !v), className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), open ? (_jsx("div", { role: "menu", className: `appkit-row-action-menu__dropdown ${align === "right" ? "appkit-row-action-menu__dropdown--right" : "appkit-row-action-menu__dropdown--left"}`, "data-section": "rowactionmenu-div-585", children: actions.map((action, idx) => (_jsxs("div", { "data-section": "rowactionmenu-div-586", children: [action.separator && idx > 0 ? (_jsx("div", { className: "appkit-row-action-menu__separator" })) : null, _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", onClick: () => {
+    return (_jsxs("div", { ref: ref, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((v) => !v), className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), open ? (_jsx("div", { role: "menu", className: `appkit-row-action-menu__dropdown ${align === "right" ? "appkit-row-action-menu__dropdown--right" : "appkit-row-action-menu__dropdown--left"}`, "data-section": "rowactionmenu-div-585", children: actions.map((action, idx) => (_jsxs("div", { "data-section": "rowactionmenu-div-586", children: [action.separator && idx > 0 ? (_jsx("div", { className: "appkit-row-action-menu__separator" })) : null, _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", disabled: action.disabled, onClick: () => {
+                                if (action.disabled)
+                                    return;
                                 action.onClick();
                                 setOpen(false);
-                            }, className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""}`, children: [action.icon ? (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })) : null, action.label] })] }, `${action.label}-${idx}`))) })) : null] }));
+                            }, className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""} ${action.disabled ? "opacity-40 cursor-not-allowed" : ""}`, children: [action.icon ? (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })) : null, action.label] })] }, `${action.label}-${idx}`))) })) : null] }));
 }

package/dist/ui/components/SectionTabs.js

@@ -5,7 +5,7 @@ import { Nav } from "./Semantic";
 import { Button } from "./Button";
 import { Span } from "./Typography";
 import { TextLink } from "./TextLink";
-export function SectionTabs({ tabs, variant = "default", className = "", value, onChange, inline = false, stickyTopClassName = "top-12 md:top-[108px]", currentPath, }) {
+export function SectionTabs({ tabs, variant = "default", className = "", value, onChange, inline = false, stickyTopClassName = "top-[var(--header-height,0px)]", currentPath, }) {
     const pathname = usePathname();
     const isControlled = typeof onChange === "function";
     const activePath = currentPath ?? pathname ?? "";

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

@@ -1,5 +1,6 @@
 .appkit-section-tabs {
   position: sticky;
+  top: var(--header-height, 0px);
   z-index: 10;
   background: #ffffff;
   border-bottom: 1px solid #e4e4e7;

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

@@ -45,10 +45,8 @@
   transform: translateX(0);
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-side-modal__panel {
-    background: #18181b; /* zinc-900 */
-  }
+.dark .appkit-side-modal__panel {
+  background: #18181b; /* zinc-900 */
 }
 
 /* -- Header ------------------------------------------ */
@@ -62,10 +60,8 @@
   flex-shrink: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-side-modal__header {
-    border-bottom-color: #3f3f46; /* zinc-700 */
-  }
+.dark .appkit-side-modal__header {
+  border-bottom-color: #3f3f46; /* zinc-700 */
 }
 
 /* -- Body -------------------------------------------- */

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

@@ -5,10 +5,8 @@
   accent-color: var(--color-primary, #6366f1);
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-slider {
-    accent-color: var(--color-secondary, #818cf8);
-  }
+.dark .appkit-slider {
+  accent-color: var(--color-secondary, #818cf8);
 }
 
 .appkit-slider--disabled {

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

@@ -33,14 +33,12 @@
   padding-bottom: 1rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-tabs-list {
-    border-color: #334155;
-  }
-  .appkit-tabs-trigger:not([aria-selected="true"]) {
-    color: #94a3b8;
-  }
-  .appkit-tabs-trigger:not([aria-selected="true"]):hover {
-    color: #fff;
-  }
+.dark .appkit-tabs-list {
+  border-color: #334155;
+}
+.dark .appkit-tabs-trigger:not([aria-selected="true"]) {
+  color: #94a3b8;
+}
+.dark .appkit-tabs-trigger:not([aria-selected="true"]):hover {
+  color: #fff;
 }

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

@@ -87,28 +87,26 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-toast--success {
-    border-color: rgba(20, 83, 45, 0.6);
-    background: rgba(20, 83, 45, 0.7);
-    color: #dcfce7;
-  }
-  .appkit-toast--error {
-    border-color: rgba(127, 29, 29, 0.6);
-    background: rgba(127, 29, 29, 0.7);
-    color: #fecdd3;
-  }
-  .appkit-toast--warning {
-    border-color: rgba(120, 53, 15, 0.6);
-    background: rgba(120, 53, 15, 0.7);
-    color: #fef3c7;
-  }
-  .appkit-toast--info {
-    border-color: rgba(12, 74, 110, 0.6);
-    background: rgba(12, 74, 110, 0.7);
-    color: #e0f2fe;
-  }
-  .appkit-toast__icon {
-    background: rgba(255, 255, 255, 0.1);
-  }
+.dark .appkit-toast--success {
+  border-color: rgba(20, 83, 45, 0.6);
+  background: rgba(20, 83, 45, 0.7);
+  color: #dcfce7;
+}
+.dark .appkit-toast--error {
+  border-color: rgba(127, 29, 29, 0.6);
+  background: rgba(127, 29, 29, 0.7);
+  color: #fecdd3;
+}
+.dark .appkit-toast--warning {
+  border-color: rgba(120, 53, 15, 0.6);
+  background: rgba(120, 53, 15, 0.7);
+  color: #fef3c7;
+}
+.dark .appkit-toast--info {
+  border-color: rgba(12, 74, 110, 0.6);
+  background: rgba(12, 74, 110, 0.7);
+  color: #e0f2fe;
+}
+.dark .appkit-toast__icon {
+  background: rgba(255, 255, 255, 0.1);
 }

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

@@ -91,17 +91,15 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-toggle__track:focus-visible {
-    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
-  }
-  .appkit-toggle__track--off {
-    background-color: #334155;
-  }
-  .appkit-toggle__track--on {
-    background-color: #ec4899;
-  }
-  .appkit-toggle__thumb {
-    background: #020617;
-  }
+.dark .appkit-toggle__track:focus-visible {
+  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
+}
+.dark .appkit-toggle__track--off {
+  background-color: #334155;
+}
+.dark .appkit-toggle__track--on {
+  background-color: #ec4899;
+}
+.dark .appkit-toggle__thumb {
+  background: #020617;
 }

package/dist/ui/index.d.ts

@@ -8,6 +8,7 @@ export { Div } from "./components/Div";
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 export type { SpinnerProps } from "./components/Spinner";
 export { Spinner } from "./components/Spinner";
+export { PageLoader } from "./components/PageLoader";
 export type { SkeletonProps } from "./components/Skeleton";
 export { Skeleton } from "./components/Skeleton";
 export type { ButtonProps } from "./components/Button";
@@ -108,6 +109,8 @@ export type { MenuProps } from "./components/Menu";
 export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, } from "./components/Menu";
 export type { DynamicSelectProps, DynamicSelectOption, AsyncPage, } from "./components/DynamicSelect";
 export { DynamicSelect } from "./components/DynamicSelect";
+export type { InlineCreateSelectProps } from "./components/InlineCreateSelect";
+export { InlineCreateSelect } from "./components/InlineCreateSelect";
 export type { RoleBadgeProps } from "./components/RoleBadge";
 export { RoleBadge } from "./components/RoleBadge";
 export type { SkipToMainProps } from "./components/SkipToMain";
@@ -130,6 +133,8 @@ export type { ActiveFilter, ActiveFilterChipsProps, } from "./components/ActiveF
 export { ActiveFilterChips } from "./components/ActiveFilterChips";
 export type { SortOption, SortDropdownProps } from "./components/SortDropdown";
 export { SortDropdown } from "./components/SortDropdown";
+export type { ListingToolbarProps, ListingToolbarSortOption, ListingToolbarLabels } from "./components/ListingToolbar";
+export { ListingToolbar } from "./components/ListingToolbar";
 export type { TablePaginationProps, TablePaginationLabels, } from "./components/TablePagination";
 export { TablePagination } from "./components/TablePagination";
 export type { DataTableProps, DataTableColumn } from "./DataTable";
@@ -143,6 +148,8 @@ export type { SideModalProps } from "./components/SideModal";
 export { SideModal } from "./components/SideModal";
 export type { RichTextProps } from "./rich-text/RichText";
 export { RichText } from "./rich-text/RichText";
+export type { RichTextRendererProps } from "./rich-text/RichTextRenderer";
+export { RichTextRenderer } from "./rich-text/RichTextRenderer";
 export type { RichTextEditorProps } from "./components/RichTextEditor";
 export { RichTextEditor } from "./components/RichTextEditor";
 export type { ListingLayoutProps, ListingLayoutLabels, } from "./components/ListingLayout";
@@ -157,6 +164,8 @@ 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 { FlowStep, FlowDiagramProps } from "./components/FlowDiagram";
 export { FlowDiagram } from "./components/FlowDiagram";
 export type { BaseListingCardRootProps, BaseListingCardHeroProps, BaseListingCardInfoProps, BaseListingCardCheckboxProps, } from "./components/BaseListingCard";

package/dist/ui/index.js

@@ -6,6 +6,7 @@ export { Div } from "./components/Div";
 // --- Typography primitives ----------------------------------------------------
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 export { Spinner } from "./components/Spinner";
+export { PageLoader } from "./components/PageLoader";
 export { Skeleton } from "./components/Skeleton";
 export { Button } from "./components/Button";
 export { IconButton } from "./components/IconButton";
@@ -56,6 +57,7 @@ export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSeparator, } from "./components/Dropdown";
 export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, } from "./components/Menu";
 export { DynamicSelect } from "./components/DynamicSelect";
+export { InlineCreateSelect } from "./components/InlineCreateSelect";
 export { RoleBadge } from "./components/RoleBadge";
 export { SkipToMain } from "./components/SkipToMain";
 export { NavigationLoader } from "./components/NavigationLoader";
@@ -67,6 +69,7 @@ export { AvatarDisplay } from "./components/AvatarDisplay";
 export { DashboardStatsCard } from "./components/DashboardStatsCard";
 export { ActiveFilterChips } from "./components/ActiveFilterChips";
 export { SortDropdown } from "./components/SortDropdown";
+export { ListingToolbar } from "./components/ListingToolbar";
 export { TablePagination } from "./components/TablePagination";
 export { DataTable } from "./DataTable";
 export { DEFAULT_TABLE_CONFIG, DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, mergeTableConfig, } from "../contracts";
@@ -75,6 +78,7 @@ export { Container, Stack, Row, Grid, GRID_MAP } from "./components/Layout";
 export { classNames, mergeTailwindClasses } from "./style.helper";
 export { SideModal } from "./components/SideModal";
 export { RichText } from "./rich-text/RichText";
+export { RichTextRenderer } from "./rich-text/RichTextRenderer";
 export { RichTextEditor } from "./components/RichTextEditor";
 export { ListingLayout } from "./components/ListingLayout";
 export { ListingViewShell } from "./components/ListingViewShell";
@@ -82,6 +86,7 @@ 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 { FlowDiagram } from "./components/FlowDiagram";
 export { BaseListingCard } from "./components/BaseListingCard";
 export { default as ImageGallery } from "./components/ImageGallery";

package/dist/ui/rich-text/RichText.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Div } from "../components/Div";
+import { normalizeRichTextHtml } from "../../utils/string.formatter";
 // --- Allowed HTML tags (safe subset — no script/object; iframe allowed for YouTube only) -------
 const ALLOWED_TAGS = new Set([
     "p",
@@ -168,7 +169,7 @@ function attachCopyButtons(container) {
  */
 export function RichText({ html, className = "", proseClass = "prose max-w-none dark:prose-invert", copyableCode = false, highlightCode, }) {
     const safe = useMemo(() => {
-        const sanitized = sanitiseHtml(html);
+        const sanitized = sanitiseHtml(normalizeRichTextHtml(html));
         if (!highlightCode || typeof document === "undefined")
             return sanitized;
         const container = document.createElement("div");