@lotte-innovate/ui-component-test 0.1.96 → 0.1.98

package/dist/lib/Typography/Header/index.d.ts

@@ -1,13 +1,15 @@
-import { VariantProps } from 'class-variance-authority';
 import React from 'react';
-import { IColor } from '../../../lib/types';
+import { VariantProps } from 'class-variance-authority';
+import { IColor, ITypoSize } from '../../../lib/types';
 export interface HeaderProps extends VariantProps<typeof headerVariants> {
     color?: IColor;
+    size?: ITypoSize;
+    align?: 'left' | 'center' | 'right';
 }
 declare let headerVariants: (props?: ({
-    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
-    headers?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
+    headers?: "h1" | "h2" | "h3" | "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>>;
+export declare const Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & HeaderProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Header;

package/dist/lib/Typography/Header/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,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { cn } from '../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
 import { textColorStyle, weightVariants } from '../../../lib/constants';
 import { Heading as HeadingTheme, Theme } from '@radix-ui/themes';
-import React from 'react';
+import { useTheme } from '../../../lib/theme';
 var weights = __assign({}, weightVariants);
 var headers = {
     h1: 'h1',
@@ -47,9 +49,10 @@ var headerVariants = cva('', {
 });
 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"]);
+    var theme = useTheme().theme;
     if (!headers)
         headers = 'h1';
-    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 })) }));
+    return (_jsx(Theme, { children: _jsx(HeadingTheme, __assign({ ref: ref, as: headers, size: size, align: align, className: cn('leading-normal', headerVariants({ weight: weight, color: color !== null && color !== void 0 ? color : theme.themeColor }), className) }, rootProps, { children: children })) }));
 });
 Header.displayName = 'Header';
 export default Header;

package/dist/lib/Typography/Text/index.d.ts

@@ -8,7 +8,7 @@ export interface TextProps extends VariantProps<typeof textVariants> {
     align?: 'left' | 'center' | 'right';
 }
 declare const textVariants: (props?: ({
-    weight?: "bold" | "medium" | "regular" | "semibold" | "light" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | "bold" | "light" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const Text: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & TextProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/lib/Typography/Text/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++) {
@@ -26,6 +27,7 @@ import { cva } from 'class-variance-authority';
 import { Text as TextTheme, Theme } from '@radix-ui/themes';
 import { textColorStyle, weightVariants } from '../../../lib/constants';
 import { cn } from '../../../lib/utils/utils';
+import { useTheme } from '../../../lib/theme';
 var textVariants = cva('', {
     variants: {
         weight: __assign({ light: 'font-light' }, weightVariants),
@@ -38,7 +40,8 @@ var textVariants = cva('', {
 });
 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 (_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 })) }));
+    var theme = useTheme().theme;
+    return (_jsx(Theme, { children: _jsx(TextTheme, __assign({ as: as, ref: ref, size: size, align: align, className: cn(textVariants({ weight: weight, color: color !== null && color !== void 0 ? color : theme.themeColor }), className) }, props, { children: children })) }));
 });
 Text.displayName = 'Text';
 export default Text;

package/dist/lib/_virtual/index.mjs

@@ -0,0 +1,2 @@
+import{__require as e}from"../node_modules/prop-types/index.mjs";var r=e();export{r as p};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/_virtual/index2.mjs

@@ -0,0 +1,2 @@
+var e={exports:{}};export{e as __module};
+//# sourceMappingURL=index2.mjs.map

package/dist/lib/_virtual/index2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/_virtual/index3.mjs

@@ -0,0 +1,2 @@
+var e={exports:{}};export{e as __module};
+//# sourceMappingURL=index3.mjs.map

package/dist/lib/_virtual/index3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index3.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/_virtual/react-is.development.mjs

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.development.mjs.map

package/dist/lib/_virtual/react-is.development.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.development.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/_virtual/react-is.production.min.mjs

@@ -0,0 +1,2 @@
+var r={};export{r as __exports};
+//# sourceMappingURL=react-is.production.min.mjs.map

package/dist/lib/_virtual/react-is.production.min.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.production.min.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/color/constants.d.ts

@@ -1,21 +1,8 @@
 import { IColor, IAlphaColor, IDarkColor } from '../types';
+export declare const MAIN_COLOR: IColor;
 export declare const colorOptions: IColor[];
 export declare const alphaColorOptions: IAlphaColor[];
 export declare const darkColorOptions: IDarkColor[];
-export declare const alphaOptions: {
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-    5: string;
-    6: string;
-    7: string;
-    8: string;
-    9: string;
-    10: string;
-    11: string;
-    12: string;
-};
 export declare const ColorStyle: Record<string, string>;
 export declare const DarkColorStyle: Record<string, string>;
 export declare const chartColorList: {
@@ -26,4 +13,3 @@ export declare const chartAlphaColorList: {
     sorting: string[];
     mixed: string[];
 };
-export declare const chartColorOptions: IColor[];

package/dist/lib/color/constants.js

@@ -1,5 +1,6 @@
 import { blue, crimson, teal, orange, purple, amber, slate, cyan, red, grass, brown, indigo, plum, yellow, sky, lime, } from './light';
 import { blueA, crimsonA, tealA, orangeA, purpleA, amberA, slateA, cyanA, redA, grassA, brownA, indigoA, plumA, yellowA, skyA, limeA, } from './alpha';
+export var MAIN_COLOR = 'red';
 export var colorOptions = [
     // 'black',
     'slate',
@@ -122,20 +123,6 @@ export var darkColorOptions = [
     'orangeDarkA',
     'whiteDark',
 ];
-export var alphaOptions = {
-    1: '1',
-    2: '2',
-    3: '6',
-    4: '9',
-    5: '12',
-    6: '15',
-    7: '20',
-    8: '27',
-    9: '45',
-    10: '50',
-    11: '62',
-    12: '89',
-};
 export var ColorStyle = {
     black: 'slate-12',
     white: '#ffffff',
@@ -276,21 +263,3 @@ export var chartAlphaColorList = {
         limeA[2],
     ],
 };
-export var chartColorOptions = [
-    'blue',
-    'crimson',
-    'teal',
-    'orange',
-    'purple',
-    'amber',
-    'slate',
-    'cyan',
-    'red',
-    'grass',
-    'brown',
-    'indigo',
-    'plum',
-    'yellow',
-    'sky',
-    'lime',
-];

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

@@ -3,12 +3,12 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { VariantProps } from 'class-variance-authority';
 import { IColor } from '../../../lib/types';
 export interface AccordionProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof accoridanVariants> {
-    defaultValue?: string[];
     color?: IColor;
 }
 declare const accoridanVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const useAccordionContext: () => AccordionProps;
 export declare const Root: React.ForwardRefExoticComponent<((Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & AccordionProps) & React.RefAttributes<HTMLDivElement>>;
 export declare const Item: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & AccordionProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & AccordionProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/Accordion/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,12 +22,14 @@ 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 React, { createContext, useContext } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cn } from '../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
 import { scalingVariants } from '../../../lib/constants';
+import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 var accoridanVariants = cva('', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -35,9 +38,22 @@ var accoridanVariants = cva('', {
         scaling: '100%',
     },
 });
+var AccordionContext = createContext({
+    scaling: '100%',
+    color: MAIN_COLOR,
+});
+export var useAccordionContext = function () {
+    return useContext(AccordionContext);
+};
 export var Root = React.forwardRef(function (_a, forwardedRef) {
-    var className = _a.className, children = _a.children, scaling = _a.scaling, rootProps = __rest(_a, ["className", "children", "scaling"]);
-    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 })));
+    var _b;
+    var className = _a.className, children = _a.children, scaling = _a.scaling, color = _a.color, rootProps = __rest(_a, ["className", "children", "scaling", "color"]);
+    var theme = useTheme().theme;
+    var contextValue = {
+        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(AccordionContext.Provider, { value: contextValue, children: _jsx(AccordionPrimitive.Root, __assign({ className: cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: contextValue.scaling }), className) }, rootProps, { ref: forwardedRef, children: children })) }));
 });
 Root.displayName = 'Accordion.Root';
 export var Item = React.forwardRef(function (_a, forwardedRef) {
@@ -46,7 +62,8 @@ export var Item = React.forwardRef(function (_a, forwardedRef) {
 });
 Item.displayName = 'Accordion.Item';
 export var Trigger = 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"]);
+    var className = _a.className, children = _a.children, rootProps = __rest(_a, ["className", "children"]);
+    var color = useAccordionContext().color;
     return (_jsx(AccordionPrimitive.Header, __assign({}, rootProps, { className: cn('flex', className), children: _jsxs(AccordionPrimitive.Trigger, __assign({}, rootProps, { ref: forwardedRef, className: cn("group flex h-[44px] w-[278px] cursor-default items-center justify-between px-[20px] py-[10px] 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:text-slateA-8 disabled:dark:bg-slateDarkA-3 disabled:dark:text-slateDarkA-8", className), children: [children, _jsx(ChevronDownIcon, { className: "transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180", "aria-hidden": true })] })) })));
 });
 Trigger.displayName = 'Accordion.Trigger';

package/dist/lib/components/AlertDialog/AlertDialogAction.d.ts

@@ -6,9 +6,9 @@ export interface AlertDialogActionProps extends VariantProps<typeof alertDialogA
     appearance?: IAppearance;
 }
 export declare const alertDialogActionVariants: (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;
-    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/AlertDialog/AlertDialogAction.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 { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { appearanceStyle, primaryColorStyle, weightVariants } from '../../../lib/constants';
 import { useAlertDialogContext } from './AlertDialogRoot';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var alertDialogActionVariants = cva("inline-flex items-center justify-center px-[15px] outline-none focus:shadow-[0_0_0_2px] font-normal w-fit", {
     variants: {
         radius: {
@@ -49,12 +51,12 @@ export var alertDialogActionVariants = cva("inline-flex items-center justify-cen
         radius: 'large',
         weight: 'medium',
         size: 'medium',
-        color: 'red',
+        color: MAIN_COLOR,
     },
 });
 export var AlertDialogAction = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, weight = _a.weight, props = __rest(_a, ["className", "children", "weight"]);
-    var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.appearance, appearance = _d === void 0 ? 'solid' : _d;
+    var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, _c = _b.color, color = _c === void 0 ? MAIN_COLOR : _c, _d = _b.appearance, appearance = _d === void 0 ? 'solid' : _d;
     var buttonClassName = cn(alertDialogActionVariants({ radius: radius, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
     return (_jsx(AlertDialogPrimitive.Action, __assign({ ref: ref, className: buttonClassName }, props, { children: children })));
 });

package/dist/lib/components/AlertDialog/AlertDialogCancel.d.ts

@@ -6,8 +6,8 @@ export interface AlertDialogCancelProps extends VariantProps<typeof alertDialogC
     appearance?: IAppearance;
 }
 export declare const alertDialogCancelVariants: (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;
-    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/AlertDialog/AlertDialogCancel.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/AlertDialog/AlertDialogContent.d.ts

@@ -6,6 +6,6 @@ export interface AlertDialogContentProps extends VariantProps<typeof alertDialog
 export declare const alertDialogContentVariants: (props?: ({
     size?: "small" | "medium" | "large" | "x-large" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
-    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 AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/lib/components/AlertDialog/AlertDialogContent.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++) {
@@ -46,6 +47,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, props = __rest(_a, ["className", "children"]);
     var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size, scaling = _b.scaling;
-    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 }))] }));
+    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed inset-0 data-[state=open]:animate-overlayShow" }), _jsx(AlertDialogPrimitive.Content, __assign({ className: cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className), ref: ref }, props, { children: children }))] }));
 });
 AlertDialogContent.displayName = 'AlertDialog.Content';

package/dist/lib/components/AlertDialog/AlertDialogDescription.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/AlertDialog/AlertDialogRoot.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,12 +22,14 @@ 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 AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 var AlertDialogContext = createContext({
     size: 'medium',
     scaling: '100%',
-    color: 'red',
+    color: MAIN_COLOR,
     radius: 'medium',
     appearance: 'solid',
 });
@@ -35,12 +38,13 @@ export var useAlertDialogContext = function () {
 };
 export var AlertDialogRoot = forwardRef(function (_a, ref) {
     var children = _a.children, radius = _a.radius, size = _a.size, scaling = _a.scaling, color = _a.color, props = __rest(_a, ["children", "radius", "size", "scaling", "color"]);
-    var contextValue = useMemo(function () { return ({
-        radius: radius,
+    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,
-        scaling: scaling,
-        color: color,
-    }); }, [radius, size, scaling, color]);
+    };
     return (_jsx(AlertDialogContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, children: _jsx(AlertDialogPrimitive.Root, __assign({}, props, { children: children })) }) }));
 });
 AlertDialogRoot.displayName = 'AlertDialog.Root';

package/dist/lib/components/AlertDialog/AlertDialogTitle.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/AlertDialog/AlertDialogTrigger.d.ts

@@ -7,10 +7,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     appearance?: IAppearance;
 }
 declare const buttonVariants: (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;
-    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/AlertDialog/AlertDialogTrigger.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++) {
@@ -26,6 +27,8 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { radiusVariants, scalingVariants, weightVariants, primaryColorStyle, appearanceStyle, } from '../../../lib/constants';
+import { MAIN_COLOR } from '../../../lib/color/constants';
+import { useTheme } from '../../../lib/theme';
 var buttonVariants = cva("inline-flex items-center transition-colors focus:outline-none hover:cursor-pointer\n  disabled:cursor-not-allowed disabled:bg-slate-3 disabled:text-slate-8", {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -43,13 +46,22 @@ var buttonVariants = cva("inline-flex items-center transition-colors focus:outli
         radius: 'large',
         scaling: '100%',
         weight: 'medium',
-        color: 'red',
+        color: MAIN_COLOR,
         size: 'medium',
     },
 });
 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);
+    var _b;
+    var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, weight = _a.weight, color = _a.color, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "weight", "color", "appearance"]);
+    var theme = useTheme().theme;
+    var buttonStyle = {
+        radius: radius !== null && radius !== void 0 ? radius : theme.themeRadius,
+        scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
+        weight: weight !== null && weight !== void 0 ? weight : theme.themeWeight,
+        color: (_b = color !== null && color !== void 0 ? color : theme.themeColor) !== null && _b !== void 0 ? _b : MAIN_COLOR,
+        size: size,
+    };
+    var buttonClassName = cn(buttonVariants(buttonStyle), appearanceStyle(appearance, buttonStyle.color), className);
     return (_jsx(AlertDialogPrimitive.Trigger, __assign({ asChild: true, ref: ref, className: buttonClassName }, props, { children: children })));
 });
 AlertDialogTrigger.displayName = 'AlertDialog.Trigger';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const AlertDialog: {
     Root: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogProps & import("./AlertDialogRoot").AlertDialogProps & import("react").RefAttributes<never>>;
     Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("./AlertDialogTrigger").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -12,6 +12,6 @@ var AlertDialog = {
     Title: Title,
     Description: Description,
     Cancel: Cancel,
-    Action: Action
+    Action: Action,
 };
 export default AlertDialog;

package/dist/lib/components/AspectRatio/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++) {
@@ -26,6 +27,7 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { scalingVariants } from '../../../lib/constants';
+import { useTheme } from '../../../lib/theme';
 export var aspectRatioVariants = cva('', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -36,7 +38,8 @@ 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 (_jsx(AspectRatioPrimitive.Root, __assign({ ratio: ratio, ref: ref }, props, { className: cn(aspectRatioVariants({ scaling: scaling }), className), children: children })));
+    var theme = useTheme().theme;
+    return (_jsx(AspectRatioPrimitive.Root, __assign({ ratio: ratio, ref: ref }, props, { className: cn(aspectRatioVariants({ scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling }), className), children: children })));
 });
 AspectRatio.displayName = 'AspectRatio';
 export default AspectRatio;

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

@@ -12,7 +12,7 @@ export interface AvatarProps extends VariantProps<typeof AvatarVariants> {
     delayMs?: number;
 }
 declare const AvatarVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | null | undefined;
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
     color?: string | null | undefined;

package/dist/lib/components/Avatar/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++) {
@@ -26,6 +27,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { appearanceStyle, primaryColorStyle, radiusVariants, scalingVariants } from '../../../lib/constants';
+import { useTheme } from '../../../lib/theme/ThemeProvider';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 var AvatarVariants = cva('font-medium', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -45,14 +48,20 @@ var AvatarVariants = cva('font-medium', {
     },
     defaultVariants: {
         radius: 'full',
-        color: 'red',
+        color: MAIN_COLOR,
         size: '3',
     },
 });
 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, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, title = _a.title, _d = _a.delayMs, delayMs = _d === void 0 ? 300 : _d, props = __rest(_a, ["className", "fallbackClassName", "radius", "scaling", "size", "fallbackText", "imagePath", "alt", "appearance", "color", "ariaLabel", "ariaLabelledby", "title", "delayMs"]);
+    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, color = _a.color, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, title = _a.title, _c = _a.delayMs, delayMs = _c === void 0 ? 300 : _c, props = __rest(_a, ["className", "fallbackClassName", "radius", "scaling", "size", "fallbackText", "imagePath", "alt", "appearance", "color", "ariaLabel", "ariaLabelledby", "title", "delayMs"]);
+    var theme = useTheme().theme;
+    var avatarStyle = {
+        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,
+    };
     var imgAltText = alt || ariaLabel || fallbackText || 'Avatar Image';
-    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, role: "img", "aria-label": ariaLabel || imgAltText, "aria-labelledby": ariaLabelledby, title: title || imgAltText, tabIndex: 0, children: [_jsx(AvatarPrimitive.Image, { className: "h-full w-full border-none object-cover", src: imagePath, alt: imgAltText, title: title || imgAltText }), _jsx(AvatarPrimitive.Fallback, { className: cn("leading-1 flex h-full w-full items-center justify-center", className), delayMs: delayMs, "aria-hidden": "true", children: fallbackText })] })));
+    return (_jsxs(AvatarPrimitive.Root, __assign({ className: cn("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants(avatarStyle), appearanceStyle(appearance, avatarStyle.color, false), className) }, props, { ref: ref, role: "img", "aria-label": ariaLabel || imgAltText, "aria-labelledby": ariaLabelledby, title: title || imgAltText, tabIndex: 0, children: [_jsx(AvatarPrimitive.Image, { className: "h-full w-full border-none object-cover", src: imagePath, alt: imgAltText, title: title || imgAltText }), _jsx(AvatarPrimitive.Fallback, { className: cn("leading-1 flex h-full w-full items-center justify-center", className), delayMs: delayMs, "aria-hidden": "true", children: fallbackText })] })));
 });
 Avatar.displayName = 'Avatar';
 export default Avatar;

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

@@ -8,10 +8,10 @@ export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps
     weight?: IWeight;
 }
 declare const BadgeVariants: (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;
-    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & BadgeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/lib/components/Badge/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++) {
@@ -25,6 +26,8 @@ import { forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
 import { appearanceStyle, primaryColorStyle, radiusVariants, scalingVariants, weightVariants, } from '../../../lib/constants';
+import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 var BadgeVariants = cva('inline-flex items-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 w-fit', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -42,12 +45,20 @@ var BadgeVariants = cva('inline-flex items-center transition-colors focus:outlin
         size: 'medium',
         scaling: '100%',
         weight: 'medium',
-        color: 'red',
+        color: MAIN_COLOR,
     },
 });
 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);
+    var className = _a.className, children = _a.children, radius = _a.radius, scaling = _a.scaling, weight = _a.weight, size = _a.size, color = _a.color, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, props = __rest(_a, ["className", "children", "radius", "scaling", "weight", "size", "color", "appearance"]);
+    var theme = useTheme().theme;
+    var badgeStyle = {
+        radius: radius !== null && radius !== void 0 ? radius : theme.themeRadius,
+        scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
+        weight: weight !== null && weight !== void 0 ? weight : theme.themeWeight,
+        color: color !== null && color !== void 0 ? color : theme.themeColor,
+        size: size,
+    };
+    var badgeClassName = cn(BadgeVariants(badgeStyle), appearanceStyle(appearance, badgeStyle.color, false), className);
     return (_jsx("div", __assign({ ref: ref, className: badgeClassName }, props, { children: children })));
 });
 Badge.displayName = 'Badge';