@mindlogic-ai/logician-ui 2.0.0 → 3.0.0-alpha.1

package/dist/components/Select/Select.js

@@ -4,104 +4,120 @@
 var jsxRuntime = require('react/jsx-runtime');
 var ReactSelect = require('react-select');
 var react = require('@chakra-ui/react');
-var resolveStyle = require('./_utils/resolveStyle.js');
-require('./MenuList/MenuList.js');
-var VirtualizedMenuList = require('./MenuList/VirtualizedMenuList.js');
-var VirtualizedMenuListContext = require('./MenuList/VirtualizedMenuListContext.js');
 var Select_styles = require('./Select.styles.js');
 
-const Select = ({ styles, variant = 'default', optionHeight = 35, onMenuScrollToBottom, 'data-testid': dataTestId, ...rest }) => {
-    const theme = react.useTheme();
-    const CustomOption = (props) => {
-        const optionValue = props.data?.value || props.label || 'option';
-        return (jsxRuntime.jsx(react.Box, { "data-testid": dataTestId ? `${dataTestId}-option-${optionValue}` : undefined, children: jsxRuntime.jsx(ReactSelect.components.Option, { ...props }) }));
+const Select = ({ variant = 'default', invalid = false, styles, ...rest }) => {
+    const [primaryColor, primaryLightest, primaryDark, dangerColor, gray50, gray300, gray400, gray500, gray600, gray1200,] = react.useToken('colors', [
+        'primary.main',
+        'primary.lightest',
+        'primary.dark',
+        'danger.main',
+        'gray.50',
+        'gray.300',
+        'gray.400',
+        'gray.500',
+        'gray.600',
+        'gray.1200',
+    ]);
+    const colors = {
+        primaryLightest,
+        primaryDark,
+        dangerColor,
+        gray50,
+        gray300,
+        gray500,
+        gray600,
+        gray1200,
     };
-    // 커스텀 Control 컴포넌트
-    const CustomControl = (props) => {
-        return (jsxRuntime.jsx(react.Box, { "data-testid": dataTestId ? `${dataTestId}-control` : undefined, children: jsxRuntime.jsx(ReactSelect.components.Control, { ...props }) }));
-    };
-    return (jsxRuntime.jsx(VirtualizedMenuListContext.VirtualizedMenuListProvider, { children: jsxRuntime.jsx(react.Box, { "data-testid": dataTestId, children: jsxRuntime.jsx(ReactSelect, { closeMenuOnSelect: true, closeMenuOnScroll: true, isSearchable: false, tabIndex: 0, classNamePrefix: "react-select", components: {
-                    MenuList: (props) => (jsxRuntime.jsx(VirtualizedMenuList.VirtualizedMenuList, { ...props, onMenuScrollToBottom: onMenuScrollToBottom, optionHeight: optionHeight })),
-                    Option: CustomOption,
-                    Control: CustomControl,
-                    ...rest.components,
-                }, styles: {
-                    container: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            height: '100%',
-                        }, styles?.container, state),
-                    }),
-                    placeholder: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            ...Select_styles.placeholderStyles,
-                        }, styles?.placeholder, state),
-                    }),
-                    valueContainer: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            textAlign: 'left',
-                        }, styles?.valueContainer, state),
-                    }),
-                    singleValue: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            margin: 0,
-                            color: 'gray.1000',
-                        }, styles?.singleValue, state),
-                    }),
-                    menu: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            ...Select_styles.menuStyles,
-                        }, styles?.menu, state),
-                    }),
-                    menuList: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            padding: `0px ${theme.space[1]}`,
-                            // Important for the virtualized list - DON'T override overflow
-                            // as we need the default 'auto' from react-select for scrolling to work
-                        }, styles?.menuList, state),
-                    }),
-                    option: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            textAlign: 'left',
-                            padding: `${theme.space[0.5]} ${theme.space[1]}`,
-                            ...Select_styles.optionStyles(state),
-                        }, styles?.option, state),
-                    }),
-                    menuPortal: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            zIndex: 9999,
-                        }, styles?.menuPortal, state),
-                    }),
-                    control: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            ...Select_styles.controlStyles,
-                            ...Select_styles.getControlVariantStyles(state, variant),
-                            ...(state.isDisabled && {
-                                bg: 'gray.50',
-                            }),
-                        }, styles?.control, state),
-                    }),
-                    indicatorSeparator: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            display: 'none',
-                        }, styles?.indicatorSeparator, state),
-                    }),
-                    dropdownIndicator: (base, state) => ({
-                        ...resolveStyle.resolveStyle({
-                            ...base,
-                            color: 'gray.800',
-                        }, styles?.dropdownIndicator, state),
-                    }),
-                }, ...rest }) }) }));
+    // invalid prop이 true이면 variant를 'danger'로 오버라이드
+    const effectiveVariant = invalid ? 'danger' : variant;
+    return (jsxRuntime.jsx(ReactSelect, { closeMenuOnSelect: true, closeMenuOnScroll: true, isSearchable: false, ...rest, styles: {
+            container: (base, state) => ({
+                ...base,
+                width: '100%',
+                ...(styles?.container ? styles.container(base, state) : {}),
+            }),
+            control: (base, state) => ({
+                ...base,
+                ...Select_styles.getControlStyles(effectiveVariant, colors),
+                width: '100%',
+                border: `1px solid ${invalid ? dangerColor : state.isFocused ? primaryColor : gray300}`,
+                boxShadow: 'none',
+                '&:hover': {
+                    borderColor: invalid
+                        ? dangerColor
+                        : state.isFocused
+                            ? primaryColor
+                            : gray400,
+                },
+                ...(styles?.control ? styles.control(base, state) : {}),
+            }),
+            placeholder: (base, state) => ({
+                ...base,
+                ...Select_styles.getPlaceholderStyles(colors),
+                ...(styles?.placeholder ? styles.placeholder(base, state) : {}),
+            }),
+            menu: (base, state) => ({
+                ...base,
+                ...Select_styles.getMenuStyles(colors),
+                ...(styles?.menu ? styles.menu(base, state) : {}),
+            }),
+            menuList: (base, state) => ({
+                ...base,
+                padding: '0px 4px',
+                ...(styles?.menuList ? styles.menuList(base, state) : {}),
+            }),
+            option: (base, state) => ({
+                ...base,
+                ...Select_styles.getOptionStyles({
+                    isSelected: state.isSelected,
+                    isFocused: state.isFocused,
+                    isDisabled: state.isDisabled,
+                    colors,
+                }),
+                ...(styles?.option ? styles.option(base, state) : {}),
+            }),
+            singleValue: (base, state) => ({
+                ...base,
+                margin: 0,
+                color: gray1200,
+                ...(styles?.singleValue ? styles.singleValue(base, state) : {}),
+            }),
+            valueContainer: (base, state) => ({
+                ...base,
+                display: 'flex',
+                alignItems: 'center',
+                textAlign: 'left',
+                ...(styles?.valueContainer ? styles.valueContainer(base, state) : {}),
+            }),
+            indicatorSeparator: (base, state) => ({
+                ...base,
+                display: 'none',
+                ...(styles?.indicatorSeparator
+                    ? styles.indicatorSeparator(base, state)
+                    : {}),
+            }),
+            dropdownIndicator: (base, state) => ({
+                ...base,
+                color: gray1200,
+                ...(styles?.dropdownIndicator
+                    ? styles.dropdownIndicator(base, state)
+                    : {}),
+            }),
+            indicatorsContainer: (base, state) => ({
+                ...base,
+                display: 'flex',
+                alignItems: 'center',
+                ...(styles?.indicatorsContainer
+                    ? styles.indicatorsContainer(base, state)
+                    : {}),
+            }),
+            menuPortal: (base, state) => ({
+                ...base,
+                zIndex: 9999,
+                ...(styles?.menuPortal ? styles.menuPortal(base, state) : {}),
+            }),
+        } }));
 };
 
 exports.Select = Select;

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["useTheme","_jsx","Box","components","VirtualizedMenuListProvider","VirtualizedMenuList","resolveStyle","placeholderStyles","menuStyles","optionStyles","controlStyles","getControlVariantStyles"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["useToken","_jsx","getControlStyles","getPlaceholderStyles","getMenuStyles","getOptionStyles"],"mappings":"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"}

package/dist/components/Select/Select.mjs

@@ -1,105 +1,121 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import ReactSelect, { components } from 'react-select';
-import { useTheme, Box } from '@chakra-ui/react';
-import { resolveStyle } from './_utils/resolveStyle.mjs';
-import './MenuList/MenuList.mjs';
-import { VirtualizedMenuList } from './MenuList/VirtualizedMenuList.mjs';
-import { VirtualizedMenuListProvider } from './MenuList/VirtualizedMenuListContext.mjs';
-import { getControlVariantStyles, optionStyles, controlStyles, menuStyles, placeholderStyles } from './Select.styles.mjs';
+import ReactSelect from 'react-select';
+import { useToken } from '@chakra-ui/react';
+import { getOptionStyles, getMenuStyles, getPlaceholderStyles, getControlStyles } from './Select.styles.mjs';
 
-const Select = ({ styles, variant = 'default', optionHeight = 35, onMenuScrollToBottom, 'data-testid': dataTestId, ...rest }) => {
-    const theme = useTheme();
-    const CustomOption = (props) => {
-        const optionValue = props.data?.value || props.label || 'option';
-        return (jsx(Box, { "data-testid": dataTestId ? `${dataTestId}-option-${optionValue}` : undefined, children: jsx(components.Option, { ...props }) }));
+const Select = ({ variant = 'default', invalid = false, styles, ...rest }) => {
+    const [primaryColor, primaryLightest, primaryDark, dangerColor, gray50, gray300, gray400, gray500, gray600, gray1200,] = useToken('colors', [
+        'primary.main',
+        'primary.lightest',
+        'primary.dark',
+        'danger.main',
+        'gray.50',
+        'gray.300',
+        'gray.400',
+        'gray.500',
+        'gray.600',
+        'gray.1200',
+    ]);
+    const colors = {
+        primaryLightest,
+        primaryDark,
+        dangerColor,
+        gray50,
+        gray300,
+        gray500,
+        gray600,
+        gray1200,
     };
-    // 커스텀 Control 컴포넌트
-    const CustomControl = (props) => {
-        return (jsx(Box, { "data-testid": dataTestId ? `${dataTestId}-control` : undefined, children: jsx(components.Control, { ...props }) }));
-    };
-    return (jsx(VirtualizedMenuListProvider, { children: jsx(Box, { "data-testid": dataTestId, children: jsx(ReactSelect, { closeMenuOnSelect: true, closeMenuOnScroll: true, isSearchable: false, tabIndex: 0, classNamePrefix: "react-select", components: {
-                    MenuList: (props) => (jsx(VirtualizedMenuList, { ...props, onMenuScrollToBottom: onMenuScrollToBottom, optionHeight: optionHeight })),
-                    Option: CustomOption,
-                    Control: CustomControl,
-                    ...rest.components,
-                }, styles: {
-                    container: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            height: '100%',
-                        }, styles?.container, state),
-                    }),
-                    placeholder: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            ...placeholderStyles,
-                        }, styles?.placeholder, state),
-                    }),
-                    valueContainer: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            textAlign: 'left',
-                        }, styles?.valueContainer, state),
-                    }),
-                    singleValue: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            margin: 0,
-                            color: 'gray.1000',
-                        }, styles?.singleValue, state),
-                    }),
-                    menu: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            ...menuStyles,
-                        }, styles?.menu, state),
-                    }),
-                    menuList: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            padding: `0px ${theme.space[1]}`,
-                            // Important for the virtualized list - DON'T override overflow
-                            // as we need the default 'auto' from react-select for scrolling to work
-                        }, styles?.menuList, state),
-                    }),
-                    option: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            textAlign: 'left',
-                            padding: `${theme.space[0.5]} ${theme.space[1]}`,
-                            ...optionStyles(state),
-                        }, styles?.option, state),
-                    }),
-                    menuPortal: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            zIndex: 9999,
-                        }, styles?.menuPortal, state),
-                    }),
-                    control: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            ...controlStyles,
-                            ...getControlVariantStyles(state, variant),
-                            ...(state.isDisabled && {
-                                bg: 'gray.50',
-                            }),
-                        }, styles?.control, state),
-                    }),
-                    indicatorSeparator: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            display: 'none',
-                        }, styles?.indicatorSeparator, state),
-                    }),
-                    dropdownIndicator: (base, state) => ({
-                        ...resolveStyle({
-                            ...base,
-                            color: 'gray.800',
-                        }, styles?.dropdownIndicator, state),
-                    }),
-                }, ...rest }) }) }));
+    // invalid prop이 true이면 variant를 'danger'로 오버라이드
+    const effectiveVariant = invalid ? 'danger' : variant;
+    return (jsx(ReactSelect, { closeMenuOnSelect: true, closeMenuOnScroll: true, isSearchable: false, ...rest, styles: {
+            container: (base, state) => ({
+                ...base,
+                width: '100%',
+                ...(styles?.container ? styles.container(base, state) : {}),
+            }),
+            control: (base, state) => ({
+                ...base,
+                ...getControlStyles(effectiveVariant, colors),
+                width: '100%',
+                border: `1px solid ${invalid ? dangerColor : state.isFocused ? primaryColor : gray300}`,
+                boxShadow: 'none',
+                '&:hover': {
+                    borderColor: invalid
+                        ? dangerColor
+                        : state.isFocused
+                            ? primaryColor
+                            : gray400,
+                },
+                ...(styles?.control ? styles.control(base, state) : {}),
+            }),
+            placeholder: (base, state) => ({
+                ...base,
+                ...getPlaceholderStyles(colors),
+                ...(styles?.placeholder ? styles.placeholder(base, state) : {}),
+            }),
+            menu: (base, state) => ({
+                ...base,
+                ...getMenuStyles(colors),
+                ...(styles?.menu ? styles.menu(base, state) : {}),
+            }),
+            menuList: (base, state) => ({
+                ...base,
+                padding: '0px 4px',
+                ...(styles?.menuList ? styles.menuList(base, state) : {}),
+            }),
+            option: (base, state) => ({
+                ...base,
+                ...getOptionStyles({
+                    isSelected: state.isSelected,
+                    isFocused: state.isFocused,
+                    isDisabled: state.isDisabled,
+                    colors,
+                }),
+                ...(styles?.option ? styles.option(base, state) : {}),
+            }),
+            singleValue: (base, state) => ({
+                ...base,
+                margin: 0,
+                color: gray1200,
+                ...(styles?.singleValue ? styles.singleValue(base, state) : {}),
+            }),
+            valueContainer: (base, state) => ({
+                ...base,
+                display: 'flex',
+                alignItems: 'center',
+                textAlign: 'left',
+                ...(styles?.valueContainer ? styles.valueContainer(base, state) : {}),
+            }),
+            indicatorSeparator: (base, state) => ({
+                ...base,
+                display: 'none',
+                ...(styles?.indicatorSeparator
+                    ? styles.indicatorSeparator(base, state)
+                    : {}),
+            }),
+            dropdownIndicator: (base, state) => ({
+                ...base,
+                color: gray1200,
+                ...(styles?.dropdownIndicator
+                    ? styles.dropdownIndicator(base, state)
+                    : {}),
+            }),
+            indicatorsContainer: (base, state) => ({
+                ...base,
+                display: 'flex',
+                alignItems: 'center',
+                ...(styles?.indicatorsContainer
+                    ? styles.indicatorsContainer(base, state)
+                    : {}),
+            }),
+            menuPortal: (base, state) => ({
+                ...base,
+                zIndex: 9999,
+                ...(styles?.menuPortal ? styles.menuPortal(base, state) : {}),
+            }),
+        } }));
 };
 
 export { Select };

package/dist/components/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

package/dist/components/Select/Select.styles.d.ts

@@ -1,60 +1,60 @@
-import { SelectVariant } from './Select.types';
-export declare const placeholderStyles: {
-    color: any;
-    fontSize: any;
-    fontWeight: any;
+/**
+ * Select component styles (Chakra v3 compatible)
+ *
+ * Note: These functions accept resolved color values from useToken()
+ * since Chakra v3 doesn't export useTheme() hook.
+ */
+export type SelectColors = Record<string, string>;
+export declare const getPlaceholderStyles: (colors: SelectColors) => {
+    color: string;
+    fontSize: string;
+    fontWeight: string;
 };
-export declare const menuStyles: {
+export declare const getMenuStyles: (colors: SelectColors) => {
     width: string;
     minWidth: string;
-    backgroundColor: any;
-    borderRadius: any;
+    backgroundColor: string;
+    borderRadius: number;
     border: string;
     marginTop: number;
     boxShadow: string;
     zIndex: number;
 };
-export declare const optionStyles: ({ isDisabled, isFocused, isSelected, }: {
-    isDisabled: boolean;
-    isFocused: boolean;
+export declare const getOptionStyles: ({ isSelected, isFocused, isDisabled, colors, }: {
     isSelected: boolean;
+    isFocused: boolean;
+    isDisabled: boolean;
+    colors?: SelectColors;
 }) => {
     cursor: string;
-    height: any;
+    minHeight: number;
     margin: string;
-    borderRadius: any;
-    fontSize: any;
-    backgroundColor: any;
-    color: any;
-    fontWeight: any;
+    borderRadius: number;
+    fontSize: number;
+    backgroundColor: string;
+    color: string;
+    fontWeight: number;
     '&:hover': {
-        backgroundColor: any;
+        backgroundColor: string;
     };
 };
-export declare const controlStyles: {
-    borderRadius: any;
+export declare const getControlStyles: (variant: string, colors: SelectColors) => {
+    borderRadius: number;
     cursor: string;
-    maxWidth: string;
-    height: string;
-    color: any;
-    fontSize: any;
-    fontWeight: any;
+    minHeight: number;
+    fontSize: number;
+    fontWeight: number;
     paddingLeft: number;
     paddingRight: number;
-    border: string;
-    boxShadow: string;
-};
-export declare const getControlVariantStyles: (state: any, variant: SelectVariant) => {
-    border: string;
-    boxShadow: string;
-    fontWeight?: undefined;
-    '&:hover'?: undefined;
 } | {
-    fontWeight: any;
     border: string;
     boxShadow: string;
-    '&:hover': {
-        borderColor: any;
-    };
+    borderRadius: number;
+    cursor: string;
+    minHeight: number;
+    fontSize: number;
+    fontWeight: number;
+    paddingLeft: number;
+    paddingRight: number;
 };
 //# sourceMappingURL=Select.styles.d.ts.map

package/dist/components/Select/Select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,eAAO,MAAM,iBAAiB;;;;CAI7B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;CAStB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,wCAI1B;IACD,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB;;;;;;;;;;;;CAqBC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;CAYzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,OAAO,GAAG,EAAE,SAAS,aAAa;;;;;;;;;;;;CA+BzE,CAAC"}
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,eAAO,MAAM,oBAAoB,GAAI,QAAQ,YAAY;;;;CAIvD,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,QAAQ,YAAY;;;;;;;;;CAShD,CAAC;AAEH,eAAO,MAAM,eAAe,GAAI,gDAK7B;IACD,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;;;;;;;;;;;;CAiBC,CAAC;AAEH,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,EAAE,QAAQ,YAAY;;;;;;;;;;;;;;;;;;CAoBrE,CAAC"}