@olundot/ui 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @olundot/ui
 
+## 0.6.0
+
+### Minor Changes
+
+- de4b5fe: Add `TreeView` — a WAI-ARIA tree (APG tree pattern, single-select) for hierarchical navigation such as folder/classification browsers.
+
+  - Data-driven `nodes` with a `renderItem` render-prop so consumers own item content (icon + label/link) while the DS owns tree semantics.
+  - Generic over `T extends TreeNode`; controlled `selectedId` and controlled/uncontrolled expansion (`expandedIds` / `defaultExpandedIds` + `onExpandedChange`), `onSelect`.
+  - Optional `selectionAriaCurrent` puts `aria-current` (e.g. `"page"`) on the selected node for navigation trees, alongside `aria-selected`.
+  - Full keyboard support: ArrowUp/Down move, ArrowRight/Left expand·collapse·move, Home/End, Enter selects, Space toggles a parent's expansion (selects a leaf), with roving tabindex (one Tab stop).
+  - Roles `tree`/`treeitem`/`group`, `aria-expanded`/`aria-selected`/`aria-level`, required `aria-label`; token-driven hover/selected (subtle fill)/focus with token-based depth indentation; light + dark.
+  - Works when item content contains a focusable link (give inner links `tabIndex={-1}`; activation preserved on pointer).
+
+  Scope (v1): single-select + expand/collapse + keyboard + a11y. Multi-select, async/lazy loading, drag-drop and inline rename are intentionally out of scope and can be added without breaking the API.
+
+  New exports: `TreeView`, `treeViewVariants`, `treeItemRowVariants`, `TreeNode`, `TreeItemState`, `TreeViewProps`, `TreeItemRowVariantProps`.
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -32,8 +32,8 @@ declare function useOlunTheme(): UseOlunThemeValue;
 type SurfaceLevel = "surface" | "canvas" | "raised";
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "primary" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
+    variant?: "primary" | "secondary" | "destructive" | "default" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "link" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
 type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
@@ -54,7 +54,7 @@ type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading'
     variant?: ButtonVariant;
     duration?: number;
 };
-declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant" | "size" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
     value: string;
     label?: React.ReactNode;
     copiedLabel?: React.ReactNode;
@@ -70,7 +70,7 @@ declare const inputVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | null | undefined;
+    state?: "error" | "success" | "default" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
@@ -119,11 +119,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -142,10 +142,10 @@ interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelEl
 declare const FileUploadZone: React.ForwardRefExoticComponent<FileUploadZoneProps & React.RefAttributes<HTMLLabelElement>>;
 
 declare const alertVariants: (props?: ({
-    variant?: "error" | "success" | "info" | "warning" | null | undefined;
+    variant?: "error" | "warning" | "info" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inlineAlertVariants: (props?: ({
-    variant?: "error" | "success" | "info" | "warning" | null | undefined;
+    variant?: "error" | "warning" | "info" | "success" | null | undefined;
     surface?: "filled" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
@@ -175,7 +175,7 @@ declare const textareaVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | null | undefined;
+    state?: "error" | "success" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -230,7 +230,7 @@ declare const selectVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | null | undefined;
+    state?: "error" | "success" | "default" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
@@ -854,8 +854,8 @@ declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProp
 declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<Popover$1.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "status" | "semantic" | "neutral" | "brand" | "pill" | "vibrant" | null | undefined;
-    tone?: "accent" | "danger" | "success" | "info" | "warning" | "neutral" | null | undefined;
+    variant?: "brand" | "neutral" | "status" | "semantic" | "pill" | "vibrant" | null | undefined;
+    tone?: "accent" | "warning" | "info" | "success" | "neutral" | "danger" | null | undefined;
     size?: "xs" | "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const badgeDotVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -873,7 +873,7 @@ declare const twoTierBadgeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const twoTierBadgeLineVariants: (props?: ({
     tier?: "primary" | "secondary" | null | undefined;
-    intent?: "danger" | "success" | "warning" | "neutral" | "brand" | "muted" | null | undefined;
+    intent?: "brand" | "muted" | "warning" | "success" | "neutral" | "danger" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TwoTierBadgeIntent = NonNullable<VariantProps<typeof twoTierBadgeLineVariants>["intent"]>;
 interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof twoTierBadgeVariants> {
@@ -887,7 +887,7 @@ interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLDivElement>, Varian
 declare const TwoTierBadge: React.ForwardRefExoticComponent<TwoTierBadgeProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const statusBadgeVariants: (props?: ({
-    status?: "error" | "success" | "info" | "warning" | "active" | "pending" | "archived" | null | undefined;
+    status?: "error" | "warning" | "info" | "success" | "active" | "pending" | "archived" | null | undefined;
     size?: "xs" | "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const statusBadgeDotVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -917,12 +917,12 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
+    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
+    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
@@ -1116,7 +1116,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
+    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -1157,17 +1157,17 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "default" | "error" | null | undefined;
+    state?: "error" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -1223,11 +1223,11 @@ declare const checkboxBoxVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupBoxVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
 type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -1252,7 +1252,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1273,16 +1273,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const radioGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioControlVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;
@@ -1321,6 +1321,56 @@ interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function Progress({ value, max, status, width, height, className, style, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * A single node in a TreeView. Consumers extend this shape with their own
+ * fields (title, href, icon, …) and make the component generic over that type.
+ * Only `id` (stable, unique within the tree) is required by the DS; children
+ * are read through `getChildren` (default: `node.children`).
+ */
+interface TreeNode {
+    id: string;
+    children?: TreeNode[];
+}
+/** State handed to `renderItem` so the consumer can reflect tree status. */
+interface TreeItemState {
+    expanded: boolean;
+    selected: boolean;
+    /** 1-based ARIA level (roots are level 1). */
+    depth: number;
+    hasChildren: boolean;
+}
+interface TreeViewProps<T extends TreeNode> extends Omit<React.HTMLAttributes<HTMLUListElement>, "onSelect" | "role"> {
+    /** Root nodes of the tree. */
+    nodes: T[];
+    /** Controlled "current" node (single-select). */
+    selectedId?: string;
+    /** When set, the selected node also carries this `aria-current` value. Use
+     *  `"page"` for navigation trees so assistive tech announces the current
+     *  location (e.g. the open folder). Default: no `aria-current`. */
+    selectionAriaCurrent?: React.AriaAttributes["aria-current"];
+    /** Initial expanded node ids (uncontrolled expansion). */
+    defaultExpandedIds?: string[];
+    /** Controlled expanded node ids. When set, expansion is fully controlled. */
+    expandedIds?: string[];
+    /** Fires whenever the expanded set changes (controlled or uncontrolled). */
+    onExpandedChange?: (ids: string[]) => void;
+    /** Fires when a node is activated (Enter/Space or click). */
+    onSelect?: (id: string, node: T) => void;
+    /** Render the item's content (icon + label/link). Receives node state. */
+    renderItem: (node: T, state: TreeItemState) => React.ReactNode;
+    /** Read a node's children. Default: `node.children`. */
+    getChildren?: (node: T) => T[] | undefined;
+    /** Required: the tree must be labelled (WAI-ARIA tree). */
+    "aria-label": string;
+    className?: string;
+}
+declare const treeViewVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const treeItemRowVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TreeItemRowVariantProps = VariantProps<typeof treeItemRowVariants>;
+declare function TreeView<T extends TreeNode>({ nodes, selectedId, selectionAriaCurrent, defaultExpandedIds, expandedIds, onExpandedChange, onSelect, renderItem, getChildren, className, "aria-label": ariaLabel, ...rest }: TreeViewProps<T>): react_jsx_runtime.JSX.Element;
+
 /**
  * OLUN 브랜드 로고.
  *
@@ -1369,4 +1419,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 AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, 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, CopyButton, type CopyButtonProps, DataTable, type DataTableBulkAction, type DataTableColumn, type DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, 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, 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, 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, Separator, type SetOlunThemeOptions, Sheet, 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 StatusBadgeProps, 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, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoTierBadge, type TwoTierBadgeIntent, type TwoTierBadgeProps, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, alertVariants, badgeDotVariants, badgeVariants, 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, inlineAlertVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, skeletonVariants, spinnerVariants, statusBadgeDotVariants, statusBadgeVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, twoTierBadgeLineVariants, twoTierBadgeVariants, useOlunTheme, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, 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, CopyButton, type CopyButtonProps, DataTable, type DataTableBulkAction, type DataTableColumn, type DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, 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, 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, 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, Separator, type SetOlunThemeOptions, Sheet, 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 StatusBadgeProps, 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, 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 TwoTierBadgeIntent, type TwoTierBadgeProps, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, alertVariants, badgeDotVariants, badgeVariants, 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, inlineAlertVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, skeletonVariants, spinnerVariants, statusBadgeDotVariants, statusBadgeVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, twoTierBadgeLineVariants, twoTierBadgeVariants, useOlunTheme, usePermission };

package/dist/index.js

@@ -7887,10 +7887,275 @@ function Progress({
   );
 }
 
-// src/components/branding/olun-logo.tsx
+// src/components/ui/tree-view.tsx
+import * as React41 from "react";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { cva as cva29 } from "class-variance-authority";
 import { jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
+var treeViewVariants = cva29(
+  "m-0 list-none p-[var(--space-0-5)] text-body-sm text-foreground"
+);
+var treeItemRowVariants = cva29(
+  [
+    "flex min-h-[var(--touch-target-min)] w-full cursor-pointer select-none items-center gap-[var(--space-1)]",
+    "rounded-[var(--radius-sm)] py-[var(--space-1)] pr-[var(--space-1-5)]",
+    "text-text-secondary transition-colors duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
+    "hover:bg-[var(--action-hover)] hover:text-foreground",
+    // Roving focus lives on the treeitem <li> (named group/treeitem); the ring is
+    // painted on the visual row so it never wraps the nested child group.
+    "group-focus-visible/treeitem:outline-none group-focus-visible/treeitem:ring-2 group-focus-visible/treeitem:ring-inset group-focus-visible/treeitem:ring-[var(--focus-ring)]"
+  ].join(" "),
+  {
+    variants: {
+      selected: {
+        // Selected = subtle fill (action-selected), matching nav selected state.
+        // Never a left border (OLUN selected-state doctrine).
+        true: "bg-[var(--action-selected)] font-medium text-foreground",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      selected: false
+    }
+  }
+);
+function defaultGetChildren(node) {
+  return node.children;
+}
+function flattenVisibleNodes(nodes, getChildren, expandedSet, depth = 1, parentId = null, acc = []) {
+  for (const node of nodes) {
+    const children = getChildren(node);
+    const hasChildren = Array.isArray(children) && children.length > 0;
+    const expanded = hasChildren && expandedSet.has(node.id);
+    acc.push({ node, id: node.id, depth, hasChildren, expanded, parentId });
+    if (expanded && children) {
+      flattenVisibleNodes(children, getChildren, expandedSet, depth + 1, node.id, acc);
+    }
+  }
+  return acc;
+}
+function getTreeViewKeyAction(key, items, activeId) {
+  if (items.length === 0 || activeId === null) return null;
+  const index = items.findIndex((item) => item.id === activeId);
+  if (index === -1) return null;
+  const current = items[index];
+  switch (key) {
+    case "ArrowDown": {
+      const next = items[index + 1];
+      return next ? { type: "focus", id: next.id } : null;
+    }
+    case "ArrowUp": {
+      const prev = items[index - 1];
+      return prev ? { type: "focus", id: prev.id } : null;
+    }
+    case "Home":
+      return { type: "focus", id: items[0].id };
+    case "End":
+      return { type: "focus", id: items[items.length - 1].id };
+    case "ArrowRight": {
+      if (current.hasChildren && !current.expanded) {
+        return { type: "expand", id: current.id };
+      }
+      if (current.hasChildren && current.expanded) {
+        const child = items[index + 1];
+        return child && child.parentId === current.id ? { type: "focus", id: child.id } : null;
+      }
+      return null;
+    }
+    case "ArrowLeft": {
+      if (current.hasChildren && current.expanded) {
+        return { type: "collapse", id: current.id };
+      }
+      return current.parentId ? { type: "focus", id: current.parentId } : null;
+    }
+    case "Enter":
+      return { type: "select", id: current.id };
+    case " ":
+      if (current.hasChildren) {
+        return current.expanded ? { type: "collapse", id: current.id } : { type: "expand", id: current.id };
+      }
+      return { type: "select", id: current.id };
+    default:
+      return null;
+  }
+}
+function TreeView({
+  nodes,
+  selectedId,
+  selectionAriaCurrent,
+  defaultExpandedIds,
+  expandedIds,
+  onExpandedChange,
+  onSelect,
+  renderItem,
+  getChildren = defaultGetChildren,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const isExpandedControlled = expandedIds !== void 0;
+  const [internalExpanded, setInternalExpanded] = React41.useState(
+    () => defaultExpandedIds ?? []
+  );
+  const expandedList = isExpandedControlled ? expandedIds : internalExpanded;
+  const expandedSet = React41.useMemo(() => new Set(expandedList), [expandedList]);
+  const items = React41.useMemo(
+    () => flattenVisibleNodes(nodes, getChildren, expandedSet),
+    [nodes, getChildren, expandedSet]
+  );
+  const [focusedId, setFocusedId] = React41.useState(null);
+  const visibleIds = items.map((item) => item.id);
+  const activeId = focusedId && visibleIds.includes(focusedId) ? focusedId : selectedId && visibleIds.includes(selectedId) ? selectedId : visibleIds[0] ?? null;
+  const itemRefs = React41.useRef(/* @__PURE__ */ new Map());
+  const commitExpanded = React41.useCallback(
+    (next) => {
+      if (!isExpandedControlled) setInternalExpanded(next);
+      onExpandedChange?.(next);
+    },
+    [isExpandedControlled, onExpandedChange]
+  );
+  const setExpanded = React41.useCallback(
+    (id, expand) => {
+      const has = expandedSet.has(id);
+      if (expand && !has) {
+        commitExpanded([...expandedList, id]);
+      } else if (!expand && has) {
+        commitExpanded(expandedList.filter((value) => value !== id));
+      }
+    },
+    [commitExpanded, expandedList, expandedSet]
+  );
+  const focusItem = React41.useCallback((id) => {
+    setFocusedId(id);
+    itemRefs.current.get(id)?.focus();
+  }, []);
+  const handleKeyDown = (event) => {
+    const target = event.target;
+    if (target.getAttribute("role") !== "treeitem") return;
+    const targetId = target.getAttribute("data-id") ?? activeId;
+    const action = getTreeViewKeyAction(event.key, items, targetId);
+    if (!action) return;
+    event.preventDefault();
+    switch (action.type) {
+      case "focus":
+        focusItem(action.id);
+        break;
+      case "expand":
+        setExpanded(action.id, true);
+        break;
+      case "collapse":
+        setExpanded(action.id, false);
+        break;
+      case "select": {
+        const item = items.find((entry) => entry.id === action.id);
+        if (item) onSelect?.(item.id, item.node);
+        break;
+      }
+    }
+  };
+  function renderLevel(levelNodes, depth) {
+    return levelNodes.map((node) => {
+      const children = getChildren(node);
+      const hasChildren = Array.isArray(children) && children.length > 0;
+      const expanded = hasChildren && expandedSet.has(node.id);
+      const selected = node.id === selectedId;
+      const isActive = node.id === activeId;
+      const itemState = { expanded, selected, depth, hasChildren };
+      return /* @__PURE__ */ jsxs44(
+        "li",
+        {
+          ref: (element) => {
+            if (element) itemRefs.current.set(node.id, element);
+            else itemRefs.current.delete(node.id);
+          },
+          role: "treeitem",
+          "data-slot": "treeitem",
+          "data-id": node.id,
+          "aria-level": depth,
+          "aria-expanded": hasChildren ? expanded : void 0,
+          "aria-selected": selected ? true : void 0,
+          "aria-current": selected && selectionAriaCurrent ? selectionAriaCurrent : void 0,
+          "data-selected": selected ? "true" : void 0,
+          tabIndex: isActive ? 0 : -1,
+          className: "group/treeitem block outline-none",
+          onFocus: (event) => {
+            if (event.target === event.currentTarget) setFocusedId(node.id);
+          },
+          onClick: (event) => {
+            event.stopPropagation();
+            onSelect?.(node.id, node);
+          },
+          children: [
+            /* @__PURE__ */ jsxs44(
+              "span",
+              {
+                "data-slot": "treeitem-row",
+                style: {
+                  paddingInlineStart: `calc(var(--space-1) + var(--space-2) * ${depth - 1})`
+                },
+                className: treeItemRowVariants({ selected }),
+                children: [
+                  hasChildren ? /* @__PURE__ */ jsx51(
+                    "span",
+                    {
+                      "data-slot": "treeitem-toggle",
+                      "aria-hidden": "true",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        setExpanded(node.id, !expanded);
+                      },
+                      className: "flex size-[var(--space-2)] shrink-0 items-center justify-center text-text-tertiary",
+                      children: /* @__PURE__ */ jsx51(
+                        ChevronRight2,
+                        {
+                          "aria-hidden": "true",
+                          "data-slot": "treeitem-chevron",
+                          className: cn(
+                            "size-[16px] transition-transform duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
+                            expanded && "rotate-90"
+                          ),
+                          strokeWidth: 2
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx51(
+                    "span",
+                    {
+                      "data-slot": "treeitem-spacer",
+                      "aria-hidden": "true",
+                      className: "size-[var(--space-2)] shrink-0"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx51("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--space-1)]", children: renderItem(node, itemState) })
+                ]
+              }
+            ),
+            hasChildren && expanded && children ? /* @__PURE__ */ jsx51("ul", { role: "group", "data-slot": "tree-group", className: "m-0 list-none p-0", children: renderLevel(children, depth + 1) }) : null
+          ]
+        },
+        node.id
+      );
+    });
+  }
+  return /* @__PURE__ */ jsx51(
+    "ul",
+    {
+      role: "tree",
+      "data-slot": "tree",
+      "aria-label": ariaLabel,
+      "aria-multiselectable": false,
+      className: cn(treeViewVariants(), className),
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children: renderLevel(nodes, 1)
+    }
+  );
+}
+
+// src/components/branding/olun-logo.tsx
+import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
 function OlunSymbol({ size = 28, className }) {
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "svg",
     {
       width: size,
@@ -7901,7 +8166,7 @@ function OlunSymbol({ size = 28, className }) {
       className,
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           "circle",
           {
             cx: "108",
@@ -7913,7 +8178,7 @@ function OlunSymbol({ size = 28, className }) {
             style: { color: "var(--text-primary)" }
           }
         ),
-        /* @__PURE__ */ jsx51("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-solid)" })
+        /* @__PURE__ */ jsx52("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-solid)" })
       ]
     }
   );
@@ -7924,7 +8189,7 @@ function OlunLogo({
   showSymbol = true,
   className
 }) {
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className,
@@ -7934,8 +8199,8 @@ function OlunLogo({
         gap: "var(--space-1-5)"
       },
       children: [
-        showSymbol && /* @__PURE__ */ jsx51(OlunSymbol, { size: symbolSize }),
-        /* @__PURE__ */ jsxs44(
+        showSymbol && /* @__PURE__ */ jsx52(OlunSymbol, { size: symbolSize }),
+        /* @__PURE__ */ jsxs45(
           "span",
           {
             style: {
@@ -7947,7 +8212,7 @@ function OlunLogo({
             },
             children: [
               "OLUN",
-              /* @__PURE__ */ jsx51("span", { style: { color: "var(--accent-fg)" }, children: "." })
+              /* @__PURE__ */ jsx52("span", { style: { color: "var(--accent-fg)" }, children: "." })
             ]
           }
         )
@@ -7958,11 +8223,11 @@ function OlunLogo({
 
 // src/components/branding/theme-toggle.tsx
 import { Sun, Moon } from "lucide-react";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function ThemeToggle({ className }) {
   const { resolvedTheme, toggleTheme } = useOlunTheme();
   const Icon = resolvedTheme === "dark" ? Moon : Sun;
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     "button",
     {
       onClick: () => toggleTheme(),
@@ -7974,14 +8239,14 @@ function ThemeToggle({ className }) {
       ),
       "aria-label": "\uD14C\uB9C8 \uC804\uD658",
       title: resolvedTheme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
-      children: /* @__PURE__ */ jsx52(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
+      children: /* @__PURE__ */ jsx53(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
     }
   );
 }
 
 // src/components/branding/theme-fab.tsx
 import { Sun as Sun2, Moon as Moon2 } from "lucide-react";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function ThemeFab({ variant = "square" } = {}) {
   const { mounted, resolvedTheme, toggleTheme } = useOlunTheme();
   if (!mounted) {
@@ -8021,7 +8286,7 @@ function ThemeFab({ variant = "square" } = {}) {
     WebkitBackdropFilter: "blur(16px)",
     zIndex: 9999
   };
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "button",
     {
       onClick: () => toggleTheme(),
@@ -8046,7 +8311,7 @@ function ThemeFab({ variant = "square" } = {}) {
           e.currentTarget.style.color = "var(--text-secondary)";
         }
       },
-      children: /* @__PURE__ */ jsx53(
+      children: /* @__PURE__ */ jsx54(
         Icon,
         {
           size: isCircle ? 22 : 16,
@@ -8058,7 +8323,7 @@ function ThemeFab({ variant = "square" } = {}) {
 }
 
 // src/components/logos/organization-logo.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var organizationLogoRegistry = {
   jbnu: {
     label: "\uC804\uBD81\uB300\uD559\uAD50 \uC5E0\uBE14\uB7FC",
@@ -8087,7 +8352,7 @@ function OrganizationLogo({
 }) {
   const asset = organizationLogoRegistry[organization];
   const isDecorative = ariaHidden === true || ariaHidden === "true";
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     "svg",
     {
       viewBox: asset.viewBox,
@@ -8105,7 +8370,7 @@ function OrganizationLogo({
         ...style
       },
       ...props,
-      children: asset.paths.map((path) => /* @__PURE__ */ jsx54("path", { d: path }, path))
+      children: asset.paths.map((path) => /* @__PURE__ */ jsx55("path", { d: path }, path))
     }
   );
 }
@@ -8222,6 +8487,7 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TreeView,
   TwoTierBadge,
   WizardLayout,
   actionFooterStatusVariants,
@@ -8293,6 +8559,8 @@ export {
   toast,
   toastVariants,
   toastViewportVariants,
+  treeItemRowVariants,
+  treeViewVariants,
   twoTierBadgeLineVariants,
   twoTierBadgeVariants,
   useOlunTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [