@ceed/ads 1.15.0 → 1.16.0-next.10

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: {
@@ -24,7 +32,7 @@ export interface FilterRadioGroupItem extends FilterBaseItem<string | number> {
         value: string | number;
     }[];
 }
-export interface FilterDateRangeItem extends FilterBaseItem<[DateTime, DateTime]>, Pick<DateRangePickerProps, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' | 'format' | 'displayFormat' | 'inputReadOnly' | 'hideClearButton'> {
+export interface FilterDateRangeItem extends FilterBaseItem<[DateTime, DateTime]>, Pick<DateRangePickerProps, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' | 'displayFormat' | 'inputReadOnly' | 'hideClearButton'> {
     type: 'date-range';
 }
 export interface FilterCurrencyInputItem extends FilterBaseItem<number>, Pick<CurrencyInputProps, 'max' | 'placeholder' | 'useMinorUnit' | 'currency'> {
@@ -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,23 @@
+import React from 'react';
+interface FilterableCheckboxGroupOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+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;
+    disabled?: boolean;
+};
+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/Pagination/Pagination.d.ts

@@ -21,6 +21,7 @@ interface PaginationProps extends React.ComponentProps<typeof PaginationRoot> {
     rowCount: number;
     onPageChange: (newPage: number) => void;
     size?: 'sm' | 'md' | 'lg';
+    variant?: 'standard' | 'compact';
 }
 declare function Pagination(props: PaginationProps): React.JSX.Element;
 declare namespace Pagination {

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/FilterMenu.md

@@ -75,6 +75,26 @@ FilterMenu는 다음과 같은 필터 타입을 지원합니다:
 }
 ```
 
+### Filterable Checkbox Group
+
+검색 기능이 포함된 체크박스 그룹 필터입니다. 옵션이 많을 때 유용합니다.
+
+```tsx
+{
+  id: 'categories',
+  type: 'filterable-checkbox-group',
+  label: 'Categories',
+  options: [
+    { label: 'Electronics', value: 'electronics' },
+    { label: 'Clothing', value: 'clothing' },
+    { label: 'Food', value: 'food' },
+    { label: 'Books', value: 'books' },
+  ],
+  placeholder: 'Search categories...',
+  maxHeight: 300,
+}
+```
+
 ### Radio Group
 
 단일 선택이 가능한 라디오 버튼 그룹 필터입니다.

package/dist/components/inputs/FilterableCheckboxGroup.md

@@ -0,0 +1,205 @@
+# 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>
+```
+
+### Disabled
+
+컴포넌트 전체 또는 특정 옵션을 비활성화할 수 있습니다.
+
+- **컴포넌트 전체 비활성화**: `disabled` prop을 사용하여 검색 input, "Select all", 모든 옵션을 비활성화합니다.
+- **특정 옵션 비활성화**: 옵션 객체의 `disabled` 속성을 사용하여 개별 옵션을 비활성화합니다.
+- **"Select all" 동작**: 비활성화된 옵션은 "Select all"의 영향을 받지 않으며, 선택 상태가 유지됩니다.
+
+```tsx
+<Stack spacing={3}>
+  <FilterableCheckboxGroup label="Entirely Disabled" placeholder="Search..." helperText="All inputs are disabled" options={defaultOptions.slice(0, 5)} disabled />
+  <FilterableCheckboxGroup label="Partially Disabled Options" placeholder="Search..." helperText="Some options are disabled" options={disabledOptions} />
+  <Stack spacing={2}>
+    <FilterableCheckboxGroup label="Controlled + Partially Disabled" placeholder="Search..." helperText="Disabled options (Banana, Date) maintain their selected state" options={disabledOptions} value={controlledValue} onChange={setControlledValue} />
+    <Typography level="body-sm">
+      Selected: {controlledValue.length > 0 ? controlledValue.join(', ') : 'None'}
+    </Typography>
+    <Typography level="body-sm" sx={{
+      color: 'text.secondary'
+    }}>
+    Try "Select all" - it will only affect enabled options (Apple, Cherry, Elderberry)
+  </Typography>
+</Stack>
+</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)

package/dist/components/navigation/Pagination.md

@@ -2,8 +2,17 @@
 
 ## Introduction
 
-```text
-// Unable to derive source for Playground
+```tsx
+<Stack spacing={4}>
+  <Stack spacing={1}>
+    <div>Standard</div>
+    <Pagination {...args} variant="standard" />
+  </Stack>
+  <Stack spacing={1}>
+    <div>Compact</div>
+    <Pagination {...args} variant="compact" />
+  </Stack>
+</Stack>
 ```
 
 | Field                        | Description | Default |