@mohasinac/appkit 2.3.1 → 2.3.2

package/dist/tokens/index.js

@@ -814,6 +814,8 @@ export const THEME_CONSTANTS = {
         perView: {
             /** Default: 1 on mobile, 2 on sm, 3 on md+ */
             default: { base: 1, sm: 2, md: 3 },
+            /** Standard: 1 on mobile, 3 on md, 4 on lg+ — the canonical homepage carousel preset */
+            standard: { base: 1, md: 3, lg: 4 },
             /** Cards: 1 on mobile, 2 on sm, 3 on md, 4 on lg+ */
             cards: { base: 1, sm: 2, md: 3, lg: 4 },
             /** Compact cards: 2 on mobile, 3 on sm, 4 on md, 5 on xl+ */

package/dist/ui/components/BaseListingCard.js

@@ -1,55 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "./Button";
 import { Span } from "./Typography";
-const UI_LISTING_CARD = {
-    root: "appkit-listing-card",
-    selected: "appkit-listing-card--selected",
-    disabled: "appkit-listing-card--disabled",
-    clickable: "appkit-listing-card--clickable",
-    hero: "appkit-listing-card__hero",
-    heroSquare: "appkit-listing-card__hero--square",
-    heroLandscape: "appkit-listing-card__hero--landscape",
-    info: "appkit-listing-card__info",
-    checkbox: "appkit-listing-card__checkbox",
-    checkboxSelected: "appkit-listing-card__checkbox--selected",
-    checkboxIcon: "appkit-listing-card__checkbox-icon",
-};
 function BaseListingCardRoot({ className = "", isSelected, isDisabled, onClick, children, }) {
     return (_jsx("div", { onClick: onClick, className: [
-            UI_LISTING_CARD.root,
-            isSelected ? UI_LISTING_CARD.selected : "",
-            isDisabled ? UI_LISTING_CARD.disabled : "",
-            onClick ? UI_LISTING_CARD.clickable : "",
+            "relative flex flex-col w-full min-w-0 overflow-hidden rounded-xl border bg-white dark:bg-zinc-900 transition-shadow",
+            isSelected
+                ? "border-primary outline outline-2 outline-primary shadow-sm"
+                : "border-zinc-200 dark:border-zinc-700 shadow-sm hover:shadow-md",
+            isDisabled ? "opacity-60" : "",
+            onClick ? "cursor-pointer" : "",
             className,
         ]
             .filter(Boolean)
-            .join(" "), "data-section": "baselistingcard-div-457", children: children }));
+            .join(" "), children: children }));
 }
 function BaseListingCardHero({ aspect, className = "", children, onMouseEnter, onMouseLeave, }) {
     const aspectClass = aspect === "square"
-        ? UI_LISTING_CARD.heroSquare
+        ? "aspect-square"
         : aspect === "4/3" || !aspect
-            ? UI_LISTING_CARD.heroLandscape
+            ? "aspect-[4/3]"
             : `aspect-[${aspect}]`;
-    return (_jsx("div", { className: [UI_LISTING_CARD.hero, aspectClass, className]
+    return (_jsx("div", { className: [
+            "relative overflow-hidden bg-zinc-100 dark:bg-zinc-800 flex-shrink-0",
+            aspectClass,
+            className,
+        ]
             .filter(Boolean)
-            .join(" "), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-section": "baselistingcard-div-458", children: children }));
+            .join(" "), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
 }
 function BaseListingCardInfo({ className = "", children, }) {
-    return (_jsx("div", { className: [UI_LISTING_CARD.info, className].filter(Boolean).join(" "), "data-section": "baselistingcard-div-459", children: children }));
+    return (_jsx("div", { className: [
+            "p-3 flex flex-col flex-1 gap-1.5",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: children }));
 }
 function BaseListingCardCheckbox({ selected, onSelect, label, position = "top-2 left-2", className = "", }) {
     return (_jsx(Button, { type: "button", "aria-label": label ?? (selected ? "Deselect" : "Select"), onClick: (e) => {
             e.stopPropagation();
             onSelect?.(e);
         }, className: [
-            UI_LISTING_CARD.checkbox,
-            selected ? UI_LISTING_CARD.checkboxSelected : "",
+            "absolute z-10 h-5 w-5 rounded border-2 flex items-center justify-center bg-white/90",
+            selected ? "bg-primary border-primary" : "border-zinc-300",
             position,
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: selected && _jsx(Span, { className: UI_LISTING_CARD.checkboxIcon, children: "\u2713" }) }));
+            .join(" "), children: selected && _jsx(Span, { className: "text-white text-xs leading-none", children: "\u2713" }) }));
 }
 export const BaseListingCard = Object.assign(BaseListingCardRoot, {
     Hero: BaseListingCardHero,

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

@@ -4,13 +4,13 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  width: 100%;
+  min-width: 0;
   border-radius: 0.75rem;
   border: 1px solid #e5e7eb;
   overflow: hidden;
   transition: box-shadow 0.2s ease;
-  min-width: clamp(150px, 18vw, 260px);
-  min-height: clamp(220px, 26vh, 360px);
+  background-color: #ffffff;
 }
 
 :is(.dark) .appkit-listing-card {
@@ -39,8 +39,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f3f4f6;
-  min-height: clamp(120px, 14vh, 200px);
-  max-height: clamp(160px, 24vh, 280px);
+  flex-shrink: 0;
 }
 
 :is(.dark) .appkit-listing-card__hero {
@@ -56,6 +55,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  gap: 0.375rem;
 }
 
 /* Checkbox overlay */

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

@@ -30,4 +30,4 @@ export interface HorizontalScrollerProps<T = unknown> {
     pauseOnHover?: boolean;
     itemClassName?: string;
 }
-export declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, itemClassName, }: HorizontalScrollerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, pauseOnHover, itemClassName, }: HorizontalScrollerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/HorizontalScroller.js

@@ -21,8 +21,9 @@ function resolvePerView(perView, containerWidth) {
     }
     return 1;
 }
-export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, itemClassName = "", }) {
+export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, pauseOnHover = false, itemClassName = "", }) {
     const [itemWidth, setItemWidth] = useState(undefined);
+    const [isPaused, setIsPaused] = useState(false);
     const internalRef = useRef(null);
     const containerRef = (externalRef ??
         internalRef);
@@ -34,12 +35,22 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         const width = el.clientWidth;
         el.scrollBy({ left: direction * width * 0.8, behavior: "smooth" });
     }, [containerRef]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "ArrowRight") {
+            e.preventDefault();
+            scrollBy(1);
+        }
+        else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            scrollBy(-1);
+        }
+    }, [scrollBy]);
     useEffect(() => {
-        if (!autoScroll)
+        if (!autoScroll || isPaused)
             return;
         autoScrollTimer.current = setInterval(() => scrollBy(1), autoScrollInterval);
         return () => clearInterval(autoScrollTimer.current);
-    }, [autoScroll, autoScrollInterval, scrollBy]);
+    }, [autoScroll, isPaused, autoScrollInterval, scrollBy]);
     useEffect(() => {
         if (!perView)
             return;
@@ -109,10 +120,13 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             : minItemWidth
                 ? { minWidth: minItemWidth }
                 : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i))))) : children;
+    const hoverHandlers = pauseOnHover
+        ? { onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false) }
+        : {};
     if (showArrows) {
         return (_jsxs("div", { className: ["appkit-hscroller appkit-hscroller--with-arrows", className]
                 .filter(Boolean)
-                .join(" "), "data-section": "horizontalscroller-div-511", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsx("div", { ref: containerRef, onScroll: onScroll, className: scrollerCls, style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, "data-section": "horizontalscroller-div-512", children: content }), _jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] }));
+                .join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...hoverHandlers, "data-section": "horizontalscroller-div-511", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsx("div", { ref: containerRef, onScroll: onScroll, className: scrollerCls, style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, "data-section": "horizontalscroller-div-512", children: content }), _jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] }));
     }
-    return (_jsxs("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), "data-section": "horizontalscroller-div-513", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("div", { ref: containerRef, onScroll: onScroll, className: scrollerCls, style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-514", children: content })] }));
+    return (_jsxs("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...hoverHandlers, "data-section": "horizontalscroller-div-513", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("div", { ref: containerRef, onScroll: onScroll, className: scrollerCls, style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-514", children: content })] }));
 }

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

@@ -3,7 +3,7 @@
 .appkit-side-drawer__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: 40;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   transition: opacity 0.2s ease;
@@ -13,7 +13,7 @@
   position: fixed;
   top: 0;
   bottom: 0;
-  z-index: 50;
+  z-index: 40;
   background: white;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   display: flex;
@@ -25,18 +25,10 @@
   background: #0f172a;
 }
 
-/* Position */
+/* Full-viewport width on all breakpoints — navbars (z-50) render over this */
 .appkit-side-drawer--left { left: 0; width: 100%; }
 .appkit-side-drawer--right { right: 0; width: 100%; }
 
-@media (min-width: 640px) {
-  .appkit-side-drawer--left { width: 100%; }
-}
-@media (min-width: 768px) {
-  .appkit-side-drawer--left { width: 420px; }
-  .appkit-side-drawer--right { width: 60%; }
-}
-
 /* Header */
 .appkit-side-drawer__header {
   padding: 1.5rem;

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Div } from "../components/Div";
-// --- Allowed HTML tags (safe subset — no script/iframe/object) ---------------
+// --- Allowed HTML tags (safe subset — no script/object; iframe allowed for YouTube only) -------
 const ALLOWED_TAGS = new Set([
     "p",
     "br",
@@ -44,6 +44,7 @@ const ALLOWED_TAGS = new Set([
     "div",
     "section",
     "article",
+    "iframe",
 ]);
 /** Attributes allowed per tag. "*" means allowed on any tag. */
 const ALLOWED_ATTRS = {
@@ -53,6 +54,7 @@ const ALLOWED_ATTRS = {
     td: ["colspan", "rowspan"],
     th: ["colspan", "rowspan", "scope"],
     ol: ["type", "start"],
+    iframe: ["src", "width", "height", "frameborder", "allowfullscreen", "allow", "title", "loading"],
 };
 // --- Simple client-side sanitiser --------------------------------------------
 // We avoid a third-party sanitizer dependency to keep this module lightweight.
@@ -97,6 +99,22 @@ function sanitiseHtml(dirty) {
                     child.removeAttribute("src");
                 }
             }
+            if (tag === "iframe") {
+                const src = child.getAttribute("src") ?? "";
+                const isYoutube = /^https:\/\/(www\.)?(youtube\.com\/embed\/|youtube-nocookie\.com\/embed\/)/.test(src.trim());
+                if (!isYoutube) {
+                    node.replaceChild(document.createTextNode(""), child);
+                    continue;
+                }
+                // Wrap in responsive 16:9 container if parent isn't already one
+                const wrapper = document.createElement("div");
+                wrapper.className = "relative aspect-video w-full overflow-hidden rounded-lg my-4";
+                child.setAttribute("class", "absolute inset-0 h-full w-full");
+                child.setAttribute("loading", "lazy");
+                node.replaceChild(wrapper, child);
+                wrapper.appendChild(child);
+                continue;
+            }
             walk(child);
         }
     }

package/package.json

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