se-design 0.0.106 → 0.0.108

package/dist/index29.js

@@ -1,38 +1,102 @@
-import e, { useState as m, useEffect as c } from "react";
+import e from "react";
+import { Button as N } from "./index3.js";
+import { Badge as I } from "./index7.js";
 import { Icon as d } from "./index4.js";
-const E = ({
-  title: i,
-  content: r,
-  defaultOpen: a,
-  overflow: o,
-  titleClassName: s = "",
-  showSeparator: l = !0
+/* empty css         */
+const t = {
+  widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
+  widgetImageCtn: "cursor-pointer",
+  descriptionCtn: "p-4 flex flex-col",
+  widgetTitle: "text-[var(--color-gray-900)] mt-[4px] mb-[8px]",
+  widgetDescription: "text-[var(--color-gray-700)] mb-[4px]",
+  widgetLinkCta: "text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]",
+  widgetButtonCta: "self-start",
+  widgetBadge: "w-fit",
+  webinarInfoCtn: "flex flex-col gap-2",
+  webinarSpeaker: "text-[var(--color-gray-700)]",
+  webinarDate: "text-[var(--color-gray-700)]",
+  webinarDescriptionInfo: "flex gap-2",
+  webinarTimeInfo: "flex gap-2",
+  requestFeatureCtn: "flex gap-[12px]",
+  requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
+  requestFeatureDescriptionCtn: "flex flex-col"
+}, B = ({
+  widgetClassName: g = "",
+  widgetType: a,
+  widgetTitle: r,
+  widgetDescription: l,
+  widgetImage: p,
+  hasImage: f = !1,
+  hasButtonCta: n = !1,
+  hasLinkCta: o = !1,
+  ctaText: i = "",
+  hasBadge: x = !1,
+  badgeText: u = "",
+  buttonBgColor: w = "secondary",
+  onCtaClick: b,
+  onWidgetClick: v,
+  webinarDateInfo: s,
+  webinarSpeaker: c
 }) => {
-  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(d, {
-    name: "rightSide"
-  })), /* @__PURE__ */ e.createElement("h4", {
-    className: `text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${s}`
-  }, i)), /* @__PURE__ */ e.createElement("div", {
-    className: `
-        overflow-${o || "hidden"}
-        transition-all
-        duration-300
-        ml-1
-        mt-[1vw]
-        ${t ? "max-h-[1000vh] opacity-100 visible h-auto" : "max-h-0 opacity-0 invisible h-0"}`
-  }, r), l && /* @__PURE__ */ e.createElement("div", {
-    className: `h-[1px] bg-[#E5E7EB] ${t ? "hidden" : "block"}`
+  const C = x && /* @__PURE__ */ e.createElement(I, {
+    label: u,
+    className: t.widgetBadge,
+    bgColor: "var(--color-yellow-50)",
+    textColor: "var(--color-yellow-400)",
+    fontWeight: "normal"
+  }), m = (o || n) && /* @__PURE__ */ e.createElement(e.Fragment, null, o && /* @__PURE__ */ e.createElement("span", {
+    className: t.widgetLinkCta
+  }, i), n && /* @__PURE__ */ e.createElement(N, {
+    type: w,
+    size: "md",
+    label: i,
+    customClassName: `${t.widgetButtonCta} mt-[4px]`,
+    onClick: b
+  })), E = f && /* @__PURE__ */ e.createElement("div", {
+    className: `${t.widgetImageCtn} widget-image-ctn`
+  }, /* @__PURE__ */ e.createElement("img", {
+    src: p,
+    alt: "widget-image"
   }));
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `${t.widgetCtn} ${g} widget-ctn`,
+    onClick: v
+  }, a !== "general" && E, /* @__PURE__ */ e.createElement("div", {
+    className: t.descriptionCtn
+  }, a !== "general" && C, a !== "request-feature" && /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetTitle} widget-title`
+  }, r), ["promotion", "general"].includes(a) && /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetDescription} widget-description`
+  }, l), a === "webinar" && /* @__PURE__ */ e.createElement("div", {
+    className: t.webinarInfoCtn
+  }, c && /* @__PURE__ */ e.createElement("div", {
+    className: `${t.webinarDescriptionInfo} align-baseline`
+  }, /* @__PURE__ */ e.createElement(d, {
+    name: "people",
+    className: "relative top-[2px]"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.webinarSpeaker
+  }, c)), s && /* @__PURE__ */ e.createElement("div", {
+    className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
+  }, /* @__PURE__ */ e.createElement(d, {
+    name: "clock",
+    className: "relative top-[2px]"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.webinarDate
+  }, s))), a === "request-feature" ? /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureCtn
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureImageCtn
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureDescriptionCtn
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetTitle} widget-title`
+  }, r), /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetDescription} widget-description`
+  }, l), m)) : m));
 };
 export {
-  E as Accordion
+  B as Widget,
+  B as default
 };
 //# 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  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;"}
+{"version":3,"file":"index29.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n  widgetClassName?: string;\n  widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n  widgetTitle?: string;\n  hasBadge?: boolean;\n  webinarSpeaker?: string;\n  badgeText?: string;\n  widgetDescription?: string;\n  webinarDateInfo?: string;\n  hasImage?: boolean;\n  widgetImage?: string;\n  hasButtonCta?: boolean;\n  buttonBgColor?: 'primary' | 'secondary';\n  hasLinkCta?: boolean;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n  widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n  widgetImageCtn: 'cursor-pointer',\n  descriptionCtn: 'p-4 flex flex-col',\n  widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n  widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n  widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n  widgetButtonCta: 'self-start',\n  widgetBadge: 'w-fit',\n  webinarInfoCtn: 'flex flex-col gap-2',\n  webinarSpeaker: 'text-[var(--color-gray-700)]',\n  webinarDate: 'text-[var(--color-gray-700)]',\n  webinarDescriptionInfo: 'flex gap-2',\n  webinarTimeInfo: 'flex gap-2',\n  requestFeatureCtn: 'flex gap-[12px]',\n  requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n  requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n  widgetClassName = \"\",\n  widgetType,\n  widgetTitle,\n  widgetDescription,\n  widgetImage,\n  hasImage = false,\n  hasButtonCta = false,\n  hasLinkCta = false,\n  ctaText = \"\",\n  hasBadge = false,\n  badgeText = \"\",\n  buttonBgColor = 'secondary',\n  onCtaClick,\n  onWidgetClick,\n  webinarDateInfo,\n  webinarSpeaker,\n}) => {\n\n  const renderBadge = hasBadge && (\n    <Badge\n      label={badgeText}\n      className={className.widgetBadge}\n      bgColor=\"var(--color-yellow-50)\"\n      textColor=\"var(--color-yellow-400)\"\n      fontWeight=\"normal\"\n    />\n  );\n\n  const renderCTA = (hasLinkCta || hasButtonCta) && (\n    <React.Fragment>\n      {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n      {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} customClassName={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n    </React.Fragment>\n  );\n\n  const renderImage = hasImage && (\n    <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n      <img src={widgetImage} alt=\"widget-image\"/>\n    </div>\n  );\n\n  return (\n    <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n      {widgetType !== \"general\" && renderImage}\n      <div className={className.descriptionCtn}>\n        {widgetType !== \"general\" && renderBadge}\n        {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n        {[\"promotion\", \"general\"].includes(widgetType!) && (\n          <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n        )}\n\n        {widgetType === \"webinar\" && (\n          <div className={className.webinarInfoCtn}>\n            {webinarSpeaker && (\n            <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n              <Icon name=\"people\" className=\"relative top-[2px]\" />\n              <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n            </div>\n            )}\n            {webinarDateInfo && (\n               <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n                <Icon name=\"clock\" className=\"relative top-[2px]\" />\n                <span className={className.webinarDate}>{webinarDateInfo}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {widgetType === \"request-feature\" ? (\n          <div className={className.requestFeatureCtn}>\n            <div className={className.requestFeatureImageCtn} />\n            <div className={className.requestFeatureDescriptionCtn}>\n              <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n              <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n              {renderCTA}\n            </div>\n          </div>\n        ) : (\n          renderCTA\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","createElement","label","bgColor","textColor","fontWeight","renderCTA","React","Fragment","type","size","customClassName","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}

package/dist/index30.js

@@ -1,36 +1,61 @@
-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
-  })))));
-};
+var f = Object.defineProperty, E = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+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 = {}))
+    C.call(a, t) && s(e, t, a[t]);
+  if (i)
+    for (var t of i(a))
+      N.call(a, t) && s(e, t, a[t]);
+  return e;
+}, m = (e, a) => E(e, v(a));
+import r, { useRef as g } from "react";
+function p(e) {
+  const {
+    label: a,
+    value: t,
+    checked: l,
+    disabled: h,
+    name: u,
+    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 ${w}`,
+    onClick: () => {
+      var n;
+      return (n = c.current) == null ? void 0 : n.click();
+    },
+    style: {
+      width: b || "20vw"
+    }
+  }, /* @__PURE__ */ r.createElement("input", {
+    ref: c,
+    type: "radio",
+    id: t,
+    name: u,
+    value: t,
+    checked: l,
+    disabled: h,
+    className: "mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50",
+    onChange: () => {
+      o && o(m(d({}, e), {
+        checked: !0
+      }));
+    }
+  }), /* @__PURE__ */ r.createElement("label", {
+    htmlFor: t,
+    className: `${e.helperLabel && "flex flex-col"} cursor-pointer`
+  }, /* @__PURE__ */ r.createElement("span", {
+    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 {
-  f as CustomAccordion
+  p as Radio
 };
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"index30.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/index31.js

@@ -1,50 +1,42 @@
-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);
+var d = Object.defineProperty, m = Object.defineProperties;
+var s = Object.getOwnPropertyDescriptors;
+var u = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var o = (n, a, e) => a in n ? d(n, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[a] = e, c = (n, a) => {
+  for (var e in a || (a = {}))
+    g.call(a, e) && o(n, e, a[e]);
+  if (u)
+    for (var e of u(a))
+      f.call(a, e) && o(n, e, a[e]);
+  return n;
+}, l = (n, a) => m(n, s(a));
+import i from "react";
+import { Radio as h } from "./index30.js";
+function t() {
+  return t = Object.assign ? Object.assign.bind() : function(n) {
+    for (var a = 1; a < arguments.length; a++) {
+      var e = arguments[a];
+      for (var r in e) ({}).hasOwnProperty.call(e, r) && (n[r] = e[r]);
     }
+    return n;
+  }, t.apply(null, arguments);
+}
+function b(n) {
+  const a = (e) => {
+    n.onRadioGroupChange(l(c({}, e), {
+      checked: !0
+    }));
   };
-  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
-  }));
+  return /* @__PURE__ */ i.createElement("div", {
+    className: "flex gap-2"
+  }, n.options.map((e) => /* @__PURE__ */ i.createElement(h, t({
+    key: e.value
+  }, e, {
+    onChange: a,
+    checked: e.value === n.value
+  }))));
 }
 export {
-  I as InputWithTags
+  b as RadioGroup
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.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":"index31.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n  options: RadioProps[];\n  onRadioGroupChange: (obj: RadioProps) => void;\n  value?: string;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  return (\n    <div className=\"flex gap-2\">\n      {props.options.map((option) => (\n        <Radio key={option.value} {...option} onChange={handleRadioChange} checked={option.value === props.value} />\n      ))}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","handleRadioChange","obj","onRadioGroupChange","__spreadProps","__spreadValues","checked","React","createElement","className","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASO,SAASA,EAAWC,GAAwB;AAC3CC,QAAAA,IAAoBA,CAACC,MAAoB;AAC7CF,IAAAA,EAAMG,mBAAmBC,EAAAC,EAAA,IAAKH,IAAL;AAAA,MAAUI,SAAS;AAAA,IAAA,EAAM;AAAA,EACpD;AAEEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZT,EAAMU,QAAQC,IAAKC,OAClBJ,gBAAAA,EAAAA,cAACK,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUhB;AAAAA,IAAmBK,SAASM,EAAOI,UAAUhB,EAAMgB;AAAAA,EAAQ,CAAA,CAAA,CAC5G,CACE;AAET;"}

package/dist/index32.js

@@ -1,41 +1,38 @@
-import e 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
-}) {
-  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)));
-}
+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,
+  titleClassName: s = "",
+  showSeparator: l = !0
+}) => {
+  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(d, {
+    name: "rightSide"
+  })), /* @__PURE__ */ e.createElement("h4", {
+    className: `text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${s}`
+  }, i)), /* @__PURE__ */ e.createElement("div", {
+    className: `
+        overflow-${o || "hidden"}
+        transition-all
+        duration-300
+        ml-1
+        mt-[1vw]
+        ${t ? "max-h-[1000vh] opacity-100 visible h-auto" : "max-h-0 opacity-0 invisible h-0"}`
+  }, r), l && /* @__PURE__ */ e.createElement("div", {
+    className: `h-[1px] bg-[#E5E7EB] ${t ? "hidden" : "block"}`
+  }));
+};
 export {
-  f as Input
+  E as Accordion
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number | undefined;\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n  value,\n  onChange,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle\n}: InputProps) {\n  const Element = tag || 'input';\n\n  return (\n    <div className=\"main-container\" style={style}>\n      {label && <div className=\"label-container\">{label}</div>}\n      {React.createElement(Element, {\n        value,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n        disabled,\n        className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n        maxlength: maxLength ? maxLength : undefined,\n        placeholder: placeholder,\n        style: inputStyle\n      })}\n      <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n        {error && <div className=\"error-message\">{errorMessage}</div>}\n        {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["React__default","Input","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","maxlength","undefined","length"],"mappings":"AAiBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAiBL,OAAAA;AAAAA,EAC7BF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BX,OAAAA;AAAAA,IACAC,UAAUA,CAACc,MAA2Cd,EAASc,EAAEC,OAAOhB,KAAK;AAAA,IAC7EE,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHe,WAAWd,KAAwBe;AAAAA,IACnCV,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaH,KAAAA,gBAAAA,EAAOmB,UAAS,MAAMhB,CAAe,CACxF,CACF;AAET;"}
+{"version":3,"file":"index32.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/index33.js

@@ -1,37 +1,36 @@
-import e from "react";
-/* empty css        */
-const r = {
-  progressBarCtn: "flex items-center gap-2",
-  progressBar: "flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden",
-  progressBarProgress: "h-full rounded-[12px]",
-  stepsCount: "steps-count"
-}, d = ({
-  totalTasks: t = 0,
-  completedTasks: o = 0,
-  progressBarCtnClassName: n = "",
-  needPercentageCompleted: c = !0,
-  progressBarColor: s
+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 a = t > 0 ? o / t * 100 : 0;
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `${r.progressBarCtn} ${n} progress-bar-ctn`,
-    style: {
-      width: "100%"
-    }
+  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: r.progressBar
+    className: "flex items-center cursor-pointer",
+    onClick: () => s(!t)
   }, /* @__PURE__ */ e.createElement("div", {
-    className: r.progressBarProgress,
-    style: {
-      width: `${a}%`,
-      background: `${s || "linear-gradient(to right, var(--color-green-500), var(--color-green-400))"}`,
-      transition: "width 0.4s ease-in-out"
-    }
-  })), c && /* @__PURE__ */ e.createElement("div", {
-    className: r.stepsCount
-  }, `${Math.round(a)}% completed`));
+    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 {
-  d as ProgressBar
+  f as CustomAccordion
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(to right, var(--color-green-500), var(--color-green-400))'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAEhFM,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,2EAA2E;AAAA,MAChIO,YAAY;AAAA,IAAA;AAAA,EAEV,CAAA,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}
+{"version":3,"file":"index33.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;"}