@ceed/ads 1.15.0 → 1.16.0-next.4

package/dist/components/FilterMenu/components/FilterableCheckboxGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { FilterableCheckboxGroupItem } from '../types';
+interface FilterableCheckboxGroupProps extends FilterableCheckboxGroupItem {
+    onChange?: (value: string[]) => void;
+}
+declare function FilterableCheckboxGroup(props: FilterableCheckboxGroupProps): React.JSX.Element | null;
+declare namespace FilterableCheckboxGroup {
+    var displayName: string;
+}
+export { FilterableCheckboxGroup };
+export default FilterableCheckboxGroup;

package/dist/components/FilterMenu/types.d.ts

@@ -2,6 +2,7 @@ import type { DateRangePickerProps } from '../DateRangePicker';
 import type { CurrencyInputProps } from '../CurrencyInput';
 import type { PercentageInputProps } from '../PercentageInput';
 import type { AutocompleteProps } from '../Autocomplete';
+import type { FilterableCheckboxGroupProps } from '../FilterableCheckboxGroup';
 type DateTime = string;
 export interface FilterBaseItem<V = never> {
     id: string;
@@ -17,6 +18,13 @@ export interface FilterCheckboxGroupItem extends FilterBaseItem<(string | number
         value: string | number;
     }[];
 }
+export interface FilterableCheckboxGroupItem extends FilterBaseItem<string[]>, Pick<FilterableCheckboxGroupProps, 'placeholder' | 'maxHeight'> {
+    type: 'filterable-checkbox-group';
+    options: {
+        label: string;
+        value: string;
+    }[];
+}
 export interface FilterRadioGroupItem extends FilterBaseItem<string | number> {
     type: 'radio-group';
     options: {
@@ -42,5 +50,5 @@ export interface FilterPercentageRangeItem extends FilterBaseItem<[number, numbe
 export interface FilterAutocompleteItem extends FilterBaseItem<string | number>, Pick<AutocompleteProps<any, boolean>, 'options' | 'multiple' | 'placeholder'> {
     type: 'autocomplete';
 }
-export type FilterItem = FilterCheckboxGroupItem | FilterRadioGroupItem | FilterDateRangeItem | FilterCurrencyInputItem | FilterCurrencyRangeItem | FilterPercentageInputItem | FilterPercentageRangeItem | FilterAutocompleteItem;
+export type FilterItem = FilterCheckboxGroupItem | FilterableCheckboxGroupItem | FilterRadioGroupItem | FilterDateRangeItem | FilterCurrencyInputItem | FilterCurrencyRangeItem | FilterPercentageInputItem | FilterPercentageRangeItem | FilterAutocompleteItem;
 export {};

package/dist/components/FilterableCheckboxGroup/FilterableCheckboxGroup.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface FilterableCheckboxGroupOption {
+    value: string;
+    label: string;
+}
+export type FilterableCheckboxGroupProps = {
+    value?: string[];
+    options: FilterableCheckboxGroupOption[];
+    label?: React.ReactNode;
+    placeholder?: string;
+    helperText?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    required?: boolean;
+    onChange?: (value: string[]) => void;
+    maxHeight?: string | number;
+};
+declare function FilterableCheckboxGroup(props: FilterableCheckboxGroupProps): React.JSX.Element;
+declare namespace FilterableCheckboxGroup {
+    var displayName: string;
+}
+export { FilterableCheckboxGroup };

package/dist/components/FilterableCheckboxGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { FilterableCheckboxGroup } from './FilterableCheckboxGroup';
+export * from './FilterableCheckboxGroup';
+export default FilterableCheckboxGroup;

package/dist/components/ProfileMenu/ProfileMenu.d.ts

@@ -26,7 +26,7 @@ interface BaseProfileMenuProps {
             src: string;
             alt: string;
         };
-        caption?: string;
+        caption?: React.ReactNode;
         chip?: string;
     };
     menuItems: ({

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export { DialogFrame } from './DialogFrame';
 export { Divider } from './Divider';
 export { InsetDrawer } from './InsetDrawer';
 export { Dropdown } from './Dropdown';
+export { FilterableCheckboxGroup } from './FilterableCheckboxGroup';
 export { FilterMenu } from './FilterMenu';
 export type * from './FilterMenu';
 export { Uploader } from './Uploader';

package/dist/components/inputs/FilterableCheckboxGroup.md

@@ -0,0 +1,179 @@
+# FilterableCheckboxGroup
+
+## Introduction
+
+FilterableCheckboxGroup 컴포넌트는 대량의 옵션 중에서 여러 항목을 선택할 수 있는 검색 가능한 체크박스 그룹입니다. 검색 필터링과 가상 스크롤링을 통해 많은 수의 옵션을 효율적으로 처리할 수 있으며, "Select all" 기능으로 일괄 선택이 가능합니다. 필터링, 다중 선택 폼, 설정 화면 등에서 유용하게 사용됩니다.
+
+```tsx
+<FilterableCheckboxGroup
+  label="Select Fruits"
+  placeholder="Search fruits..."
+  options={defaultOptions}
+/>
+```
+
+| Field       | Description | Default |
+| ----------- | ----------- | ------- |
+| size        | —           | —       |
+| label       | —           | —       |
+| helperText  | —           | —       |
+| required    | —           | —       |
+| value       | —           | —       |
+| onChange    | —           | —       |
+| placeholder | —           | —       |
+| options     | —           | —       |
+| maxHeight   | —           | —       |
+
+## Usage
+
+```tsx
+import { FilterableCheckboxGroup } from '@ceed/ads';
+
+function MyComponent() {
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const options = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+  ];
+
+  return (
+    <FilterableCheckboxGroup
+      label="Select Fruits"
+      placeholder="Search fruits..."
+      options={options}
+      value={selectedValues}
+      onChange={setSelectedValues}
+    />
+  );
+}
+```
+
+## Examples
+
+### Sizes
+
+다양한 크기의 FilterableCheckboxGroup을 사용할 수 있습니다.
+
+```tsx
+<Stack spacing={3}>
+  <FilterableCheckboxGroup {...args} size="lg" label="Large" />
+  <FilterableCheckboxGroup {...args} size="md" label="Medium" />
+  <FilterableCheckboxGroup {...args} size="sm" label="Small" />
+</Stack>
+```
+
+### With Label
+
+라벨을 추가할 수 있습니다.
+
+```tsx
+<FilterableCheckboxGroup
+  label="Select your favorite fruits"
+  placeholder="Search fruits..."
+  options={defaultOptions}
+/>
+```
+
+### With Helper Text
+
+도움말 텍스트를 추가할 수 있습니다.
+
+```tsx
+<FilterableCheckboxGroup
+  label="Select Fruits"
+  placeholder="Search fruits..."
+  helperText="You can select multiple options"
+  options={defaultOptions}
+/>
+```
+
+### Required Field
+
+필수 입력 필드로 표시할 수 있습니다.
+
+```tsx
+<FilterableCheckboxGroup
+  label="Required Field"
+  placeholder="Search..."
+  required
+  helperText="This field is required"
+  options={defaultOptions}
+/>
+```
+
+### Custom Max Height
+
+목록의 최대 높이를 커스터마이징할 수 있습니다.
+
+```tsx
+<Stack spacing={3}>
+  <FilterableCheckboxGroup label="Custom Height (150px)" placeholder="Search..." options={defaultOptions} maxHeight={150} />
+  <FilterableCheckboxGroup label="Default Height (300px)" placeholder="Search..." options={defaultOptions} />
+</Stack>
+```
+
+### Long List
+
+많은 수의 옵션을 가상 스크롤링으로 효율적으로 표시합니다.
+
+```tsx
+<FilterableCheckboxGroup
+  label="Countries"
+  placeholder="Search countries..."
+  options={countryNames.map(name => ({
+  value: name.toLowerCase().replace(/ /g, '-'),
+  label: name
+}))}
+/>
+```
+
+### No Options
+
+옵션이 없을 때의 상태입니다.
+
+```tsx
+<FilterableCheckboxGroup
+  label="No Options Available"
+  placeholder="Search..."
+  options={[]}
+/>
+```
+
+### Controlled
+
+외부에서 값을 제어하는 예제입니다.
+
+```tsx
+<Stack spacing={2}>
+  <FilterableCheckboxGroup label="Select Fruits" placeholder="Search fruits..." options={defaultOptions} value={value} onChange={setValue} />
+  <Typography level="body-sm">
+    Selected:{' '}
+    {value.length > 0 ? value.map(v => defaultOptions.find(o => o.value === v)?.label).join(', ') : 'None'}
+  </Typography>
+</Stack>
+```
+
+### Sorting
+
+정렬 동작을 확인할 수 있는 예제입니다. 초기 렌더링 시 선택된 항목이 먼저 표시되고, 그 다음 알파벳 순으로 정렬됩니다.
+
+```tsx
+<Stack spacing={2}>
+  <button type="button" onClick={() => {
+    setKey(prev => prev + 1);
+  }} style={{
+    padding: '4px 12px',
+    cursor: 'pointer'
+  }}>
+  Force Re-render
+</button>
+<FilterableCheckboxGroup key={key} label="Sorting Demo" placeholder="Search..." helperText="Initial sort: Selected (C,B,A,3,2,1) first, then unselected (X,Y,Z,7,8,9)" options={sortingOptions} value={value} onChange={setValue} />
+<Typography level="body-sm" sx={{
+  whiteSpace: 'pre-line'
+}}>
+{`Selected: ${value.length > 0 ? value.join(', ') : 'None'}\n\nClick "Force Re-render" button to remount the component.\nOrder should remain the same (sorted only on initial mount).`}
+</Typography>
+</Stack>
+```

package/dist/components/inputs/llms.txt

@@ -10,6 +10,7 @@
 - [CurrencyInput](./CurrencyInput.md)
 - [DatePicker](./DatePicker.md)
 - [DateRangePicker](./DateRangePicker.md)
+- [FilterableCheckboxGroup](./FilterableCheckboxGroup.md)
 - [FilterMenu](./FilterMenu.md)
 - [IconButton](./IconButton.md)
 - [Input](./Input.md)