@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/ui/components/ResponsiveView.js

@@ -1,9 +1,8 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ResponsiveView keeps both trees in the DOM and lets CSS hide inactive branches.
  * This prevents hydration mismatches caused by client-only media queries.
  */
 export function ResponsiveView({ mobile, desktop, tablet, breakpoint = "md", }) {
-    return (_jsxs("div", { className: `appkit-responsive-view--${breakpoint}`, children: [_jsx("div", { className: "appkit-responsive-view__mobile", children: mobile }), tablet && _jsx("div", { className: "appkit-responsive-view__tablet", children: tablet }), _jsx("div", { className: "appkit-responsive-view__desktop", children: desktop })] }));
+    return (_jsxs("div", { className: `appkit-responsive-view--${breakpoint}`, "data-section": "responsiveview-div-578", children: [_jsx("div", { className: "appkit-responsive-view__mobile", "data-section": "responsiveview-div-579", children: mobile }), tablet && _jsx("div", { className: "appkit-responsive-view__tablet", "data-section": "responsiveview-div-580", children: tablet }), _jsx("div", { className: "appkit-responsive-view__desktop", "data-section": "responsiveview-div-581", children: desktop })] }));
 }

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

@@ -0,0 +1,9 @@
+export interface RichTextEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    minHeightClassName?: string;
+    placeholder?: string;
+}
+export declare function RichTextEditor({ value, onChange, disabled, className, minHeightClassName, placeholder, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/RichTextEditor.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+export function RichTextEditor({ value, onChange, disabled = false, className = "", minHeightClassName = "min-h-[180px]", placeholder = "Write formatted content...", }) {
+    const editorRef = useRef(null);
+    const emitChange = () => {
+        if (!editorRef.current)
+            return;
+        onChange(editorRef.current.innerHTML);
+    };
+    const exec = (command, commandValue) => {
+        if (disabled || typeof document === "undefined")
+            return;
+        editorRef.current?.focus();
+        document.execCommand(command, false, commandValue);
+        emitChange();
+    };
+    const toolbarActions = useMemo(() => [
+        { label: "B", title: "Bold", run: () => exec("bold") },
+        { label: "I", title: "Italic", run: () => exec("italic") },
+        { label: "U", title: "Underline", run: () => exec("underline") },
+        {
+            label: "• List",
+            title: "Bulleted list",
+            run: () => exec("insertUnorderedList"),
+        },
+        {
+            label: "1. List",
+            title: "Numbered list",
+            run: () => exec("insertOrderedList"),
+        },
+        {
+            label: "Link",
+            title: "Insert link",
+            run: () => {
+                if (typeof window === "undefined")
+                    return;
+                const href = window.prompt("Enter URL", "https://");
+                if (!href)
+                    return;
+                exec("createLink", href);
+            },
+        },
+        {
+            label: "Clear",
+            title: "Clear formatting",
+            run: () => exec("removeFormat"),
+        },
+    ], []);
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        if (editor.innerHTML !== value) {
+            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" : ""}` })] }));
+}

package/dist/ui/components/RoleBadge.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Badge } from "./Badge";
 const DEFAULT_ROLE_LABELS = {

package/dist/ui/components/RowActionMenu.js

@@ -10,7 +10,7 @@ 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"}`, children: actions.map((action, idx) => (_jsxs("div", { 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", onClick: () => {
                                 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] }));

package/dist/ui/components/SectionTabs.js

@@ -35,12 +35,12 @@ export function SectionTabs({ tabs, variant = "default", className = "", value,
                 inline ? "" : "appkit-section-tabs__scroll--padded",
             ]
                 .filter(Boolean)
-                .join(" "), children: _jsx("div", { className: [
+                .join(" "), "data-section": "sectiontabs-div-587", children: _jsx("div", { className: [
                     "appkit-section-tabs__track",
                     inline ? "" : "appkit-section-tabs__track--full",
                 ]
                     .filter(Boolean)
-                    .join(" "), children: tabs.map((tab) => {
+                    .join(" "), "data-section": "sectiontabs-div-588", children: tabs.map((tab) => {
                     const key = getTabKey(tab);
                     const isActive = isActiveTab(tab);
                     const tabClass = `${tabBaseClass} ${isActive ? tabActiveClass : tabInactiveClass}`;
@@ -53,7 +53,7 @@ export function SectionTabs({ tabs, variant = "default", className = "", value,
                     return (_jsx(TextLink, { href: tab.href ?? "#", className: tabClass, children: content }, key));
                 }) }) }) }));
     if (inline) {
-        return _jsx("div", { className: className, children: strip });
+        return _jsx("div", { className: className, "data-section": "sectiontabs-div-589", children: strip });
     }
     return (_jsx("div", { className: [
             "appkit-section-tabs",
@@ -62,5 +62,5 @@ export function SectionTabs({ tabs, variant = "default", className = "", value,
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: _jsx("div", { className: "appkit-section-tabs__container", children: strip }) }));
+            .join(" "), "data-section": "sectiontabs-div-590", children: _jsx("div", { className: "appkit-section-tabs__container", "data-section": "sectiontabs-div-591", children: strip }) }));
 }

package/dist/ui/components/Select.js

@@ -13,7 +13,7 @@ export function Select({ options, value, onChange, onValueChange, placeholder, l
         : variant === "ghost"
             ? "border-transparent bg-transparent shadow-none"
             : "appkit-select__trigger--default";
-    return (_jsxs("div", { className: "appkit-select", children: [label && (_jsx(Label, { htmlFor: inputId, className: "appkit-select__label", required: required, children: label })), _jsxs("div", { className: "relative group", children: [_jsxs("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: [
+    return (_jsxs("div", { className: "appkit-select", "data-section": "select-div-592", children: [label && (_jsx(Label, { htmlFor: inputId, className: "appkit-select__label", required: required, children: label })), _jsxs("div", { className: "relative group", "data-section": "select-div-593", children: [_jsxs("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: [
                             "appkit-select__trigger",
                             "w-full appearance-none pr-10",
                             disabled
@@ -23,5 +23,5 @@ export function Select({ options, value, onChange, onValueChange, placeholder, l
                             className,
                         ]
                             .filter(Boolean)
-                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-500", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
+                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-500", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
 }

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

@@ -31,9 +31,9 @@ import React from "react";
  * ```
  */
 /**
- * Semantic `<section>` element.
+ * Semantic `<section data-section="semantic-section-595">` element.
  * Use for thematically grouped content that would appear in an outline.
- * Prefer this over a plain `<div>` when the block has a heading.
+ * Prefer this over a plain `<div data-section="semantic-div-596">` when the block has a heading.
  */
 export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;

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, children: children })));
+export const Section = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("section", { className: className, ref: ref, ...props, "data-section": "semantic-section-597", children: children })));
 Section.displayName = "Section";
 export function Article({ className = "", children, ...props }) {
     return (_jsx("article", { className: className, ...props, children: children }));

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

@@ -1,4 +1,3 @@
-import "client-only";
 import { ReactNode } from "react";
 export type DrawerMode = "create" | "edit" | "delete" | "view";
 export interface SideDrawerProps {

package/dist/ui/components/SideDrawer.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import "client-only";
 import { useEffect, useRef, useState, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { Button } from "./Button";
@@ -144,8 +143,8 @@ export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "v
     if (!isOpen)
         return null;
     const positionClass = side === "left" ? UI_SIDE_DRAWER.left : UI_SIDE_DRAWER.right;
-    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", children: [_jsxs(Row, { justify: "between", gap: "none", className: [
+    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, children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, 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", { 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, 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("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") })] })] })] }))] }));
 }

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

@@ -30,11 +30,11 @@
 .appkit-side-drawer--right { right: 0; width: 100%; }
 
 @media (min-width: 640px) {
-  .appkit-side-drawer--left { width: 24rem; }
+  .appkit-side-drawer--left { width: 100%; }
 }
 @media (min-width: 768px) {
   .appkit-side-drawer--left { width: 420px; }
-  .appkit-side-drawer--right { min-width: 50%; }
+  .appkit-side-drawer--right { width: 60%; }
 }
 
 /* Header */

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

@@ -1,4 +1,3 @@
-import "client-only";
 import React from "react";
 export interface SideModalProps {
     isOpen: boolean;

package/dist/ui/components/SideModal.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useEffect, useRef } from "react";
 import { Button, Div, Heading } from "..";
 /**

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

@@ -7,7 +7,7 @@
   display: flex;
 }
 
-/* ── Backdrop ──────────────────────────────────────── */
+/* -- Backdrop ---------------------------------------- */
 
 .appkit-side-modal__backdrop {
   position: absolute;
@@ -16,7 +16,7 @@
   transition: opacity 300ms;
 }
 
-/* ── Panel ─────────────────────────────────────────── */
+/* -- Panel ------------------------------------------- */
 
 .appkit-side-modal__panel {
   position: absolute;
@@ -51,7 +51,7 @@
   }
 }
 
-/* ── Header ────────────────────────────────────────── */
+/* -- Header ------------------------------------------ */
 
 .appkit-side-modal__header {
   display: flex;
@@ -68,7 +68,7 @@
   }
 }
 
-/* ── Body ──────────────────────────────────────────── */
+/* -- Body -------------------------------------------- */
 
 .appkit-side-modal__body {
   flex: 1;

package/dist/ui/components/Skeleton.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Skeleton({ variant = "text", width, height, className = "", animation = "pulse", }) {
     const variantClass = variant === "circular"
@@ -18,5 +17,5 @@ export function Skeleton({ variant = "text", width, height, className = "", anim
         width: width ?? defaultSize.width,
         height: height ?? defaultSize.height,
     };
-    return (_jsx("div", { className: `appkit-skeleton ${variantClass} ${animationClass} ${className}`, style: style, role: "status", "aria-label": "Loading", children: _jsx("span", { className: "appkit-sr-only", children: "Loading..." }) }));
+    return (_jsx("div", { className: `appkit-skeleton ${variantClass} ${animationClass} ${className}`, style: style, role: "status", "aria-label": "Loading", "data-section": "skeleton-div-606", children: _jsx("span", { className: "appkit-sr-only", children: "Loading..." }) }));
 }

package/dist/ui/components/SkipToMain.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextLink } from "./TextLink";
 export function SkipToMain({ href = "#main-content", label = "Skip to main content", className = "", }) {

package/dist/ui/components/Slider.js

@@ -24,10 +24,10 @@ export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max
     const handleChangeEnd = () => {
         onChangeEnd?.(value);
     };
-    return (_jsxs("div", { className: ["w-full", className].filter(Boolean).join(" "), children: [(label || showValue) && (_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [label ? _jsx(Label, { htmlFor: inputId, children: label }) : _jsx("span", {}), showValue ? (_jsx(Span, { className: "text-sm tabular-nums text-zinc-600 dark:text-zinc-300", children: value })) : null] })), _jsxs("div", { className: "relative", children: [_jsx("div", { "aria-hidden": "true", className: [
+    return (_jsxs("div", { className: ["w-full", className].filter(Boolean).join(" "), "data-section": "slider-div-607", children: [(label || showValue) && (_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", "data-section": "slider-div-608", children: [label ? _jsx(Label, { htmlFor: inputId, children: label }) : _jsx("span", {}), showValue ? (_jsx(Span, { className: "text-sm tabular-nums text-zinc-600 dark:text-zinc-300", children: value })) : null] })), _jsxs("div", { className: "relative", "data-section": "slider-div-609", children: [_jsx("div", { "aria-hidden": "true", className: [
                             "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-zinc-200 dark:bg-slate-700",
                             SIZE_CLASSES[size],
-                        ].join(" "), children: _jsx("div", { className: [
+                        ].join(" "), "data-section": "slider-div-610", children: _jsx("div", { className: [
                                 "h-full rounded-full bg-lime-600 dark:bg-pink-500",
                                 SIZE_CLASSES[size],
                             ].join(" "), style: { width: `${Math.max(0, Math.min(100, percentage))}%` } }) }), _jsx("input", { id: inputId, type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, onMouseUp: handleChangeEnd, onTouchEnd: handleChangeEnd, className: [

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

@@ -1,4 +1,3 @@
-import "client-only";
 /**
  * SlottedListingView
  *
@@ -38,7 +37,7 @@ export interface SlottedListingViewProps {
     renderFilters?: () => ReactNode;
     renderActiveFilters?: () => ReactNode;
     renderBulkActions?: (selectedIds: string[], onClear: () => void) => ReactNode;
-    renderTable: (() => ReactNode) | ((selectedIds: string[], setSelectedIds: (ids: string[]) => void, isLoading: boolean) => ReactNode);
+    renderTable?: (() => ReactNode) | ((selectedIds: string[], setSelectedIds: (ids: string[]) => void, isLoading: boolean) => ReactNode);
     renderPagination?: ((total: number) => ReactNode) | (() => ReactNode);
     overlays?: ReactNode;
     /** Portal context — sets default values for manageSearch/manageSelection.

package/dist/ui/components/SlottedListingView.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import "client-only";
 /**
  * SlottedListingView
  *
@@ -36,6 +35,6 @@ export function SlottedListingView({ title, labels = {}, portal, renderHeader, r
     return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : displayTitle ? (_jsx(Heading, { level: 1, className: "text-2xl font-bold mb-6", children: displayTitle })) : null, renderTabs?.(), inlineToolbar && (renderSearch || renderSort) ? (_jsxs(Div, { className: "flex gap-2 mb-4", children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort)] })) : (_jsxs(_Fragment, { children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort)] })), renderFilters?.(), renderActiveFilters?.(), effectiveManageSelection && renderBulkActions
                 ? renderBulkActions(selectedIds, () => setSelectedIds([]))
                 : renderBulkActions?.(selectedIds, () => setSelectedIds([])), effectiveManageSelection
-                ? renderTable(selectedIds, setSelectedIds, isLoading)
-                : renderTable(), renderPagination ? renderPagination(total) : null, overlays] }));
+                ? renderTable && renderTable(selectedIds, setSelectedIds, isLoading)
+                : renderTable && renderTable(), renderPagination ? renderPagination(total) : null, overlays] }));
 }

package/dist/ui/components/SortDropdown.js

@@ -1,8 +1,7 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "./Layout";
 import { Select } from "./Select";
 import { Span } from "./Typography";
 export function SortDropdown({ value, onChange, options, label, className = "", countText, }) {
-    return (_jsxs(Row, { gap: "sm", className: ["appkit-sort-dropdown", className].filter(Boolean).join(" "), children: [countText && (_jsx(Span, { variant: "secondary", size: "sm", className: "appkit-sort-dropdown__count", children: countText })), label && (_jsx(Span, { variant: "secondary", size: "sm", className: "appkit-sort-dropdown__label", children: label })), _jsx(Select, { value: value ?? "", onValueChange: onChange, options: options, className: "appkit-sort-dropdown__select" })] }));
+    return (_jsxs(Row, { gap: "sm", className: ["appkit-sort-dropdown", className].filter(Boolean).join(" "), children: [countText && (_jsx(Span, { variant: "secondary", size: "sm", className: "appkit-sort-dropdown__count", children: countText })), label && (_jsx(Span, { variant: "secondary", size: "sm", className: "appkit-sort-dropdown__label", children: label })), _jsx(Select, { value: value ?? "", onValueChange: onChange, options: options, className: "appkit-sort-dropdown__select", "aria-label": label ?? "Sort by" })] }));
 }

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

@@ -6,7 +6,7 @@
  */
 export interface SpinnerProps {
     size?: "sm" | "md" | "lg" | "xl";
-    variant?: "primary" | "white" | "current";
+    variant?: "primary" | "white" | "current" | "pokeball";
     className?: string;
     label?: string;
 }

package/dist/ui/components/Spinner.js

@@ -10,6 +10,7 @@ export function Spinner({ size = "md", variant = "primary", className = "", labe
         primary: "appkit-spinner__indicator--primary",
         white: "appkit-spinner__indicator--white",
         current: "appkit-spinner__indicator--current",
+        pokeball: "appkit-spinner__indicator--pokeball",
     };
-    return (_jsxs("div", { className: `appkit-spinner ${className}`, role: "status", "aria-label": label, children: [_jsx("div", { className: `appkit-spinner__indicator ${sizeClasses[size]} ${variantClasses[variant]}` }), label && _jsx("span", { className: "appkit-sr-only", children: label })] }));
+    return (_jsxs("div", { className: `appkit-spinner ${className}`, role: "status", "aria-label": label, "data-section": "spinner-div-611", children: [_jsx("div", { className: `appkit-spinner__indicator ${sizeClasses[size]} ${variantClasses[variant]}` }), label && _jsx("span", { className: "appkit-sr-only", children: label })] }));
 }

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

@@ -57,6 +57,14 @@
   border-top-color: transparent;
 }
 
+/* Pokéball-style: red top/right, white bottom/left */
+.appkit-spinner__indicator--pokeball {
+  border-top-color: #CC0000;
+  border-right-color: #CC0000;
+  border-bottom-color: #ffffff;
+  border-left-color: #ffffff;
+}
+
 .appkit-sr-only {
   position: absolute;
   width: 1px;

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

@@ -1,4 +1,3 @@
-import "client-only";
 /**
  * StackedViewShell
  *

package/dist/ui/components/StackedViewShell.js

@@ -1,6 +1,4 @@
-"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 /**
  * StackedViewShell
  *

package/dist/ui/components/StatsGrid.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div } from "./Div";
 import { Text } from "./Typography";

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

@@ -4,12 +4,12 @@
  * Wraps @mohasinac/ui Badge with a pre-defined status → variant mapping.
  * No app-specific imports.
  */
-export type OrderStatus = "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled" | "refunded" | "failed";
-export type PaymentStatus = "pending" | "paid" | "failed" | "refunded" | "partially_refunded";
-export type ReviewStatus = "pending" | "approved" | "rejected";
-export type TicketStatus = "open" | "in_progress" | "resolved" | "closed";
+export type BadgeOrderStatus = "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled" | "refunded" | "failed";
+export type BadgePaymentStatus = "pending" | "paid" | "failed" | "refunded" | "partially_refunded";
+export type BadgeReviewStatus = "pending" | "approved" | "rejected";
+export type BadgeTicketStatus = "open" | "in_progress" | "resolved" | "closed";
 export type GenericStatus = "active" | "inactive" | "pending" | "approved" | "rejected" | "success" | "warning" | "danger" | "info";
-export type StatusBadgeStatus = OrderStatus | PaymentStatus | ReviewStatus | TicketStatus | GenericStatus;
+export type StatusBadgeStatus = BadgeOrderStatus | BadgePaymentStatus | BadgeReviewStatus | BadgeTicketStatus | GenericStatus;
 export interface StatusBadgeProps {
     status: StatusBadgeStatus;
     label?: string;

package/dist/ui/components/StepperNav.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Li, Nav, Ol } from "./Semantic";
 import { Span } from "./Typography";
@@ -8,11 +7,11 @@ export function StepperNav({ steps, currentStep, className }) {
                 const isComplete = step.number < currentStep;
                 const isActive = step.number === currentStep;
                 const isLast = i === steps.length - 1;
-                return (_jsxs(Li, { className: "appkit-stepper-nav__item", children: [_jsxs("div", { className: "appkit-stepper-nav__step", children: [_jsx("div", { className: classNames("appkit-stepper-nav__bubble", isComplete
+                return (_jsxs(Li, { className: "appkit-stepper-nav__item", children: [_jsxs("div", { className: "appkit-stepper-nav__step", "data-section": "steppernav-div-612", children: [_jsx("div", { className: classNames("appkit-stepper-nav__bubble", isComplete
                                         ? "appkit-stepper-nav__bubble--complete"
                                         : isActive
                                             ? "appkit-stepper-nav__bubble--active"
-                                            : "appkit-stepper-nav__bubble--pending"), children: isComplete ? (_jsx("svg", { className: "appkit-stepper-nav__check", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M5 13l4 4L19 7" }) })) : (step.number) }), _jsx(Span, { className: classNames("appkit-stepper-nav__label", isActive
+                                            : "appkit-stepper-nav__bubble--pending"), "data-section": "steppernav-div-613", children: isComplete ? (_jsx("svg", { className: "appkit-stepper-nav__check", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M5 13l4 4L19 7" }) })) : (step.number) }), _jsx(Span, { className: classNames("appkit-stepper-nav__label", isActive
                                         ? "appkit-stepper-nav__label--active"
                                         : isComplete
                                             ? "appkit-stepper-nav__label--complete"

package/dist/ui/components/SummaryCard.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div } from "./Div";
 import { Divider } from "./Divider";

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

@@ -1,4 +1,3 @@
-import "client-only";
 export interface TabStripTab {
     key: string;
     label: string;

package/dist/ui/components/TabStrip.js

@@ -1,7 +1,6 @@
-// appkit/src/ui/components/TabStrip.tsx
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
+// appkit/src/ui/components/TabStrip.tsx
 import { useEffect } from "react";
 import { Span } from "./Typography";
 import { useVisibleItems } from "../../react/hooks/useVisibleItems";

package/dist/ui/components/TablePagination.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div } from "./Div";
 import { Pagination } from "./Pagination";

package/dist/ui/components/Tabs.js

@@ -22,10 +22,10 @@ export function Tabs({ defaultValue = "", value, onChange, className = "", child
             onChange?.(next);
         },
     }), [active, onChange, value]);
-    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx("div", { className: className, children: children }) }));
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx("div", { className: className, "data-section": "tabs-div-614", children: children }) }));
 }
 export function TabsList({ className = "", children }) {
-    return (_jsx("div", { role: "tablist", className: [UI_TABS.list, className].filter(Boolean).join(" "), children: children }));
+    return (_jsx("div", { role: "tablist", className: [UI_TABS.list, className].filter(Boolean).join(" "), "data-section": "tabs-div-615", children: children }));
 }
 export function TabsTrigger({ value, disabled, className = "", children, }) {
     const { active, setActive } = useContext(TabsContext);
@@ -36,6 +36,6 @@ export function TabsContent({ value, className = "", children, }) {
     const { active } = useContext(TabsContext);
     if (active !== value)
         return null;
-    return (_jsx("div", { className: [UI_TABS.content, className].join(" "), children: children }));
+    return (_jsx("div", { className: [UI_TABS.content, className].join(" "), "data-section": "tabs-div-616", children: children }));
 }
 export default Tabs;

package/dist/ui/components/TagInput.js

@@ -43,7 +43,7 @@ export function TagInput({ value, onChange, disabled = false, label, placeholder
             addTag(draft);
         }
     };
-    return (_jsxs("div", { className: ["appkit-tag-input", className].filter(Boolean).join(" "), children: [label && _jsx(Label, { className: "appkit-tag-input__label", children: label }), _jsxs("div", { onClick: () => !disabled && inputRef.current?.focus(), className: [
+    return (_jsxs("div", { className: ["appkit-tag-input", className].filter(Boolean).join(" "), "data-section": "taginput-div-618", children: [label && _jsx(Label, { className: "appkit-tag-input__label", children: label }), _jsxs("div", { onClick: () => !disabled && inputRef.current?.focus(), className: [
                     "appkit-tag-input__field",
                     disabled ? "appkit-tag-input__field--disabled" : "",
                 ]

package/dist/ui/components/TextLink.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from "next/link";
 import { twMerge } from "tailwind-merge";

package/dist/ui/components/Textarea.js

@@ -14,8 +14,8 @@ export const Textarea = React.forwardRef(function Textarea({ label, error, helpe
         : variant === "ghost"
             ? "border-transparent bg-transparent shadow-none"
             : "";
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsx("textarea", { ...props, ref: ref, id: inputId, value: value, defaultValue: defaultValue, maxLength: maxLength, "aria-invalid": error ? "true" : undefined, className: ["appkit-textarea", variantClass, className]
+    return (_jsxs("div", { className: "w-full", "data-section": "textarea-div-620", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsx("textarea", { ...props, ref: ref, id: inputId, value: value, defaultValue: defaultValue, maxLength: maxLength, "aria-invalid": error ? "true" : undefined, className: ["appkit-textarea", variantClass, className]
                     .filter(Boolean)
-                    .join(" ") }), (error || helperText || (showCharCount && maxLength)) && (_jsxs("div", { className: "mt-1.5 flex items-start justify-between gap-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", children: helperText })) : null }), showCharCount && maxLength ? (_jsxs(Text, { size: "xs", variant: charCount >= maxLength ? "error" : "muted", className: "shrink-0 tabular-nums", children: [charCount, "/", maxLength] })) : null] }))] }));
+                    .join(" ") }), (error || helperText || (showCharCount && maxLength)) && (_jsxs("div", { className: "mt-1.5 flex items-start justify-between gap-3", "data-section": "textarea-div-621", children: [_jsx("div", { className: "min-w-0 flex-1", "data-section": "textarea-div-622", children: error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", children: helperText })) : null }), showCharCount && maxLength ? (_jsxs(Text, { size: "xs", variant: charCount >= maxLength ? "error" : "muted", className: "shrink-0 tabular-nums", children: [charCount, "/", maxLength] })) : null] }))] }));
 });
 Textarea.displayName = "Textarea";

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

@@ -1,4 +1,3 @@
-import "client-only";
 import React from "react";
 export type ToastVariant = "success" | "error" | "warning" | "info";
 export type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";

package/dist/ui/components/Toast.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import React from "react";
 import { Button } from "./Button";
 import { Text } from "./Typography";
@@ -48,7 +47,7 @@ export function ToastProvider({ children, position = "top-right", }) {
     }, [hideToast]);
     return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast }, children: [children, _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: [UI_TOAST.container, UI_TOAST.positions[position]]
                     .filter(Boolean)
-                    .join(" "), children: toasts.map((toast) => (_jsx(ToastRow, { toast: toast, onClose: hideToast }, toast.id))) })] }));
+                    .join(" "), "data-section": "toast-div-623", children: toasts.map((toast) => (_jsx(ToastRow, { toast: toast, onClose: hideToast }, toast.id))) })] }));
 }
 function ToastRow({ toast, onClose, }) {
     const iconMap = {
@@ -57,5 +56,5 @@ function ToastRow({ toast, onClose, }) {
         warning: _jsx("span", { "aria-hidden": "true", children: "!" }),
         info: _jsx("span", { "aria-hidden": "true", children: "i" }),
     };
-    return (_jsxs("div", { role: "alert", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), children: [_jsx("div", { className: UI_TOAST.icon, children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
+    return (_jsxs("div", { role: "alert", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
 }

package/dist/ui/components/Toggle.js

@@ -34,7 +34,7 @@ export function Toggle({ checked: checkedProp, defaultChecked = false, onChange,
     };
     return (_jsxs("div", { className: [UI_TOGGLE.base, UI_TOGGLE.sizes[size], className]
             .filter(Boolean)
-            .join(" "), children: [_jsx("button", { id: toggleId, type: "button", role: "switch", "aria-checked": checked, "aria-labelledby": label ? `${toggleId}-label` : undefined, disabled: disabled, onClick: handleToggle, className: [
+            .join(" "), "data-section": "toggle-div-626", children: [_jsx("button", { id: toggleId, type: "button", role: "switch", "aria-checked": checked, "aria-labelledby": label ? `${toggleId}-label` : undefined, disabled: disabled, onClick: handleToggle, className: [
                     UI_TOGGLE.track,
                     checked ? UI_TOGGLE.trackOn : UI_TOGGLE.trackOff,
                     disabled ? UI_TOGGLE.trackDisabled : "",

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

@@ -1,4 +1,3 @@
-import "client-only";
 import React from "react";
 export interface TooltipProps {
     /** Text shown in the tooltip bubble */