@mohasinac/appkit 2.7.56 → 2.7.58

package/dist/ui/components/surface-tokens.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Surface & layout tokens — shared prop maps for all layout primitives.
+ *
+ * These maps power the Bootstrap/MUI-style props (`surface`, `padding`,
+ * `rounded`, `border`, `shadow`) on Stack, Row, Grid, Container, Section,
+ * Article, Main, Aside, Div, BlockHeader, and BlockFooter.
+ */
+export declare const SURFACE_MAP: {
+    readonly none: "";
+    readonly default: "bg-white dark:bg-slate-900";
+    readonly muted: "bg-zinc-50 dark:bg-slate-950";
+    readonly subtle: "bg-zinc-100 dark:bg-slate-900";
+    readonly inset: "bg-zinc-200 dark:bg-slate-800";
+    readonly card: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl shadow-sm";
+    readonly elevated: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-2xl shadow-md";
+    readonly interactive: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all cursor-pointer";
+    readonly glass: "backdrop-blur-md bg-white/85 dark:bg-slate-900/85 border border-zinc-200/60 dark:border-slate-700/40 rounded-2xl shadow-lg";
+    readonly form: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-sm";
+};
+export type SurfaceKey = keyof typeof SURFACE_MAP;
+export declare const PADDING_MAP: {
+    readonly none: "";
+    readonly xs: "p-2";
+    readonly sm: "p-3";
+    readonly md: "p-4";
+    readonly lg: "p-6";
+    readonly xl: "p-8";
+    readonly card: "p-5 sm:p-6 lg:p-8";
+    readonly section: "py-10 sm:py-14 xl:py-20";
+    readonly sectionSm: "py-6 sm:py-10";
+    readonly page: "py-6 sm:py-8 lg:py-10";
+    readonly inline: "px-4 py-3";
+    readonly inlineSm: "px-3 py-2";
+    readonly inlineLg: "px-6 py-4";
+};
+export type PaddingKey = keyof typeof PADDING_MAP;
+export declare const ROUNDED_MAP: {
+    readonly none: "";
+    readonly sm: "rounded-sm";
+    readonly md: "rounded-md";
+    readonly lg: "rounded-lg";
+    readonly xl: "rounded-xl";
+    readonly "2xl": "rounded-2xl";
+    readonly full: "rounded-full";
+};
+export type RoundedKey = keyof typeof ROUNDED_MAP;
+export declare const BORDER_MAP: {
+    readonly none: "";
+    readonly default: "border border-zinc-200 dark:border-slate-700";
+    readonly subtle: "border border-zinc-100 dark:border-slate-800/60";
+    readonly strong: "border border-zinc-300 dark:border-slate-600";
+    readonly dashed: "border border-dashed border-zinc-300 dark:border-slate-600";
+};
+export type BorderKey = keyof typeof BORDER_MAP;
+export declare const SHADOW_MAP: {
+    readonly none: "";
+    readonly sm: "shadow-sm";
+    readonly md: "shadow-md";
+    readonly lg: "shadow-lg";
+    readonly xl: "shadow-xl";
+};
+export type ShadowKey = keyof typeof SHADOW_MAP;
+export interface SurfaceProps {
+    surface?: SurfaceKey;
+    padding?: PaddingKey;
+    rounded?: RoundedKey;
+    border?: BorderKey;
+    shadow?: ShadowKey;
+}
+export declare function buildSurfaceClasses(props: SurfaceProps): string;

package/dist/ui/components/surface-tokens.js

@@ -0,0 +1,68 @@
+/**
+ * Surface & layout tokens — shared prop maps for all layout primitives.
+ *
+ * These maps power the Bootstrap/MUI-style props (`surface`, `padding`,
+ * `rounded`, `border`, `shadow`) on Stack, Row, Grid, Container, Section,
+ * Article, Main, Aside, Div, BlockHeader, and BlockFooter.
+ */
+export const SURFACE_MAP = {
+    none: "",
+    default: "bg-white dark:bg-slate-900",
+    muted: "bg-zinc-50 dark:bg-slate-950",
+    subtle: "bg-zinc-100 dark:bg-slate-900",
+    inset: "bg-zinc-200 dark:bg-slate-800",
+    card: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl shadow-sm",
+    elevated: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-2xl shadow-md",
+    interactive: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all cursor-pointer",
+    glass: "backdrop-blur-md bg-white/85 dark:bg-slate-900/85 border border-zinc-200/60 dark:border-slate-700/40 rounded-2xl shadow-lg",
+    form: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-sm",
+};
+export const PADDING_MAP = {
+    none: "",
+    xs: "p-2",
+    sm: "p-3",
+    md: "p-4",
+    lg: "p-6",
+    xl: "p-8",
+    card: "p-5 sm:p-6 lg:p-8",
+    section: "py-10 sm:py-14 xl:py-20",
+    sectionSm: "py-6 sm:py-10",
+    page: "py-6 sm:py-8 lg:py-10",
+    inline: "px-4 py-3",
+    inlineSm: "px-3 py-2",
+    inlineLg: "px-6 py-4",
+};
+export const ROUNDED_MAP = {
+    none: "",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    full: "rounded-full",
+};
+export const BORDER_MAP = {
+    none: "",
+    default: "border border-zinc-200 dark:border-slate-700",
+    subtle: "border border-zinc-100 dark:border-slate-800/60",
+    strong: "border border-zinc-300 dark:border-slate-600",
+    dashed: "border border-dashed border-zinc-300 dark:border-slate-600",
+};
+export const SHADOW_MAP = {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+    xl: "shadow-xl",
+};
+export function buildSurfaceClasses(props) {
+    return [
+        props.surface ? SURFACE_MAP[props.surface] : "",
+        props.padding ? PADDING_MAP[props.padding] : "",
+        props.rounded ? ROUNDED_MAP[props.rounded] : "",
+        props.border ? BORDER_MAP[props.border] : "",
+        props.shadow ? SHADOW_MAP[props.shadow] : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+}

package/dist/ui/forms/FormShell.d.ts

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from "react";
+import type { ZodType } from "zod";
 export interface FormShellStep {
     id: string;
     label: string;
@@ -32,6 +33,10 @@ export interface FormShellProps {
     onPublish: (values: Record<string, unknown>) => Promise<void>;
     /** Current form values — caller owns state */
     values: Record<string, unknown>;
+    /** Zod schema for auto-validation on publish. Errors are mapped to field names. */
+    schema?: ZodType;
+    /** When true + schema provided, validate on every value change (not just publish). */
+    validateOnChange?: boolean;
     /** Whether any values differ from the persisted state */
     isDirty?: boolean;
     draftId?: string;
@@ -63,4 +68,4 @@ export interface FormShellProviderProps {
     values?: Record<string, unknown>;
 }
 export declare function FormShellProvider({ children, onSaveDraft, isDirty, autoSaveDelayMs, values, }: FormShellProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function FormShell({ steps, onSaveDraft, onPublish, values, isDirty, autoSaveDelayMs, publishLabel, saveDraftLabel, title, className, mobileAccordion, }: FormShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormShell({ steps, onSaveDraft, onPublish, values, schema, validateOnChange, isDirty, autoSaveDelayMs, publishLabel, saveDraftLabel, title, className, mobileAccordion, }: FormShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/forms/FormShell.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { Button } from "../components/Button";
-import { Heading, Text } from "../components/Typography";
+import { Heading, Span, Text } from "../components/Typography";
 // ─── Context ──────────────────────────────────────────────────────────────────
 export const FormShellContext = createContext(null);
 export function useFormShell() {
@@ -61,7 +61,7 @@ function ErrorSummary({ errors, visible }) {
     const entries = Object.entries(errors).filter(([, v]) => v);
     if (!visible || entries.length === 0)
         return null;
-    return (_jsxs("div", { className: "appkit-formshell__error-summary", role: "alert", "aria-live": "assertive", children: [_jsxs(Text, { size: "sm", variant: "error", className: "appkit-formshell__error-summary__title", children: ["Please fix ", entries.length, " error", entries.length !== 1 ? "s" : "", " before publishing."] }), _jsx("ul", { className: "appkit-formshell__error-summary__list", children: entries.map(([field, msg]) => (_jsx("li", { children: _jsxs(Text, { size: "sm", variant: "error", children: [_jsx("strong", { children: field }), ": ", msg] }) }, field))) })] }));
+    return (_jsxs("div", { className: "appkit-formshell__error-summary", role: "alert", "aria-live": "assertive", children: [_jsxs(Text, { size: "sm", variant: "error", className: "appkit-formshell__error-summary__title", children: ["Please fix ", entries.length, " error", entries.length !== 1 ? "s" : "", " before publishing."] }), _jsx("ul", { className: "appkit-formshell__error-summary__list", children: entries.map(([field, msg]) => (_jsx("li", { children: _jsxs(Text, { size: "sm", variant: "error", children: [_jsx(Span, { weight: "bold", children: field }), ": ", msg] }) }, field))) })] }));
 }
 export function FormShellProvider({ children, onSaveDraft, isDirty = false, autoSaveDelayMs = 2000, values = {}, }) {
     const [errors, setErrors] = useState({});
@@ -122,8 +122,25 @@ export function FormShellProvider({ children, onSaveDraft, isDirty = false, auto
     }), [errors, touched, setFieldError, setFieldTouched, clearFieldError, isDirty]);
     return _jsx(FormShellContext.Provider, { value: ctx, children: children });
 }
+// ─── Schema validation helper ────────────────────────────────────────────────
+function validateSchema(schema, values, setFieldError, setErrors) {
+    const result = schema.safeParse(values);
+    if (result.success) {
+        setErrors({});
+        return true;
+    }
+    const newErrors = {};
+    for (const issue of result.error.issues) {
+        const path = issue.path.join(".");
+        if (path && !newErrors[path]) {
+            newErrors[path] = issue.message;
+        }
+    }
+    setErrors(newErrors);
+    return false;
+}
 // ─── FormShell ────────────────────────────────────────────────────────────────
-export function FormShell({ steps, onSaveDraft, onPublish, values, isDirty = false, autoSaveDelayMs = 2000, publishLabel = "Publish", saveDraftLabel = "Save Draft", title, className = "", mobileAccordion = true, }) {
+export function FormShell({ steps, onSaveDraft, onPublish, values, schema, validateOnChange = false, isDirty = false, autoSaveDelayMs = 2000, publishLabel = "Publish", saveDraftLabel = "Save Draft", title, className = "", mobileAccordion = true, }) {
     const [errors, setErrors] = useState({});
     const [touched, setTouched] = useState({});
     const [currentStep, setCurrentStep] = useState(0);
@@ -198,8 +215,19 @@ export function FormShell({ steps, onSaveDraft, onPublish, values, isDirty = fal
             setIsSubmitting(false);
         }
     }, [onSaveDraft, values]);
+    // Schema-driven live validation on value changes
+    useEffect(() => {
+        if (!schema || !validateOnChange)
+            return;
+        validateSchema(schema, values, setFieldError, setErrors);
+    }, [schema, validateOnChange, values, setFieldError]);
     const handlePublish = useCallback(async () => {
         setShowErrorSummary(true);
+        if (schema) {
+            const valid = validateSchema(schema, values, setFieldError, setErrors);
+            if (!valid)
+                return;
+        }
         if (!isPublishReady)
             return;
         setIsSubmitting(true);
@@ -209,7 +237,7 @@ export function FormShell({ steps, onSaveDraft, onPublish, values, isDirty = fal
         finally {
             setIsSubmitting(false);
         }
-    }, [isPublishReady, onPublish, values]);
+    }, [isPublishReady, onPublish, values, schema, setFieldError]);
     const ctx = useMemo(() => ({
         errors,
         touched,

package/dist/ui/index.d.ts

@@ -10,10 +10,11 @@ export type { FieldCheckboxProps } from "./forms";
 export { FieldCheckbox } from "./forms";
 export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./columns";
 export type { BooleanRenderOpts, RatingMode, RatingRenderOpts, } from "./columns";
-export type { SectionProps, ArticleProps, MainProps, AsideProps, NavProps, BlockHeaderProps, BlockFooterProps, HeaderProps, FooterProps, UlProps, OlProps, LiProps, } from "./components/Semantic";
-export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Header, Footer, Ul, Ol, Li, } from "./components/Semantic";
+export type { SectionProps, ArticleProps, MainProps, AsideProps, NavProps, BlockHeaderProps, BlockFooterProps, HeaderProps, FooterProps, UlProps, OlProps, LiProps, TableProps, TheadProps, TbodyProps, TrProps, ThProps, TdProps, CodeProps, PreProps, BlockquoteProps, FigureProps, FigcaptionProps, DlProps, DtProps, DdProps, } from "./components/Semantic";
+export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Header, Footer, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
 export type { DivProps } from "./components/Div";
 export { Div } from "./components/Div";
+export type { ColorVariant } from "./components/Typography";
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 export { FilterChipGroup } from "./components/FilterChipGroup";
 export type { FilterChipGroupProps, FilterChipGroupTab, } from "./components/FilterChipGroup";
@@ -166,6 +167,8 @@ export type { DataTableProps, DataTableColumn } from "./DataTable";
 export { DataTable } from "./DataTable";
 export type { TableConfig, TableViewMode, PaginationConfig, StickyConfig, } from "../contracts";
 export { DEFAULT_TABLE_CONFIG, DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, mergeTableConfig, } from "../contracts";
+export type { SurfaceKey, PaddingKey, RoundedKey, BorderKey, ShadowKey, SurfaceProps, } from "./components/surface-tokens";
+export { SURFACE_MAP, PADDING_MAP, ROUNDED_MAP, BORDER_MAP, SHADOW_MAP, buildSurfaceClasses, } from "./components/surface-tokens";
 export type { GapKey, ContainerSize, GridCols, ViewPortal, ContainerProps, StackProps, RowProps, GridProps, } from "./components/Layout";
 export { Container, Stack, Row, Grid, GRID_MAP } from "./components/Layout";
 export { classNames, mergeTailwindClasses } from "./style.helper";
@@ -189,10 +192,6 @@ export type { StackedViewShellProps, StackedViewShellLabels, } from "./component
 export { StackedViewShell } from "./components/StackedViewShell";
 export type { BulkActionBarProps, BulkActionBarLabels, BulkActionItem, } from "./components/BulkActionBar";
 export { BulkActionBar } from "./components/BulkActionBar";
-export type { BulkActionsBarProps, BulkAction } from "./components/BulkActionsBar";
-export { BulkActionsBar } from "./components/BulkActionsBar";
-export type { StickyBottomBarProps } from "./components/StickyBottomBar";
-export { StickyBottomBar } from "./components/StickyBottomBar";
 export type { ClaimCouponButtonProps } from "./components/ClaimCouponButton";
 export { ClaimCouponButton } from "./components/ClaimCouponButton";
 export type { FlowStep, FlowDiagramProps } from "./components/FlowDiagram";
@@ -207,3 +206,7 @@ export type { FormActionBarProps, FormActionBarBreadcrumb } from "./components/F
 export { FormActionBar } from "./components/FormActionBar";
 export type { ConfirmDeleteModalProps } from "./components/ConfirmDeleteModal";
 export { ConfirmDeleteModal } from "./components/ConfirmDeleteModal";
+export type { FadeInProps, SlideUpProps, SlideInProps, ScaleInProps, CollapseProps, PressScaleProps, HoverLiftProps, AnimatedListProps, AnimatedDivProps, AnimatedStackProps, AnimatedRowProps, DraggableProps, SwipeableProps, } from "./components/Motion";
+export { FadeIn, SlideUp, SlideIn, ScaleIn, Collapse, PressScale, HoverLift, AnimatedList, AnimatedDiv, AnimatedStack, AnimatedRow, Draggable, Swipeable, AnimatePresence, } from "./components/Motion";
+export type { MotionPreset } from "../tokens/motion";
+export { MOTION_PRESETS, SPRING_SNAPPY, SPRING_GENTLE, EASE_OUT, } from "../tokens/motion";

package/dist/ui/index.js

@@ -6,9 +6,8 @@ export { FieldSelect } from "./forms";
 export { FieldCheckbox } from "./forms";
 // --- Column utilities ---------------------------------------------------------
 export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./columns";
-export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Header, Footer, Ul, Ol, Li, } from "./components/Semantic";
+export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Header, Footer, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
 export { Div } from "./components/Div";
-// --- Typography primitives ----------------------------------------------------
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 // --- Filter chip group (SB10-C completion, S8 2026-05-13) --------------------
 export { FilterChipGroup } from "./components/FilterChipGroup";
@@ -87,6 +86,7 @@ export { ListingToolbar } from "./components/ListingToolbar";
 export { TablePagination } from "./components/TablePagination";
 export { DataTable } from "./DataTable";
 export { DEFAULT_TABLE_CONFIG, DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, mergeTableConfig, } from "../contracts";
+export { SURFACE_MAP, PADDING_MAP, ROUNDED_MAP, BORDER_MAP, SHADOW_MAP, buildSurfaceClasses, } from "./components/surface-tokens";
 export { Container, Stack, Row, Grid, GRID_MAP } from "./components/Layout";
 // --- UI Helpers ---------------------------------------------------------------
 export { classNames, mergeTailwindClasses } from "./style.helper";
@@ -100,8 +100,6 @@ export { SlottedListingView } from "./components/SlottedListingView";
 export { DetailViewShell } from "./components/DetailViewShell";
 export { StackedViewShell } from "./components/StackedViewShell";
 export { BulkActionBar } from "./components/BulkActionBar";
-export { BulkActionsBar } from "./components/BulkActionsBar";
-export { StickyBottomBar } from "./components/StickyBottomBar";
 export { ClaimCouponButton } from "./components/ClaimCouponButton";
 export { FlowDiagram } from "./components/FlowDiagram";
 export { BaseListingCard } from "./components/BaseListingCard";
@@ -109,3 +107,5 @@ export { default as ImageGallery } from "./components/ImageGallery";
 export { SideDrawer } from "./components/SideDrawer";
 export { FormActionBar } from "./components/FormActionBar";
 export { ConfirmDeleteModal } from "./components/ConfirmDeleteModal";
+export { FadeIn, SlideUp, SlideIn, ScaleIn, Collapse, PressScale, HoverLift, AnimatedList, AnimatedDiv, AnimatedStack, AnimatedRow, Draggable, Swipeable, AnimatePresence, } from "./components/Motion";
+export { MOTION_PRESETS, SPRING_SNAPPY, SPRING_GENTLE, EASE_OUT, } from "../tokens/motion";

package/dist/validation/schemas.d.ts

@@ -122,104 +122,104 @@ export declare const cropDataSchema: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.Zo
     x: number;
     y: number;
     sourceUrl: string;
+    aspectRatio?: string | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     minWidth?: number | undefined;
+    rotation?: number | undefined;
     quality?: number | undefined;
-    aspectRatio?: string | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    outputFolder?: string | undefined;
 }, {
     height: number;
     width: number;
     x: number;
     y: number;
     sourceUrl: string;
+    aspectRatio?: string | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     minWidth?: number | undefined;
+    rotation?: number | undefined;
     quality?: number | undefined;
-    aspectRatio?: string | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    outputFolder?: string | undefined;
 }>, {
     height: number;
     width: number;
     x: number;
     y: number;
     sourceUrl: string;
+    aspectRatio?: string | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     minWidth?: number | undefined;
+    rotation?: number | undefined;
     quality?: number | undefined;
-    aspectRatio?: string | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    outputFolder?: string | undefined;
 }, {
     height: number;
     width: number;
     x: number;
     y: number;
     sourceUrl: string;
+    aspectRatio?: string | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     minWidth?: number | undefined;
+    rotation?: number | undefined;
     quality?: number | undefined;
-    aspectRatio?: string | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    outputFolder?: string | undefined;
 }>, {
     height: number;
     width: number;
     x: number;
     y: number;
     sourceUrl: string;
+    aspectRatio?: string | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     minWidth?: number | undefined;
+    rotation?: number | undefined;
     quality?: number | undefined;
-    aspectRatio?: string | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    outputFolder?: string | undefined;
 }, {
     height: number;
     width: number;
     x: number;
     y: number;
     sourceUrl: string;
+    aspectRatio?: string | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     minWidth?: number | undefined;
+    rotation?: number | undefined;
     quality?: number | undefined;
-    aspectRatio?: string | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    outputFolder?: string | undefined;
 }>, {
     height: number;
     width: number;
     x: number;
     y: number;
     sourceUrl: string;
+    aspectRatio?: string | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     minWidth?: number | undefined;
+    rotation?: number | undefined;
     quality?: number | undefined;
-    aspectRatio?: string | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    outputFolder?: string | undefined;
 }, {
     height: number;
     width: number;
     x: number;
     y: number;
     sourceUrl: string;
+    aspectRatio?: string | undefined;
     minHeight?: number | undefined;
-    rotation?: number | undefined;
     minWidth?: number | undefined;
+    rotation?: number | undefined;
     quality?: number | undefined;
-    aspectRatio?: string | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "webp" | "png" | "jpeg" | undefined;
+    outputFolder?: string | undefined;
 }>;
 export declare const trimDataSchema: z.ZodEffects<z.ZodObject<{
     sourceUrl: z.ZodEffects<z.ZodString, string, string>;
@@ -233,29 +233,29 @@ export declare const trimDataSchema: z.ZodEffects<z.ZodObject<{
     endTime: number;
     sourceUrl: string;
     quality?: "medium" | "high" | "low" | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "mp4" | "webm" | undefined;
+    outputFolder?: string | undefined;
 }, {
     startTime: number;
     endTime: number;
     sourceUrl: string;
     quality?: "medium" | "high" | "low" | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "mp4" | "webm" | undefined;
+    outputFolder?: string | undefined;
 }>, {
     startTime: number;
     endTime: number;
     sourceUrl: string;
     quality?: "medium" | "high" | "low" | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "mp4" | "webm" | undefined;
+    outputFolder?: string | undefined;
 }, {
     startTime: number;
     endTime: number;
     sourceUrl: string;
     quality?: "medium" | "high" | "low" | undefined;
-    outputFolder?: string | undefined;
     outputFormat?: "mp4" | "webm" | undefined;
+    outputFolder?: string | undefined;
 }>;
 export declare function validateRequestBody<T>(schema: z.ZodSchema<T>, body: unknown): {
     success: true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.56",
+  "version": "2.7.58",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -155,6 +155,8 @@
   },
   "dependencies": {
     "@mohasinac/sievejs": "^1.0.0",
+    "motion": "^12.40.0",
+    "react-advanced-cropper": "^0.20.1",
     "tailwind-merge": "^3.3.0",
     "zod": "^3.24.0",
     "zustand": "^5.0.13"

package/dist/_internal/client/features/seller/print-center/InventoryLabel.d.ts

@@ -1,12 +0,0 @@
-import type { ProductItem } from "../../../../../features/products/types";
-import type { LabelDesign } from "./types";
-interface InventoryLabelProps {
-    product: ProductItem;
-    publicBaseUrl: string;
-    design: LabelDesign;
-    qrDataUrl?: string;
-    barcodeDataUrl?: string;
-    brandName?: string;
-}
-export declare function InventoryLabel({ product, design, qrDataUrl, barcodeDataUrl, brandName }: InventoryLabelProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/_internal/client/features/seller/print-center/InventoryLabel.js

@@ -1,49 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getListingBadge(product) {
-    const lt = product.listingType;
-    if (lt === "auction") {
-        const sub = product.auctionEndDate
-            ? `Ends ${new Date(product.auctionEndDate).toLocaleDateString("en-IN")}`
-            : undefined;
-        return { label: "AUCTION", sub };
-    }
-    if (lt === "pre-order") {
-        const sub = product.preOrderDeliveryDate
-            ? `Expected ${new Date(product.preOrderDeliveryDate).toLocaleDateString("en-IN")}`
-            : undefined;
-        return { label: "PRE-ORDER", sub };
-    }
-    if (lt === "prize-draw")
-        return { label: "PRIZE DRAW" };
-    return null;
-}
-export function InventoryLabel({ product, design, qrDataUrl, barcodeDataUrl, brandName = "" }) {
-    const { size, show, colorScheme } = design;
-    const isDark = colorScheme === "dark";
-    const bg = isDark ? "#1a1a1a" : "#ffffff";
-    const fg = isDark ? "#f5f5f5" : "#111111";
-    const muted = isDark ? "#999999" : "#666666";
-    const border = isDark ? "#333333" : "#e5e5e5";
-    const badge = show.listingTypeBadge ? getListingBadge(product) : null;
-    const loc = product.physicalLocation;
-    const locStr = loc ? `${loc.zone} / ${loc.shelf} / ${loc.bin}` : null;
-    const priceStr = product.price != null ? `₹${(product.price / 100).toFixed(2)}` : null;
-    return (_jsxs("div", { style: {
-            width: `${size.widthMm}mm`,
-            height: `${size.heightMm}mm`,
-            background: bg,
-            color: fg,
-            border: `1px solid ${border}`,
-            borderRadius: "2px",
-            padding: "2mm",
-            fontFamily: "monospace, sans-serif",
-            fontSize: "7pt",
-            display: "flex",
-            flexDirection: "column",
-            gap: "1mm",
-            overflow: "hidden",
-            boxSizing: "border-box",
-            pageBreakInside: "avoid",
-        }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [show.logo && brandName && (_jsx("span", { style: { fontWeight: 700, fontSize: "6pt", color: muted, letterSpacing: "0.05em" }, children: brandName })), badge && (_jsx("span", { style: { background: "#111", color: "#fff", fontSize: "5pt", fontWeight: 700, padding: "0.5mm 1.5mm", borderRadius: "1px", letterSpacing: "0.05em" }, children: badge.label }))] }), _jsx("div", { style: { fontWeight: 700, fontSize: "8pt", lineHeight: 1.2, flex: 1 }, children: product.title }), badge?.sub && _jsx("div", { style: { fontSize: "6pt", color: muted }, children: badge.sub }), (show.price || show.stock) && (_jsxs("div", { style: { display: "flex", gap: "3mm", alignItems: "center" }, children: [show.price && priceStr && _jsx("span", { style: { fontWeight: 700, fontSize: "8pt" }, children: priceStr }), show.stock && product.stockCount != null && (_jsxs("span", { style: { fontSize: "6pt", color: muted }, children: ["Qty: ", product.stockCount] })), product.condition && _jsx("span", { style: { fontSize: "6pt", color: muted }, children: product.condition })] })), show.location && locStr && _jsx("div", { style: { fontSize: "6pt", color: muted }, children: locStr }), (show.barcode || qrDataUrl) && (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: "auto" }, children: [show.barcode && barcodeDataUrl && (_jsx("img", { src: barcodeDataUrl, alt: "barcode", style: { height: "8mm", maxWidth: "60%" } })), qrDataUrl && _jsx("img", { src: qrDataUrl, alt: "qr", style: { width: "10mm", height: "10mm" } })] })), _jsx("div", { style: { fontSize: "5pt", color: muted, textAlign: "center" }, children: product.id })] }));
-}

package/dist/_internal/client/features/seller/print-center/LabelDesignPicker.d.ts

@@ -1,7 +0,0 @@
-import { type LabelDesign } from "./types";
-interface LabelDesignPickerProps {
-    value: LabelDesign;
-    onChange: (design: LabelDesign) => void;
-}
-export declare function LabelDesignPicker({ value, onChange }: LabelDesignPickerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/_internal/client/features/seller/print-center/LabelDesignPicker.js

@@ -1,32 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Row } from "../../../../../ui/components/Layout";
-import { Button } from "../../../../../ui/components/Button";
-import { Input } from "../../../../../ui/components/Input";
-import { Text } from "../../../../../ui/components/Typography";
-import { LABEL_DESIGN_STORAGE_KEY } from "./types";
-const TEMPLATES = ["minimal", "detailed", "branded"];
-const SCHEMES = [
-    { value: "light", label: "Light" },
-    { value: "dark", label: "Dark" },
-    { value: "store-primary", label: "Brand" },
-];
-const SHOW_FIELDS = [
-    { key: "logo", label: "Logo" },
-    { key: "price", label: "Price" },
-    { key: "stock", label: "Stock" },
-    { key: "barcode", label: "Barcode" },
-    { key: "location", label: "Location" },
-    { key: "listingTypeBadge", label: "Type badge" },
-];
-export function LabelDesignPicker({ value, onChange }) {
-    const set = (key, val) => {
-        const next = { ...value, [key]: val };
-        onChange(next);
-        try {
-            localStorage.setItem(LABEL_DESIGN_STORAGE_KEY, JSON.stringify(next));
-        }
-        catch { /* noop */ }
-    };
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px", padding: "16px" }, children: [_jsxs(_Fragment, { children: [_jsx(Text, { variant: "muted", style: { fontSize: "11px", fontWeight: 600, marginBottom: "6px", display: "block" }, children: "Template" }), _jsx(Row, { gap: "xs", children: TEMPLATES.map(t => (_jsx(Button, { variant: value.template === t ? "primary" : "outline", size: "sm", onClick: () => set("template", t), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { variant: "muted", style: { fontSize: "11px", fontWeight: 600, marginBottom: "6px", display: "block" }, children: "Color" }), _jsx(Row, { gap: "xs", children: SCHEMES.map(s => (_jsx(Button, { variant: value.colorScheme === s.value ? "primary" : "outline", size: "sm", onClick: () => set("colorScheme", s.value), children: s.label }, s.value))) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { variant: "muted", style: { fontSize: "11px", fontWeight: 600, marginBottom: "6px", display: "block" }, children: "Size (mm)" }), _jsxs(Row, { gap: "sm", children: [_jsx(Input, { label: "W", type: "number", value: value.size.widthMm, onChange: e => set("size", { ...value.size, widthMm: Number(e.target.value) }), style: { width: "70px" } }), _jsx(Input, { label: "H", type: "number", value: value.size.heightMm, onChange: e => set("size", { ...value.size, heightMm: Number(e.target.value) }), style: { width: "70px" } })] })] }), _jsxs(_Fragment, { children: [_jsx(Text, { variant: "muted", style: { fontSize: "11px", fontWeight: 600, marginBottom: "6px", display: "block" }, children: "Show" }), _jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px" }, children: SHOW_FIELDS.map(f => (_jsxs("label", { style: { display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "12px" }, children: [_jsx("input", { type: "checkbox", checked: value.show[f.key], onChange: e => set("show", { ...value.show, [f.key]: e.target.checked }) }), f.label] }, f.key))) })] })] }));
-}

package/dist/_internal/client/features/seller/print-center/OrderPackingLabel.d.ts

@@ -1,28 +0,0 @@
-import type { LabelDesign } from "./types";
-export interface OrderForLabel {
-    id: string;
-    createdAt?: string;
-    status?: string;
-    buyerDisplayName?: string;
-    buyerCity?: string;
-    items: {
-        productName: string;
-        quantity: number;
-        price: number;
-    }[];
-    physicalLocation?: {
-        zone: string;
-        shelf: string;
-        bin: string;
-    };
-}
-interface OrderPackingLabelProps {
-    order: OrderForLabel;
-    storeBaseUrl: string;
-    design: LabelDesign;
-    qrDataUrl?: string;
-    barcodeDataUrl?: string;
-    brandName?: string;
-}
-export declare function OrderPackingLabel({ order, design, qrDataUrl, barcodeDataUrl, brandName }: OrderPackingLabelProps): import("react/jsx-runtime").JSX.Element;
-export {};