@123usmanhaider321/ui 0.1.0 → 0.1.8

package/dist/components/FormBuilder/PaymentPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentPreview.js","sources":["../../../src/components/FormBuilder/PaymentPreview.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport React, { memo } from \"react\";\n\ninterface PaymentCategoryCardProps {\n    onClick: () => void;\n    name: string;\n    price: number;\n    isCheckbox?: boolean;\n}\n\nconst PaymentCategoryCard = memo(function PaymentCategoryCard({\n    onClick,\n    name,\n    price,\n    isCheckbox = false\n}: PaymentCategoryCardProps) {\n    return (\n        <div\n            onClick={onClick}\n            className=\"ui-group ui-cursor-pointer ui-rounded-xl ui-border ui-flex-1 ui-justify-between ui-h-full ui-transition-all ui-duration-200 ui-overflow-hidden ui-border-gray-200 hover:ui-border-gray-300 ui-bg-white\"\n        >\n            <div className=\"ui-flex-1 ui-h-full ui-flex ui-flex-col\">\n                <div\n                    className={cn(\n                        \"ui-flex ui-justify-between ui-items-center ui-p-3 ui-pb-0\"\n                    )}\n                >\n                    <div className=\"ui-flex ui-items-center ui-gap-2\">\n                        <span className=\"ui-font-medium ui-text-gray-900\">{name}</span>\n                    </div>\n\n                    <div className={cn(\n                        \"ui-w-4 ui-h-4 ui-border ui-flex ui-items-center ui-justify-center ui-border-gray-300\",\n                        isCheckbox ? \"ui-rounded\" : \"ui-rounded-full\"\n                    )}>\n                        <div className={cn(\n                            \"ui-w-full ui-h-full ui-border ui-border-gray-200\",\n                            isCheckbox ? \"ui-rounded\" : \"ui-rounded-full\"\n                        )} />\n                    </div>\n                </div>\n\n                <div\n                    className={cn(\n                        \"ui-flex-1 ui-p-3 ui-pt-0 ui-space-y-3 ui-bg-white\"\n                    )}\n                >\n                    <span className=\"ui-text-md ui-font-bold ui-text-gray-900\">\n                        PKR {price.toLocaleString()}\n                    </span>\n                </div>\n            </div>\n        </div>\n    );\n});\n\n\ninterface PaymentPreviewProps {\n    categories: { id: string; name: string; price: number }[];\n    isCheckbox?: boolean;\n}\n\nconst PaymentPreview = ({ categories, isCheckbox }: PaymentPreviewProps) => {\n    return (\n        <div className={`ui-grid sm:ui-grid-cols-2 ui-gap-3`}>\n            {categories.map((category, index) => (\n                <PaymentCategoryCard\n                    key={category.id || index}\n                    onClick={() => { }}\n                    name={category.name}\n                    price={category.price}\n                    isCheckbox={isCheckbox}\n                />\n            ))}\n            {categories.length === 0 && (\n                <div className=\"ui-col-span-2 ui-text-center ui-text-gray-400 ui-py-8 ui-border-2 ui-border-dashed ui-border-gray-200 ui-rounded-lg\">\n                    No payment categories defined\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default memo(PaymentPreview);\n"],"names":["PaymentCategoryCard","jsx","jsxs"],"mappings":";;;AAUA,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACjB,GAA6B;AACzB,SACIC,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MAEV,UAAAC,kCAAAA,KAAC,OAAA,EAAI,WAAU,2CACX,UAAA;AAAA,QAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,YAAA;AAAA,YAGJ,UAAA;AAAA,cAAAD,kCAAAA,IAAC,OAAA,EAAI,WAAU,oCACX,UAAAA,kCAAAA,IAAC,UAAK,WAAU,mCAAmC,gBAAK,EAAA,CAC5D;AAAA,cAEAA,sCAAC,SAAI,WAAW;AAAA,gBACZ;AAAA,gBACA,aAAa,eAAe;AAAA,cAAA,GAE5B,UAAAA,kCAAAA,IAAC,OAAA,EAAI,WAAW;AAAA,gBACZ;AAAA,gBACA,aAAa,eAAe;AAAA,cAAA,GAC7B,EAAA,CACP;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,YAAA;AAAA,YAGJ,UAAAC,kCAAAA,KAAC,QAAA,EAAK,WAAU,4CAA2C,UAAA;AAAA,cAAA;AAAA,cAClD,MAAM,eAAA;AAAA,YAAe,EAAA,CAC9B;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAQD,MAAM,iBAAiB,CAAC,EAAE,YAAY,iBAAsC;AACxE,SACIA,kCAAAA,KAAC,OAAA,EAAI,WAAW,sCACX,UAAA;AAAA,IAAA,WAAW,IAAI,CAAC,UAAU,UACvBD,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEG,SAAS,MAAM;AAAA,QAAE;AAAA,QACjB,MAAM,SAAS;AAAA,QACf,OAAO,SAAS;AAAA,QAChB;AAAA,MAAA;AAAA,MAJK,SAAS,MAAM;AAAA,IAAA,CAM3B;AAAA,IACA,WAAW,WAAW,2CAClB,OAAA,EAAI,WAAU,uHAAsH,UAAA,gCAAA,CAErI;AAAA,EAAA,GAER;AAER;AAEA,MAAA,mBAAe,KAAK,cAAc;"}
+{"version":3,"file":"PaymentPreview.js","sources":["../../../src/components/FormBuilder/PaymentPreview.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\r\nimport React, { memo } from \"react\";\r\n\r\ninterface PaymentCategoryCardProps {\r\n    onClick: () => void;\r\n    name: string;\r\n    price: number;\r\n    isCheckbox?: boolean;\r\n}\r\n\r\nconst PaymentCategoryCard = memo(function PaymentCategoryCard({\r\n    onClick,\r\n    name,\r\n    price,\r\n    isCheckbox = false\r\n}: PaymentCategoryCardProps) {\r\n    return (\r\n        <div\r\n            onClick={onClick}\r\n            className=\"group cursor-pointer rounded-xl border flex-1 justify-between h-full transition-all duration-200 overflow-hidden border-gray-200 hover:border-gray-300 bg-white\"\r\n        >\r\n            <div className=\"flex-1 h-full flex flex-col\">\r\n                <div\r\n                    className={cn(\r\n                        \"flex justify-between items-center p-3 pb-0\"\r\n                    )}\r\n                >\r\n                    <div className=\"flex items-center gap-2\">\r\n                        <span className=\"font-medium text-gray-900\">{name}</span>\r\n                    </div>\r\n\r\n                    <div className={cn(\r\n                        \"w-4 h-4 border flex items-center justify-center border-gray-300\",\r\n                        isCheckbox ? \"rounded\" : \"rounded-full\"\r\n                    )}>\r\n                        <div className={cn(\r\n                            \"w-full h-full border border-gray-200\",\r\n                            isCheckbox ? \"rounded\" : \"rounded-full\"\r\n                        )} />\r\n                    </div>\r\n                </div>\r\n\r\n                <div\r\n                    className={cn(\r\n                        \"flex-1 p-3 pt-0 space-y-3 bg-white\"\r\n                    )}\r\n                >\r\n                    <span className=\"text-md font-bold text-gray-900\">\r\n                        PKR {price.toLocaleString()}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    );\r\n});\r\n\r\n\r\ninterface PaymentPreviewProps {\r\n    categories: { id: string; name: string; price: number }[];\r\n    isCheckbox?: boolean;\r\n}\r\n\r\nconst PaymentPreview = ({ categories, isCheckbox }: PaymentPreviewProps) => {\r\n    return (\r\n        <div className={`grid sm:grid-cols-2 gap-3`}>\r\n            {categories.map((category, index) => (\r\n                <PaymentCategoryCard\r\n                    key={category.id || index}\r\n                    onClick={() => { }}\r\n                    name={category.name}\r\n                    price={category.price}\r\n                    isCheckbox={isCheckbox}\r\n                />\r\n            ))}\r\n            {categories.length === 0 && (\r\n                <div className=\"col-span-2 text-center text-gray-400 py-8 border-2 border-dashed border-gray-200 rounded-lg\">\r\n                    No payment categories defined\r\n                </div>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default memo(PaymentPreview);\r\n"],"names":["PaymentCategoryCard"],"mappings":";;;AAUA,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACjB,GAA6B;AACzB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,qBAAC,OAAA,EAAI,WAAU,+BACX,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,YAAA;AAAA,YAGJ,UAAA;AAAA,cAAA,oBAAC,OAAA,EAAI,WAAU,2BACX,UAAA,oBAAC,UAAK,WAAU,6BAA6B,gBAAK,EAAA,CACtD;AAAA,cAEA,oBAAC,SAAI,WAAW;AAAA,gBACZ;AAAA,gBACA,aAAa,YAAY;AAAA,cAAA,GAEzB,UAAA,oBAAC,OAAA,EAAI,WAAW;AAAA,gBACZ;AAAA,gBACA,aAAa,YAAY;AAAA,cAAA,GAC1B,EAAA,CACP;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,YAAA;AAAA,YAGJ,UAAA,qBAAC,QAAA,EAAK,WAAU,mCAAkC,UAAA;AAAA,cAAA;AAAA,cACzC,MAAM,eAAA;AAAA,YAAe,EAAA,CAC9B;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAQD,MAAM,iBAAiB,CAAC,EAAE,YAAY,iBAAsC;AACxE,SACI,qBAAC,OAAA,EAAI,WAAW,6BACX,UAAA;AAAA,IAAA,WAAW,IAAI,CAAC,UAAU,UACvB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,SAAS,MAAM;AAAA,QAAE;AAAA,QACjB,MAAM,SAAS;AAAA,QACf,OAAO,SAAS;AAAA,QAChB;AAAA,MAAA;AAAA,MAJK,SAAS,MAAM;AAAA,IAAA,CAM3B;AAAA,IACA,WAAW,WAAW,yBAClB,OAAA,EAAI,WAAU,+FAA8F,UAAA,gCAAA,CAE7G;AAAA,EAAA,GAER;AAER;AAEA,MAAA,mBAAe,KAAK,cAAc;"}

package/dist/components/FormBuilder/PreviewInput.js

@@ -1,26 +1,15 @@
-import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useState } from "react";
-import "../../node_modules/imask/esm/index.js";
-import "../../node_modules/imask/esm/controls/input.js";
-import IMask from "../../node_modules/imask/esm/core/holder.js";
-import "../../node_modules/imask/esm/masked/factory.js";
-import "../../node_modules/imask/esm/controls/mask-element.js";
-import "../../node_modules/imask/esm/controls/html-input-mask-element.js";
-import "../../node_modules/imask/esm/controls/html-mask-element.js";
-import "../../node_modules/imask/esm/controls/html-contenteditable-mask-element.js";
-import "../../node_modules/imask/esm/controls/input-history.js";
-import IMaskInput from "../../node_modules/react-imask/esm/input.js";
-import "../../node_modules/react-imask/esm/mixin.js";
+import { IMaskInput, IMask } from "react-imask";
 import dayjs from "../../node_modules/dayjs/dayjs.min.js";
 import customParseFormat from "../../node_modules/dayjs/plugin/customParseFormat.js";
+import { Calendar } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
 import { cn } from "../../utils/cn.js";
-import { AnimatePresence } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
-import { motion } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-import Calendar from "../../node_modules/lucide-react/dist/esm/icons/calendar.js";
 dayjs.extend(customParseFormat);
 const PreviewInput = ({ type, placeholder, showHelper = true }) => {
   const [value, setValue] = useState("");
-  const commonClasses = "ui-w-full ui-rounded-md ui-border ui-border-gray-300 ui-py-2 ui-px-3 ui-text-sm ui-outline-none ui-bg-gray-50 ui-text-gray-500 ui-cursor-default focus:ui-border-primaryx-500 focus:ui-bg-white ui-transition-colors ui-duration-200";
+  const commonClasses = "w-full rounded-md border border-gray-300 py-2 px-3 text-sm outline-none bg-gray-50 text-gray-500 cursor-default focus:border-primaryx-500 focus:bg-white transition-colors duration-200";
   const getHelperText = () => {
     switch (type) {
       case "EMAIL":
@@ -53,7 +42,7 @@ const PreviewInput = ({ type, placeholder, showHelper = true }) => {
   };
   const renderInput = () => {
     if (type === "PHONE") {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-relative", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
         IMaskInput,
         {
           mask: "0300-0000000",
@@ -63,13 +52,13 @@ const PreviewInput = ({ type, placeholder, showHelper = true }) => {
           value,
           onAccept: (val) => setValue(val),
           placeholder: placeholder || "0300-1234567",
-          className: cn("ui-pointer-events-none", commonClasses),
+          className: cn("pointer-events-none", commonClasses),
           onWheel: (e) => e.preventDefault()
         }
       ) });
     }
     if (type === "CNIC") {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-relative", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
         IMaskInput,
         {
           mask: "00000-0000000-0",
@@ -79,14 +68,14 @@ const PreviewInput = ({ type, placeholder, showHelper = true }) => {
           value,
           onAccept: (val) => setValue(val),
           placeholder: placeholder || "35202-1234567-1",
-          className: cn("ui-pointer-events-none", commonClasses),
+          className: cn("pointer-events-none", commonClasses),
           onWheel: (e) => e.preventDefault()
         }
       ) });
     }
     if (type === "DATE") {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-relative", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-relative ui-w-full", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsx(
           IMaskInput,
           {
             mask: "d/m/Y",
@@ -114,17 +103,17 @@ const PreviewInput = ({ type, placeholder, showHelper = true }) => {
             value,
             onAccept: (val) => setValue(val),
             placeholder: placeholder || "DD/MM/YYYY",
-            className: `${commonClasses} ui-pr-10 ui-pointer-events-none`
+            className: `${commonClasses} pr-10 pointer-events-none`
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-absolute ui-right-3 ui-top-1/2 ui--translate-y-1/2 ui-text-gray-400", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { size: 16 }) })
+        /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", children: /* @__PURE__ */ jsx(Calendar, { size: 16 }) })
       ] }) });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsx(
       "input",
       {
         type: type === "EMAIL" && "email" || (type === "INPUT_INT" || type === "INPUT_FLOAT" || type == "TEAM_SIZE" ? "number" : "text"),
-        className: cn("ui-pointer-events-none", commonClasses),
+        className: cn("pointer-events-none", commonClasses),
         placeholder: placeholder || getDefaultPlaceholder(),
         value,
         onChange: (e) => setValue(e.target.value),
@@ -133,15 +122,15 @@ const PreviewInput = ({ type, placeholder, showHelper = true }) => {
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     renderInput(),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { children: showHelper && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: showHelper && /* @__PURE__ */ jsx(
       motion.div,
       {
         initial: { opacity: 0, y: -5 },
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -5 },
-        className: "ui-text-xs ui-text-gray-500 ui-mt-1 ui-ml-1",
+        className: "text-xs text-gray-500 mt-1 ml-1",
         children: getHelperText()
       }
     ) })

package/dist/components/FormBuilder/PreviewInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewInput.js","sources":["../../../src/components/FormBuilder/PreviewInput.tsx"],"sourcesContent":["import React, { memo, useState } from 'react';\nimport { IMaskInput, IMask } from 'react-imask';\nimport dayjs from \"dayjs\";\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { Calendar as CalendarIcon } from \"lucide-react\";\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { cn } from '../../utils/cn';\n\ndayjs.extend(customParseFormat);\n\ninterface PreviewInputProps {\n    type: string;\n    placeholder?: string;\n    required?: boolean;\n    showHelper?: boolean;\n}\n\nconst PreviewInput: React.FC<PreviewInputProps> = ({ type, placeholder, showHelper = true }) => {\n    const [value, setValue] = useState(\"\");\n\n    const commonClasses = \"ui-w-full ui-rounded-md ui-border ui-border-gray-300 ui-py-2 ui-px-3 ui-text-sm ui-outline-none ui-bg-gray-50 ui-text-gray-500 ui-cursor-default focus:ui-border-primaryx-500 focus:ui-bg-white ui-transition-colors ui-duration-200\";\n\n    const getHelperText = () => {\n        switch (type) {\n            case 'EMAIL':\n                return \"Format: example@example.com\";\n            case 'PHONE':\n                return \"Format: 0300-1234567\";\n            case 'CNIC':\n                return \"Format: 35202-1234567-1\";\n            case 'DATE':\n                return \"Format: DD/MM/YYYY\";\n            default:\n                return \"\";\n        }\n    };\n\n    const getDefaultPlaceholder = () => {\n        switch (type) {\n            case \"EMAIL\":\n                return \"test@gmail.com\";\n            case \"TEAM_SIZE\":\n                return \"Team Size\";\n            case \"NAME_ON_TICKET\":\n                return \"Name on ticket\"\n            case \"INPUT_INT\":\n            case \"INPUT_FLOAT\":\n            case \"INPUT_STR\":\n                return \"\"\n            default:\n                return \"\"\n        }\n    }\n\n    const renderInput = () => {\n        if (type === 'PHONE') {\n            return (\n                <div className=\"ui-relative\">\n                    <IMaskInput\n                        mask=\"0300-0000000\"\n                        definitions={{\n                            '0': /[0-9]/\n                        }}\n                        value={value}\n                        onAccept={(val: any) => setValue(val)}\n                        placeholder={placeholder || \"0300-1234567\"}\n                        className={cn(\"ui-pointer-events-none\", commonClasses)}\n                        onWheel={(e) => e.preventDefault()}\n                    />\n                </div>\n            );\n        }\n\n        if (type === 'CNIC') {\n            return (\n                <div className=\"ui-relative\">\n                    <IMaskInput\n                        mask=\"00000-0000000-0\"\n                        definitions={{\n                            '0': /[0-9]/\n                        }}\n                        value={value}\n                        onAccept={(val: any) => setValue(val)}\n                        placeholder={placeholder || \"35202-1234567-1\"}\n                        className={cn(\"ui-pointer-events-none\", commonClasses)}\n                        onWheel={(e) => e.preventDefault()}\n                    />\n                </div>\n            );\n        }\n\n        if (type === 'DATE') {\n            return (\n                <div className=\"ui-relative\">\n                    <div className=\"ui-relative ui-w-full\">\n                        <IMaskInput\n                            mask=\"d/m/Y\"\n                            onWheel={(e) => e.preventDefault()}\n                            blocks={{\n                                d: {\n                                    mask: IMask.MaskedRange,\n                                    from: 1,\n                                    to: 31,\n                                    maxLength: 2,\n                                },\n                                m: {\n                                    mask: IMask.MaskedRange,\n                                    from: 1,\n                                    to: 12,\n                                    maxLength: 2,\n                                },\n                                Y: {\n                                    mask: IMask.MaskedRange,\n                                    from: 1900,\n                                    to: 2999,\n                                    maxLength: 4,\n                                }\n                            }}\n                            value={value}\n                            onAccept={(val: any) => setValue(val)}\n                            placeholder={placeholder || \"DD/MM/YYYY\"}\n                            className={`${commonClasses} ui-pr-10 ui-pointer-events-none`}\n                        />\n                        <div className=\"ui-absolute ui-right-3 ui-top-1/2 ui--translate-y-1/2 ui-text-gray-400\">\n                            <CalendarIcon size={16} />\n                        </div>\n                    </div>\n                </div>\n            );\n        }\n\n        // Default for INPUT_STR, EMAIL, INPUT_INT, INPUT_FLOAT, etc.\n        return (\n            <input\n                type={(type === \"EMAIL\" && \"email\") || (type === 'INPUT_INT' || type === 'INPUT_FLOAT' || type == \"TEAM_SIZE\" ? 'number' : 'text')}\n                className={cn(\"ui-pointer-events-none\", commonClasses)}\n                placeholder={placeholder || getDefaultPlaceholder()}\n                value={value}\n                onChange={(e) => setValue(e.target.value)}\n                disabled={false}\n                onWheel={(e) => e.preventDefault()}\n            />\n        );\n    };\n\n    return (\n        <div className=\"ui-w-full\">\n            {renderInput()}\n            <AnimatePresence>\n                {showHelper && (\n                    <motion.div\n                        initial={{ opacity: 0, y: -5 }}\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: -5 }}\n                        className=\"ui-text-xs ui-text-gray-500 ui-mt-1 ui-ml-1\"\n                    >\n                        {getHelperText()}\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </div>\n    );\n};\n\nexport default memo(PreviewInput);\n"],"names":["jsx","jsxs","CalendarIcon"],"mappings":"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"}
+{"version":3,"file":"PreviewInput.js","sources":["../../../src/components/FormBuilder/PreviewInput.tsx"],"sourcesContent":["import React, { memo, useState } from 'react';\r\nimport { IMaskInput, IMask } from 'react-imask';\r\nimport dayjs from \"dayjs\";\r\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\r\nimport { Calendar as CalendarIcon } from \"lucide-react\";\r\nimport { motion, AnimatePresence } from 'framer-motion';\r\nimport { cn } from '../../utils/cn';\r\n\r\ndayjs.extend(customParseFormat);\r\n\r\ninterface PreviewInputProps {\r\n    type: string;\r\n    placeholder?: string;\r\n    required?: boolean;\r\n    showHelper?: boolean;\r\n}\r\n\r\nconst PreviewInput: React.FC<PreviewInputProps> = ({ type, placeholder, showHelper = true }) => {\r\n    const [value, setValue] = useState(\"\");\r\n\r\n    const commonClasses = \"w-full rounded-md border border-gray-300 py-2 px-3 text-sm outline-none bg-gray-50 text-gray-500 cursor-default focus:border-primaryx-500 focus:bg-white transition-colors duration-200\";\r\n\r\n    const getHelperText = () => {\r\n        switch (type) {\r\n            case 'EMAIL':\r\n                return \"Format: example@example.com\";\r\n            case 'PHONE':\r\n                return \"Format: 0300-1234567\";\r\n            case 'CNIC':\r\n                return \"Format: 35202-1234567-1\";\r\n            case 'DATE':\r\n                return \"Format: DD/MM/YYYY\";\r\n            default:\r\n                return \"\";\r\n        }\r\n    };\r\n\r\n    const getDefaultPlaceholder = () => {\r\n        switch (type) {\r\n            case \"EMAIL\":\r\n                return \"test@gmail.com\";\r\n            case \"TEAM_SIZE\":\r\n                return \"Team Size\";\r\n            case \"NAME_ON_TICKET\":\r\n                return \"Name on ticket\"\r\n            case \"INPUT_INT\":\r\n            case \"INPUT_FLOAT\":\r\n            case \"INPUT_STR\":\r\n                return \"\"\r\n            default:\r\n                return \"\"\r\n        }\r\n    }\r\n\r\n    const renderInput = () => {\r\n        if (type === 'PHONE') {\r\n            return (\r\n                <div className=\"relative\">\r\n                    <IMaskInput\r\n                        mask=\"0300-0000000\"\r\n                        definitions={{\r\n                            '0': /[0-9]/\r\n                        }}\r\n                        value={value}\r\n                        onAccept={(val: any) => setValue(val)}\r\n                        placeholder={placeholder || \"0300-1234567\"}\r\n                        className={cn(\"pointer-events-none\", commonClasses)}\r\n                        onWheel={(e) => e.preventDefault()}\r\n                    />\r\n                </div>\r\n            );\r\n        }\r\n\r\n        if (type === 'CNIC') {\r\n            return (\r\n                <div className=\"relative\">\r\n                    <IMaskInput\r\n                        mask=\"00000-0000000-0\"\r\n                        definitions={{\r\n                            '0': /[0-9]/\r\n                        }}\r\n                        value={value}\r\n                        onAccept={(val: any) => setValue(val)}\r\n                        placeholder={placeholder || \"35202-1234567-1\"}\r\n                        className={cn(\"pointer-events-none\", commonClasses)}\r\n                        onWheel={(e) => e.preventDefault()}\r\n                    />\r\n                </div>\r\n            );\r\n        }\r\n\r\n        if (type === 'DATE') {\r\n            return (\r\n                <div className=\"relative\">\r\n                    <div className=\"relative w-full\">\r\n                        <IMaskInput\r\n                            mask=\"d/m/Y\"\r\n                            onWheel={(e) => e.preventDefault()}\r\n                            blocks={{\r\n                                d: {\r\n                                    mask: IMask.MaskedRange,\r\n                                    from: 1,\r\n                                    to: 31,\r\n                                    maxLength: 2,\r\n                                },\r\n                                m: {\r\n                                    mask: IMask.MaskedRange,\r\n                                    from: 1,\r\n                                    to: 12,\r\n                                    maxLength: 2,\r\n                                },\r\n                                Y: {\r\n                                    mask: IMask.MaskedRange,\r\n                                    from: 1900,\r\n                                    to: 2999,\r\n                                    maxLength: 4,\r\n                                }\r\n                            }}\r\n                            value={value}\r\n                            onAccept={(val: any) => setValue(val)}\r\n                            placeholder={placeholder || \"DD/MM/YYYY\"}\r\n                            className={`${commonClasses} pr-10 pointer-events-none`}\r\n                        />\r\n                        <div className=\"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400\">\r\n                            <CalendarIcon size={16} />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        // Default for INPUT_STR, EMAIL, INPUT_INT, INPUT_FLOAT, etc.\r\n        return (\r\n            <input\r\n                type={(type === \"EMAIL\" && \"email\") || (type === 'INPUT_INT' || type === 'INPUT_FLOAT' || type == \"TEAM_SIZE\" ? 'number' : 'text')}\r\n                className={cn(\"pointer-events-none\", commonClasses)}\r\n                placeholder={placeholder || getDefaultPlaceholder()}\r\n                value={value}\r\n                onChange={(e) => setValue(e.target.value)}\r\n                disabled={false}\r\n                onWheel={(e) => e.preventDefault()}\r\n            />\r\n        );\r\n    };\r\n\r\n    return (\r\n        <div className=\"w-full\">\r\n            {renderInput()}\r\n            <AnimatePresence>\r\n                {showHelper && (\r\n                    <motion.div\r\n                        initial={{ opacity: 0, y: -5 }}\r\n                        animate={{ opacity: 1, y: 0 }}\r\n                        exit={{ opacity: 0, y: -5 }}\r\n                        className=\"text-xs text-gray-500 mt-1 ml-1\"\r\n                    >\r\n                        {getHelperText()}\r\n                    </motion.div>\r\n                )}\r\n            </AnimatePresence>\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default memo(PreviewInput);\r\n"],"names":["CalendarIcon"],"mappings":"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"}

package/dist/components/FormBuilder/QuestionCard.js

@@ -1,17 +1,16 @@
-import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { memo } from "react";
 import QuestionEditor from "./QuestionEditor.js";
 import { FontAwesomeIcon } from "../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { FiUploadCloud } from "../../node_modules/react-icons/fi/index.js";
+import { FiUploadCloud } from "react-icons/fi";
 import { faGripHorizontal, faTrash } from "../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
-import { Button } from "../Button/Button.js";
+import { Info, Copy } from "lucide-react";
 import { cn } from "../../utils/cn.js";
 import RequiredToggle from "./RequiredToggle.js";
 import PreviewInput from "./PreviewInput.js";
 import PaymentPreview from "./PaymentPreview.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import Info from "../../node_modules/lucide-react/dist/esm/icons/info.js";
-import Copy from "../../node_modules/lucide-react/dist/esm/icons/copy.js";
+import { Button } from "../Button/Button.js";
 const QuestionCard = ({
   question,
   formId,
@@ -52,38 +51,38 @@ const QuestionCard = ({
     }
   };
   const isSystemQuestion = ["TEAM_SIZE", "NAME_ON_TICKET"].includes(question.kind);
-  const DragHandle = /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const DragHandle = /* @__PURE__ */ jsx(
     "div",
     {
       ...!disabled ? dragHandleProps : {},
       className: cn(
-        "ui-absolute ui-top-0 ui-left-1/2 ui--translate-x-1/2 ui---mt-3 ui-w-12 ui-h-6 ui-flex ui-items-center ui-justify-center ui-bg-white ui-border ui-border-gray-300 ui-rounded-full ui-shadow-sm ui-z-10 ui-transition-opacity",
-        "ui-opacity-0 group-hover:ui-opacity-100",
-        disabled ? "ui-cursor-not-allowed ui-text-gray-300" : "ui-cursor-move ui-text-gray-400 hover:ui-text-gray-600"
+        "absolute top-0 left-1/2 -translate-x-1/2 --mt-3 w-12 h-6 flex items-center justify-center bg-white border border-gray-300 rounded-full shadow-sm z-10 transition-opacity",
+        "opacity-0 group-hover:opacity-100",
+        disabled ? "cursor-not-allowed text-gray-300" : "cursor-move text-gray-400 hover:text-gray-600"
       ),
       title: disabled ? "" : "Drag to move",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faGripHorizontal, className: "ui-transform ui-rotate-90" })
+      children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faGripHorizontal, className: "transform rotate-90" })
     }
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       onClick: () => !isOpen && onToggle(),
       className: cn(
-        "ui-bg-white ui-border ui-border-gray-200 hover:ui-border-gray-300 ui-transition-all ui-duration-200 ui-relative ui-group ui-rounded-lg",
-        isOpen ? "ui-shadow-md" : "",
-        disabled ? "ui-opacity-70" : ""
+        "bg-white border border-gray-200 hover:border-gray-300 transition-all duration-200 relative group rounded-lg",
+        isOpen ? "shadow-md" : "",
+        disabled ? "opacity-70" : ""
       ),
       children: [
         !isLocked && !isSystemQuestion && !isNew && !isOpen && !disabled && DragHandle,
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-relative ui-w-full ui-rounded-lg ui-px-4", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(
-            "ui-absolute ui-top-0 ui-left-0 ui-w-1.5 ui-h-full ui-transition-all ui-overflow-hidden ui-rounded-l-full"
-          ), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(
-            "ui-w-full ui-h-full ui-bg-primaryx-600 ui-transition-all ui-duration-75 ui-ease-in-out",
-            isOpen ? "ui-translate-x-0" : "ui--translate-x-full"
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full rounded-lg px-4", children: [
+          /* @__PURE__ */ jsx("div", { className: cn(
+            "absolute top-0 left-0 w-1.5 h-full transition-all overflow-hidden rounded-l-full"
+          ), children: /* @__PURE__ */ jsx("div", { className: cn(
+            "w-full h-full bg-primaryx-600 transition-all duration-75 ease-in-out",
+            isOpen ? "translate-x-0" : "-translate-x-full"
           ) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-relative ui-w-full ui-py-4", children: isOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsx("div", { className: "relative w-full py-4", children: isOpen ? /* @__PURE__ */ jsx(
             QuestionEditor,
             {
               question,
@@ -100,87 +99,87 @@ const QuestionCard = ({
               showValidationErrors,
               storageService
             }
-          ) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-w-full ui-flex ui-justify-between ui-items-start", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-w-full ui-flex-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "ui-text-sm ui-font-medium ui-text-gray-900 ui-mb-1 ui-flex ui-items-center ui-gap-1", children: [
-                question.label || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ui-text-gray-400 ui-italic", children: "Untitled Question" }),
-                question.required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ui-text-red-500", children: "*" }),
-                ["TEAM_SIZE", "NAME_ON_TICKET"].includes(question.kind) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ) : /* @__PURE__ */ jsxs("div", { className: "w-full flex justify-between items-start", children: [
+            /* @__PURE__ */ jsxs("div", { className: "w-full flex-1", children: [
+              /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium text-gray-900 mb-1 flex items-center gap-1", children: [
+                question.label || /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "Untitled Question" }),
+                question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
+                ["TEAM_SIZE", "NAME_ON_TICKET"].includes(question.kind) && /* @__PURE__ */ jsx(
                   Tooltip,
                   {
                     placement: "bottom",
                     content: "This question is mandatory and cannot be removed.",
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "ui-h-4 ui-w-4 ui-text-gray-400" })
+                    children: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4 text-gray-400" })
                   }
                 )
               ] }),
-              ["INPUT_STR", "INPUT_INT", "INPUT_FLOAT", "EMAIL", "PHONE", "CNIC", "DATE", "NAME_ON_TICKET", "TEAM_SIZE"].includes(question.kind) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-mt-2 ui-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PreviewInput, { type: question.kind, placeholder: question.placeholder }) }),
-              ["PAYMENT", "PAYMENT_CHECKBOX"].includes(question == null ? void 0 : question.kind) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-mt-2 ui-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ["INPUT_STR", "INPUT_INT", "INPUT_FLOAT", "EMAIL", "PHONE", "CNIC", "DATE", "NAME_ON_TICKET", "TEAM_SIZE"].includes(question.kind) && /* @__PURE__ */ jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsx(PreviewInput, { type: question.kind, placeholder: question.placeholder }) }),
+              ["PAYMENT", "PAYMENT_CHECKBOX"].includes(question == null ? void 0 : question.kind) && /* @__PURE__ */ jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsx(
                 PaymentPreview,
                 {
                   categories: (question == null ? void 0 : question.Categories) || [],
                   isCheckbox: question.kind === "PAYMENT_CHECKBOX"
                 }
               ) }),
-              question.kind === "DISCOUNT" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-mt-2 ui-w-full", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-flex ui-gap-2 ui-mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-flex-1 ui-h-9 ui-rounded-md ui-border ui-border-gray-300 ui-bg-gray-50 ui-px-3 ui-flex ui-items-center ui-text-gray-400 ui-text-sm ui-italic ui-cursor-default", children: "Enter discount code" }) }),
-                question.applies_on && question.applies_on.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-text-[10px] ui-text-gray-400 ui-flex ui-items-center ui-gap-1.5 ui-px-1", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-w-1 ui-h-1 ui-rounded-full ui-bg-gray-300" }),
+              question.kind === "DISCOUNT" && /* @__PURE__ */ jsxs("div", { className: "mt-2 w-full", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex gap-2 mb-2", children: /* @__PURE__ */ jsx("div", { className: "flex-1 h-9 rounded-md border border-gray-300 bg-gray-50 px-3 flex items-center text-gray-400 text-sm italic cursor-default", children: "Enter discount code" }) }),
+                question.applies_on && question.applies_on.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-gray-400 flex items-center gap-1.5 px-1", children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-1 h-1 rounded-full bg-gray-300" }),
                   "Applies to ",
                   question.applies_on.length,
                   " item(s): ",
                   question.applies_on.join(", ")
                 ] })
               ] }),
-              (question.kind === "MULTIPLE_CHOICE" || question.kind === "CHECKBOX" || question.kind === "DROPDOWN") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-mt-2 ui-text-sm ui-text-gray-500", children: [
-                (_a = question.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-flex ui-items-center ui-gap-2 ui-mb-1", children: [
-                  question.kind === "MULTIPLE_CHOICE" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-w-4 ui-h-4 ui-rounded-full ui-border ui-border-gray-300" }),
-                  question.kind === "CHECKBOX" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-w-4 ui-h-4 ui-rounded ui-border ui-border-gray-300" }),
-                  question.kind === "DROPDOWN" && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ui-text-xs ui-text-gray-400", children: [
+              (question.kind === "MULTIPLE_CHOICE" || question.kind === "CHECKBOX" || question.kind === "DROPDOWN") && /* @__PURE__ */ jsxs("div", { className: "mt-2 text-sm text-gray-500", children: [
+                (_a = question.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                  question.kind === "MULTIPLE_CHOICE" && /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full border border-gray-300" }),
+                  question.kind === "CHECKBOX" && /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded border border-gray-300" }),
+                  question.kind === "DROPDOWN" && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-400", children: [
                     i + 1,
                     "."
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: opt.label })
+                  /* @__PURE__ */ jsx("span", { children: opt.label })
                 ] }, opt.id || i)),
-                (!question.options || question.options.length === 0) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ui-italic", children: "No options defined" })
+                (!question.options || question.options.length === 0) && /* @__PURE__ */ jsx("span", { className: "italic", children: "No options defined" })
               ] }),
-              question.kind === "FILE_UPLOAD" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-mt-2 ui-w-full ui-flex ui-flex-col ui-items-center ui-justify-center ui-p-6 ui-border-2 ui-border-dashed ui-border-gray-300 ui-rounded-lg ui-bg-gray-50", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-bg-gray-200 ui-p-2 ui-rounded-full ui-mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-bg-gray-300 ui-p-3 ui-rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiUploadCloud, { className: "ui-text-gray-700 ui-text-xl" }) }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-text-primaryx-500 ui-text-sm", children: [
+              question.kind === "FILE_UPLOAD" && /* @__PURE__ */ jsxs("div", { className: "mt-2 w-full flex flex-col items-center justify-center p-6 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50", children: [
+                /* @__PURE__ */ jsx("div", { className: "bg-gray-200 p-2 rounded-full mb-2", children: /* @__PURE__ */ jsx("div", { className: "bg-gray-300 p-3 rounded-full", children: /* @__PURE__ */ jsx(FiUploadCloud, { className: "text-gray-700 text-xl" }) }) }),
+                /* @__PURE__ */ jsxs("div", { className: "text-primaryx-500 text-sm", children: [
                   "Click to upload ",
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ui-text-gray-500 ui-font-normal", children: "or drag and drop" })
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-500 font-normal", children: "or drag and drop" })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-text-xs ui-text-gray-400 ui-mt-1", children: "JPG or JPEG (max. 5MB)" })
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-400 mt-1", children: "JPG or JPEG (max. 5MB)" })
               ] })
             ] }),
-            !isLocked && !isSystemQuestion && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-absolute ui-top-2 ui-right-0 ui-opacity-0 group-hover:ui-opacity-100 ui-transition-opacity ui-flex ui-gap-2 ui-flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            !isLocked && !isSystemQuestion && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-0 opacity-0 group-hover:opacity-100 transition-opacity flex gap-2 flex-shrink-0", children: /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: handleDelete,
-                className: "ui-w-8 ui-h-8 ui-text-gray-400 hover:ui-text-red-500 ui-rounded-full hover:ui-bg-red-50 ui-transition-colors ui-flex-shrink-0 ui-flex ui-justify-center ui-items-center",
+                className: "w-8 h-8 text-gray-400 hover:text-red-500 rounded-full hover:bg-red-50 transition-colors flex-shrink-0 flex justify-center items-center",
                 title: "Delete",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faTrash })
+                children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faTrash })
               }
             ) })
           ] }) }),
-          isOpen && !isLocked && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-border-t ui-border-gray-300 ui-py-2 ui-flex ui-items-center ui-justify-end ui-bg-gray-50 ui-rounded-b-lg ui-gap-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-flex ui-items-center sm:ui-flex-nowrap ui-flex-wrap ui-justify-end", children: [
-            !isSystemQuestion && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(disableDiscountOption && question.kind === "DISCOUNT") && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+          isOpen && !isLocked && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-300 py-2 flex items-center justify-end bg-gray-50 rounded-b-lg gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center sm:flex-nowrap flex-wrap justify-end", children: [
+            !isSystemQuestion && /* @__PURE__ */ jsx(Fragment, { children: !(disableDiscountOption && question.kind === "DISCOUNT") && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: handleDuplicate,
                   disabled: !isValid,
                   className: cn(
-                    "ui-p-2 ui-transition-colors ui-duration-200 ui-rounded-full",
-                    !isValid ? "ui-text-gray-300 ui-cursor-not-allowed" : "ui-text-gray-400 hover:ui-text-primaryx-600 hover:ui-bg-gray-100"
+                    "p-2 transition-colors duration-200 rounded-full",
+                    !isValid ? "text-gray-300 cursor-not-allowed" : "text-gray-400 hover:text-primaryx-600 hover:bg-gray-100"
                   ),
                   title: !isValid ? "Fix errors to duplicate" : "Duplicate",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "ui-w-4 ui-h-4" })
+                  children: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" })
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-h-6 ui-w-px ui-bg-gray-300 ui-mx-2" })
+              /* @__PURE__ */ jsx("div", { className: "h-6 w-px bg-gray-300 mx-2" })
             ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-flex ui-items-center ui-pb-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsx("div", { className: "flex items-center pb-1", children: /* @__PURE__ */ jsx(
               RequiredToggle,
               {
                 checked: question.required,
@@ -189,14 +188,14 @@ const QuestionCard = ({
                 disabled: isSystemQuestion
               }
             ) }),
-            (question.kind === "PAYMENT" || question.kind === "PAYMENT_CHECKBOX") && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-hidden sm:ui-block ui-h-6 ui-w-px ui-bg-gray-300 ui-mx-2" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-flex ui-items-center ui-pb-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            (question.kind === "PAYMENT" || question.kind === "PAYMENT_CHECKBOX") && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "hidden sm:block h-6 w-px bg-gray-300 mx-2" }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center pb-1", children: /* @__PURE__ */ jsx(
                 Tooltip,
                 {
                   placement: "top",
                   content: question.Categories && question.Categories.length > 1 ? "Enable this to allow users to select multiple options." : "Add more than one category to enable multiple selections.",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  children: /* @__PURE__ */ jsx(
                     RequiredToggle,
                     {
                       label: "Multiple Selections",
@@ -209,9 +208,9 @@ const QuestionCard = ({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ui-hidden sm:ui-block ui-h-6 ui-w-px ui-bg-gray-300 ui-mx-2" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ui-w-full sm:ui-w-fit ui-flex ui-items-center ui-justify-end ui-gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsx("div", { className: "hidden sm:block h-6 w-px bg-gray-300 mx-2" }),
+            /* @__PURE__ */ jsxs("div", { className: "w-full sm:w-fit flex items-center justify-end gap-2", children: [
+              /* @__PURE__ */ jsx(
                 Button,
                 {
                   type: "button",
@@ -221,11 +220,11 @@ const QuestionCard = ({
                   },
                   variant: "outline",
                   size: "sm",
-                  className: "ui-min-w-[80px]",
+                  className: "min-w-[80px]",
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsx(
                 Button,
                 {
                   type: "button",
@@ -235,7 +234,7 @@ const QuestionCard = ({
                   },
                   variant: "default",
                   size: "sm",
-                  className: "ui-min-w-[80px]",
+                  className: "min-w-[80px]",
                   children: isNew ? "Add" : "Save"
                 }
               )

package/dist/components/FormBuilder/QuestionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionCard.js","sources":["../../../src/components/FormBuilder/QuestionCard.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { QuestionDraft } from \"./types\";\nimport QuestionEditor from './QuestionEditor';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { FiUploadCloud } from \"react-icons/fi\";\nimport { faGripHorizontal, faTrash } from '@fortawesome/free-solid-svg-icons';\nimport { Copy } from 'lucide-react';\nimport { Button } from '../Button';\nimport { cn } from '../../utils/cn';\nimport RequiredToggle from './RequiredToggle';\nimport PreviewInput from './PreviewInput';\nimport PaymentPreview from './PaymentPreview';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { Info } from 'lucide-react';\n\ninterface QuestionCardProps {\n    question: QuestionDraft;\n    formId: string;\n    eventId: string;\n    userUid?: string;\n    isLocked: boolean;\n    isOpen: boolean;\n    onToggle: () => void;\n    dragHandleProps?: React.HTMLAttributes<any>;\n    onDelete?: (questionId: string) => void;\n    onUpdate: (questionId: string, updates: Partial<QuestionDraft>) => void;\n    onSave?: (questionId: string) => void;\n    onDuplicate?: (questionId: string) => void;\n    onCancel?: () => void;\n    isDirty?: boolean;\n    isSaving?: boolean;\n    isNew?: boolean;\n    isValid?: boolean;\n    disabled?: boolean;\n    errorMessage?: string;\n    participationType?: string;\n    disableDiscountOption?: boolean;\n    showValidationErrors?: boolean;\n    scope?: \"INDIVIDUAL\" | \"TEAM\";\n    storageService?: {\n        uploadFile: (path: string, file: File) => Promise<void>;\n        downloadFile: (path: string) => Promise<Blob>;\n    };\n}\n\nconst QuestionCard: React.FC<QuestionCardProps> = ({\n    question,\n    formId,\n    eventId,\n    userUid,\n    isLocked,\n    isOpen,\n    onToggle,\n    dragHandleProps,\n    onDelete,\n    onUpdate,\n    onSave,\n    onDuplicate,\n    onCancel,\n    isDirty = false,\n    isSaving = false,\n    isNew = false,\n    isValid = true,\n    disabled = false,\n    errorMessage,\n    scope,\n    participationType,\n    disableDiscountOption,\n    showValidationErrors,\n    storageService\n}) => {\n\n    const handleDelete = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        if (onDelete) {\n            onDelete(question.id);\n        }\n    };\n\n    const handleDuplicate = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        if (onDuplicate) {\n            onDuplicate(question.id);\n        }\n    };\n\n    const isSystemQuestion = ['TEAM_SIZE', 'NAME_ON_TICKET'].includes(question.kind);\n\n    const DragHandle = (\n        <div\n            {...(!disabled ? dragHandleProps : {})}\n            className={cn(\n                \"ui-absolute ui-top-0 ui-left-1/2 ui--translate-x-1/2 ui---mt-3 ui-w-12 ui-h-6 ui-flex ui-items-center ui-justify-center ui-bg-white ui-border ui-border-gray-300 ui-rounded-full ui-shadow-sm ui-z-10 ui-transition-opacity\",\n                \"ui-opacity-0 group-hover:ui-opacity-100\",\n                disabled ? \"ui-cursor-not-allowed ui-text-gray-300\" : \"ui-cursor-move ui-text-gray-400 hover:ui-text-gray-600\"\n            )}\n            title={disabled ? \"\" : \"Drag to move\"}\n        >\n            <FontAwesomeIcon icon={faGripHorizontal} className=\"ui-transform ui-rotate-90\" />\n        </div>\n    );\n\n    return (\n        <div\n            onClick={() => !isOpen && onToggle()}\n            className={cn(\n                \"ui-bg-white ui-border ui-border-gray-200 hover:ui-border-gray-300 ui-transition-all ui-duration-200 ui-relative ui-group ui-rounded-lg\",\n                isOpen ? \"ui-shadow-md\" : \"\",\n                disabled ? \"ui-opacity-70\" : \"\" \n            )}\n        >\n            {/* Drag Handle - Only show when not editing any question */}\n            {(!isLocked && !isSystemQuestion && !isNew && !isOpen && !disabled) && (\n                DragHandle\n            )}\n\n            <div className=\"ui-relative ui-w-full ui-rounded-lg ui-px-4\">\n                <div className={cn(\n                    \"ui-absolute ui-top-0 ui-left-0 ui-w-1.5 ui-h-full ui-transition-all ui-overflow-hidden ui-rounded-l-full\",\n                )}>\n                    <div className={cn(\n                        \"ui-w-full ui-h-full ui-bg-primaryx-600 ui-transition-all ui-duration-75 ui-ease-in-out\",\n                        isOpen ? 'ui-translate-x-0' : 'ui--translate-x-full'\n                    )} />\n                </div>\n\n                <div className=\"ui-relative ui-w-full ui-py-4\">\n                    {isOpen ? (\n                        <QuestionEditor\n                            question={question}\n                            formId={formId}\n                            eventId={eventId}\n                            userUid={userUid}\n                            onClose={onToggle}\n                            onUpdate={onUpdate}\n                            errorMessage={errorMessage}\n                            scope={scope}\n                            participationType={participationType}\n                            isNew={isNew}\n                            disableDiscountOption={disableDiscountOption}\n                            showValidationErrors={showValidationErrors}\n                            storageService={storageService}\n                        />\n                    ) : (\n                        <div className=\"ui-w-full ui-flex ui-justify-between ui-items-start\">\n                            {/* View Mode */}\n                            <div className=\"ui-w-full ui-flex-1\">\n                                <h3 className=\"ui-text-sm ui-font-medium ui-text-gray-900 ui-mb-1 ui-flex ui-items-center ui-gap-1\">\n                                    {question.label || <span className=\"ui-text-gray-400 ui-italic\">Untitled Question</span>}\n                                    {question.required && <span className=\"ui-text-red-500\">*</span>}\n                                    {\n                                        [\"TEAM_SIZE\", \"NAME_ON_TICKET\"].includes(question.kind) && (\n                                            <Tooltip\n                                                placement=\"bottom\"\n                                                content=\"This question is mandatory and cannot be removed.\"\n                                            >\n                                                <Info className=\"ui-h-4 ui-w-4 ui-text-gray-400\" />\n                                            </Tooltip>\n                                        )\n                                    }\n                                </h3>\n                                {['INPUT_STR', 'INPUT_INT', 'INPUT_FLOAT', 'EMAIL', 'PHONE', 'CNIC', 'DATE', 'NAME_ON_TICKET', 'TEAM_SIZE'].includes(question.kind) && (\n                                    <div className=\"ui-mt-2 ui-w-full\">\n                                        <PreviewInput type={question.kind} placeholder={question.placeholder} />\n                                    </div>\n                                )}\n                                {['PAYMENT', 'PAYMENT_CHECKBOX'].includes(question?.kind) && (\n                                    <div className=\"ui-mt-2 ui-w-full\">\n                                        <PaymentPreview\n                                            categories={question?.Categories || []}\n                                            isCheckbox={question.kind === 'PAYMENT_CHECKBOX'}\n                                        />\n                                    </div>\n                                )}\n                                {question.kind === 'DISCOUNT' && (\n                                    <div className=\"ui-mt-2 ui-w-full\">\n                                        <div className=\"ui-flex ui-gap-2 ui-mb-2\">\n                                            <div className=\"ui-flex-1 ui-h-9 ui-rounded-md ui-border ui-border-gray-300 ui-bg-gray-50 ui-px-3 ui-flex ui-items-center ui-text-gray-400 ui-text-sm ui-italic ui-cursor-default\">\n                                                Enter discount code\n                                            </div>\n                                        </div>\n                                        {question.applies_on && question.applies_on.length > 0 && (\n                                            <div className=\"ui-text-[10px] ui-text-gray-400 ui-flex ui-items-center ui-gap-1.5 ui-px-1\">\n                                                <div className=\"ui-w-1 ui-h-1 ui-rounded-full ui-bg-gray-300\" />\n                                                Applies to {question.applies_on.length} item(s): {question.applies_on.join(\", \")}\n                                            </div>\n                                        )}\n                                    </div>\n                                )}\n                                {(question.kind === 'MULTIPLE_CHOICE' || question.kind === 'CHECKBOX' || question.kind === 'DROPDOWN') && (\n                                    <div className=\"ui-mt-2 ui-text-sm ui-text-gray-500\">\n                                        {question.options?.map((opt, i) => (\n                                            <div key={opt.id || i} className=\"ui-flex ui-items-center ui-gap-2 ui-mb-1\">\n                                                {question.kind === 'MULTIPLE_CHOICE' && <div className=\"ui-w-4 ui-h-4 ui-rounded-full ui-border ui-border-gray-300\"></div>}\n                                                {question.kind === 'CHECKBOX' && <div className=\"ui-w-4 ui-h-4 ui-rounded ui-border ui-border-gray-300\"></div>}\n                                                {question.kind === 'DROPDOWN' && <span className=\"ui-text-xs ui-text-gray-400\">{i + 1}.</span>}\n                                                <span>{opt.label}</span>\n                                            </div>\n                                        ))}\n                                        {(!question.options || question.options.length === 0) && <span className=\"ui-italic\">No options defined</span>}\n                                    </div>\n                                )}\n                                {question.kind === 'FILE_UPLOAD' && (\n                                    <div className=\"ui-mt-2 ui-w-full ui-flex ui-flex-col ui-items-center ui-justify-center ui-p-6 ui-border-2 ui-border-dashed ui-border-gray-300 ui-rounded-lg ui-bg-gray-50\">\n                                        <div className=\"ui-bg-gray-200 ui-p-2 ui-rounded-full ui-mb-2\">\n                                            <div className=\"ui-bg-gray-300 ui-p-3 ui-rounded-full\">\n                                                <FiUploadCloud className=\"ui-text-gray-700 ui-text-xl\" />\n                                            </div>\n                                        </div>\n                                        <div className=\"ui-text-primaryx-500 ui-text-sm\">Click to upload <span className=\"ui-text-gray-500 ui-font-normal\">or drag and drop</span></div>\n                                        <div className=\"ui-text-xs ui-text-gray-400 ui-mt-1\">JPG or JPEG (max. 5MB)</div>\n                                    </div>\n                                )}\n                            </div>\n\n                            {!isLocked && !isSystemQuestion && (\n                                <div className=\"ui-absolute ui-top-2 ui-right-0 ui-opacity-0 group-hover:ui-opacity-100 ui-transition-opacity ui-flex ui-gap-2 ui-flex-shrink-0\">\n                                    <button\n                                        onClick={handleDelete}\n                                        className=\"ui-w-8 ui-h-8 ui-text-gray-400 hover:ui-text-red-500 ui-rounded-full hover:ui-bg-red-50 ui-transition-colors ui-flex-shrink-0 ui-flex ui-justify-center ui-items-center\"\n                                        title=\"Delete\"\n                                    >\n                                        <FontAwesomeIcon icon={faTrash} />\n                                    </button>\n                                </div>\n                            )}\n                        </div>\n                    )}\n                </div>\n\n                {/* Footer for expanded state */}\n                {isOpen && !isLocked && (\n                    <div className=\"ui-border-t ui-border-gray-300 ui-py-2 ui-flex ui-items-center ui-justify-end ui-bg-gray-50 ui-rounded-b-lg ui-gap-4\">\n                        <div className=\"ui-flex ui-items-center sm:ui-flex-nowrap ui-flex-wrap ui-justify-end\">\n                            {!isSystemQuestion && (\n                                <>\n                                    {!(disableDiscountOption && question.kind === 'DISCOUNT') && (\n                                        <>\n                                            <button\n                                                onClick={handleDuplicate}\n                                                disabled={!isValid}\n                                                className={cn(\n                                                    \"ui-p-2 ui-transition-colors ui-duration-200 ui-rounded-full\",\n                                                    !isValid ? \"ui-text-gray-300 ui-cursor-not-allowed\" : \"ui-text-gray-400 hover:ui-text-primaryx-600 hover:ui-bg-gray-100\"\n                                                )}\n                                                title={!isValid ? \"Fix errors to duplicate\" : \"Duplicate\"}\n                                            >\n                                                <Copy className=\"ui-w-4 ui-h-4\" />\n                                            </button>\n                                            <div className=\"ui-h-6 ui-w-px ui-bg-gray-300 ui-mx-2\"></div>\n                                        </>\n                                    )}\n                                </>\n                            )}\n\n                            <div className=\"ui-flex ui-items-center ui-pb-1\">\n                                <RequiredToggle\n                                    checked={question.required}\n                                    onChange={(checked) => onUpdate(question.id, { required: checked })}\n                                    id={`req-${question.id}`}\n                                    disabled={isSystemQuestion}\n                                />\n                            </div>\n\n                            {(question.kind === 'PAYMENT' || question.kind === 'PAYMENT_CHECKBOX') && (\n                                <>\n                                    <div className=\"ui-hidden sm:ui-block ui-h-6 ui-w-px ui-bg-gray-300 ui-mx-2\"></div>\n                                    <div className=\"ui-flex ui-items-center ui-pb-1\">\n                                        <Tooltip\n                                            placement=\"top\"\n                                            content={question.Categories && question.Categories.length > 1 ? \"Enable this to allow users to select multiple options.\" : \"Add more than one category to enable multiple selections.\"}\n                                        >\n                                            <RequiredToggle\n                                                label=\"Multiple Selections\"\n                                                checked={question.kind === 'PAYMENT_CHECKBOX'}\n                                                onChange={(checked) => onUpdate(question.id, { kind: checked ? 'PAYMENT_CHECKBOX' : 'PAYMENT' })}\n                                                id={`multiple-${question.id}`}\n                                                disabled={!question.Categories || question.Categories.length <= 1}\n                                            />\n                                        </Tooltip>\n                                    </div>\n                                </>\n                            )}\n\n                            <div className=\"ui-hidden sm:ui-block ui-h-6 ui-w-px ui-bg-gray-300 ui-mx-2\"></div>\n\n                            <div className=\"ui-w-full sm:ui-w-fit ui-flex ui-items-center ui-justify-end ui-gap-2\">\n                                <Button\n                                    type=\"button\"\n                                    onClick={(e) => { e.stopPropagation(); onCancel?.(); }}\n                                    variant=\"outline\"\n                                    size=\"sm\"\n                                    className=\"ui-min-w-[80px]\"\n                                >\n                                    Cancel\n                                </Button>\n                                <Button\n                                    type=\"button\"\n                                    onClick={(e) => { e.stopPropagation(); onSave?.(question.id); }}\n                                    variant=\"default\"\n                                    size=\"sm\"\n                                    className=\"ui-min-w-[80px]\"\n                                >\n                                    {isNew ? \"Add\" : \"Save\"}\n                                </Button>\n                            </div>\n                        </div>\n\n                    </div>\n                )}\n            </div>\n        </div >\n    );\n};\n\nexport default memo(QuestionCard);\n"],"names":["jsx","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"QuestionCard.js","sources":["../../../src/components/FormBuilder/QuestionCard.tsx"],"sourcesContent":["import React, { memo } from 'react';\r\nimport { QuestionDraft } from \"./types\";\r\nimport QuestionEditor from './QuestionEditor';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { FiUploadCloud } from \"react-icons/fi\";\r\nimport { faGripHorizontal, faTrash } from '@fortawesome/free-solid-svg-icons';\r\nimport { Copy } from 'lucide-react';\r\nimport { Button } from '../Button';\r\nimport { cn } from '../../utils/cn';\r\nimport RequiredToggle from './RequiredToggle';\r\nimport PreviewInput from './PreviewInput';\r\nimport PaymentPreview from './PaymentPreview';\r\nimport { Tooltip } from '../Tooltip/Tooltip';\r\nimport { Info } from 'lucide-react';\r\n\r\ninterface QuestionCardProps {\r\n    question: QuestionDraft;\r\n    formId: string;\r\n    eventId: string;\r\n    userUid?: string;\r\n    isLocked: boolean;\r\n    isOpen: boolean;\r\n    onToggle: () => void;\r\n    dragHandleProps?: React.HTMLAttributes<any>;\r\n    onDelete?: (questionId: string) => void;\r\n    onUpdate: (questionId: string, updates: Partial<QuestionDraft>) => void;\r\n    onSave?: (questionId: string) => void;\r\n    onDuplicate?: (questionId: string) => void;\r\n    onCancel?: () => void;\r\n    isDirty?: boolean;\r\n    isSaving?: boolean;\r\n    isNew?: boolean;\r\n    isValid?: boolean;\r\n    disabled?: boolean;\r\n    errorMessage?: string;\r\n    participationType?: string;\r\n    disableDiscountOption?: boolean;\r\n    showValidationErrors?: boolean;\r\n    scope?: \"INDIVIDUAL\" | \"TEAM\";\r\n    storageService?: {\r\n        uploadFile: (path: string, file: File) => Promise<void>;\r\n        downloadFile: (path: string) => Promise<Blob>;\r\n    };\r\n}\r\n\r\nconst QuestionCard: React.FC<QuestionCardProps> = ({\r\n    question,\r\n    formId,\r\n    eventId,\r\n    userUid,\r\n    isLocked,\r\n    isOpen,\r\n    onToggle,\r\n    dragHandleProps,\r\n    onDelete,\r\n    onUpdate,\r\n    onSave,\r\n    onDuplicate,\r\n    onCancel,\r\n    isDirty = false,\r\n    isSaving = false,\r\n    isNew = false,\r\n    isValid = true,\r\n    disabled = false,\r\n    errorMessage,\r\n    scope,\r\n    participationType,\r\n    disableDiscountOption,\r\n    showValidationErrors,\r\n    storageService\r\n}) => {\r\n\r\n    const handleDelete = (e: React.MouseEvent) => {\r\n        e.stopPropagation();\r\n        if (onDelete) {\r\n            onDelete(question.id);\r\n        }\r\n    };\r\n\r\n    const handleDuplicate = (e: React.MouseEvent) => {\r\n        e.stopPropagation();\r\n        if (onDuplicate) {\r\n            onDuplicate(question.id);\r\n        }\r\n    };\r\n\r\n    const isSystemQuestion = ['TEAM_SIZE', 'NAME_ON_TICKET'].includes(question.kind);\r\n\r\n    const DragHandle = (\r\n        <div\r\n            {...(!disabled ? dragHandleProps : {})}\r\n            className={cn(\r\n                \"absolute top-0 left-1/2 -translate-x-1/2 --mt-3 w-12 h-6 flex items-center justify-center bg-white border border-gray-300 rounded-full shadow-sm z-10 transition-opacity\",\r\n                \"opacity-0 group-hover:opacity-100\",\r\n                disabled ? \"cursor-not-allowed text-gray-300\" : \"cursor-move text-gray-400 hover:text-gray-600\"\r\n            )}\r\n            title={disabled ? \"\" : \"Drag to move\"}\r\n        >\r\n            <FontAwesomeIcon icon={faGripHorizontal} className=\"transform rotate-90\" />\r\n        </div>\r\n    );\r\n\r\n    return (\r\n        <div\r\n            onClick={() => !isOpen && onToggle()}\r\n            className={cn(\r\n                \"bg-white border border-gray-200 hover:border-gray-300 transition-all duration-200 relative group rounded-lg\",\r\n                isOpen ? \"shadow-md\" : \"\",\r\n                disabled ? \"opacity-70\" : \"\" \r\n            )}\r\n        >\r\n            {/* Drag Handle - Only show when not editing any question */}\r\n            {(!isLocked && !isSystemQuestion && !isNew && !isOpen && !disabled) && (\r\n                DragHandle\r\n            )}\r\n\r\n            <div className=\"relative w-full rounded-lg px-4\">\r\n                <div className={cn(\r\n                    \"absolute top-0 left-0 w-1.5 h-full transition-all overflow-hidden rounded-l-full\",\r\n                )}>\r\n                    <div className={cn(\r\n                        \"w-full h-full bg-primaryx-600 transition-all duration-75 ease-in-out\",\r\n                        isOpen ? 'translate-x-0' : '-translate-x-full'\r\n                    )} />\r\n                </div>\r\n\r\n                <div className=\"relative w-full py-4\">\r\n                    {isOpen ? (\r\n                        <QuestionEditor\r\n                            question={question}\r\n                            formId={formId}\r\n                            eventId={eventId}\r\n                            userUid={userUid}\r\n                            onClose={onToggle}\r\n                            onUpdate={onUpdate}\r\n                            errorMessage={errorMessage}\r\n                            scope={scope}\r\n                            participationType={participationType}\r\n                            isNew={isNew}\r\n                            disableDiscountOption={disableDiscountOption}\r\n                            showValidationErrors={showValidationErrors}\r\n                            storageService={storageService}\r\n                        />\r\n                    ) : (\r\n                        <div className=\"w-full flex justify-between items-start\">\r\n                            {/* View Mode */}\r\n                            <div className=\"w-full flex-1\">\r\n                                <h3 className=\"text-sm font-medium text-gray-900 mb-1 flex items-center gap-1\">\r\n                                    {question.label || <span className=\"text-gray-400 italic\">Untitled Question</span>}\r\n                                    {question.required && <span className=\"text-red-500\">*</span>}\r\n                                    {\r\n                                        [\"TEAM_SIZE\", \"NAME_ON_TICKET\"].includes(question.kind) && (\r\n                                            <Tooltip\r\n                                                placement=\"bottom\"\r\n                                                content=\"This question is mandatory and cannot be removed.\"\r\n                                            >\r\n                                                <Info className=\"h-4 w-4 text-gray-400\" />\r\n                                            </Tooltip>\r\n                                        )\r\n                                    }\r\n                                </h3>\r\n                                {['INPUT_STR', 'INPUT_INT', 'INPUT_FLOAT', 'EMAIL', 'PHONE', 'CNIC', 'DATE', 'NAME_ON_TICKET', 'TEAM_SIZE'].includes(question.kind) && (\r\n                                    <div className=\"mt-2 w-full\">\r\n                                        <PreviewInput type={question.kind} placeholder={question.placeholder} />\r\n                                    </div>\r\n                                )}\r\n                                {['PAYMENT', 'PAYMENT_CHECKBOX'].includes(question?.kind) && (\r\n                                    <div className=\"mt-2 w-full\">\r\n                                        <PaymentPreview\r\n                                            categories={question?.Categories || []}\r\n                                            isCheckbox={question.kind === 'PAYMENT_CHECKBOX'}\r\n                                        />\r\n                                    </div>\r\n                                )}\r\n                                {question.kind === 'DISCOUNT' && (\r\n                                    <div className=\"mt-2 w-full\">\r\n                                        <div className=\"flex gap-2 mb-2\">\r\n                                            <div className=\"flex-1 h-9 rounded-md border border-gray-300 bg-gray-50 px-3 flex items-center text-gray-400 text-sm italic cursor-default\">\r\n                                                Enter discount code\r\n                                            </div>\r\n                                        </div>\r\n                                        {question.applies_on && question.applies_on.length > 0 && (\r\n                                            <div className=\"text-[10px] text-gray-400 flex items-center gap-1.5 px-1\">\r\n                                                <div className=\"w-1 h-1 rounded-full bg-gray-300\" />\r\n                                                Applies to {question.applies_on.length} item(s): {question.applies_on.join(\", \")}\r\n                                            </div>\r\n                                        )}\r\n                                    </div>\r\n                                )}\r\n                                {(question.kind === 'MULTIPLE_CHOICE' || question.kind === 'CHECKBOX' || question.kind === 'DROPDOWN') && (\r\n                                    <div className=\"mt-2 text-sm text-gray-500\">\r\n                                        {question.options?.map((opt, i) => (\r\n                                            <div key={opt.id || i} className=\"flex items-center gap-2 mb-1\">\r\n                                                {question.kind === 'MULTIPLE_CHOICE' && <div className=\"w-4 h-4 rounded-full border border-gray-300\"></div>}\r\n                                                {question.kind === 'CHECKBOX' && <div className=\"w-4 h-4 rounded border border-gray-300\"></div>}\r\n                                                {question.kind === 'DROPDOWN' && <span className=\"text-xs text-gray-400\">{i + 1}.</span>}\r\n                                                <span>{opt.label}</span>\r\n                                            </div>\r\n                                        ))}\r\n                                        {(!question.options || question.options.length === 0) && <span className=\"italic\">No options defined</span>}\r\n                                    </div>\r\n                                )}\r\n                                {question.kind === 'FILE_UPLOAD' && (\r\n                                    <div className=\"mt-2 w-full flex flex-col items-center justify-center p-6 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50\">\r\n                                        <div className=\"bg-gray-200 p-2 rounded-full mb-2\">\r\n                                            <div className=\"bg-gray-300 p-3 rounded-full\">\r\n                                                <FiUploadCloud className=\"text-gray-700 text-xl\" />\r\n                                            </div>\r\n                                        </div>\r\n                                        <div className=\"text-primaryx-500 text-sm\">Click to upload <span className=\"text-gray-500 font-normal\">or drag and drop</span></div>\r\n                                        <div className=\"text-xs text-gray-400 mt-1\">JPG or JPEG (max. 5MB)</div>\r\n                                    </div>\r\n                                )}\r\n                            </div>\r\n\r\n                            {!isLocked && !isSystemQuestion && (\r\n                                <div className=\"absolute top-2 right-0 opacity-0 group-hover:opacity-100 transition-opacity flex gap-2 flex-shrink-0\">\r\n                                    <button\r\n                                        onClick={handleDelete}\r\n                                        className=\"w-8 h-8 text-gray-400 hover:text-red-500 rounded-full hover:bg-red-50 transition-colors flex-shrink-0 flex justify-center items-center\"\r\n                                        title=\"Delete\"\r\n                                    >\r\n                                        <FontAwesomeIcon icon={faTrash} />\r\n                                    </button>\r\n                                </div>\r\n                            )}\r\n                        </div>\r\n                    )}\r\n                </div>\r\n\r\n                {/* Footer for expanded state */}\r\n                {isOpen && !isLocked && (\r\n                    <div className=\"border-t border-gray-300 py-2 flex items-center justify-end bg-gray-50 rounded-b-lg gap-4\">\r\n                        <div className=\"flex items-center sm:flex-nowrap flex-wrap justify-end\">\r\n                            {!isSystemQuestion && (\r\n                                <>\r\n                                    {!(disableDiscountOption && question.kind === 'DISCOUNT') && (\r\n                                        <>\r\n                                            <button\r\n                                                onClick={handleDuplicate}\r\n                                                disabled={!isValid}\r\n                                                className={cn(\r\n                                                    \"p-2 transition-colors duration-200 rounded-full\",\r\n                                                    !isValid ? \"text-gray-300 cursor-not-allowed\" : \"text-gray-400 hover:text-primaryx-600 hover:bg-gray-100\"\r\n                                                )}\r\n                                                title={!isValid ? \"Fix errors to duplicate\" : \"Duplicate\"}\r\n                                            >\r\n                                                <Copy className=\"w-4 h-4\" />\r\n                                            </button>\r\n                                            <div className=\"h-6 w-px bg-gray-300 mx-2\"></div>\r\n                                        </>\r\n                                    )}\r\n                                </>\r\n                            )}\r\n\r\n                            <div className=\"flex items-center pb-1\">\r\n                                <RequiredToggle\r\n                                    checked={question.required}\r\n                                    onChange={(checked) => onUpdate(question.id, { required: checked })}\r\n                                    id={`req-${question.id}`}\r\n                                    disabled={isSystemQuestion}\r\n                                />\r\n                            </div>\r\n\r\n                            {(question.kind === 'PAYMENT' || question.kind === 'PAYMENT_CHECKBOX') && (\r\n                                <>\r\n                                    <div className=\"hidden sm:block h-6 w-px bg-gray-300 mx-2\"></div>\r\n                                    <div className=\"flex items-center pb-1\">\r\n                                        <Tooltip\r\n                                            placement=\"top\"\r\n                                            content={question.Categories && question.Categories.length > 1 ? \"Enable this to allow users to select multiple options.\" : \"Add more than one category to enable multiple selections.\"}\r\n                                        >\r\n                                            <RequiredToggle\r\n                                                label=\"Multiple Selections\"\r\n                                                checked={question.kind === 'PAYMENT_CHECKBOX'}\r\n                                                onChange={(checked) => onUpdate(question.id, { kind: checked ? 'PAYMENT_CHECKBOX' : 'PAYMENT' })}\r\n                                                id={`multiple-${question.id}`}\r\n                                                disabled={!question.Categories || question.Categories.length <= 1}\r\n                                            />\r\n                                        </Tooltip>\r\n                                    </div>\r\n                                </>\r\n                            )}\r\n\r\n                            <div className=\"hidden sm:block h-6 w-px bg-gray-300 mx-2\"></div>\r\n\r\n                            <div className=\"w-full sm:w-fit flex items-center justify-end gap-2\">\r\n                                <Button\r\n                                    type=\"button\"\r\n                                    onClick={(e) => { e.stopPropagation(); onCancel?.(); }}\r\n                                    variant=\"outline\"\r\n                                    size=\"sm\"\r\n                                    className=\"min-w-[80px]\"\r\n                                >\r\n                                    Cancel\r\n                                </Button>\r\n                                <Button\r\n                                    type=\"button\"\r\n                                    onClick={(e) => { e.stopPropagation(); onSave?.(question.id); }}\r\n                                    variant=\"default\"\r\n                                    size=\"sm\"\r\n                                    className=\"min-w-[80px]\"\r\n                                >\r\n                                    {isNew ? \"Add\" : \"Save\"}\r\n                                </Button>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                )}\r\n            </div>\r\n        </div >\r\n    );\r\n};\r\n\r\nexport default memo(QuestionCard);\r\n"],"names":[],"mappings":"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"}