@lotte-innovate/ui-component-test 0.1.68 → 0.1.69-beta.1

package/dist/lib/components/DropdownMenu/DropdownMenuRadioItem.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++) {
@@ -31,7 +32,7 @@ import { DropdownMenuContext } from './DropdownMenuRoot';
 import { cn } from '../../../lib/utils/utils';
 export var DropdownMenuRadioItem = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, selectedValue = _a.selectedValue, props = __rest(_a, ["className", "children", "selectedValue"]);
-    var _b = useContext(DropdownMenuContext), 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 = useContext(DropdownMenuContext), radius = _b.radius, size = _b.size, color = _b.color, _c = _b.appearance, appearance = _c === void 0 ? 'solid' : _c;
     var itemClassName = cn(dropdownMenuItemVariants({
         radius: radius,
         size: size,

package/dist/lib/components/DropdownMenu/DropdownMenuRoot.js

@@ -25,20 +25,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var DropdownMenuContext = createContext({
     radius: 'medium',
     size: 'medium',
     scaling: '100%',
-    color: 'red',
+    color: MAIN_COLOR,
     appearance: 'solid',
 });
 export var DropdownMenuRoot = function (_a) {
     var children = _a.children, radius = _a.radius, size = _a.size, scaling = _a.scaling, color = _a.color, appearance = _a.appearance, props = __rest(_a, ["children", "radius", "size", "scaling", "color", "appearance"]);
     var theme = useTheme().theme;
     var contextValue = {
-        radius: theme.themeRadius || radius,
-        scaling: theme.themeScaling || scaling,
-        color: theme.themeColor || color,
+        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,
     };

package/dist/lib/components/DropdownMenu/DropdownMenuSubTrigger.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 { ChevronRightIcon } from '@radix-ui/react-icons';
 import { blackText, menuItemAppearanceStyle } from '../../../lib/constants';
 import { DropdownMenuContext } from './DropdownMenuRoot';
 import { cn } from '../../../lib/utils/utils';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var DropdownMenuSubTrigger = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    var _b = useContext(DropdownMenuContext), size = _b.size, radius = _b.radius, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.appearance, appearance = _d === void 0 ? 'solid' : _d;
+    var _b = useContext(DropdownMenuContext), size = _b.size, radius = _b.radius, _c = _b.color, color = _c === void 0 ? MAIN_COLOR : _c, _d = _b.appearance, appearance = _d === void 0 ? 'solid' : _d;
     var iconClassName = cn('group-data-[disabled]:text-slate-8 ', appearance === 'solid' && blackText.includes(color)
         ? 'hover:fill-slate-12 dark:hover:fill-slateDark-1'
         : "hover:fill-white dark:hover:fill-slateDark-12 ");

package/dist/lib/components/DropdownMenu/DropdownMenuTrigger.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/Footer/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+export interface FooterProps extends VariantProps<typeof FooterVariants> {
+}
+export declare const FooterVariants: (props?: ({
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    color?: string | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & FooterProps & React.RefAttributes<HTMLElement>>;
+export default Footer;

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

@@ -0,0 +1,50 @@
+'use client';
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { scalingVariants, textColorStyle } from '../../../lib/constants';
+import { cn } from '../../../lib/utils/utils';
+export var FooterVariants = cva("py-3 px-8 container flex flex-col items-center justify-between gap-4 ", {
+    variants: {
+        scaling: __assign({}, scalingVariants),
+        size: {
+            small: 'text-xs',
+            medium: 'text-sm',
+            large: 'text-base',
+        },
+        color: textColorStyle(),
+    },
+    defaultVariants: {
+        scaling: '100%',
+        size: 'medium',
+        color: 'black',
+    },
+});
+export var Footer = forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, scaling = _a.scaling, size = _a.size, color = _a.color, props = __rest(_a, ["className", "children", "scaling", "size", "color"]);
+    return (_jsx("footer", __assign({ ref: ref }, props, { children: _jsx("div", { className: cn(FooterVariants({ scaling: scaling, size: size, color: color }), className), children: _jsx("p", { className: "text-center leading-loose", children: children }) }) })));
+});
+Footer.displayName = 'Footer';
+export default Footer;

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

@@ -0,0 +1,5 @@
+import './index.css';
+declare function Grid({ table }: {
+    table: any;
+}): import("react/jsx-runtime").JSX.Element;
+export { Grid };

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

@@ -0,0 +1,52 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import './index.css';
+import Table from '../Table';
+import { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, } from '@radix-ui/react-icons';
+import IconButton from '../IconButton';
+import Select from '../Select';
+import TextField from '../TextField';
+function Grid(_a) {
+    var table = _a.table;
+    return (_jsx("div", { className: "p-2", children: _jsx("div", { style: { direction: table.options.columnResizeDirection }, children: _jsxs("div", { className: "overflow-x-auto", children: [_jsxs(Table.Root, { style: {
+                            width: table.getCenterTotalSize(),
+                        }, children: [_jsx(Table.Header, { children: table
+                                    .getHeaderGroups()
+                                    .map(function (headerGroup) {
+                                    return (_jsx(Table.Row, { children: headerGroup.headers.map(function (header) {
+                                            var _a, _b;
+                                            return (_jsxs(Table.ColumnHeaderCell, { colSpan: header.colSpan,
+                                                style: {
+                                                    width: header.getSize(),
+                                                }, children: [header.isPlaceholder ? null : (_jsxs("div", { className: header.column.getCanSort() ? 'cursor-pointer select-none' : '', onClick: header.column.getToggleSortingHandler(), title: header.column.getCanSort()
+                                                            ? header.column.getNextSortingOrder() === 'asc'
+                                                                ? 'Sort ascending'
+                                                                : header.column.getNextSortingOrder() === 'desc'
+                                                                    ? 'Sort descending'
+                                                                    : 'Clear sort'
+                                                            : undefined, children: [flexRender(header.column.columnDef.header, header.getContext()), (_a = {
+                                                                asc: ' 🔼',
+                                                                desc: ' 🔽',
+                                                            }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : null] })), _jsx("div", { onDoubleClick: function () { return header.column.resetSize(); },
+                                                        onMouseDown: header.getResizeHandler(),
+                                                        onTouchStart: header.getResizeHandler(),
+                                                        className: "resizer ".concat(table.options.columnResizeDirection, " ").concat(header.column.getIsResizing() ? 'isResizing' : ''),
+                                                        style: {
+                                                            transform: header.column.getIsResizing()
+                                                                ? "translateX(".concat((table.options.columnResizeDirection === 'rtl' ? -1 : 1) *
+                                                                    ((_b = table.getState().columnSizingInfo.deltaOffset) !== null && _b !== void 0 ? _b : 0), "px)")
+                                                                : '',
+                                                        } })] }, header.id));
+                                        }) }, headerGroup.id));
+                                }) }), _jsx(Table.Body, { children: table
+                                    .getRowModel()
+                                    .rows.map(function (row) { return (_jsx(Table.Row, { children: row.getVisibleCells().map(function (cell) { return (_jsx(Table.Cell, { style: {
+                                            width: cell.column.getSize(),
+                                        }, className: "h-[30px]", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); }) })] }), _jsx("div", { className: "h-2" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconButton, { className: "rounded border p-1", onClick: function () { return table.firstPage(); }, disabled: !table.getCanPreviousPage(), children: _jsx(DoubleArrowLeftIcon, {}) }), _jsx(IconButton, { className: "rounded border p-1", onClick: function () { return table.previousPage(); }, disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, {}) }), _jsx(IconButton, { className: "rounded border p-1", onClick: function () { return table.nextPage(); }, disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { className: "rounded border p-1", onClick: function () { return table.lastPage(); }, disabled: !table.getCanNextPage(), children: _jsx(DoubleArrowRightIcon, {}) }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("div", { children: "Page" }), _jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", ' ', table.getPageCount().toLocaleString()] })] }), _jsxs("span", { className: "flex items-center gap-1", children: ["| Go to page:", _jsx(TextField.Root, { type: "number", min: "1", max: table.getPageCount(), defaultValue: table.getState().pagination.pageIndex + 1, onChange: function (e) {
+                                            var page = e.target.value ? Number(e.target.value) - 1 : 0;
+                                            table.setPageIndex(page);
+                                        }, className: "w-16 rounded border p-1" })] }), _jsxs(Select.Root, { value: String(table.getState().pagination.pageSize), defaultValue: String(table.getState().pagination.pageSize), onValueChange: function (e) {
+                                    table.setPageSize(Number(e));
+                                }, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: [10, 20, 30, 40, 50].map(function (pageSize) { return (_jsx(Select.Item, { value: String(pageSize), children: pageSize }, pageSize)); }) })] })] })] }) }) }));
+}
+export { Grid };

package/dist/lib/components/Grid/useGrid.d.ts

@@ -0,0 +1,3 @@
+export declare const useGrid: ({ ...props }: {
+    [x: string]: any;
+}) => import("@tanstack/react-table").Table<any>;

package/dist/lib/components/Grid/useGrid.js

@@ -0,0 +1,67 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createColumnHelper, getCoreRowModel, getExpandedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import React, { useRef } from 'react';
+import IconButton from '../IconButton';
+import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import Checkbox from '../Checkbox';
+function IndeterminateCheckbox(_a) {
+    var indeterminate = _a.indeterminate, checked = _a.checked, disabled = _a.disabled, onChange = _a.onChange;
+    var ref = useRef();
+    return (_jsx(Checkbox, { ref: ref, id: "checkbox", checked: checked, disabled: disabled, onCheckedChange: onChange, indeterminate: indeterminate }));
+}
+export var useGrid = function (_a) {
+    var _b;
+    var props = __rest(_a, []);
+    var _c = React.useState([]), sorting = _c[0], setSorting = _c[1];
+    var _d = React.useState({}), expanded = _d[0], setExpanded = _d[1];
+    var _e = React.useState({}), rowSelection = _e[0], setRowSelection = _e[1];
+    var columnHelper = createColumnHelper();
+    var columnsData = (_b = props === null || props === void 0 ? void 0 : props.columns) === null || _b === void 0 ? void 0 : _b.map(function (el) {
+        return columnHelper.accessor(el.id, __assign({}, el));
+    });
+    columnsData[0] = __assign(__assign({}, columnsData[0]), { cell: function (_a) {
+            var row = _a.row, getValue = _a.getValue;
+            return (_jsx("div", { className: "px-1", children: _jsxs("div", { className: "flex", children: [row.getCanExpand() ? (_jsx(IconButton, { onClick: row.getToggleExpandedHandler(), appearance: "ghost", children: row.getIsExpanded() ? _jsx(ChevronDownIcon, {}) : _jsx(ChevronRightIcon, {}) })) : (''), getValue()] }) }));
+        } });
+    if (props.enableRowSelection) {
+        columnsData === null || columnsData === void 0 ? void 0 : columnsData.unshift({
+            id: 'select',
+            header: function (_a) {
+                var table = _a.table;
+                return (_jsx("div", { className: "header-checkbox", children: _jsx(IndeterminateCheckbox, { checked: table.getIsAllRowsSelected() || table.getIsSomeRowsSelected(),
+                        indeterminate: table.getIsSomeRowsSelected(),
+                        onChange: table.toggleAllRowsSelected }) }));
+            },
+            cell: function (_a) {
+                var row = _a.row;
+                return (_jsx("div", { className: "px-1", children: _jsx(IndeterminateCheckbox, { checked: row.getIsSelected(),
+                        disabled: !row.getCanSelect(),
+                        indeterminate: row.getIsSomeSelected(),
+                        onChange: row.getToggleSelectedHandler() }) }));
+            },
+        });
+    }
+    return useReactTable(__assign(__assign({ state: { sorting: sorting, rowSelection: rowSelection, expanded: expanded } }, props), { data: props.data, columns: columnsData, getSubRows: function (row) { return row.subRows; }, enableRowSelection: props.enableRowSelection, onExpandedChange: setExpanded, onSortingChange: setSorting, onRowSelectionChange: setRowSelection, getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), getExpandedRowModel: getExpandedRowModel() }));
+};

package/dist/lib/components/HoverCard/HoverCardContent.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/HoverCard/HoverCardRoot.js

@@ -25,21 +25,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext } from 'react';
 import { HoverCard as HoverCardTheme, Theme } from '@radix-ui/themes';
 import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var HoverCardContext = createContext({
     radius: 'medium',
     size: 'medium',
     scaling: '100%',
     weight: 'medium',
-    color: 'red',
+    color: MAIN_COLOR,
 });
 export var HoverCardRoot = function (_a) {
     var children = _a.children, radius = _a.radius, size = _a.size, scaling = _a.scaling, weight = _a.weight, color = _a.color, props = __rest(_a, ["children", "radius", "size", "scaling", "weight", "color"]);
     var theme = useTheme().theme;
     var contextValue = {
-        radius: theme.themeRadius || radius,
-        scaling: theme.themeScaling || scaling,
-        color: theme.themeColor || color,
-        weight: theme.themeWeight || weight,
+        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,
+        weight: weight !== null && weight !== void 0 ? weight : theme.themeWeight,
         size: size,
     };
     return (_jsx(Theme, { children: _jsx(HoverCardContext.Provider, { value: contextValue, children: _jsx(HoverCardTheme.Root, __assign({}, props, { children: children })) }) }));

package/dist/lib/components/IconButton/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 { scalingVariants, radiusVariants, primaryColorStyle, appearanceStyle } from '../../../lib/constants';
 import { cn } from '../../../lib/utils/utils';
 import { useTheme } from '../../../lib/theme';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 var iconButtonVariants = cva("grid place-content-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,7 +45,7 @@ var iconButtonVariants = cva("grid place-content-center transition-colors focus:
         radius: 'medium',
         scaling: '100%',
         size: 'medium',
-        color: 'red',
+        color: MAIN_COLOR,
     },
 });
 var iconSize = {
@@ -54,14 +56,14 @@ var iconSize = {
     'x-large': 20,
 };
 export var IconButton = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, radius = _a.radius, _b = _a.size, size = _b === void 0 ? 'medium' : _b, scaling = _a.scaling, _c = _a.color, color = _c === void 0 ? 'red' : _c, _d = _a.appearance, appearance = _d === void 0 ? 'solid' : _d, props = __rest(_a, ["children", "className", "radius", "size", "scaling", "color", "appearance"]);
+    var children = _a.children, className = _a.className, radius = _a.radius, _b = _a.size, size = _b === void 0 ? 'medium' : _b, scaling = _a.scaling, color = _a.color, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["children", "className", "radius", "size", "scaling", "color", "appearance"]);
     var theme = useTheme().theme;
     var width = iconSize[size];
     var height = iconSize[size];
     var iconButtonStyle = {
-        radius: theme.themeRadius || radius,
-        scaling: theme.themeScaling || scaling,
-        color: theme.themeColor || color,
+        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,
     };
     var buttonClassName = cn(iconButtonVariants(iconButtonStyle), appearanceStyle(appearance, iconButtonStyle.color, true), className);

package/dist/lib/components/Inset/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++) {
@@ -47,8 +48,8 @@ export var Inset = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, props = __rest(_a, ["children", "className", "radius", "scaling"]);
     var theme = useTheme().theme;
     var insetStyle = {
-        radius: theme.themeRadius || radius,
-        scaling: theme.themeScaling || scaling,
+        radius: radius !== null && radius !== void 0 ? radius : theme.themeRadius,
+        scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
     };
     return (_jsx(Theme, { children: _jsx(InsetTheme, __assign({ ref: ref, className: cn(insetVariants(insetStyle), className) }, props, { children: children })) }));
 });

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

@@ -1,13 +1,14 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
 import React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { IColor } from '../../../lib/types';
-export interface LabelProps extends VariantProps<typeof labeVariants> {
+import { IColor, IScaling } from '../../../lib/types';
+export interface LabelProps extends VariantProps<typeof labelVariants> {
     defaultValue?: string;
     color?: IColor;
+    scaling?: IScaling;
     size?: 'small' | 'medium' | 'large';
 }
-declare const labeVariants: (props?: ({
+declare const labelVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
     weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;

package/dist/lib/components/Label/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++) {
@@ -27,7 +28,7 @@ import { cn } from '../../../lib/utils/utils';
 import { cva } from 'class-variance-authority';
 import { scalingVariants, textColorStyle, weightVariants } from '../../../lib/constants';
 import { useTheme } from '../../../lib/theme';
-var labeVariants = cva('text-slate-12', {
+var labelVariants = cva('flex text-slate-12', {
     variants: {
         scaling: __assign({}, scalingVariants),
         weight: __assign({}, weightVariants),
@@ -40,6 +41,7 @@ var labeVariants = cva('text-slate-12', {
     },
     defaultVariants: {
         scaling: '100%',
+        weight: 'regular',
         size: 'medium',
         color: 'black',
     },
@@ -48,14 +50,15 @@ export var Label = React.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, scaling = _a.scaling, weight = _a.weight, size = _a.size, color = _a.color, children = _a.children, rootProps = __rest(_a, ["className", "scaling", "weight", "size", "color", "children"]);
     var theme = useTheme().theme;
     var labelStyle = {
-        scaling: theme.themeScaling || scaling,
-        weight: theme.themeWeight || weight,
-        color: theme.themeColor || color,
+        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,
     };
-    if (labelStyle.weight === 'medium' || labelStyle.weight === 'semibold')
+    if (labelStyle.weight === 'medium' || labelStyle.weight === 'semibold') {
         labelStyle.weight = 'bold';
-    return (_jsx(LabelPrimitive.Root, __assign({}, rootProps, { ref: forwardedRef, className: cn('', labeVariants(labelStyle), className), children: children })));
+    }
+    return (_jsx(LabelPrimitive.Root, __assign({ ref: forwardedRef, className: cn(labelVariants(labelStyle), className) }, rootProps, { children: children })));
 });
 Label.displayName = 'Label';
 export default Label;

package/dist/lib/components/Menubar/MenubarCheckboxItem.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++) {
@@ -29,9 +30,10 @@ import { menubarItemVariants } from './MenubarItem';
 import { MenubarItemIndicator } from './MenubarItemIndicator';
 import { menuItemAppearanceStyle } from '../../../lib/constants';
 import { useMenubarContext } from './MenubarRoot';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var MenubarCheckboxItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, checked = _a.checked, props = __rest(_a, ["children", "className", "checked"]);
-    var _b = useMenubarContext(), radius = _b.radius, scaling = _b.scaling, size = _b.size, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
+    var _b = useMenubarContext(), radius = _b.radius, scaling = _b.scaling, size = _b.size, _c = _b.color, color = _c === void 0 ? MAIN_COLOR : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
     var itemClassName = cn(menubarItemVariants({ radius: radius, scaling: scaling, size: size }), 'pl-7', menuItemAppearanceStyle(itemAppearance, color), className);
     return (_jsxs(MenubarPrimitive.CheckboxItem, __assign({ ref: ref, className: itemClassName }, props, { children: [_jsx(MenubarItemIndicator, { forceMount: true, radius: 'medium', size: size, children: checked && _jsx(CheckIcon, {}) }), children] })));
 });

package/dist/lib/components/Menubar/MenubarContent.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/MenubarItem.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 { blackText, menuItemAppearanceStyle, radiusVariants, scalingVariants } from '../../../lib/constants';
 import { useMenubarContext } from './MenubarRoot';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var menubarItemVariants = cva("flex group relative leading-none select-none outline-none items-center justify-between font-normal\n    data-[disabled]:text-slate-8 data-[disabled]:cursor-not-allowed text-slate-12 dark:text-slateDark-12\n    data-[disabled]:hover:bg-transparent dark:data-[disabled]:text-slateDark-8 data-[disabled]:dark:hover:bg-transparent", {
     variants: {
         radius: __assign({}, radiusVariants['menu-item']),
@@ -44,7 +46,7 @@ export var menubarItemVariants = cva("flex group relative leading-none select-no
 });
 export var MenubarItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, shortcut = _a.shortcut, props = __rest(_a, ["children", "className", "shortcut"]);
-    var _b = useMenubarContext(), radius = _b.radius, scaling = _b.scaling, size = _b.size, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
+    var _b = useMenubarContext(), radius = _b.radius, scaling = _b.scaling, size = _b.size, _c = _b.color, color = _c === void 0 ? MAIN_COLOR : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
     var itemClassName = cn(menubarItemVariants({ radius: radius, scaling: scaling, size: size }), menuItemAppearanceStyle(itemAppearance, color), className);
     var shortcutClassName = "text-slateA-11 dark:text-slateDarkA-11 ".concat(itemAppearance === 'solid' && !blackText.includes(color)
         ? 'group-hover:text-white dark:group-hover:text-slateDark-1'

package/dist/lib/components/Menubar/MenubarItemIndicator.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/MenubarRadioItem.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++) {
@@ -30,9 +31,10 @@ import { menubarItemVariants } from './MenubarItem';
 import { MenubarItemIndicator } from './MenubarItemIndicator';
 import { RadioContext } from './MenubarRadioGroup';
 import { useMenubarContext } from './MenubarRoot';
+import { MAIN_COLOR } from '../../../lib/color/constants';
 export var MenubarRadioItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var _b = useMenubarContext(), radius = _b.radius, scaling = _b.scaling, size = _b.size, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
+    var _b = useMenubarContext(), radius = _b.radius, scaling = _b.scaling, size = _b.size, _c = _b.color, color = _c === void 0 ? MAIN_COLOR : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
     var itemClassName = cn(menubarItemVariants({ radius: radius, scaling: scaling, size: size }), 'pl-7', menuItemAppearanceStyle(itemAppearance, color), className);
     var radioGroup = useContext(RadioContext);
     return (_jsxs(MenubarPrimitive.RadioItem, __assign({ ref: ref, className: itemClassName }, props, { children: [_jsx(MenubarItemIndicator, { forceMount: true, radius: 'full', size: size, children: radioGroup.selectedValue === props.value && _jsx(DotFilledIcon, {}) }), children] })));

package/dist/lib/components/Menubar/MenubarRoot.js

@@ -28,6 +28,7 @@ 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']),
@@ -46,7 +47,7 @@ var MenubarContext = createContext({
     radius: 'medium',
     scaling: '100%',
     size: 'medium',
-    color: 'red',
+    color: MAIN_COLOR,
     appearance: 'ghost',
     itemAppearance: 'solid',
 });
@@ -54,12 +55,13 @@ 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 _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: theme.themeRadius || radius,
-        scaling: theme.themeScaling || scaling,
-        color: theme.themeColor || color,
+        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,

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.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/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.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 })));
 });