@lotte-innovate/ui-component-test 0.0.157 → 0.0.159

package/dist/lib/components/Select/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import e,{createContext as a,useContext as l}from"react";import{Theme as i,Select as n}from"@radix-ui/themes";import{cva as c}from"class-variance-authority";import{cn as o}from"../../utils/utils.mjs";import{radiusVariants as s,selectAppearanceStyle as t}from"../../constants.mjs";import{useTheme as m}from"../../theme/ThemeProvider.mjs";import{MAIN_COLOR as d}from"../../color/constants.mjs";var u=function(){return u=Object.assign||function(r){for(var e,a=1,l=arguments.length;a<l;a++)for(var i in e=arguments[a])Object.prototype.hasOwnProperty.call(e,i)&&(r[i]=e[i]);return r},u.apply(this,arguments)},f=function(r,e){var a={};for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&e.indexOf(l)<0&&(a[l]=r[l]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(l=Object.getOwnPropertySymbols(r);i<l.length;i++)e.indexOf(l[i])<0&&Object.prototype.propertyIsEnumerable.call(r,l[i])&&(a[l[i]]=r[l[i]])}return a},p=c("",{variants:{radius:u({},s.base)},defaultVariants:{radius:"medium"}}),h=a({size:"medium",scaling:"100%",color:d,radius:"medium",appearance:"classic"}),v=function(){return l(h)},N=e.forwardRef((function(e,a){var l,c=e.scaling,o=e.size,s=e.color,t=e.radius,p=e.appearance,v=e.children,N=f(e,["scaling","size","color","radius","appearance","children"]),g=m().theme,y="2";"small"===o&&(y="1"),"large"===o&&(y="3");var S={scaling:null!=c?c:g.themeScaling,color:null!==(l=null!=s?s:g.themeColor)&&void 0!==l?l:d,radius:null!=t?t:g.themeRadius,size:o,sizeTheme:y,appearance:p};return r(h.Provider,{value:S,children:r(i,{scaling:S.scaling,accentColor:S.color,hasBackground:!1,children:r("div",{ref:a,children:r(n.Root,u({size:y},N,{children:v}))})})})}));N.displayName="Select.Root";var g=e.forwardRef((function(e,a){var l=e.children,i=e.className,c=f(e,["children","className"]),s=v(),m=s.radius,d=void 0===m?"medium":m,h=s.color,N=s.appearance,g=void 0===N?"classic":N;return r(n.Trigger,u({ref:a,variant:g,radius:d,className:o(p({radius:d}),t(g,h),i)},c,{children:l}))}));g.displayName="Select.Trigger";var y=e.forwardRef((function(e,a){var l=e.children,i=e.className,c=f(e,["children","className"]),s=v(),t=s.radius,m=s.color;return r(n.Content,u({ref:a,color:m,position:"popper",className:o(p({radius:"full"==t?"large":t}),i)},c,{children:l}))}));y.displayName="Select.Content";var S=e.forwardRef((function(e,a){var l=e.value,i=e.children,c=e.className,s=f(e,["value","children","className"]),t=v().radius;return r(n.Item,u({ref:a,value:l},s,{className:o(p({radius:t}),c),children:i}))}));S.displayName="Select.Item";var b=e.forwardRef((function(e,a){var l=e.children,i=e.className,c=f(e,["children","className"]);return r(n.Group,u({ref:a},c,{className:i,children:l}))}));b.displayName="Select.Group";var O=e.forwardRef((function(e,a){var l=e.children,i=e.className,c=f(e,["children","className"]);return r(n.Label,u({ref:a},c,{className:i,children:l}))}));O.displayName="Select.Label";var j=e.forwardRef((function(e,a){var l=e.children,i=e.className,c=f(e,["children","className"]);return r(n.Separator,u({ref:a},c,{className:i,children:l}))}));j.displayName="Select.Separator";var w={Root:N,Trigger:g,Content:y,Item:S,Group:b,Label:O,Separator:j};export{y as Content,b as Group,S as Item,O as Label,N as Root,j as Separator,g as Trigger,w as default,v as useSelectContext};
+import{jsx as e}from"react/jsx-runtime";import r,{createContext as a,useContext as l}from"react";import{Theme as i,Select as n}from"@radix-ui/themes";import{cva as c}from"class-variance-authority";import{cn as s}from"../../utils/utils.mjs";import{radiusVariants as t,selectAppearanceStyle as o}from"../../constants.mjs";import{useTheme as m}from"../../theme/ThemeProvider.mjs";import{MAIN_COLOR as d}from"../../color/constants.mjs";var u=function(){return u=Object.assign||function(e){for(var r,a=1,l=arguments.length;a<l;a++)for(var i in r=arguments[a])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);return e},u.apply(this,arguments)},f=function(e,r){var a={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&r.indexOf(l)<0&&(a[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(l=Object.getOwnPropertySymbols(e);i<l.length;i++)r.indexOf(l[i])<0&&Object.prototype.propertyIsEnumerable.call(e,l[i])&&(a[l[i]]=e[l[i]])}return a},p=c("",{variants:{radius:u({},t.base)},defaultVariants:{radius:"medium"}}),h=a({size:"medium",scaling:"100%",color:d,radius:"medium",appearance:"classic"}),v=function(){return l(h)},N=r.forwardRef((function(r,a){var l,c=r.scaling,s=r.size,t=r.color,o=r.radius,p=r.appearance,v=r.children,N=f(r,["scaling","size","color","radius","appearance","children"]),g=m().theme,y="2";"small"===s&&(y="1"),"large"===s&&(y="3");var S={scaling:null!=c?c:g.themeScaling,color:null!==(l=null!=t?t:g.themeColor)&&void 0!==l?l:d,radius:null!=o?o:g.themeRadius,size:s,sizeTheme:y,appearance:p};return e(h.Provider,{value:S,children:e(i,{scaling:S.scaling,accentColor:S.color,hasBackground:!1,children:e("div",{ref:a,children:e(n.Root,u({size:y},N,{children:v}))})})})}));N.displayName="Select.Root";var g=r.forwardRef((function(r,a){var l=r.children,i=r.className,c=f(r,["children","className"]),t=v(),m=t.radius,d=void 0===m?"medium":m,h=t.color,N=t.appearance,g=void 0===N?"classic":N;return e(n.Trigger,u({ref:a,variant:g,radius:d,className:s(p({radius:d}),o(g,h),i)},c,{children:l}))}));g.displayName="Select.Trigger";var y=r.forwardRef((function(r,a){var l=r.children,i=r.className,c=f(r,["children","className"]),t=v().radius;return e(n.Content,u({ref:a,position:"popper",className:s(p({radius:"full"==t?"large":t}),"z-10",i)},c,{children:l}))}));y.displayName="Select.Content";var S=r.forwardRef((function(r,a){var l=r.value,i=r.children,c=r.className,t=f(r,["value","children","className"]),o=v().radius;return e(n.Item,u({ref:a,value:l},t,{className:s(p({radius:o}),c),children:i}))}));S.displayName="Select.Item";var b=r.forwardRef((function(r,a){var l=r.children,i=r.className,c=f(r,["children","className"]);return e(n.Group,u({ref:a},c,{className:i,children:l}))}));b.displayName="Select.Group";var O=r.forwardRef((function(r,a){var l=r.children,i=r.className,c=f(r,["children","className"]);return e(n.Label,u({ref:a},c,{className:i,children:l}))}));O.displayName="Select.Label";var j=r.forwardRef((function(r,a){var l=r.children,i=r.className,c=f(r,["children","className"]);return e(n.Separator,u({ref:a},c,{className:i,children:l}))}));j.displayName="Select.Separator";var w={Root:N,Trigger:g,Content:y,Item:S,Group:b,Label:O,Separator:j};export{y as Content,b as Group,S as Item,O as Label,N as Root,j as Separator,g as Trigger,w as default,v as useSelectContext};
 //# sourceMappingURL=index.mjs.map

package/dist/lib/components/Separator/index.d.ts

@@ -7,5 +7,5 @@ declare const separatorVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/themes").SeparatorProps & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & SeparatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/themes").SeparatorProps & React.RefAttributes<HTMLSpanElement>, "ref">, "color" | "size"> & SeparatorProps & React.RefAttributes<HTMLSpanElement>>;
 export default Separator;

package/dist/lib/components/SideBar/index.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as ReactProSidebar from 'react-pro-sidebar';
+import { IRadius } from '../../../lib/types';
 export interface SidebarProps extends VariantProps<typeof sidebarVariants> {
     size?: 'small' | 'medium' | 'large' | 'fill-large';
+    radius?: IRadius;
 }
 declare const sidebarVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
@@ -17,5 +19,30 @@ declare const Sidebar: {
     Menu: React.ForwardRefExoticComponent<Omit<Omit<ReactProSidebar.MenuProps & React.RefAttributes<HTMLMenuElement>, "ref">, "size"> & SidebarProps & React.RefAttributes<HTMLMenuElement>>;
     Item: React.ForwardRefExoticComponent<Omit<Omit<ReactProSidebar.MenuItemProps & React.RefAttributes<HTMLLIElement>, "ref">, "size"> & SidebarProps & React.RefAttributes<HTMLLIElement>>;
     SubMenu: React.ForwardRefExoticComponent<Omit<Omit<ReactProSidebar.SubMenuProps & React.RefAttributes<HTMLLIElement>, "ref">, "size"> & SidebarProps & React.RefAttributes<HTMLLIElement>>;
+    menuClasses: {
+        root: string;
+        menuItemRoot: string;
+        subMenuRoot: string;
+        button: string;
+        prefix: string;
+        suffix: string;
+        label: string;
+        icon: string;
+        subMenuContent: string;
+        SubMenuExpandIcon: string;
+        disabled: string;
+        active: string;
+        open: string;
+    };
+    sidebarClasses: {
+        root: string;
+        container: string;
+        image: string;
+        backdrop: string;
+        collapsed: string;
+        toggled: string;
+        rtl: string;
+        broken: string;
+    };
 };
 export default Sidebar;

package/dist/lib/components/SideBar/index.js

@@ -28,6 +28,7 @@ import { cn } from '../../../lib/utils/utils';
 import { bgColorStyle, scalingVariants } from '../../../lib/constants';
 import { useTheme } from '../../../lib/theme';
 import * as ReactProSidebar from 'react-pro-sidebar';
+import { menuClasses, sidebarClasses } from 'react-pro-sidebar';
 import { useWindowSize } from '../../../lib/utils/useWindowSize';
 import * as alphaColors from '../../../lib/color/alpha';
 var sidebarVariants = cva('', {
@@ -50,8 +51,9 @@ export var Root = React.forwardRef(function (_a, forwardedRef) {
 Root.displayName = 'Sidebar.Root';
 export var Menu = React.forwardRef(function (_a, forwardedRef) {
     var _b;
-    var scaling = _a.scaling, size = _a.size, color = _a.color, className = _a.className, menuItemStyles = _a.menuItemStyles, children = _a.children, props = __rest(_a, ["scaling", "size", "color", "className", "menuItemStyles", "children"]);
+    var scaling = _a.scaling, size = _a.size, color = _a.color, radius = _a.radius, className = _a.className, menuItemStyles = _a.menuItemStyles, children = _a.children, props = __rest(_a, ["scaling", "size", "color", "radius", "className", "menuItemStyles", "children"]);
     var heigthSize = '50px';
+    var radiusSize = '0px';
     var fontSize = '16px';
     if (size == 'small') {
         heigthSize = '40px';
@@ -61,6 +63,14 @@ export var Menu = React.forwardRef(function (_a, forwardedRef) {
         heigthSize = '60px';
         fontSize = '18px';
     }
+    if (radius == 'small')
+        radiusSize = '3px';
+    if (radius == 'medium')
+        radiusSize = '4px';
+    if (radius == 'large')
+        radiusSize = '6px';
+    if (radius == 'full')
+        radiusSize = '9999px';
     var theme = useTheme().theme;
     var sidebarStyle = {
         scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
@@ -68,11 +78,12 @@ export var Menu = React.forwardRef(function (_a, forwardedRef) {
     };
     var colorKey = "".concat(sidebarStyle.color, "A");
     var colorValue = alphaColors[colorKey];
-    return (_jsx(ReactProSidebar.Menu, __assign({ menuItemStyles: __assign({ button: function (_a) {
+    return (_jsx(ReactProSidebar.Menu, __assign({ className: className, menuItemStyles: __assign({ button: function (_a) {
                 var level = _a.level, active = _a.active, disabled = _a.disabled, open = _a.open;
                 return {
                     height: heigthSize,
                     fontSize: fontSize,
+                    borderRadius: radiusSize,
                     backgroundColor: active ? colorValue[5] : '',
                     '&:hover': {
                         backgroundColor: colorValue[3],
@@ -83,12 +94,12 @@ export var Menu = React.forwardRef(function (_a, forwardedRef) {
 Menu.displayName = 'Sidebar.Menu';
 export var Item = React.forwardRef(function (_a, forwardedRef) {
     var scaling = _a.scaling, size = _a.size, color = _a.color, className = _a.className, children = _a.children, props = __rest(_a, ["scaling", "size", "color", "className", "children"]);
-    return _jsx(ReactProSidebar.MenuItem, __assign({}, props, { children: children }));
+    return (_jsx(ReactProSidebar.MenuItem, __assign({ className: className }, props, { children: children })));
 });
 Item.displayName = 'Sidebar.Item';
 export var SubMenu = React.forwardRef(function (_a, forwardedRef) {
     var scaling = _a.scaling, size = _a.size, color = _a.color, className = _a.className, children = _a.children, props = __rest(_a, ["scaling", "size", "color", "className", "children"]);
-    return _jsx(ReactProSidebar.SubMenu, __assign({}, props, { children: children }));
+    return (_jsx(ReactProSidebar.SubMenu, __assign({ className: className }, props, { children: children })));
 });
 SubMenu.displayName = 'Sidebar.SubMenu';
 var Sidebar = {
@@ -96,5 +107,7 @@ var Sidebar = {
     Menu: Menu,
     Item: Item,
     SubMenu: SubMenu,
+    menuClasses: menuClasses,
+    sidebarClasses: sidebarClasses,
 };
 export default Sidebar;

package/dist/lib/components/SideBar/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import r from"react";import{cva as o}from"class-variance-authority";import{cn as a}from"../../utils/utils.mjs";import{scalingVariants as l,bgColorStyle as n}from"../../constants.mjs";import{useTheme as t}from"../../theme/ThemeProvider.mjs";import*as c from"react-pro-sidebar";import{useWindowSize as i}from"../../utils/useWindowSize.mjs";import*as s from"../../color/alpha.mjs";var m=function(){return m=Object.assign||function(e){for(var r,o=1,a=arguments.length;o<a;o++)for(var l in r=arguments[o])Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);return e},m.apply(this,arguments)},u=function(e,r){var o={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&r.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(a=Object.getOwnPropertySymbols(e);l<a.length;l++)r.indexOf(a[l])<0&&Object.prototype.propertyIsEnumerable.call(e,a[l])&&(o[a[l]]=e[a[l]])}return o},d=o("",{variants:{scaling:m({},l),color:n()}}),p=r.forwardRef((function(r,o){var l,n=r.scaling;r.size;var s=r.color,p=r.className,f=r.children,h=u(r,["scaling","size","color","className","children"]),v=t().theme,g=i(),b={scaling:null!=n?n:v.themeScaling,color:null!==(l=null!=s?s:v.themeColor)&&void 0!==l?l:"slate"};return e(c.Sidebar,m({className:a("bg-".concat(b.color,"A-6 dark:bg-").concat(b.color,"DarkA-6"),d({scaling:b.scaling}),p)},h,{collapsed:void 0===h.collapsed?g<=250:h.collapsed,children:f}))}));p.displayName="Sidebar.Root";var f=r.forwardRef((function(r,o){var a,l=r.scaling,n=r.size,i=r.color;r.className;var d=r.menuItemStyles,p=r.children,f=u(r,["scaling","size","color","className","menuItemStyles","children"]),h="50px",v="16px";"small"==n&&(h="40px",v="14px"),"large"==n&&(h="60px",v="18px");var g=t().theme,b={scaling:null!=l?l:g.themeScaling,color:null!==(a=null!=i?i:g.themeColor)&&void 0!==a?a:"slate"},y="".concat(b.color,"A"),S=s[y];return e(c.Menu,m({menuItemStyles:m({button:function(e){e.level;var r=e.active;return e.disabled,e.open,{height:h,fontSize:v,backgroundColor:r?S[5]:"","&:hover":{backgroundColor:S[3]}}}},d)},f,{children:p}))}));f.displayName="Sidebar.Menu";var h=r.forwardRef((function(r,o){r.scaling,r.size,r.color,r.className;var a=r.children,l=u(r,["scaling","size","color","className","children"]);return e(c.MenuItem,m({},l,{children:a}))}));h.displayName="Sidebar.Item";var v=r.forwardRef((function(r,o){r.scaling,r.size,r.color,r.className;var a=r.children,l=u(r,["scaling","size","color","className","children"]);return e(c.SubMenu,m({},l,{children:a}))}));v.displayName="Sidebar.SubMenu";var g={Root:p,Menu:f,Item:h,SubMenu:v};export{h as Item,f as Menu,p as Root,v as SubMenu,g as default};
+import{jsx as e}from"react/jsx-runtime";import r from"react";import{cva as a}from"class-variance-authority";import{cn as l}from"../../utils/utils.mjs";import{scalingVariants as o,bgColorStyle as s}from"../../constants.mjs";import{useTheme as n}from"../../theme/ThemeProvider.mjs";import*as i from"react-pro-sidebar";import{menuClasses as t,sidebarClasses as c}from"react-pro-sidebar";import{useWindowSize as m}from"../../utils/useWindowSize.mjs";import*as u from"../../color/alpha.mjs";var d=function(){return d=Object.assign||function(e){for(var r,a=1,l=arguments.length;a<l;a++)for(var o in r=arguments[a])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},d.apply(this,arguments)},p=function(e,r){var a={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&r.indexOf(l)<0&&(a[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(l=Object.getOwnPropertySymbols(e);o<l.length;o++)r.indexOf(l[o])<0&&Object.prototype.propertyIsEnumerable.call(e,l[o])&&(a[l[o]]=e[l[o]])}return a},f=a("",{variants:{scaling:d({},o),color:s()}}),h=r.forwardRef((function(r,a){var o,s=r.scaling;r.size;var t=r.color,c=r.className,u=r.children,h=p(r,["scaling","size","color","className","children"]),b=n().theme,g=m(),v={scaling:null!=s?s:b.themeScaling,color:null!==(o=null!=t?t:b.themeColor)&&void 0!==o?o:"slate"};return e(i.Sidebar,d({className:l("bg-".concat(v.color,"A-6 dark:bg-").concat(v.color,"DarkA-6"),f({scaling:v.scaling}),c)},h,{collapsed:void 0===h.collapsed?g<=250:h.collapsed,children:u}))}));h.displayName="Sidebar.Root";var b=r.forwardRef((function(r,a){var l,o=r.scaling,s=r.size,t=r.color,c=r.radius,m=r.className,f=r.menuItemStyles,h=r.children,b=p(r,["scaling","size","color","radius","className","menuItemStyles","children"]),g="50px",v="0px",y="16px";"small"==s&&(g="40px",y="14px"),"large"==s&&(g="60px",y="18px"),"small"==c&&(v="3px"),"medium"==c&&(v="4px"),"large"==c&&(v="6px"),"full"==c&&(v="9999px");var S=n().theme,N={scaling:null!=o?o:S.themeScaling,color:null!==(l=null!=t?t:S.themeColor)&&void 0!==l?l:"slate"},x="".concat(N.color,"A"),j=u[x];return e(i.Menu,d({className:m,menuItemStyles:d({button:function(e){e.level;var r=e.active;return e.disabled,e.open,{height:g,fontSize:y,borderRadius:v,backgroundColor:r?j[5]:"","&:hover":{backgroundColor:j[3]}}}},f)},b,{children:h}))}));b.displayName="Sidebar.Menu";var g=r.forwardRef((function(r,a){r.scaling,r.size,r.color;var l=r.className,o=r.children,s=p(r,["scaling","size","color","className","children"]);return e(i.MenuItem,d({className:l},s,{children:o}))}));g.displayName="Sidebar.Item";var v=r.forwardRef((function(r,a){r.scaling,r.size,r.color;var l=r.className,o=r.children,s=p(r,["scaling","size","color","className","children"]);return e(i.SubMenu,d({className:l},s,{children:o}))}));v.displayName="Sidebar.SubMenu";var y={Root:h,Menu:b,Item:g,SubMenu:v,menuClasses:t,sidebarClasses:c};export{g as Item,b as Menu,h as Root,v as SubMenu,y as default};
 //# sourceMappingURL=index.mjs.map

package/dist/lib/components/Slider/index.d.ts

@@ -11,5 +11,5 @@ export interface SliderProps extends VariantProps<typeof sliderVariants> {
 declare const sliderVariants: (props?: ({
     radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/themes").SliderProps & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & SliderProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/themes").SliderProps & React.RefAttributes<HTMLSpanElement>, "ref">, "color" | "size"> & SliderProps & React.RefAttributes<HTMLSpanElement>>;
 export default Slider;

package/dist/lib/components/Table/index.d.ts

@@ -5,7 +5,7 @@ import { Table as TableTheme } from '@radix-ui/themes';
 export interface TableProps extends VariantProps<typeof tableVariants> {
     color?: IColor;
     appearance?: 'ghost' | 'surface';
-    size?: 'small' | 'medium' | 'large';
+    size?: 'x-small' | 'small' | 'medium' | 'large';
 }
 declare const tableVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;

package/dist/lib/components/Table/index.js

@@ -28,6 +28,7 @@ import { Table as TableTheme, Theme } from '@radix-ui/themes';
 import { cn } from '../../../lib/utils/utils';
 import { radiusVariants, scalingVariants } from '../../../lib/constants';
 import { useTheme } from '../../../lib/theme';
+var rootSize = 'medium';
 var tableVariants = cva('', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -40,15 +41,34 @@ var tableVariants = cva('', {
 var tableRowVariants = cva('', {
     variants: {
         size: {
-            small: 'h-[36px]',
-            medium: 'h-[44px]',
-            large: 'h-[48px] p-3',
+            'x-small': 'h-[32px] text-[12px] p-[8px]',
+            small: 'h-[36px] text-[14px] p-[8px]',
+            medium: 'h-[44px] text-[14px] p-[8px]',
+            large: 'h-[56px]  text-[16px] p-[12px]',
         },
     },
+    defaultVariants: {
+        size: 'medium',
+    },
+});
+var tableHeaderVariants = cva('', {
+    variants: {
+        size: {
+            'x-small': 'h-[32px] text-[12px] p-[8px]',
+            small: 'h-[36px] text-[14px] p-[8px]',
+            medium: 'h-[44px] text-[14px] p-[8px]',
+            large: 'h-[56px]  text-[16px] p-[16px]',
+        },
+    },
+    defaultVariants: {
+        size: 'medium',
+    },
 });
 export var Root = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, appearance = _a.appearance, scaling = _a.scaling, size = _a.size, radius = _a.radius, tableProps = __rest(_a, ["className", "children", "appearance", "scaling", "size", "radius"]);
     var theme = useTheme().theme;
+    if (size)
+        rootSize = size;
     var sizeTheme = '2';
     if (size === 'small')
         sizeTheme = '1';
@@ -63,7 +83,7 @@ export var Root = React.forwardRef(function (_a, ref) {
 });
 Root.displayName = 'Table.Root';
 export var Header = React.forwardRef(function (_a, forwardedRef) {
-    var className = _a.className, children = _a.children, scaling = _a.scaling, props = __rest(_a, ["className", "children", "scaling"]);
+    var className = _a.className, children = _a.children, scaling = _a.scaling, size = _a.size, props = __rest(_a, ["className", "children", "scaling", "size"]);
     return (_jsx(TableTheme.Header, __assign({ ref: forwardedRef, className: cn('', tableVariants({ scaling: scaling }), className) }, props, { children: children })));
 });
 Header.displayName = 'Table.Header';
@@ -73,23 +93,23 @@ export var Body = React.forwardRef(function (_a, forwardedRef) {
 });
 Body.displayName = 'Table.Body';
 export var Row = React.forwardRef(function (_a, forwardedRef) {
-    var className = _a.className, children = _a.children, scaling = _a.scaling, props = __rest(_a, ["className", "children", "scaling"]);
+    var className = _a.className, children = _a.children, scaling = _a.scaling, size = _a.size, props = __rest(_a, ["className", "children", "scaling", "size"]);
     return (_jsx(TableTheme.Row, __assign({ ref: forwardedRef, className: cn('', tableVariants({ scaling: scaling }), className) }, props, { children: children })));
 });
 Row.displayName = 'Table.Row';
 export var Cell = React.forwardRef(function (_a, forwardedRef) {
-    var className = _a.className, children = _a.children, scaling = _a.scaling, cellProps = __rest(_a, ["className", "children", "scaling"]);
-    return (_jsx(TableTheme.Cell, __assign({ className: cn('', tableVariants({ scaling: scaling }), className) }, cellProps, { ref: forwardedRef, children: children })));
+    var className = _a.className, children = _a.children, scaling = _a.scaling, size = _a.size, cellProps = __rest(_a, ["className", "children", "scaling", "size"]);
+    return (_jsx(TableTheme.Cell, __assign({ className: cn(tableRowVariants({ size: rootSize }), tableVariants({ scaling: scaling }), className) }, cellProps, { ref: forwardedRef, children: children })));
 });
 Cell.displayName = 'Table.Cell';
 export var ColumnHeaderCell = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, scaling = _a.scaling, size = _a.size, props = __rest(_a, ["className", "children", "scaling", "size"]);
-    return (_jsx(TableTheme.ColumnHeaderCell, __assign({ ref: forwardedRef, className: cn('', tableVariants({ scaling: scaling }), tableRowVariants({ size: size }), className) }, props, { children: children })));
+    return (_jsx(TableTheme.ColumnHeaderCell, __assign({ ref: forwardedRef, className: cn('', tableVariants({ scaling: scaling }), tableHeaderVariants({ size: rootSize }), className) }, props, { children: children })));
 });
 ColumnHeaderCell.displayName = 'Table.ColumnHeaderCell';
 export var RowHeaderCell = React.forwardRef(function (_a, forwardedRef) {
-    var className = _a.className, children = _a.children, scaling = _a.scaling, props = __rest(_a, ["className", "children", "scaling"]);
-    return (_jsx(TableTheme.RowHeaderCell, __assign({ ref: forwardedRef, className: cn('', tableVariants({ scaling: scaling }), className) }, props, { children: children })));
+    var className = _a.className, children = _a.children, scaling = _a.scaling, size = _a.size, props = __rest(_a, ["className", "children", "scaling", "size"]);
+    return (_jsx(TableTheme.RowHeaderCell, __assign({ ref: forwardedRef, className: cn('', tableVariants({ scaling: scaling }), tableRowVariants({ size: rootSize }), className) }, props, { children: children })));
 });
 RowHeaderCell.displayName = 'Table.RowHeaderCell';
 var Table = {

package/dist/lib/components/Table/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as a}from"react/jsx-runtime";import e from"react";import{cva as r}from"class-variance-authority";import{Theme as l,Table as s}from"@radix-ui/themes";import{cn as n}from"../../utils/utils.mjs";import{scalingVariants as i,radiusVariants as c}from"../../constants.mjs";import{useTheme as t}from"../../theme/ThemeProvider.mjs";var o=function(){return o=Object.assign||function(a){for(var e,r=1,l=arguments.length;r<l;r++)for(var s in e=arguments[r])Object.prototype.hasOwnProperty.call(e,s)&&(a[s]=e[s]);return a},o.apply(this,arguments)},m=function(a,e){var r={};for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&e.indexOf(l)<0&&(r[l]=a[l]);if(null!=a&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(l=Object.getOwnPropertySymbols(a);s<l.length;s++)e.indexOf(l[s])<0&&Object.prototype.propertyIsEnumerable.call(a,l[s])&&(r[l[s]]=a[l[s]])}return r},d=r("",{variants:{scaling:o({},i),radius:o({},c.base)},defaultVariants:{scaling:"100%"}}),f=r("",{variants:{size:{small:"h-[36px]",medium:"h-[44px]",large:"h-[48px] p-3"}}}),u=e.forwardRef((function(e,r){var i=e.className,c=e.children,f=e.appearance,u=e.scaling,h=e.size,p=e.radius,g=m(e,["className","children","appearance","scaling","size","radius"]),N=t().theme,v="2";"small"===h&&(v="1"),"large"===h&&(v="3");var y=null!=p?p:N.themeRadius,b={scaling:null!=u?u:N.themeScaling,radius:"full"===y?"large":y};return a(l,{hasBackground:!1,children:a(s.Root,o({ref:r,className:n(d(b),i),variant:f,size:v},g,{children:c}))})}));u.displayName="Table.Root";var h=e.forwardRef((function(e,r){var l=e.className,i=e.children,c=e.scaling,t=m(e,["className","children","scaling"]);return a(s.Header,o({ref:r,className:n("",d({scaling:c}),l)},t,{children:i}))}));h.displayName="Table.Header";var p=e.forwardRef((function(e,r){var l=e.className,i=e.children,c=e.scaling,t=m(e,["className","children","scaling"]);return a(s.Body,o({ref:r,className:n("",d({scaling:c}),l)},t,{children:i}))}));p.displayName="Table.Body";var g=e.forwardRef((function(e,r){var l=e.className,i=e.children,c=e.scaling,t=m(e,["className","children","scaling"]);return a(s.Row,o({ref:r,className:n("",d({scaling:c}),l)},t,{children:i}))}));g.displayName="Table.Row";var N=e.forwardRef((function(e,r){var l=e.className,i=e.children,c=e.scaling,t=m(e,["className","children","scaling"]);return a(s.Cell,o({className:n("",d({scaling:c}),l)},t,{ref:r,children:i}))}));N.displayName="Table.Cell";var v=e.forwardRef((function(e,r){var l=e.className,i=e.children,c=e.scaling,t=e.size,u=m(e,["className","children","scaling","size"]);return a(s.ColumnHeaderCell,o({ref:r,className:n("",d({scaling:c}),f({size:t}),l)},u,{children:i}))}));v.displayName="Table.ColumnHeaderCell";var y=e.forwardRef((function(e,r){var l=e.className,i=e.children,c=e.scaling,t=m(e,["className","children","scaling"]);return a(s.RowHeaderCell,o({ref:r,className:n("",d({scaling:c}),l)},t,{children:i}))}));y.displayName="Table.RowHeaderCell";var b={Root:u,Header:h,Body:p,Row:g,Cell:N,ColumnHeaderCell:v,RowHeaderCell:y};export{p as Body,N as Cell,v as ColumnHeaderCell,h as Header,u as Root,g as Row,y as RowHeaderCell,b as default};
+import{jsx as e}from"react/jsx-runtime";import a from"react";import{cva as r}from"class-variance-authority";import{Theme as l,Table as s}from"@radix-ui/themes";import{cn as i}from"../../utils/utils.mjs";import{scalingVariants as n,radiusVariants as t}from"../../constants.mjs";import{useTheme as c}from"../../theme/ThemeProvider.mjs";var m=function(){return m=Object.assign||function(e){for(var a,r=1,l=arguments.length;r<l;r++)for(var s in a=arguments[r])Object.prototype.hasOwnProperty.call(a,s)&&(e[s]=a[s]);return e},m.apply(this,arguments)},o=function(e,a){var r={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&a.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(l=Object.getOwnPropertySymbols(e);s<l.length;s++)a.indexOf(l[s])<0&&Object.prototype.propertyIsEnumerable.call(e,l[s])&&(r[l[s]]=e[l[s]])}return r},d="medium",p=r("",{variants:{scaling:m({},n),radius:m({},t.base)},defaultVariants:{scaling:"100%"}}),f=r("",{variants:{size:{"x-small":"h-[32px] text-[12px] p-[8px]",small:"h-[36px] text-[14px] p-[8px]",medium:"h-[44px] text-[14px] p-[8px]",large:"h-[56px]  text-[16px] p-[12px]"}},defaultVariants:{size:"medium"}}),u=r("",{variants:{size:{"x-small":"h-[32px] text-[12px] p-[8px]",small:"h-[36px] text-[14px] p-[8px]",medium:"h-[44px] text-[14px] p-[8px]",large:"h-[56px]  text-[16px] p-[16px]"}},defaultVariants:{size:"medium"}}),h=a.forwardRef((function(a,r){var n=a.className,t=a.children,f=a.appearance,u=a.scaling,h=a.size,x=a.radius,g=o(a,["className","children","appearance","scaling","size","radius"]),v=c().theme;h&&(d=h);var N="2";"small"===h&&(N="1"),"large"===h&&(N="3");var y=null!=x?x:v.themeRadius,z={scaling:null!=u?u:v.themeScaling,radius:"full"===y?"large":y};return e(l,{hasBackground:!1,children:e(s.Root,m({ref:r,className:i(p(z),n),variant:f,size:N},g,{children:t}))})}));h.displayName="Table.Root";var x=a.forwardRef((function(a,r){var l=a.className,n=a.children,t=a.scaling;a.size;var c=o(a,["className","children","scaling","size"]);return e(s.Header,m({ref:r,className:i("",p({scaling:t}),l)},c,{children:n}))}));x.displayName="Table.Header";var g=a.forwardRef((function(a,r){var l=a.className,n=a.children,t=a.scaling,c=o(a,["className","children","scaling"]);return e(s.Body,m({ref:r,className:i("",p({scaling:t}),l)},c,{children:n}))}));g.displayName="Table.Body";var v=a.forwardRef((function(a,r){var l=a.className,n=a.children,t=a.scaling;a.size;var c=o(a,["className","children","scaling","size"]);return e(s.Row,m({ref:r,className:i("",p({scaling:t}),l)},c,{children:n}))}));v.displayName="Table.Row";var N=a.forwardRef((function(a,r){var l=a.className,n=a.children,t=a.scaling;a.size;var c=o(a,["className","children","scaling","size"]);return e(s.Cell,m({className:i(f({size:d}),p({scaling:t}),l)},c,{ref:r,children:n}))}));N.displayName="Table.Cell";var y=a.forwardRef((function(a,r){var l=a.className,n=a.children,t=a.scaling;a.size;var c=o(a,["className","children","scaling","size"]);return e(s.ColumnHeaderCell,m({ref:r,className:i("",p({scaling:t}),u({size:d}),l)},c,{children:n}))}));y.displayName="Table.ColumnHeaderCell";var z=a.forwardRef((function(a,r){var l=a.className,n=a.children,t=a.scaling;a.size;var c=o(a,["className","children","scaling","size"]);return e(s.RowHeaderCell,m({ref:r,className:i("",p({scaling:t}),f({size:d}),l)},c,{children:n}))}));z.displayName="Table.RowHeaderCell";var b={Root:h,Header:x,Body:g,Row:v,Cell:N,ColumnHeaderCell:y,RowHeaderCell:z};export{g as Body,N as Cell,y as ColumnHeaderCell,x as Header,h as Root,v as Row,z as RowHeaderCell,b as default};
 //# sourceMappingURL=index.mjs.map

package/dist/lib/components/Tabs/DynamicTabs.d.ts

@@ -15,8 +15,9 @@ export interface TabsProps extends VariantProps<typeof dynamivTabsVariants> {
     defaultValue?: string;
     color?: IColor;
     tabData: TabProp[];
-    defaultTab?: TabProp;
-    setTabData: React.Dispatch<React.SetStateAction<TabProp[]>>;
+    focusedInx: number;
+    onChangeFocusedInx: (inx: number) => void;
+    onChangeTabs: (tabs: TabProp[]) => void;
     onDeleteTab?: (tab: any) => void;
     onDeleteAllTabs?: () => void;
     maxCount?: number;
@@ -24,6 +25,7 @@ export interface TabsProps extends VariantProps<typeof dynamivTabsVariants> {
 declare const dynamivTabsVariants: (props?: ({
     weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const DynamicTabs: React.ForwardRefExoticComponent<import("react-tabs").TabsProps & TabsProps & React.RefAttributes<never>>;

package/dist/lib/components/Tabs/DynamicTabs.js

@@ -25,7 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, Cross1Icon, TrashIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { bgColorStyle, scalingVariants, weightVariants } from '../../../lib/constants';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import IconButton from '../IconButton';
 import { cn } from '../../../lib/utils/utils';
@@ -34,13 +34,19 @@ var dynamivTabsVariants = cva('', {
     variants: {
         weight: __assign({}, weightVariants),
         scaling: __assign({}, scalingVariants),
+        radius: {
+            none: 'rounded-t-none',
+            small: 'rounded-t-[3px]',
+            medium: 'rounded-t',
+            large: 'rounded-t-md',
+            full: 'rounded-t-lg',
+        },
         color: bgColorStyle(),
     },
 });
 var DynamicTabs = React.forwardRef(function (_a, ref) {
     var _b;
-    var tabData = _a.tabData, scaling = _a.scaling, color = _a.color, setTabData = _a.setTabData, defaultTab = _a.defaultTab, onDeleteTab = _a.onDeleteTab, onDeleteAllTabs = _a.onDeleteAllTabs, onSelect = _a.onSelect, maxCount = _a.maxCount, className = _a.className, rootProps = __rest(_a, ["tabData", "scaling", "color", "setTabData", "defaultTab", "onDeleteTab", "onDeleteAllTabs", "onSelect", "maxCount", "className"]);
-    var _c = useState(0), selectedInx = _c[0], setselectedInx = _c[1];
+    var tabData = _a.tabData, scaling = _a.scaling, color = _a.color, _c = _a.radius, radius = _c === void 0 ? 'none' : _c, focusedInx = _a.focusedInx, onChangeFocusedInx = _a.onChangeFocusedInx, onChangeTabs = _a.onChangeTabs, onDeleteTab = _a.onDeleteTab, onDeleteAllTabs = _a.onDeleteAllTabs, onSelect = _a.onSelect, maxCount = _a.maxCount, className = _a.className, rootProps = __rest(_a, ["tabData", "scaling", "color", "radius", "focusedInx", "onChangeFocusedInx", "onChangeTabs", "onDeleteTab", "onDeleteAllTabs", "onSelect", "maxCount", "className"]);
     var theme = useTheme().theme;
     var dynamicTabsStyle = {
         scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
@@ -48,26 +54,25 @@ var DynamicTabs = React.forwardRef(function (_a, ref) {
     };
     useEffect(function () {
         if (tabData.length > 20)
-            setTabData(tabData.slice(0, 20));
+            onChangeTabs(tabData.slice(0, 20));
     }, [tabData]);
-    return (_jsxs(Tabs, __assign({ selectedIndex: selectedInx, className: cn('flex w-full text-slate-12', dynamivTabsVariants({ scaling: dynamicTabsStyle.scaling }), className), onSelect: function (index, last, event) {
-            setselectedInx(index);
+    return (_jsxs(Tabs, __assign({ selectedIndex: focusedInx, className: cn('flex w-full text-slate-11', dynamivTabsVariants({ scaling: dynamicTabsStyle.scaling }), className), onSelect: function (index, last, event) {
             onSelect && onSelect(index, last, event);
-        } }, rootProps, { children: [_jsx(TabList, { className: "mb-[10px] flex flex-1 overflow-x-auto overflow-y-hidden p-0", children: tabData.map(function (tab, index) { return (_jsx(Tab, { className: cn('relative bottom-[-1px] inline-block w-[50px] max-w-[350px] flex-1 cursor-pointer list-none aria-selected:rounded-t-lg aria-selected:border aria-selected:border-b-0 aria-selected:border-slateA-8 aria-selected:bg-slate-1'), onClick: function (e) { var _a, _b; return ((_a = tab.title) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tab.title) === null || _b === void 0 ? void 0 : _b.onClick(tab)); }, children: _jsxs("div", { className: cn('mx-[3px] my-[2px] flex justify-between rounded-lg px-[9px] py-[4px]', "hover:bg-".concat(dynamicTabsStyle.color, "A-6 hover:dark:bg-").concat(dynamicTabsStyle.color, "DarkA-6")), children: [_jsx("div", { className: "flex-1 overflow-hidden truncate text-ellipsis", children: tab.title.children() }), ((tabData === null || tabData === void 0 ? void 0 : tabData.length) < 15 || selectedInx == index) && (_jsx(IconButton, { size: "small", appearance: "ghost", color: dynamicTabsStyle.color, scaling: dynamicTabsStyle.scaling, onClick: function () {
+        } }, rootProps, { children: [_jsx(TabList, { className: "flex h-[32px] flex-1 overflow-x-auto overflow-y-hidden border-b border-slateA-7 p-0", children: tabData.map(function (tab, index) { return (_jsx(Tab, { className: cn('relative bottom-[-1px] inline-block w-[50px] max-w-[150px] flex-1 cursor-pointer list-none border-y border-r border-slateA-7 bg-slate-2 text-slate-11 aria-selected:border-b-0 aria-selected:border-slateA-8 aria-selected:bg-slate-1 aria-selected:text-slate-12', dynamivTabsVariants({ radius: radius })), onClick: function (e) { var _a, _b; return ((_a = tab.title) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tab.title) === null || _b === void 0 ? void 0 : _b.onClick(tab)); }, children: _jsxs("div", { className: cn('mx-[3px] my-[2px] flex items-center justify-between rounded-lg px-[5px]', "hover:bg-".concat(dynamicTabsStyle.color, "A-6 hover:dark:bg-").concat(dynamicTabsStyle.color, "DarkA-6")), children: [_jsx("div", { className: "flex-1 overflow-hidden truncate text-ellipsis", onClick: function () { return onChangeFocusedInx(index); }, children: tab.title.children() }), ((tabData === null || tabData === void 0 ? void 0 : tabData.length) < 15 || focusedInx == index) && (_jsx(IconButton, { appearance: "ghost", size: "small", color: dynamicTabsStyle.color, scaling: dynamicTabsStyle.scaling, onClick: function () {
                                     var filtered = tabData.filter(function (el) { return el.key !== tab.key; });
-                                    setTabData(defaultTab && filtered.length == 0 ? [defaultTab] : filtered);
-                                    filtered.length == 0
-                                        ? setselectedInx(0)
-                                        : selectedInx - 1 >= 0 && setselectedInx(selectedInx - 1);
-                                    onDeleteTab && onDeleteTab(tab);
+                                    onChangeTabs(filtered);
+                                    focusedInx === filtered.length &&
+                                        focusedInx > 0 &&
+                                        onChangeFocusedInx(focusedInx - 1);
+                                    onDeleteTab && onDeleteTab({ deleteTab: tab });
                                 }, children: _jsx(Cross1Icon, {}) }))] }) }, index)); }) }), tabData.map(function (tab, index) {
                 var _a;
                 return (_jsx(TabPanel, { children: (_a = tab === null || tab === void 0 ? void 0 : tab.content) === null || _a === void 0 ? void 0 : _a.children() }, index));
-            }), _jsxs("div", { className: "right-5 mb-[10px] flex justify-end p-0 px-3 py-2", children: [_jsx(IconButton, { size: "small", appearance: "ghost", onClick: function () {
-                            setselectedInx(0);
-                            setTabData(defaultTab ? [defaultTab] : []);
+            }), _jsxs("div", { className: "right-5 flex justify-end border-b border-slateA-7 p-0", children: [_jsx(IconButton, { appearance: "ghost", size: "small", onClick: function () { return focusedInx - 1 >= 0 && onChangeFocusedInx(focusedInx - 1); }, children: _jsx(ChevronLeftIcon, {}) }), _jsx(IconButton, { appearance: "ghost", size: "small", onClick: function () { return focusedInx + 1 < tabData.length && onChangeFocusedInx(focusedInx + 1); }, children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { appearance: "ghost", size: "small", onClick: function () {
+                            onChangeFocusedInx(0);
+                            onChangeTabs([]);
                             onDeleteAllTabs && onDeleteAllTabs();
-                        }, children: _jsx(TrashIcon, {}) }), _jsx(IconButton, { size: "small", appearance: "ghost", onClick: function () { return selectedInx - 1 >= 0 && setselectedInx(selectedInx - 1); }, children: _jsx(ChevronLeftIcon, {}) }), _jsx(IconButton, { size: "small", appearance: "ghost", onClick: function () { return selectedInx + 1 < tabData.length && setselectedInx(selectedInx + 1); }, children: _jsx(ChevronRightIcon, {}) })] })] })));
+                        }, children: _jsx(TrashIcon, {}) })] })] })));
 });
 DynamicTabs.displayName = 'DynamicTabs';
 export default DynamicTabs;

package/dist/lib/components/Tabs/DynamicTabs.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Cross1Icon as l,TrashIcon as n,ChevronLeftIcon as r,ChevronRightIcon as o}from"@radix-ui/react-icons";import{cva as a}from"class-variance-authority";import{weightVariants as i,scalingVariants as c,bgColorStyle as s}from"../../constants.mjs";import d,{useState as m,useEffect as u}from"react";import{Tabs as p,TabList as f,Tab as h,TabPanel as b}from"react-tabs";import{IconButton as v}from"../IconButton/index.mjs";import{cn as x}from"../../utils/utils.mjs";import{useTheme as g}from"../../theme/ThemeProvider.mjs";var y=function(){return y=Object.assign||function(e){for(var t,l=1,n=arguments.length;l<n;l++)for(var r in t=arguments[l])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},y.apply(this,arguments)},j=function(e,t){var l={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(l[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(l[n[r]]=e[n[r]])}return l},w=a("",{variants:{weight:y({},i),scaling:y({},c),color:s()}}),k=d.forwardRef((function(a,i){var c,s=a.tabData,d=a.scaling,k=a.color,O=a.setTabData,C=a.defaultTab,D=a.onDeleteTab,T=a.onDeleteAllTabs,N=a.onSelect;a.maxCount;var S=a.className,A=j(a,["tabData","scaling","color","setTabData","defaultTab","onDeleteTab","onDeleteAllTabs","onSelect","maxCount","className"]),P=m(0),z=P[0],I=P[1],B=g().theme,E={scaling:null!=d?d:B.themeScaling,color:null!==(c=null!=k?k:B.themeColor)&&void 0!==c?c:"slate"};return u((function(){s.length>20&&O(s.slice(0,20))}),[s]),e(p,y({selectedIndex:z,className:x("flex w-full text-slate-12",w({scaling:E.scaling}),S),onSelect:function(e,t,l){I(e),N&&N(e,t,l)}},A,{children:[t(f,{className:"mb-[10px] flex flex-1 overflow-x-auto overflow-y-hidden p-0",children:s.map((function(n,r){return t(h,{className:x("relative bottom-[-1px] inline-block w-[50px] max-w-[350px] flex-1 cursor-pointer list-none aria-selected:rounded-t-lg aria-selected:border aria-selected:border-b-0 aria-selected:border-slateA-8 aria-selected:bg-slate-1"),onClick:function(e){var t,l;return(null===(t=n.title)||void 0===t?void 0:t.onClick)&&(null===(l=n.title)||void 0===l?void 0:l.onClick(n))},children:e("div",{className:x("mx-[3px] my-[2px] flex justify-between rounded-lg px-[9px] py-[4px]","hover:bg-".concat(E.color,"A-6 hover:dark:bg-").concat(E.color,"DarkA-6")),children:[t("div",{className:"flex-1 overflow-hidden truncate text-ellipsis",children:n.title.children()}),((null==s?void 0:s.length)<15||z==r)&&t(v,{size:"small",appearance:"ghost",color:E.color,scaling:E.scaling,onClick:function(){var e=s.filter((function(e){return e.key!==n.key}));O(C&&0==e.length?[C]:e),0==e.length?I(0):z-1>=0&&I(z-1),D&&D(n)},children:t(l,{})})]})},r)}))}),s.map((function(e,l){var n;return t(b,{children:null===(n=null==e?void 0:e.content)||void 0===n?void 0:n.children()},l)})),e("div",{className:"right-5 mb-[10px] flex justify-end p-0 px-3 py-2",children:[t(v,{size:"small",appearance:"ghost",onClick:function(){I(0),O(C?[C]:[]),T&&T()},children:t(n,{})}),t(v,{size:"small",appearance:"ghost",onClick:function(){return z-1>=0&&I(z-1)},children:t(r,{})}),t(v,{size:"small",appearance:"ghost",onClick:function(){return z+1<s.length&&I(z+1)},children:t(o,{})})]})]}))}));k.displayName="DynamicTabs";export{k as default};
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{Cross1Icon as r,ChevronLeftIcon as t,ChevronRightIcon as o,TrashIcon as l}from"@radix-ui/react-icons";import{cva as a}from"class-variance-authority";import{weightVariants as i,scalingVariants as c,bgColorStyle as s}from"../../constants.mjs";import d,{useEffect as u}from"react";import{Tabs as m,TabList as f,Tab as p,TabPanel as h}from"react-tabs";import{IconButton as b}from"../IconButton/index.mjs";import{cn as x}from"../../utils/utils.mjs";import{useTheme as g}from"../../theme/ThemeProvider.mjs";var v=function(){return v=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},v.apply(this,arguments)},y=function(e,n){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(e);o<t.length;o++)n.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(e,t[o])&&(r[t[o]]=e[t[o]])}return r},C=a("",{variants:{weight:v({},i),scaling:v({},c),radius:{none:"rounded-t-none",small:"rounded-t-[3px]",medium:"rounded-t",large:"rounded-t-md",full:"rounded-t-lg"},color:s()}}),j=d.forwardRef((function(a,i){var c,s=a.tabData,d=a.scaling,j=a.color,k=a.radius,w=void 0===k?"none":k,O=a.focusedInx,N=a.onChangeFocusedInx,T=a.onChangeTabs,A=a.onDeleteTab,D=a.onDeleteAllTabs,I=a.onSelect;a.maxCount;var S=a.className,P=y(a,["tabData","scaling","color","radius","focusedInx","onChangeFocusedInx","onChangeTabs","onDeleteTab","onDeleteAllTabs","onSelect","maxCount","className"]),z=g().theme,F={scaling:null!=d?d:z.themeScaling,color:null!==(c=null!=j?j:z.themeColor)&&void 0!==c?c:"slate"};return u((function(){s.length>20&&T(s.slice(0,20))}),[s]),e(m,v({selectedIndex:O,className:x("flex w-full text-slate-11",C({scaling:F.scaling}),S),onSelect:function(e,n,r){I&&I(e,n,r)}},P,{children:[n(f,{className:"flex h-[32px] flex-1 overflow-x-auto overflow-y-hidden border-b border-slateA-7 p-0",children:s.map((function(t,o){return n(p,{className:x("relative bottom-[-1px] inline-block w-[50px] max-w-[150px] flex-1 cursor-pointer list-none border-y border-r border-slateA-7 bg-slate-2 text-slate-11 aria-selected:border-b-0 aria-selected:border-slateA-8 aria-selected:bg-slate-1 aria-selected:text-slate-12",C({radius:w})),onClick:function(e){var n,r;return(null===(n=t.title)||void 0===n?void 0:n.onClick)&&(null===(r=t.title)||void 0===r?void 0:r.onClick(t))},children:e("div",{className:x("mx-[3px] my-[2px] flex items-center justify-between rounded-lg px-[5px]","hover:bg-".concat(F.color,"A-6 hover:dark:bg-").concat(F.color,"DarkA-6")),children:[n("div",{className:"flex-1 overflow-hidden truncate text-ellipsis",onClick:function(){return N(o)},children:t.title.children()}),((null==s?void 0:s.length)<15||O==o)&&n(b,{appearance:"ghost",size:"small",color:F.color,scaling:F.scaling,onClick:function(){var e=s.filter((function(e){return e.key!==t.key}));T(e),O===e.length&&O>0&&N(O-1),A&&A({deleteTab:t})},children:n(r,{})})]})},o)}))}),s.map((function(e,r){var t;return n(h,{children:null===(t=null==e?void 0:e.content)||void 0===t?void 0:t.children()},r)})),e("div",{className:"right-5 flex justify-end border-b border-slateA-7 p-0",children:[n(b,{appearance:"ghost",size:"small",onClick:function(){return O-1>=0&&N(O-1)},children:n(t,{})}),n(b,{appearance:"ghost",size:"small",onClick:function(){return O+1<s.length&&N(O+1)},children:n(o,{})}),n(b,{appearance:"ghost",size:"small",onClick:function(){N(0),T([]),D&&D()},children:n(l,{})})]})]}))}));j.displayName="DynamicTabs";export{j as default};
 //# sourceMappingURL=DynamicTabs.mjs.map

package/dist/lib/components/TextField/index.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
@@ -32,7 +32,6 @@ import { MAIN_COLOR } from '../../../lib/color/constants';
 import Text from '../../../lib/Typography/Text';
 import IconButton from '../IconButton';
 import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
-import { useIsClient } from '../../../lib/is-client-ctx';
 var textFieldVariants = cva('', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -63,9 +62,8 @@ export var Root = React.forwardRef(function (_a, forwardedRef) {
         message = '숫자만 입력 가능합니다.';
     if (validationType == 'email')
         message = '이메일 형식에 어긋납니다.';
-    var isClient = useIsClient();
-    if (!isClient)
-        return _jsx(_Fragment, {});
+    if ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.type) == 'password')
+        delete textFieldProps['type'];
     return (_jsxs("div", { children: [_jsx(Theme, { scaling: contextValue.scaling, accentColor: contextValue.color, hasBackground: false, children: _jsxs(TextFieldTheme.Root, __assign({ ref: forwardedRef, variant: appearance, size: sizeTheme, type: validationType !== 'password' || isMouseDown ? 'text' : 'password', radius: contextValue.radius, color: contextValue.color, className: cn(textFieldVariants({ radius: contextValue.radius }), className), onChange: function (e) {
                         if (e.target.value && regex) {
                             setShowMessage(true);

package/dist/lib/components/TextField/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as r,Fragment as e,jsxs as o}from"react/jsx-runtime";import a,{useState as t}from"react";import{cva as i}from"class-variance-authority";import{cn as n}from"../../utils/utils.mjs";import{radiusVariants as l,bgColorStyle as s}from"../../constants.mjs";import{Theme as c,TextField as u}from"@radix-ui/themes";import{useTheme as d}from"../../theme/ThemeProvider.mjs";import{MAIN_COLOR as m}from"../../color/constants.mjs";import p from"../../Typography/Text/index.mjs";import{IconButton as f}from"../IconButton/index.mjs";import{EyeOpenIcon as h,EyeClosedIcon as g}from"@radix-ui/react-icons";import{useIsClient as v}from"../../is-client-ctx.mjs";var y=function(){return y=Object.assign||function(r){for(var e,o=1,a=arguments.length;o<a;o++)for(var t in e=arguments[o])Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r},y.apply(this,arguments)},x=function(r,e){var o={};for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&e.indexOf(a)<0&&(o[a]=r[a]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(a=Object.getOwnPropertySymbols(r);t<a.length;t++)e.indexOf(a[t])<0&&Object.prototype.propertyIsEnumerable.call(r,a[t])&&(o[a[t]]=r[a[t]])}return o},j=i("",{variants:{radius:y({},l.base),color:s()}}),w=a.forwardRef((function(a,i){var l,s,w,b=a.className,N=a.color,T=a.size,z=a.appearance,S=a.scaling,R=a.radius,B=a.children,C=a.validationType,P=a.regex,M=a.warningMessage,F=a.onChange,I=a.onBlur,$=x(a,["className","color","size","appearance","scaling","radius","children","validationType","regex","warningMessage","onChange","onBlur"]),k=d().theme,D=t(!1),E=D[0],U=D[1],V=t(null!==(l=$.defaultValue)&&void 0!==l?l:""),_=V[0],q=V[1],A=t(!1),G=A[0],H=A[1],J="2";"small"===T&&(J="1"),"large"===T&&(J="3");var K={scaling:null!==(s=null!=S?S:k.themeScaling)&&void 0!==s?s:"100%",radius:null!=R?R:k.themeRadius,color:null!==(w=null!=N?N:k.themeColor)&&void 0!==w?w:m},L=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,Q=/^[0-9]+$/,W="";return"number"==C&&(W="숫자만 입력 가능합니다."),"email"==C&&(W="이메일 형식에 어긋납니다."),v()?o("div",{children:[r(c,{scaling:K.scaling,accentColor:K.color,hasBackground:!1,children:o(u.Root,y({ref:i,variant:z,size:J,type:"password"!==C||G?"text":"password",radius:K.radius,color:K.color,className:n(j({radius:K.radius}),b),onChange:function(r){r.target.value&&P?U(!0):"number"!=C||!r.target.value||P||Q.test(r.target.value)?(U(!1),q(r.target.value),F&&F(r)):U(!0)},value:_,onBlur:function(r){I&&I(r),"email"!=C||!r.target.value||L.test(r.target.value)?U(!1):U(!0)}},$,{children:[B,"password"==C&&r(O.Slot,{side:"right",children:r(f,{appearance:"ghost",color:"slate",onMouseDown:function(r){return H(!0)},onMouseUp:function(r){return H(!1)},children:r(G?h:g,{height:"14",width:"14"})})})]}))}),E&&r(p,{size:"1",color:K.color,children:M||W})]}):r(e,{})}));w.displayName="TextField.Root";var b=a.forwardRef((function(e,o){var a=e.className,t=e.color,i=e.side,l=e.radius,s=e.children,c=x(e,["className","color","side","radius","children"]);return r(u.Slot,y({ref:o,color:t,side:i,className:n(j({radius:l}),a)},c,{children:s}))}));b.displayName="TextField.Slot";var O={Root:w,Slot:b};export{w as Root,b as Slot,O as default};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import o,{useState as a}from"react";import{cva as t}from"class-variance-authority";import{cn as n}from"../../utils/utils.mjs";import{radiusVariants as i,bgColorStyle as l}from"../../constants.mjs";import{Theme as s,TextField as c}from"@radix-ui/themes";import{useTheme as u}from"../../theme/ThemeProvider.mjs";import{MAIN_COLOR as d}from"../../color/constants.mjs";import{Text as m}from"../../Typography/Text/index.mjs";import{IconButton as p}from"../IconButton/index.mjs";import{EyeOpenIcon as f,EyeClosedIcon as h}from"@radix-ui/react-icons";var g=function(){return g=Object.assign||function(r){for(var e,o=1,a=arguments.length;o<a;o++)for(var t in e=arguments[o])Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r},g.apply(this,arguments)},v=function(r,e){var o={};for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&e.indexOf(a)<0&&(o[a]=r[a]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(a=Object.getOwnPropertySymbols(r);t<a.length;t++)e.indexOf(a[t])<0&&Object.prototype.propertyIsEnumerable.call(r,a[t])&&(o[a[t]]=r[a[t]])}return o},y=t("",{variants:{radius:g({},i.base),color:l()}}),x=o.forwardRef((function(o,t){var i,l,x,w=o.className,b=o.color,O=o.size,N=o.appearance,T=o.scaling,z=o.radius,S=o.children,R=o.validationType,B=o.regex,C=o.warningMessage,P=o.onChange,M=o.onBlur,F=v(o,["className","color","size","appearance","scaling","radius","children","validationType","regex","warningMessage","onChange","onBlur"]),I=u().theme,$=a(!1),k=$[0],D=$[1],E=a(null!==(i=F.defaultValue)&&void 0!==i?i:""),U=E[0],V=E[1],_=a(!1),q=_[0],A=_[1],G="2";"small"===O&&(G="1"),"large"===O&&(G="3");var H={scaling:null!==(l=null!=T?T:I.themeScaling)&&void 0!==l?l:"100%",radius:null!=z?z:I.themeRadius,color:null!==(x=null!=b?b:I.themeColor)&&void 0!==x?x:d},J=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,K=/^[0-9]+$/,L="";return"number"==R&&(L="숫자만 입력 가능합니다."),"email"==R&&(L="이메일 형식에 어긋납니다."),"password"==(null==F?void 0:F.type)&&delete F.type,r("div",{children:[e(s,{scaling:H.scaling,accentColor:H.color,hasBackground:!1,children:r(c.Root,g({ref:t,variant:N,size:G,type:"password"!==R||q?"text":"password",radius:H.radius,color:H.color,className:n(y({radius:H.radius}),w),onChange:function(r){r.target.value&&B?D(!0):"number"!=R||!r.target.value||B||K.test(r.target.value)?(D(!1),V(r.target.value),P&&P(r)):D(!0)},value:U,onBlur:function(r){M&&M(r),"email"!=R||!r.target.value||J.test(r.target.value)?D(!1):D(!0)}},F,{children:[S,"password"==R&&e(j.Slot,{side:"right",children:e(p,{appearance:"ghost",color:"slate",onMouseDown:function(r){return A(!0)},onMouseUp:function(r){return A(!1)},children:e(q?f:h,{height:"14",width:"14"})})})]}))}),k&&e(m,{size:"1",color:H.color,children:C||L})]})}));x.displayName="TextField.Root";var w=o.forwardRef((function(r,o){var a=r.className,t=r.color,i=r.side,l=r.radius,s=r.children,u=v(r,["className","color","side","radius","children"]);return e(c.Slot,g({ref:o,color:t,side:i,className:n(y({radius:l}),a)},u,{children:s}))}));w.displayName="TextField.Slot";var j={Root:x,Slot:w};export{x as Root,w as Slot,j as default};
 //# sourceMappingURL=index.mjs.map

package/dist/lib/components/Timeline/TimelineDescription.js

@@ -24,7 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
-export var timelineDescriptionVariants = cva("text-muted-foreground max-w-sm text-sm text-slate-12 dark:text-slateDark-12", {
+export var timelineDescriptionVariants = cva("max-w-sm text-sm text-slate-12 dark:text-slateDark-12", {
     variants: {},
 });
 export var TimelineDescription = forwardRef(function (_a, ref) {

package/dist/lib/components/Timeline/TimelineDescription.mjs

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as r}from"react";import{cva as e}from"class-variance-authority";import{cn as a}from"../../utils/utils.mjs";var o=function(){return o=Object.assign||function(t){for(var r,e=1,a=arguments.length;e<a;e++)for(var o in r=arguments[e])Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o]);return t},o.apply(this,arguments)},n=function(t,r){var e={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&r.indexOf(a)<0&&(e[a]=t[a]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(t);o<a.length;o++)r.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(t,a[o])&&(e[a[o]]=t[a[o]])}return e},i=e("text-muted-foreground max-w-sm text-sm text-slate-12 dark:text-slateDark-12",{variants:{}}),s=r((function(r,e){var s=r.className,l=n(r,["className"]);return t("p",o({ref:e,className:a(i({}),s)},l))}));s.displayName="Timeline.Description";export{s as TimelineDescription,i as timelineDescriptionVariants};
+import{jsx as t}from"react/jsx-runtime";import{forwardRef as r}from"react";import{cva as e}from"class-variance-authority";import{cn as a}from"../../utils/utils.mjs";var o=function(){return o=Object.assign||function(t){for(var r,e=1,a=arguments.length;e<a;e++)for(var o in r=arguments[e])Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o]);return t},o.apply(this,arguments)},n=function(t,r){var e={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&r.indexOf(a)<0&&(e[a]=t[a]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(t);o<a.length;o++)r.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(t,a[o])&&(e[a[o]]=t[a[o]])}return e},i=e("max-w-sm text-sm text-slate-12 dark:text-slateDark-12",{variants:{}}),s=r((function(r,e){var s=r.className,l=n(r,["className"]);return t("p",o({ref:e,className:a(i({}),s)},l))}));s.displayName="Timeline.Description";export{s as TimelineDescription,i as timelineDescriptionVariants};
 //# sourceMappingURL=TimelineDescription.mjs.map

package/dist/lib/components/Timeline/TimelineDescription.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineDescription.mjs","sources":["../../../lib/components/Timeline/TimelineDescription.js"],"sourcesContent":["var __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../../lib/utils/utils';\nexport var timelineDescriptionVariants = cva(\"text-muted-foreground max-w-sm text-sm text-slate-12 dark:text-slateDark-12\", {\n    variants: {},\n});\nexport var TimelineDescription = forwardRef(function (_a, ref) {\n    var className = _a.className, props = __rest(_a, [\"className\"]);\n    return (_jsx(\"p\", __assign({ ref: ref, className: cn(timelineDescriptionVariants({}), className) }, props)));\n});\nTimelineDescription.displayName = 'Timeline.Description';\n"],"names":["__assign","Object","assign","t","s","i","n","arguments","length","p","prototype","hasOwnProperty","call","apply","this","__rest","e","indexOf","getOwnPropertySymbols","propertyIsEnumerable","timelineDescriptionVariants","cva","variants","TimelineDescription","forwardRef","_a","ref","className","props","_jsx","cn","displayName"],"mappings":"qKAAA,IAAIA,EAAsC,WAStC,OARAA,EAAWC,OAAOC,QAAU,SAASC,GACjC,IAAK,IAAIC,EAAGC,EAAI,EAAGC,EAAIC,UAAUC,OAAQH,EAAIC,EAAGD,IAE5C,IAAK,IAAII,KADTL,EAAIG,UAAUF,GACOJ,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,KACzDN,EAAEM,GAAKL,EAAEK,IAEjB,OAAON,CACf,EACWH,EAASa,MAAMC,KAAMP,UAChC,EACIQ,EAAkC,SAAUX,EAAGY,GAC/C,IAAIb,EAAI,CAAA,EACR,IAAK,IAAIM,KAAKL,EAAOH,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,IAAMO,EAAEC,QAAQR,GAAK,IAC9EN,EAAEM,GAAKL,EAAEK,IACb,GAAS,MAALL,GAAqD,mBAAjCH,OAAOiB,sBACtB,KAAIb,EAAI,EAAb,IAAgBI,EAAIR,OAAOiB,sBAAsBd,GAAIC,EAAII,EAAED,OAAQH,IAC3DW,EAAEC,QAAQR,EAAEJ,IAAM,GAAKJ,OAAOS,UAAUS,qBAAqBP,KAAKR,EAAGK,EAAEJ,MACvEF,EAAEM,EAAEJ,IAAMD,EAAEK,EAAEJ,IAF4B,CAItD,OAAOF,CACX,EAKWiB,EAA8BC,EAAI,8EAA+E,CACxHC,SAAU,CAAE,IAELC,EAAsBC,GAAW,SAAUC,EAAIC,GACtD,IAAIC,EAAYF,EAAGE,UAAWC,EAAQb,EAAOU,EAAI,CAAC,cAClD,OAAQI,EAAK,IAAK7B,EAAS,CAAE0B,IAAKA,EAAKC,UAAWG,EAAGV,EAA4B,CAAE,GAAGO,IAAcC,GACxG,IACAL,EAAoBQ,YAAc"}
+{"version":3,"file":"TimelineDescription.mjs","sources":["../../../lib/components/Timeline/TimelineDescription.js"],"sourcesContent":["var __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../../lib/utils/utils';\nexport var timelineDescriptionVariants = cva(\"max-w-sm text-sm text-slate-12 dark:text-slateDark-12\", {\n    variants: {},\n});\nexport var TimelineDescription = forwardRef(function (_a, ref) {\n    var className = _a.className, props = __rest(_a, [\"className\"]);\n    return (_jsx(\"p\", __assign({ ref: ref, className: cn(timelineDescriptionVariants({}), className) }, props)));\n});\nTimelineDescription.displayName = 'Timeline.Description';\n"],"names":["__assign","Object","assign","t","s","i","n","arguments","length","p","prototype","hasOwnProperty","call","apply","this","__rest","e","indexOf","getOwnPropertySymbols","propertyIsEnumerable","timelineDescriptionVariants","cva","variants","TimelineDescription","forwardRef","_a","ref","className","props","_jsx","cn","displayName"],"mappings":"qKAAA,IAAIA,EAAsC,WAStC,OARAA,EAAWC,OAAOC,QAAU,SAASC,GACjC,IAAK,IAAIC,EAAGC,EAAI,EAAGC,EAAIC,UAAUC,OAAQH,EAAIC,EAAGD,IAE5C,IAAK,IAAII,KADTL,EAAIG,UAAUF,GACOJ,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,KACzDN,EAAEM,GAAKL,EAAEK,IAEjB,OAAON,CACf,EACWH,EAASa,MAAMC,KAAMP,UAChC,EACIQ,EAAkC,SAAUX,EAAGY,GAC/C,IAAIb,EAAI,CAAA,EACR,IAAK,IAAIM,KAAKL,EAAOH,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,IAAMO,EAAEC,QAAQR,GAAK,IAC9EN,EAAEM,GAAKL,EAAEK,IACb,GAAS,MAALL,GAAqD,mBAAjCH,OAAOiB,sBACtB,KAAIb,EAAI,EAAb,IAAgBI,EAAIR,OAAOiB,sBAAsBd,GAAIC,EAAII,EAAED,OAAQH,IAC3DW,EAAEC,QAAQR,EAAEJ,IAAM,GAAKJ,OAAOS,UAAUS,qBAAqBP,KAAKR,EAAGK,EAAEJ,MACvEF,EAAEM,EAAEJ,IAAMD,EAAEK,EAAEJ,IAF4B,CAItD,OAAOF,CACX,EAKWiB,EAA8BC,EAAI,wDAAyD,CAClGC,SAAU,CAAE,IAELC,EAAsBC,GAAW,SAAUC,EAAIC,GACtD,IAAIC,EAAYF,EAAGE,UAAWC,EAAQb,EAAOU,EAAI,CAAC,cAClD,OAAQI,EAAK,IAAK7B,EAAS,CAAE0B,IAAKA,EAAKC,UAAWG,EAAGV,EAA4B,CAAE,GAAGO,IAAcC,GACxG,IACAL,EAAoBQ,YAAc"}

package/dist/lib/components/Tree/index.d.ts

@@ -7,6 +7,7 @@ export interface TreeProps extends React.InputHTMLAttributes<HTMLInputElement>,
     items: any;
     treeId: string;
     isSearch?: boolean;
+    keyword?: string;
 }
 declare const treeVariants: (props?: ({
     color?: string | null | undefined;

package/dist/lib/components/Tree/index.js

@@ -1,3 +1,4 @@
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -92,7 +93,7 @@ var treeProvider = null;
 var Tree = React.forwardRef(function (_a, ref) {
     var _b;
     var _c, _d;
-    var items = _a.items, treeId = _a.treeId, className = _a.className, color = _a.color, isSearch = _a.isSearch, props = __rest(_a, ["items", "treeId", "className", "color", "isSearch"]);
+    var items = _a.items, treeId = _a.treeId, className = _a.className, color = _a.color, isSearch = _a.isSearch, keyword = _a.keyword, props = __rest(_a, ["items", "treeId", "className", "color", "isSearch", "keyword"]);
     var _e = useState(''), search = _e[0], setSearch = _e[1];
     var tree = useRef(null);
     var _f = useState({}), treeData = _f[0], setTreeData = _f[1];
@@ -152,6 +153,21 @@ var Tree = React.forwardRef(function (_a, ref) {
             });
         }
     }, [findItemPath, search]);
+    useEffect(function () {
+        if (keyword) {
+            findItemPath(keyword).then(function (path) {
+                var _a;
+                if (path) {
+                    // wait for full path including leaf, to make sure it loaded in
+                    (_a = tree.current) === null || _a === void 0 ? void 0 : _a.expandSubsequently(path).then(function () {
+                        var _a, _b;
+                        (_a = tree.current) === null || _a === void 0 ? void 0 : _a.selectItems([path[path.length - 1]]);
+                        (_b = tree.current) === null || _b === void 0 ? void 0 : _b.focusItem(path[path.length - 1]);
+                    });
+                }
+            });
+        }
+    }, [keyword]);
     useEffect(function () {
         if (items) {
             var results_1 = [];
@@ -177,6 +193,11 @@ var Tree = React.forwardRef(function (_a, ref) {
             setTreeData(t_1);
         }
     }, [items]);
+    useEffect(function () {
+        if (Object.keys(treeData).length > 0 && treeProvider) {
+            treeProvider === null || treeProvider === void 0 ? void 0 : treeProvider.onDidChangeTreeDataEmitter.emit(Object.keys(treeData));
+        }
+    }, [treeData]);
     return (_jsxs("div", { className: "text-slate-12", children: [isSearch && (_jsxs("div", { className: "flex", children: [_jsx(TextField.Root, { color: contextValue.color, value: search, onChange: function (e) { return setSearch(e.target.value); }, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: "mr-2" }), _jsx(Button, { color: contextValue.color, onClick: find, children: "\uAC80\uC0C9" })] })), _jsx(UncontrolledTreeEnvironment, __assign({ ref: ref, dataProvider: treeProvider, getItemTitle: function (item) {
                     return item.data;
                 }, viewState: (_b = {},