se-design 0.0.116 → 0.0.118

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  menuContent?: (data: any) => React.ReactNode;\n}\n\nconst menuClasses = {\n  base: 'se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-1',\n  active: 'bg-[var(--color-blue-450)]',\n  hover: 'hover:bg-[var(--color-blue-450)]'\n};\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n  className = '',\n  automationId = '',\n  popoverContentAutomationId = '',\n  menuContent\n}) => {\n\n  return (\n    <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      popoverContentAutomationId={popoverContentAutomationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`${menuClasses.base} ${displayPopover ? menuClasses.active : ''} ${menuClasses.hover}`}>\n          <Icon name='hamburger' stroke={'var(--color-white)'} />\n        </div>\n      )}\n      renderPopoverContents={(data) => (\n        <div className=\"min-w-[212px]\">\n          {menuContent && <div className='menu-content'>{menuContent(data)}</div>}\n        </div>\n      )}\n    />\n  );\n};\n"],"names":["React__default","Popover","Icon","menuClasses","base","active","hover","HamburgerMenu","className","automationId","popoverContentAutomationId","menuContent","React","createElement","position","renderPopoverSrcElement","displayPopover","name","stroke","renderPopoverContents","data"],"mappings":"AAWA,OAAAA,OAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAc;AAAA,EAClBC,MAAM;AAAA,EACNC,QAAQ;AAAA,EACRC,OAAO;AACT,GAEaC,IAAwCA,CAAC;AAAA,EACpDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,aAAAA;AACF,MAGIC,gBAAAA,EAAAC,cAACZ,GAAO;AAAA,EACNO,WAAAA;AAAAA,EACAM,UAAS;AAAA,EACTL,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAK,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BH,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAW,GAAGL,EAAYC,IAAI,IAAIY,IAAiBb,EAAYE,SAAS,EAAE,IAAIF,EAAYG,KAAK;AAAA,EAAA,GAClGO,gBAAAA,EAAAA,cAACX,GAAI;AAAA,IAACe,MAAK;AAAA,IAAYC,QAAQ;AAAA,EAAA,CAAuB,CACnD;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBP,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EACZG,GAAAA,KAAeE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EAAA,GAAgBG,EAAYS,CAAI,CAAO,CACnE;AAAA,CAER;"}
+{"version":3,"file":"index19.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  menuContent?: (data: any) => React.ReactNode;\n  popoverClassName?: string;\n}\n\nconst menuClasses = {\n  base: 'se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-[3px] flex items-center',\n  active: 'bg-[var(--color-blue-450)]',\n  hover: 'hover:bg-[var(--color-blue-450)]'\n};\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n  className = '',\n  automationId = '',\n  popoverContentAutomationId = '',\n  menuContent,\n  popoverClassName = ''\n}) => {\n\n  return (\n    <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      popoverContentAutomationId={popoverContentAutomationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`${menuClasses.base} ${displayPopover ? menuClasses.active : ''} ${menuClasses.hover}`}>\n          <Icon name='hamburger' stroke={'var(--color-white)'} />\n        </div>\n      )}\n      renderPopoverContents={(data) => (\n        <div className={`min-w-[212px] ${popoverClassName}`}>\n          {menuContent && <div className='menu-content'>{menuContent(data)}</div>}\n        </div>\n      )}\n    />\n  );\n};\n"],"names":["React__default","Popover","Icon","menuClasses","base","active","hover","HamburgerMenu","className","automationId","popoverContentAutomationId","menuContent","popoverClassName","React","createElement","position","renderPopoverSrcElement","displayPopover","name","stroke","renderPopoverContents","data"],"mappings":"AAYA,OAAAA,OAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAc;AAAA,EAClBC,MAAM;AAAA,EACNC,QAAQ;AAAA,EACRC,OAAO;AACT,GAEaC,IAAwCA,CAAC;AAAA,EACpDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,aAAAA;AAAAA,EACAC,kBAAAA,IAAmB;AACrB,MAGIC,gBAAAA,EAAAC,cAACb,GAAO;AAAA,EACNO,WAAAA;AAAAA,EACAO,UAAS;AAAA,EACTN,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAM,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BH,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAW,GAAGL,EAAYC,IAAI,IAAIa,IAAiBd,EAAYE,SAAS,EAAE,IAAIF,EAAYG,KAAK;AAAA,EAAA,GAClGQ,gBAAAA,EAAAA,cAACZ,GAAI;AAAA,IAACgB,MAAK;AAAA,IAAYC,QAAQ;AAAA,EAAA,CAAuB,CACnD;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBP,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAW,iBAAiBI,CAAgB;AAAA,EAC9CD,GAAAA,KAAeG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,EAAA,GAAgBG,EAAYU,CAAI,CAAO,CACnE;AAAA,CAER;"}

package/dist/index23.js

@@ -2,26 +2,26 @@ var I = Object.defineProperty, O = Object.defineProperties;
 var R = Object.getOwnPropertyDescriptors;
 var w = Object.getOwnPropertySymbols;
 var T = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
-var C = (e, t, l) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, E = (e, t) => {
+var x = (e, t, l) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, C = (e, t) => {
   for (var l in t || (t = {}))
-    T.call(t, l) && C(e, l, t[l]);
+    T.call(t, l) && x(e, l, t[l]);
   if (w)
     for (var l of w(t))
-      _.call(t, l) && C(e, l, t[l]);
+      _.call(t, l) && x(e, l, t[l]);
   return e;
-}, S = (e, t) => O(e, R(t));
-import c, { useState as x, useRef as j, useEffect as B } from "react";
+}, E = (e, t) => O(e, R(t));
+import c, { useState as S, useRef as j, useEffect as B } from "react";
 import { Popover as J } from "./index17.js";
 import { Icon as D } from "./index5.js";
 const F = (e) => {
-  const [t, l] = x(!1), [r, f] = x(() => (e == null ? void 0 : e.defaultSelectedValue) || {}), v = j(null), {
+  const [t, l] = S(!1), [r, f] = S(() => (e == null ? void 0 : e.defaultSelectedValue) || {}), v = j(null), {
     selectBy: m = "",
     optionsUniqueBy: d = "",
     displaySelected: h = !1,
     dropDownOptions: i,
     defaultText: y = "Select",
     iconColor: g = "var(--color-gray-700)",
-    disabled: s = !1
+    disabled: b = !1
   } = e;
   B(() => {
     f((e == null ? void 0 : e.defaultSelectedValue) || {});
@@ -29,7 +29,7 @@ const F = (e) => {
   const N = (n) => {
     var a, o;
     f(n), (a = v.current) == null || a.togglePopover(), (o = e == null ? void 0 : e.onOptionClick) == null || o.call(e, n);
-  }, b = (n) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(n) : /* @__PURE__ */ c.createElement("span", {
+  }, s = (n) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(n) : /* @__PURE__ */ c.createElement("span", {
     className: "option-chip"
   }, n[m] || y), k = (n) => {
     const a = n[m], o = r[m] || y, P = d != null && d.length ? n[d] == r[d] : !0, u = h && a === o && P;
@@ -37,19 +37,19 @@ const F = (e) => {
       key: `$drop-option-${a}`,
       className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${u ? "selected" : ""}`,
       onClick: () => N(n)
-    }, b(S(E({}, n), {
+    }, s(E(C({}, n), {
       isOptionSelected: u
     })), u && /* @__PURE__ */ c.createElement(D, {
       name: "checkmark",
       stroke: g
     }));
-  }, V = () => /* @__PURE__ */ c.createElement("div", {
+  }, $ = () => /* @__PURE__ */ c.createElement("div", {
     className: "dropdown-content dropdown-options"
-  }, i == null ? void 0 : i.map((n) => k(n))), $ = () => {
-    const a = `dropdown-src-element flex px-3 py-2 border rounded-md ${t ? "border-[var(--color-gray-900)]" : "border-[var(--color-gray-200)]"} `;
+  }, i == null ? void 0 : i.map((n) => k(n))), V = () => {
+    const a = `dropdown-src-element flex px-3 py-2 border rounded-md ${t ? "border-[var(--color-gray-900)]" : "border-[var(--color-gray-200)]"} flex items-center`;
     return /* @__PURE__ */ c.createElement("div", {
       className: a
-    }, b(r), /* @__PURE__ */ c.createElement(D, {
+    }, s(r), /* @__PURE__ */ c.createElement(D, {
       name: "chevron",
       rotation: t ? "180" : "0",
       className: "ml-auto transition-transform",
@@ -57,20 +57,20 @@ const F = (e) => {
     }));
   };
   return /* @__PURE__ */ c.createElement("div", {
-    className: `se-design-dropdown-container ${e == null ? void 0 : e.className}`,
+    className: `se-design-dropdown-container${e != null && e.className ? ` ${e == null ? void 0 : e.className}` : ""}`,
     style: e == null ? void 0 : e.style
   }, (e == null ? void 0 : e.label) && /* @__PURE__ */ c.createElement("div", {
     className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
   }, e == null ? void 0 : e.label), /* @__PURE__ */ c.createElement("div", {
     style: e == null ? void 0 : e.style,
-    className: `${s ? "bg-[var(--color-gray-200)] rounded-md cursor-not-allowed" : ""}`
+    className: `${b ? "bg-[var(--color-gray-200)] rounded-md cursor-not-allowed" : ""}`
   }, /* @__PURE__ */ c.createElement(J, {
     ref: v,
-    renderPopoverContents: V,
+    renderPopoverContents: $,
     contentWidth: "full",
-    renderPopoverSrcElement: $,
+    renderPopoverSrcElement: V,
     onPopoverToggle: (n) => l(n),
-    disabled: s
+    disabled: b
   })));
 };
 export {

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(\n    () => props?.defaultSelectedValue || {}\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValue(props?.defaultSelectedValue || {});\n  }, [props?.defaultSelectedValue]);\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>;\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const dropDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor} `;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\n        <Icon\n          name={'chevron'}\n          rotation={isDropDownOpen ? '180' : '0'}\n          className={`ml-auto transition-transform`}\n          stroke={iconColor}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <div className={`se-design-dropdown-container ${props?.className}`} style={props?.style}>\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-200)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","renderDropdownSelect","dropDownSelectClass","rotation","style","label","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"mappings":"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"}
+{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(\n    () => props?.defaultSelectedValue || {}\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValue(props?.defaultSelectedValue || {});\n  }, [props?.defaultSelectedValue]);\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>;\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const dropDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor} flex items-center`;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\n        <Icon\n          name={'chevron'}\n          rotation={isDropDownOpen ? '180' : '0'}\n          className={`ml-auto transition-transform`}\n          stroke={iconColor}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <div className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`} style={props?.style}>\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-200)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","renderDropdownSelect","dropDownSelectClass","rotation","style","label","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"mappings":"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"}

package/dist/index26.js

@@ -1,49 +1,64 @@
-import a, { useEffect as o } from "react";
-import { Icon as v } from "./index5.js";
+var E = Object.defineProperty;
+var h = Object.getOwnPropertySymbols;
+var N = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var b = (a, t, e) => t in a ? E(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e, d = (a, t) => {
+  for (var e in t || (t = {}))
+    N.call(t, e) && b(a, e, t[e]);
+  if (h)
+    for (var e of h(t))
+      _.call(t, e) && b(a, e, t[e]);
+  return a;
+};
+import l, { useEffect as i } from "react";
+import { Icon as x } from "./index5.js";
 /* empty css         */
-const N = (i) => {
+const k = (a) => {
   const {
-    content: c,
-    className: n = "",
-    alignment: m,
-    noShadow: u,
-    position: l = "fxd",
-    isOpen: t,
-    displayCloseSidebar: b,
-    onClose: f,
-    onSidebarUnmount: r,
-    onPathChange: s,
-    style: y,
-    automationId: g,
-    currentPath: d = "",
-    closeSidebarIcon: h = "close"
-  } = i;
-  o(() => () => {
-    r && r();
-  }, []), o(() => (document.body.style.overflow = t ? "hidden" : "scroll", () => {
+    content: t,
+    className: e = "",
+    alignment: f,
+    noShadow: g,
+    position: s = "fixed",
+    isOpen: r,
+    displayCloseSidebar: p,
+    onClose: v,
+    onSidebarUnmount: c,
+    onPathChange: m,
+    style: o,
+    automationId: y,
+    currentPath: u = "",
+    closeSidebarIcon: w = "close"
+  } = a;
+  i(() => () => {
+    c && c();
+  }, []), i(() => (document.body.style.overflow = r ? "hidden" : "scroll", () => {
     document.body.style.overflow = "auto";
-  }), [t]), o(() => {
-    s && s(d);
-  }, [d]);
-  const p = () => {
-    let e = "se-design-sidebar-overlay-container z-[1000]";
-    return e += n.length > 0 ? ` ${n}` : "", e += m === "left" ? " left-aligned" : " right-aligned", e += u ? " no-shadow" : "", e += l.length > 0 ? ` ${l}` : "", e += t ? " open-sidebar" : " closed-sidebar", e;
-  };
-  return /* @__PURE__ */ a.createElement("div", {
-    className: p(),
-    style: y,
-    "data-automation-id": g
-  }, /* @__PURE__ */ a.createElement("div", {
+  }), [r]), i(() => {
+    m && m(u);
+  }, [u]);
+  const S = () => {
+    let n = "se-design-sidebar-overlay-container z-[1000]";
+    return n += e.length > 0 ? ` ${e}` : "", n += f === "left" ? " left-aligned" : " right-aligned", n += g ? " no-shadow" : "", n += s.length > 0 ? ` ${s}` : "", n += r ? " open-sidebar" : " closed-sidebar", n;
+  }, C = () => d(d({}, o), r && (o != null && o.width) ? {
+    width: o == null ? void 0 : o.width
+  } : {
+    width: "0px"
+  });
+  return /* @__PURE__ */ l.createElement("div", {
+    className: S(),
+    style: C(),
+    "data-automation-id": y
+  }, /* @__PURE__ */ l.createElement("div", {
     className: "overlay-content"
-  }, b && /* @__PURE__ */ a.createElement("span", {
+  }, p && /* @__PURE__ */ l.createElement("span", {
     className: "overlay-close",
-    onClick: f,
+    onClick: v,
     "data-automation-id": "sidebar_overlay_close"
-  }, /* @__PURE__ */ a.createElement(v, {
-    name: h
-  })), c));
+  }, /* @__PURE__ */ l.createElement(x, {
+    name: w
+  })), t));
 };
 export {
-  N as SidebarOverlay
+  k as SidebarOverlay
 };
 //# sourceMappingURL=index26.js.map

package/dist/index26.js.map

@@ -1 +1 @@
-{"version":3,"file":"index26.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { Icon } from 'components/Icon';\n\nimport './style.scss';\n\nexport interface SidebarOverlayProps {\n  content: React.ReactNode;\n  className?: string;\n  alignment?: 'left' | 'right';\n  style?: React.CSSProperties;\n  noShadow?: boolean;\n  automationId?: string;\n  position?: 'abs' | 'fxd' | '';\n  isOpen?: boolean;\n  displayCloseSidebar?: boolean;\n  closeSidebarIcon?: string;\n  onClose?: () => void;\n  onSidebarUnmount?: () => void;\n  onPathChange?: (route: string) => void;\n  currentPath?: string;\n}\n\nexport const SidebarOverlay: FC<SidebarOverlayProps> = (props) => {\n  const { content, className = '', alignment, noShadow, position = 'fxd', isOpen, displayCloseSidebar, onClose, onSidebarUnmount, onPathChange, style, automationId, currentPath = '', closeSidebarIcon = 'close' } = props;\n\n  useEffect(() => {\n    return () => {\n      onSidebarUnmount && onSidebarUnmount();\n    };\n  }, []);\n\n  // This is to prevent the body from scrolling when the sidebar is open\n  useEffect(() => {\n    document.body.style.overflow = isOpen ? 'hidden' : 'scroll';\n\n    return () => {\n      document.body.style.overflow = 'auto'; // Cleanup on unmount\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    onPathChange && onPathChange(currentPath);\n  }, [currentPath]);\n\n  const getSidebarClassName = () => {\n    let defaultClass = 'se-design-sidebar-overlay-container z-[1000]';\n\n    defaultClass += className.length > 0 ? ` ${className}` : '';\n    defaultClass += alignment === 'left' ? ' left-aligned' : ' right-aligned';\n    defaultClass += noShadow ? ' no-shadow' : '';\n    defaultClass += position.length > 0 ? ` ${position}` : '';\n    defaultClass += isOpen ? ' open-sidebar' : ' closed-sidebar';\n    return defaultClass;\n  };\n\n  return (\n    <div className={getSidebarClassName()} style={style} data-automation-id={automationId}>\n      <div className=\"overlay-content\">\n        {displayCloseSidebar && (\n          <span className=\"overlay-close\" onClick={onClose} data-automation-id=\"sidebar_overlay_close\">\n            <Icon name={closeSidebarIcon} />\n          </span>\n        )}\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useEffect","Icon","SidebarOverlay","props","content","className","alignment","noShadow","position","isOpen","displayCloseSidebar","onClose","onSidebarUnmount","onPathChange","style","automationId","currentPath","closeSidebarIcon","document","body","overflow","getSidebarClassName","defaultClass","length","React","createElement","onClick","name"],"mappings":"AAsBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAA2CC,CAAUA,MAAA;AAC1D,QAAA;AAAA,IAAEC,SAAAA;AAAAA,IAASC,WAAAA,IAAY;AAAA,IAAIC,WAAAA;AAAAA,IAAWC,UAAAA;AAAAA,IAAUC,UAAAA,IAAW;AAAA,IAAOC,QAAAA;AAAAA,IAAQC,qBAAAA;AAAAA,IAAqBC,SAAAA;AAAAA,IAASC,kBAAAA;AAAAA,IAAkBC,cAAAA;AAAAA,IAAcC,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,IAAcC,aAAAA,IAAc;AAAA,IAAIC,kBAAAA,IAAmB;AAAA,EAAA,IAAYd;AAEpNH,EAAAA,EAAU,MACD,MAAM;AACXY,IAAAA,KAAoBA,EAAiB;AAAA,EACvC,GACC,EAAE,GAGLZ,EAAU,OACRkB,SAASC,KAAKL,MAAMM,WAAWX,IAAS,WAAW,UAE5C,MAAM;AACFU,aAAAA,KAAKL,MAAMM,WAAW;AAAA,EACjC,IACC,CAACX,CAAM,CAAC,GAEXT,EAAU,MAAM;AACda,IAAAA,KAAgBA,EAAaG,CAAW;AAAA,EAAA,GACvC,CAACA,CAAW,CAAC;AAEhB,QAAMK,IAAsBA,MAAM;AAChC,QAAIC,IAAe;AAEnBA,WAAAA,KAAgBjB,EAAUkB,SAAS,IAAI,IAAIlB,CAAS,KAAK,IACzCC,KAAAA,MAAc,SAAS,kBAAkB,kBACzDgB,KAAgBf,IAAW,eAAe,IAC1Ce,KAAgBd,EAASe,SAAS,IAAI,IAAIf,CAAQ,KAAK,IACvDc,KAAgBb,IAAS,kBAAkB,mBACpCa;AAAAA,EACT;AAGEE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,WAAWgB,EAAoB;AAAA,IAAGP,OAAAA;AAAAA,IAAc,sBAAoBC;AAAAA,EAAAA,GACvEU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKpB,WAAU;AAAA,EACZK,GAAAA,KACCe,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMpB,WAAU;AAAA,IAAgBqB,SAASf;AAAAA,IAAS,sBAAmB;AAAA,EAAA,GACnEc,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC0B,MAAMV;AAAAA,EAAAA,CAAmB,CAC3B,GAEPb,CACE,CACF;AAET;"}
+{"version":3,"file":"index26.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { Icon } from 'components/Icon';\n\nimport './style.scss';\n\nexport interface SidebarOverlayProps {\n  content: React.ReactNode;\n  className?: string;\n  alignment?: 'left' | 'right';\n  style?: React.CSSProperties;\n  noShadow?: boolean;\n  automationId?: string;\n  position?: 'absolute' | 'fixed' | 'relative' | 'static' | '';\n  isOpen?: boolean;\n  displayCloseSidebar?: boolean;\n  closeSidebarIcon?: string;\n  onClose?: () => void;\n  onSidebarUnmount?: () => void;\n  onPathChange?: (route: string) => void;\n  currentPath?: string;\n}\n\nexport const SidebarOverlay: FC<SidebarOverlayProps> = (props) => {\n  const { content, className = '', alignment, noShadow, position = 'fixed', isOpen, displayCloseSidebar, onClose, onSidebarUnmount, onPathChange, style, automationId, currentPath = '', closeSidebarIcon = 'close' } = props;\n\n  useEffect(() => {\n    return () => {\n      onSidebarUnmount && onSidebarUnmount();\n    };\n  }, []);\n\n  // This is to prevent the body from scrolling when the sidebar is open\n  useEffect(() => {\n    document.body.style.overflow = isOpen ? 'hidden' : 'scroll';\n\n    return () => {\n      document.body.style.overflow = 'auto'; // Cleanup on unmount\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    onPathChange && onPathChange(currentPath);\n  }, [currentPath]);\n\n  const getSidebarClassName = () => {\n    let defaultClass = 'se-design-sidebar-overlay-container z-[1000]';\n\n    defaultClass += className.length > 0 ? ` ${className}` : '';\n    defaultClass += alignment === 'left' ? ' left-aligned' : ' right-aligned';\n    defaultClass += noShadow ? ' no-shadow' : '';\n    defaultClass += position.length > 0 ? ` ${position}` : '';\n    defaultClass += isOpen ? ' open-sidebar' : ' closed-sidebar';\n    return defaultClass;\n  };\n\n  const getSidebarStyle = () => {\n    return {\n      ...style,\n      ...(isOpen && style?.width ? { width: style?.width } : { width: '0px' })\n    };\n  };\n\n  return (\n    <div \n      className={getSidebarClassName()} \n      style={getSidebarStyle()} \n      data-automation-id={automationId}\n    >\n      <div className=\"overlay-content\">\n        {displayCloseSidebar && (\n          <span className=\"overlay-close\" onClick={onClose} data-automation-id=\"sidebar_overlay_close\">\n            <Icon name={closeSidebarIcon} />\n          </span>\n        )}\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useEffect","Icon","SidebarOverlay","props","content","className","alignment","noShadow","position","isOpen","displayCloseSidebar","onClose","onSidebarUnmount","onPathChange","style","automationId","currentPath","closeSidebarIcon","document","body","overflow","getSidebarClassName","defaultClass","length","getSidebarStyle","__spreadValues","width","React","createElement","onClick","name"],"mappings":";;;;;;;;;;;AAsBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAA2CC,CAAUA,MAAA;AAC1D,QAAA;AAAA,IAAEC,SAAAA;AAAAA,IAASC,WAAAA,IAAY;AAAA,IAAIC,WAAAA;AAAAA,IAAWC,UAAAA;AAAAA,IAAUC,UAAAA,IAAW;AAAA,IAASC,QAAAA;AAAAA,IAAQC,qBAAAA;AAAAA,IAAqBC,SAAAA;AAAAA,IAASC,kBAAAA;AAAAA,IAAkBC,cAAAA;AAAAA,IAAcC,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,IAAcC,aAAAA,IAAc;AAAA,IAAIC,kBAAAA,IAAmB;AAAA,EAAA,IAAYd;AAEtNH,EAAAA,EAAU,MACD,MAAM;AACXY,IAAAA,KAAoBA,EAAiB;AAAA,EACvC,GACC,EAAE,GAGLZ,EAAU,OACRkB,SAASC,KAAKL,MAAMM,WAAWX,IAAS,WAAW,UAE5C,MAAM;AACFU,aAAAA,KAAKL,MAAMM,WAAW;AAAA,EACjC,IACC,CAACX,CAAM,CAAC,GAEXT,EAAU,MAAM;AACda,IAAAA,KAAgBA,EAAaG,CAAW;AAAA,EAAA,GACvC,CAACA,CAAW,CAAC;AAEhB,QAAMK,IAAsBA,MAAM;AAChC,QAAIC,IAAe;AAEnBA,WAAAA,KAAgBjB,EAAUkB,SAAS,IAAI,IAAIlB,CAAS,KAAK,IACzCC,KAAAA,MAAc,SAAS,kBAAkB,kBACzDgB,KAAgBf,IAAW,eAAe,IAC1Ce,KAAgBd,EAASe,SAAS,IAAI,IAAIf,CAAQ,KAAK,IACvDc,KAAgBb,IAAS,kBAAkB,mBACpCa;AAAAA,EACT,GAEME,IAAkBA,MACfC,IAAA,IACFX,IACCL,MAAUK,KAAAA,QAAAA,EAAOY,SAAQ;AAAA,IAAEA,OAAOZ,KAAAA,gBAAAA,EAAOY;AAAAA,EAAAA,IAAU;AAAA,IAAEA,OAAO;AAAA,EAAA;AAKlEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEvB,WAAWgB,EAAoB;AAAA,IAC/BP,OAAOU,EAAgB;AAAA,IACvB,sBAAoBT;AAAAA,EAAAA,GAEpBa,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EACZK,GAAAA,KACCkB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMvB,WAAU;AAAA,IAAgBwB,SAASlB;AAAAA,IAAS,sBAAmB;AAAA,EAAA,GACnEiB,gBAAAA,EAAAA,cAAC3B,GAAI;AAAA,IAAC6B,MAAMb;AAAAA,EAAAA,CAAmB,CAC3B,GAEPb,CACE,CACF;AAET;"}

package/dist/index29.js

@@ -1,46 +1,49 @@
 import r from "react";
-import { Icon as h } from "./index5.js";
-const E = ({
+import { Icon as d } from "./index5.js";
+const p = {
+  pageNavigation: "px-[6px] flex items-center justify-center disabled:opacity-50 hover:cursor-pointer",
+  pageItem: "px-[6px] text-sm flex items-center justify-center rounded border hover:cursor-pointer"
+}, b = ({
   currentPage: s,
   itemsPerPage: l,
   totalItems: n,
   onPageChange: i
 }) => {
-  const o = Math.ceil(n / l), m = 1, d = o, f = (s - 1) * l + 1, p = Math.min(s * l, n), u = p < n, x = s > 1, y = () => {
-    const e = [], t = (a) => /* @__PURE__ */ r.createElement("span", {
-      key: a,
-      onClick: () => i(a),
-      className: `w-5 h-5 text-sm flex items-center justify-center rounded border ${s === a ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`
-    }, a), c = () => /* @__PURE__ */ r.createElement("span", {
+  const a = Math.ceil(n / l), m = 1, f = a, x = (s - 1) * l + 1, h = Math.min(s * l, n), u = h < n, v = s > 1, y = () => {
+    const e = [], t = (o) => /* @__PURE__ */ r.createElement("span", {
+      key: o,
+      onClick: () => i(o),
+      className: `${p.pageItem} ${s === o ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`
+    }, o), c = () => /* @__PURE__ */ r.createElement("span", {
       className: "w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center"
     }, "...");
     if (s <= 3) {
-      for (let a = 1; a <= Math.min(3, o); a++)
-        e.push(t(a));
-      o > 3 && (e.push(c()), e.push(t(o)));
-    } else s >= o - 2 ? (e.push(t(m)), e.push(c()), e.push(t(o - 2)), e.push(t(o - 1)), e.push(t(o))) : (e.push(t(m)), e.push(c()), e.push(t(s - 1)), e.push(t(s)), e.push(t(s + 1)), e.push(c()), e.push(t(d)));
+      for (let o = 1; o <= Math.min(3, a); o++)
+        e.push(t(o));
+      a > 3 && (e.push(c()), e.push(t(a)));
+    } else s >= a - 2 ? (e.push(t(m)), e.push(c()), e.push(t(a - 2)), e.push(t(a - 1)), e.push(t(a))) : (e.push(t(m)), e.push(c()), e.push(t(s - 1)), e.push(t(s)), e.push(t(s + 1)), e.push(c()), e.push(t(f)));
     return e;
   };
   return /* @__PURE__ */ r.createElement("div", {
     className: "flex items-center gap-1 font-normal"
   }, /* @__PURE__ */ r.createElement("span", {
     className: "text-sm text-[var(--color-gray-700)] mr-1"
-  }, "Showing ", f, "-", p, " of ", n), /* @__PURE__ */ r.createElement("span", {
-    onClick: () => x && i(s - 1),
-    className: "w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer"
-  }, /* @__PURE__ */ r.createElement(h, {
+  }, "Showing ", x, "-", h, " of ", n), /* @__PURE__ */ r.createElement("span", {
+    onClick: () => v && i(s - 1),
+    className: `${p.pageNavigation}`
+  }, /* @__PURE__ */ r.createElement(d, {
     name: "next",
     className: "rotate-180 transition-transform stroke-[var(--color-gray-600)]"
   })), /* @__PURE__ */ r.createElement("div", {
     className: "flex items-center gap-1"
   }, y()), /* @__PURE__ */ r.createElement("span", {
     onClick: () => u && i(s + 1),
-    className: "w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer"
-  }, /* @__PURE__ */ r.createElement(h, {
+    className: `${p.pageNavigation}`
+  }, /* @__PURE__ */ r.createElement(d, {
     name: "next"
   })));
 };
 export {
-  E as Pagination
+  b as Pagination
 };
 //# sourceMappingURL=index29.js.map

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from 'components/Icon';\n\ninterface PaginationProps {\n  currentPage: number;\n  itemsPerPage: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange }) => {\n  const totalPages = Math.ceil(totalItems / itemsPerPage);\n  const firstPage = 1;\n  const lastPage = totalPages;\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n  const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n  const hasNextPage = endItem < totalItems;\n  const hasPrevPage = currentPage > 1;\n\n  const renderPageNumbers = () => {\n    const pages = [];\n\n    const renderPageNumber = (pageNum: number) => {\n      return (\n        <span\n          key={pageNum}\n          onClick={() => onPageChange(pageNum)}\n          className={`w-5 h-5 text-sm flex items-center justify-center rounded border ${currentPage === pageNum ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n        >\n          {pageNum}\n        </span>\n      );\n    };\n\n    const renderEllipsis = () => {\n      return (\n        <span className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n          ...\n        </span>\n      );\n    };\n\n    if (currentPage <= 3) {\n      for (let i = 1; i <= Math.min(3, totalPages); i++) {\n        pages.push(renderPageNumber(i));\n      }\n\n      if (totalPages > 3) {\n        pages.push(renderEllipsis());\n        pages.push(renderPageNumber(totalPages));\n      }\n    } else if (currentPage >= totalPages - 2) {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(totalPages - 2));\n      pages.push(renderPageNumber(totalPages - 1));\n      pages.push(renderPageNumber(totalPages));\n    } else {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(currentPage - 1));\n      pages.push(renderPageNumber(currentPage));\n      pages.push(renderPageNumber(currentPage + 1));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(lastPage));\n    }\n\n    return pages;\n  };\n\n  return (\n    <div className=\"flex items-center gap-1 font-normal\">\n      <span className=\"text-sm text-[var(--color-gray-700)] mr-1\">\n        Showing {startItem}-{endItem} of {totalItems}\n      </span>\n      <span\n        onClick={() => hasPrevPage && onPageChange(currentPage - 1)}\n        className=\"w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\"\n      >\n        <Icon name=\"next\" className=\"rotate-180 transition-transform stroke-[var(--color-gray-600)]\" />\n      </span>\n      {/* Render page numbers */}\n      <div className=\"flex items-center gap-1\">{renderPageNumbers()}</div>\n      <span\n        onClick={() => hasNextPage && onPageChange(currentPage + 1)}\n        className=\"w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\"\n      >\n        <Icon name=\"next\" />\n      </span>\n    </div>\n  );\n};\n"],"names":["Pagination","currentPage","itemsPerPage","totalItems","onPageChange","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","renderPageNumbers","pages","renderPageNumber","pageNum","React","createElement","key","onClick","className","renderEllipsis","i","push","Icon","name"],"mappings":";;AAWO,MAAMA,IAAwCA,CAAC;AAAA,EAAEC,aAAAA;AAAAA,EAAaC,cAAAA;AAAAA,EAAcC,YAAAA;AAAAA,EAAYC,cAAAA;AAAa,MAAM;AAChH,QAAMC,IAAaC,KAAKC,KAAKJ,IAAaD,CAAY,GAChDM,IAAY,GACZC,IAAWJ,GACXK,KAAaT,IAAc,KAAKC,IAAe,GAC/CS,IAAUL,KAAKM,IAAIX,IAAcC,GAAcC,CAAU,GACzDU,IAAcF,IAAUR,GACxBW,IAAcb,IAAc,GAE5Bc,IAAoBA,MAAM;AAC9B,UAAMC,IAAQ,CAAE,GAEVC,IAAmBA,CAACC,MAEtBC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MACEC,KAAKH;AAAAA,MACLI,SAASA,MAAMlB,EAAac,CAAO;AAAA,MACnCK,WAAW,mEAAmEtB,MAAgBiB,IAAU,8DAA8D,gEAAgE;AAAA,OAErOA,CACG,GAIJM,IAAiBA,MAEnBL,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MAAMG,WAAU;AAAA,OAA8F,KAExG;AAIV,QAAItB,KAAe,GAAG;AACXwB,eAAAA,IAAI,GAAGA,KAAKnB,KAAKM,IAAI,GAAGP,CAAU,GAAGoB;AACtCC,QAAAA,EAAAA,KAAKT,EAAiBQ,CAAC,CAAC;AAGhC,MAAIpB,IAAa,MACTqB,EAAAA,KAAKF,GAAgB,GACrBE,EAAAA,KAAKT,EAAiBZ,CAAU,CAAC;AAAA,IACzC,MACF,CAAWJ,KAAeI,IAAa,KAC/BqB,EAAAA,KAAKT,EAAiBT,CAAS,CAAC,GAChCkB,EAAAA,KAAKF,GAAgB,GAC3BR,EAAMU,KAAKT,EAAiBZ,IAAa,CAAC,CAAC,GAC3CW,EAAMU,KAAKT,EAAiBZ,IAAa,CAAC,CAAC,GACrCqB,EAAAA,KAAKT,EAAiBZ,CAAU,CAAC,MAEjCqB,EAAAA,KAAKT,EAAiBT,CAAS,CAAC,GAChCkB,EAAAA,KAAKF,GAAgB,GAC3BR,EAAMU,KAAKT,EAAiBhB,IAAc,CAAC,CAAC,GACtCyB,EAAAA,KAAKT,EAAiBhB,CAAW,CAAC,GACxCe,EAAMU,KAAKT,EAAiBhB,IAAc,CAAC,CAAC,GACtCyB,EAAAA,KAAKF,GAAgB,GACrBE,EAAAA,KAAKT,EAAiBR,CAAQ,CAAC;AAGhCO,WAAAA;AAAAA,EACT;AAGEG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACbH,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMG,WAAU;AAAA,EAAA,GAA4C,YACjDb,GAAU,KAAEC,GAAQ,QAAKR,CAC9B,GACNiB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEE,SAASA,MAAMR,KAAeV,EAAaH,IAAc,CAAC;AAAA,IAC1DsB,WAAU;AAAA,EAAA,GAEVH,gBAAAA,EAAAA,cAACO,GAAI;AAAA,IAACC,MAAK;AAAA,IAAOL,WAAU;AAAA,EAAkE,CAAA,CAC1F,GAENJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,KAA2BR,EAAkB,CAAO,GACnEI,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEE,SAASA,MAAMT,KAAeT,EAAaH,IAAc,CAAC;AAAA,IAC1DsB,WAAU;AAAA,EAAA,GAEVH,gBAAAA,EAAAA,cAACO,GAAI;AAAA,IAACC,MAAK;AAAA,EAAQ,CAAA,CACf,CACH;AAET;"}
+{"version":3,"file":"index29.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from 'components/Icon';\n\ninterface PaginationProps {\n  currentPage: number;\n  itemsPerPage: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n}\n\nconst paginationClassNames = {\n  pageNavigation: \"px-[6px] flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\",\n  pageItem: \"px-[6px] text-sm flex items-center justify-center rounded border hover:cursor-pointer\"\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange }) => {\n  const totalPages = Math.ceil(totalItems / itemsPerPage);\n  const firstPage = 1;\n  const lastPage = totalPages;\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n  const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n  const hasNextPage = endItem < totalItems;\n  const hasPrevPage = currentPage > 1;\n\n  const renderPageNumbers = () => {\n    const pages = [];\n\n    const renderPageNumber = (pageNum: number) => {\n      return (\n        <span\n          key={pageNum}\n          onClick={() => onPageChange(pageNum)}\n          className={`${paginationClassNames.pageItem} ${currentPage === pageNum ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n        >\n          {pageNum}\n        </span>\n      );\n    };\n\n    const renderEllipsis = () => {\n      return (\n        <span className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n          ...\n        </span>\n      );\n    };\n\n    if (currentPage <= 3) {\n      for (let i = 1; i <= Math.min(3, totalPages); i++) {\n        pages.push(renderPageNumber(i));\n      }\n\n      if (totalPages > 3) {\n        pages.push(renderEllipsis());\n        pages.push(renderPageNumber(totalPages));\n      }\n    } else if (currentPage >= totalPages - 2) {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(totalPages - 2));\n      pages.push(renderPageNumber(totalPages - 1));\n      pages.push(renderPageNumber(totalPages));\n    } else {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(currentPage - 1));\n      pages.push(renderPageNumber(currentPage));\n      pages.push(renderPageNumber(currentPage + 1));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(lastPage));\n    }\n\n    return pages;\n  };\n\n  return (\n    <div className=\"flex items-center gap-1 font-normal\">\n      <span className=\"text-sm text-[var(--color-gray-700)] mr-1\">\n        Showing {startItem}-{endItem} of {totalItems}\n      </span>\n      <span\n        onClick={() => hasPrevPage && onPageChange(currentPage - 1)}\n        className={`${paginationClassNames.pageNavigation}`}\n      >\n        <Icon name=\"next\" className=\"rotate-180 transition-transform stroke-[var(--color-gray-600)]\" />\n      </span>\n      {/* Render page numbers */}\n      <div className=\"flex items-center gap-1\">{renderPageNumbers()}</div>\n      <span\n        onClick={() => hasNextPage && onPageChange(currentPage + 1)}\n        className={`${paginationClassNames.pageNavigation}`}\n      >\n        <Icon name=\"next\" />\n      </span>\n    </div>\n  );\n};\n"],"names":["React__default","Icon","paginationClassNames","pageNavigation","pageItem","Pagination","currentPage","itemsPerPage","totalItems","onPageChange","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","renderPageNumbers","pages","renderPageNumber","pageNum","React","createElement","key","onClick","className","renderEllipsis","i","push","name"],"mappings":"AAWA,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAuB;AAAA,EAC3BC,gBAAgB;AAAA,EAChBC,UAAU;AACZ,GAEaC,IAAwCA,CAAC;AAAA,EAAEC,aAAAA;AAAAA,EAAaC,cAAAA;AAAAA,EAAcC,YAAAA;AAAAA,EAAYC,cAAAA;AAAa,MAAM;AAChH,QAAMC,IAAaC,KAAKC,KAAKJ,IAAaD,CAAY,GAChDM,IAAY,GACZC,IAAWJ,GACXK,KAAaT,IAAc,KAAKC,IAAe,GAC/CS,IAAUL,KAAKM,IAAIX,IAAcC,GAAcC,CAAU,GACzDU,IAAcF,IAAUR,GACxBW,IAAcb,IAAc,GAE5Bc,IAAoBA,MAAM;AAC9B,UAAMC,IAAQ,CAAE,GAEVC,IAAmBA,CAACC,MAEtBC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MACEC,KAAKH;AAAAA,MACLI,SAASA,MAAMlB,EAAac,CAAO;AAAA,MACnCK,WAAW,GAAG1B,EAAqBE,QAAQ,IAAIE,MAAgBiB,IAAU,8DAA8D,gEAAgE;AAAA,OAEtMA,CACG,GAIJM,IAAiBA,MAEnBL,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MAAMG,WAAU;AAAA,OAA8F,KAExG;AAIV,QAAItB,KAAe,GAAG;AACXwB,eAAAA,IAAI,GAAGA,KAAKnB,KAAKM,IAAI,GAAGP,CAAU,GAAGoB;AACtCC,QAAAA,EAAAA,KAAKT,EAAiBQ,CAAC,CAAC;AAGhC,MAAIpB,IAAa,MACTqB,EAAAA,KAAKF,GAAgB,GACrBE,EAAAA,KAAKT,EAAiBZ,CAAU,CAAC;AAAA,IACzC,MACF,CAAWJ,KAAeI,IAAa,KAC/BqB,EAAAA,KAAKT,EAAiBT,CAAS,CAAC,GAChCkB,EAAAA,KAAKF,GAAgB,GAC3BR,EAAMU,KAAKT,EAAiBZ,IAAa,CAAC,CAAC,GAC3CW,EAAMU,KAAKT,EAAiBZ,IAAa,CAAC,CAAC,GACrCqB,EAAAA,KAAKT,EAAiBZ,CAAU,CAAC,MAEjCqB,EAAAA,KAAKT,EAAiBT,CAAS,CAAC,GAChCkB,EAAAA,KAAKF,GAAgB,GAC3BR,EAAMU,KAAKT,EAAiBhB,IAAc,CAAC,CAAC,GACtCyB,EAAAA,KAAKT,EAAiBhB,CAAW,CAAC,GACxCe,EAAMU,KAAKT,EAAiBhB,IAAc,CAAC,CAAC,GACtCyB,EAAAA,KAAKF,GAAgB,GACrBE,EAAAA,KAAKT,EAAiBR,CAAQ,CAAC;AAGhCO,WAAAA;AAAAA,EACT;AAGEG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACbH,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMG,WAAU;AAAA,EAAA,GAA4C,YACjDb,GAAU,KAAEC,GAAQ,QAAKR,CAC9B,GACNiB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEE,SAASA,MAAMR,KAAeV,EAAaH,IAAc,CAAC;AAAA,IAC1DsB,WAAW,GAAG1B,EAAqBC,cAAc;AAAA,EAAA,GAEjDsB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC+B,MAAK;AAAA,IAAOJ,WAAU;AAAA,EAAkE,CAAA,CAC1F,GAENJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,KAA2BR,EAAkB,CAAO,GACnEI,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEE,SAASA,MAAMT,KAAeT,EAAaH,IAAc,CAAC;AAAA,IAC1DsB,WAAW,GAAG1B,EAAqBC,cAAc;AAAA,EAAA,GAEjDsB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC+B,MAAK;AAAA,EAAQ,CAAA,CACf,CACH;AAET;"}

package/dist/index31.js

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

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.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;"}
+{"version":3,"file":"index31.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 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] p-2 transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${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\n        htmlFor={value}\n        className={`${props.helperLabel && 'flex flex-col'} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}\n      >\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,0BAA0BV,IAAW,uBAAuB,gBAAgB,mCAAmCD,IAAU,qBAAqB,kBAAkB,qDAAqDC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACvRM,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,IACEW,SAAStB;AAAAA,IACTY,WAAW,GAAGd,EAAMyB,eAAe,eAAe,IAAIrB,IAAW,uBAAuB,gBAAgB;AAAA,EAAA,GAExGS,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/index32.js

@@ -1,15 +1,15 @@
 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 f = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, s = 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]);
+  if (l)
+    for (var e of l(a))
+      s.call(a, e) && o(n, e, a[e]);
   return n;
-}, l = (n, a) => m(n, s(a));
+}, u = (n, a) => m(n, f(a));
 import i from "react";
 import { Radio as h } from "./index31.js";
 function t() {
@@ -23,12 +23,12 @@ function t() {
 }
 function b(n) {
   const a = (e) => {
-    n.onRadioGroupChange(l(c({}, e), {
+    n.onRadioGroupChange(u(c({}, e), {
       checked: !0
     }));
   };
   return /* @__PURE__ */ i.createElement("div", {
-    className: "flex gap-2"
+    className: `flex gap-2 ${n.direction === "column" ? "flex-col" : "flex-row"}`
   }, n.options.map((e) => /* @__PURE__ */ i.createElement(h, t({
     key: e.value
   }, e, {

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.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;"}
+{"version":3,"file":"index32.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  direction?: 'row' | 'column';\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 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`}>\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","direction","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUO,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,WAAW,cAAcT,EAAMU,cAAc,WAAW,aAAa,UAAU;AAAA,EAAA,GACjFV,EAAMW,QAAQC,IAAKC,OAClBL,gBAAAA,EAAAA,cAACM,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUjB;AAAAA,IAAmBK,SAASO,EAAOI,UAAUjB,EAAMiB;AAAAA,EAAQ,CAAA,CAAA,CAC5G,CACE;AAET;"}