@mohasinac/appkit 2.7.26 → 2.7.30

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

@@ -0,0 +1,272 @@
+/* PaginatedMultiSelect — multi-value chips + async paginated checkbox dropdown */
+
+.appkit-pms {
+  position: relative;
+}
+
+/* ── chips row ── */
+.appkit-pms__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
+.appkit-pms__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  border: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  padding: 0.125rem 0.5rem 0.125rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--appkit-color-text);
+  line-height: 1.5;
+  max-width: 12rem;
+}
+
+:is(.dark) .appkit-pms__chip {
+  border-color: var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-text);
+}
+
+.appkit-pms__chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.appkit-pms__chip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  color: var(--appkit-color-text-muted);
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.appkit-pms__chip-remove:hover {
+  color: var(--appkit-color-text);
+  background-color: var(--appkit-color-zinc-100);
+}
+
+:is(.dark) .appkit-pms__chip-remove:hover {
+  color: var(--appkit-color-text);
+  background-color: var(--appkit-color-slate-700);
+}
+
+.appkit-pms__overflow-chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  border: 1px dashed var(--appkit-color-border);
+  padding: 0.125rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--appkit-color-text-muted);
+}
+
+/* ── trigger ── */
+.appkit-pms__trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.5rem;
+  border: 1px solid var(--appkit-color-zinc-300);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-zinc-800);
+  transition: border-color 0.15s;
+}
+
+.appkit-pms__trigger:hover:not(:disabled) {
+  border-color: var(--appkit-color-zinc-400);
+}
+
+.appkit-pms__trigger:focus-visible {
+  outline: 2px solid var(--appkit-color-focus-ring, var(--appkit-color-primary));
+  outline-offset: 2px;
+}
+
+:is(.dark) .appkit-pms__trigger {
+  border-color: var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-slate-200);
+}
+
+.appkit-pms__trigger--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.appkit-pms__placeholder {
+  color: var(--appkit-color-text-faint);
+}
+
+.appkit-pms__trigger-left {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  overflow: hidden;
+}
+
+.appkit-pms__trigger-count {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--appkit-color-primary);
+}
+
+/* ── dropdown ── */
+.appkit-pms__dropdown {
+  position: absolute;
+  z-index: var(--appkit-z-dropdown);
+  margin-top: 0.25rem;
+  width: 100%;
+  min-width: 14rem;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  box-shadow: var(--appkit-shadow-lg);
+}
+
+:is(.dark) .appkit-pms__dropdown {
+  border-color: var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+}
+
+.appkit-pms__search {
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+
+/* ── option list ── */
+.appkit-pms__list {
+  max-height: 13rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.appkit-pms__option {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.appkit-pms__option:hover {
+  background-color: var(--appkit-color-zinc-100);
+}
+
+:is(.dark) .appkit-pms__option:hover {
+  background-color: var(--appkit-color-slate-800);
+}
+
+.appkit-pms__option--selected {
+  font-weight: 500;
+  background-color: var(--appkit-color-zinc-50);
+}
+
+:is(.dark) .appkit-pms__option--selected {
+  background-color: rgba(15, 23, 42, 0.6);
+}
+
+.appkit-pms__checkbox {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 1.5px solid var(--appkit-color-zinc-400);
+  background: var(--appkit-color-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.appkit-pms__option--selected .appkit-pms__checkbox {
+  border-color: var(--appkit-color-primary);
+  background: var(--appkit-color-primary);
+}
+
+:is(.dark) .appkit-pms__option--selected .appkit-pms__checkbox {
+  border-color: var(--appkit-color-primary);
+  background: var(--appkit-color-primary);
+}
+
+.appkit-pms__checkmark {
+  display: none;
+  font-size: 0.6rem;
+  color: var(--appkit-color-text-on-primary, #fff);
+  font-weight: 700;
+}
+
+.appkit-pms__option--selected .appkit-pms__checkmark {
+  display: block;
+}
+
+.appkit-pms__option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  color: var(--appkit-color-text);
+}
+
+/* ── empty / loading / load-more / create ── */
+.appkit-pms__empty,
+.appkit-pms__loading {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--appkit-color-text-muted);
+}
+
+.appkit-pms__load-more {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.75rem;
+  color: var(--appkit-color-secondary-600);
+}
+
+.appkit-pms__load-more:hover {
+  text-decoration: underline;
+}
+
+.appkit-pms__create-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--appkit-color-primary);
+  border-top: 1px solid var(--appkit-color-border-subtle);
+  transition: background-color 0.1s;
+}
+
+.appkit-pms__create-btn:hover {
+  background-color: var(--appkit-color-zinc-50);
+}
+
+:is(.dark) .appkit-pms__create-btn:hover {
+  background-color: var(--appkit-color-slate-800);
+}

package/dist/ui/components/Semantic.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-export const Section = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("section", { className: className, ref: ref, ...props, "data-section": "semantic-section-597", children: children })));
+export const Section = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("section", { className: className, ref: ref, ...props, children: children })));
 Section.displayName = "Section";
 export function Article({ className = "", children, ...props }) {
     return (_jsx("article", { className: className, ...props, children: children }));

package/dist/ui/components/SideDrawer.js

@@ -6,6 +6,7 @@ import { Button } from "./Button";
 import { Row } from "./Layout";
 import { Heading, Span } from "./Typography";
 import { useSwipe } from "../../react";
+import { Text } from "./Typography";
 const UI_SIDE_DRAWER = {
     backdrop: "appkit-side-drawer__backdrop",
     root: "appkit-side-drawer",
@@ -37,6 +38,20 @@ function getFocusableElements(container) {
         return [];
     return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
 }
+function handleFocusTrap(e, first, last) {
+    if (e.shiftKey) {
+        if (document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+        }
+    }
+    else {
+        if (document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+}
 /**
  * SideDrawer — accessible slide-in panel with focus trap, swipe-to-close,
  * and an optional unsaved-changes confirmation overlay.
@@ -83,20 +98,7 @@ export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "v
                     e.preventDefault();
                     return;
                 }
-                const first = focusable[0];
-                const last = focusable[focusable.length - 1];
-                if (e.shiftKey) {
-                    if (document.activeElement === first) {
-                        e.preventDefault();
-                        last.focus();
-                    }
-                }
-                else {
-                    if (document.activeElement === last) {
-                        e.preventDefault();
-                        first.focus();
-                    }
-                }
+                handleFocusTrap(e, focusable[0], focusable[focusable.length - 1]);
             }
         };
         document.addEventListener("keydown", handleKeyDown);
@@ -146,5 +148,5 @@ export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "v
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.backdrop, onClick: attemptClose, "aria-hidden": "true" }), _jsxs("div", { ref: drawerRef, className: [UI_SIDE_DRAWER.root, positionClass].join(" "), role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-title", "data-section": "sidedrawer-div-598", children: [_jsxs(Row, { justify: "between", gap: "none", className: [
                             UI_SIDE_DRAWER.header,
                             UI_SIDE_DRAWER.headerMode[mode],
-                        ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx("p", { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, "data-section": "sidedrawer-div-605", children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] }));
+                        ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx(Text, { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, "data-section": "sidedrawer-div-605", children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] }));
 }

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

@@ -58,6 +58,7 @@
 @import "./BaseListingCard.style.css";
 @import "./ConfirmDeleteModal.style.css";
 @import "./DynamicSelect.style.css";
+@import "./PaginatedMultiSelect.style.css";
 @import "./SideDrawer.style.css";
 @import "./FormActionBar.style.css";
 @import "./BackgroundRenderer.style.css";

package/dist/ui/index.d.ts

@@ -117,6 +117,8 @@ export type { DynamicSelectProps, DynamicSelectOption, AsyncPage, } from "./comp
 export { DynamicSelect } from "./components/DynamicSelect";
 export type { InlineCreateSelectProps } from "./components/InlineCreateSelect";
 export { InlineCreateSelect } from "./components/InlineCreateSelect";
+export type { PaginatedMultiSelectProps } from "./components/PaginatedMultiSelect";
+export { PaginatedMultiSelect } from "./components/PaginatedMultiSelect";
 export type { RoleBadgeProps } from "./components/RoleBadge";
 export { RoleBadge } from "./components/RoleBadge";
 export type { SkipToMainProps } from "./components/SkipToMain";

package/dist/ui/index.js

@@ -62,6 +62,7 @@ export { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSeparato
 export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, } from "./components/Menu";
 export { DynamicSelect } from "./components/DynamicSelect";
 export { InlineCreateSelect } from "./components/InlineCreateSelect";
+export { PaginatedMultiSelect } from "./components/PaginatedMultiSelect";
 export { RoleBadge } from "./components/RoleBadge";
 export { SkipToMain } from "./components/SkipToMain";
 export { NavigationLoader } from "./components/NavigationLoader";

package/dist/utils/number.formatter.js

@@ -64,31 +64,23 @@ export function parseFormattedNumber(str) {
     }
     else if (lastDotIndex > -1 && lastCommaIndex === -1) {
         const afterDot = cleaned.substring(lastDotIndex + 1);
-        if (dotCount > 1) {
+        const isThousands = dotCount > 1 || afterDot.length > 3;
+        if (isThousands)
             cleaned = cleaned.replace(/\./g, "");
-        }
-        else if (afterDot.length > 3) {
-            cleaned = cleaned.replace(/\./g, "");
-        }
         decimalSeparator = ".";
         thousandsSeparator = "";
     }
     else if (lastCommaIndex > -1 && lastDotIndex === -1) {
         const afterComma = cleaned.substring(lastCommaIndex + 1);
-        if (commaCount > 1) {
+        const commaIsThousands = commaCount > 1 || afterComma.length > 3;
+        if (commaIsThousands) {
             cleaned = cleaned.replace(/,/g, "");
             decimalSeparator = ".";
-            thousandsSeparator = "";
-        }
-        else if (afterComma.length > 3) {
-            cleaned = cleaned.replace(/,/g, "");
-            decimalSeparator = ".";
-            thousandsSeparator = "";
         }
         else {
             decimalSeparator = ",";
-            thousandsSeparator = "";
         }
+        thousandsSeparator = "";
     }
     let result = cleaned;
     if (thousandsSeparator) {

package/dist/utils/string.formatter.js

@@ -61,6 +61,26 @@ export function randomString(length = 10) {
 export function isEmptyString(str) {
     return !str || str.trim().length === 0;
 }
+const PROSEMIRROR_MARK_WRAP = {
+    bold: ["<strong>", "</strong>"],
+    italic: ["<em>", "</em>"],
+    underline: ["<u>", "</u>"],
+    strike: ["<s>", "</s>"],
+    code: ["<code>", "</code>"],
+};
+function applyMark(text, mark) {
+    const wrap = PROSEMIRROR_MARK_WRAP[mark.type];
+    if (wrap) {
+        return `${wrap[0]}${text}${wrap[1]}`;
+    }
+    if (mark.type === "link") {
+        const rawHref = String(mark.attrs?.href ?? "#").trim();
+        const safe = /^(https?:\/\/|mailto:|\/|#)/i.test(rawHref) ? rawHref : "#";
+        const href = safe.replace(/[&"<>]/g, (c) => ({ "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" })[c] ?? c);
+        return `<a href="${href}" rel="noopener noreferrer">${text}</a>`;
+    }
+    return text;
+}
 function renderProseMirrorNodes(nodes) {
     return nodes.map(renderProseMirrorNode).join("");
 }
@@ -76,24 +96,7 @@ function renderProseMirrorNode(node) {
             let text = escapeHtml(node.text ?? "");
             if (node.marks) {
                 for (const mark of node.marks) {
-                    if (mark.type === "bold")
-                        text = `<strong>${text}</strong>`;
-                    else if (mark.type === "italic")
-                        text = `<em>${text}</em>`;
-                    else if (mark.type === "underline")
-                        text = `<u>${text}</u>`;
-                    else if (mark.type === "strike")
-                        text = `<s>${text}</s>`;
-                    else if (mark.type === "code")
-                        text = `<code>${text}</code>`;
-                    else if (mark.type === "link") {
-                        const rawHref = String(mark.attrs?.href ?? "#").trim();
-                        const safe = /^(https?:\/\/|mailto:|\/|#)/i.test(rawHref)
-                            ? rawHref
-                            : "#";
-                        const href = safe.replace(/[&"<>]/g, (c) => ({ "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" })[c] ?? c);
-                        text = `<a href="${href}" rel="noopener noreferrer">${text}</a>`;
-                    }
+                    text = applyMark(text, mark);
                 }
             }
             return text;

package/dist/validation/schemas.d.ts

@@ -36,14 +36,14 @@ export declare const addressSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     country: string;
     state: string;
-    street: string;
     city: string;
+    street: string;
     pincode: string;
 }, {
     country: string;
     state: string;
-    street: string;
     city: string;
+    street: string;
     pincode: string;
 }>;
 export declare const resetPasswordSchema: z.ZodObject<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.26",
+  "version": "2.7.30",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -147,7 +147,7 @@
     "watch:css": "tailwindcss -i src/tailwind-input.css -o dist/tailwind-utilities.css --watch",
     "audit": "node scripts/audit-violations.mjs",
     "check:types": "tsc --noEmit",
-    "check:audits": "node scripts/audit-violations.mjs && node scripts/verify-entries.mjs && node scripts/verify-css-build.mjs && node scripts/audit-use-client.mjs && node scripts/audit-double-navigation.mjs && node scripts/audit-repository-fields.mjs",
+    "check:audits": "node scripts/audit-violations.mjs && node scripts/verify-entries.mjs && node scripts/verify-css-build.mjs && node scripts/audit-use-client.mjs && node scripts/audit-double-navigation.mjs && node scripts/audit-repository-fields.mjs && node scripts/audit-query-provider.mjs",
     "check": "npm run check:types && npm run check:audits"
   },
   "dependencies": {