@lotte-innovate/ui-component-test 0.1.75 → 0.1.77

package/dist/lib/components/Menubar/MenubarRoot.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++) {
@@ -21,11 +22,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useMemo, } from 'react';
+import { createContext, forwardRef, useContext, } from 'react';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { radiusVariants, scalingVariants } from '../../../lib/constants';
+import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var menubarVariants = cva('flex p-1 shadow bg-white dark:bg-slateDark-1', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -44,7 +47,7 @@ var MenubarContext = createContext({
     radius: 'medium',
     scaling: '100%',
     size: 'medium',
-    color: 'red',
+    color: MAIN_COLOR,
     appearance: 'ghost',
     itemAppearance: 'solid',
 });
@@ -52,9 +55,18 @@ export var useMenubarContext = function () {
     return useContext(MenubarContext);
 };
 export var MenubarRoot = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'ghost' : _c, _d = _a.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "color", "appearance", "itemAppearance"]);
-    var contextValue = useMemo(function () { return ({ radius: radius, size: size, scaling: scaling, color: color, appearance: appearance, itemAppearance: itemAppearance }); }, [radius, size, scaling, color, appearance, itemAppearance]);
-    var menuClassName = cn(menubarVariants({ radius: radius, scaling: scaling, size: size }), appearance === 'solid' && "bg-".concat(color, "-9 dark:bg-$").concat(color, "Dark-9"), className);
+    var _b;
+    var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, color = _a.color, _c = _a.appearance, appearance = _c === void 0 ? 'ghost' : _c, _d = _a.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "color", "appearance", "itemAppearance"]);
+    var theme = useTheme().theme;
+    var contextValue = {
+        radius: radius !== null && radius !== void 0 ? radius : theme.themeRadius,
+        scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
+        color: (_b = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _b !== void 0 ? _b : MAIN_COLOR,
+        size: size,
+        appearance: appearance,
+        itemAppearance: itemAppearance,
+    };
+    var menuClassName = cn(menubarVariants(contextValue), appearance === 'solid' && "bg-".concat(contextValue.color, "-9 dark:bg-$").concat(contextValue.color, "Dark-9"), className);
     return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx(MenubarPrimitive.Root, __assign({ ref: ref, className: menuClassName }, props, { children: children })) }));
 });
 MenubarRoot.displayName = 'Menubar.Root';

package/dist/lib/components/Menubar/MenubarSubContent.d.ts

@@ -4,7 +4,7 @@ import { VariantProps } from 'class-variance-authority';
 export interface MenubarSubContentProps extends VariantProps<typeof menubarSubContentVariants> {
 }
 export declare const menubarSubContentVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     size?: "small" | "medium" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const MenubarSubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & MenubarSubContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/lib/components/Menubar/MenubarSubContent.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++) {

package/dist/lib/components/Menubar/MenubarSubTrigger.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++) {
@@ -28,9 +29,10 @@ import { cn } from '../../../lib/utils/utils';
 import { blackText, menuItemAppearanceStyle } from '../../../lib/constants';
 import { menubarItemVariants } from './MenubarItem';
 import { useMenubarContext } from './MenubarRoot';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var MenubarSubTrigger = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var _b = useMenubarContext(), scaling = _b.scaling, size = _b.size, radius = _b.radius, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
+    var _b = useMenubarContext(), scaling = _b.scaling, size = _b.size, radius = _b.radius, _c = _b.color, color = _c === void 0 ? MAIN_COLOR : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
     var triggerClassName = cn(menubarItemVariants({ scaling: scaling, size: size, radius: radius }), menuItemAppearanceStyle(itemAppearance, color), className);
     var iconClassName = 'ml-auto pl-5 group-hover:text-slateA-11 dark:group-hover:text-slateDarkA-11';
     if (itemAppearance === 'solid' && !blackText.includes(color)) {

package/dist/lib/components/Menubar/MenubarTrigger.d.ts

@@ -6,7 +6,7 @@ export interface MenubarTriggerProps extends VariantProps<typeof menubarTriggerV
 }
 export declare const menubarTriggerVariants: (props?: ({
     size?: "small" | "medium" | null | undefined;
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const MenubarTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/Menubar/MenubarTrigger.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++) {
@@ -50,7 +51,7 @@ export var menubarTriggerVariants = cva("flex items-center justify-between gap-[
 });
 export var MenubarTrigger = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var _b = useMenubarContext(), scaling = _b.scaling, size = _b.size, radius = _b.radius, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.appearance, appearance = _d === void 0 ? 'ghost' : _d;
+    var _b = useMenubarContext(), scaling = _b.scaling, size = _b.size, radius = _b.radius, color = _b.color, _c = _b.appearance, appearance = _c === void 0 ? 'ghost' : _c;
     var triggerClassName = cn(menubarTriggerVariants({ scaling: scaling, size: size, radius: radius }), appearanceStyle(appearance, color), className);
     return (_jsx(MenubarPrimitive.Trigger, __assign({ ref: ref, className: triggerClassName }, props, { children: children })));
 });

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const Menubar: {
     Root: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./MenubarRoot").MenubarProps & import("react").RefAttributes<HTMLDivElement>>;
     Menu: import("react").ForwardRefExoticComponent<import("@radix-ui/react-menubar").MenubarMenuProps & {

package/dist/lib/components/NavigationMenu/NavigationMenuContent.d.ts

@@ -5,7 +5,7 @@ export interface NavigationMenuContentProps extends VariantProps<typeof navigati
     isShowIcon?: boolean;
 }
 export declare const navigationMenuContentVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     size?: "small" | "medium" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/lib/components/NavigationMenu/NavigationMenuContent.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++) {
@@ -43,6 +44,6 @@ export var navigationMenuContentVariants = cva("text-slate-12 dark:text-slateDar
 export var NavigationMenuContent = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
     var _b = useNavigationMenuContext(), radius = _b.radius, size = _b.size;
-    return (_jsx(NavigationMenuPrimitive.Content, __assign({ ref: ref, className: cn("data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute left-0 top-0 w-full sm:w-auto", navigationMenuContentVariants({ radius: radius, size: size }), className) }, props, { children: children })));
+    return (_jsx(NavigationMenuPrimitive.Content, __assign({ ref: ref, className: cn("data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute left-0 top-0 z-10 w-full bg-white sm:w-auto", navigationMenuContentVariants({ radius: radius, size: size }), className) }, props, { children: children })));
 });
 NavigationMenuContent.displayName = 'NavigationMenu.Content';

package/dist/lib/components/NavigationMenu/NavigationMenuIndicator.js

@@ -26,6 +26,6 @@ import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cn } from '../../../lib/utils/utils';
 export var NavigationMenuIndicator = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(NavigationMenuPrimitive.Indicator, __assign({ ref: ref, className: "data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[width,transform_250ms_ease]" }, props, { children: [_jsx("div", { className: cn("relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white shadow shadow-slate-4 dark:bg-slateDark-2 dark:shadow-slateDark-4", className) }), children] })));
+    return (_jsxs(NavigationMenuPrimitive.Indicator, __assign({ ref: ref, className: "data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-30 flex h-[10px] items-end justify-center overflow-hidden transition-[width,transform_250ms_ease]" }, props, { children: [_jsx("div", { className: cn("relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white shadow shadow-slate-4 dark:bg-slateDark-2 dark:shadow-slateDark-4", className) }), children] })));
 });
 NavigationMenuIndicator.displayName = 'NavigationMenu.Indicator';

package/dist/lib/components/NavigationMenu/NavigationMenuLink.d.ts

@@ -7,7 +7,7 @@ export interface NavigationMenuLinkProps extends VariantProps<typeof navigationM
 }
 export declare const navigationMenuLinkVariants: (props?: ({
     size?: "small" | "medium" | null | undefined;
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/lib/components/NavigationMenu/NavigationMenuLink.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++) {
@@ -27,6 +28,7 @@ import { cn } from '../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
 import { appearanceStyle, radiusVariants, scalingVariants } from '../../../lib/constants';
 import { useNavigationMenuContext } from './NavigationMenuRoot';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var navigationMenuLinkVariants = cva("block select-none leading-none outline-none py-1 px-3 cursor-alias hover:underline font-medium", {
     variants: {
         size: {
@@ -44,7 +46,7 @@ export var navigationMenuLinkVariants = cva("block select-none leading-none outl
 });
 export var NavigationMenuLink = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, href = _a.href, props = __rest(_a, ["children", "className", "href"]);
-    var _b = useNavigationMenuContext(), scaling = _b.scaling, size = _b.size, radius = _b.radius, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.appearance, appearance = _d === void 0 ? 'ghost' : _d;
+    var _b = useNavigationMenuContext(), scaling = _b.scaling, size = _b.size, radius = _b.radius, _c = _b.color, color = _c === void 0 ? MAIN_COLOR : _c, _d = _b.appearance, appearance = _d === void 0 ? 'ghost' : _d;
     var linkClassName = cn(navigationMenuLinkVariants({ scaling: scaling, size: size, radius: radius }), appearanceStyle(appearance, color), className);
     return (_jsx(NavigationMenuPrimitive.Link, __assign({ ref: ref, href: href, title: href, className: linkClassName }, props, { children: children })));
 });

package/dist/lib/components/NavigationMenu/NavigationMenuList.d.ts

@@ -6,7 +6,7 @@ export interface NavigationMenuListProps extends VariantProps<typeof navigationM
     appearance?: 'ghost' | 'solid';
 }
 export declare const navigationMenuListVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;

package/dist/lib/components/NavigationMenu/NavigationMenuList.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++) {
@@ -28,6 +29,7 @@ import { cva } from 'class-variance-authority';
 import { appearanceStyle, radiusVariants, scalingVariants } from '../../../lib/constants';
 import { NavigationMenuIndicator } from './NavigationMenuIndicator';
 import { useNavigationMenuContext } from './NavigationMenuRoot';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var navigationMenuListVariants = cva('flex p-1 space-x-1 shadow-slate-4 shadow dark:shadow-slateDark-4 bg-white dark:bg-slateDark-1', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -40,7 +42,7 @@ export var navigationMenuListVariants = cva('flex p-1 space-x-1 shadow-slate-4 s
 });
 export var NavigationMenuList = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.isShowIndicator, isShowIndicator = _b === void 0 ? true : _b, props = __rest(_a, ["children", "className", "isShowIndicator"]);
-    var _c = useNavigationMenuContext(), scaling = _c.scaling, radius = _c.radius, _d = _c.appearance, appearance = _d === void 0 ? 'ghost' : _d, _e = _c.color, color = _e === void 0 ? 'red' : _e;
+    var _c = useNavigationMenuContext(), scaling = _c.scaling, radius = _c.radius, _d = _c.appearance, appearance = _d === void 0 ? 'ghost' : _d, _e = _c.color, color = _e === void 0 ? MAIN_COLOR : _e;
     var navigationMenuListClassName = cn(navigationMenuListVariants({ scaling: scaling, radius: radius }), appearanceStyle(appearance, color, false), 'border-none', appearance === 'ghost' && 'bg-white', className);
     return (_jsxs(NavigationMenuPrimitive.List, __assign({ ref: ref, className: navigationMenuListClassName }, props, { children: [children, isShowIndicator && _jsx(NavigationMenuIndicator, {})] })));
 });

package/dist/lib/components/NavigationMenu/NavigationMenuRoot.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++) {
@@ -21,14 +22,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, createContext, useContext, useMemo, } from 'react';
+import { forwardRef, createContext, useContext, } from 'react';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cn } from '../../../lib/utils/utils';
+import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 var NavigationMenuContext = createContext({
     radius: 'medium',
     scaling: '100%',
     size: 'medium',
-    color: 'red',
+    color: MAIN_COLOR,
     appearance: 'ghost',
 });
 export var useNavigationMenuContext = function () {
@@ -36,7 +39,14 @@ export var useNavigationMenuContext = function () {
 };
 export var NavigationMenuRoot = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, radius = _a.radius, size = _a.size, scaling = _a.scaling, color = _a.color, appearance = _a.appearance, props = __rest(_a, ["className", "children", "radius", "size", "scaling", "color", "appearance"]);
-    var contextValue = useMemo(function () { return ({ radius: radius, size: size, scaling: scaling, color: color, appearance: appearance }); }, [radius, size, scaling, color, appearance]);
+    var theme = useTheme().theme;
+    var contextValue = {
+        radius: radius !== null && radius !== void 0 ? radius : theme.themeRadius,
+        scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
+        color: color !== null && color !== void 0 ? color : theme.themeColor,
+        size: size,
+        appearance: appearance,
+    };
     return (_jsx(NavigationMenuContext.Provider, { value: contextValue, children: _jsx(NavigationMenuPrimitive.Root, __assign({ ref: ref, className: cn('relative flex', className) }, props, { children: children })) }));
 });
 NavigationMenuRoot.displayName = 'NavigationMenu.Root';

package/dist/lib/components/NavigationMenu/NavigationMenuTrigger.d.ts

@@ -7,7 +7,7 @@ export interface NavigationMenuTriggerProps extends VariantProps<typeof navigati
 }
 export declare const navigationMenuTriggerVariants: (props?: ({
     size?: "small" | "medium" | null | undefined;
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/NavigationMenu/NavigationMenuTrigger.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++) {
@@ -28,6 +29,7 @@ import { cva } from 'class-variance-authority';
 import { appearanceStyle, scalingVariants } from '../../../lib/constants';
 import { CaretDownIcon } from '@radix-ui/react-icons';
 import { useNavigationMenuContext } from './NavigationMenuRoot';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var navigationMenuTriggerVariants = cva("flex items-center justify-between outline-none select-none leading-none py-1 px-3 font-medium", {
     variants: {
         size: {
@@ -51,7 +53,7 @@ export var navigationMenuTriggerVariants = cva("flex items-center justify-betwee
 });
 export var NavigationMenuTrigger = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.isShowIcon, isShowIcon = _b === void 0 ? true : _b, props = __rest(_a, ["children", "className", "isShowIcon"]);
-    var _c = useNavigationMenuContext(), scaling = _c.scaling, size = _c.size, radius = _c.radius, _d = _c.color, color = _d === void 0 ? 'red' : _d, _e = _c.appearance, appearance = _e === void 0 ? 'ghost' : _e;
+    var _c = useNavigationMenuContext(), scaling = _c.scaling, size = _c.size, radius = _c.radius, _d = _c.color, color = _d === void 0 ? MAIN_COLOR : _d, _e = _c.appearance, appearance = _e === void 0 ? 'ghost' : _e;
     var triggerClassName = cn(navigationMenuTriggerVariants({ scaling: scaling, size: size, radius: radius }), appearanceStyle(appearance, color), className);
     return (_jsxs(NavigationMenuPrimitive.Trigger, __assign({ ref: ref, className: triggerClassName }, props, { children: [children, isShowIcon && (_jsx(CaretDownIcon, { className: cn("relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"), "aria-hidden": true }))] })));
 });

package/dist/lib/components/NavigationMenu/NavigationMenuViewport.d.ts

@@ -4,8 +4,8 @@ import { VariantProps } from 'class-variance-authority';
 export interface NavigationViewportProps extends VariantProps<typeof navigationViewportVariants> {
 }
 export declare const navigationViewportVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
     size?: "small" | "medium" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/lib/components/NavigationMenu/NavigationMenuViewport.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++) {
@@ -27,7 +28,7 @@ import { cn } from '../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
 import { radiusVariants, scalingVariants, weightVariants } from '../../../lib/constants';
 import { useNavigationMenuContext } from './NavigationMenuRoot';
-export var navigationViewportVariants = cva("data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] \n    h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden \n    transition-[width,_height] duration-300 shadow-slate-4 shadow dark:shadow-slateDark-4\n    sm:w-[var(--radix-navigation-menu-viewport-width)]", {
+export var navigationViewportVariants = cva("data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] \n    h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden \n    transition-[width,_height] duration-300 shadow-slate-4 shadow dark:shadow-slateDark-4\n    sm:w-[var(--radix-navigation-menu-viewport-width)] bg-white", {
     variants: {
         radius: __assign({}, radiusVariants['extra-large']),
         weight: __assign({}, weightVariants),
@@ -48,6 +49,6 @@ export var NavigationMenuViewport = forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
     var _b = useNavigationMenuContext(), size = _b.size, scaling = _b.scaling, radius = _b.radius;
     var viewportClassName = cn(navigationViewportVariants({ size: size, scaling: scaling, radius: radius }), className);
-    return (_jsx("div", { className: "perspective-[2000px] absolute left-0 top-full flex w-full", children: _jsx(NavigationMenuPrimitive.Viewport, __assign({ ref: ref, className: viewportClassName }, props)) }));
+    return (_jsx("div", { className: "perspective-[2000px] absolute left-0 top-full z-20 flex w-full bg-white", children: _jsx(NavigationMenuPrimitive.Viewport, __assign({ ref: ref, className: viewportClassName }, props)) }));
 });
 NavigationMenuViewport.displayName = 'NavigationMenu.Viewport';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const NavigationMenu: {
     Root: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("./NavigationMenuRoot").NavigationMenuProps & import("react").RefAttributes<HTMLElement>>;
     List: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>, "ref"> & import("./NavigationMenuList").NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist/lib/components/Popover/PopoverClose.d.ts

@@ -4,6 +4,6 @@ import { Popover as PopoverTheme } from '@radix-ui/themes';
 export interface PopoverCloseProps extends VariantProps<typeof popoverCloseVariants> {
 }
 export declare const popoverCloseVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverTheme.CloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/Popover/PopoverClose.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++) {

package/dist/lib/components/Popover/PopoverContent.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Popover as PopoverTheme } from '@radix-ui/themes';
 import { VariantProps } from 'class-variance-authority';
+import { ISize } from '../../../lib/types';
 export interface PopoverContentProps extends VariantProps<typeof popoverContentVariants> {
+    size?: Exclude<ISize, 'x-small'>;
 }
 export declare const popoverContentVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     size?: "small" | "medium" | "large" | "x-large" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/lib/components/Popover/PopoverContent.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++) {

package/dist/lib/components/Popover/PopoverRoot.d.ts

@@ -2,8 +2,7 @@ import React, { ComponentPropsWithoutRef } from 'react';
 import { Popover as PopoverTheme } from '@radix-ui/themes';
 import { VariantProps } from 'class-variance-authority';
 import { popoverContentVariants } from './PopoverContent';
-import { popoverCloseVariants } from './PopoverClose';
-export interface PopoverProps extends VariantProps<typeof popoverContentVariants>, VariantProps<typeof popoverCloseVariants> {
+export interface PopoverProps extends VariantProps<typeof popoverContentVariants> {
 }
 export declare const PopoverContext: React.Context<PopoverProps>;
 export declare const PopoverRoot: {

package/dist/lib/components/Popover/PopoverRoot.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++) {
@@ -23,6 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext } from 'react';
 import { Theme, Popover as PopoverTheme } from '@radix-ui/themes';
+import { useTheme } from '../../../lib/theme';
 export var PopoverContext = createContext({
     radius: 'medium',
     size: 'medium',
@@ -30,7 +32,12 @@ export var PopoverContext = createContext({
 });
 export var PopoverRoot = function (_a) {
     var children = _a.children, radius = _a.radius, size = _a.size, scaling = _a.scaling, props = __rest(_a, ["children", "radius", "size", "scaling"]);
-    var contextValue = { radius: radius, size: size, scaling: scaling };
+    var theme = useTheme().theme;
+    var contextValue = {
+        radius: radius !== null && radius !== void 0 ? radius : theme.themeRadius,
+        scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
+        size: size,
+    };
     return (_jsx(Theme, { children: _jsx(PopoverContext.Provider, { value: contextValue, children: _jsx(PopoverTheme.Root, __assign({}, props, { children: children })) }) }));
 };
 PopoverRoot.displayName = 'Popover.Root';

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 declare const Popover: {
     Root: {
-        ({ children, radius, size, scaling, ...props }: import("react").ComponentPropsWithoutRef<import("react").FC<import("@radix-ui/themes/dist/cjs/components/popover").RootProps>> & import("./PopoverRoot").PopoverProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, radius, size, scaling, ...props }: import("@radix-ui/themes/dist/cjs/components/popover").RootProps & import("./PopoverRoot").PopoverProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/popover").TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { VariantProps } from 'class-variance-authority';
 export interface ProgressProps extends VariantProps<typeof progressVariants> {
-    size?: any;
+    size?: 'small' | 'medium' | 'large';
     appearance?: 'classic' | 'surface' | 'soft';
 }
 declare const progressVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const Progress: React.ForwardRefExoticComponent<Omit<import("@radix-ui/themes").ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Progress: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/themes").ProgressProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export default Progress;

package/dist/lib/components/Progress/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++) {
@@ -23,9 +24,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
-import { scalingVariants } from '../../../lib/constants';
 import { Theme, Progress as ProgressTheme } from '@radix-ui/themes';
 import { cn } from '../../../lib/utils/utils';
+import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
+import { scalingVariants } from '../../../lib/constants';
 var progressVariants = cva('w-[300px]', {
     variants: {
         radius: {
@@ -49,8 +52,16 @@ var progressVariants = cva('w-[300px]', {
     },
 });
 export var Progress = forwardRef(function (_a, ref) {
-    var className = _a.className, radius = _a.radius, size = _a.size, value = _a.value, _b = _a.appearance, appearance = _b === void 0 ? 'surface' : _b, _c = _a.color, color = _c === void 0 ? 'red' : _c, scaling = _a.scaling, props = __rest(_a, ["className", "radius", "size", "value", "appearance", "color", "scaling"]);
-    return (_jsx(Theme, { accentColor: color, children: _jsx(ProgressTheme, __assign({ ref: ref, value: value, variant: appearance, className: cn(progressVariants({ radius: radius, size: size, scaling: scaling }), className) }, props)) }));
+    var _b;
+    var className = _a.className, radius = _a.radius, size = _a.size, value = _a.value, _c = _a.appearance, appearance = _c === void 0 ? 'surface' : _c, color = _a.color, scaling = _a.scaling, props = __rest(_a, ["className", "radius", "size", "value", "appearance", "color", "scaling"]);
+    var theme = useTheme().theme;
+    var progressStyle = {
+        radius: radius !== null && radius !== void 0 ? radius : theme.themeRadius,
+        scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
+        color: (_b = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _b !== void 0 ? _b : MAIN_COLOR,
+        size: size,
+    };
+    return (_jsx(Theme, { accentColor: progressStyle.color, children: _jsx(ProgressTheme, __assign({ ref: ref, value: value, variant: appearance, className: cn(progressVariants(progressStyle), className) }, props)) }));
 });
 Progress.displayName = 'Progress';
 export default Progress;

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

@@ -20,16 +20,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { scalingVariants } from '../../../lib/constants';
 import { Radar } from 'react-chartjs-2';
 import { cn } from '../../../lib/utils/utils';
-import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend, plugins, } from 'chart.js/auto';
+import { Chart as ChartJS, registerables } from 'chart.js';
 import { chartColorList, chartAlphaColorList } from '../../../lib/color/constants';
 import { useDarkMode } from '../../../lib/utils/useDarkMode';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
-ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend, plugins, ChartDataLabels);
+ChartJS.register.apply(ChartJS, __spreadArray(__spreadArray([], registerables, false), [ChartDataLabels], false));
 ChartJS.defaults.set('plugins.datalabels', {
     display: false,
 });
@@ -43,7 +52,7 @@ var radarChartVariants = cva('', {
 });
 export var RadarChart = function (_a) {
     var className = _a.className, title = _a.title, legend = _a.legend, datalabels = _a.datalabels, datasets = _a.datasets, labels = _a.labels, width = _a.width, height = _a.height, scaling = _a.scaling, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.isColorMixed, isColorMixed = _c === void 0 ? true : _c, props = __rest(_a, ["className", "title", "legend", "datalabels", "datasets", "labels", "width", "height", "scaling", "appearance", "isColorMixed"]);
-    var _d = useDarkMode(true), isDark = _d[0], defaultScales = _d[1];
+    var _d = useDarkMode(true), defaultScales = _d[1];
     var getChartColor = function (isColorMixed, appearance) {
         if (appearance === 'solid') {
             return isColorMixed ? chartColorList.mixed : chartColorList.sorting;

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

@@ -2,12 +2,12 @@ import React from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { IScaling } from '../../../lib/types';
 export interface RadioProps extends VariantProps<typeof radioVariants> {
-    size?: any;
+    size?: 'small' | 'medium' | 'large';
     scaling?: IScaling;
     appearance?: 'classic' | 'surface' | 'soft';
 }
 declare const radioVariants: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const Radio: React.ForwardRefExoticComponent<Omit<import("@radix-ui/themes").RadioProps & React.RefAttributes<HTMLInputElement>, "ref"> & RadioProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/themes").RadioProps & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & RadioProps & React.RefAttributes<HTMLInputElement>>;
 export default Radio;

package/dist/lib/components/Radio/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++) {
@@ -21,11 +22,13 @@ 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 { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { Theme, Radio as RadioTheme, Flex } from '@radix-ui/themes';
 import { Text } from '../../../lib/Typography/Text';
 import { cn } from '../../../lib/utils/utils';
+import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 var radioVariants = cva('font-normal', {
     variants: {
         size: {
@@ -38,16 +41,20 @@ var radioVariants = cva('font-normal', {
         size: 'medium',
     },
 });
-export var Radio = React.forwardRef(function (_a, ref) {
-    var value = _a.value, scaling = _a.scaling, color = _a.color, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'surface' : _c, children = _a.children, className = _a.className, props = __rest(_a, ["value", "scaling", "color", "size", "appearance", "children", "className"]);
-    if (!color)
-        color = 'red';
+export var Radio = forwardRef(function (_a, ref) {
+    var _b;
+    var value = _a.value, scaling = _a.scaling, color = _a.color, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.appearance, appearance = _d === void 0 ? 'surface' : _d, children = _a.children, className = _a.className, props = __rest(_a, ["value", "scaling", "color", "size", "appearance", "children", "className"]);
+    var theme = useTheme().theme;
     var sizeTheme = '2';
     if (size === 'small')
         sizeTheme = '1';
     if (size === 'large')
         sizeTheme = '3';
-    return (_jsx(Theme, { accentColor: color, scaling: scaling, children: _jsx(Flex, { asChild: true, className: cn(radioVariants({ size: size }), className), children: _jsxs(Text, { as: "label", size: sizeTheme, children: [_jsx(RadioTheme, __assign({ ref: ref, value: value, variant: appearance, size: sizeTheme }, props)), children] }) }) }));
+    var radioStyle = {
+        scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
+        color: (_b = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _b !== void 0 ? _b : MAIN_COLOR,
+    };
+    return (_jsx(Theme, { accentColor: radioStyle.color, scaling: radioStyle.scaling, children: _jsx(Flex, { asChild: true, className: cn(radioVariants({ size: size }), className), children: _jsxs(Text, { as: "label", size: sizeTheme, color: "black", children: [_jsx(RadioTheme, __assign({ ref: ref, value: value, variant: appearance, size: sizeTheme }, props)), children] }) }) }));
 });
 Radio.displayName = 'Radio';
 export default Radio;

package/dist/lib/components/RadioCards/RadioCardsItem.d.ts

@@ -4,7 +4,7 @@ import { RadioCards as RadioCardsTheme } from '@radix-ui/themes';
 export interface RadioCardsItemProps extends VariantProps<typeof radioCardsItemVariants> {
 }
 export declare const radioCardsItemVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const RadioCardsItem: React.ForwardRefExoticComponent<Omit<RadioCardsTheme.ItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & RadioCardsItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/RadioCards/RadioCardsItem.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++) {