@ceed/ads 1.16.0-next.1 → 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

@@ -2,6 +2,7 @@ import React from 'react';
 interface FilterableCheckboxGroupOption {
     value: string;
     label: string;
+    disabled?: boolean;
 }
 export type FilterableCheckboxGroupProps = {
     value?: string[];
@@ -13,6 +14,7 @@ export type FilterableCheckboxGroupProps = {
     required?: boolean;
     onChange?: (value: string[]) => void;
     maxHeight?: string | number;
+    disabled?: boolean;
 };
 declare function FilterableCheckboxGroup(props: FilterableCheckboxGroupProps): React.JSX.Element;
 declare namespace 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/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

@@ -177,3 +177,29 @@ function MyComponent() {
 </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/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 |