@lotte-innovate/ui-component-test 0.1.74 → 0.1.76

package/dist/lib/types.d.ts

@@ -1,3 +1,5 @@
+import { ComponentProps } from 'react';
+import { Theme } from '@radix-ui/themes';
 export type IRadius = 'none' | 'small' | 'medium' | 'large' | 'full';
 export type IScaling = '90%' | '95%' | '100%' | '105%' | '110%';
 export type IWeight = 'regular' | 'medium' | 'semibold' | 'bold';
@@ -79,3 +81,9 @@ export type IChartDataLabels = {
     formatter?: (x: number) => number;
     padding?: number;
 };
+export type IExtendedAccentColor = ComponentProps<typeof Theme>['accentColor'] & IColor;
+export interface INavItem {
+    title: string;
+    href: string;
+    disabled?: boolean;
+}

package/dist/lib/utils/classPrefixes.d.ts

@@ -0,0 +1,3 @@
+export declare const classPrefixesByScale: {
+    [key: string]: number[];
+};

package/dist/lib/utils/classPrefixes.js

@@ -0,0 +1,26 @@
+export var classPrefixesByScale = {
+    fill: [9, 12],
+    border: [4, 6, 7, 8, 9],
+    bg: [1, 2, 3, 4, 5, 6, 7, 9, 10, 12],
+    text: [1, 8, 9, 10, 11, 12],
+    'hover:bg': [2, 3, 4, 6, 9, 10],
+    'hover:border': [4, 6, 7, 8, 9],
+    'hover:text': [1, 10, 11, 12],
+    'hover:fill': [1, 12],
+    'active:bg': [3, 4, 5, 6, 8, 9, 10],
+    'active:border': [6, 8, 9],
+    'active:text': [10, 11, 12],
+    'data-[state=on]:bg': [3, 4, 5, 9, 10],
+    'data-[state=on]:border': [8, 9],
+    'data-[state=on]:text': [1, 11],
+    'data-[state=on]:hover:bg': [2, 3, 4, 10],
+    'data-[state=on]:hover:border': [8, 9],
+    'data-[state=on]:hover:text': [1, 11],
+    'data-[state=open]:bg': [5],
+    'data-[state=checked]:bg': [2, 3, 5, 6, 7, 9, 10],
+    'data-[state=checked]:border': [6],
+    'data-[state=checked]:text': [1, 8, 11],
+    'data-[state=unchecked]:bg': [2, 3, 5, 6, 7],
+    'data-[state=unchecked]:border': [4, 6, 7, 8, 9],
+    'data-[state=unchecked]:text': [8],
+};

package/dist/lib/utils/useDarkMode.js

@@ -1,3 +1,4 @@
+'use client';
 import { slateA, slateDarkA } from '../../lib/color/alpha';
 import { useEffect, useState } from 'react';
 export var useDarkMode = function (isRAxes) {

package/dist/tailwind.config.js

@@ -22,51 +22,28 @@ import * as lightColors from './lib/color/light';
 import * as darkColors from './lib/color/dark';
 import * as alphaColors from './lib/color/alpha';
 import { colorOptions, alphaColorOptions, darkColorOptions } from './lib/color/constants';
+import { classPrefixesByScale } from './lib/utils/classPrefixes';
 var classes = [];
-var darkClasses = [];
-var colorScale = Array.from({ length: 12 }, function (_, i) { return (i + 1).toString(); });
 var allColorOptions = [colorOptions, alphaColorOptions];
-var generateClasses = function (colorList, colorScale) {
-    var classPrefixes = ['fill', 'border', 'bg', 'text'];
+var generateClasses = function (colorList, mode) {
     return colorList.flatMap(function (color) {
-        return colorScale.flatMap(function (scale) { return classPrefixes.map(function (prefix) { return "".concat(prefix, "-").concat(color, "-").concat(scale); }); });
-    });
-};
-var generateDarkClasses = function (colorList, colorScale) {
-    var classPrefixes = [
-        'dark:fill',
-        'dark:border',
-        'dark:bg',
-        'dark:text',
-        'dark:hover:bg',
-        'dark:hover:border',
-        'dark:hover:text',
-        'dark:active:bg',
-        'dark:active:border',
-        'dark:active:text',
-        'dark:data-[state=on]:bg',
-        'dark:data-[state=open]:bg',
-        'dark:data-[state=on]:text',
-        'dark:data-[state=on]:hover:bg',
-        'dark:data-[state=on]:hover:border',
-        'dark:data-[state=on]:hover:text',
-    ];
-    return colorList.flatMap(function (color) {
-        return colorScale.flatMap(function (scale) { return classPrefixes.map(function (prefix) { return "".concat(prefix, "-").concat(color, "-").concat(scale); }); });
+        return Object.entries(classPrefixesByScale).flatMap(function (_a) {
+            var key = _a[0], values = _a[1];
+            return values.map(function (value) {
+                return mode ? "".concat(mode).concat(key, "-").concat(color, "-").concat(value) : "".concat(key, "-").concat(color, "-").concat(value);
+            });
+        });
     });
 };
 allColorOptions.forEach(function (options) {
-    classes = classes.concat(generateClasses(options, colorScale));
+    classes = classes.concat(generateClasses(options));
+});
+[darkColorOptions].forEach(function (options) {
+    classes = classes.concat(generateClasses(options, 'dark:'));
 });
-darkClasses.push.apply(darkClasses, generateDarkClasses(darkColorOptions, colorScale));
 var config = {
-    content: [
-        './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
-        './lib/**/*.{js,ts,jsx,tsx,mdx,zip}',
-        './src/stories/**/*.{js,ts,jsx,tsx,mdx,zip}',
-        './src/**/*.{js,ts,jsx,tsx,mdx,zip}',
-    ],
-    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], classes, true), classes.map(function (cls) { return "hover:".concat(cls); }), true), classes.map(function (cls) { return "active:".concat(cls); }), true), classes.map(function (cls) { return "before:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=checked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=unchecked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=on]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=open]:".concat(cls); }), true), darkClasses, true),
+    content: ['./src/**/*.{js,ts,jsx,tsx,mdx,zip}'],
+    safelist: __spreadArray([], classes, true),
     theme: {
         extend: {
             fontFamily: {