se-design 0.0.120 → 0.0.122

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/CircularProgressBar/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CircularProgressBarProps {\n  progress: number;\n  backgroundColor?: string;\n  progressColor?: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport const CircularProgressBar = ({\n  progress,\n  backgroundColor = '#E8E8E8',\n  progressColor = '#0066FF',\n  size = 40,\n  strokeWidth = 4\n}: CircularProgressBarProps) => {\n  const radius = (size - strokeWidth) / 2;\n  const circumference = radius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n\n  return (\n    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n      {/* Background circle */}\n      <circle cx={size / 2} cy={size / 2} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n      {/* Progress circle */}\n      <circle\n        cx={size / 2}\n        cy={size / 2}\n        r={radius}\n        stroke={progressColor}\n        strokeWidth={strokeWidth}\n        strokeDasharray={circumference}\n        strokeDashoffset={strokeDashoffset}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        style={{ transition: 'stroke-dashoffset 0.3s ease' }}\n      />\n    </svg>\n  );\n};\n"],"names":["CircularProgressBar","progress","backgroundColor","progressColor","size","strokeWidth","radius","circumference","Math","PI","strokeDashoffset","React","createElement","width","height","style","transform","cx","cy","r","stroke","fill","strokeDasharray","strokeLinecap","transition"],"mappings":";AAUO,MAAMA,IAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAC,iBAAAA,IAAkB;AAAA,EAClBC,eAAAA,IAAgB;AAAA,EAChBC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AACU,MAAM;AACxBC,QAAAA,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAG1DI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,EAAiB,GAEnEJ,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IAAQK,IAAIb,IAAO;AAAA,IAAGc,IAAId,IAAO;AAAA,IAAGe,GAAGb;AAAAA,IAAQc,QAAQlB;AAAAA,IAAiBG,aAAAA;AAAAA,IAA0BgB,MAAK;AAAA,EAAA,CAAQ,GAE/GT,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IACEK,IAAIb,IAAO;AAAA,IACXc,IAAId,IAAO;AAAA,IACXe,GAAGb;AAAAA,IACHc,QAAQjB;AAAAA,IACRE,aAAAA;AAAAA,IACAiB,iBAAiBf;AAAAA,IACjBG,kBAAAA;AAAAA,IACAW,MAAK;AAAA,IACLE,eAAc;AAAA,IACdR,OAAO;AAAA,MAAES,YAAY;AAAA,IAAA;AAAA,EAA8B,CACpD,CACE;AAET;"}
+{"version":3,"file":"index44.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\n\nexport interface PhoneInputProps {\n  onCountrycodeChange: (countryCode: string) => void;\n  onNumberChange: (number: string) => void;\n  error?: boolean;\n  errorMessage?: string;\n  value?: {\n    countryCode: string;\n    number: string;\n  };\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value\n}) => {\n  const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n  const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n  const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n  const [searchValue, setSearchValue] = useState('');\n  const [enteredNumber, setEnteredNumber] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  const handleCountryCodeSelect = (country: string) => {\n    if (country) {\n      setCountryCode(country);\n      onCountrycodeChange(country);\n    }\n    setDisplaySelectCountryCode(false);\n  };\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setSearchValue(searchValue);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchValue.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setDisplaySelectCountryCode(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  const handleEnteredNumberChange = (value: string) => {\n    const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n    console.log('numericValue', numericValue);\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  return (\n    <div className=\"phone-input-container-se-design-main-container\">\n      <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n        <div className=\"phone-input-container-se-design\">\n          <div\n            className=\"phone-input-container-se-design-country-code\"\n            onClick={() => {\n              setDisplaySelectCountryCode(!displaySelectCountryCode);\n            }}\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt={countryInfo?.name}\n              width=\"16\"\n            />\n            {countryInfo?.dial_code}\n            <Icon name=\"chevron\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n          </div>\n          <span className=\"divider\" />\n          <input\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className=\"phone-input-container-se-design-phone-number-input\"\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div className=\"phone-input-container-se-design-country-code-list\">\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" />\n              <input\n                type=\"text\"\n                placeholder=\"Search\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country) => (\n                <div\n                  key={country.code}\n                  className=\"phone-input-container-se-design-country-code-list-item\"\n                  onClick={() => handleCountryCodeSelect(country.dial_code)}\n                >\n                  <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n                  <span>{country.name}</span>\n                  <span>({country.dial_code})</span>\n                </div>\n              ))\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && <div className=\"error-message\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}

package/dist/index45.js

@@ -1,33 +1,41 @@
-import f from "react";
-const p = ({
-  size: r = 40,
-  text: e,
-  textColor: s = "var(--color-white)",
-  backgroundColor: c = "var(--color-gray-400)",
-  className: n = "",
-  onClick: o
+import o from "react";
+const m = ({
+  progress: a,
+  backgroundColor: n = "#E8E8E8",
+  progressColor: s = "#0066FF",
+  size: e = 40,
+  strokeWidth: r = 4
 }) => {
-  var t, a, i, l;
-  const u = (l = (i = (a = (t = e == null ? void 0 : e.split(" ")) == null ? void 0 : t.map((d) => d[0])) == null ? void 0 : a.join("")) == null ? void 0 : i.toUpperCase()) == null ? void 0 : l.slice(0, 3);
-  return /* @__PURE__ */ f.createElement("div", {
-    className: `
-        se-design-avatar 
-        flex items-center justify-center 
-        rounded-full font-medium
-        ${o ? "cursor-pointer" : "cursor-default"}
-        ${n}
-      `,
-    onClick: o,
+  const t = (e - r) / 2, c = t * 2 * Math.PI, l = c - a / 100 * c;
+  return /* @__PURE__ */ o.createElement("svg", {
+    width: e,
+    height: e,
     style: {
-      width: r,
-      height: r,
-      backgroundColor: c,
-      color: s,
-      fontSize: `${r * 0.4}px`
+      transform: "rotate(-90deg)"
     }
-  }, u);
+  }, /* @__PURE__ */ o.createElement("circle", {
+    cx: e / 2,
+    cy: e / 2,
+    r: t,
+    stroke: n,
+    strokeWidth: r,
+    fill: "none"
+  }), /* @__PURE__ */ o.createElement("circle", {
+    cx: e / 2,
+    cy: e / 2,
+    r: t,
+    stroke: s,
+    strokeWidth: r,
+    strokeDasharray: c,
+    strokeDashoffset: l,
+    fill: "none",
+    strokeLinecap: "round",
+    style: {
+      transition: "stroke-dashoffset 0.3s ease"
+    }
+  }));
 };
 export {
-  p as Avatar
+  m as CircularProgressBar
 };
 //# sourceMappingURL=index45.js.map

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport type AvatarProps = {\n  size?: number;\n  text: string;\n  textColor?: string;\n  backgroundColor?: string;\n  className?: string;\n  onClick?: () => void;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = 'var(--color-gray-400)',\n  className = '',\n  onClick\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 3);\n\n  return (\n    <div\n      className={`\n        se-design-avatar \n        flex items-center justify-center \n        rounded-full font-medium\n        ${onClick ? 'cursor-pointer' : 'cursor-default'}\n        ${className}\n      `}\n      onClick={onClick}\n      style={{\n        width: size,\n        height: size,\n        backgroundColor: backgroundColor,\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["Avatar","size","text","textColor","backgroundColor","className","onClick","initials","split","map","word","join","toUpperCase","slice","React","createElement","style","width","height","color","fontSize"],"mappings":";AAWO,MAAMA,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AACF,MAAM;;AACJ,QAAMC,KAAWL,KAAAA,KAAAA,KAAAA,IAAAA,KAAAA,gBAAAA,EACbM,MAAM,SADON,gBAAAA,EAEbO,IAAKC,OAASA,EAAK,CAAC,OAFPR,gBAAAA,EAGbS,KAAK,QAHQT,gBAAAA,EAIbU,kBAJaV,gBAAAA,EAKbW,MAAM,GAAG;AAGXC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEV,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACAU,OAAO;AAAA,MACLC,OAAOhB;AAAAA,MACPiB,QAAQjB;AAAAA,MACRG,iBAAAA;AAAAA,MACAe,OAAOhB;AAAAA,MACPiB,UAAU,GAAGnB,IAAO,GAAG;AAAA,IAAA;AAAA,KAGxBM,CACE;AAET;"}
+{"version":3,"file":"index45.js","sources":["../src/components/CircularProgressBar/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CircularProgressBarProps {\n  progress: number;\n  backgroundColor?: string;\n  progressColor?: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport const CircularProgressBar = ({\n  progress,\n  backgroundColor = '#E8E8E8',\n  progressColor = '#0066FF',\n  size = 40,\n  strokeWidth = 4\n}: CircularProgressBarProps) => {\n  const radius = (size - strokeWidth) / 2;\n  const circumference = radius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n\n  return (\n    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n      {/* Background circle */}\n      <circle cx={size / 2} cy={size / 2} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n      {/* Progress circle */}\n      <circle\n        cx={size / 2}\n        cy={size / 2}\n        r={radius}\n        stroke={progressColor}\n        strokeWidth={strokeWidth}\n        strokeDasharray={circumference}\n        strokeDashoffset={strokeDashoffset}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        style={{ transition: 'stroke-dashoffset 0.3s ease' }}\n      />\n    </svg>\n  );\n};\n"],"names":["CircularProgressBar","progress","backgroundColor","progressColor","size","strokeWidth","radius","circumference","Math","PI","strokeDashoffset","React","createElement","width","height","style","transform","cx","cy","r","stroke","fill","strokeDasharray","strokeLinecap","transition"],"mappings":";AAUO,MAAMA,IAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAC,iBAAAA,IAAkB;AAAA,EAClBC,eAAAA,IAAgB;AAAA,EAChBC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AACU,MAAM;AACxBC,QAAAA,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAG1DI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,EAAiB,GAEnEJ,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IAAQK,IAAIb,IAAO;AAAA,IAAGc,IAAId,IAAO;AAAA,IAAGe,GAAGb;AAAAA,IAAQc,QAAQlB;AAAAA,IAAiBG,aAAAA;AAAAA,IAA0BgB,MAAK;AAAA,EAAA,CAAQ,GAE/GT,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IACEK,IAAIb,IAAO;AAAA,IACXc,IAAId,IAAO;AAAA,IACXe,GAAGb;AAAAA,IACHc,QAAQjB;AAAAA,IACRE,aAAAA;AAAAA,IACAiB,iBAAiBf;AAAAA,IACjBG,kBAAAA;AAAAA,IACAW,MAAK;AAAA,IACLE,eAAc;AAAA,IACdR,OAAO;AAAA,MAAES,YAAY;AAAA,IAAA;AAAA,EAA8B,CACpD,CACE;AAET;"}

package/dist/index46.js

@@ -1,33 +1,33 @@
-import e, { useState as y, useEffect as E } from "react";
-const k = ({
-  defaultActiveNavigationItem: l,
-  navigationItems: c,
-  onNavigationItemChange: s
+import f from "react";
+const p = ({
+  size: r = 40,
+  text: e,
+  textColor: s = "var(--color-white)",
+  backgroundColor: c = "var(--color-gray-400)",
+  className: n = "",
+  onClick: o
 }) => {
-  const x = l || (c[0] ? c[0].id : ""), [d, o] = y(x);
-  E(() => {
-    o(l || "");
-  }, [l]);
-  const f = (r) => {
-    o(r == null ? void 0 : r.id), s == null || s(r == null ? void 0 : r.id);
-  }, u = (r, b) => r.id === b;
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-navigation-bar flex items-center gap-4"
-  }, c.map((r) => {
-    const b = d === r.id, p = r.disabled;
-    return /* @__PURE__ */ e.createElement("div", {
-      key: r.label,
-      onClick: () => !p && f(r),
-      className: `text-base ${p ? "text-[var(--color-gray-400)] cursor-not-allowed" : b ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"}`
-    }, r.label);
-  })), /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-navigation-bar-content"
-  }, c.map((r) => /* @__PURE__ */ e.createElement("div", {
-    key: r.id,
-    className: `navigation-item-content ${u(r, d) ? "block" : "hidden"}`
-  }, u(r, d) && (r == null ? void 0 : r.renderNavigationItemContent) && (r == null ? void 0 : r.renderNavigationItemContent(r))))));
+  var t, a, i, l;
+  const u = (l = (i = (a = (t = e == null ? void 0 : e.split(" ")) == null ? void 0 : t.map((d) => d[0])) == null ? void 0 : a.join("")) == null ? void 0 : i.toUpperCase()) == null ? void 0 : l.slice(0, 3);
+  return /* @__PURE__ */ f.createElement("div", {
+    className: `
+        se-design-avatar 
+        flex items-center justify-center 
+        rounded-full font-medium
+        ${o ? "cursor-pointer" : "cursor-default"}
+        ${n}
+      `,
+    onClick: o,
+    style: {
+      width: r,
+      height: r,
+      backgroundColor: c,
+      color: s,
+      fontSize: `${r * 0.4}px`
+    }
+  }, u);
 };
 export {
-  k as NavigationBar
+  p as Avatar
 };
 //# sourceMappingURL=index46.js.map

package/dist/index46.js.map

@@ -1 +1 @@
-{"version":3,"file":"index46.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\n\ninterface NavigationItemProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n  defaultActiveNavigationItem?: string;\n  navigationItems: NavigationItemProps[];\n  onNavigationItemChange?: (navigationItemId: string) => void;\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n  defaultActiveNavigationItem,\n  navigationItems,\n  onNavigationItemChange\n}) => {\n  const defaultNavigationItemId = defaultActiveNavigationItem || (navigationItems[0] ? navigationItems[0].id : '');\n  const [activeNavigationItem, setActiveNavigationItem] = useState(defaultNavigationItemId);\n\n  useEffect(() => {\n    setActiveNavigationItem(defaultActiveNavigationItem || '');\n  }, [defaultActiveNavigationItem]);\n\n  const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n    setActiveNavigationItem(navigationItem?.id);\n    onNavigationItemChange?.(navigationItem?.id);\n  };\n\n  const isNavigationItemActive = (navigationItem: NavigationItemProps, activeNavigationItem: string) => {\n    return navigationItem.id === activeNavigationItem;\n  };\n\n  return (\n    <>\n      <div className=\"se-design-navigation-bar flex items-center gap-4\">\n        {navigationItems.map((navigationItem) => {\n          const isActive = activeNavigationItem === navigationItem.id;\n          const isDisabled = navigationItem.disabled;\n          return (\n            <div\n              key={navigationItem.label}\n              onClick={() => !isDisabled && handleNavigationItemClick(navigationItem)}\n              className={`text-base ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                    ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n                    : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              }`}\n            >\n              {navigationItem.label}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"se-design-navigation-bar-content\">\n        {navigationItems.map((navigationItem) => (\n          <div\n            key={navigationItem.id}\n            className={`navigation-item-content ${isNavigationItemActive(navigationItem, activeNavigationItem) ? 'block' : 'hidden'}`}\n          >\n            {isNavigationItemActive(navigationItem, activeNavigationItem) &&\n              navigationItem?.renderNavigationItemContent &&\n              navigationItem?.renderNavigationItemContent(navigationItem)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","useEffect","handleNavigationItemClick","navigationItem","isNavigationItemActive","createElement","React","Fragment","className","map","isActive","isDisabled","disabled","key","label","onClick","renderNavigationItemContent"],"mappings":";AAeO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,6BAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,wBAAAA;AACF,MAAM;AACEC,QAAAA,IAA0BH,MAAgCC,EAAgB,CAAC,IAAIA,EAAgB,CAAC,EAAEG,KAAK,KACvG,CAACC,GAAsBC,CAAuB,IAAIC,EAASJ,CAAuB;AAExFK,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAwBN,KAA+B,EAAE;AAAA,EAAA,GACxD,CAACA,CAA2B,CAAC;AAE1BS,QAAAA,IAA4BA,CAACC,MAAwC;AACzEJ,IAAAA,EAAwBI,KAAAA,gBAAAA,EAAgBN,EAAE,GAC1CF,KAAAA,QAAAA,EAAyBQ,KAAAA,gBAAAA,EAAgBN;AAAAA,EAC3C,GAEMO,IAAyBA,CAACD,GAAqCL,MAC5DK,EAAeN,OAAOC;AAG/B,2BACEO,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAgBe,IAAKN,CAAmBA,MAAA;AACjCO,UAAAA,IAAWZ,MAAyBK,EAAeN,IACnDc,IAAaR,EAAeS;AAEhCN,WAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MACEQ,KAAKV,EAAeW;AAAAA,MACpBC,SAASA,MAAM,CAACJ,KAAcT,EAA0BC,CAAc;AAAA,MACtEK,WAAW,aACTG,IACI,oDACAD,IACE,gEACA,4FAA4F;AAAA,IAAA,GAGnGP,EAAeW,KACb;AAAA,EAER,CAAA,CACE,GAELR,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAgBe,IAAKN,CACpBG,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEQ,KAAKV,EAAeN;AAAAA,IACpBW,WAAW,2BAA2BJ,EAAuBD,GAAgBL,CAAoB,IAAI,UAAU,QAAQ;AAAA,EAEtHM,GAAAA,EAAuBD,GAAgBL,CAAoB,MAC1DK,KAAAA,gBAAAA,EAAgBa,iCAChBb,KAAAA,gBAAAA,EAAgBa,4BAA4Bb,GAC3C,CACN,CACE,CACL;AAEN;"}
+{"version":3,"file":"index46.js","sources":["../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport type AvatarProps = {\n  size?: number;\n  text: string;\n  textColor?: string;\n  backgroundColor?: string;\n  className?: string;\n  onClick?: () => void;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = 'var(--color-gray-400)',\n  className = '',\n  onClick\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 3);\n\n  return (\n    <div\n      className={`\n        se-design-avatar \n        flex items-center justify-center \n        rounded-full font-medium\n        ${onClick ? 'cursor-pointer' : 'cursor-default'}\n        ${className}\n      `}\n      onClick={onClick}\n      style={{\n        width: size,\n        height: size,\n        backgroundColor: backgroundColor,\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["Avatar","size","text","textColor","backgroundColor","className","onClick","initials","split","map","word","join","toUpperCase","slice","React","createElement","style","width","height","color","fontSize"],"mappings":";AAWO,MAAMA,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AACF,MAAM;;AACJ,QAAMC,KAAWL,KAAAA,KAAAA,KAAAA,IAAAA,KAAAA,gBAAAA,EACbM,MAAM,SADON,gBAAAA,EAEbO,IAAKC,OAASA,EAAK,CAAC,OAFPR,gBAAAA,EAGbS,KAAK,QAHQT,gBAAAA,EAIbU,kBAJaV,gBAAAA,EAKbW,MAAM,GAAG;AAGXC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEV,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACAU,OAAO;AAAA,MACLC,OAAOhB;AAAAA,MACPiB,QAAQjB;AAAAA,MACRG,iBAAAA;AAAAA,MACAe,OAAOhB;AAAAA,MACPiB,UAAU,GAAGnB,IAAO,GAAG;AAAA,IAAA;AAAA,KAGxBM,CACE;AAET;"}

package/dist/index47.js

@@ -1,46 +1,33 @@
-import a, { useState as x } from "react";
-import { Icon as f } from "./index5.js";
-const w = ({
-  crumbs: t,
-  onCrumbClick: l,
-  className: g
+import e, { useState as y, useEffect as E } from "react";
+const k = ({
+  defaultActiveNavigationItem: l,
+  navigationItems: c,
+  onNavigationItemChange: s
 }) => {
-  const [o, i] = x(!1), s = (t == null ? void 0 : t.length) > 3, n = s ? t == null ? void 0 : t.slice(-2) : t, d = s ? t == null ? void 0 : t.slice(0, -2) : [];
-  return /* @__PURE__ */ a.createElement("div", {
-    className: `se-design-breadcrumbs flex items-center ${g}`,
-    "aria-label": "Breadcrumb"
-  }, s && /* @__PURE__ */ a.createElement("div", {
-    className: "relative"
-  }, /* @__PURE__ */ a.createElement("div", {
-    onClick: () => i(!o),
-    className: "p-1 hover:bg-gray-100 rounded-full"
-  }, /* @__PURE__ */ a.createElement(f, {
-    name: "kebab-menu"
-  })), o && /* @__PURE__ */ a.createElement("div", {
-    className: "se-design-breadcrumbs-dropdown absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-md py-1 z-10"
-  }, d == null ? void 0 : d.map((e) => /* @__PURE__ */ a.createElement("p", {
-    key: e == null ? void 0 : e.id,
-    onClick: () => {
-      l == null || l(e), i(!1);
-    },
-    className: "w-full text-left px-4 py-2 text-xl text-gray-500 cursor-pointer  hover:bg-gray-100"
-  }, e == null ? void 0 : e.label)))), /* @__PURE__ */ a.createElement("div", {
-    className: "se-design-breadcrumbs-list inline-flex items-center"
-  }, n == null ? void 0 : n.map((e, p) => /* @__PURE__ */ a.createElement("div", {
-    key: e == null ? void 0 : e.id,
-    className: "se-design-breadcrumbs-item inline-flex items-center w-fit"
-  }, (p > 0 || s) && /* @__PURE__ */ a.createElement(f, {
-    name: "chevron",
-    rotation: "270"
-  }), /* @__PURE__ */ a.createElement("p", {
-    onClick: () => l == null ? void 0 : l(e),
-    className: `
-                inline-flex items-center w-fit text-xl
-                ${p === (n == null ? void 0 : n.length) - 1 ? "text-black font-medium cursor-default" : "text-gray-500 hover:text-gray-700 cursor-pointer"}
-              `
-  }, e == null ? void 0 : e.label)))));
+  const x = l || (c[0] ? c[0].id : ""), [d, o] = y(x);
+  E(() => {
+    o(l || "");
+  }, [l]);
+  const f = (r) => {
+    o(r == null ? void 0 : r.id), s == null || s(r == null ? void 0 : r.id);
+  }, u = (r, b) => r.id === b;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-navigation-bar flex items-center gap-4"
+  }, c.map((r) => {
+    const b = d === r.id, p = r.disabled;
+    return /* @__PURE__ */ e.createElement("div", {
+      key: r.label,
+      onClick: () => !p && f(r),
+      className: `text-base ${p ? "text-[var(--color-gray-400)] cursor-not-allowed" : b ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"}`
+    }, r.label);
+  })), /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-navigation-bar-content"
+  }, c.map((r) => /* @__PURE__ */ e.createElement("div", {
+    key: r.id,
+    className: `navigation-item-content ${u(r, d) ? "block" : "hidden"}`
+  }, u(r, d) && (r == null ? void 0 : r.renderNavigationItemContent) && (r == null ? void 0 : r.renderNavigationItemContent(r))))));
 };
 export {
-  w as BreadCrumbs
+  k as NavigationBar
 };
 //# sourceMappingURL=index47.js.map

package/dist/index47.js.map

@@ -1 +1 @@
-{"version":3,"file":"index47.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Icon } from '../Icon';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n}\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className }) => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  return (\n    <div className={`se-design-breadcrumbs flex items-center ${className}`} aria-label=\"Breadcrumb\">\n      {shouldShowDropdown && (\n        <div className=\"relative\">\n          <div onClick={() => setIsDropdownOpen(!isDropdownOpen)} className=\"p-1 hover:bg-gray-100 rounded-full\">\n            <Icon name=\"kebab-menu\" />\n          </div>\n\n          {isDropdownOpen && (\n            <div className=\"se-design-breadcrumbs-dropdown absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-md py-1 z-10\">\n              {dropdownCrumbs?.map((crumb) => (\n                <p\n                  key={crumb?.id}\n                  onClick={() => {\n                    onCrumbClick?.(crumb);\n                    setIsDropdownOpen(false);\n                  }}\n                  className=\"w-full text-left px-4 py-2 text-xl text-gray-500 cursor-pointer  hover:bg-gray-100\"\n                >\n                  {crumb?.label}\n                </p>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => (\n          <div key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit\">\n            {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={\"270\"} />}\n            <p\n              onClick={() => onCrumbClick?.(crumb)}\n              className={`\n                inline-flex items-center w-fit text-xl\n                ${\n                  index === visibleCrumbs?.length - 1\n                    ? 'text-black font-medium cursor-default'\n                    : 'text-gray-500 hover:text-gray-700 cursor-pointer'\n                }\n              `}\n            >\n              {crumb?.label}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["BreadCrumbs","crumbs","onCrumbClick","className","isDropdownOpen","setIsDropdownOpen","useState","shouldShowDropdown","length","visibleCrumbs","slice","dropdownCrumbs","React","createElement","onClick","Icon","name","map","crumb","key","id","label","index","rotation"],"mappings":";;AAcO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA;AAAU,MAAM;AAC9F,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpDC,KAAqBN,KAAAA,gBAAAA,EAAQO,UAAS,GACtCC,IAAgBF,IAAqBN,KAAAA,gBAAAA,EAAQS,MAAM,MAAMT,GACzDU,IAAiBJ,IAAqBN,KAAAA,gBAAAA,EAAQS,MAAM,GAAG,MAAM,CAAE;AAGnEE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKV,WAAW,2CAA2CA,CAAS;AAAA,IAAI,cAAW;AAAA,EAChFI,GAAAA,KACCM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACbU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,SAASA,MAAMT,EAAkB,CAACD,CAAc;AAAA,IAAGD,WAAU;AAAA,EAAA,GAChEU,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAc,CAAA,CACtB,GAEJZ,KACCQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACZQ,KAAAA,gBAAAA,EAAgBM,IAAKC,CACpBN,MAAAA,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IACEM,KAAKD,KAAAA,gBAAAA,EAAOE;AAAAA,IACZN,SAASA,MAAM;AACbZ,MAAAA,KAAAA,QAAAA,EAAegB,IACfb,EAAkB,EAAK;AAAA,IACzB;AAAA,IACAF,WAAU;AAAA,EAAA,GAETe,KAAAA,gBAAAA,EAAOG,KACP,EAEF,CAEJ,GAGPR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACZM,KAAAA,gBAAAA,EAAeQ,IAAI,CAACC,GAAOI,MAC1BV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKM,KAAKD,KAAAA,gBAAAA,EAAOE;AAAAA,IAAIjB,WAAU;AAAA,EAAA,IAC3BmB,IAAQ,KAAKf,MAAuBK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,IAAUO,UAAU;AAAA,EAAA,CAAQ,GAC7EV,gBAAAA,EAAAA,cAAA,KAAA;AAAA,IACEC,SAASA,MAAMZ,KAAAA,gBAAAA,EAAegB;AAAAA,IAC9Bf,WAAW;AAAA;AAAA,kBAGPmB,OAAUb,KAAAA,gBAAAA,EAAeD,UAAS,IAC9B,0CACA,kDAAkD;AAAA;AAAA,KAIzDU,KAAAA,gBAAAA,EAAOG,KACP,CACA,EAEJ,CACF;AAET;"}
+{"version":3,"file":"index47.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\n\ninterface NavigationItemProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n  defaultActiveNavigationItem?: string;\n  navigationItems: NavigationItemProps[];\n  onNavigationItemChange?: (navigationItemId: string) => void;\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n  defaultActiveNavigationItem,\n  navigationItems,\n  onNavigationItemChange\n}) => {\n  const defaultNavigationItemId = defaultActiveNavigationItem || (navigationItems[0] ? navigationItems[0].id : '');\n  const [activeNavigationItem, setActiveNavigationItem] = useState(defaultNavigationItemId);\n\n  useEffect(() => {\n    setActiveNavigationItem(defaultActiveNavigationItem || '');\n  }, [defaultActiveNavigationItem]);\n\n  const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n    setActiveNavigationItem(navigationItem?.id);\n    onNavigationItemChange?.(navigationItem?.id);\n  };\n\n  const isNavigationItemActive = (navigationItem: NavigationItemProps, activeNavigationItem: string) => {\n    return navigationItem.id === activeNavigationItem;\n  };\n\n  return (\n    <>\n      <div className=\"se-design-navigation-bar flex items-center gap-4\">\n        {navigationItems.map((navigationItem) => {\n          const isActive = activeNavigationItem === navigationItem.id;\n          const isDisabled = navigationItem.disabled;\n          return (\n            <div\n              key={navigationItem.label}\n              onClick={() => !isDisabled && handleNavigationItemClick(navigationItem)}\n              className={`text-base ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                    ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n                    : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              }`}\n            >\n              {navigationItem.label}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"se-design-navigation-bar-content\">\n        {navigationItems.map((navigationItem) => (\n          <div\n            key={navigationItem.id}\n            className={`navigation-item-content ${isNavigationItemActive(navigationItem, activeNavigationItem) ? 'block' : 'hidden'}`}\n          >\n            {isNavigationItemActive(navigationItem, activeNavigationItem) &&\n              navigationItem?.renderNavigationItemContent &&\n              navigationItem?.renderNavigationItemContent(navigationItem)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","useEffect","handleNavigationItemClick","navigationItem","isNavigationItemActive","createElement","React","Fragment","className","map","isActive","isDisabled","disabled","key","label","onClick","renderNavigationItemContent"],"mappings":";AAeO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,6BAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,wBAAAA;AACF,MAAM;AACEC,QAAAA,IAA0BH,MAAgCC,EAAgB,CAAC,IAAIA,EAAgB,CAAC,EAAEG,KAAK,KACvG,CAACC,GAAsBC,CAAuB,IAAIC,EAASJ,CAAuB;AAExFK,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAwBN,KAA+B,EAAE;AAAA,EAAA,GACxD,CAACA,CAA2B,CAAC;AAE1BS,QAAAA,IAA4BA,CAACC,MAAwC;AACzEJ,IAAAA,EAAwBI,KAAAA,gBAAAA,EAAgBN,EAAE,GAC1CF,KAAAA,QAAAA,EAAyBQ,KAAAA,gBAAAA,EAAgBN;AAAAA,EAC3C,GAEMO,IAAyBA,CAACD,GAAqCL,MAC5DK,EAAeN,OAAOC;AAG/B,2BACEO,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAgBe,IAAKN,CAAmBA,MAAA;AACjCO,UAAAA,IAAWZ,MAAyBK,EAAeN,IACnDc,IAAaR,EAAeS;AAEhCN,WAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MACEQ,KAAKV,EAAeW;AAAAA,MACpBC,SAASA,MAAM,CAACJ,KAAcT,EAA0BC,CAAc;AAAA,MACtEK,WAAW,aACTG,IACI,oDACAD,IACE,gEACA,4FAA4F;AAAA,IAAA,GAGnGP,EAAeW,KACb;AAAA,EAER,CAAA,CACE,GAELR,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAgBe,IAAKN,CACpBG,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEQ,KAAKV,EAAeN;AAAAA,IACpBW,WAAW,2BAA2BJ,EAAuBD,GAAgBL,CAAoB,IAAI,UAAU,QAAQ;AAAA,EAEtHM,GAAAA,EAAuBD,GAAgBL,CAAoB,MAC1DK,KAAAA,gBAAAA,EAAgBa,iCAChBb,KAAAA,gBAAAA,EAAgBa,4BAA4Bb,GAC3C,CACN,CACE,CACL;AAEN;"}