@lotte-innovate/ui-component-test 0.0.26 → 0.0.29

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

@@ -10,7 +10,7 @@ export interface TextFieldProps extends VariantProps<typeof textFieldVariants> {
     scaling?: IScaling;
 }
 declare const textFieldVariants: (props?: ({
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldTheme.RootProps & React.RefAttributes<HTMLInputElement>, "ref"> & TextFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/lib/components/Toast/ToastActionButton.d.ts

@@ -7,7 +7,7 @@ export interface ToastActionButtonProps extends VariantProps<typeof toastActionB
     appearance?: IAppearance;
 }
 export declare const toastActionButtonVariants: (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/Toast/index.d.ts

@@ -17,7 +17,7 @@ export interface ToastProps extends VariantProps<typeof toastVariants>, VariantP
     setOpenToast?: Dispatch<SetStateAction<boolean>>;
 }
 export declare const toastVariants: (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;
     color?: "danger" | "warning" | "success" | "information" | null | undefined;

package/dist/lib/components/Toggle/ToggleWithText.d.ts

@@ -8,7 +8,7 @@ export interface ToggleWithTextProps extends VariantProps<typeof toggleWithTextV
     size?: 'small' | 'medium' | 'large';
 }
 declare const toggleWithTextVariants: (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;

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

@@ -8,7 +8,7 @@ export interface ToggleProps extends VariantProps<typeof toggleVariants> {
     appearance?: IAppearance;
 }
 declare const toggleVariants: (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;

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

@@ -6,7 +6,7 @@ export interface ToggleSwitchProps extends VariantProps<typeof toggleSwitchVaria
 }
 declare const toggleSwitchVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
-    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 ToggleSwitch: React.ForwardRefExoticComponent<Omit<import("@radix-ui/themes").SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -11,9 +11,9 @@ export interface TooltipProps extends React.InputHTMLAttributes<HTMLInputElement
     side?: 'top' | 'right' | 'bottom' | 'left';
 }
 declare const tooltipVariants: (props?: ({
-    scaling?: number | typeof Symbol.iterator | typeof Symbol.unscopables | "concat" | "indexOf" | "lastIndexOf" | "slice" | "length" | "includes" | "at" | "toLocaleString" | "map" | "filter" | "fill" | "values" | "toString" | "pop" | "push" | "join" | "reverse" | "shift" | "sort" | "splice" | "unshift" | "every" | "some" | "forEach" | "reduce" | "reduceRight" | "find" | "findIndex" | "copyWithin" | "entries" | "keys" | "flatMap" | "flat" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
-    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    scaling?: number | typeof Symbol.iterator | typeof Symbol.unscopables | "length" | "toString" | "toLocaleString" | "pop" | "push" | "concat" | "join" | "reverse" | "shift" | "slice" | "sort" | "splice" | "unshift" | "indexOf" | "lastIndexOf" | "every" | "some" | "forEach" | "map" | "filter" | "reduce" | "reduceRight" | "find" | "findIndex" | "fill" | "copyWithin" | "entries" | "keys" | "values" | "includes" | "flatMap" | "flat" | "at" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const Tooltip: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipProps & TooltipProps & React.RefAttributes<never>>;

package/dist/lib/index.d.ts

@@ -1,2 +1,3 @@
+import './index.css';
 export * from './components';
 export * from './Typography';

package/dist/lib/index.js

@@ -1,2 +1,3 @@
+import './index.css';
 export * from './components';
 export * from './Typography';

package/dist/tailwind.config.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from 'tailwindcss';
+declare const config: Config;
+export default config;

package/dist/tailwind.config.js

@@ -0,0 +1,144 @@
+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 __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 * 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';
+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 = ['accent', 'fill', 'border', 'outline', 'bg', 'text'];
+    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:accent',
+        'dark:fill',
+        'dark:outline',
+        '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:before:checked:bg',
+        '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); }); });
+    });
+};
+allColorOptions.forEach(function (options) {
+    classes = classes.concat(generateClasses(options, colorScale));
+});
+darkClasses.push.apply(darkClasses, generateDarkClasses(darkColorOptions, colorScale));
+var config = {
+    content: [
+        './src/pages/**/*.{js,ts,jsx,tsx,mdx,zip}',
+        './src/components/**/*.{js,ts,jsx,tsx,mdx,zip}',
+        './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
+        './src/**/*.{js,ts,jsx,tsx,mdx,zip}',
+    ],
+    safelist: __spreadArray(__spreadArray(__spreadArray(__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=on]:hover:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=open]:".concat(cls); }), true), classes.map(function (cls) { return "after:checked:".concat(cls); }), true), classes.map(function (cls) { return "before:checked:".concat(cls); }), true), darkClasses, true),
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Noto Sans KR', 'sans-serif', 'Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial'],
+            },
+            backgroundImage: {
+                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+                'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+            },
+            colors: __assign(__assign(__assign({ danger: '#C40006', warning: '#AB6400', success: '#00713F', information: '#00749E' }, formatColors(lightColors)), formatColors(darkColors)), formatColors(alphaColors)),
+            // radix tailwind
+            keyframes: {
+                overlayShow: {
+                    from: { opacity: '0' },
+                    to: { opacity: '1' },
+                },
+                contentShow: {
+                    from: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
+                    to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
+                },
+                slideDown: {
+                    from: { height: '0px' },
+                    to: { height: 'var(--radix-accordion-content-height)' },
+                },
+                slideUp: {
+                    from: { height: 'var(--radix-accordion-content-height)' },
+                    to: { height: '0px' },
+                },
+            },
+            animation: {
+                overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+                contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+                slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+                slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+            },
+            boxShadow: {
+                'button-classic': '0px 0px 0px 1px #00002D17 inset, 0px -2px 1px 0px #0000330F inset, 0px 4px 2px -2px #FFFFFFB2 inset, 0px 2px 1px -1px #FFFFFFB2 inset',
+                'checkbox-classic': '0px 0px 0px 1px #00002D17 inset, 0px -2px 1px 0px #0000330F inset, 0px 4px 2px -2px #FFFFFF66 inset, 0px 2px 1px -1px #FFFFFF66 inset',
+                'button-dark-classic': '0px 0px 0px 1px #414142 inset, 0px -2px 1px 0px #414142 inset, 0px 4px 2px -2px #414142 inset, 0px 2px 1px -1px #414142 inset',
+                'card-classic': '0px 0px 0px 0.5px #0000000D, 0px 1px 4px 0px #00002D17, 0px 2px 1px -1px #0000000D, 0px 1px 3px 0px #0000000D',
+                'card-dark-classic': '0px 0px 0px 0.5px #414142, 0px 1px 4px 0px #414142, 0px 2px 1px -1px #414142, 0px 1px 3px 0px #414142',
+                'segmented-control-dark-classic': '0px 0px 0px 0.5px #0000000D, 0px 1px 4px 0px #363636, 0px 2px 1px -1px #0000000D, 0px 1px 3px 0px #0000000D',
+            },
+        },
+    },
+    plugins: [
+        function (_a) {
+            var addVariant = _a.addVariant;
+            addVariant('data-placeholder', '&:where([data-placeholder])');
+        },
+    ],
+    darkMode: 'class',
+};
+/**
+ * tailwind 방식으로 변경
+ * ex) bg-yellow-3
+ */
+function formatColors(colors) {
+    var formatcolors = {};
+    for (var _i = 0, _a = Object.entries(colors); _i < _a.length; _i++) {
+        var _b = _a[_i], cn = _b[0], c = _b[1];
+        for (var _c = 0, _d = Object.entries(c); _c < _d.length; _c++) {
+            var _e = _d[_c], scale = _e[0], value = _e[1];
+            if (!scale) {
+                continue;
+            }
+            formatcolors["".concat(cn, "-").concat(scale)] = value;
+        }
+    }
+    return formatcolors;
+}
+export default config;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@lotte-innovate/ui-component-test",
   "description": "Lotte UI Library",
-  "version": "0.0.26",
+  "version": "0.0.29",
   "private": false,
   "type": "module",
   "files": [
     "dist/lib",
-    "tailwind.config.ts"
+    "dist/tailwind.config.d.ts",
+    "dist/tailwind.config.js"
   ],
   "main": "dist/lib/index.js",
   "module": "dist/lib/index.js",
@@ -36,6 +37,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build && tsc",
+    "build:css": "npx tailwindcss -i ./src/app/styles.css -o ./dist/lib/index.css",
+    "copy:css": "copyfiles -u 1 src/app/styles.css dist/lib",
     "prepare": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -110,6 +113,7 @@
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "chromatic": "^11.5.4",
+    "copyfiles": "^2.4.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.4",
     "eslint-plugin-storybook": "^0.8.0",