@olundot/ui 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @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
+
+- Add the shared OLUN theme transition contract and theme helper API.
+
+  - `@olundot/tokens` now exposes a 300ms default theme transition token contract.
+  - `@olundot/ui` now exports `getOlunThemeState`, `setOlunTheme`, and `useOlunTheme` for synchronized light/dark theme controls.
+
+### Patch Changes
+
+- Updated dependencies
+  - @olundot/tokens@0.10.0
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -9,10 +9,30 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function cn(...inputs: ClassValue[]): string;
 
+type OlunTheme = "light" | "dark";
+type OlunThemeDuration = "instant" | "fast" | "base" | "slow" | "slower" | "slowest";
+interface OlunThemeState {
+    theme: OlunTheme;
+    resolvedTheme: OlunTheme;
+    storedTheme: OlunTheme | null;
+    source: "attribute" | "stored" | "system" | "default";
+}
+interface SetOlunThemeOptions {
+    duration?: OlunThemeDuration;
+}
+interface UseOlunThemeValue extends OlunThemeState {
+    mounted: boolean;
+    setTheme: (nextTheme: OlunTheme, options?: SetOlunThemeOptions) => void;
+    toggleTheme: (options?: SetOlunThemeOptions) => void;
+}
+declare function getOlunThemeState(): OlunThemeState;
+declare function setOlunTheme(nextTheme: OlunTheme, options?: SetOlunThemeOptions): void;
+declare function useOlunTheme(): UseOlunThemeValue;
+
 type SurfaceLevel = "surface" | "canvas" | "raised";
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "default" | "link" | 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']>;
@@ -1301,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 브랜드 로고.
  *
@@ -1349,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, 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, 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, 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, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inlineAlertVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, skeletonVariants, spinnerVariants, statusBadgeDotVariants, statusBadgeVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, twoTierBadgeLineVariants, twoTierBadgeVariants, 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

@@ -14,6 +14,165 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/lib/theme.ts
+import { useCallback, useEffect, useState } from "react";
+var STORAGE_KEY = "olun-theme";
+var LEGACY_STORAGE_KEY = "olun-theme-mode";
+var TRANSITION_ATTR = "olunThemeTransition";
+var TRANSITION_DURATION_PROPERTY = "--olun-theme-transition-duration";
+var durationMsByToken = {
+  instant: 0,
+  fast: 150,
+  base: 200,
+  slow: 300,
+  slower: 400,
+  slowest: 600
+};
+var transitionCleanupTimer;
+var defaultThemeState = {
+  theme: "light",
+  resolvedTheme: "light",
+  storedTheme: null,
+  source: "default"
+};
+function isOlunTheme(value) {
+  return value === "light" || value === "dark";
+}
+function readStoredTheme() {
+  if (typeof window === "undefined") return null;
+  try {
+    const saved = window.localStorage.getItem(STORAGE_KEY);
+    if (isOlunTheme(saved)) return saved;
+    const legacy = window.localStorage.getItem(LEGACY_STORAGE_KEY);
+    return isOlunTheme(legacy) ? legacy : null;
+  } catch {
+    return null;
+  }
+}
+function resolveSystemTheme() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getReducedMotionDurationMs(duration) {
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return durationMsByToken.fast;
+  }
+  return durationMsByToken[duration];
+}
+function getOlunThemeState() {
+  if (typeof document !== "undefined") {
+    const attr = document.documentElement.getAttribute("data-theme");
+    if (isOlunTheme(attr)) {
+      return {
+        theme: attr,
+        resolvedTheme: attr,
+        storedTheme: readStoredTheme(),
+        source: "attribute"
+      };
+    }
+  }
+  const storedTheme = readStoredTheme();
+  if (storedTheme) {
+    return {
+      theme: storedTheme,
+      resolvedTheme: storedTheme,
+      storedTheme,
+      source: "stored"
+    };
+  }
+  if (typeof window !== "undefined") {
+    const systemTheme = resolveSystemTheme();
+    return {
+      theme: systemTheme,
+      resolvedTheme: systemTheme,
+      storedTheme: null,
+      source: "system"
+    };
+  }
+  return defaultThemeState;
+}
+function setOlunTheme(nextTheme, options = {}) {
+  if (typeof document === "undefined") return;
+  const duration = options.duration ?? "slow";
+  const root = document.documentElement;
+  if (transitionCleanupTimer !== void 0) {
+    window.clearTimeout(transitionCleanupTimer);
+    transitionCleanupTimer = void 0;
+  }
+  if (duration !== "instant") {
+    root.dataset[TRANSITION_ATTR] = "true";
+    root.style.setProperty(
+      TRANSITION_DURATION_PROPERTY,
+      `var(--duration-${duration})`
+    );
+    void root.offsetWidth;
+  }
+  root.setAttribute("data-theme", nextTheme);
+  root.setAttribute("data-theme-mode", nextTheme);
+  try {
+    window.localStorage.setItem(STORAGE_KEY, nextTheme);
+    window.localStorage.removeItem(LEGACY_STORAGE_KEY);
+  } catch {
+  }
+  if (duration !== "instant") {
+    const cleanupDelay = getReducedMotionDurationMs(duration) + 80;
+    transitionCleanupTimer = window.setTimeout(() => {
+      delete root.dataset[TRANSITION_ATTR];
+      root.style.removeProperty(TRANSITION_DURATION_PROPERTY);
+      transitionCleanupTimer = void 0;
+    }, cleanupDelay);
+  }
+}
+function useOlunTheme() {
+  const [state, setState] = useState(defaultThemeState);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    const sync = () => setState(getOlunThemeState());
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    const onStorage = (event) => {
+      if (event.key === STORAGE_KEY || event.key === LEGACY_STORAGE_KEY) sync();
+    };
+    window.addEventListener("storage", onStorage);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("storage", onStorage);
+    };
+  }, []);
+  const setTheme = useCallback(
+    (nextTheme, options) => {
+      setState((current) => ({
+        theme: nextTheme,
+        resolvedTheme: nextTheme,
+        storedTheme: nextTheme,
+        source: "attribute"
+      }));
+      setOlunTheme(nextTheme, options);
+    },
+    []
+  );
+  const toggleTheme = useCallback(
+    (options) => {
+      const nextTheme = state.resolvedTheme === "dark" ? "light" : "dark";
+      setTheme(nextTheme, options);
+    },
+    [setTheme, state.resolvedTheme]
+  );
+  return {
+    ...state,
+    mounted,
+    setTheme,
+    toggleTheme
+  };
+}
+
 // src/components/ui/button.tsx
 import * as React from "react";
 import { cva } from "class-variance-authority";
@@ -7728,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,
@@ -7742,7 +8166,7 @@ function OlunSymbol({ size = 28, className }) {
       className,
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           "circle",
           {
             cx: "108",
@@ -7754,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)" })
       ]
     }
   );
@@ -7765,7 +8189,7 @@ function OlunLogo({
   showSymbol = true,
   className
 }) {
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className,
@@ -7775,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: {
@@ -7788,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: "." })
             ]
           }
         )
@@ -7798,46 +8222,15 @@ function OlunLogo({
 }
 
 // src/components/branding/theme-toggle.tsx
-import { useEffect as useEffect4, useState as useState13 } from "react";
 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 [theme, setTheme] = useState13("light");
-  useEffect4(() => {
-    const resolve = () => {
-      const attr = document.documentElement.getAttribute("data-theme");
-      if (attr === "light" || attr === "dark") return attr;
-      const stored = localStorage.getItem("olun-theme");
-      if (stored === "light" || stored === "dark") return stored;
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    };
-    setTheme(resolve());
-    const sync = () => setTheme(resolve());
-    const observer = new MutationObserver(sync);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"]
-    });
-    const onStorage = (e) => {
-      if (e.key === "olun-theme") sync();
-    };
-    window.addEventListener("storage", onStorage);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("storage", onStorage);
-    };
-  }, []);
-  function toggle() {
-    const next = theme === "dark" ? "light" : "dark";
-    setTheme(next);
-    document.documentElement.setAttribute("data-theme", next);
-    localStorage.setItem("olun-theme", next);
-  }
-  const Icon = theme === "dark" ? Moon : Sun;
-  return /* @__PURE__ */ jsx52(
+  const { resolvedTheme, toggleTheme } = useOlunTheme();
+  const Icon = resolvedTheme === "dark" ? Moon : Sun;
+  return /* @__PURE__ */ jsx53(
     "button",
     {
-      onClick: toggle,
+      onClick: () => toggleTheme(),
       className: cn(
         "inline-flex size-[36px] items-center justify-center rounded-sm",
         "text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
@@ -7845,54 +8238,21 @@ function ThemeToggle({ className }) {
         className
       ),
       "aria-label": "\uD14C\uB9C8 \uC804\uD658",
-      title: theme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
-      children: /* @__PURE__ */ jsx52(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
+      title: resolvedTheme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
+      children: /* @__PURE__ */ jsx53(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
     }
   );
 }
 
 // src/components/branding/theme-fab.tsx
-import { useEffect as useEffect5, useState as useState14 } from "react";
 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 [theme, setTheme] = useState14("light");
-  const [mounted, setMounted] = useState14(false);
-  useEffect5(() => {
-    setMounted(true);
-    const resolve = () => {
-      const attr = document.documentElement.getAttribute("data-theme");
-      if (attr === "light" || attr === "dark") return attr;
-      const stored = localStorage.getItem("olun-theme");
-      if (stored === "light" || stored === "dark") return stored;
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    };
-    setTheme(resolve());
-    const sync = () => setTheme(resolve());
-    const observer = new MutationObserver(sync);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"]
-    });
-    const onStorage = (e) => {
-      if (e.key === "olun-theme") sync();
-    };
-    window.addEventListener("storage", onStorage);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("storage", onStorage);
-    };
-  }, []);
-  function toggle() {
-    const next = theme === "dark" ? "light" : "dark";
-    setTheme(next);
-    document.documentElement.setAttribute("data-theme", next);
-    localStorage.setItem("olun-theme", next);
-  }
+  const { mounted, resolvedTheme, toggleTheme } = useOlunTheme();
   if (!mounted) {
     return null;
   }
-  const Icon = theme === "dark" ? Moon2 : Sun2;
+  const Icon = resolvedTheme === "dark" ? Moon2 : Sun2;
   const isCircle = variant === "circle";
   const baseStyle = {
     position: "fixed",
@@ -7926,13 +8286,13 @@ function ThemeFab({ variant = "square" } = {}) {
     WebkitBackdropFilter: "blur(16px)",
     zIndex: 9999
   };
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "button",
     {
-      onClick: toggle,
+      onClick: () => toggleTheme(),
       "aria-label": "\uD14C\uB9C8 \uC804\uD658",
-      "aria-pressed": theme === "light",
-      title: theme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
+      "aria-pressed": resolvedTheme === "light",
+      title: resolvedTheme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
       className: "transition-colors motion-reduce:transition-none",
       style: { ...baseStyle, ...isCircle ? circleStyle : squareStyle },
       onMouseEnter: (e) => {
@@ -7951,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,
@@ -7963,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",
@@ -7992,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,
@@ -8010,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))
     }
   );
 }
@@ -8127,6 +8487,7 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TreeView,
   TwoTierBadge,
   WizardLayout,
   actionFooterStatusVariants,
@@ -8160,6 +8521,7 @@ export {
   formFieldLabelClassName,
   formFieldRequiredClassName,
   formFieldVariants,
+  getOlunThemeState,
   getToastDuration,
   iconButtonBadgeVariants,
   iconButtonVariants,
@@ -8183,6 +8545,7 @@ export {
   searchFieldVariants,
   selectMessageVariants,
   selectVariants,
+  setOlunTheme,
   skeletonVariants,
   spinnerVariants,
   statusBadgeDotVariants,
@@ -8196,7 +8559,10 @@ export {
   toast,
   toastVariants,
   toastViewportVariants,
+  treeItemRowVariants,
+  treeViewVariants,
   twoTierBadgeLineVariants,
   twoTierBadgeVariants,
+  useOlunTheme,
   usePermission
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [
@@ -14,7 +14,7 @@
   "homepage": "https://olun-design-system.vercel.app",
   "repository": {
     "type": "git",
-    "url": "https://github.com/armedical-dev/olun-design-system",
+    "url": "https://github.com/olundot/olun-design-system",
     "directory": "packages/ui"
   },
   "type": "module",
@@ -44,7 +44,7 @@
     "lucide-react": "^1.8.0",
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3.5.0",
-    "@olundot/tokens": "^0.9.0"
+    "@olundot/tokens": "^0.10.0"
   },
   "peerDependencies": {
     "react": ">=18",