@olundot/ui 0.14.1 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @olundot/ui
 
+## 0.16.0
+
+### Minor Changes
+
+- d34adb7: - Align Chip sizes with field controls at 30/32/36px and use body-sm text for md/lg.
+
+  - Align the Select md trigger typography with Button and SearchField at body-sm.
+  - Add container-aware FilterToolbar collapsing with a SheetDrawer or Popover and active-filter summary.
+  - Expand IconButton hit targets to 44px with pseudo-elements while preserving visual sizes.
+
+  Chip, Select, FilterToolbar, IconButton의 툴바 스케일과 좁은 화면 동작을 하나의 컨트롤 규칙으로 맞춥니다.
+
+## 0.15.0
+
+### Minor Changes
+
+- 7ea00f3: bg 재설계 Step 0 — 오버레이 surface 통일 · checkbox/radio option row 신모델 · EmptyState frameless 기본(PR #64) · 상태 토큰 위생(PR #63).
+- dcb5f68: bg 재설계 Step 0 — 값 변경 전 선행 정리 (PR #64)
+
+  - **오버레이 surface 통일**: dialog · sheet · select · popover · dropdown-menu · toast · confirm/form/info-modal이 제각기 쓰던 `--bg-base` / `--bg-raised` / `bg-background` / `bg-canvas`를 패널 층 `--bg-surface` 하나로 모았다. Tailwind 브리지(`popover` / `--color-popover`)도 같은 층을 가리킨다. `--bg-raised`는 값 변경 없이 남아 elevated card · 표 헤더 등 보조 강조 면을 계속 담당한다.
+  - **scrim/shadow 토큰화**: dialog · sheet의 하드코딩 backdrop(`--bg-base/65`, `bg-black/50`)을 `--scrim`으로, `shadow-lg`/`shadow-md`를 `shadow-[var(--shadow-4)]`로 교체했다.
+  - **checkbox/radio option row 신모델**: 카드형 option row가 `--bg-surface` 위에 얹히고, hover는 배경만 바꾼다(`border-strong`은 checked 전용 신호로 보존).
+  - **EmptyState frameless 기본**: `bordered` 기본값이 `true` → `false`로 뒤집혔다. 독립 패널로 세우려면 `bordered`를 명시한다. 아이콘 웰은 `--bg-raised` → `--bg-inset`.
+  - **popover arrow 가시성**: light에서 near-white on near-white로 사라지던 arrow에 `--border` stroke + `vector-effect: non-scaling-stroke`를 추가했다.
+
+  **Breaking**: `EmptyState`의 `bordered` 기본값이 `false`다. 테두리·배경이 있는 기존 렌더를 유지하려면 `bordered`를 명시적으로 넘겨야 한다.
+
+### Patch Changes
+
+- Updated dependencies [7ea00f3]
+- Updated dependencies [dcb5f68]
+  - @olundot/tokens@0.15.0
+
 ## 0.14.1
 
 ### Patch Changes

package/README.md

@@ -1,24 +1,29 @@
 # @olundot/ui
 
-Shared OLUN React UI components.
+OLUN 토큰을 사용하는 React UI 컴포넌트 패키지입니다. 현재 버전은 `0.15.0`입니다.
+
+## 설치
 
 ```bash
-pnpm add @olundot/ui @olundot/tokens
+pnpm add @olundot/ui
 ```
 
+React와 React DOM 18 이상이 peer dependency입니다. Tailwind CSS 4 이상은 optional peer dependency입니다.
+
+## Tailwind v4 설정
+
 ```css
 @layer theme, base, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/preflight.css" layer(base);
 @import "tailwindcss/utilities.css" layer(utilities);
 
-/* 컴포넌트 utility 생성을 위해 ui dist 스캔 — 빠지면 컴포넌트가 무스타일.
-   경로는 프로젝트 node_modules 위치에 맞게 조정. */
 @source "../node_modules/@olundot/ui/dist";
-
 @import "@olundot/ui/tokens.css";
 ```
 
+`@source` 경로는 소비자 프로젝트의 CSS 파일과 `node_modules` 위치에 맞게 조정합니다. `@olundot/ui/tokens.css`는 core tokens, Tailwind v4 매핑과 UI keyframes를 불러옵니다.
+
 ```tsx
 import { Button, Card, Input } from "@olundot/ui";
 
@@ -32,8 +37,48 @@ export function Example() {
 }
 ```
 
-This beta package is extracted from the OLUN CBT/LMS shared UI implementation. API names are usable, but still considered beta until the consumer integration cycle is complete.
+## 0.15.0 표면 계약
+
+Dialog, Sheet, Popover, DropdownMenu, Select와 Toast의 비-error variant는 panel에 `--bg-surface`를 사용합니다. Toast error variant만 `--error-bg`를 사용하며, `--bg-raised`와 `--bg-overlay`는 overlay panel 용도로 사용하지 않습니다. Dialog와 Sheet backdrop은 `--scrim`을 사용하며, Dialog panel은 `--shadow-8`, Sheet panel은 `--shadow-4`를 사용합니다.
+
+Checkbox/Radio의 card option row는 다음 상태를 사용합니다.
+
+| 상태 | fill과 border |
+|---|---|
+| unchecked | 별도 상태 fill 없음; `--bg-surface` + `--border-subtle` |
+| hover | `--action-hover`; border는 그대로 유지 |
+| checked | `--action-selected` + `--border-strong` |
+| disabled | `--action-disabled-bg` + `--border-subtle` |
+
+## Breaking: EmptyState
+
+`EmptyState`의 `bordered` 기본값은 `false`입니다. 기본 렌더에는 frame과 자체 surface가 없습니다.
+
+```tsx
+// 0.14.x와 같은 framed surface가 필요한 경우
+<EmptyState bordered title="결과가 없습니다" />
+```
+
+아이콘 well은 `--bg-inset`을 사용합니다.
+
+## FileUploadZone 상태
+
+| 상태 | surface와 border |
+|---|---|
+| default | `--bg-surface` + dashed `--border` |
+| hover | `--action-hover` + `--border-strong` |
+| dragging | `--action-active` + `--border-strong` |
+| has-file | `--bg-inset` + solid `--border-strong` |
+| disabled | `--action-disabled-bg` + dashed `--border-subtle` |
+
+Disabled는 has-file과 dragging 상태보다 우선합니다. Error가 함께 있으면 enabled 상태에서 `--error` border를 사용합니다.
+
+## Accent 계약
+
+Primary/default button은 `--primary`와 `--primary-fg`를 사용합니다. Brand와 opt-in accent fill은 `--accent-pop`과 `--accent-on-fill`을 사용합니다. Deprecated alias인 `--accent-solid`, `--accent-on-solid`은 신규 컴포넌트 소스에서 사용하지 않습니다.
+
+전체 변경은 [CHANGELOG](https://github.com/olundot/olun-design-system/blob/main/packages/ui/CHANGELOG.md)에 있습니다.
 
-## Accent Contract
+## 라이선스
 
-Primary and default buttons are monochrome: pair `--primary` for the background and border with `--primary-fg` for text and icons. Brand and opt-in accent fills use the canonical `--accent-pop` + `--accent-on-fill` pair. The pre-v0.14 names `--accent-solid` and `--accent-on-solid` remain deprecated compatibility aliases and must not be used in new component source.
+MIT

package/dist/index.d.ts

@@ -668,9 +668,15 @@ interface InfoModalProps {
 }
 declare function InfoModal({ open, onOpenChange, title, description, children, closeLabel, width, footer, }: InfoModalProps): react_jsx_runtime.JSX.Element;
 
+type FilterToolbarCollapseBelow = "sm" | "md" | "lg" | "never";
 interface FilterToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     search?: React.ReactNode;
     filters?: React.ReactNode;
+    collapsible?: React.ReactNode;
+    collapseBelow?: FilterToolbarCollapseBelow;
+    activeFilterCount?: number;
+    onClearFilters?: () => void;
+    collapsedLabel?: string;
     resultSummary?: React.ReactNode;
     clearAction?: React.ReactNode;
     actions?: React.ReactNode;
@@ -1583,4 +1589,4 @@ interface OrganizationLogoProps extends Omit<SVGProps<SVGSVGElement>, "width" |
 }
 declare function OrganizationLogo({ organization, size, className, style, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: OrganizationLogoProps): react_jsx_runtime.JSX.Element;
 
-export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertEmphasis, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, type InlineAlertSurface, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type SurfaceLevel, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertEmphasis, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarCollapseBelow, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, type InlineAlertSurface, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type SurfaceLevel, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };