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

package/src/components/FormIntegration/FormIntegration.stories.tsx

@@ -8,7 +8,7 @@ import { Button } from '../Button';
 import { FormLabel } from '../FormLabel';
 import { Input } from '../Input';
 import { Textarea } from '../Textarea';
-import { Select } from '../Select';
+import { SelectField } from '../Select';
 import { FileInput } from '../FileInput';
 import { Radio } from '../Radio';
 import { RadioGroup } from '../Radio/RadioGroup';
@@ -34,7 +34,7 @@ interface FormValues {
   name: string;
   email: string;
   bio: string;
-  country: { value: string; label: string } | null;
+  country: string | null;
   gender: string;
   experience: number;
   files: FileList | null;
@@ -60,13 +60,7 @@ const validationSchema = Yup.object({
     .min(10, '자기소개는 최소 10글자 이상이어야 합니다')
     .max(200, '자기소개는 최대 200글자까지 가능합니다')
     .required('자기소개는 필수입니다'),
-  country: Yup.object()
-    .shape({
-      value: Yup.string().required(),
-      label: Yup.string().required(),
-    })
-    .nullable()
-    .required('국가를 선택해주세요'),
+  country: Yup.string().nullable().required('국가를 선택해주세요'),
   gender: Yup.string()
     .oneOf(['male', 'female', 'other'], '성별을 선택해주세요')
     .required('성별은 필수입니다'),
@@ -115,7 +109,7 @@ export const FormikFormExample: StoryObj = {
         console.log('👤 이름:', values.name);
         console.log('📧 이메일:', values.email);
         console.log('📝 자기소개:', values.bio);
-        console.log('🌍 국가:', values.country?.label);
+        console.log('🌍 국가:', values.country);
         console.log('👫 성별:', values.gender);
         console.log('💼 경력:', `${values.experience}년`);
         console.log(
@@ -231,7 +225,7 @@ export const FormikFormExample: StoryObj = {
                   <FormLabel>
                     국가 <Field.RequiredIndicator />
                   </FormLabel>
-                  <Select
+                  <SelectField
                     name="country"
                     options={countryOptions}
                     value={values.country}
@@ -445,7 +439,7 @@ export const RegularFormExample: StoryObj = {
         console.log('👤 이름:', formData.name);
         console.log('📧 이메일:', formData.email);
         console.log('📝 자기소개:', formData.bio);
-        console.log('🌍 국가:', formData.country?.label);
+        console.log('🌍 국가:', formData.country);
         console.log('👫 성별:', formData.gender);
         console.log('💼 경력:', `${formData.experience}년`);
         console.log(
@@ -561,7 +555,7 @@ export const RegularFormExample: StoryObj = {
               <FormLabel>
                 국가 <Field.RequiredIndicator />
               </FormLabel>
-              <Select
+              <SelectField
                 name="country"
                 options={countryOptions}
                 value={formData.country}

package/src/components/FormIntegration/README.md

@@ -49,7 +49,7 @@ Formik과 Yup을 사용한 폼 validation 예제입니다.
 
 #### 국가 (Select)
 - 필수 선택
-- react-select 사용
+- SelectField 사용
 
 #### 성별 (Radio)
 - 필수 선택

package/src/components/Pagination/Pagination.tsx

@@ -1,5 +1,4 @@
 import { useMemo, useState } from 'react';
-import { SingleValue } from 'react-select';
 import { Flex } from '@chakra-ui/react';
 
 import { IoChevronForward, IoIosArrowBack } from '@/components/Icon';
@@ -7,8 +6,7 @@ import { IconButton } from '@/components/IconButton';
 import { Subtext, Subtitle } from '@/components/Typography';
 import { useTranslate } from '@/hooks/useTranslate';
 
-import { Select } from '../Select';
-import { SelectOption } from '../Select/Select.types';
+import { SelectField } from '../Select';
 import { PaginationProps } from './Pagination.types';
 
 /**
@@ -61,11 +59,8 @@ export const Pagination = ({
     }
   };
 
-  const handleItemsPerPageOptionChange = (
-    newValue: SingleValue<SelectOption<number>>
-  ) => {
-    if (newValue) {
-      const newItemsPerPage = newValue.value;
+  const handleItemsPerPageOptionChange = (newItemsPerPage: number | null) => {
+    if (newItemsPerPage != null) {
       onItemsPerPageOptionChange?.(newItemsPerPage);
 
       const newMaxPage = Math.ceil(numTotalItems / newItemsPerPage);
@@ -83,28 +78,14 @@ export const Pagination = ({
       <Flex align="center" gap={2}>
         {itemsPerPageOptions && (
           <Flex align="center" gap={2}>
-            <Select
-              menuPlacement="auto"
-              styles={{
-                control: (base, _state) => ({
-                  ...base,
-                  fontSize: '0.875rem',
-                  padding: 0,
-                  minHeight: '28px',
-                }),
-                dropdownIndicator: (base, _props) => ({
-                  ...base,
-                  padding: '0 4px',
-                }),
-              }}
+            <SelectField<number>
+              size="sm"
+              width="5.5rem"
               options={itemsPerPageOptions.map((option) => ({
                 label: option.toString(),
                 value: option,
               }))}
-              value={{
-                label: itemsPerPage.toString(),
-                value: itemsPerPage,
-              }}
+              value={itemsPerPage}
               onChange={handleItemsPerPageOptionChange}
             />
             <Subtext whiteSpace="nowrap">

package/src/components/Select/Combobox.stories.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import {
+  Box,
+  Portal,
+  Span,
+  Stack,
+  useFilter,
+  useListCollection,
+} from '@chakra-ui/react';
+import { Meta } from '@storybook/react';
+
+import { Combobox } from './Combobox';
+import { ComboboxField } from './ComboboxField';
+
+const meta = {
+  title: 'Components/Combobox',
+} satisfies Meta;
+
+export default meta;
+
+const fruitOptions = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Blueberry', value: 'blueberry' },
+  { label: 'Cherry', value: 'cherry' },
+  { label: 'Grape', value: 'grape' },
+  { label: 'Mango', value: 'mango' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Strawberry', value: 'strawberry', disabled: true },
+];
+
+/**
+ * Type to filter the option list. Clear text to see every option again,
+ * type something with no match to see the empty state.
+ */
+export const Basic = () => {
+  const [value, setValue] = useState<string | null>(null);
+
+  return (
+    <Box maxW="320px">
+      <ComboboxField
+        options={fruitOptions}
+        value={value}
+        onChange={setValue}
+        placeholder="Search a fruit"
+      />
+    </Box>
+  );
+};
+
+export const WithLabel = () => (
+  <Box maxW="320px">
+    <ComboboxField
+      label="Favorite fruit"
+      options={fruitOptions}
+      placeholder="Search a fruit"
+    />
+  </Box>
+);
+
+export const Sizes = () => (
+  <Stack maxW="320px" gap={4}>
+    {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
+      <ComboboxField
+        key={size}
+        size={size}
+        options={fruitOptions}
+        placeholder={`Size: ${size}`}
+      />
+    ))}
+  </Stack>
+);
+
+export const Invalid = () => (
+  <Box maxW="320px">
+    <ComboboxField
+      options={fruitOptions}
+      placeholder="Invalid combobox"
+      invalid
+    />
+  </Box>
+);
+
+export const Disabled = () => (
+  <Box maxW="320px">
+    <ComboboxField options={fruitOptions} defaultValue="apple" disabled />
+  </Box>
+);
+
+export const CustomEmptyText = () => (
+  <Box maxW="320px">
+    <ComboboxField
+      options={fruitOptions}
+      placeholder="Type 'xyz' to see the empty state"
+      emptyText="해당하는 항목이 없습니다"
+    />
+  </Box>
+);
+
+export const ManyOptions = () => {
+  const manyOptions = Array.from({ length: 100 }, (_, i) => ({
+    label: `Item ${i + 1}`,
+    value: `item${i + 1}`,
+  }));
+
+  return (
+    <Box maxW="320px">
+      <ComboboxField options={manyOptions} placeholder="Search 100 items" />
+    </Box>
+  );
+};
+
+/* -------------------------------------------------------------------------
+ * Custom children
+ *
+ * `ComboboxField` takes a flat `options` array; for richer option content
+ * compose the `Combobox` primitives directly with `useListCollection` and
+ * `useFilter`. Keep `Combobox.ItemText` so filtering and the selected
+ * input value still resolve the option label.
+ * ---------------------------------------------------------------------- */
+
+const teamMembers = [
+  { label: 'Alice Kim', value: 'alice', role: 'Product Designer' },
+  { label: 'Brian Lee', value: 'brian', role: 'Frontend Engineer' },
+  { label: 'Chloe Park', value: 'chloe', role: 'Backend Engineer' },
+  { label: 'David Choi', value: 'david', role: 'Engineering Manager' },
+];
+
+/** Two-line options inside a filterable combobox. */
+export const CustomItems = () => {
+  const { contains } = useFilter({ sensitivity: 'base' });
+  const { collection, filter } = useListCollection({
+    initialItems: teamMembers,
+    filter: contains,
+  });
+
+  return (
+    <Box maxW="320px">
+      <Combobox.Root
+        collection={collection}
+        onInputValueChange={(details) => filter(details.inputValue)}
+      >
+        <Combobox.Label>Assignee</Combobox.Label>
+        <Combobox.Control>
+          <Combobox.Input placeholder="Search team members" />
+          <Combobox.IndicatorGroup>
+            <Combobox.ClearTrigger />
+            <Combobox.Trigger />
+          </Combobox.IndicatorGroup>
+        </Combobox.Control>
+        <Portal>
+          <Combobox.Positioner>
+            <Combobox.Content>
+              <Combobox.Empty>No members found</Combobox.Empty>
+              {collection.items.map((item) => (
+                <Combobox.Item item={item} key={item.value}>
+                  <Stack gap={0}>
+                    <Combobox.ItemText>{item.label}</Combobox.ItemText>
+                    <Span fontSize="xs" color="gray.600">
+                      {item.role}
+                    </Span>
+                  </Stack>
+                  <Combobox.ItemIndicator />
+                </Combobox.Item>
+              ))}
+            </Combobox.Content>
+          </Combobox.Positioner>
+        </Portal>
+      </Combobox.Root>
+    </Box>
+  );
+};

package/src/components/Select/Combobox.tsx

@@ -0,0 +1,69 @@
+import { forwardRef } from 'react';
+import { Combobox as ChakraCombobox } from '@chakra-ui/react';
+
+import { mergeCss } from '@/utils/mergeCss';
+
+import { contentStyles, inputStyles, itemStyles } from './Select.styles';
+
+const Input = forwardRef<HTMLInputElement, ChakraCombobox.InputProps>(
+  function ComboboxInput({ css, ...props }, ref) {
+    return (
+      <ChakraCombobox.Input
+        ref={ref}
+        {...props}
+        css={mergeCss(inputStyles, css)}
+      />
+    );
+  }
+);
+
+const Content = forwardRef<HTMLDivElement, ChakraCombobox.ContentProps>(
+  function ComboboxContent({ css, ...props }, ref) {
+    return (
+      <ChakraCombobox.Content
+        ref={ref}
+        {...props}
+        css={mergeCss(contentStyles, css)}
+      />
+    );
+  }
+);
+
+const Item = forwardRef<HTMLDivElement, ChakraCombobox.ItemProps>(
+  function ComboboxItem({ css, ...props }, ref) {
+    return (
+      <ChakraCombobox.Item
+        ref={ref}
+        {...props}
+        css={mergeCss(itemStyles, css)}
+      />
+    );
+  }
+);
+
+/**
+ * Compound Combobox primitives — Chakra's `Combobox` namespace with the
+ * Logician design-system styling baked into the visual parts (`Input`,
+ * `Content`, `Item`). Use these directly for full compositional control;
+ * use `ComboboxField` for the common single-select case.
+ */
+export const Combobox = {
+  Root: ChakraCombobox.Root,
+  PropsProvider: ChakraCombobox.PropsProvider,
+  Context: ChakraCombobox.Context,
+  Label: ChakraCombobox.Label,
+  Control: ChakraCombobox.Control,
+  Input,
+  Trigger: ChakraCombobox.Trigger,
+  IndicatorGroup: ChakraCombobox.IndicatorGroup,
+  ClearTrigger: ChakraCombobox.ClearTrigger,
+  Positioner: ChakraCombobox.Positioner,
+  Content,
+  Empty: ChakraCombobox.Empty,
+  ItemGroup: ChakraCombobox.ItemGroup,
+  ItemGroupLabel: ChakraCombobox.ItemGroupLabel,
+  Item,
+  ItemText: ChakraCombobox.ItemText,
+  ItemIndicator: ChakraCombobox.ItemIndicator,
+  ItemContext: ChakraCombobox.ItemContext,
+};

package/src/components/Select/ComboboxField.tsx

@@ -0,0 +1,86 @@
+import { Portal, useFilter, useListCollection } from '@chakra-ui/react';
+
+import { Combobox } from './Combobox';
+import { ComboboxFieldProps, SelectOption } from './Select.types';
+
+/**
+ * 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.
+ */
+export function ComboboxField<T = string>({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  placeholder,
+  label,
+  size = 'md',
+  invalid,
+  disabled,
+  readOnly,
+  required,
+  name,
+  width = 'full',
+  emptyText = 'No results found',
+}: ComboboxFieldProps<T>) {
+  const { contains } = useFilter({ sensitivity: 'base' });
+  const { collection, filter } = useListCollection<SelectOption<T>>({
+    initialItems: options,
+    filter: contains,
+    itemToValue: (item) => String(item.value),
+    itemToString: (item) => item.label,
+    isItemDisabled: (item) => Boolean(item.disabled),
+  });
+
+  const toKeys = (val: T | null | undefined) =>
+    val === null || val === undefined ? [] : [String(val)];
+
+  return (
+    <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)}
+    >
+      {label != null && <Combobox.Label>{label}</Combobox.Label>}
+      <Combobox.Control>
+        <Combobox.Input placeholder={placeholder} />
+        <Combobox.IndicatorGroup>
+          <Combobox.ClearTrigger />
+          <Combobox.Trigger />
+        </Combobox.IndicatorGroup>
+      </Combobox.Control>
+      <Portal>
+        <Combobox.Positioner>
+          <Combobox.Content>
+            <Combobox.Empty>{emptyText}</Combobox.Empty>
+            {collection.items.map((item) => (
+              <Combobox.Item item={item} key={String(item.value)}>
+                <Combobox.ItemText>{item.label}</Combobox.ItemText>
+                <Combobox.ItemIndicator />
+              </Combobox.Item>
+            ))}
+          </Combobox.Content>
+        </Combobox.Positioner>
+      </Portal>
+    </Combobox.Root>
+  );
+}