@mohasinac/appkit 4.3.2 → 4.4.0

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

@@ -15,6 +15,12 @@ export interface HorizontalScrollerProps<T = unknown> {
     snapToItems?: boolean;
     showArrows?: boolean;
     arrowSize?: "sm" | "md" | "lg";
+    /**
+     * "circle" (default) — small centered circular buttons.
+     * "full-height" — a thin sliver spanning the whole track height, flush to
+     * each edge. Easier to hit on tall / double-row grids (`rows > 1`).
+     */
+    arrowStyle?: "circle" | "full-height";
     showScrollbar?: boolean;
     showFadeEdges?: boolean;
     scrollContainerRef?: RefObject<HTMLDivElement | null>;
@@ -32,4 +38,4 @@ export interface HorizontalScrollerProps<T = unknown> {
     /** When the scroller reaches the last item, snap instantly back to the first instead of stopping. */
     loop?: boolean;
 }
-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, loop, }: HorizontalScrollerProps<T>): import("react").JSX.Element;
+export declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, arrowStyle, showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, pauseOnHover, itemClassName, loop, }: HorizontalScrollerProps<T>): import("react").JSX.Element;

package/dist/ui/components/HorizontalScroller.js

@@ -21,7 +21,7 @@ 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, pauseOnHover = false, itemClassName = "", loop = false, }) {
+export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", arrowStyle = "circle", showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, pauseOnHover = false, itemClassName = "", loop = false, }) {
     const [itemWidth, setItemWidth] = useState(undefined);
     const [colCount, setColCount] = useState(typeof perView === "number" ? perView : 3);
     const [isPaused, setIsPaused] = useState(false);
@@ -202,7 +202,7 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         const arrowsHidden = !loop && atStart && atEnd; // no scrollable overflow
         return (_jsxs("div", { className: ["appkit-hscroller appkit-hscroller--with-arrows", className]
                 .filter(Boolean)
-                .join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "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" })] })), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", "aria-disabled": prevDisabled || undefined, disabled: prevDisabled, 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: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, "data-section": "horizontalscroller-div-512", children: content }), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", "aria-disabled": nextDisabled || undefined, disabled: nextDisabled, 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, ...interactionHandlers, "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" })] })), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", "aria-disabled": prevDisabled || undefined, disabled: prevDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) })), _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, "data-section": "horizontalscroller-div-512", children: content }), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", "aria-disabled": nextDisabled || undefined, disabled: nextDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) }))] }));
     }
     return (_jsxs("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "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: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-514", children: content })] }));
 }

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

@@ -87,6 +87,30 @@
 .appkit-hscroller__arrow--md { width: 2.25rem;  height: 2.25rem;  font-size: 1rem; }
 .appkit-hscroller__arrow--lg { width: 2.75rem;  height: 2.75rem;  font-size: 1.125rem; }
 
+/* Full-height variant — a thin sliver spanning the whole track height
+ * instead of a small centered circle, so a double-row grid of cards has a
+ * much taller, easier-to-hit click target on either side. Width still comes
+ * from the --sm/--md/--lg size classes above; this only overrides the
+ * vertical sizing/position and squares off the rounding on the outer edge. */
+.appkit-hscroller__arrow--full-height {
+  top: 0;
+  height: 100%;
+  transform: none;
+  border-radius: 0;
+  background: rgba(255, 255, 255, 0.85);
+}
+.appkit-hscroller__arrow--full-height.appkit-hscroller__arrow--prev {
+  border-top-right-radius: var(--appkit-radius-lg, 0.5rem);
+  border-bottom-right-radius: var(--appkit-radius-lg, 0.5rem);
+}
+.appkit-hscroller__arrow--full-height.appkit-hscroller__arrow--next {
+  border-top-left-radius: var(--appkit-radius-lg, 0.5rem);
+  border-bottom-left-radius: var(--appkit-radius-lg, 0.5rem);
+}
+.dark .appkit-hscroller__arrow--full-height {
+  background: rgba(31, 41, 55, 0.85);
+}
+
 .dark .appkit-hscroller__arrow {
   background: rgba(31, 41, 55, 0.9);
   border-color: var(--appkit-color-slate-700);

package/dist/validation/schemas.d.ts

@@ -58,16 +58,16 @@ export declare const addressSchema: z.ZodObject<{
     country: z.ZodString;
 }, "strip", z.ZodTypeAny, {
     country: string;
-    state: string;
     city: string;
-    street: string;
+    state: string;
     pincode: string;
+    street: string;
 }, {
     country: string;
-    state: string;
     city: string;
-    street: string;
+    state: string;
     pincode: string;
+    street: string;
 }>;
 export declare const resetPasswordSchema: z.ZodObject<{
     token: z.ZodString;
@@ -148,9 +148,9 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     aspectRatio?: string | undefined;
     minHeight?: number | undefined;
     minWidth?: number | undefined;
-    rotation?: number | undefined;
     quality?: number | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    rotation?: number | undefined;
     outputFolder?: string | undefined;
 }, {
     height: number;
@@ -161,9 +161,9 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     aspectRatio?: string | undefined;
     minHeight?: number | undefined;
     minWidth?: number | undefined;
-    rotation?: number | undefined;
     quality?: number | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    rotation?: number | undefined;
     outputFolder?: string | undefined;
 }>, {
     height: number;
@@ -174,9 +174,9 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     aspectRatio?: string | undefined;
     minHeight?: number | undefined;
     minWidth?: number | undefined;
-    rotation?: number | undefined;
     quality?: number | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    rotation?: number | undefined;
     outputFolder?: string | undefined;
 }, {
     height: number;
@@ -187,9 +187,9 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     aspectRatio?: string | undefined;
     minHeight?: number | undefined;
     minWidth?: number | undefined;
-    rotation?: number | undefined;
     quality?: number | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    rotation?: number | undefined;
     outputFolder?: string | undefined;
 }>, {
     height: number;
@@ -200,9 +200,9 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     aspectRatio?: string | undefined;
     minHeight?: number | undefined;
     minWidth?: number | undefined;
-    rotation?: number | undefined;
     quality?: number | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    rotation?: number | undefined;
     outputFolder?: string | undefined;
 }, {
     height: number;
@@ -213,9 +213,9 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     aspectRatio?: string | undefined;
     minHeight?: number | undefined;
     minWidth?: number | undefined;
-    rotation?: number | undefined;
     quality?: number | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    rotation?: number | undefined;
     outputFolder?: string | undefined;
 }>, {
     height: number;
@@ -226,9 +226,9 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     aspectRatio?: string | undefined;
     minHeight?: number | undefined;
     minWidth?: number | undefined;
-    rotation?: number | undefined;
     quality?: number | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    rotation?: number | undefined;
     outputFolder?: string | undefined;
 }, {
     height: number;
@@ -239,9 +239,9 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     aspectRatio?: string | undefined;
     minHeight?: number | undefined;
     minWidth?: number | undefined;
-    rotation?: number | undefined;
     quality?: number | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    rotation?: number | undefined;
     outputFolder?: string | undefined;
 }>;
 export declare const trimDataSchema: z.ZodEffects<z.ZodObject<{

package/package.json

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