se-design 1.0.3 → 1.0.8-5.dev.1

package/dist/index57.js

@@ -1,54 +1,152 @@
-import r, { useState as p } from "react";
-import { Popover as d } from "./index17.js";
+import p, { useState as A, useRef as O, useEffect as j } from "react";
+import { useStableId as W } from "./index205.js";
 /* empty css         */
-function i() {
-  return i = Object.assign ? Object.assign.bind() : function(n) {
-    for (var o = 1; o < arguments.length; o++) {
-      var t = arguments[o];
-      for (var e in t) ({}).hasOwnProperty.call(t, e) && (n[e] = t[e]);
-    }
-    return n;
-  }, i.apply(null, arguments);
-}
-const g = ({
-  label: n,
-  children: o,
-  iconColor: t = "var(--color-blue-500)",
-  isDisabled: e = !1
+const M = ({
+  length: n = 6,
+  onChange: h,
+  onComplete: k,
+  label: y,
+  disabled: i = !1,
+  className: H = "",
+  autoFocus: w = !0,
+  error: K = !1,
+  errorMessage: l,
+  validateOnBlur: L = !1,
+  onValidate: u,
+  id: _
 }) => {
-  const [a, s] = p(!1), l = {
-    onMouseEnter: () => s(!0),
-    onMouseLeave: () => s(!1)
+  const [s, P] = A(Array(n).fill("")), [g, m] = A(null), f = O([]), d = O(!1), $ = W(_, "se-otp-input"), R = `${$}-label`, B = `${$}-error`, N = (t) => /^\d$/.test(t), T = (t) => t.length === n && s.every((e) => e !== ""), b = (t, e, r = !1) => {
+    const o = [...s];
+    o[t] = e, P(o), r && e && t < n - 1 && c(t + 1);
+  }, E = (t) => {
+    b(t, "");
+  }, c = (t) => {
+    f.current[t]?.focus();
   };
-  return /* @__PURE__ */ r.createElement("div", i({
-    className: e ? "se-design-info-tooltip-wrapper-disabled" : ""
-  }, e ? {} : l), /* @__PURE__ */ r.createElement(d, {
-    position: "bottom-center",
-    isPopoverOpen: a,
-    onPopoverToggle: (c) => {
-      s(c);
-    },
-    renderPopoverSrcElement: () => /* @__PURE__ */ r.createElement("div", {
-      className: `se-design-info-tooltip-src ${e ? "se-design-info-tooltip-disabled" : ""}`,
-      style: {
-        "--info-tooltip-icon-color": t,
-        cursor: e ? "not-allowed" : "pointer"
+  j(() => {
+    w && f.current[0] && !i && c(0);
+  }, [w, i]);
+  const C = (t) => {
+    if (t.length === 0)
+      return l || "Please enter the verification code";
+    if (t.length < n || !T(t))
+      return l || "Please enter all digits";
+    if (u) {
+      const e = u(t);
+      if (e === !1)
+        return l || "Invalid verification code";
+      if (typeof e == "string")
+        return e;
+    }
+    return null;
+  };
+  j(() => {
+    const t = s.join("");
+    if (h?.(t), g && t.length > 0 && m(null), T(t)) {
+      if (u) {
+        const e = u(t);
+        m(e === !1 || typeof e == "string" ? typeof e == "string" ? e : l || "Invalid verification code" : null);
       }
-    }, o),
-    renderPopoverContents: () => /* @__PURE__ */ r.createElement("div", {
-      className: "se-design-info-tooltip-content",
-      "data-automation-id": "se-design-info-tooltip-content"
-    }, n),
-    isWithPortal: !0,
-    noBorder: !0,
-    disableClickToggle: !0,
-    popoverContentStyleProperty: {
-      zIndex: 2e3,
-      backgroundColor: ""
+      k?.(t);
+    }
+  }, [s, n, h, k, u, l]);
+  const F = (t, e) => {
+    e && !N(e) || b(t, e, !0);
+  }, V = (t, e) => {
+    if (i) return;
+    const r = s[t];
+    if (e.key === "Backspace") {
+      d.current = !0, r ? E(t) : t > 0 && (E(t - 1), c(t - 1)), setTimeout(() => {
+        d.current = !1;
+      }, 100), e.preventDefault();
+      return;
+    }
+    if (e.key === "Delete") {
+      d.current = !0, E(t), setTimeout(() => {
+        d.current = !1;
+      }, 100), e.preventDefault();
+      return;
     }
-  }));
+    const o = {
+      ArrowLeft: () => t > 0 && c(t - 1),
+      ArrowRight: () => t < n - 1 && c(t + 1),
+      Home: () => c(0),
+      End: () => c(n - 1)
+    };
+    if (o[e.key]) {
+      o[e.key](), e.preventDefault();
+      return;
+    }
+    N(e.key) && r && b(t, e.key, !0);
+  }, q = (t) => {
+    if (i) return;
+    t.preventDefault();
+    const r = t.clipboardData.getData("text/plain").trim().replace(/\D/g, "").slice(0, n);
+    if (r.length > 0) {
+      const o = [...s], x = f.current.findIndex((a) => a === document.activeElement), v = x >= 0 ? x : 0;
+      for (let a = 0; a < r.length && v + a < n; a++)
+        o[v + a] = r[a];
+      P(o);
+      const S = o.findIndex((a, U) => U >= v && a === ""), Q = S >= 0 ? S : Math.min(v + r.length, n - 1);
+      c(Q);
+    }
+  }, z = (t) => {
+    f.current[t]?.select();
+  }, G = () => {
+    if (L && !d.current) {
+      const t = s.join(""), e = C(t);
+      m(e);
+    }
+  }, I = K || !!g, D = I && (l || g), J = D ? B : void 0;
+  return /* @__PURE__ */ p.createElement("div", {
+    className: `se-design-otp-input ${H || ""}`,
+    "data-automation-id": "otp-input-container"
+  }, y && /* @__PURE__ */ p.createElement("div", {
+    id: R,
+    className: "se-design-otp-input-label"
+  }, y), /* @__PURE__ */ p.createElement("div", {
+    className: "flex items-center gap-[12px]",
+    role: "group",
+    "aria-labelledby": y ? R : void 0
+  }, s.map((t, e) => /* @__PURE__ */ p.createElement("input", {
+    key: e,
+    ref: (r) => {
+      f.current[e] = r;
+    },
+    type: "text",
+    inputMode: "numeric",
+    maxLength: 1,
+    value: t,
+    onChange: (r) => F(e, r.target.value),
+    onKeyDown: (r) => V(e, r),
+    onPaste: q,
+    onFocus: () => z(e),
+    onBlur: G,
+    disabled: i,
+    className: `
+              w-12 h-12 
+              flex flex-col items-start 
+              text-center text-lg font-medium
+              border rounded-md
+              outline-none
+              transition-colors
+              disabled:bg-gray-50 disabled:cursor-not-allowed
+              ${i ? "border-[var(--color-gray-300)] text-gray-400" : I ? "border-[var(--color-red-500)] text-gray-900 focus:border-[var(--color-red-500)] focus:ring-1 focus:ring-[var(--color-red-500)]" : "border-[var(--color-gray-600)] text-gray-900 focus:border-[var(--color-blue-500)] focus:ring-1 focus:ring-[var(--color-blue-500)]"}
+            `,
+    style: {
+      gap: "var(--Spacer-6px, 6px)"
+    },
+    "aria-label": `OTP digit ${e + 1} of ${n}`,
+    "aria-invalid": I,
+    "aria-describedby": J,
+    "data-automation-id": `otp-input-${e}`
+  }))), D && /* @__PURE__ */ p.createElement("div", {
+    id: B,
+    className: "se-design-otp-input-error",
+    role: "alert"
+  }, D));
 };
 export {
-  g as InfoTooltip
+  M as OTPInput
 };
 //# sourceMappingURL=index57.js.map

package/dist/index57.js.map

@@ -1 +1 @@
-{"version":3,"file":"index57.js","sources":["../src/components/InfoTooltip/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Popover } from '../Popover';\nimport './styles.scss';\n\nexport interface InfoTooltipProps {\n  label: string;\n  children: React.ReactNode;\n  iconColor?: string;\n  isDisabled?: boolean;\n}\n\nexport const InfoTooltip = ({\n  label,\n  children,\n  iconColor = 'var(--color-blue-500)',\n  isDisabled = false\n}: InfoTooltipProps) => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const mouseEnterObject = {\n    onMouseEnter: () => setIsHovered(true),\n    onMouseLeave: () => setIsHovered(false)\n  };\n\n  return (\n    <div\n      className={isDisabled ? 'se-design-info-tooltip-wrapper-disabled' : ''}\n      {...(isDisabled ? {} : mouseEnterObject)}\n    >\n      <Popover\n        position={'bottom-center'}\n        isPopoverOpen={isHovered}\n        onPopoverToggle={(open) => {\n          // Control popover state via hover - sync any external changes back to hover state\n          setIsHovered(open);\n        }}\n        renderPopoverSrcElement={() => (\n          <div\n            className={`se-design-info-tooltip-src ${isDisabled ? 'se-design-info-tooltip-disabled' : ''}`}\n            style={\n              {\n                '--info-tooltip-icon-color': iconColor,\n                cursor: isDisabled ? 'not-allowed' : 'pointer'\n              } as React.CSSProperties\n            }\n          >\n            {children}\n          </div>\n        )}\n        renderPopoverContents={() => (\n          <div className=\"se-design-info-tooltip-content\" data-automation-id=\"se-design-info-tooltip-content\">\n            {label}\n          </div>\n        )}\n        isWithPortal\n        noBorder\n        disableClickToggle\n        popoverContentStyleProperty={{\n          zIndex: 2000,\n          backgroundColor: ''\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["InfoTooltip","label","children","iconColor","isDisabled","isHovered","setIsHovered","useState","mouseEnterObject","onMouseEnter","onMouseLeave","React","createElement","_extends","className","Popover","position","isPopoverOpen","onPopoverToggle","open","renderPopoverSrcElement","style","cursor","renderPopoverContents","isWithPortal","noBorder","disableClickToggle","popoverContentStyleProperty","zIndex","backgroundColor"],"mappings":";;;;;;;;;;;;AAWO,MAAMA,IAAcA,CAAC;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,YAAAA,IAAa;AACG,MAAM;AACtB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAmB;AAAA,IACvBC,cAAcA,MAAMH,EAAa,EAAI;AAAA,IACrCI,cAAcA,MAAMJ,EAAa,EAAK;AAAA,EAAA;AAItCK,SAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEC,WAAWV,IAAa,4CAA4C;AAAA,EAAA,GAC/DA,IAAa,CAAA,IAAKI,CAAgB,GAEvCG,gBAAAA,EAAAC,cAACG,GAAO;AAAA,IACNC,UAAU;AAAA,IACVC,eAAeZ;AAAAA,IACfa,iBAAkBC,CAASA,MAAA;AAEzBb,MAAAA,EAAaa,CAAI;AAAA,IACnB;AAAA,IACAC,yBAAyBA,MACvBR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MACEE,WAAW,8BAA8BV,IAAa,oCAAoC,EAAE;AAAA,MAC5FiB,OACE;AAAA,QACE,6BAA6BlB;AAAAA,QAC7BmB,QAAQlB,IAAa,gBAAgB;AAAA,MACvC;AAAA,OAGDF,CACE;AAAA,IAEPqB,uBAAuBA,MACrBX,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKE,WAAU;AAAA,MAAiC,sBAAmB;AAAA,OAChEb,CACE;AAAA,IAEPuB,cAAY;AAAA,IACZC,UAAQ;AAAA,IACRC,oBAAkB;AAAA,IAClBC,6BAA6B;AAAA,MAC3BC,QAAQ;AAAA,MACRC,iBAAiB;AAAA,IACnB;AAAA,EACD,CAAA,CACE;AAET;"}
+{"version":3,"file":"index57.js","sources":["../src/components/OTPInput/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, KeyboardEvent, ChangeEvent, ClipboardEvent, FC } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport './style.scss';\n\nexport interface OTPInputProps {\n  length?: number;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  label?: string;\n  disabled?: boolean;\n  className?: string;\n  autoFocus?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n  validateOnBlur?: boolean;\n  onValidate?: (value: string) => boolean | string;\n  id?: string;\n}\n\nexport const OTPInput: FC<OTPInputProps> = ({\n  length = 6,\n  onChange,\n  onComplete,\n  label,\n  disabled = false,\n  className = '',\n  autoFocus = true,\n  error = false,\n  errorMessage,\n  validateOnBlur = false,\n  onValidate,\n  id\n}) => {\n  const [values, setValues] = useState<string[]>(Array(length).fill(''));\n  const [internalError, setInternalError] = useState<string | null>(null);\n  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n  const isBackspacePressed = useRef<boolean>(false);\n  \n  // Generate stable IDs for ARIA attributes\n  const baseId = useStableId(id, 'se-otp-input');\n  const labelId = `${baseId}-label`;\n  const errorId = `${baseId}-error`;\n\n  // Helper: Check if a string is a single digit\n  const isDigit = (char: string): boolean => /^\\d$/.test(char);\n\n  // Helper: Check if OTP is complete\n  const isComplete = (otpValue: string): boolean => {\n    return otpValue.length === length && values.every((val) => val !== '');\n  };\n\n  // Helper: Update value at specific index\n  const updateValue = (index: number, value: string, shouldFocusNext = false) => {\n    const newValues = [...values];\n    newValues[index] = value;\n    setValues(newValues);\n\n    if (shouldFocusNext && value && index < length - 1) {\n      focusInput(index + 1);\n    }\n  };\n\n  // Helper: Clear value at specific index\n  const clearValue = (index: number) => {\n    updateValue(index, '');\n  };\n\n  // Helper: Focus input at index\n  const focusInput = (index: number) => {\n    inputRefs.current[index]?.focus();\n  };\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0] && !disabled) {\n      focusInput(0);\n    }\n  }, [autoFocus, disabled]);\n\n  // Internal validation\n  const validateOTP = (otpValue: string): string | null => {\n    // Empty validation\n    if (otpValue.length === 0) {\n      return errorMessage || 'Please enter the verification code';\n    }\n\n    // Incomplete validation\n    if (otpValue.length < length || !isComplete(otpValue)) {\n      return errorMessage || 'Please enter all digits';\n    }\n\n    // Custom validation\n    if (onValidate) {\n      const validationResult = onValidate(otpValue);\n      if (validationResult === false) {\n        return errorMessage || 'Invalid verification code';\n      }\n      if (typeof validationResult === 'string') {\n        return validationResult;\n      }\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    const otpValue = values.join('');\n    onChange?.(otpValue);\n\n    // Clear error when user starts typing\n    if (internalError && otpValue.length > 0) {\n      setInternalError(null);\n    }\n\n    if (isComplete(otpValue)) {\n      // Validate on complete\n      if (onValidate) {\n        const validationResult = onValidate(otpValue);\n        if (validationResult === false || typeof validationResult === 'string') {\n          const errorMsg =\n            typeof validationResult === 'string' ? validationResult : errorMessage || 'Invalid verification code';\n          setInternalError(errorMsg);\n        } else {\n          setInternalError(null);\n        }\n      }\n      onComplete?.(otpValue);\n    }\n  }, [values, length, onChange, onComplete, onValidate, errorMessage]);\n\n  const handleChange = (index: number, value: string) => {\n    // Only allow single digit or empty\n    if (value && !isDigit(value)) {\n      return;\n    }\n\n    updateValue(index, value, true);\n  };\n\n  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    const currentValue = values[index];\n\n    // Handle backspace\n    if (e.key === 'Backspace') {\n      isBackspacePressed.current = true;\n      if (currentValue) {\n        clearValue(index);\n      } else if (index > 0) {\n        clearValue(index - 1);\n        focusInput(index - 1);\n      }\n      // Reset backspace flag after a short delay\n      setTimeout(() => {\n        isBackspacePressed.current = false;\n      }, 100);\n      e.preventDefault();\n      return;\n    }\n\n    // Handle delete\n    if (e.key === 'Delete') {\n      isBackspacePressed.current = true;\n      clearValue(index);\n      // Reset backspace flag after a short delay\n      setTimeout(() => {\n        isBackspacePressed.current = false;\n      }, 100);\n      e.preventDefault();\n      return;\n    }\n\n    // Handle navigation keys\n    const navigationHandlers: Record<string, () => void> = {\n      ArrowLeft: () => index > 0 && focusInput(index - 1),\n      ArrowRight: () => index < length - 1 && focusInput(index + 1),\n      Home: () => focusInput(0),\n      End: () => focusInput(length - 1)\n    };\n\n    if (navigationHandlers[e.key]) {\n      navigationHandlers[e.key]();\n      e.preventDefault();\n      return;\n    }\n\n    // Allow digits, but prevent if already filled\n    if (isDigit(e.key)) {\n      if (currentValue) {\n        updateValue(index, e.key, true);\n      }\n    }\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    e.preventDefault();\n    const pastedData = e.clipboardData.getData('text/plain').trim();\n\n    // Extract only digits\n    const digits = pastedData.replace(/\\D/g, '').slice(0, length);\n\n    if (digits.length > 0) {\n      const newValues = [...values];\n\n      // Fill inputs starting from the current index\n      const startIndex = inputRefs.current.findIndex((ref) => ref === document.activeElement);\n      const actualStartIndex = startIndex >= 0 ? startIndex : 0;\n\n      for (let i = 0; i < digits.length && actualStartIndex + i < length; i++) {\n        newValues[actualStartIndex + i] = digits[i];\n      }\n\n      setValues(newValues);\n\n      // Focus the next empty input or the last input\n      const nextEmptyIndex = newValues.findIndex((val, idx) => idx >= actualStartIndex && val === '');\n      const focusIndex = nextEmptyIndex >= 0 ? nextEmptyIndex : Math.min(actualStartIndex + digits.length, length - 1);\n      focusInput(focusIndex);\n    }\n  };\n\n  const handleFocus = (index: number) => {\n    inputRefs.current[index]?.select();\n  };\n\n  const handleBlur = () => {\n    // Don't validate on blur if backspace/delete was just pressed\n    if (validateOnBlur && !isBackspacePressed.current) {\n      const otpValue = values.join('');\n      const validationError = validateOTP(otpValue);\n      setInternalError(validationError);\n    }\n  };\n\n  const hasError = error || !!internalError;\n  // Priority: errorMessage prop > internalError\n  const displayError = hasError && (errorMessage || internalError);\n  \n  const ariaDescribedByError = displayError ? errorId : undefined;\n\n  return (\n    <div className={`se-design-otp-input ${className || ''}`} data-automation-id=\"otp-input-container\">\n      {label && <div id={labelId} className=\"se-design-otp-input-label\">{label}</div>}\n      <div className=\"flex items-center gap-[12px]\" role=\"group\" aria-labelledby={label ? labelId : undefined}>\n        {values.map((value, index) => (\n          <input\n            key={index}\n            ref={(el) => {\n              inputRefs.current[index] = el;\n            }}\n            type=\"text\"\n            inputMode=\"numeric\"\n            maxLength={1}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => handleChange(index, e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => handleKeyDown(index, e)}\n            onPaste={handlePaste}\n            onFocus={() => handleFocus(index)}\n            onBlur={handleBlur}\n            disabled={disabled}\n            className={`\n              w-12 h-12 \n              flex flex-col items-start \n              text-center text-lg font-medium\n              border rounded-md\n              outline-none\n              transition-colors\n              disabled:bg-gray-50 disabled:cursor-not-allowed\n              ${\n                disabled\n                  ? 'border-[var(--color-gray-300)] text-gray-400'\n                  : hasError\n                  ? 'border-[var(--color-red-500)] text-gray-900 focus:border-[var(--color-red-500)] focus:ring-1 focus:ring-[var(--color-red-500)]'\n                  : 'border-[var(--color-gray-600)] text-gray-900 focus:border-[var(--color-blue-500)] focus:ring-1 focus:ring-[var(--color-blue-500)]'\n              }\n            `}\n            style={{\n              gap: 'var(--Spacer-6px, 6px)'\n            }}\n            aria-label={`OTP digit ${index + 1} of ${length}`}\n            aria-invalid={hasError}\n            aria-describedby={ariaDescribedByError}\n            data-automation-id={`otp-input-${index}`}\n          />\n        ))}\n      </div>\n      {displayError && <div id={errorId} className=\"se-design-otp-input-error\" role=\"alert\">{displayError}</div>}\n    </div>\n  );\n};\n"],"names":["OTPInput","length","onChange","onComplete","label","disabled","className","autoFocus","error","errorMessage","validateOnBlur","onValidate","id","values","setValues","useState","Array","fill","internalError","setInternalError","inputRefs","useRef","isBackspacePressed","baseId","useStableId","labelId","errorId","isDigit","char","test","isComplete","otpValue","every","val","updateValue","index","value","shouldFocusNext","newValues","focusInput","clearValue","current","focus","useEffect","validateOTP","validationResult","join","handleChange","handleKeyDown","e","currentValue","key","setTimeout","preventDefault","navigationHandlers","ArrowLeft","ArrowRight","Home","End","handlePaste","digits","clipboardData","getData","trim","replace","slice","startIndex","findIndex","ref","document","activeElement","actualStartIndex","i","nextEmptyIndex","idx","focusIndex","Math","min","handleFocus","select","handleBlur","validationError","hasError","displayError","ariaDescribedByError","undefined","React","createElement","role","map","el","type","inputMode","maxLength","target","onKeyDown","onPaste","onFocus","onBlur","style","gap"],"mappings":"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"}

package/dist/index58.js

@@ -0,0 +1,36 @@
+import e from "react";
+import { Icon as c } from "./index6.js";
+const i = ({
+  className: a = "",
+  message: t = "",
+  backgroundColor: l = "var(--color-yellow-50)",
+  textColor: r = "var(--color-yellow-800)",
+  borderColor: o = "var(--color-yellow-200)",
+  actionJSX: n = () => /* @__PURE__ */ e.createElement(e.Fragment, null)
+}) => /* @__PURE__ */ e.createElement("div", {
+  className: `se-design-info-bar ${a} px-3 py-2 border rounded-[6px]`,
+  style: {
+    backgroundColor: l,
+    borderColor: o,
+    color: r
+  }
+}, /* @__PURE__ */ e.createElement("div", {
+  className: "info-bar-message flex items-center gap-2"
+}, /* @__PURE__ */ e.createElement("div", {
+  style: {
+    transform: "rotate(180deg)"
+  }
+}, /* @__PURE__ */ e.createElement(c, {
+  name: "info",
+  stroke: r
+})), /* @__PURE__ */ e.createElement("span", {
+  style: {
+    color: r
+  }
+}, t)), /* @__PURE__ */ e.createElement("div", {
+  className: "info-bar-action ml-[22px]"
+}, n()));
+export {
+  i as InfoBar
+};
+//# sourceMappingURL=index58.js.map

package/dist/index58.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index58.js","sources":["../src/components/InfoBar/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Icon } from \"../Icon\";\n\nexport interface InfoBarProps {\n  className?: string;\n  message: string;\n  backgroundColor?: string;\n  textColor?: string;\n  borderColor?: string;\n  actionJSX?: () => React.ReactNode;\n}\n\nexport const InfoBar: FC<InfoBarProps> = ({\n  className = \"\",\n  message = \"\",\n  backgroundColor = 'var(--color-yellow-50)',\n  textColor = 'var(--color-yellow-800)',\n  borderColor = 'var(--color-yellow-200)',\n  actionJSX = () => <></>\n}) => {\n\n  return (\n    <div\n      className={`se-design-info-bar ${className} px-3 py-2 border rounded-[6px]`}\n      style={{ backgroundColor, borderColor, color: textColor }}\n    >\n      <div className={`info-bar-message flex items-center gap-2`}>\n        <div style={{ transform: 'rotate(180deg)' }}><Icon name=\"info\" stroke={textColor} /></div>\n        <span style={{ color: textColor }}>{message}</span>\n      </div>\n      <div className={`info-bar-action ml-[22px]`}>\n        {actionJSX()}\n      </div>\n    </div>\n  );\n};"],"names":["InfoBar","className","message","backgroundColor","textColor","borderColor","actionJSX","React","createElement","Fragment","style","color","transform","Icon","name","stroke"],"mappings":";;AAYO,MAAMA,IAA4BA,CAAC;AAAA,EACxCC,WAAAA,IAAY;AAAA,EACZC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,WAAAA,IAAYA,MAAMC,gBAAAA,EAAAC,cAAAD,EAAAE,UAAA,IAAI;AACxB,MAGIF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EACEP,WAAW,sBAAsBA,CAAS;AAAA,EAC1CS,OAAO;AAAA,IAAEP,iBAAAA;AAAAA,IAAiBE,aAAAA;AAAAA,IAAaM,OAAOP;AAAAA,EAAAA;AAAU,GAExDG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKP,WAAW;AAAA,GACdM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKE,OAAO;AAAA,IAAEE,WAAW;AAAA,EAAA;AAAiB,GAAGL,gBAAAA,EAAAC,cAACK,GAAI;AAAA,EAACC,MAAK;AAAA,EAAOC,QAAQX;AAAAA,CAAY,CAAM,GACzFG,gBAAAA,EAAAC,cAAA,QAAA;AAAA,EAAME,OAAO;AAAA,IAAEC,OAAOP;AAAAA,EAAAA;AAAU,GAAIF,CAAc,CAC/C,GACLK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKP,WAAW;AAAA,GACbK,EAAAA,CACE,CACF;"}

package/dist/index59.js

@@ -1,5 +1,89 @@
-const e = "data:image/svg+xml,%3csvg%20width='21'%20height='20'%20viewBox='0%200%2021%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20opacity='0.8'%3e%3cg%20clip-path='url(%23clip0_11623_94780)'%3e%3cpath%20d='M8.93929%2014.7575C12.1504%2014.7575%2014.7536%2012.1543%2014.7536%208.94319C14.7536%205.73205%2012.1504%203.12891%208.93929%203.12891C5.72814%203.12891%203.125%205.73205%203.125%208.94319C3.125%2012.1543%205.72814%2014.7575%208.93929%2014.7575Z'%20stroke='%23D8E8F6'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M16.8642%2016.872L13.0469%2013.0547'%20stroke='%23D8E8F6'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12.4688%201.47559C13.0214%202.58108%2013.918%203.47752%2015.0234%204.03027L15.9619%204.5L15.0234%204.96973C13.918%205.52248%2013.0214%206.41892%2012.4688%207.52441L12%208.46191L11.5313%207.52441C10.9786%206.41892%2010.082%205.52248%208.97656%204.96973L8.03711%204.5L8.97656%204.03027C10.082%203.47752%2010.9786%202.58108%2011.5313%201.47559L12%200.538086L12.4688%201.47559Z'%20fill='white'%20stroke='%233E8BD1'%20stroke-width='1.375'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_11623_94780'%3e%3crect%20width='16'%20height='18'%20fill='white'%20transform='translate(2)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+import e, { useRef as S, useState as f } from "react";
+import { CustomModal as T } from "./index13.js";
+import { Icon as v } from "./index6.js";
+/* empty css         */
+const C = ({
+  children: c = null,
+  title: n = "",
+  onClose: s = () => {
+  },
+  showCloseIcon: l = !1,
+  showBackButton: a = !1,
+  onBack: m = () => {
+  },
+  className: i = "",
+  automationId: r = "",
+  minHeight: u = "auto"
+}) => {
+  const t = S(null), [g, p] = f(0), [E, h] = f(0), [b, Y] = f(!1), k = (o) => {
+    p(o.touches[0].clientY), h(o.touches[0].clientY), Y(!0);
+  }, N = (o) => {
+    if (!b) return;
+    const d = o.touches[0].clientY, x = d - g;
+    x > 0 && (h(d), t.current && (t.current.style.transform = `translateY(${x}px)`));
+  }, y = () => {
+    if (!b) return;
+    E - g > 60 ? s() : t.current && (t.current.style.transform = "translateY(0)"), Y(!1), p(0), h(0);
+  };
+  return /* @__PURE__ */ e.createElement("div", {
+    ref: t,
+    className: `se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${i}`,
+    onClick: (o) => o.stopPropagation(),
+    onTouchStart: k,
+    onTouchMove: N,
+    onTouchEnd: y,
+    "data-automation-id": r,
+    style: {
+      minHeight: u
+    }
+  }, (n || a) && /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4"
+  }, a && /* @__PURE__ */ e.createElement(v, {
+    name: "back",
+    stroke: "var(--color-gray-700)",
+    onClick: m,
+    className: "se-design-bottom-sheet-back-icon cursor-pointer",
+    automationId: `${r}-back-icon`
+  }), n && /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-bottom-sheet-title text-lg font-semibold"
+  }, n)), l && /* @__PURE__ */ e.createElement(v, {
+    name: "close",
+    onClick: s,
+    className: "se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10",
+    automationId: `${r}-close-icon`
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto"
+  }, c));
+}, I = ({
+  isOpen: c = !1,
+  title: n = "",
+  onClose: s = () => {
+  },
+  children: l = null,
+  showCloseIcon: a = !0,
+  showBackButton: m = !1,
+  onBack: i = () => {
+  },
+  className: r = "",
+  automationId: u = "bottomsheet",
+  minHeight: t = ""
+}) => /* @__PURE__ */ e.createElement(T, {
+  isOpen: c,
+  onClose: s,
+  onModalClick: s,
+  className: "custom-bottom-sheet",
+  renderModalContent: () => /* @__PURE__ */ e.createElement(C, {
+    title: n,
+    onClose: s,
+    showCloseIcon: a,
+    showBackButton: m,
+    onBack: i,
+    className: r,
+    automationId: u,
+    minHeight: t
+  }, l)
+});
 export {
-  e as default
+  I as BottomSheet
 };
 //# sourceMappingURL=index59.js.map

package/dist/index59.js.map

@@ -1 +1 @@
-{"version":3,"file":"index59.js","sources":["../src/assets/icons/ai-search.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='21'%20height='20'%20viewBox='0%200%2021%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20opacity='0.8'%3e%3cg%20clip-path='url(%23clip0_11623_94780)'%3e%3cpath%20d='M8.93929%2014.7575C12.1504%2014.7575%2014.7536%2012.1543%2014.7536%208.94319C14.7536%205.73205%2012.1504%203.12891%208.93929%203.12891C5.72814%203.12891%203.125%205.73205%203.125%208.94319C3.125%2012.1543%205.72814%2014.7575%208.93929%2014.7575Z'%20stroke='%23D8E8F6'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M16.8642%2016.872L13.0469%2013.0547'%20stroke='%23D8E8F6'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12.4688%201.47559C13.0214%202.58108%2013.918%203.47752%2015.0234%204.03027L15.9619%204.5L15.0234%204.96973C13.918%205.52248%2013.0214%206.41892%2012.4688%207.52441L12%208.46191L11.5313%207.52441C10.9786%206.41892%2010.082%205.52248%208.97656%204.96973L8.03711%204.5L8.97656%204.03027C10.082%203.47752%2010.9786%202.58108%2011.5313%201.47559L12%200.538086L12.4688%201.47559Z'%20fill='white'%20stroke='%233E8BD1'%20stroke-width='1.375'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_11623_94780'%3e%3crect%20width='16'%20height='18'%20fill='white'%20transform='translate(2)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\""],"names":["__vite_glob_0_0"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index59.js","sources":["../src/components/BottomSheet/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from 'react';\nimport { CustomModal } from '../CustomModal';\nimport { Icon } from '../Icon';\n\nimport './style.scss';\n\nexport interface BottomSheetProps {\n  isOpen: boolean;\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n}\n\ninterface BottomSheetContentProps {\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n}\n\nconst BottomSheetContent: FC<BottomSheetContentProps> = ({\n  children = null,\n  title = '',\n  onClose = () => {},\n  showCloseIcon = false,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = '',\n  minHeight = 'auto'\n}) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [startY, setStartY] = useState<number>(0);\n  const [currentY, setCurrentY] = useState<number>(0);\n  const [isDragging, setIsDragging] = useState<boolean>(false);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    setStartY(e.touches[0].clientY);\n    setCurrentY(e.touches[0].clientY);\n    setIsDragging(true);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isDragging) return;\n\n    const touchY = e.touches[0].clientY;\n    const deltaY = touchY - startY;\n\n    // Only allow dragging down\n    if (deltaY > 0) {\n      setCurrentY(touchY);\n      if (contentRef.current) {\n        contentRef.current.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (!isDragging) return;\n\n    const deltaY = currentY - startY;\n    const threshold = 60; // pixels to swipe down to trigger close\n\n    if (deltaY > threshold) {\n      // Trigger close\n      onClose();\n    } else {\n      // Reset position\n      if (contentRef.current) {\n        contentRef.current.style.transform = 'translateY(0)';\n      }\n    }\n\n    setIsDragging(false);\n    setStartY(0);\n    setCurrentY(0);\n  };\n\n  return (\n    <div\n      ref={contentRef}\n      className={`se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${className}`}\n      onClick={(e) => e.stopPropagation()}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      data-automation-id={automationId}\n      style={{ minHeight }}\n    >\n      {(title || showBackButton) && (\n        <div className=\"se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4\">\n          {showBackButton && (\n            <Icon\n              name=\"back\"\n              stroke=\"var(--color-gray-700)\"\n              onClick={onBack}\n              className=\"se-design-bottom-sheet-back-icon cursor-pointer\"\n              automationId={`${automationId}-back-icon`}\n            />\n          )}\n          {title && <div className=\"se-design-bottom-sheet-title text-lg font-semibold\">{title}</div>}\n        </div>\n      )}\n      {showCloseIcon && (\n        <Icon\n          name=\"close\"\n          onClick={onClose}\n          className=\"se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10\"\n          automationId={`${automationId}-close-icon`}\n        />\n      )}\n      <div className=\"se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto\">{children}</div>\n    </div>\n  );\n};\n\nexport const BottomSheet: FC<BottomSheetProps> = ({\n  isOpen = false,\n  title = '',\n  onClose = () => {},\n  children = null,\n  showCloseIcon = true,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = 'bottomsheet',\n  minHeight = ''\n}) => {\n  return (\n    <CustomModal\n      isOpen={isOpen}\n      onClose={onClose}\n      onModalClick={onClose}\n      className=\"custom-bottom-sheet\"\n      renderModalContent={() => (\n        <BottomSheetContent\n          title={title}\n          onClose={onClose}\n          showCloseIcon={showCloseIcon}\n          showBackButton={showBackButton}\n          onBack={onBack}\n          className={className}\n          automationId={automationId}\n          minHeight={minHeight}\n        >\n          {children}\n        </BottomSheetContent>\n      )}\n    />\n  );\n};\n"],"names":["BottomSheetContent","children","title","onClose","showCloseIcon","showBackButton","onBack","className","automationId","minHeight","contentRef","useRef","startY","setStartY","useState","currentY","setCurrentY","isDragging","setIsDragging","handleTouchStart","e","touches","clientY","handleTouchMove","touchY","deltaY","current","style","transform","handleTouchEnd","React","createElement","ref","onClick","stopPropagation","onTouchStart","onTouchMove","onTouchEnd","Icon","name","stroke","BottomSheet","isOpen","CustomModal","onModalClick","renderModalContent"],"mappings":"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"}