npm - @lotte-innovate/ui-component-test - Versions diffs - 0.0.8 → 0.0.10 - Mend

@lotte-innovate/ui-component-test 0.0.8 → 0.0.10

Files changed (264) hide show

package/dist/Typography/Header/index.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export interface HeaderProps extends VariantProps<typeof headerVariants> {
 }
 declare let headerVariants: (props?: ({
     weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
-    headers?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+    headers?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const Header: React.ForwardRefExoticComponent<Omit<import("@radix-ui/themes").HeadingProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & HeaderProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/Typography/Header/{index.jsx → index.js} RENAMED Viewed

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/utils';
 import { cva } from 'class-variance-authority';
 import { textColorStyle, weightVariants } from '../../constants';
@@ -48,11 +49,7 @@ export var Header = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, size = _a.size, weight = _a.weight, color = _a.color, headers = _a.headers, align = _a.align, rootProps = __rest(_a, ["className", "children", "size", "weight", "color", "headers", "align"]);
     if (!headers)
         headers = 'h1';
-    return (<Theme>
-      <HeadingTheme ref={ref} as={headers} size={size} align={align} className={cn('leading-normal', headerVariants({ weight: weight, color: color }), className)} {...rootProps}>
-        {children}
-      </HeadingTheme>
-    </Theme>);
+    return (_jsx(Theme, { children: _jsx(HeadingTheme, __assign({ ref: ref, as: headers, size: size, align: align, className: cn('leading-normal', headerVariants({ weight: weight, color: color }), className) }, rootProps, { children: children })) }));
 });
 Header.displayName = 'Header';
 export default Header;

package/dist/Typography/Text/{index.jsx → index.js} RENAMED Viewed

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { Text as TextTheme, Theme } from '@radix-ui/themes';
 import { textColorStyle, weightVariants } from '../../constants';
@@ -37,11 +38,7 @@ var textVariants = cva('text', {
 });
 export var Text = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, as = _a.as, align = _a.align, weight = _a.weight, color = _a.color, size = _a.size, props = __rest(_a, ["className", "children", "as", "align", "weight", "color", "size"]);
-    return (<Theme>
-        <TextTheme as={as} ref={ref} size={size} align={align} className={cn(textVariants({ weight: weight, color: color }), className)} {...props}>
-          {children}
-        </TextTheme>
-      </Theme>);
+    return (_jsx(Theme, { children: _jsx(TextTheme, __assign({ as: as, ref: ref, size: size, align: align, className: cn(textVariants({ weight: weight, color: color }), className) }, props, { children: children })) }));
 });
 Text.displayName = 'Text';
 export default Text;

package/dist/app/layout.d.ts CHANGED Viewed

@@ -4,4 +4,4 @@ import './globals.css';
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: Readonly<{
     children: React.ReactNode;
-}>): import("react").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/app/{layout.jsx → layout.js} RENAMED Viewed

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Inter } from 'next/font/google';
 import './globals.css';
 var inter = Inter({ subsets: ['latin'] });
@@ -7,7 +8,5 @@ export var metadata = {
 };
 export default function RootLayout(_a) {
     var children = _a.children;
-    return (<html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>);
+    return (_jsx("html", { lang: "en", children: _jsx("body", { className: inter.className, children: children }) }));
 }

package/dist/app/page.d.ts CHANGED Viewed

@@ -1,2 +1 @@
-import React from 'react';
-export default function Home(): React.JSX.Element;
+export default function Home(): import("react/jsx-runtime").JSX.Element;

package/dist/app/{page.jsx → page.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // import { Button } from '@lotte-innovate/ui-component-test';
 export default function Home() {
-    return <div>{/* <Button>버튼</Button> */}</div>;
+    return _jsx("div", {});
 }

package/dist/app/template/badgeTemplate.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import React from 'react';
 import 'react-tabs/style/react-tabs.css';
 import { ITheme, IColor, IRadius, IScaling, IWeight } from 'types';
 type IBadgeTemplate = {
@@ -8,5 +7,5 @@ type IBadgeTemplate = {
     colorTheme: IColor;
     mode: ITheme;
 };
-declare const BadgeTemplate: ({ radiusTheme, scalingTheme, fontWeightTheme, colorTheme, mode, }: IBadgeTemplate) => React.JSX.Element;
+declare const BadgeTemplate: ({ radiusTheme, scalingTheme, fontWeightTheme, colorTheme, mode, }: IBadgeTemplate) => import("react/jsx-runtime").JSX.Element;
 export default BadgeTemplate;

package/dist/app/template/badgeTemplate.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { radiusOptions, scalingOptions } from '../../constants';
+import Badge from 'components/Badge';
+import { colorOptions } from 'color/constants';
+var BadgeTemplate = function (_a) {
+    var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (_jsxs("div", { className: "m-3", children: [_jsx("div", { className: " font-extrabold", children: "Badge" }), _jsx("div", { className: "", children: _jsx("div", { className: "border p-2 space-x-2", children: _jsxs(Tabs, { className: "", children: [_jsxs(TabList, { children: [_jsx(Tab, { children: "Theme colors" }), _jsx(Tab, { children: "All colors" }), _jsx(Tab, { children: "All sizes" })] }), _jsxs(TabPanel, { children: [_jsx("p", { className: "", children: "Main Color \uC801\uC6A9 \uBC43\uC9C0" }), _jsx(Badge, { radius: radiusTheme, scaling: scalingTheme, color: colorTheme, children: "Badge" }), _jsx(Badge, { radius: radiusTheme, scaling: scalingTheme, color: colorTheme, children: "outline" })] }), _jsx(TabPanel, { children: _jsxs("table", { children: [_jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "default" }), _jsx("th", { children: "outline" })] }), colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (_jsxs("tr", { children: [_jsx("th", { children: color }), _jsx("td", { children: _jsx(Badge, { radius: radiusTheme, scaling: scalingTheme, color: color, children: "Badge" }) }), _jsx("td", { children: _jsx(Badge, { radius: radiusTheme, scaling: scalingTheme, color: color, children: "outline" }) })] }, color)); })] }) }), _jsxs(TabPanel, { children: [_jsxs("table", { children: [_jsxs("tr", { children: [_jsx("th", {}), radiusOptions.map(function (radius) { return (_jsx("th", { children: radius }, radius)); })] }), scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("th", { children: scale }), radiusOptions.map(function (radius) { return (_jsx("td", { children: _jsx(Badge, { scaling: scale, radius: radius, color: colorTheme, children: "Badge" }) }, radius)); })] }, scale)); })] }), _jsx("table", { children: scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("th", { children: scale }), radiusOptions.map(function (radius) { return (_jsx("td", { children: _jsx(Badge, { scaling: scale, radius: radius, color: colorTheme, children: "outline" }) }, radius)); })] }, scale)); }) })] })] }) }) })] }));
+};
+export default BadgeTemplate;

package/dist/app/template/buttonTemplate.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ITheme, IColor, IRadius, IScaling, IWeight } from 'types';
 import 'react-tabs/style/react-tabs.css';
 type IButtonTemplate = {
@@ -8,5 +7,5 @@ type IButtonTemplate = {
     colorTheme: IColor;
     mode: ITheme;
 };
-declare const ButtonTemplate: ({ radiusTheme, scalingTheme, fontWeightTheme, colorTheme, mode, }: IButtonTemplate) => React.JSX.Element;
+declare const ButtonTemplate: ({ radiusTheme, scalingTheme, fontWeightTheme, colorTheme, mode, }: IButtonTemplate) => import("react/jsx-runtime").JSX.Element;
 export default ButtonTemplate;

package/dist/app/template/buttonTemplate.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { radiusOptions, scalingOptions } from '../../constants';
+import Button from 'components/Button';
+import { colorOptions } from 'color/constants';
+var ButtonTemplate = function (_a) {
+    var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (_jsxs("div", { className: "m-3", children: [_jsx("div", { className: " font-extrabold", children: "Button" }), _jsx("div", { className: "", children: _jsx("div", { className: "border p-2 space-x-2", children: _jsxs(Tabs, { className: "", children: [_jsxs(TabList, { children: [_jsx(Tab, { children: "Theme colors" }), _jsx(Tab, { children: "All colors" }), _jsx(Tab, { children: "All sizes" })] }), _jsxs(TabPanel, { children: [_jsx("p", { className: "", children: "Main Color \uC801\uC6A9 Button" }), _jsx(Button, { radius: radiusTheme, scaling: scalingTheme, weight: fontWeightTheme, color: colorTheme, children: "Button" }), _jsx(Button, { radius: radiusTheme, scaling: scalingTheme, weight: fontWeightTheme, color: colorTheme, children: "outline" })] }), _jsx(TabPanel, { children: _jsxs("table", { children: [_jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "default" }), _jsx("th", { children: "outline" })] }), colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (_jsxs("tr", { children: [_jsx("th", { children: color }), _jsx("td", { children: _jsx(Button, { radius: radiusTheme, scaling: scalingTheme, weight: fontWeightTheme, color: color, children: "Button" }) }), _jsx("td", { children: _jsx(Button, { radius: radiusTheme, scaling: scalingTheme, weight: fontWeightTheme, color: color, children: "outline" }) })] }, color)); })] }) }), _jsxs(TabPanel, { children: [_jsxs("table", { children: [_jsxs("tr", { children: [_jsx("th", {}), radiusOptions.map(function (radius) { return (_jsx("th", { children: radius }, radius)); })] }), scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("th", { children: scale }), radiusOptions.map(function (radius) { return (_jsx("td", { children: _jsx(Button, { scaling: scale, radius: radius, weight: fontWeightTheme, color: colorTheme, children: "Button" }) }, radius)); })] }, scale)); })] }), _jsx("table", { children: scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("th", { children: scale }), radiusOptions.map(function (radius) { return (_jsx("td", { children: _jsx(Button, { scaling: scale, radius: radius, weight: fontWeightTheme, color: colorTheme, children: "outline" }) }, radius)); })] }, scale)); }) })] })] }) }) })] }));
+};
+export default ButtonTemplate;

package/dist/app/template/colorPicker.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { IColor } from 'types';
 declare const ColorPicker: ({ setColorTheme, mode, }: {
     setColorTheme: (color: IColor) => void;
     mode: string;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ColorPicker;

package/dist/app/template/colorPicker.js ADDED Viewed

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { bgColorStyle } from '../../constants';
+var ColorPicker = function (_a) {
+    var setColorTheme = _a.setColorTheme, mode = _a.mode;
+    var handleColorClick = function (color) {
+        setColorTheme(color);
+    };
+    return (_jsx("div", { children: _jsx("div", { className: "flex flex-row flex-wrap gap-2", children: Object.entries(bgColorStyle).map(function (_a) {
+                var key = _a[0], value = _a[1];
+                return (_jsx("button", { className: "w-12 p-2 rounded-full text-xs cursor-pointer hover:border-gray-900 ".concat(value, " text-white hover:text-black"), children: key.replace('Dark', '') }, key));
+            }) }) }));
+};
+export default ColorPicker;

package/dist/app/template/textTemplate.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ITheme, IScaling, IWeight, IColor } from 'types';
 import 'react-tabs/style/react-tabs.css';
 type ITextTemplate = {
@@ -7,5 +6,5 @@ type ITextTemplate = {
     colorTheme: IColor;
     mode: ITheme;
 };
-declare const TextTemplate: ({ scalingTheme, fontWeightTheme, colorTheme, mode }: ITextTemplate) => React.JSX.Element;
+declare const TextTemplate: ({ scalingTheme, fontWeightTheme, colorTheme, mode }: ITextTemplate) => import("react/jsx-runtime").JSX.Element;
 export default TextTemplate;

package/dist/app/template/textTemplate.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { scalingOptions, weightOptions } from '../../constants';
+import { Text } from '../../Typography/Text';
+import { colorOptions } from 'color/constants';
+var TextTemplate = function (_a) {
+    var scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (_jsxs("div", { className: "m-3", children: [_jsx("div", { className: " font-extrabold", children: "Text" }), _jsx("div", { className: "", children: _jsx("div", { className: "border p-2 space-x-2", children: _jsxs(Tabs, { className: "", children: [_jsxs(TabList, { children: [_jsx(Tab, { children: "All colors" }), _jsx(Tab, { children: "All sizes" }), _jsx(Tab, { children: "All weights" })] }), _jsx(TabPanel, { children: _jsx("table", { children: _jsx("tbody", { children: colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (_jsxs("tr", { children: [_jsx("td", { children: color }), _jsx("td", { children: _jsx(Text
+                                                    // scaling={scalingTheme}
+                                                    , {
+                                                        // scaling={scalingTheme}
+                                                        weight: fontWeightTheme, color: color, children: "The quick brown fox jumps over the lazy dog." }) })] }, color)); }) }) }) }), _jsx(TabPanel, { children: _jsx("table", { children: _jsx("tbody", { children: scalingOptions === null || scalingOptions === void 0 ? void 0 : scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("td", { children: scale }), _jsx("td", { children: _jsx(Text
+                                                    // scaling={scale}
+                                                    , {
+                                                        // scaling={scale}
+                                                        weight: fontWeightTheme, color: colorTheme, children: "The quick brown fox jumps over the lazy dog." }) })] }, scale)); }) }) }) }), _jsx(TabPanel, { children: _jsx("table", { children: _jsx("tbody", { children: weightOptions === null || weightOptions === void 0 ? void 0 : weightOptions.map(function (weight) { return (_jsxs("tr", { children: [_jsx("td", { children: weight }), _jsx("td", { children: _jsx(Text
+                                                    // scaling={scalingTheme}
+                                                    , {
+                                                        // scaling={scalingTheme}
+                                                        weight: weight, color: colorTheme, children: "The quick brown fox jumps over the lazy dog." }) })] }, weight)); }) }) }) })] }) }) })] }));
+};
+export default TextTemplate;

package/dist/app/template/theme.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { IColor, IRadius, IScaling, IWeight } from 'types';
 type ITheme = {
     setRadiusTheme: Dispatch<SetStateAction<IRadius>>;
@@ -8,5 +8,5 @@ type ITheme = {
     setFontColorTheme: Dispatch<SetStateAction<IColor>>;
     mode: string;
 };
-declare const Theme: ({ setRadiusTheme, setScalingTheme, setFontWeightTheme, setColorTheme, setFontColorTheme, mode, }: ITheme) => React.JSX.Element;
+declare const Theme: ({ setRadiusTheme, setScalingTheme, setFontWeightTheme, setColorTheme, setFontColorTheme, mode, }: ITheme) => import("react/jsx-runtime").JSX.Element;
 export default Theme;

package/dist/app/template/theme.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ColorPicker from './colorPicker';
+import { radiusOptions, scalingOptions, weightOptions } from '../../constants';
+var Theme = function (_a) {
+    var setRadiusTheme = _a.setRadiusTheme, setScalingTheme = _a.setScalingTheme, setFontWeightTheme = _a.setFontWeightTheme, setColorTheme = _a.setColorTheme, setFontColorTheme = _a.setFontColorTheme, mode = _a.mode;
+    var setColor = function (color) {
+        setColorTheme(color);
+        setFontColorTheme(color);
+    };
+    return (_jsxs("div", { className: "flex flex-col p-3", children: [_jsx("p", { className: "text-2xl font-bold", children: "Themes" }), _jsxs("div", { className: "flex flex-col text-xl gap-2", children: ["Accent Color", _jsx(ColorPicker, { mode: mode, setColorTheme: setColor })] }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("p", { children: "Radius" }), _jsx("select", { className: "border border-gray-900", onChange: function (e) { return setRadiusTheme(e.target.value); }, defaultValue: 'full', children: radiusOptions.map(function (item) { return (_jsx("option", { value: item, children: item }, item)); }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("p", { children: "Scaling" }), _jsx("select", { className: "border border-gray-900", onChange: function (e) { return setScalingTheme(e.target.value); }, children: scalingOptions.map(function (item) { return (_jsx("option", { value: item, children: item }, item)); }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("p", { children: "Font Weight" }), _jsx("select", { className: "border border-gray-900", onChange: function (e) { return setFontWeightTheme(e.target.value); }, defaultValue: 'semibold', children: weightOptions.map(function (item) { return (_jsx("option", { value: item, children: item }, item)); }) })] })] })] }));
+};
+export default Theme;

package/dist/components/Accordion/{index.jsx → index.js} RENAMED Viewed

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
@@ -36,35 +37,22 @@ var accoridanVariants = cva('', {
 });
 export var Accordion = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, scaling = _a.scaling, rootProps = __rest(_a, ["className", "children", "scaling"]);
-    return (<AccordionPrimitive.Root className={cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: scaling }), className)} {...rootProps} ref={forwardedRef}>
-      {children}
-    </AccordionPrimitive.Root>);
+    return (_jsx(AccordionPrimitive.Root, __assign({ className: cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: scaling }), className) }, rootProps, { ref: forwardedRef, children: children })));
 });
 Accordion.displayName = 'AccordionRoot';
 export var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, rootProps = __rest(_a, ["className", "children"]);
-    return (<AccordionPrimitive.Item {...rootProps} ref={forwardedRef} className={cn('w-[278px] mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b ', className)}>
-      {children}
-    </AccordionPrimitive.Item>);
+    return (_jsx(AccordionPrimitive.Item, __assign({}, rootProps, { ref: forwardedRef, className: cn('w-[278px] mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b ', className), children: children })));
 });
 AccordionItem.displayName = 'AccordionItem';
 export var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, _b = _a.color, color = _b === void 0 ? 'red' : _b, rootProps = __rest(_a, ["className", "children", "color"]);
-    return (<AccordionPrimitive.Header {...rootProps} className={cn('flex', className)}>
-      <AccordionPrimitive.Trigger {...rootProps} ref={forwardedRef} className={cn(" w-[278px] group flex h-[44px] cursor-default items-center justify-between py-[10px] px-[20px] text-base font-normal ", "dark:bg-[#111113] text-".concat(color, "A-11 dark:text-").concat(color, "Dark-11 "), "hover:bg-".concat(color, "A-4 dark:hover:bg-").concat(color, "Dark-4 hover:text-").concat(color, "A-11 dark:hover:text-").concat(color, "DarkA-11"), "data-[state=open]:bg-".concat(color, "A-5 dark:data-[state=open]:bg-").concat(color, "DarkA-5"), "disabled:bg-slateA-3 disabled:dark:bg-slateDarkA-3 disabled:text-slateA-3 disabled:dark:text-slateDarkA-8", className)}>
-        {children}
-        <ChevronDownIcon className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180" aria-hidden/>
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>);
+    return (_jsx(AccordionPrimitive.Header, __assign({}, rootProps, { className: cn('flex', className), children: _jsxs(AccordionPrimitive.Trigger, __assign({}, rootProps, { ref: forwardedRef, className: cn(" w-[278px] group flex h-[44px] cursor-default items-center justify-between py-[10px] px-[20px] text-base font-normal ", "dark:bg-[#111113] text-".concat(color, "A-11 dark:text-").concat(color, "Dark-11 "), "hover:bg-".concat(color, "A-4 dark:hover:bg-").concat(color, "Dark-4 hover:text-").concat(color, "A-11 dark:hover:text-").concat(color, "DarkA-11"), "data-[state=open]:bg-".concat(color, "A-5 dark:data-[state=open]:bg-").concat(color, "DarkA-5"), "disabled:bg-slateA-3 disabled:dark:bg-slateDarkA-3 disabled:text-slateA-3 disabled:dark:text-slateDarkA-8", className), children: [children, _jsx(ChevronDownIcon, { className: "ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180", "aria-hidden": true })] })) })));
 });
 AccordionTrigger.displayName = 'AccordionTrigger';
 export var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, children = _a.children, rootProps = __rest(_a, ["className", "children"]);
-    return (<AccordionPrimitive.Content {...rootProps} ref={forwardedRef} className={cn('w-[278px] max-h-[800px] bg-slateA-2 dark:bg-slateDarkA-2 border-t border-t-slateA-4 dark:border-t-slateDarkA-4 text-slateA-11 dark:text-slateDarkA-11 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[16px]', className)}>
-      <div className="px-[20px] py-[15px] text-base font-normal h-auto max-h-[1000px] overflow-y-auto">
-        {children}
-      </div>
-    </AccordionPrimitive.Content>);
+    return (_jsx(AccordionPrimitive.Content, __assign({}, rootProps, { ref: forwardedRef, className: cn('w-[278px] max-h-[800px] bg-slateA-2 dark:bg-slateDarkA-2 border-t border-t-slateA-4 dark:border-t-slateDarkA-4 text-slateA-11 dark:text-slateDarkA-11 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[16px]', className), children: _jsx("div", { className: "px-[20px] py-[15px] text-base font-normal h-auto max-h-[1000px] overflow-y-auto", children: children }) })));
 });
 AccordionContent.displayName = 'AccordionContent';
 export default Accordion;

package/dist/components/AlertDialog/{AlertDialogAction.jsx → AlertDialogAction.js} RENAMED Viewed

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from 'utils/utils';
@@ -53,8 +54,6 @@ export var alertDialogActionVariants = cva("inline-flex items-center justify-cen
 export var AlertDialogAction = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, radius = _a.radius, weight = _a.weight, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["className", "children", "radius", "weight", "size", "color", "appearance"]);
     var buttonClassName = cn(alertDialogActionVariants({ radius: radius, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
-    return (<AlertDialogPrimitive.Action ref={ref} className={buttonClassName} {...props}>
-        {children}
-      </AlertDialogPrimitive.Action>);
+    return (_jsx(AlertDialogPrimitive.Action, __assign({ ref: ref, className: buttonClassName }, props, { children: children })));
 });
 AlertDialogAction.displayName = 'AlertDialogAction';

package/dist/components/AlertDialog/{AlertDialogCancel.jsx → AlertDialogCancel.js} RENAMED Viewed

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from 'utils/utils';
@@ -50,8 +51,6 @@ export var alertDialogCancelVariants = cva("inline-flex justify-center items-cen
 });
 export var AlertDialogCancel = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, radius = _a.radius, size = _a.size, weight = _a.weight, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, props = __rest(_a, ["className", "children", "radius", "size", "weight", "appearance"]);
-    return (<AlertDialogPrimitive.Cancel ref={ref} {...props} className={cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), className)}>
-      {children}
-    </AlertDialogPrimitive.Cancel>);
+    return (_jsx(AlertDialogPrimitive.Cancel, __assign({ ref: ref }, props, { className: cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), className), children: children })));
 });
 AlertDialogCancel.displayName = 'AlertDialogCancel';

package/dist/components/AlertDialog/{AlertDialogContent.jsx → AlertDialogContent.js} RENAMED Viewed

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from 'utils/utils';
@@ -43,11 +44,6 @@ export var alertDialogContentVariants = cva("fixed max-h-[85vh] top-[50%] left-[
 });
 export var AlertDialogContent = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, radius = _a.radius, size = _a.size, scaling = _a.scaling, props = __rest(_a, ["className", "children", "radius", "size", "scaling"]);
-    return (<AlertDialogPrimitive.Portal>
-      <AlertDialogPrimitive.Overlay className="fixed data-[state=open]:animate-overlayShow inset-0"/>
-      <AlertDialogPrimitive.Content className={cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className)} ref={ref} {...props}>
-        {children}
-      </AlertDialogPrimitive.Content>
-    </AlertDialogPrimitive.Portal>);
+    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed data-[state=open]:animate-overlayShow inset-0" }), _jsx(AlertDialogPrimitive.Content, __assign({ className: cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className), ref: ref }, props, { children: children }))] }));
 });
 AlertDialogContent.displayName = 'AlertDialogContent';

package/dist/components/AlertDialog/{AlertDialogDescription.jsx → AlertDialogDescription.js} RENAMED Viewed

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from 'utils/utils';
@@ -28,8 +40,6 @@ export var alertDialogDescriptionVariants = cva("text-slate-12 dark:text-slateDa
 });
 export var AlertDialogDescription = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, size = _a.size, contentText = _a.contentText, props = __rest(_a, ["className", "children", "size", "contentText"]);
-    return (<AlertDialogPrimitive.Description className={cn(alertDialogDescriptionVariants({ size: size }), className)} ref={ref} {...props}>
-      {contentText !== null && contentText !== void 0 ? contentText : children}
-    </AlertDialogPrimitive.Description>);
+    return (_jsx(AlertDialogPrimitive.Description, __assign({ className: cn(alertDialogDescriptionVariants({ size: size }), className), ref: ref }, props, { children: contentText !== null && contentText !== void 0 ? contentText : children })));
 });
 AlertDialogDescription.displayName = 'AlertDialogDescription';

package/dist/components/AlertDialog/{AlertDialogTitle.jsx → AlertDialogTitle.js} RENAMED Viewed

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from 'utils/utils';
@@ -28,8 +40,6 @@ export var alertDialogTitleVariants = cva("m-0 text-slate-12 dark:text-slateDark
 });
 export var AlertDialogTitle = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, size = _a.size, titleText = _a.titleText, props = __rest(_a, ["className", "children", "size", "titleText"]);
-    return (<AlertDialogPrimitive.Title className={cn(alertDialogTitleVariants({ size: size }), className)} ref={ref} {...props}>
-      {titleText !== null && titleText !== void 0 ? titleText : children}
-    </AlertDialogPrimitive.Title>);
+    return (_jsx(AlertDialogPrimitive.Title, __assign({ className: cn(alertDialogTitleVariants({ size: size }), className), ref: ref }, props, { children: titleText !== null && titleText !== void 0 ? titleText : children })));
 });
 AlertDialogTitle.displayName = 'AlertDialogTitle';

package/dist/components/AlertDialog/{AlertDialogTrigger.jsx → AlertDialogTrigger.js} RENAMED Viewed

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { radiusVariants, scalingVariants, weightVariants, primaryColorStyle, appearanceStyle, } from '../../constants';
@@ -49,8 +50,6 @@ var buttonVariants = cva("inline-flex items-center transition-colors focus:outli
 export var AlertDialogTrigger = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, weight = _a.weight, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "weight", "color", "appearance"]);
     var buttonClassName = cn(buttonVariants({ radius: radius, scaling: scaling, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
-    return (<AlertDialogPrimitive.Trigger asChild ref={ref} className={buttonClassName} {...props}>
-        {children}
-      </AlertDialogPrimitive.Trigger>);
+    return (_jsx(AlertDialogPrimitive.Trigger, __assign({ asChild: true, ref: ref, className: buttonClassName }, props, { children: children })));
 });
 AlertDialogTrigger.displayName = 'AlertDialogTrigger';

package/dist/components/AlertDialog/{index.jsx → index.js} RENAMED Viewed

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 export * from './AlertDialogTrigger';
 export * from './AlertDialogContent';
@@ -19,7 +31,7 @@ export * from './AlertDialogCancel';
 export * from './AlertDialogAction';
 export var AlertDialog = forwardRef(function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return <AlertDialogPrimitive.Root {...props}>{children}</AlertDialogPrimitive.Root>;
+    return _jsx(AlertDialogPrimitive.Root, __assign({}, props, { children: children }));
 });
 AlertDialog.displayName = 'AlertDialog';
 export default AlertDialog;

package/dist/components/AspectRatio/{index.jsx → index.js} RENAMED Viewed

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { cva } from 'class-variance-authority';
 import { cn } from 'utils/utils';
@@ -35,9 +36,7 @@ export var aspectRatioVariants = cva('', {
 });
 var AspectRatio = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.ratio, ratio = _b === void 0 ? 16 / 9 : _b, scaling = _a.scaling, props = __rest(_a, ["children", "className", "ratio", "scaling"]);
-    return (<AspectRatioPrimitive.Root ratio={ratio} ref={ref} {...props} className={cn(aspectRatioVariants({ scaling: scaling }), className)}>
-      {children}
-    </AspectRatioPrimitive.Root>);
+    return (_jsx(AspectRatioPrimitive.Root, __assign({ ratio: ratio, ref: ref }, props, { className: cn(aspectRatioVariants({ scaling: scaling }), className), children: children })));
 });
 AspectRatio.displayName = 'AspectRatio';
 export default AspectRatio;

package/dist/components/Avatar/{index.jsx → index.js} RENAMED Viewed

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cva } from 'class-variance-authority';
 import { cn } from 'utils/utils';
@@ -50,12 +51,7 @@ var AvatarVariants = cva('font-medium', {
 });
 var Avatar = forwardRef(function (_a, ref) {
     var className = _a.className, fallbackClassName = _a.fallbackClassName, radius = _a.radius, scaling = _a.scaling, size = _a.size, fallbackText = _a.fallbackText, imagePath = _a.imagePath, alt = _a.alt, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.color, color = _c === void 0 ? 'red' : _c, props = __rest(_a, ["className", "fallbackClassName", "radius", "scaling", "size", "fallbackText", "imagePath", "alt", "appearance", "color"]);
-    return (<AvatarPrimitive.Root className={cn("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants({ radius: radius, scaling: scaling, size: size, color: color }), appearanceStyle(appearance, color, false), className)} {...props} ref={ref}>
-        <AvatarPrimitive.Image className="h-full w-full object-cover border-none" src={imagePath} alt={alt}/>
-        <AvatarPrimitive.Fallback className={cn("leading-1 flex h-full w-full items-center justify-center", className)} delayMs={300}>
-          {fallbackText}
-        </AvatarPrimitive.Fallback>
-      </AvatarPrimitive.Root>);
+    return (_jsxs(AvatarPrimitive.Root, __assign({ className: cn("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants({ radius: radius, scaling: scaling, size: size, color: color }), appearanceStyle(appearance, color, false), className) }, props, { ref: ref, children: [_jsx(AvatarPrimitive.Image, { className: "h-full w-full object-cover border-none", src: imagePath, alt: alt }), _jsx(AvatarPrimitive.Fallback, { className: cn("leading-1 flex h-full w-full items-center justify-center", className), delayMs: 300, children: fallbackText })] })));
 });
 Avatar.displayName = 'Avatar';
 export default Avatar;

package/dist/components/Badge/{index.jsx → index.js} RENAMED Viewed

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from 'utils/utils';
 import { appearanceStyle, primaryColorStyle, radiusVariants, scalingVariants, weightVariants, } from '../../constants';
@@ -47,9 +48,7 @@ var BadgeVariants = cva('inline-flex items-center transition-colors focus:outlin
 var Badge = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, radius = _a.radius, scaling = _a.scaling, weight = _a.weight, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["className", "children", "radius", "scaling", "weight", "size", "color", "appearance"]);
     var badgeClassName = cn(BadgeVariants({ radius: radius, scaling: scaling, weight: weight, size: size, color: color }), appearanceStyle(appearance, color, false), className);
-    return (<div ref={ref} className={badgeClassName} {...props}>
-        {children}
-      </div>);
+    return (_jsx("div", __assign({ ref: ref, className: badgeClassName }, props, { children: children })));
 });
 Badge.displayName = 'Badge';
 export default Badge;

package/dist/components/BubbleChart/index.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PointStyle } from 'types';
 import { VariantProps } from 'class-variance-authority';
 export interface BubbleChartProps extends VariantProps<typeof bubbleChartVariants> {
@@ -26,7 +25,7 @@ declare const bubbleChartVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const BubbleChart: {
-    ({ className, datasets, scaling, width, height, ...props }: BubbleChartProps): React.JSX.Element;
+    ({ className, datasets, scaling, width, height, ...props }: BubbleChartProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default BubbleChart;

package/dist/components/BubbleChart/{index.jsx → index.js} RENAMED Viewed

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Bubble } from 'react-chartjs-2';
 import { Chart as ChartJS, LinearScale, PointElement, Tooltip, Legend } from 'chart.js/auto';
 import { scalingVariants } from '../../constants';
@@ -37,7 +37,7 @@ var bubbleChartVariants = cva('', {
 });
 export var BubbleChart = function (_a) {
     var className = _a.className, datasets = _a.datasets, scaling = _a.scaling, width = _a.width, height = _a.height, props = __rest(_a, ["className", "datasets", "scaling", "width", "height"]);
-    return (<Bubble data={{ datasets: datasets }} className={cn(bubbleChartVariants({ scaling: scaling }), className)} width={width} height={height} {...props}/>);
+    return (_jsx(Bubble, __assign({ data: { datasets: datasets }, className: cn(bubbleChartVariants({ scaling: scaling }), className), width: width, height: height }, props)));
 };
 BubbleChart.displayName = 'BubbleChart';
 export default BubbleChart;