@mindlogic-ai/logician-ui 3.0.0-alpha.34 → 3.0.0-alpha.36

package/dist/components/Select/ComboboxField.js

@@ -0,0 +1,34 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@chakra-ui/react');
+var Combobox = require('./Combobox.js');
+
+/**
+ * Single-select combobox — a Select with a typeable, filterable input.
+ * The ergonomic counterpart to `Input` for searchable option lists; pass
+ * `options`, `value` and `onChange` and it renders the full composition
+ * internally.
+ *
+ * For grouped options or custom layouts, compose the `Combobox` primitives
+ * directly.
+ */
+function ComboboxField({ options, value, defaultValue, onChange, placeholder, label, size = 'md', invalid, disabled, readOnly, required, name, width = 'full', emptyText = 'No results found', }) {
+    const { contains } = react.useFilter({ sensitivity: 'base' });
+    const { collection, filter } = react.useListCollection({
+        initialItems: options,
+        filter: contains,
+        itemToValue: (item) => String(item.value),
+        itemToString: (item) => item.label,
+        isItemDisabled: (item) => Boolean(item.disabled),
+    });
+    const toKeys = (val) => val === null || val === undefined ? [] : [String(val)];
+    return (jsxRuntime.jsxs(Combobox.Combobox.Root, { collection: collection, size: size, width: width, invalid: invalid, disabled: disabled, readOnly: readOnly, required: required, name: name, value: value === undefined ? undefined : toKeys(value), defaultValue: defaultValue === undefined ? undefined : toKeys(defaultValue), onValueChange: (details) => {
+            const selected = details.items[0];
+            onChange?.(selected ? selected.value : null);
+        }, onInputValueChange: (details) => filter(details.inputValue), children: [label != null && jsxRuntime.jsx(Combobox.Combobox.Label, { children: label }), jsxRuntime.jsxs(Combobox.Combobox.Control, { children: [jsxRuntime.jsx(Combobox.Combobox.Input, { placeholder: placeholder }), jsxRuntime.jsxs(Combobox.Combobox.IndicatorGroup, { children: [jsxRuntime.jsx(Combobox.Combobox.ClearTrigger, {}), jsxRuntime.jsx(Combobox.Combobox.Trigger, {})] })] }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(Combobox.Combobox.Positioner, { children: jsxRuntime.jsxs(Combobox.Combobox.Content, { children: [jsxRuntime.jsx(Combobox.Combobox.Empty, { children: emptyText }), collection.items.map((item) => (jsxRuntime.jsxs(Combobox.Combobox.Item, { item: item, children: [jsxRuntime.jsx(Combobox.Combobox.ItemText, { children: item.label }), jsxRuntime.jsx(Combobox.Combobox.ItemIndicator, {})] }, String(item.value))))] }) }) })] }));
+}
+
+exports.ComboboxField = ComboboxField;
+//# sourceMappingURL=ComboboxField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxField.js","sources":["../../../src/components/Select/ComboboxField.tsx"],"sourcesContent":[null],"names":["useFilter","useListCollection","_jsxs","Combobox","_jsx","Portal"],"mappings":"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"}

package/dist/components/Select/ComboboxField.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useFilter, useListCollection, Portal } from '@chakra-ui/react';
+import { Combobox } from './Combobox.mjs';
+
+/**
+ * Single-select combobox — a Select with a typeable, filterable input.
+ * The ergonomic counterpart to `Input` for searchable option lists; pass
+ * `options`, `value` and `onChange` and it renders the full composition
+ * internally.
+ *
+ * For grouped options or custom layouts, compose the `Combobox` primitives
+ * directly.
+ */
+function ComboboxField({ options, value, defaultValue, onChange, placeholder, label, size = 'md', invalid, disabled, readOnly, required, name, width = 'full', emptyText = 'No results found', }) {
+    const { contains } = useFilter({ sensitivity: 'base' });
+    const { collection, filter } = useListCollection({
+        initialItems: options,
+        filter: contains,
+        itemToValue: (item) => String(item.value),
+        itemToString: (item) => item.label,
+        isItemDisabled: (item) => Boolean(item.disabled),
+    });
+    const toKeys = (val) => val === null || val === undefined ? [] : [String(val)];
+    return (jsxs(Combobox.Root, { collection: collection, size: size, width: width, invalid: invalid, disabled: disabled, readOnly: readOnly, required: required, name: name, value: value === undefined ? undefined : toKeys(value), defaultValue: defaultValue === undefined ? undefined : toKeys(defaultValue), onValueChange: (details) => {
+            const selected = details.items[0];
+            onChange?.(selected ? selected.value : null);
+        }, onInputValueChange: (details) => filter(details.inputValue), children: [label != null && jsx(Combobox.Label, { children: label }), jsxs(Combobox.Control, { children: [jsx(Combobox.Input, { placeholder: placeholder }), jsxs(Combobox.IndicatorGroup, { children: [jsx(Combobox.ClearTrigger, {}), jsx(Combobox.Trigger, {})] })] }), jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: emptyText }), collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, String(item.value))))] }) }) })] }));
+}
+
+export { ComboboxField };
+//# sourceMappingURL=ComboboxField.mjs.map

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

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

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

@@ -1,4 +1,30 @@
-import { GroupBase } from 'react-select';
-import { SelectProps } from './Select.types';
-export declare const Select: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ variant, invalid, styles, ...rest }: SelectProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+import { Select as ChakraSelect } from '@chakra-ui/react';
+/**
+ * Compound Select primitives — Chakra's `Select` namespace with the Logician
+ * design-system styling baked into the visual parts (`Trigger`, `Content`,
+ * `Item`, `Indicator`). Use these directly for full compositional control
+ * (multi-select, grouped options, custom layouts); use `SelectField` for the
+ * common single-select case.
+ */
+export declare const Select: {
+    Root: ChakraSelect.RootComponent;
+    PropsProvider: import("react").Provider<import("node_modules/@chakra-ui/react/dist/types/components/select/select").SelectRootBaseProps<any>>;
+    Context: <T extends unknown>(props: import("@ark-ui/react").SelectContextProps<T>) => import("react").ReactNode;
+    Label: import("react").ForwardRefExoticComponent<ChakraSelect.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<ChakraSelect.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ChakraSelect.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ValueText: import("react").ForwardRefExoticComponent<ChakraSelect.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    IndicatorGroup: import("react").ForwardRefExoticComponent<ChakraSelect.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<ChakraSelect.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<ChakraSelect.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    HiddenSelect: import("react").ForwardRefExoticComponent<import("@ark-ui/react").SelectHiddenSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<ChakraSelect.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<ChakraSelect.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<ChakraSelect.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<ChakraSelect.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<ChakraSelect.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<ChakraSelect.ItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<ChakraSelect.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemContext: (props: import("@ark-ui/react").SelectItemContextProps) => import("react").ReactNode;
+};
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,MAAM,GACjB,MAAM,EACN,OAAO,SAAS,OAAO,GAAG,KAAK,EAC/B,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,EACnD,uCAKC,WAAW,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,4CA4LrC,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAuD1D;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAoBlB,CAAC"}

package/dist/components/Select/Select.js

@@ -2,165 +2,50 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ReactSelect = require('react-select');
+var React = require('react');
 var react = require('@chakra-ui/react');
+var mergeCss = require('../../utils/mergeCss.js');
 var Select_styles = require('./Select.styles.js');
 
-const Select = ({ variant = 'default', invalid = false, styles, ...rest }) => {
-    const [primaryColor, primaryLighter, primaryLightest, primaryDark, dangerColor, gray50, gray300, gray400, gray500, gray600, gray1000, gray1200, gray1300,] = react.useToken('colors', [
-        'primary.main',
-        'primary.lighter',
-        'primary.extralight',
-        'primary.dark',
-        'danger.main',
-        'gray.50',
-        'gray.300',
-        'gray.400',
-        'gray.500',
-        'gray.600',
-        'gray.1000',
-        'gray.1200',
-        'gray.1300',
-    ]);
-    const colors = {
-        primaryLightest,
-        primaryDark,
-        dangerColor,
-        gray50,
-        gray300,
-        gray500,
-        gray1200};
-    // invalid prop이 true이면 variant를 'danger'로 오버라이드
-    const effectiveVariant = invalid ? 'danger' : variant;
-    return (jsxRuntime.jsx(ReactSelect, { closeMenuOnSelect: true, closeMenuOnScroll: true, isSearchable: false, ...rest, 
-        // 사용자 styles 콜백에 react-select 원본 base 대신 Logician 스타일이 적용된
-        // merged를 넘겨서, 사용자가 ...base로 spread해도 Logician 스타일이 유지되도록 함
-        styles: {
-            container: (base, state) => {
-                const merged = { ...base, width: '100%' };
-                return styles?.container ? styles.container(merged, state) : merged;
-            },
-            control: (base, state) => {
-                // Mirror Input.tsx: borderColor gray.400, _hover primary.lighter,
-                // _focus primary.main + 1px outline (Chakra Input recipe's
-                // `focusVisibleRing: "inside"`), _invalid danger.main,
-                // _disabled bg gray.50 / color gray.1000 / fontWeight semibold.
-                const focusOutlineColor = invalid ? dangerColor : primaryColor;
-                const merged = {
-                    ...base,
-                    ...Select_styles.getControlStyles(effectiveVariant, colors),
-                    width: '100%',
-                    border: `1px solid ${invalid ? dangerColor : state.isFocused ? primaryColor : gray400}`,
-                    boxShadow: 'none',
-                    outline: state.isFocused
-                        ? `1px solid ${focusOutlineColor}`
-                        : 'none',
-                    outlineOffset: 0,
-                    // react-select sets a 0.1s `transition: all` on the control,
-                    // which causes the border-color and outline (none -> solid +
-                    // transparent -> primary) to interpolate awkwardly — a brief
-                    // dark blink during focus. Disable to match Input, which
-                    // toggles its focus ring instantly via :focus-visible.
-                    transition: 'none',
-                    '&:hover': {
-                        borderColor: invalid
-                            ? dangerColor
-                            : state.isFocused
-                                ? primaryColor
-                                : primaryLighter,
-                    },
-                    ...(state.isDisabled && {
-                        backgroundColor: gray50,
-                        color: gray1000,
-                        fontWeight: 600,
-                        cursor: 'not-allowed',
-                    }),
-                };
-                return styles?.control ? styles.control(merged, state) : merged;
-            },
-            placeholder: (base, state) => {
-                const merged = { ...base, ...Select_styles.getPlaceholderStyles(colors) };
-                return styles?.placeholder
-                    ? styles.placeholder(merged, state)
-                    : merged;
-            },
-            menu: (base, state) => {
-                const merged = { ...base, ...Select_styles.getMenuStyles(colors) };
-                return styles?.menu ? styles.menu(merged, state) : merged;
-            },
-            menuList: (base, state) => {
-                const merged = { ...base, padding: '0px 4px' };
-                return styles?.menuList ? styles.menuList(merged, state) : merged;
-            },
-            option: (base, state) => {
-                const merged = {
-                    ...base,
-                    ...Select_styles.getOptionStyles({
-                        isSelected: state.isSelected,
-                        isDisabled: state.isDisabled,
-                        colors,
-                    }),
-                };
-                return styles?.option ? styles.option(merged, state) : merged;
-            },
-            singleValue: (base, state) => {
-                // Match Input text color (gray.1300, inherited from body in Input).
-                // When disabled, mirror Input's _disabled color (gray.1000).
-                const merged = {
-                    ...base,
-                    margin: 0,
-                    color: state.isDisabled ? gray1000 : gray1300,
-                };
-                return styles?.singleValue
-                    ? styles.singleValue(merged, state)
-                    : merged;
-            },
-            valueContainer: (base, state) => {
-                // Zero internal padding so the visible text starts after the
-                // control's own 12px paddingLeft (matches Input's `px: 3` =
-                // 12px). react-select's default valueContainer padding is
-                // `2px 8px`, which would otherwise stack on top.
-                const merged = {
-                    ...base,
-                    display: 'flex',
-                    alignItems: 'center',
-                    textAlign: 'left',
-                    padding: 0,
-                };
-                return styles?.valueContainer
-                    ? styles.valueContainer(merged, state)
-                    : merged;
-            },
-            indicatorSeparator: (base, state) => {
-                const merged = { ...base, display: 'none' };
-                return styles?.indicatorSeparator
-                    ? styles.indicatorSeparator(merged, state)
-                    : merged;
-            },
-            dropdownIndicator: (base, state) => {
-                // Lighter than the body text color so the chevron doesn't
-                // visually outweigh Input's right-side icons (which are
-                // typically outline-style and read as gray.600-ish).
-                const merged = { ...base, color: gray600 };
-                return styles?.dropdownIndicator
-                    ? styles.dropdownIndicator(merged, state)
-                    : merged;
-            },
-            indicatorsContainer: (base, state) => {
-                const merged = {
-                    ...base,
-                    display: 'flex',
-                    alignItems: 'center',
-                };
-                return styles?.indicatorsContainer
-                    ? styles.indicatorsContainer(merged, state)
-                    : merged;
-            },
-            menuPortal: (base, state) => {
-                const merged = { ...base, zIndex: 9999 };
-                return styles?.menuPortal ? styles.menuPortal(merged, state) : merged;
-            },
-        } }));
+const Trigger = React.forwardRef(function SelectTrigger({ css, ...props }, ref) {
+    return (jsxRuntime.jsx(react.Select.Trigger, { ref: ref, ...props, css: mergeCss.mergeCss(Select_styles.triggerStyles, css) }));
+});
+const Content = React.forwardRef(function SelectContent({ css, ...props }, ref) {
+    return (jsxRuntime.jsx(react.Select.Content, { ref: ref, ...props, css: mergeCss.mergeCss(Select_styles.contentStyles, css) }));
+});
+const Item = React.forwardRef(function SelectItem({ css, ...props }, ref) {
+    return (jsxRuntime.jsx(react.Select.Item, { ref: ref, ...props, css: mergeCss.mergeCss(Select_styles.itemStyles, css) }));
+});
+const Indicator = React.forwardRef(function SelectIndicator({ css, ...props }, ref) {
+    return (jsxRuntime.jsx(react.Select.Indicator, { ref: ref, ...props, css: mergeCss.mergeCss(Select_styles.indicatorStyles, css) }));
+});
+/**
+ * Compound Select primitives — Chakra's `Select` namespace with the Logician
+ * design-system styling baked into the visual parts (`Trigger`, `Content`,
+ * `Item`, `Indicator`). Use these directly for full compositional control
+ * (multi-select, grouped options, custom layouts); use `SelectField` for the
+ * common single-select case.
+ */
+const Select = {
+    Root: react.Select.Root,
+    PropsProvider: react.Select.PropsProvider,
+    Context: react.Select.Context,
+    Label: react.Select.Label,
+    Control: react.Select.Control,
+    Trigger,
+    ValueText: react.Select.ValueText,
+    IndicatorGroup: react.Select.IndicatorGroup,
+    Indicator,
+    ClearTrigger: react.Select.ClearTrigger,
+    HiddenSelect: react.Select.HiddenSelect,
+    Positioner: react.Select.Positioner,
+    Content,
+    ItemGroup: react.Select.ItemGroup,
+    ItemGroupLabel: react.Select.ItemGroupLabel,
+    Item,
+    ItemText: react.Select.ItemText,
+    ItemIndicator: react.Select.ItemIndicator,
+    ItemContext: react.Select.ItemContext,
 };
 
 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":["useToken","_jsx","getControlStyles","getPlaceholderStyles","getMenuStyles","getOptionStyles"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraSelect","mergeCss","triggerStyles","contentStyles","itemStyles","indicatorStyles"],"mappings":";;;;;;;;;AAYA,MAAM,OAAO,GAAGA,gBAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEC,eAACC,YAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACC,2BAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAGJ,gBAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEC,eAACC,YAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACE,2BAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAGL,gBAAU,CACrB,SAAS,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IACxC,QACEC,eAACC,YAAY,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAE,GAAG,EAAEC,iBAAQ,CAACG,wBAAU,EAAE,GAAG,CAAC,EAAA,CAAI;AAE9E,CAAC,CACF;AAED,MAAM,SAAS,GAAGN,gBAAU,CAC1B,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACEC,eAACC,YAAY,CAAC,SAAS,EAAA,EACrB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACI,6BAAe,EAAE,GAAG,CAAC,EAAA,CACnC;AAEN,CAAC,CACF;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG;IACpB,IAAI,EAAEL,YAAY,CAAC,IAAI;IACvB,aAAa,EAAEA,YAAY,CAAC,aAAa;IACzC,OAAO,EAAEA,YAAY,CAAC,OAAO;IAC7B,KAAK,EAAEA,YAAY,CAAC,KAAK;IACzB,OAAO,EAAEA,YAAY,CAAC,OAAO;IAC7B,OAAO;IACP,SAAS,EAAEA,YAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,YAAY,CAAC,cAAc;IAC3C,SAAS;IACT,YAAY,EAAEA,YAAY,CAAC,YAAY;IACvC,YAAY,EAAEA,YAAY,CAAC,YAAY;IACvC,UAAU,EAAEA,YAAY,CAAC,UAAU;IACnC,OAAO;IACP,SAAS,EAAEA,YAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,YAAY,CAAC,cAAc;IAC3C,IAAI;IACJ,QAAQ,EAAEA,YAAY,CAAC,QAAQ;IAC/B,aAAa,EAAEA,YAAY,CAAC,aAAa;IACzC,WAAW,EAAEA,YAAY,CAAC,WAAW;;;;;"}

package/dist/components/Select/Select.mjs

@@ -1,164 +1,49 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import ReactSelect from 'react-select';
-import { useToken } from '@chakra-ui/react';
-import { getOptionStyles, getMenuStyles, getPlaceholderStyles, getControlStyles } from './Select.styles.mjs';
+import { forwardRef } from 'react';
+import { Select as Select$1 } from '@chakra-ui/react';
+import { mergeCss } from '../../utils/mergeCss.mjs';
+import { triggerStyles, contentStyles, itemStyles, indicatorStyles } from './Select.styles.mjs';
 
-const Select = ({ variant = 'default', invalid = false, styles, ...rest }) => {
-    const [primaryColor, primaryLighter, primaryLightest, primaryDark, dangerColor, gray50, gray300, gray400, gray500, gray600, gray1000, gray1200, gray1300,] = useToken('colors', [
-        'primary.main',
-        'primary.lighter',
-        'primary.extralight',
-        'primary.dark',
-        'danger.main',
-        'gray.50',
-        'gray.300',
-        'gray.400',
-        'gray.500',
-        'gray.600',
-        'gray.1000',
-        'gray.1200',
-        'gray.1300',
-    ]);
-    const colors = {
-        primaryLightest,
-        primaryDark,
-        dangerColor,
-        gray50,
-        gray300,
-        gray500,
-        gray1200};
-    // invalid prop이 true이면 variant를 'danger'로 오버라이드
-    const effectiveVariant = invalid ? 'danger' : variant;
-    return (jsx(ReactSelect, { closeMenuOnSelect: true, closeMenuOnScroll: true, isSearchable: false, ...rest, 
-        // 사용자 styles 콜백에 react-select 원본 base 대신 Logician 스타일이 적용된
-        // merged를 넘겨서, 사용자가 ...base로 spread해도 Logician 스타일이 유지되도록 함
-        styles: {
-            container: (base, state) => {
-                const merged = { ...base, width: '100%' };
-                return styles?.container ? styles.container(merged, state) : merged;
-            },
-            control: (base, state) => {
-                // Mirror Input.tsx: borderColor gray.400, _hover primary.lighter,
-                // _focus primary.main + 1px outline (Chakra Input recipe's
-                // `focusVisibleRing: "inside"`), _invalid danger.main,
-                // _disabled bg gray.50 / color gray.1000 / fontWeight semibold.
-                const focusOutlineColor = invalid ? dangerColor : primaryColor;
-                const merged = {
-                    ...base,
-                    ...getControlStyles(effectiveVariant, colors),
-                    width: '100%',
-                    border: `1px solid ${invalid ? dangerColor : state.isFocused ? primaryColor : gray400}`,
-                    boxShadow: 'none',
-                    outline: state.isFocused
-                        ? `1px solid ${focusOutlineColor}`
-                        : 'none',
-                    outlineOffset: 0,
-                    // react-select sets a 0.1s `transition: all` on the control,
-                    // which causes the border-color and outline (none -> solid +
-                    // transparent -> primary) to interpolate awkwardly — a brief
-                    // dark blink during focus. Disable to match Input, which
-                    // toggles its focus ring instantly via :focus-visible.
-                    transition: 'none',
-                    '&:hover': {
-                        borderColor: invalid
-                            ? dangerColor
-                            : state.isFocused
-                                ? primaryColor
-                                : primaryLighter,
-                    },
-                    ...(state.isDisabled && {
-                        backgroundColor: gray50,
-                        color: gray1000,
-                        fontWeight: 600,
-                        cursor: 'not-allowed',
-                    }),
-                };
-                return styles?.control ? styles.control(merged, state) : merged;
-            },
-            placeholder: (base, state) => {
-                const merged = { ...base, ...getPlaceholderStyles(colors) };
-                return styles?.placeholder
-                    ? styles.placeholder(merged, state)
-                    : merged;
-            },
-            menu: (base, state) => {
-                const merged = { ...base, ...getMenuStyles(colors) };
-                return styles?.menu ? styles.menu(merged, state) : merged;
-            },
-            menuList: (base, state) => {
-                const merged = { ...base, padding: '0px 4px' };
-                return styles?.menuList ? styles.menuList(merged, state) : merged;
-            },
-            option: (base, state) => {
-                const merged = {
-                    ...base,
-                    ...getOptionStyles({
-                        isSelected: state.isSelected,
-                        isDisabled: state.isDisabled,
-                        colors,
-                    }),
-                };
-                return styles?.option ? styles.option(merged, state) : merged;
-            },
-            singleValue: (base, state) => {
-                // Match Input text color (gray.1300, inherited from body in Input).
-                // When disabled, mirror Input's _disabled color (gray.1000).
-                const merged = {
-                    ...base,
-                    margin: 0,
-                    color: state.isDisabled ? gray1000 : gray1300,
-                };
-                return styles?.singleValue
-                    ? styles.singleValue(merged, state)
-                    : merged;
-            },
-            valueContainer: (base, state) => {
-                // Zero internal padding so the visible text starts after the
-                // control's own 12px paddingLeft (matches Input's `px: 3` =
-                // 12px). react-select's default valueContainer padding is
-                // `2px 8px`, which would otherwise stack on top.
-                const merged = {
-                    ...base,
-                    display: 'flex',
-                    alignItems: 'center',
-                    textAlign: 'left',
-                    padding: 0,
-                };
-                return styles?.valueContainer
-                    ? styles.valueContainer(merged, state)
-                    : merged;
-            },
-            indicatorSeparator: (base, state) => {
-                const merged = { ...base, display: 'none' };
-                return styles?.indicatorSeparator
-                    ? styles.indicatorSeparator(merged, state)
-                    : merged;
-            },
-            dropdownIndicator: (base, state) => {
-                // Lighter than the body text color so the chevron doesn't
-                // visually outweigh Input's right-side icons (which are
-                // typically outline-style and read as gray.600-ish).
-                const merged = { ...base, color: gray600 };
-                return styles?.dropdownIndicator
-                    ? styles.dropdownIndicator(merged, state)
-                    : merged;
-            },
-            indicatorsContainer: (base, state) => {
-                const merged = {
-                    ...base,
-                    display: 'flex',
-                    alignItems: 'center',
-                };
-                return styles?.indicatorsContainer
-                    ? styles.indicatorsContainer(merged, state)
-                    : merged;
-            },
-            menuPortal: (base, state) => {
-                const merged = { ...base, zIndex: 9999 };
-                return styles?.menuPortal ? styles.menuPortal(merged, state) : merged;
-            },
-        } }));
+const Trigger = forwardRef(function SelectTrigger({ css, ...props }, ref) {
+    return (jsx(Select$1.Trigger, { ref: ref, ...props, css: mergeCss(triggerStyles, css) }));
+});
+const Content = forwardRef(function SelectContent({ css, ...props }, ref) {
+    return (jsx(Select$1.Content, { ref: ref, ...props, css: mergeCss(contentStyles, css) }));
+});
+const Item = forwardRef(function SelectItem({ css, ...props }, ref) {
+    return (jsx(Select$1.Item, { ref: ref, ...props, css: mergeCss(itemStyles, css) }));
+});
+const Indicator = forwardRef(function SelectIndicator({ css, ...props }, ref) {
+    return (jsx(Select$1.Indicator, { ref: ref, ...props, css: mergeCss(indicatorStyles, css) }));
+});
+/**
+ * Compound Select primitives — Chakra's `Select` namespace with the Logician
+ * design-system styling baked into the visual parts (`Trigger`, `Content`,
+ * `Item`, `Indicator`). Use these directly for full compositional control
+ * (multi-select, grouped options, custom layouts); use `SelectField` for the
+ * common single-select case.
+ */
+const Select = {
+    Root: Select$1.Root,
+    PropsProvider: Select$1.PropsProvider,
+    Context: Select$1.Context,
+    Label: Select$1.Label,
+    Control: Select$1.Control,
+    Trigger,
+    ValueText: Select$1.ValueText,
+    IndicatorGroup: Select$1.IndicatorGroup,
+    Indicator,
+    ClearTrigger: Select$1.ClearTrigger,
+    HiddenSelect: Select$1.HiddenSelect,
+    Positioner: Select$1.Positioner,
+    Content,
+    ItemGroup: Select$1.ItemGroup,
+    ItemGroupLabel: Select$1.ItemGroupLabel,
+    Item,
+    ItemText: Select$1.ItemText,
+    ItemIndicator: Select$1.ItemIndicator,
+    ItemContext: Select$1.ItemContext,
 };
 
 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","ChakraSelect"],"mappings":";;;;;;;AAYA,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEA,IAACC,QAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACED,IAACC,QAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAG,UAAU,CACrB,SAAS,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IACxC,QACED,IAACC,QAAY,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,EAAA,CAAI;AAE9E,CAAC,CACF;AAED,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACED,IAACC,QAAY,CAAC,SAAS,EAAA,EACrB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,EAAA,CACnC;AAEN,CAAC,CACF;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG;IACpB,IAAI,EAAEA,QAAY,CAAC,IAAI;IACvB,aAAa,EAAEA,QAAY,CAAC,aAAa;IACzC,OAAO,EAAEA,QAAY,CAAC,OAAO;IAC7B,KAAK,EAAEA,QAAY,CAAC,KAAK;IACzB,OAAO,EAAEA,QAAY,CAAC,OAAO;IAC7B,OAAO;IACP,SAAS,EAAEA,QAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,QAAY,CAAC,cAAc;IAC3C,SAAS;IACT,YAAY,EAAEA,QAAY,CAAC,YAAY;IACvC,YAAY,EAAEA,QAAY,CAAC,YAAY;IACvC,UAAU,EAAEA,QAAY,CAAC,UAAU;IACnC,OAAO;IACP,SAAS,EAAEA,QAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,QAAY,CAAC,cAAc;IAC3C,IAAI;IACJ,QAAQ,EAAEA,QAAY,CAAC,QAAQ;IAC/B,aAAa,EAAEA,QAAY,CAAC,aAAa;IACzC,WAAW,EAAEA,QAAY,CAAC,WAAW;;;;;"}