@lax-wp/design-system 0.13.47 → 0.13.49

package/dist/components/forms/checkbox/Checkbox.es.js

@@ -1,45 +1,45 @@
-import { jsx as e, jsxs as i, Fragment as x } from "react/jsx-runtime";
-import { Checkbox as S } from "antd";
+import { jsx as e, jsxs as i, Fragment as h } from "react/jsx-runtime";
+import { Checkbox as F } from "antd";
 import t from "../../../_virtual/index.es.js";
-import { AnimatePresence as A, motion as L } from "framer-motion";
-import { forwardRef as M } from "react";
-import { Typography as h } from "../../data-display/typography/Typography.es.js";
-const R = M(
+import { AnimatePresence as S, motion as A } from "framer-motion";
+import { forwardRef as L } from "react";
+import { Typography as p } from "../../data-display/typography/Typography.es.js";
+const M = L(
   ({
     id: a,
     label: l,
     checked: s,
-    isChecked: p,
-    onChange: y,
-    disabled: o = !1,
+    isChecked: g,
+    onChange: b,
+    disabled: c = !1,
     required: u = !1,
     message: n,
     messageType: r = "default",
-    wrapperClassName: b,
-    checkboxClassName: k,
-    labelClassName: C,
+    wrapperClassName: k,
+    checkboxClassName: y,
+    labelClassName: v,
     size: d = "medium",
-    variant: v = "default",
-    labelPosition: c = "right",
-    checkboxProps: w
-  }, N) => {
-    const j = s !== void 0 ? s : p || !1, z = () => {
+    variant: w = "default",
+    labelPosition: o = "right",
+    checkboxProps: C
+  }, z) => {
+    const N = s !== void 0 ? s : g || !1, _ = () => {
       switch (d) {
         case "small":
-          return "w-3 h-3";
+          return "[--checkbox-size:clamp(10px,0.625vw,12px)]";
         case "large":
-          return "w-5 h-5";
+          return "[--checkbox-size:clamp(18px,calc(8px_+_0.625vw),20px)]";
         default:
-          return "w-4 h-4";
+          return "[--checkbox-size:clamp(14px,calc(4px_+_0.625vw),16px)]";
       }
-    }, $ = () => {
+    }, j = () => {
       if (r === "error")
         return "text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600";
       if (r === "success")
         return "text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600";
       if (r === "info")
         return "text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600";
-      switch (v) {
+      switch (w) {
         case "outline":
           return "text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600";
         case "solid":
@@ -47,7 +47,7 @@ const R = M(
         default:
           return "text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600";
       }
-    }, E = () => r === "error" ? "text-red-500 dark:text-red-400" : r === "success" ? "text-green-500 dark:text-green-400" : r === "info" ? "text-blue-500 dark:text-blue-400" : "text-neutral-500 dark:text-neutral-400", F = () => {
+    }, $ = () => r === "error" ? "text-red-500 dark:text-red-400" : r === "success" ? "text-green-500 dark:text-green-400" : r === "info" ? "text-blue-500 dark:text-blue-400" : "text-neutral-500 dark:text-neutral-400", E = () => {
       switch (d) {
         case "small":
           return "extra-small";
@@ -57,67 +57,71 @@ const R = M(
           return "small";
       }
     }, m = /* @__PURE__ */ e(
-      S,
+      F,
       {
-        ...w,
-        ref: N,
+        ...C,
+        ref: z,
         id: a,
-        checked: j,
-        onChange: (g) => {
-          y(g.target.checked, g);
+        checked: N,
+        onChange: (f) => {
+          b(f.target.checked, f);
         },
-        disabled: o,
+        disabled: c,
         className: t(
           // Base styles
           "rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200",
-          // Size classes
-          z(),
+          // Size classes — the clamp() value set by getSizeClasses drives the
+          // antd wrapper and the visible .ant-checkbox-inner box (!important
+          // needed to beat antd's own token-based width/height)
+          _(),
+          "w-[var(--checkbox-size)] h-[var(--checkbox-size)]",
+          "[&_.ant-checkbox-inner]:!w-[var(--checkbox-size)] [&_.ant-checkbox-inner]:!h-[var(--checkbox-size)]",
           // Variant classes
-          $(),
+          j(),
           // Disabled styles
-          o && "opacity-50 cursor-not-allowed",
+          c && "opacity-50 cursor-not-allowed",
           // Custom classes
-          k
+          y
         ),
         "aria-required": u,
         "aria-invalid": n && r === "error" ? "true" : "false",
         "aria-describedby": n ? `${a}-message` : void 0
       }
-    ), f = l ? /* @__PURE__ */ e(
+    ), x = l ? /* @__PURE__ */ e(
       "label",
       {
         htmlFor: a,
         className: t(
           "font-medium cursor-pointer transition-colors duration-200",
-          o ? "text-neutral-400 dark:text-neutral-600 cursor-not-allowed" : "text-neutral-900 dark:text-neutral-100",
-          c === "right" ? "ml-2" : "mr-2",
-          C
+          c ? "text-neutral-400 dark:text-neutral-600 cursor-not-allowed" : "text-neutral-900 dark:text-neutral-100",
+          o === "right" ? "ml-2" : "mr-2",
+          v
         ),
-        children: /* @__PURE__ */ i(h, { variant: "medium", size: F(), appearance: "body", children: [
+        children: /* @__PURE__ */ i(p, { variant: "medium", size: E(), appearance: "body", children: [
           l,
           u && /* @__PURE__ */ e("span", { className: "text-red-500 ml-1", children: "*" })
         ] })
       }
     ) : null;
-    return /* @__PURE__ */ i("div", { className: t("flex flex-col", b), children: [
+    return /* @__PURE__ */ i("div", { className: t("flex flex-col", k), children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: t(
             "flex items-center",
-            c === "left" && "flex-row-reverse justify-end"
+            o === "left" && "flex-row-reverse justify-end"
           ),
-          children: c === "left" ? /* @__PURE__ */ i(x, { children: [
+          children: o === "left" ? /* @__PURE__ */ i(h, { children: [
             m,
-            f
-          ] }) : /* @__PURE__ */ i(x, { children: [
+            x
+          ] }) : /* @__PURE__ */ i(h, { children: [
             m,
-            f
+            x
           ] })
         }
       ),
-      /* @__PURE__ */ e(A, { children: n && /* @__PURE__ */ e(
-        L.div,
+      /* @__PURE__ */ e(S, { children: n && /* @__PURE__ */ e(
+        A.div,
         {
           initial: { opacity: 0, y: -10 },
           animate: { opacity: 1, y: 0 },
@@ -126,9 +130,9 @@ const R = M(
           id: `${a}-message`,
           role: r === "error" ? "alert" : void 0,
           children: /* @__PURE__ */ e(
-            h,
+            p,
             {
-              className: t("mt-1", E()),
+              className: t("mt-1", $()),
               appearance: "custom",
               size: "extra-small",
               variant: "medium",
@@ -140,8 +144,8 @@ const R = M(
     ] });
   }
 );
-R.displayName = "Checkbox";
+M.displayName = "Checkbox";
 export {
-  R as Checkbox
+  M as Checkbox
 };
 //# sourceMappingURL=Checkbox.es.js.map

package/dist/components/forms/checkbox/Checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.es.js","sources":["../../../../src/components/forms/checkbox/Checkbox.tsx"],"sourcesContent":["import { Checkbox as AntdCheckbox } from \"antd\";\nimport type { CheckboxChangeEvent, CheckboxProps, CheckboxRef } from \"antd\";\nimport cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\n\n/**\n * Props for the Checkbox component\n */\nexport interface CheckboxComponentProps {\n  /** Unique identifier for the checkbox */\n  id: string;\n  /** Label text to display next to the checkbox */\n  label?: string;\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Whether the checkbox is checked (alias for checked) */\n  isChecked?: boolean;\n  /** Callback function called when checkbox state changes */\n  onChange: (checked: boolean, event: CheckboxChangeEvent) => void;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Message to display below the checkbox */\n  message?: string;\n  /** Type of message to display */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassName?: string;\n  /** Additional CSS classes for the checkbox input */\n  checkboxClassName?: string;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Size variant for the checkbox */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Visual variant for the checkbox */\n  variant?: \"default\" | \"outline\" | \"solid\";\n  /** Whether to show the label on the left side */\n  labelPosition?: \"left\" | \"right\";\n  /** Additional props to pass to the Ant Design Checkbox */\n  checkboxProps?: Omit<\n    CheckboxProps,\n    \"checked\" | \"onChange\" | \"id\" | \"disabled\"\n  >;\n}\n\n/**\n * A highly customizable checkbox component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <Checkbox\n *   id=\"terms\"\n *   label=\"I agree to the terms and conditions\"\n *   checked={agreedToTerms}\n *   onChange={(checked) => setAgreedToTerms(checked)}\n *   required\n * />\n * ```\n */\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxComponentProps>(\n  (\n    {\n      id,\n      label,\n      checked,\n      isChecked,\n      onChange,\n      disabled = false,\n      required = false,\n      message,\n      messageType = \"default\",\n      wrapperClassName,\n      checkboxClassName,\n      labelClassName,\n      size = \"medium\",\n      variant = \"default\",\n      labelPosition = \"right\",\n      checkboxProps,\n    },\n    ref\n  ) => {\n    // Use checked prop, fallback to isChecked for backward compatibility\n    const isCheckboxChecked =\n      checked !== undefined ? checked : isChecked || false;\n\n    // Size-based styling\n    const getSizeClasses = (): string => {\n      switch (size) {\n        case \"small\":\n          return \"w-3 h-3\";\n        case \"large\":\n          return \"w-5 h-5\";\n        default:\n          return \"w-4 h-4\";\n      }\n    };\n\n    // Variant-based styling\n    const getVariantClasses = (): string => {\n      if (messageType === \"error\") {\n        return \"text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600\";\n      }\n      if (messageType === \"success\") {\n        return \"text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600\";\n      }\n      if (messageType === \"info\") {\n        return \"text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600\";\n      }\n\n      switch (variant) {\n        case \"outline\":\n          return \"text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600\";\n        case \"solid\":\n          return \"text-primary-600 bg-primary-50 border-primary-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-primary-900/20\";\n        default:\n          return \"text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600\";\n      }\n    };\n\n    // Message typography class\n    const getMessageTypographyClass = (): string => {\n      if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n      if (messageType === \"success\")\n        return \"text-green-500 dark:text-green-400\";\n      if (messageType === \"info\") return \"text-blue-500 dark:text-blue-400\";\n      return \"text-neutral-500 dark:text-neutral-400\";\n    };\n\n    // Label typography size based on checkbox size\n    const getLabelSize = (): \"extra-small\" | \"small\" | \"medium\" => {\n      switch (size) {\n        case \"small\":\n          return \"extra-small\";\n        case \"large\":\n          return \"medium\";\n        default:\n          return \"small\";\n      }\n    };\n\n    const handleChange = (e: CheckboxChangeEvent) => {\n      onChange(e.target.checked, e);\n    };\n\n    const checkboxElement = (\n      <AntdCheckbox\n        {...checkboxProps}\n        ref={ref}\n        id={id}\n        checked={isCheckboxChecked}\n        onChange={handleChange}\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200\",\n\n          // Size classes\n          getSizeClasses(),\n\n          // Variant classes\n          getVariantClasses(),\n\n          // Disabled styles\n          disabled && \"opacity-50 cursor-not-allowed\",\n\n          // Custom classes\n          checkboxClassName\n        )}\n        aria-required={required}\n        aria-invalid={message && messageType === \"error\" ? \"true\" : \"false\"}\n        aria-describedby={message ? `${id}-message` : undefined}\n      />\n    );\n\n    const labelElement = label ? (\n      <label\n        htmlFor={id}\n        className={cn(\n          \"font-medium cursor-pointer transition-colors duration-200\",\n          disabled\n            ? \"text-neutral-400 dark:text-neutral-600 cursor-not-allowed\"\n            : \"text-neutral-900 dark:text-neutral-100\",\n          labelPosition === \"right\" ? \"ml-2\" : \"mr-2\",\n          labelClassName\n        )}\n      >\n        <Typography variant=\"medium\" size={getLabelSize()} appearance=\"body\">\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </Typography>\n      </label>\n    ) : null;\n\n    return (\n      <div className={cn(\"flex flex-col\", wrapperClassName)}>\n        <div\n          className={cn(\n            \"flex items-center\",\n            labelPosition === \"left\" && \"flex-row-reverse justify-end\"\n          )}\n        >\n          {labelPosition === \"left\" ? (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          ) : (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          )}\n        </div>\n\n        {/* Message */}\n        <AnimatePresence>\n          {message && (\n            <motion.div\n              initial={{ opacity: 0, y: -10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -10 }}\n              transition={{ duration: 0.2 }}\n              id={`${id}-message`}\n              role={messageType === \"error\" ? \"alert\" : undefined}\n            >\n              <Typography\n                className={cn(\"mt-1\", getMessageTypographyClass())}\n                appearance=\"custom\"\n                size=\"extra-small\"\n                variant=\"medium\"\n              >\n                {message}\n              </Typography>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\n\n// Export type alias for backward compatibility\nexport type TCheckboxComponentProps = CheckboxComponentProps;\n"],"names":["Checkbox","forwardRef","id","label","checked","isChecked","onChange","disabled","required","message","messageType","wrapperClassName","checkboxClassName","labelClassName","size","variant","labelPosition","checkboxProps","ref","isCheckboxChecked","getSizeClasses","getVariantClasses","getMessageTypographyClass","getLabelSize","checkboxElement","jsx","AntdCheckbox","e","cn","labelElement","jsxs","Typography","Fragment","AnimatePresence","motion"],"mappings":"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"}
+{"version":3,"file":"Checkbox.es.js","sources":["../../../../src/components/forms/checkbox/Checkbox.tsx"],"sourcesContent":["import { Checkbox as AntdCheckbox } from \"antd\";\nimport type { CheckboxChangeEvent, CheckboxProps, CheckboxRef } from \"antd\";\nimport cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\n\n/**\n * Props for the Checkbox component\n */\nexport interface CheckboxComponentProps {\n  /** Unique identifier for the checkbox */\n  id: string;\n  /** Label text to display next to the checkbox */\n  label?: string;\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Whether the checkbox is checked (alias for checked) */\n  isChecked?: boolean;\n  /** Callback function called when checkbox state changes */\n  onChange: (checked: boolean, event: CheckboxChangeEvent) => void;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Message to display below the checkbox */\n  message?: string;\n  /** Type of message to display */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassName?: string;\n  /** Additional CSS classes for the checkbox input */\n  checkboxClassName?: string;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Size variant for the checkbox */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Visual variant for the checkbox */\n  variant?: \"default\" | \"outline\" | \"solid\";\n  /** Whether to show the label on the left side */\n  labelPosition?: \"left\" | \"right\";\n  /** Additional props to pass to the Ant Design Checkbox */\n  checkboxProps?: Omit<\n    CheckboxProps,\n    \"checked\" | \"onChange\" | \"id\" | \"disabled\"\n  >;\n}\n\n/**\n * A highly customizable checkbox component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <Checkbox\n *   id=\"terms\"\n *   label=\"I agree to the terms and conditions\"\n *   checked={agreedToTerms}\n *   onChange={(checked) => setAgreedToTerms(checked)}\n *   required\n * />\n * ```\n */\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxComponentProps>(\n  (\n    {\n      id,\n      label,\n      checked,\n      isChecked,\n      onChange,\n      disabled = false,\n      required = false,\n      message,\n      messageType = \"default\",\n      wrapperClassName,\n      checkboxClassName,\n      labelClassName,\n      size = \"medium\",\n      variant = \"default\",\n      labelPosition = \"right\",\n      checkboxProps,\n    },\n    ref\n  ) => {\n    // Use checked prop, fallback to isChecked for backward compatibility\n    const isCheckboxChecked =\n      checked !== undefined ? checked : isChecked || false;\n\n    // Fluid size scaling: each size clamps from 2px smaller on <=1600px\n    // screens up to its full size at 1920px — the same clamp() curve used for\n    // the fluid fontSize / icon spacing tokens in tailwind.config.js.\n    const getSizeClasses = (): string => {\n      switch (size) {\n        case \"small\":\n          return \"[--checkbox-size:clamp(10px,0.625vw,12px)]\";\n        case \"large\":\n          return \"[--checkbox-size:clamp(18px,calc(8px_+_0.625vw),20px)]\";\n        default:\n          return \"[--checkbox-size:clamp(14px,calc(4px_+_0.625vw),16px)]\";\n      }\n    };\n\n    // Variant-based styling\n    const getVariantClasses = (): string => {\n      if (messageType === \"error\") {\n        return \"text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600\";\n      }\n      if (messageType === \"success\") {\n        return \"text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600\";\n      }\n      if (messageType === \"info\") {\n        return \"text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600\";\n      }\n\n      switch (variant) {\n        case \"outline\":\n          return \"text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600\";\n        case \"solid\":\n          return \"text-primary-600 bg-primary-50 border-primary-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-primary-900/20\";\n        default:\n          return \"text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600\";\n      }\n    };\n\n    // Message typography class\n    const getMessageTypographyClass = (): string => {\n      if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n      if (messageType === \"success\")\n        return \"text-green-500 dark:text-green-400\";\n      if (messageType === \"info\") return \"text-blue-500 dark:text-blue-400\";\n      return \"text-neutral-500 dark:text-neutral-400\";\n    };\n\n    // Label typography size based on checkbox size\n    const getLabelSize = (): \"extra-small\" | \"small\" | \"medium\" => {\n      switch (size) {\n        case \"small\":\n          return \"extra-small\";\n        case \"large\":\n          return \"medium\";\n        default:\n          return \"small\";\n      }\n    };\n\n    const handleChange = (e: CheckboxChangeEvent) => {\n      onChange(e.target.checked, e);\n    };\n\n    const checkboxElement = (\n      <AntdCheckbox\n        {...checkboxProps}\n        ref={ref}\n        id={id}\n        checked={isCheckboxChecked}\n        onChange={handleChange}\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200\",\n\n          // Size classes — the clamp() value set by getSizeClasses drives the\n          // antd wrapper and the visible .ant-checkbox-inner box (!important\n          // needed to beat antd's own token-based width/height)\n          getSizeClasses(),\n          \"w-[var(--checkbox-size)] h-[var(--checkbox-size)]\",\n          \"[&_.ant-checkbox-inner]:!w-[var(--checkbox-size)] [&_.ant-checkbox-inner]:!h-[var(--checkbox-size)]\",\n\n          // Variant classes\n          getVariantClasses(),\n\n          // Disabled styles\n          disabled && \"opacity-50 cursor-not-allowed\",\n\n          // Custom classes\n          checkboxClassName\n        )}\n        aria-required={required}\n        aria-invalid={message && messageType === \"error\" ? \"true\" : \"false\"}\n        aria-describedby={message ? `${id}-message` : undefined}\n      />\n    );\n\n    const labelElement = label ? (\n      <label\n        htmlFor={id}\n        className={cn(\n          \"font-medium cursor-pointer transition-colors duration-200\",\n          disabled\n            ? \"text-neutral-400 dark:text-neutral-600 cursor-not-allowed\"\n            : \"text-neutral-900 dark:text-neutral-100\",\n          labelPosition === \"right\" ? \"ml-2\" : \"mr-2\",\n          labelClassName\n        )}\n      >\n        <Typography variant=\"medium\" size={getLabelSize()} appearance=\"body\">\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </Typography>\n      </label>\n    ) : null;\n\n    return (\n      <div className={cn(\"flex flex-col\", wrapperClassName)}>\n        <div\n          className={cn(\n            \"flex items-center\",\n            labelPosition === \"left\" && \"flex-row-reverse justify-end\"\n          )}\n        >\n          {labelPosition === \"left\" ? (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          ) : (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          )}\n        </div>\n\n        {/* Message */}\n        <AnimatePresence>\n          {message && (\n            <motion.div\n              initial={{ opacity: 0, y: -10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -10 }}\n              transition={{ duration: 0.2 }}\n              id={`${id}-message`}\n              role={messageType === \"error\" ? \"alert\" : undefined}\n            >\n              <Typography\n                className={cn(\"mt-1\", getMessageTypographyClass())}\n                appearance=\"custom\"\n                size=\"extra-small\"\n                variant=\"medium\"\n              >\n                {message}\n              </Typography>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\n\n// Export type alias for backward compatibility\nexport type TCheckboxComponentProps = CheckboxComponentProps;\n"],"names":["Checkbox","forwardRef","id","label","checked","isChecked","onChange","disabled","required","message","messageType","wrapperClassName","checkboxClassName","labelClassName","size","variant","labelPosition","checkboxProps","ref","isCheckboxChecked","getSizeClasses","getVariantClasses","getMessageTypographyClass","getLabelSize","checkboxElement","jsx","AntdCheckbox","e","cn","labelElement","jsxs","Typography","Fragment","AnimatePresence","motion"],"mappings":"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"}

package/dist/components/navigation/tabs/TabOptions.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("@mui/icons-material"),C=require("antd"),S=require("../../../_virtual/index.cjs.js"),d=require("react"),h=require("../../button/Button.cjs.js"),a=require("../../data-display/typography/Typography.cjs.js"),L=require("../../forms/base-input-field/BaseInputField.cjs.js"),M=require("../../forms/select-field/SelectField.cjs.js"),j=require("../../forms/toggle/Toggle.cjs.js"),q=require("../../button/IconButton.cjs.js"),y=require("./types.cjs.js"),l=require("../../icon/icons.generated.cjs.js"),A=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),B=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),F=[{label:"Default",value:"default",icon:e.jsx(l.FormatListBulletedIcon,{className:"w-icon h-icon"})},{label:"A-Z",value:"asc",icon:e.jsx(A,{className:"w-icon h-icon"})},{label:"Z-A",value:"desc",icon:e.jsx(B,{className:"w-icon h-icon"})}],V=({savedConfig:t,onApplyFilter:i,setUnsavedChanges:f,handleTabSort:w,onSearchChange:m,hasSuffixRecord:v=!1})=>{const[N,u]=d.useState(!1),[r,p]=d.useState(y.INITIAL_TAB_OPTION_CONFIG),[c,g]=d.useState(""),o=(s,x)=>{p(I=>({...I,[s]:x}))},k=()=>{p({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),g(""),m("","contains")},O=()=>{i({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),w(r.sortOrder),f(!0),u(!1),c&&m(c,r.filterType.value)};d.useEffect(()=>{t&&JSON.stringify(t)!==JSON.stringify(r)&&p(t)},[t]);const T=e.jsxs("div",{children:[e.jsxs("div",{className:"p-5 space-y-5",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.Search,{sx:{height:"14px",width:"14px"}})," Filter Tabs"]}),e.jsxs("div",{className:"grid grid-cols-[150px_3fr] gap-2",children:[e.jsx(M.SelectField,{showSearch:!1,allowClear:!1,value:r.filterType,onChange:s=>o("filterType",s),options:[{label:"Contains",value:"contains"},{label:"Does not contain",value:"does-not-contain"}]}),e.jsx(L.BaseInputField,{id:"base-input-field-tab-options-filter",placeholder:"Insert value",value:c,onChange:s=>g(s),isClearable:!0})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.SwapVertOutlined,{sx:{height:"14px",width:"14px"}})," Sort"]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:F.map(s=>{const x=r.sortOrder===s.value;return e.jsxs(h,{appearance:"outline",status:x?"secondary":"secondary-neutral",id:`sort-option-${s.value}`,onClick:()=>o("sortOrder",s.value),className:"w-full",children:[s.icon,s.label]},s.value)})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(n.VisibilityOutlined,{sx:{height:"14px",width:"14px"}})," Display Options"]}),v&&e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(n.TagOutlined,{sx:{height:"16px",width:"16px"},className:"text-neutral-800 dark:text-white"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Show Counts"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Display item counts on tabs"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.showCounts,onChange:s=>o("showCounts",s),hideStatus:!0,icon:{checkedIcon:e.jsx(l.VisibilityIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm"}),uncheckedIcon:e.jsx(l.VisibilityOffIcon,{className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm"})},withIcon:!0})})]}),e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(l.LockIcon,{className:"text-neutral-800 dark:text-white w-icon h-icon"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Lock Order"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Prevent tab reordering"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.lockOrder,onChange:s=>o("lockOrder",s),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(l.LockIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm"}),uncheckedIcon:e.jsx(l.LockOpenIcon,{className:"cursor-pointer !block text-neutral-700 w-sm h-sm"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(h,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:k,children:"Reset"}),e.jsx(h,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:O,disabled:JSON.stringify(t)===JSON.stringify(r)&&c==="",children:"Apply"})]})]});return e.jsx(C.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:T,trigger:["click"],arrow:!1,open:N,onOpenChange:u,children:e.jsx("div",{className:"border-l border-neutral-200 dark:border-neutral-800 pl-2",children:e.jsxs(q,{tooltip:"Manage Tabs",variant:"ghost",className:"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",onClick:()=>u(!0),children:[e.jsx(n.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(y.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(b,{className:"text-primary-600"})]})})})},b=({className:t})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:S("absolute top-0.5 right-0.5",t),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=b;exports.TabOptions=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@mui/icons-material"),C=require("antd"),S=require("../../../_virtual/index.cjs.js"),d=require("react"),x=require("../../button/Button.cjs.js"),a=require("../../data-display/typography/Typography.cjs.js"),L=require("../../forms/base-input-field/BaseInputField.cjs.js"),M=require("../../forms/select-field/SelectField.cjs.js"),j=require("../../forms/toggle/Toggle.cjs.js"),q=require("../../button/IconButton.cjs.js"),y=require("./types.cjs.js"),l=require("../../icon/icons.generated.cjs.js"),A=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),B=({fontSize:t=24,className:i})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:e.jsx("path",{d:"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),F=[{label:"Default",value:"default",icon:e.jsx(l.FormatListBulletedIcon,{className:"w-icon h-icon"})},{label:"A-Z",value:"asc",icon:e.jsx(A,{className:"w-icon h-icon"})},{label:"Z-A",value:"desc",icon:e.jsx(B,{className:"w-icon h-icon"})}],V=({savedConfig:t,onApplyFilter:i,setUnsavedChanges:f,handleTabSort:w,onSearchChange:m,hasSuffixRecord:v=!1})=>{const[N,u]=d.useState(!1),[r,p]=d.useState(y.INITIAL_TAB_OPTION_CONFIG),[n,g]=d.useState(""),c=(s,h)=>{p(I=>({...I,[s]:h}))},k=()=>{p({filterType:{label:"Contains",value:"contains"},sortOrder:"default",showCounts:!0,lockOrder:!1}),g(""),m("","contains")},O=()=>{i({filterType:r.filterType,sortOrder:r.sortOrder,showCounts:r.showCounts,lockOrder:r.lockOrder}),w(r.sortOrder),f(!0),u(!1),n&&m(n,r.filterType.value)};d.useEffect(()=>{t&&JSON.stringify(t)!==JSON.stringify(r)&&p(t)},[t]);const T=e.jsxs("div",{children:[e.jsxs("div",{className:"p-5 space-y-5",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(o.Search,{sx:{height:"14px",width:"14px"}})," Filter Tabs"]}),e.jsxs("div",{className:"grid grid-cols-[150px_3fr] gap-2",children:[e.jsx(M.SelectField,{showSearch:!1,allowClear:!1,value:r.filterType,onChange:s=>c("filterType",s),options:[{label:"Contains",value:"contains"},{label:"Does not contain",value:"does-not-contain"}]}),e.jsx(L.BaseInputField,{id:"base-input-field-tab-options-filter",placeholder:"Insert value",value:n,onChange:s=>g(s),isClearable:!0})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(o.SwapVertOutlined,{sx:{height:"14px",width:"14px"}})," Sort"]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:F.map(s=>{const h=r.sortOrder===s.value;return e.jsxs(x,{appearance:"outline",status:h?"secondary":"secondary-neutral",id:`sort-option-${s.value}`,onClick:()=>c("sortOrder",s.value),className:"w-full",children:[s.icon,s.label]},s.value)})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(a.Typography,{size:"extra-small",variant:"regular",className:"!text-neutral-600 dark:!text-neutral-400 uppercase",appearance:"title",children:[e.jsx(o.VisibilityOutlined,{sx:{height:"14px",width:"14px"}})," Display Options"]}),v&&e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center h-8 w-8 justify-center bg-white dark:bg-neutral-700 rounded-lg",children:e.jsx(l.TagIcon,{className:"text-neutral-800 dark:text-white h-icon w-icon"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Show Counts"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Display item counts on tabs"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.showCounts,onChange:s=>c("showCounts",s),hideStatus:!0,icon:{checkedIcon:e.jsx(l.VisibilityIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm"}),uncheckedIcon:e.jsx(l.VisibilityOffIcon,{className:"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm"})},withIcon:!0})})]}),e.jsxs("div",{className:"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex items-center justify-center h-8 w-8 bg-white dark:bg-primary-800 rounded-lg",children:e.jsx(l.LockIcon,{className:"text-neutral-800 dark:text-white w-icon h-icon"})}),e.jsxs("div",{className:"flex flex-col gap-0",children:[e.jsx(a.Typography,{size:"small",variant:"medium",appearance:"title",children:"Lock Order"}),e.jsx(a.Typography,{size:"extra-small",variant:"regular",appearance:"subtitle",children:"Prevent tab reordering"})]})]}),e.jsx("div",{className:"flex items-center justify-end",children:e.jsx(j.Toggle,{isChecked:r.lockOrder,onChange:s=>c("lockOrder",s),hideStatus:!0,withIcon:!0,icon:{checkedIcon:e.jsx(l.LockIcon,{className:"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm"}),uncheckedIcon:e.jsx(l.LockOpenIcon,{className:"cursor-pointer !block text-neutral-700 w-sm h-sm"})}})})]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5",children:[e.jsx(x,{id:"btn-tab-options-reset",appearance:"outline",status:"cancel",className:"w-full",onClick:k,children:"Reset"}),e.jsx(x,{id:"btn-tab-options-apply",appearance:"filled",status:"primary",className:"w-full",onClick:O,disabled:JSON.stringify(t)===JSON.stringify(r)&&n==="",children:"Apply"})]})]});return e.jsx(C.Popover,{classNames:{body:"rounded-md w-[348px] !p-0"},placement:"bottomLeft",content:T,trigger:["click"],arrow:!1,open:N,onOpenChange:u,children:e.jsx("div",{className:"border-l border-neutral-200 dark:border-neutral-800 pl-2",children:e.jsxs(q,{tooltip:"Manage Tabs",variant:"ghost",className:"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative",onClick:()=>u(!0),children:[e.jsx(o.Tune,{sx:{height:"20px",width:"20px"}}),JSON.stringify(r)!==JSON.stringify(y.INITIAL_TAB_OPTION_CONFIG)&&e.jsx(b,{className:"text-primary-600"})]})})})},b=({className:t})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"5",viewBox:"0 0 4 4",fill:"none",className:S("absolute top-0.5 right-0.5",t),children:e.jsx("circle",{cx:"2",cy:"2",r:"2",fill:"currentColor"})});exports.Indicator=b;exports.TabOptions=V;
 //# sourceMappingURL=TabOptions.cjs.js.map

package/dist/components/navigation/tabs/TabOptions.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  Search,\n  SwapVertOutlined,\n  TagOutlined,\n  Tune,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagOutlined sx={{ height: '16px', width: '16px' }} className=\"text-neutral-800 dark:text-white\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                    uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 rounded-lg\">\n                <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                  uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-sm h-sm\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagOutlined","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}
+{"version":3,"file":"TabOptions.cjs.js","sources":["../../../../src/components/navigation/tabs/TabOptions.tsx"],"sourcesContent":["import {\n  Search,\n  SwapVertOutlined,\n  Tune,\n  VisibilityOutlined,\n} from '@mui/icons-material';\nimport { Popover } from 'antd';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport Button from '../../button/Button';\nimport { Typography } from '../../data-display/typography/Typography';\nimport { BaseInputField } from '../../forms/base-input-field/BaseInputField';\nimport { SelectField } from '../../forms/select-field/SelectField';\nimport { Toggle } from '../../forms/toggle/Toggle';\nimport IconButton from '../../button/IconButton';\nimport type { TabOptionConfig } from './types';\nimport { INITIAL_TAB_OPTION_CONFIG } from './types';\nimport { FormatListBulletedIcon, LockIcon, LockOpenIcon, TagIcon, VisibilityIcon, VisibilityOffIcon } from '../../icon';\n\ntype TabOptionsProps = {\n  savedConfig: TabOptionConfig;\n  onApplyFilter: (config: TabOptionConfig) => void;\n  setUnsavedChanges: (unsavedChanges: boolean) => void;\n  handleTabSort: (order: 'asc' | 'desc') => void;\n  onSearchChange: (searchValue: string, filterType: 'contains' | 'does-not-contain') => void;\n  hasSuffixRecord: boolean;\n};\n\nconst SortAlphabetDownIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 7H9.5M3.5 12H7.5M3.5 17H5.5M14 16L17 19M17 19L20 16M17 19V5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SortAlphabetUpIcon = ({ fontSize = 24, className }: { fontSize?: number; className?: string }) => (\n  <svg width={fontSize} height={fontSize} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className}>\n    <path d=\"M3.5 17H9.5M3.5 12H7.5M3.5 7H5.5M14 8L17 5M17 5L20 8M17 5V19\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst SORT_OPTIONS = [\n  {\n    label: 'Default',\n    value: 'default',\n    icon: <FormatListBulletedIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'A-Z',\n    value: 'asc',\n    icon: <SortAlphabetDownIcon className='w-icon h-icon' />,\n  },\n  {\n    label: 'Z-A',\n    value: 'desc',\n    icon: <SortAlphabetUpIcon className='w-icon h-icon' />,\n  },\n];\n\nexport const TabOptions = ({\n  savedConfig,\n  onApplyFilter,\n  setUnsavedChanges,\n  handleTabSort,\n  onSearchChange,\n  hasSuffixRecord = false,\n}: TabOptionsProps) => {\n  const [isTabOptionsVisible, setIsTabOptionsVisible] = useState(false);\n  const [tabOptionConfig, setTabOptionConfig] = useState<TabOptionConfig>(INITIAL_TAB_OPTION_CONFIG);\n  const [filterValue, setFilterValue] = useState('');\n\n  const handleConfigChange = <K extends keyof typeof tabOptionConfig>(key: K, value: (typeof tabOptionConfig)[K]) => {\n    setTabOptionConfig((prev) => ({\n      ...prev,\n      [key]: value,\n    }));\n  };\n\n  const handleReset = () => {\n    setTabOptionConfig({\n      filterType: { label: 'Contains', value: 'contains' },\n      sortOrder: 'default',\n      showCounts: true,\n      lockOrder: false,\n    });\n    setFilterValue('');\n    onSearchChange('', 'contains');\n  };\n\n  const applyFilter = () => {\n    onApplyFilter({\n      filterType: tabOptionConfig.filterType,\n      sortOrder: tabOptionConfig.sortOrder,\n      showCounts: tabOptionConfig.showCounts,\n      lockOrder: tabOptionConfig.lockOrder,\n    });\n    handleTabSort(tabOptionConfig.sortOrder as 'asc' | 'desc');\n    setUnsavedChanges(true);\n    setIsTabOptionsVisible(false);\n    if (filterValue) {\n      onSearchChange(filterValue, tabOptionConfig.filterType.value);\n    }\n  };\n\n  useEffect(() => {\n    if (savedConfig && JSON.stringify(savedConfig) !== JSON.stringify(tabOptionConfig)) {\n      setTabOptionConfig(savedConfig);\n    }\n  }, [savedConfig]);\n\n  const content = (\n    <div>\n      <div className=\"p-5 space-y-5\">\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <Search sx={{ height: '14px', width: '14px' }} /> Filter Tabs\n          </Typography>\n          <div className=\"grid grid-cols-[150px_3fr] gap-2\">\n            <SelectField\n              showSearch={false}\n              allowClear={false}\n              value={tabOptionConfig.filterType}\n              onChange={(value) => handleConfigChange('filterType', value)}\n              options={[\n                { label: 'Contains', value: 'contains' },\n                { label: 'Does not contain', value: 'does-not-contain' },\n              ]}\n            />\n            <BaseInputField\n              id=\"base-input-field-tab-options-filter\"\n              placeholder=\"Insert value\"\n              value={filterValue}\n              onChange={(value: string) => setFilterValue(value)}\n              isClearable\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <SwapVertOutlined sx={{ height: '14px', width: '14px' }} /> Sort\n          </Typography>\n          <div className=\"grid grid-cols-3 gap-2\">\n            {SORT_OPTIONS.map((option) => {\n              const isActive = tabOptionConfig.sortOrder === option.value;\n              return (\n                <Button\n                  appearance=\"outline\"\n                  status={isActive ? 'secondary' : 'secondary-neutral'}\n                  id={`sort-option-${option.value}`}\n                  onClick={() => handleConfigChange('sortOrder', option.value as 'default' | 'asc' | 'desc')}\n                  className=\"w-full\"\n                  key={option.value}\n                >\n                  {option.icon}\n                  {option.label}\n                </Button>\n              );\n            })}\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Typography size=\"extra-small\" variant=\"regular\" className=\"!text-neutral-600 dark:!text-neutral-400 uppercase\" appearance=\"title\">\n            <VisibilityOutlined sx={{ height: '14px', width: '14px' }} /> Display Options\n          </Typography>\n          {hasSuffixRecord && (\n            <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex items-center h-8 w-8 justify-center bg-white dark:bg-neutral-700 rounded-lg\">\n                  <TagIcon className=\"text-neutral-800 dark:text-white h-icon w-icon\" />\n                </div>\n                <div className=\"flex flex-col gap-0\">\n                  <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                    Show Counts\n                  </Typography>\n                  <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                    Display item counts on tabs\n                  </Typography>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-end\">\n                <Toggle\n                  isChecked={tabOptionConfig.showCounts}\n                  onChange={(v) => handleConfigChange('showCounts', v)}\n                  hideStatus\n                  icon={{\n                    checkedIcon: <VisibilityIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                    uncheckedIcon: <VisibilityOffIcon className=\"cursor-pointer !block text-neutral-700 dark:text-neutral-300 w-sm h-sm\" />,\n                  }}\n                  withIcon\n                />\n              </div>\n            </div>\n          )}\n          <div className=\"rounded-lg border-0 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between w-full py-2 px-3\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"flex items-center justify-center h-8 w-8 bg-white dark:bg-primary-800 rounded-lg\">\n                <LockIcon className=\"text-neutral-800 dark:text-white w-icon h-icon\" />\n              </div>\n              <div className=\"flex flex-col gap-0\">\n                <Typography size=\"small\" variant=\"medium\" appearance=\"title\">\n                  Lock Order\n                </Typography>\n                <Typography size=\"extra-small\" variant=\"regular\" appearance=\"subtitle\">\n                  Prevent tab reordering\n                </Typography>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-end\">\n              <Toggle\n                isChecked={tabOptionConfig.lockOrder}\n                onChange={(v) => handleConfigChange('lockOrder', v)}\n                hideStatus\n                withIcon\n                icon={{\n                  checkedIcon: <LockIcon className=\"cursor-pointer !block text-primary-600 dark:text-primary-400 w-sm h-sm\" />,\n                  uncheckedIcon: <LockOpenIcon className=\"cursor-pointer !block text-neutral-700 w-sm h-sm\" />,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-2 border-t border-neutral-200 dark:border-neutral-800 p-5\">\n        <Button id=\"btn-tab-options-reset\" appearance=\"outline\" status=\"cancel\" className=\"w-full\" onClick={handleReset}>\n          Reset\n        </Button>\n        <Button\n          id=\"btn-tab-options-apply\"\n          appearance=\"filled\"\n          status=\"primary\"\n          className=\"w-full\"\n          onClick={applyFilter}\n          disabled={JSON.stringify(savedConfig) === JSON.stringify(tabOptionConfig) && filterValue === ''}\n        >\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n\n  return (\n    <Popover\n      classNames={{\n        body: 'rounded-md w-[348px] !p-0',\n      }}\n      placement=\"bottomLeft\"\n      content={content}\n      trigger={['click']}\n      arrow={false}\n      open={isTabOptionsVisible}\n      onOpenChange={setIsTabOptionsVisible}\n    >\n      <div className=\"border-l border-neutral-200 dark:border-neutral-800 pl-2\">\n        <IconButton\n          tooltip=\"Manage Tabs\"\n          variant=\"ghost\"\n          className=\"!text-neutral-400 hover:!text-primary-600 dark:hover:!bg-primary-900 relative\"\n          onClick={() => setIsTabOptionsVisible(true)}\n        >\n          <Tune sx={{ height: '20px', width: '20px' }} />\n          {JSON.stringify(tabOptionConfig) !== JSON.stringify(INITIAL_TAB_OPTION_CONFIG) && <Indicator className=\"text-primary-600\" />}\n        </IconButton>\n      </div>\n    </Popover>\n  );\n};\n\nexport const Indicator = ({ className }: { className?: string }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"5\"\n      height=\"5\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      className={classNames('absolute top-0.5 right-0.5', className)}\n    >\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["SortAlphabetDownIcon","fontSize","className","jsx","SortAlphabetUpIcon","SORT_OPTIONS","FormatListBulletedIcon","TabOptions","savedConfig","onApplyFilter","setUnsavedChanges","handleTabSort","onSearchChange","hasSuffixRecord","isTabOptionsVisible","setIsTabOptionsVisible","useState","tabOptionConfig","setTabOptionConfig","INITIAL_TAB_OPTION_CONFIG","filterValue","setFilterValue","handleConfigChange","key","value","prev","handleReset","applyFilter","useEffect","content","jsxs","Typography","Search","SelectField","BaseInputField","SwapVertOutlined","option","isActive","Button","VisibilityOutlined","TagIcon","Toggle","v","VisibilityIcon","VisibilityOffIcon","LockIcon","LockOpenIcon","Popover","IconButton","Tune","Indicator","classNames"],"mappings":"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"}