@lotte-innovate/ui-component-test 0.2.71 → 0.2.72

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,21 @@ 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-[48px]  text-[14px] p-[12px]',
         },
     },
+    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 +70,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 +80,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 }), tableRowVariants({ 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 c}from"../../constants.mjs";import{useTheme as t}from"../../theme/ThemeProvider.mjs";var o=function(){return o=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},o.apply(this,arguments)},m=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",f=r("",{variants:{scaling:o({},n),radius:o({},c.base)},defaultVariants:{scaling:"100%"}}),p=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-[48px]  text-[14px] p-[12px]"}},defaultVariants:{size:"medium"}}),u=a.forwardRef((function(a,r){var n=a.className,c=a.children,p=a.appearance,u=a.scaling,h=a.size,g=a.radius,v=m(a,["className","children","appearance","scaling","size","radius"]),N=t().theme;h&&(d=h);var y="2";"small"===h&&(y="1"),"large"===h&&(y="3");var x=null!=g?g:N.themeRadius,b={scaling:null!=u?u:N.themeScaling,radius:"full"===x?"large":x};return e(l,{hasBackground:!1,children:e(s.Root,o({ref:r,className:i(f(b),n),variant:p,size:y},v,{children:c}))})}));u.displayName="Table.Root";var h=a.forwardRef((function(a,r){var l=a.className,n=a.children,c=a.scaling;a.size;var t=m(a,["className","children","scaling","size"]);return e(s.Header,o({ref:r,className:i("",f({scaling:c}),l)},t,{children:n}))}));h.displayName="Table.Header";var g=a.forwardRef((function(a,r){var l=a.className,n=a.children,c=a.scaling,t=m(a,["className","children","scaling"]);return e(s.Body,o({ref:r,className:i("",f({scaling:c}),l)},t,{children:n}))}));g.displayName="Table.Body";var v=a.forwardRef((function(a,r){var l=a.className,n=a.children,c=a.scaling;a.size;var t=m(a,["className","children","scaling","size"]);return e(s.Row,o({ref:r,className:i("",f({scaling:c}),l)},t,{children:n}))}));v.displayName="Table.Row";var N=a.forwardRef((function(a,r){var l=a.className,n=a.children,c=a.scaling;a.size;var t=m(a,["className","children","scaling","size"]);return e(s.Cell,o({className:i(p({size:d}),f({scaling:c}),l)},t,{ref:r,children:n}))}));N.displayName="Table.Cell";var y=a.forwardRef((function(a,r){var l=a.className,n=a.children,c=a.scaling;a.size;var t=m(a,["className","children","scaling","size"]);return e(s.ColumnHeaderCell,o({ref:r,className:i("",f({scaling:c}),p({size:d}),l)},t,{children:n}))}));y.displayName="Table.ColumnHeaderCell";var x=a.forwardRef((function(a,r){var l=a.className,n=a.children,c=a.scaling;a.size;var t=m(a,["className","children","scaling","size"]);return e(s.RowHeaderCell,o({ref:r,className:i("",f({scaling:c}),p({size:d}),l)},t,{children:n}))}));x.displayName="Table.RowHeaderCell";var b={Root:u,Header:h,Body:g,Row:v,Cell:N,ColumnHeaderCell:y,RowHeaderCell:x};export{g as Body,N as Cell,y as ColumnHeaderCell,h as Header,u as Root,v as Row,x 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,42 +34,45 @@ 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,
         color: (_b = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _b !== void 0 ? _b : 'slate',
     };
     useEffect(function () {
-        if (tabData.length == 0 && defaultTab)
-            setTabData([defaultTab]);
         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(){0==s.length&&C&&O([C]),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

@@ -62,6 +62,8 @@ export var Root = React.forwardRef(function (_a, forwardedRef) {
         message = '숫자만 입력 가능합니다.';
     if (validationType == 'email')
         message = '이메일 형식에 어긋납니다.';
+    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{jsxs as r,jsx as e}from"react/jsx-runtime";import a,{useState as o}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 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,a=1,o=arguments.length;a<o;a++)for(var t in e=arguments[a])Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r},g.apply(this,arguments)},v=function(r,e){var a={};for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&e.indexOf(o)<0&&(a[o]=r[o]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(o=Object.getOwnPropertySymbols(r);t<o.length;t++)e.indexOf(o[t])<0&&Object.prototype.propertyIsEnumerable.call(r,o[t])&&(a[o[t]]=r[o[t]])}return a},y=t("",{variants:{radius:g({},i.base),color:l()}}),x=a.forwardRef((function(a,t){var i,l,x,j=a.className,b=a.color,O=a.size,N=a.appearance,T=a.scaling,z=a.radius,S=a.children,R=a.validationType,B=a.regex,C=a.warningMessage,P=a.onChange,M=a.onBlur,F=v(a,["className","color","size","appearance","scaling","radius","children","validationType","regex","warningMessage","onChange","onBlur"]),I=u().theme,$=o(!1),k=$[0],D=$[1],E=o(null!==(i=F.defaultValue)&&void 0!==i?i:""),U=E[0],V=E[1],_=o(!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="이메일 형식에 어긋납니다."),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}),j),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(w.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 j=a.forwardRef((function(r,a){var o=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:a,color:t,side:i,className:n(y({radius:l}),o)},u,{children:s}))}));j.displayName="TextField.Slot";var w={Root:x,Slot:j};export{x as Root,j as Slot,w 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 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