@levo-so/studio 0.1.59 → 0.1.61

package/dist/utils/withBlockPropsUtils.d.ts

@@ -1,27 +1,12 @@
-import { ComponentType } from 'react';
-import { MotionProps } from 'motion/react';
-import { IFieldConfig, AnimationConfig } from '../interfaces';
-type MutableDeep<T> = T extends object ? {
-    -readonly [K in keyof T]: MutableDeep<T[K]>;
-} : T;
-/**
- * Animation props interface for components using Framer Motion types
- * This is the processed version of AnimationConfig used by components
- */
-export interface AnimationProps {
-    initial?: MutableDeep<MotionProps["initial"]>;
-    animate?: MutableDeep<MotionProps["animate"]>;
-    whileHover?: MutableDeep<MotionProps["whileHover"]>;
-    exit?: MutableDeep<MotionProps["exit"]>;
-}
+import { IFieldConfig } from '../interfaces';
 /**
  * Extended props interface for useCommonProps return type
  */
-export type ExtendedProps<P extends Record<string, any>> = P & {
+export type ExtendedProps<P extends Record<string, unknown>> = P & {
     elementKey: string;
-    config: any;
-    styles: any;
-    content: any;
+    config: unknown;
+    styles: unknown;
+    content: unknown;
     generatedClassName: string;
 };
 /**
@@ -56,29 +41,6 @@ export declare const isConfigWithVariants: (val: unknown) => val is {
  * Replaces dots with dashes and removes invalid characters
  */
 export declare const sanitizeElementKey: (elementKey: string) => string;
-/**
- * Hook to create a stable animation configuration that only updates when the config actually changes
- * Uses deep equality comparison to prevent animation re-triggers when object references change
- *
- * @param animationConfig - The current animation configuration from field config
- * @returns Stable animation configuration object
- */
-export declare const useStableAnimationConfig: (animationConfig: AnimationConfig | null | undefined) => AnimationConfig | null;
-/**
- * Generates standardized animation props for Framer Motion components
- *
- * @param animationConfig - The animation configuration object
- * @returns Object containing initial, animate, whileHover, and exit props
- */
-export declare const generateAnimationProps: (animationConfig: AnimationConfig | null | undefined) => AnimationProps;
-/**
- * Determines the animate value based on visibility state
- *
- * @param isInView - Whether the element is in view
- * @param animationProps - The animation props object
- * @returns The appropriate animate value
- */
-export declare const getAnimateValue: (isInView: boolean, animationProps: AnimationProps) => MutableDeep<MotionProps["animate"]> | undefined;
 /**
  * Generates variant CSS classes from selected variants configuration
  *
@@ -106,16 +68,6 @@ export declare const generateElementClassName: (elementKey: string, blockId: str
  * @returns Memoized CSS class name string
  */
 export declare const useGeneratedClassName: (elementKey: string, blockId: string, configValue: IFieldConfig | undefined) => string;
-/**
- * Hook to create a memoized Motion component
- * Only creates Motion component when animation config exists
- * Recreates when animation config changes to enable animation previews
- *
- * @param WrappedComponent - The component to wrap with motion
- * @param animationConfig - The animation configuration
- * @returns Memoized Motion component or null if no animation
- */
-export declare const useMotionComponent: <P extends Record<string, any>>(WrappedComponent: ComponentType<P>, animationConfig: AnimationConfig | null | undefined) => ComponentType<any> | null;
 /**
  * Hook to create memoized common props for components
  * Excludes frequently changing props that don't affect animation
@@ -128,6 +80,5 @@ export declare const useMotionComponent: <P extends Record<string, any>>(Wrapped
  * @param generatedClassName - The generated CSS class name
  * @returns Memoized common props object
  */
-export declare const useCommonProps: <P extends Record<string, any>>(props: P, elementKey: string, configValue: any, stylesValue: any, contentValue: any, generatedClassName: string) => ExtendedProps<P>;
-export {};
+export declare const useCommonProps: <P extends Record<string, unknown>>(props: P, elementKey: string, configValue: unknown, stylesValue: unknown, contentValue: unknown, generatedClassName: string) => ExtendedProps<P>;
 //# sourceMappingURL=withBlockPropsUtils.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levo-so/studio",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "author": "Levo Engineering <devs@theinternetfolks.com>",
   "description": "Levo Studio components and utilities for building block-based pages",
   "type": "module",
@@ -16,7 +16,6 @@
   "scripts": {
     "clean": "rimraf dist node_modules .turbo",
     "check-types": "tsc --noEmit",
-    "lint": "eslint",
     "build": "vite build",
     "dev": "vite build --watch"
   },
@@ -29,7 +28,6 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "1.3.1",
-    "@theinternetfolks/mate": "1.0.4",
     "class-variance-authority": "0.7.0",
     "culori": "4.0.1",
     "dayjs": "1.11.13",
@@ -42,40 +40,39 @@
     "formik": "2.4.6",
     "html-react-parser": "5.2.6",
     "isomorphic-dompurify": "2.14.0",
-    "libphonenumber-js": "1.12.17",
+    "libphonenumber-js": "1.12.31",
     "lucide-react": "0.424.0",
     "motion": "12.23.12",
     "radix-ui": "1.4.3",
     "react-day-picker": "9.11.1",
     "react-icons": "5.2.1",
     "react-international-phone": "4.6.0",
+    "react-otp-input": "3.1.1",
     "react-razorpay": "3.0.1",
+    "@stripe/stripe-js": "^5.5.0",
+    "@stripe/react-stripe-js": "^3.1.1",
     "react-select": "5.10.1",
     "use-debounce": "10.0.2",
     "yup": "1.7.1"
   },
   "devDependencies": {
-    "@levo/eslint-config": "workspace:*",
     "@levo/ts-config": "workspace:*",
     "@levo/tw-config": "workspace:*",
     "@types/culori": "4.0.0",
-    "@types/node": "20.16.5",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
-    "@vitejs/plugin-react": "4.3.4",
+    "@types/node": "24.10.1",
+    "@types/react": "19.2.5",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.1",
     "rollup-preserve-directives": "1.1.1",
-    "typescript": "5.8.3",
-    "vite": "6.3.3",
+    "typescript": "5.9.3",
+    "vite": "7.2.4",
     "vite-plugin-dts": "4.1.0"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./setup.css": "./dist/studio.css"
+    ".": "./src/index.ts",
+    "./setup.css": "./src/setup.css"
   }
 }

package/dist/Grid-B0vqOT42.js

@@ -1,184 +0,0 @@
-"use client";
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import n from "react";
-import { m as w } from "./index-CPJI9a7D.js";
-const x = n.memo(
-  ({
-    className: e,
-    lineColor: t = "#333333",
-    lineWidth: r = 1,
-    spacing: i = 50,
-    // Interactive mode props
-    isInteractive: u = !1,
-    hoverColor: d = "#93c5fd",
-    rows: s = 150,
-    cols: a = 100
-  }) => {
-    const y = n.useMemo(() => new Array(s).fill(1), [s]), f = n.useMemo(() => new Array(a).fill(1), [a]), l = n.useMemo(
-      () => ({
-        rowStyle: {
-          height: `${i}px`,
-          width: `${i * 2}px`,
-          borderLeft: `${r}px solid ${t}`
-        },
-        colStyle: {
-          height: `${i}px`,
-          width: `${i * 2}px`,
-          borderTop: `${r}px solid ${t}`,
-          borderRight: `${r}px solid ${t}`
-        },
-        iconStyle: {
-          top: `${-i / 3.8}px`,
-          left: `${-i / 2.4}px`,
-          color: t
-        }
-      }),
-      [i, r, t]
-    ), h = n.useMemo(
-      () => ({
-        hover: {
-          backgroundColor: d,
-          transition: { duration: 0 }
-        },
-        animate: {
-          transition: { duration: 2 }
-        }
-      }),
-      [d]
-    );
-    return u ? /* @__PURE__ */ o(
-      "div",
-      {
-        className: e,
-        style: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          height: "100%",
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          overflow: "hidden",
-          zIndex: -1
-        },
-        children: /* @__PURE__ */ o(
-          "div",
-          {
-            style: {
-              transform: "translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)",
-              position: "absolute",
-              top: "-25%",
-              left: "25%",
-              zIndex: 0,
-              display: "flex",
-              height: "100%",
-              width: "100%",
-              padding: "1rem"
-            },
-            children: y.map(($, c) => /* @__PURE__ */ o(
-              w.div,
-              {
-                style: { ...l.rowStyle, position: "relative" },
-                children: f.map((v, m) => /* @__PURE__ */ o(
-                  w.div,
-                  {
-                    whileHover: h.hover,
-                    animate: h.animate,
-                    style: { ...l.colStyle, position: "relative" },
-                    children: m % 2 === 0 && c % 2 === 0 ? /* @__PURE__ */ o(
-                      "svg",
-                      {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        fill: "none",
-                        viewBox: "0 0 24 24",
-                        strokeWidth: "1.5",
-                        stroke: "currentColor",
-                        style: {
-                          ...l.iconStyle,
-                          pointerEvents: "none",
-                          position: "absolute",
-                          height: "1.5rem",
-                          width: "2.5rem",
-                          strokeWidth: "1px"
-                        },
-                        children: /* @__PURE__ */ o(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            d: "M12 6v12m6-6H6"
-                          }
-                        )
-                      }
-                    ) : null
-                  },
-                  `col-${m}`
-                ))
-              },
-              `row-${c}`
-            ))
-          }
-        )
-      }
-    ) : /* @__PURE__ */ o(
-      "div",
-      {
-        className: e,
-        style: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          height: "100%",
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          zIndex: -1
-        },
-        children: /* @__PURE__ */ g(
-          "svg",
-          {
-            style: {
-              pointerEvents: "none",
-              position: "absolute",
-              zIndex: 0,
-              height: "100%",
-              width: "100%"
-            },
-            width: "100%",
-            height: "100%",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: [
-              /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o(
-                "pattern",
-                {
-                  id: "grid-pattern",
-                  x: "0",
-                  y: "0",
-                  width: i,
-                  height: i,
-                  patternUnits: "userSpaceOnUse",
-                  children: /* @__PURE__ */ o(
-                    "path",
-                    {
-                      d: `M ${i} 0 L 0 0 0 ${i}`,
-                      fill: "none",
-                      stroke: t,
-                      strokeWidth: r
-                    }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ o("rect", { width: "100%", height: "100%", fill: "url(#grid-pattern)" })
-            ]
-          }
-        )
-      }
-    );
-  },
-  // Custom comparison function for better memoization
-  (e, t) => e.className === t.className && e.lineColor === t.lineColor && e.lineWidth === t.lineWidth && e.spacing === t.spacing && e.isInteractive === t.isInteractive && e.hoverColor === t.hoverColor && e.rows === t.rows && e.cols === t.cols
-);
-x.displayName = "BackgroundGrid";
-export {
-  x as BackgroundGrid
-};

package/dist/MessageCard-CCngWCHS.js

@@ -1,53 +0,0 @@
-"use client";
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { A as d } from "./index-DHHPZcEh.js";
-import { M as n } from "./index-CmNhuPZp.js";
-const x = ({
-  logo: a,
-  siteName: r,
-  options: t,
-  message: c
-}) => {
-  var l;
-  return /* @__PURE__ */ s(d, { logo: a, siteName: r, maxWidth: "sm", children: [
-    /* @__PURE__ */ s("div", { className: "mb-6 px-8 sm:px-6", children: [
-      /* @__PURE__ */ e("div", { className: "mb-4 flex justify-center", children: /* @__PURE__ */ e(
-        "svg",
-        {
-          className: "h-12 w-12 text-black sm:h-10 sm:w-10",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          strokeWidth: 1.5,
-          stroke: "currentColor",
-          children: /* @__PURE__ */ e(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              d: "M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ e("h1", { className: "text-text-1 m-0 mb-2 text-center text-2xl font-semibold sm:text-xl", children: "Access Restricted" }),
-      r && /* @__PURE__ */ s("p", { className: "m-0 text-center leading-6 text-[--color-text-2]", children: [
-        "Content on ",
-        /* @__PURE__ */ e("strong", { children: r }),
-        " is currently restricted"
-      ] })
-    ] }),
-    /* @__PURE__ */ e("div", { className: "mx-8 mb-8 rounded-lg border-l-4 border-red-300 bg-gray-50 p-4 sm:mx-6", children: /* @__PURE__ */ e(
-      "div",
-      {
-        className: "m-0 flex flex-col gap-3 leading-relaxed text-gray-700",
-        dangerouslySetInnerHTML: {
-          __html: ((l = t == null ? void 0 : t.content) == null ? void 0 : l.conditionNotFulfilled) ?? c ?? ""
-        }
-      }
-    ) }),
-    /* @__PURE__ */ e(n, {})
-  ] });
-};
-export {
-  x as default
-};

package/dist/components/withBlockProps copy.d.ts

@@ -1,61 +0,0 @@
-import { ComponentType, ForwardRefExoticComponent, ReactElement, RefAttributes, ReactNode } from 'react';
-import { IFieldConfig, IStyles } from '../interfaces';
-type RenderFunction = (item: unknown, index: number) => ReactNode;
-type BlockChildren = ReactNode | RenderFunction;
-/**
- * Base props interface for all studio elements
- *
- * These props are automatically injected by the withBlockProps HOC
- * and provide access to element configuration, styling, and content
- */
-export interface BaseElementProps {
-    elementKey: string;
-    styles?: IStyles;
-    config?: IFieldConfig;
-    content?: any;
-    generatedClassName?: string;
-}
-export interface WithBlockPropsComponent<P = {}> {
-    (props: P & {
-        children?: BlockChildren;
-    }): ReactElement | null;
-}
-/**
- * withBlockProps - Higher-Order Component for Studio Elements
- *
- * This HOC enhances studio elements with block data and generates CSS classes
- * for theme-based styling and targeting. It bridges the gap between block data
- * and individual element instances.
- *
- * Key Features:
- * 1. Injects element-specific config, styles, and content from block data
- * 2. Generates CSS classes for element targeting and theme variants
- * 3. Handles nested data access via dot-notation element keys
- * 4. Provides consistent interface for all studio elements
- * 5. Added support for Framer Motion animations driven by studio config
- *
- * CSS Class Generation:
- * - Base class: `levo-{blockId}-{elementKey}` for unique element targeting
- * - Variant classes: `levo-variant-{groupId}-{variantId}` for theme variants
- *
- * The generated classes enable:
- * - Element-specific styling in CSS
- * - Theme variant styling via class selectors
- * - CSS cascade integration with theme system
- *
- * @example
- * // Element with theme variants selected
- * <Button elementKey="hero.button" />
- *
- * // If config.selectedVariants = { variants: "primary", sizes: "large" }
- * // Renders with classes:
- * // "levo-block123-hero-button levo-variant-variants-primary levo-variant-sizes-large"
- *
- * @param WrappedComponent - The component to enhance with block props
- * @returns Enhanced component with automatic prop injection
- */
-export declare const withBlockProps: <P extends BaseElementProps & {
-    children?: BlockChildren;
-}, R>(WrappedComponent: ComponentType<P> | ForwardRefExoticComponent<P & RefAttributes<R>>) => WithBlockPropsComponent<P>;
-export {};
-//# sourceMappingURL=withBlockProps%20copy.d.ts.map