se-design 0.0.104 → 0.0.106

package/dist/index119.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index119.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index13.js

@@ -1,44 +1,45 @@
-var X = Object.defineProperty;
-var s = Object.getOwnPropertySymbols;
-var h = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable;
-var b = (e, o, t) => o in e ? X(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, w = (e, o) => {
+var B = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var w = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var h = (e, o, t) => o in e ? B(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, C = (e, o) => {
   for (var t in o || (o = {}))
-    h.call(o, t) && b(e, t, o[t]);
-  if (s)
-    for (var t of s(o))
-      P.call(o, t) && b(e, t, o[t]);
+    w.call(o, t) && h(e, t, o[t]);
+  if (i)
+    for (var t of i(o))
+      y.call(o, t) && h(e, t, o[t]);
   return e;
 };
-var y = (e, o) => {
+var P = (e, o) => {
   var t = {};
   for (var r in e)
-    h.call(e, r) && o.indexOf(r) < 0 && (t[r] = e[r]);
-  if (e != null && s)
-    for (var r of s(e))
-      o.indexOf(r) < 0 && P.call(e, r) && (t[r] = e[r]);
+    w.call(e, r) && o.indexOf(r) < 0 && (t[r] = e[r]);
+  if (e != null && i)
+    for (var r of i(e))
+      o.indexOf(r) < 0 && y.call(e, r) && (t[r] = e[r]);
   return t;
 };
-import C, { forwardRef as $, useState as k, useRef as E, useEffect as z, useImperativeHandle as B } from "react";
-function f() {
-  return f = Object.assign ? Object.assign.bind() : function(e) {
+import k, { forwardRef as I, useState as E, useRef as x, useEffect as R, useImperativeHandle as N } from "react";
+function u() {
+  return u = Object.assign ? Object.assign.bind() : function(e) {
     for (var o = 1; o < arguments.length; o++) {
       var t = arguments[o];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
     }
     return e;
-  }, f.apply(null, arguments);
+  }, u.apply(null, arguments);
 }
-const F = /* @__PURE__ */ $((I, L) => {
-  var p = I, {
+const J = /* @__PURE__ */ I((q, j) => {
+  var m = q, {
     className: e = "",
     automationId: o = "",
     position: t = "bottom-center",
     popoverContentAutomationId: r = "",
-    contentWidth: x = "max",
-    renderPopoverContents: R,
-    renderPopoverSrcElement: S,
-    onPopoverToggle: u
-  } = p, H = y(p, [
+    contentWidth: S = "max",
+    renderPopoverContents: H,
+    renderPopoverSrcElement: L,
+    onPopoverToggle: d,
+    isPopoverOpen: a
+  } = m, _ = P(m, [
     "className",
     "automationId",
     "position",
@@ -46,29 +47,32 @@ const F = /* @__PURE__ */ $((I, L) => {
     "contentWidth",
     "renderPopoverContents",
     "renderPopoverSrcElement",
-    "onPopoverToggle"
+    "onPopoverToggle",
+    "isPopoverOpen"
   ]);
-  const [l, a] = k(!1), [O, d] = k(t), m = E(null), i = E(null);
-  z(() => {
-    if (u && u(l), l)
-      return document.body.addEventListener("click", g), _(), () => document.body.removeEventListener("click", g);
-  }, [l]);
-  const _ = () => {
-    if (!i.current) return;
-    const n = i.current.getBoundingClientRect(), c = window.innerHeight;
-    (n == null ? void 0 : n.bottom) > c ? d(t.includes("left") ? "top-left" : t.includes("right") ? "top-right" : "top-center") : (n == null ? void 0 : n.top) < 0 && d(t.includes("left") ? "bottom-left" : t.includes("right") ? "bottom-right" : "bottom-center");
-  }, g = (n) => {
-    const c = m.current;
-    if (!c) return;
-    const D = n.target;
-    c.contains(D) || a(!1);
+  const [l, c] = E(!1), [D, g] = E(t), p = x(null), f = x(null);
+  R(() => {
+    if (d && d(l), l)
+      return document.body.addEventListener("click", b), X(), () => document.body.removeEventListener("click", b);
+  }, [l]), R(() => {
+    c(a != null ? a : !1);
+  }, [a]);
+  const X = () => {
+    if (!f.current) return;
+    const n = f.current.getBoundingClientRect(), s = window.innerHeight;
+    (n == null ? void 0 : n.bottom) > s ? g(t.includes("left") ? "top-left" : t.includes("right") ? "top-right" : "top-center") : (n == null ? void 0 : n.top) < 0 && g(t.includes("left") ? "bottom-left" : t.includes("right") ? "bottom-right" : "bottom-center");
+  }, b = (n) => {
+    const s = p.current;
+    if (!s) return;
+    const z = n.target;
+    s.contains(z) || c(!1);
   }, v = () => {
-    a((n) => !n);
+    c((n) => !n);
   };
-  B(L, () => ({
+  N(j, () => ({
     togglePopover: v
   }), []);
-  const j = {
+  const $ = {
     "bottom-left": {
       left: "0",
       top: "100%"
@@ -96,28 +100,28 @@ const F = /* @__PURE__ */ $((I, L) => {
       bottom: "100%"
     }
   };
-  return /* @__PURE__ */ C.createElement("div", f({
+  return /* @__PURE__ */ k.createElement("div", u({
     className: "se-design-popover-wrapper cursor-pointer relative" + (e.length > 0 ? ` ${e}` : "") + (l ? " open" : ""),
-    ref: m,
+    ref: p,
     onClick: v,
     "data-automation-id": o
-  }, H), S({
+  }, _), L({
     displayPopover: l
-  }), l && /* @__PURE__ */ C.createElement("div", {
-    className: `popover-content absolute shadow-md border rounded-md z-[1000] ${x == "full" ? "w-full" : "w-max"}`,
-    style: w({
+  }), l && /* @__PURE__ */ k.createElement("div", {
+    className: `popover-content absolute shadow-md border rounded-md z-[1000] ${S == "full" ? "w-full" : "w-max"}`,
+    style: C({
       borderColor: "var(--color-gray-200)",
       color: "var(--color-gray-900)",
       backgroundColor: "var(--color-white)"
-    }, j[O]),
+    }, $[D]),
     onClick: (n) => n.stopPropagation(),
-    ref: i,
+    ref: f,
     "data-automation-id": r
-  }, R({
-    closePopoverCb: () => a(!1)
+  }, H({
+    closePopoverCb: () => c(!1)
   })));
 });
 export {
-  F as Popover
+  J as Popover
 };
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\n\nexport interface PopoverHandle {\n  togglePopover: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean }) => ReactNode;\n  position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(\n  (\n    {\n      className = '',\n      automationId = '',\n      position = 'bottom-center',\n      popoverContentAutomationId = '',\n      contentWidth = 'max',\n      renderPopoverContents,\n      renderPopoverSrcElement,\n      onPopoverToggle,\n      ...props\n    },\n    ref: ForwardedRef<PopoverHandle>\n  ) => {\n    const [displayPopover, setDisplayPopover] = useState(false);\n    const [popoverPosition, setPopoverPosition] = useState(position);\n    const srcElementRef = useRef<HTMLDivElement>(null);\n    const popoverContentRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (onPopoverToggle) {\n        onPopoverToggle(displayPopover);\n      }\n      if (displayPopover) {\n        document.body.addEventListener('click', clickListener);\n        checkPopoverPosition();\n        return () => document.body.removeEventListener('click', clickListener);\n      }\n    }, [displayPopover]);\n\n    //Function to check popover position\n    const checkPopoverPosition = () => {\n      if (!popoverContentRef.current) return;\n\n      const popoverRect = popoverContentRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n\n      if (popoverRect?.bottom > viewportHeight) {\n        setPopoverPosition(\n          position.includes('left') ? 'top-left' : position.includes('right') ? 'top-right' : 'top-center'\n        );\n      } else if (popoverRect?.top < 0) {\n        // If popover extends beyond top of viewport, switch to bottom position\n        setPopoverPosition(\n          position.includes('left') ? 'bottom-left' : position.includes('right') ? 'bottom-right' : 'bottom-center'\n        );\n      }\n    };\n\n    const clickListener = (event: MouseEvent) => {\n      const currentDropRef = srcElementRef.current;\n      if (!currentDropRef) return;\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      if (!isSourcePopover) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const togglePopover = () => {\n      setDisplayPopover((displayPopover) => !displayPopover);\n    };\n\n    useImperativeHandle(ref, () => ({ togglePopover }), []);\n\n    const popoverContentStyle = {\n      'bottom-left': { left: '0', top: '100%' },\n      'bottom-right': { right: '0', top: '100%' },\n      'bottom-center': { left: '50%', transform: 'translateX(-50%)', top: '100%' },\n      'top-left': { left: '0', bottom: '100%' },\n      'top-right': { right: '0', bottom: '100%' },\n      'top-center': { left: '50%', transform: 'translateX(-50%)', bottom: '100%' }\n    };\n\n    return (\n      <div\n        className={\n          'se-design-popover-wrapper cursor-pointer relative' +\n          (className.length > 0 ? ` ${className}` : '') +\n          (displayPopover ? ' open' : '')\n        }\n        ref={srcElementRef}\n        onClick={togglePopover}\n        data-automation-id={automationId}\n        {...props}\n      >\n        {renderPopoverSrcElement({ displayPopover })}\n\n        {displayPopover && (\n          <div\n            className={`popover-content absolute shadow-md border rounded-md z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n            style={{\n              borderColor: 'var(--color-gray-200)',\n              color: 'var(--color-gray-900)',\n              backgroundColor: 'var(--color-white)',\n              ...popoverContentStyle[popoverPosition]\n            }}\n            onClick={(e) => e.stopPropagation()}\n            ref={popoverContentRef}\n            data-automation-id={popoverContentAutomationId}\n          >\n            {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["Popover","_a","ref","_b","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","props","displayPopover","setDisplayPopover","useState","popoverPosition","setPopoverPosition","srcElementRef","useRef","popoverContentRef","useEffect","body","addEventListener","clickListener","checkPopoverPosition","document","removeEventListener","current","popoverRect","getBoundingClientRect","viewportHeight","window","innerHeight","bottom","includes","top","event","currentDropRef","target","contains","togglePopover","useImperativeHandle","popoverContentStyle","left","right","transform","React","createElement","_extends","length","onClick","style","__spreadValues","borderColor","color","backgroundColor","e","stopPropagation","closePopoverCb"],"mappings":"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"}
+{"version":3,"file":"index13.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\n\nexport interface PopoverHandle {\n  togglePopover: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean }) => ReactNode;\n  position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n  isPopoverOpen?: boolean;\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(\n  (\n    {\n      className = '',\n      automationId = '',\n      position = 'bottom-center',\n      popoverContentAutomationId = '',\n      contentWidth = 'max',\n      renderPopoverContents,\n      renderPopoverSrcElement,\n      onPopoverToggle,\n      isPopoverOpen,\n      ...props\n    },\n    ref: ForwardedRef<PopoverHandle>\n  ) => {\n    const [displayPopover, setDisplayPopover] = useState(false);\n    const [popoverPosition, setPopoverPosition] = useState(position);\n    const srcElementRef = useRef<HTMLDivElement>(null);\n    const popoverContentRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (onPopoverToggle) {\n        onPopoverToggle(displayPopover);\n      }\n      if (displayPopover) {\n        document.body.addEventListener('click', clickListener);\n        checkPopoverPosition();\n        return () => document.body.removeEventListener('click', clickListener);\n      }\n    }, [displayPopover]);\n\n    useEffect(() => {\n      setDisplayPopover(isPopoverOpen ?? false);\n    }, [isPopoverOpen]);\n\n    //Function to check popover position\n    const checkPopoverPosition = () => {\n      if (!popoverContentRef.current) return;\n\n      const popoverRect = popoverContentRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n\n      if (popoverRect?.bottom > viewportHeight) {\n        setPopoverPosition(\n          position.includes('left') ? 'top-left' : position.includes('right') ? 'top-right' : 'top-center'\n        );\n      } else if (popoverRect?.top < 0) {\n        // If popover extends beyond top of viewport, switch to bottom position\n        setPopoverPosition(\n          position.includes('left') ? 'bottom-left' : position.includes('right') ? 'bottom-right' : 'bottom-center'\n        );\n      }\n    };\n\n    const clickListener = (event: MouseEvent) => {\n      const currentDropRef = srcElementRef.current;\n      if (!currentDropRef) return;\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      if (!isSourcePopover) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const togglePopover = () => {\n      setDisplayPopover((displayPopover) => !displayPopover);\n    };\n\n    useImperativeHandle(ref, () => ({ togglePopover }), []);\n\n    const popoverContentStyle = {\n      'bottom-left': { left: '0', top: '100%' },\n      'bottom-right': { right: '0', top: '100%' },\n      'bottom-center': { left: '50%', transform: 'translateX(-50%)', top: '100%' },\n      'top-left': { left: '0', bottom: '100%' },\n      'top-right': { right: '0', bottom: '100%' },\n      'top-center': { left: '50%', transform: 'translateX(-50%)', bottom: '100%' }\n    };\n\n    return (\n      <div\n        className={\n          'se-design-popover-wrapper cursor-pointer relative' +\n          (className.length > 0 ? ` ${className}` : '') +\n          (displayPopover ? ' open' : '')\n        }\n        ref={srcElementRef}\n        onClick={togglePopover}\n        data-automation-id={automationId}\n        {...props}\n      >\n        {renderPopoverSrcElement({ displayPopover })}\n\n        {displayPopover && (\n          <div\n            className={`popover-content absolute shadow-md border rounded-md z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n            style={{\n              borderColor: 'var(--color-gray-200)',\n              color: 'var(--color-gray-900)',\n              backgroundColor: 'var(--color-white)',\n              ...popoverContentStyle[popoverPosition]\n            }}\n            onClick={(e) => e.stopPropagation()}\n            ref={popoverContentRef}\n            data-automation-id={popoverContentAutomationId}\n          >\n            {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["Popover","_a","ref","_b","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","isPopoverOpen","props","displayPopover","setDisplayPopover","useState","popoverPosition","setPopoverPosition","srcElementRef","useRef","popoverContentRef","useEffect","body","addEventListener","clickListener","checkPopoverPosition","document","removeEventListener","current","popoverRect","getBoundingClientRect","viewportHeight","window","innerHeight","bottom","includes","top","event","currentDropRef","target","contains","togglePopover","useImperativeHandle","popoverContentStyle","left","right","transform","React","createElement","_extends","length","onClick","style","__spreadValues","borderColor","color","backgroundColor","e","stopPropagation","closePopoverCb"],"mappings":"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"}

package/dist/index14.js

@@ -10,7 +10,7 @@ var d = (t, m) => {
   return a;
 };
 import l from "react";
-const x = (g) => {
+const s = (g) => {
   var n = g, {
     leftContainer: t,
     centerContainer: m,
@@ -23,10 +23,10 @@ const x = (g) => {
     "className"
   ]);
   return /* @__PURE__ */ l.createElement("header", {
-    className: `se-design-header ${e} sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${(r == null ? void 0 : r.type) === "fixed" ? "fixed left-0 right-0 top-0" : ""}`
+    className: `se-design-header ${e} sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#3A91DA] to-[#2A5092] flex justify-between items-center ${(r == null ? void 0 : r.type) === "fixed" ? "fixed left-0 right-0 top-0" : ""}`
   }, t && /* @__PURE__ */ l.createElement(l.Fragment, null, t), m && /* @__PURE__ */ l.createElement(l.Fragment, null, m), a && /* @__PURE__ */ l.createElement(l.Fragment, null, a));
 };
 export {
-  x as Header
+  s as Header
 };
 //# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","sources":["../src/components/Header/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport interface HeaderProps {\n  leftContainer?: React.ReactNode;\n  centerContainer?: React.ReactNode;\n  rightContainer?: React.ReactNode;\n  type?: string;\n  className?: string;\n}\n\nexport const Header: FC<HeaderProps> = ({\n  leftContainer,\n  centerContainer,\n  rightContainer,\n  className,\n  ...props\n}) => {\n  return (\n    <header className={`se-design-header ${className} sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${\n      props?.type === 'fixed' ? 'fixed left-0 right-0 top-0' : ''\n    }`}>\n      {leftContainer && <>{leftContainer}</>}\n      {centerContainer && <>{centerContainer}</>}\n      {rightContainer && <>{rightContainer}</>}\n    </header>\n  );\n};\n"],"names":["Header","_a","_b","leftContainer","centerContainer","rightContainer","className","props","React","createElement","type","Fragment"],"mappings":";;;;;;;;;;;;AAUO,MAAMA,IAA0BA,CAACC,MAMlC;AANkC,MAAAC,IAAAD,GACtCE;AAAAA,mBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,WAAAA;AAAAA,MAJsCJ,GAKnCK,IAAAA,EALmCL,GAKnCK;AAAAA,IAJHJ;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAIEE,SAAAA,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IAAQH,WAAW,oBAAoBA,CAAS,0HAC9CC,KAAAA,gBAAAA,EAAOG,UAAS,UAAU,+BAA+B,EAAE;AAAA,EAC1D,GACAP,KAAiBK,gBAAAA,EAAAC,cAAAD,EAAAG,UAAA,MAAGR,CAAgB,GACpCC,KAAmBK,gBAAAA,EAAAA,cAAAD,EAAAG,UAAGP,MAAAA,CAAkB,GACxCC,KAAkBG,gBAAAA,EAAAC,cAAAD,EAAAG,UAAGN,MAAAA,CAAiB,CACjC;AAEZ;"}
+{"version":3,"file":"index14.js","sources":["../src/components/Header/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport interface HeaderProps {\n  leftContainer?: React.ReactNode;\n  centerContainer?: React.ReactNode;\n  rightContainer?: React.ReactNode;\n  type?: string;\n  className?: string;\n}\n\nexport const Header: FC<HeaderProps> = ({\n  leftContainer,\n  centerContainer,\n  rightContainer,\n  className,\n  ...props\n}) => {\n  return (\n    <header className={`se-design-header ${className} sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#3A91DA] to-[#2A5092] flex justify-between items-center ${\n      props?.type === 'fixed' ? 'fixed left-0 right-0 top-0' : ''\n    }`}>\n      {leftContainer && <>{leftContainer}</>}\n      {centerContainer && <>{centerContainer}</>}\n      {rightContainer && <>{rightContainer}</>}\n    </header>\n  );\n};\n"],"names":["Header","_a","_b","leftContainer","centerContainer","rightContainer","className","props","React","createElement","type","Fragment"],"mappings":";;;;;;;;;;;;AAUO,MAAMA,IAA0BA,CAACC,MAMlC;AANkC,MAAAC,IAAAD,GACtCE;AAAAA,mBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,WAAAA;AAAAA,MAJsCJ,GAKnCK,IAAAA,EALmCL,GAKnCK;AAAAA,IAJHJ;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAIEE,SAAAA,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IAAQH,WAAW,oBAAoBA,CAAS,0HAC9CC,KAAAA,gBAAAA,EAAOG,UAAS,UAAU,+BAA+B,EAAE;AAAA,EAC1D,GACAP,KAAiBK,gBAAAA,EAAAC,cAAAD,EAAAG,UAAA,MAAGR,CAAgB,GACpCC,KAAmBK,gBAAAA,EAAAA,cAAAD,EAAAG,UAAGP,MAAAA,CAAkB,GACxCC,KAAkBG,gBAAAA,EAAAC,cAAAD,EAAAG,UAAGN,MAAAA,CAAiB,CACjC;AAEZ;"}

package/dist/index27.js

@@ -1,37 +1,39 @@
-var b = Object.defineProperty, w = Object.defineProperties;
-var f = Object.getOwnPropertyDescriptors;
+var f = Object.defineProperty, E = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
 var i = Object.getOwnPropertySymbols;
-var E = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
-var d = (e, a, t) => a in e ? b(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, s = (e, a) => {
+var C = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
+var s = (e, a, t) => a in e ? f(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, d = (e, a) => {
   for (var t in a || (a = {}))
-    E.call(a, t) && d(e, t, a[t]);
+    C.call(a, t) && s(e, t, a[t]);
   if (i)
     for (var t of i(a))
-      v.call(a, t) && d(e, t, a[t]);
+      N.call(a, t) && s(e, t, a[t]);
   return e;
-}, m = (e, a) => w(e, f(a));
+}, m = (e, a) => E(e, v(a));
 import r, { useRef as g } from "react";
-function y(e) {
+function p(e) {
   const {
     label: a,
     value: t,
     checked: l,
     disabled: h,
     name: u,
-    onChange: c,
-    width: x
-  } = e, o = g(null);
+    onChange: o,
+    width: b,
+    radioLabelClassName: x = "",
+    radioContainerClassName: w = ""
+  } = e, c = g(null);
   return /* @__PURE__ */ r.createElement("div", {
-    className: `flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${l ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] p-2 transition-colors duration-300`,
+    className: `flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${l ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] p-2 transition-colors duration-300 ${w}`,
     onClick: () => {
       var n;
-      return (n = o.current) == null ? void 0 : n.click();
+      return (n = c.current) == null ? void 0 : n.click();
     },
     style: {
-      width: x || "20vw"
+      width: b || "20vw"
     }
   }, /* @__PURE__ */ r.createElement("input", {
-    ref: o,
+    ref: c,
     type: "radio",
     id: t,
     name: u,
@@ -40,7 +42,7 @@ function y(e) {
     disabled: h,
     className: "mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50",
     onChange: () => {
-      c && c(m(s({}, e), {
+      o && o(m(d({}, e), {
         checked: !0
       }));
     }
@@ -48,12 +50,12 @@ function y(e) {
     htmlFor: t,
     className: `${e.helperLabel && "flex flex-col"} cursor-pointer`
   }, /* @__PURE__ */ r.createElement("span", {
-    className: "text-sm text-[var(--color-gray-800)]"
+    className: `text-sm text-[var(--color-gray-800)] ${x}`
   }, a), e.helperLabel && /* @__PURE__ */ r.createElement("span", {
     className: `text-xs text-[var(--color-gray-600)] ${e.maxWidth ? `max-w-[${e.maxWidth}]` : "max-w-[20vw]"} break-words whitespace-normal`
   }, e.helperLabel)));
 }
 export {
-  y as Radio
+  p as Radio
 };
 //# sourceMappingURL=index27.js.map

package/dist/index27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index27.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n    label: string;\n    value: string;\n    checked: boolean;\n    disabled: boolean;\n    name: string;\n    onChange?: (props: RadioProps) => void;\n    helperLabel?: string;\n    maxWidth?: string;\n    width?: string;\n}\n\nexport function Radio(props: RadioProps) {\n    const { label, value, checked, disabled, name, onChange, width } = props;\n    const radioRef = useRef<HTMLInputElement>(null);\n\n    \n    return (\n        <div\n            className={`flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] p-2 transition-colors duration-300`}\n            onClick={() => radioRef.current?.click()}\n            style={{ width: width || '20vw' }}\n        >\n            <input\n                ref={radioRef}\n                type=\"radio\"\n                id={value}\n                name={name}\n                value={value}\n                checked={checked}\n                disabled={disabled}\n                className=\"mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n                onChange={() => {\n                    onChange && onChange({ ...props, checked: true });\n                }}\n            />\n            <label htmlFor={value} className={`${props.helperLabel && \"flex flex-col\"} cursor-pointer`}>\n                <span className=\"text-sm text-[var(--color-gray-800)]\">{label}</span>\n                {props.helperLabel && (\n                    <span className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}>{props.helperLabel}</span>\n                )}\n            </label>\n        </div>\n    );\n}"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioRef","useRef","React","createElement","className","onClick","current","click","style","ref","type","id","__spreadProps","__spreadValues","htmlFor","helperLabel","maxWidth"],"mappings":";;;;;;;;;;;;;AAcO,SAASA,EAAMC,GAAmB;AAC/B,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,OAAAA;AAAAA,IAAOC,SAAAA;AAAAA,IAASC,UAAAA;AAAAA,IAAUC,MAAAA;AAAAA,IAAMC,UAAAA;AAAAA,IAAUC,OAAAA;AAAAA,EAAAA,IAAUP,GAC7DQ,IAAWC,EAAyB,IAAI;AAI1CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIC,WAAW,wEAAwET,IAAU,qBAAqB,kBAAkB;AAAA,IACpIU,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAET,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCI,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACIM,KAAKT;AAAAA,IACLU,MAAK;AAAA,IACLC,IAAIjB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAQ,WAAU;AAAA,IACVN,UAAUA,MAAM;AACZA,MAAAA,KAAYA,EAASc,EAAAC,EAAA,IAAKrB,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EACpD,CACH,GACDQ,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOW,SAASpB;AAAAA,IAAOU,WAAW,GAAGZ,EAAMuB,eAAe,eAAe;AAAA,EAAA,GACrEZ,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAA,GAAwCX,CAAY,GACnED,EAAMuB,eACHb,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAW,wCAAwCZ,EAAMwB,WAAW,UAAUxB,EAAMwB,QAAQ,MAAM,cAAc;AAAA,EAAA,GAAmCxB,EAAMuB,WAAkB,CAElL,CACN;AAEb;"}
+{"version":3,"file":"index27.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = ''\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] p-2 transition-colors duration-300 ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || '20vw' }}\n    >\n      <input\n        ref={radioRef}\n        type=\"radio\"\n        id={value}\n        name={name}\n        value={value}\n        checked={checked}\n        disabled={disabled}\n        className=\"mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n        onChange={() => {\n          onChange && onChange({ ...props, checked: true });\n        }}\n      />\n      <label htmlFor={value} className={`${props.helperLabel && 'flex flex-col'} cursor-pointer`}>\n        <span className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName}`}>{label}</span>\n        {props.helperLabel && (\n          <span\n            className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}\n          >\n            {props.helperLabel}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","radioRef","useRef","React","createElement","className","onClick","current","click","style","ref","type","id","__spreadProps","__spreadValues","htmlFor","helperLabel","maxWidth"],"mappings":";;;;;;;;;;;;;AAgBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,EAAA,IACxBT,GACEU,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,wEAAwEX,IAAU,qBAAqB,kBAAkB,qDAAqDM,CAAuB;AAAA,IAChNM,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEX,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCM,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEM,KAAKT;AAAAA,IACLU,MAAK;AAAA,IACLC,IAAInB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAU,WAAU;AAAA,IACVR,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAASgB,EAAAC,EAAA,IAAKvB,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EAClD,CACD,GACDU,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOW,SAAStB;AAAAA,IAAOY,WAAW,GAAGd,EAAMyB,eAAe,eAAe;AAAA,EAAA,GACvEZ,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW,wCAAwCN,CAAmB;AAAA,EAAA,GAAKP,CAAY,GAC5FD,EAAMyB,eACLb,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCd,EAAM0B,WAAW,UAAU1B,EAAM0B,QAAQ,MAAM,cAAc;AAAA,EAAA,GAE/G1B,EAAMyB,WACH,CAEH,CACJ;AAET;"}

package/dist/index29.js

@@ -1,23 +1,25 @@
-import e, { useState as s, useEffect as l } from "react";
-import { Icon as m } from "./index4.js";
-const f = ({
+import e, { useState as m, useEffect as c } from "react";
+import { Icon as d } from "./index4.js";
+const E = ({
   title: i,
   content: r,
   defaultOpen: a,
-  overflow: o
+  overflow: o,
+  titleClassName: s = "",
+  showSeparator: l = !0
 }) => {
-  const [t, n] = s(!1);
-  return l(() => {
+  const [t, n] = m(!1);
+  return c(() => {
     n(a || !1);
   }, [a]), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", {
     className: "flex items-center cursor-pointer max-w-[50vw]",
     onClick: () => n(!t)
   }, /* @__PURE__ */ e.createElement("div", {
     className: `transform transition-transform duration-300 ${t ? "rotate-90" : ""}`
-  }, /* @__PURE__ */ e.createElement(m, {
+  }, /* @__PURE__ */ e.createElement(d, {
     name: "rightSide"
   })), /* @__PURE__ */ e.createElement("h4", {
-    className: "text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px]"
+    className: `text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${s}`
   }, i)), /* @__PURE__ */ e.createElement("div", {
     className: `
         overflow-${o || "hidden"}
@@ -26,11 +28,11 @@ const f = ({
         ml-1
         mt-[1vw]
         ${t ? "max-h-[1000vh] opacity-100 visible h-auto" : "max-h-0 opacity-0 invisible h-0"}`
-  }, r), /* @__PURE__ */ e.createElement("div", {
+  }, r), l && /* @__PURE__ */ e.createElement("div", {
     className: `h-[1px] bg-[#E5E7EB] ${t ? "hidden" : "block"}`
   }));
 };
 export {
-  f as Accordion
+  E as Accordion
 };
 //# sourceMappingURL=index29.js.map

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.js","sources":["../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface AccordionProps {\n  title: string;\n  content: React.ReactNode;\n  defaultOpen?: boolean;\n  overflow?: \"hidden\" | \"visible\" | \"scroll\" | \"auto\" | undefined | string;\n}\n\nexport const Accordion: FC<AccordionProps> = ({ title, content, defaultOpen, overflow }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(()=>{\n    setIsOpen(defaultOpen || false)\n  },[defaultOpen])\n  return (\n    <div>\n      <div className='flex items-center cursor-pointer max-w-[50vw]' onClick={() => setIsOpen(!isOpen)}>\n        <div className={`transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}>\n          <Icon name=\"rightSide\" />\n        </div>\n        <h4 className=\"text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px]\">{title}</h4>\n      </div>\n      <div className={`\n        overflow-${overflow || \"hidden\"}\n        transition-all\n        duration-300\n        ml-1\n        mt-[1vw]\n        ${isOpen \n          ? 'max-h-[1000vh] opacity-100 visible h-auto'\n          : 'max-h-0 opacity-0 invisible h-0'\n        }`}>\n        {content}\n      </div>\n      <div className={`h-[1px] bg-[#E5E7EB] ${!isOpen ? 'block' : 'hidden'}`}></div>\n    </div>\n  );\n};\n"],"names":["Accordion","title","content","defaultOpen","overflow","isOpen","setIsOpen","useState","useEffect","createElement","React","className","onClick","Icon","name"],"mappings":";;AAUO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,SAAAA;AAAAA,EAASC,aAAAA;AAAAA,EAAaC,UAAAA;AAAS,MAAM;AAC1F,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,SAAAA,EAAU,MAAI;AACZF,IAAAA,EAAUH,KAAe,EAAK;AAAA,EAAA,GAC9B,CAACA,CAAW,CAAC,qBAEbM,cACEC,OAAAA,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,IAAgDC,SAASA,MAAMN,EAAU,CAACD,CAAM;AAAA,EAAA,GAC7FI,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKE,WAAW,+CAA+CN,IAAS,cAAc,EAAE;AAAA,EAAA,GACtFI,gBAAAA,EAAAA,cAACI,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GACLJ,gBAAAA,EAAAD,cAAA,MAAA;AAAA,IAAIE,WAAU;AAAA,KAAsEV,CAAU,CAC3F,GACLS,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKE,WAAW;AAAA,mBACHP,KAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7BC,IACE,8CACA,iCAAiC;AAAA,EAEpCH,GAAAA,CACE,GACLQ,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKE,WAAW,wBAAyBN,IAAmB,WAAV,OAAkB;AAAA,EAAA,CAAS,CAC1E;AAET;"}
+{"version":3,"file":"index29.js","sources":["../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface AccordionProps {\n  title: string;\n  titleClassName?: string;\n  content: React.ReactNode;\n  defaultOpen?: boolean;\n  showSeparator?: boolean;\n  overflow?: 'hidden' | 'visible' | 'scroll' | 'auto' | undefined | string;\n}\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  content,\n  defaultOpen,\n  overflow,\n  titleClassName = '',\n  showSeparator = true\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n  return (\n    <div>\n      <div className=\"flex items-center cursor-pointer max-w-[50vw]\" onClick={() => setIsOpen(!isOpen)}>\n        <div className={`transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}>\n          <Icon name=\"rightSide\" />\n        </div>\n        <h4 className={`text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${titleClassName}`}>\n          {title}\n        </h4>\n      </div>\n      <div\n        className={`\n        overflow-${overflow || 'hidden'}\n        transition-all\n        duration-300\n        ml-1\n        mt-[1vw]\n        ${isOpen ? 'max-h-[1000vh] opacity-100 visible h-auto' : 'max-h-0 opacity-0 invisible h-0'}`}\n      >\n        {content}\n      </div>\n      {showSeparator && <div className={`h-[1px] bg-[#E5E7EB] ${!isOpen ? 'block' : 'hidden'}`}></div>}\n    </div>\n  );\n};\n"],"names":["Accordion","title","content","defaultOpen","overflow","titleClassName","showSeparator","isOpen","setIsOpen","useState","useEffect","createElement","React","className","onClick","Icon","name"],"mappings":";;AAYO,MAAMA,IAAgCA,CAAC;AAAA,EAC5CC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,eAAAA,IAAgB;AAClB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,SAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUL,KAAe,EAAK;AAAA,EAAA,GAC7B,CAACA,CAAW,CAAC,qBAEdQ,cACEC,OAAAA,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,IAAgDC,SAASA,MAAMN,EAAU,CAACD,CAAM;AAAA,EAAA,GAC7FI,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKE,WAAW,+CAA+CN,IAAS,cAAc,EAAE;AAAA,EAAA,GACtFI,gBAAAA,EAAAA,cAACI,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GACLJ,gBAAAA,EAAAD,cAAA,MAAA;AAAA,IAAIE,WAAW,sEAAsER,CAAc;AAAA,KAChGJ,CACC,CACD,GACLW,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEE,WAAW;AAAA,mBACAT,KAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7BG,IAAS,8CAA8C,iCAAiC;AAAA,KAEzFL,CACE,GACJI,KAAiBM,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKE,WAAW,wBAAyBN,IAAmB,WAAV,OAAkB;AAAA,EAAA,CAAS,CAC5F;AAET;"}

package/dist/index30.js

@@ -1,50 +1,36 @@
-import c, { useState as p, useRef as y } from "react";
-/* empty css        */
-import { Icon as E } from "./index4.js";
-function I({
-  value: m,
-  onChange: e,
-  placeholder: o
-}) {
-  const [a, l] = p([...m]), [i, r] = p(""), u = y(null), f = (t) => {
-    if (t.key === "Enter" && i.trim()) {
-      t.preventDefault();
-      const s = [...a, i.trim()];
-      l(s), r(""), e == null || e(s);
-    } else if (t.key === "Backspace" && i === "" && a.length > 0) {
-      const s = a.slice(0, -1);
-      l(s), e == null || e(s);
-    }
-  };
-  return /* @__PURE__ */ c.createElement("div", {
-    className: "input-with-tags-container",
-    onClick: () => {
-      var t;
-      return (t = u.current) == null ? void 0 : t.focus();
-    }
-  }, a.map((t, s) => /* @__PURE__ */ c.createElement("span", {
-    key: s,
-    className: "tag-in-inputwithtags"
-  }, t, /* @__PURE__ */ c.createElement("span", {
-    className: "close-icon-in-inputwithtags",
-    onClick: (w) => {
-      w.stopPropagation();
-      const n = a.filter((T, k) => k !== s);
-      l(n), e == null || e(n);
-    }
-  }, /* @__PURE__ */ c.createElement(E, {
-    name: "close"
-  })))), /* @__PURE__ */ c.createElement("input", {
-    className: "input-with-tags-input",
-    ref: u,
-    type: "text",
-    value: i,
-    onChange: (t) => r(t.target.value),
-    onKeyDown: f,
-    placeholder: o
-  }));
-}
+import e, { useState as o, useEffect as i } from "react";
+import { Icon as m } from "./index4.js";
+const f = ({
+  renderAccordionContents: a,
+  renderAccordionSrcElement: c,
+  defaultOpen: n,
+  className: r = ""
+}) => {
+  const [t, s] = o(!1);
+  return i(() => {
+    s(n || !1);
+  }, [n]), /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion ${r}`
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "flex items-center cursor-pointer",
+    onClick: () => s(!t)
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion-icon transform transition-transform duration-300 ${t ? "rotate-90" : ""}`
+  }, /* @__PURE__ */ e.createElement(m, {
+    name: "rightSide"
+  })), /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-accordion-elements flex-1"
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-accordion-src-element"
+  }, c({
+    isOpen: t
+  })), t && /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-accordion-content transition-all duration-300 mt-1"
+  }, a({
+    isOpen: t
+  })))));
+};
 export {
-  I as InputWithTags
+  f as CustomAccordion
 };
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n}\n\nexport function InputWithTags({ value, onChange, placeholder }: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            // Remove the last tag when backspace is pressed on empty input\n            const newTags = tags.slice(0, -1);\n            setTags(newTags);\n            onChange?.(newTags);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-container\" onClick={() => inputRef.current?.focus()} >\n            {tags.map((tag, index) => (\n                <span key={index} className=\"tag-in-inputwithtags\">\n                    {tag} \n                    <span\n                    className=\"close-icon-in-inputwithtags\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        const newTags = tags.filter((_, i) => i !== index);\n                        setTags(newTags);\n                        onChange?.(newTags);\n                    }}\n                    >\n                        <Icon name=\"close\" />\n                    </span>\n                </span>\n            ))}\n            <input\n                className=\"input-with-tags-input\"\n                ref={inputRef}\n                type=\"text\"\n                value={inputValue}\n                onChange={(e) => setInputValue(e.target.value)}\n                onKeyDown={handleKeyDown}\n                placeholder={placeholder}\n            />\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","tags","setTags","inputValue","setInputValue","inputRef","handleKeyDown","e","key","trim","preventDefault","newTags","length","slice","React","createElement","className","onClick","_a","current","focus","map","tag","index","stopPropagation","filter","_","i","name","ref","type","target","onKeyDown"],"mappings":"AASO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,UAAAA;AAAAA,EAAUC,aAAAA;AAAgC,GAAG;AAC1E,QAAA,CAACC,GAAMC,CAAO,IAAIR,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACK,GAAYC,CAAa,IAAIV,EAAS,EAAE,GACzCW,IAAWV,EAAyB,IAAI,GAExCW,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWL,EAAWM,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMC,IAAU,CAAC,GAAGV,GAAME,EAAWM,MAAM;AAC3CP,MAAAA,EAAQS,CAAO,GACfP,EAAc,EAAE,GAChBL,KAAAA,QAAAA,EAAWY;AAAAA,IAAO,WACXJ,EAAEC,QAAQ,eAAeL,MAAe,MAAMF,EAAKW,SAAS,GAAG;AAEtE,YAAMD,IAAUV,EAAKY,MAAM,GAAG,EAAE;AAChCX,MAAAA,EAAQS,CAAO,GACfZ,KAAAA,QAAAA,EAAWY;AAAAA,IAAO;AAAA,EAE1B;AAGIG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA4BC,SAASA,MAAAA;AArBrD,UAAAC;AAqB2Db,cAAAA,IAAAA,EAASc,YAATd,gBAAAA,EAAkBe;AAAAA;AAAAA,EAAM,GAC7EnB,EAAKoB,IAAI,CAACC,GAAKC,MACZT,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMP,KAAKe;AAAAA,IAAOP,WAAU;AAAA,EACvBM,GAAAA,GACDP,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACAC,WAAU;AAAA,IACVC,SAAUV,CAAMA,MAAA;AACZA,MAAAA,EAAEiB,gBAAgB;AAClB,YAAMb,IAAUV,EAAKwB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAK;AACjDrB,MAAAA,EAAQS,CAAO,GACfZ,KAAAA,QAAAA,EAAWY;AAAAA,IAAO;AAAA,EACtB,GAEII,gBAAAA,EAAAA,cAACnB,GAAI;AAAA,IAACgC,MAAK;AAAA,EAAS,CAAA,CAClB,CACJ,CACT,GACDd,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIC,WAAU;AAAA,IACVa,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLhC,OAAOK;AAAAA,IACPJ,UAAWQ,CAAAA,MAAMH,EAAcG,EAAEwB,OAAOjC,KAAK;AAAA,IAC7CkC,WAAW1B;AAAAA,IACXN,aAAAA;AAAAA,EAAAA,CACH,CACA;AAEb;"}
+{"version":3,"file":"index30.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  defaultOpen?: boolean;\n  className?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({ renderAccordionContents, renderAccordionSrcElement, defaultOpen, className = '' }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(()=>{\n    setIsOpen(defaultOpen || false)\n  },[defaultOpen])\n\n  return (\n    <div className={`se-design-accordion ${className}`}>\n      <div className='flex items-center cursor-pointer' onClick={() => setIsOpen(!isOpen)}>\n        <div className={`se-design-accordion-icon transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}>\n          <Icon name=\"rightSide\" />\n        </div>\n        <div className='se-design-accordion-elements flex-1'>\n          <div className='se-design-accordion-src-element'>{renderAccordionSrcElement({isOpen})}</div>\n          {isOpen &&\n            (<div className='se-design-accordion-content transition-all duration-300 mt-1'>\n              {renderAccordionContents({isOpen})}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","defaultOpen","className","isOpen","setIsOpen","useState","useEffect","React","createElement","onClick","Icon","name"],"mappings":";;AAUO,MAAMA,IAA4CA,CAAC;AAAA,EAAEC,yBAAAA;AAAAA,EAAyBC,2BAAAA;AAAAA,EAA2BC,aAAAA;AAAAA,EAAaC,WAAAA,IAAY;AAAG,MAAM;AAChJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,SAAAA,EAAU,MAAI;AACZF,IAAAA,EAAUH,KAAe,EAAK;AAAA,EAAA,GAC9B,CAACA,CAAW,CAAC,GAGbM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAW,uBAAuBA,CAAS;AAAA,EAAA,GAC9CM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,IAAmCO,SAASA,MAAML,EAAU,CAACD,CAAM;AAAA,EAAA,GAChFK,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAW,wEAAwEC,IAAS,cAAc,EAAE;AAAA,EAAA,GAC/GK,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GACLJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,EAAA,GACbM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,KAAmCF,EAA0B;AAAA,IAACG,QAAAA;AAAAA,EAAO,CAAA,CAAO,GAC1FA,KACEI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,KACbH,EAAwB;AAAA,IAACI,QAAAA;AAAAA,EAAAA,CAAO,CAC9B,CAEJ,CACF,CACF;AAET;"}

package/dist/index31.js

@@ -1,41 +1,50 @@
-import e from "react";
+import c, { useState as p, useRef as y } from "react";
 /* empty css        */
-function f({
-  value: n,
-  onChange: i,
-  disabled: r,
-  maxLength: t,
-  tag: m,
-  error: a,
-  errorMessage: o,
-  label: c,
-  placeholder: s,
-  style: l,
-  inputStyle: d
+import { Icon as E } from "./index4.js";
+function I({
+  value: m,
+  onChange: e,
+  placeholder: o
 }) {
-  const p = m || "input";
-  return /* @__PURE__ */ e.createElement("div", {
-    className: "main-container",
-    style: l
-  }, c && /* @__PURE__ */ e.createElement("div", {
-    className: "label-container"
-  }, c), /* @__PURE__ */ e.createElement(p, {
-    value: n,
-    onChange: (E) => i(E.target.value),
-    disabled: r,
-    className: `${a ? "input-container-error" : "input-container-default"} ${r ? "input-container-disabled" : ""}`,
-    maxlength: t || void 0,
-    placeholder: s,
-    style: d
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: `${a ? "error-and-max-word" : "max-word-container"}`
-  }, a && /* @__PURE__ */ e.createElement("div", {
-    className: "error-message"
-  }, o), t && /* @__PURE__ */ e.createElement("div", {
-    className: "max-word"
-  }, t && (n == null ? void 0 : n.length) + "/" + t)));
+  const [a, l] = p([...m]), [i, r] = p(""), u = y(null), f = (t) => {
+    if (t.key === "Enter" && i.trim()) {
+      t.preventDefault();
+      const s = [...a, i.trim()];
+      l(s), r(""), e == null || e(s);
+    } else if (t.key === "Backspace" && i === "" && a.length > 0) {
+      const s = a.slice(0, -1);
+      l(s), e == null || e(s);
+    }
+  };
+  return /* @__PURE__ */ c.createElement("div", {
+    className: "input-with-tags-container",
+    onClick: () => {
+      var t;
+      return (t = u.current) == null ? void 0 : t.focus();
+    }
+  }, a.map((t, s) => /* @__PURE__ */ c.createElement("span", {
+    key: s,
+    className: "tag-in-inputwithtags"
+  }, t, /* @__PURE__ */ c.createElement("span", {
+    className: "close-icon-in-inputwithtags",
+    onClick: (w) => {
+      w.stopPropagation();
+      const n = a.filter((T, k) => k !== s);
+      l(n), e == null || e(n);
+    }
+  }, /* @__PURE__ */ c.createElement(E, {
+    name: "close"
+  })))), /* @__PURE__ */ c.createElement("input", {
+    className: "input-with-tags-input",
+    ref: u,
+    type: "text",
+    value: i,
+    onChange: (t) => r(t.target.value),
+    onKeyDown: f,
+    placeholder: o
+  }));
 }
 export {
-  f as Input
+  I as InputWithTags
 };
 //# sourceMappingURL=index31.js.map