@olundot/ui 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @olundot/ui
2
2
 
3
+ ## 0.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - d5616e4: Add DataTable sortable-header pointer affordance and document the Button/SearchField cross-control height map.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [d5616e4]
12
+ - @olundot/tokens@0.11.0
13
+
14
+ ## 0.6.0
15
+
16
+ ### Minor Changes
17
+
18
+ - de4b5fe: Add `TreeView` — a WAI-ARIA tree (APG tree pattern, single-select) for hierarchical navigation such as folder/classification browsers.
19
+
20
+ - Data-driven `nodes` with a `renderItem` render-prop so consumers own item content (icon + label/link) while the DS owns tree semantics.
21
+ - Generic over `T extends TreeNode`; controlled `selectedId` and controlled/uncontrolled expansion (`expandedIds` / `defaultExpandedIds` + `onExpandedChange`), `onSelect`.
22
+ - Optional `selectionAriaCurrent` puts `aria-current` (e.g. `"page"`) on the selected node for navigation trees, alongside `aria-selected`.
23
+ - 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).
24
+ - 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.
25
+ - Works when item content contains a focusable link (give inner links `tabIndex={-1}`; activation preserved on pointer).
26
+
27
+ 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.
28
+
29
+ New exports: `TreeView`, `treeViewVariants`, `treeItemRowVariants`, `TreeNode`, `TreeItemState`, `TreeViewProps`, `TreeItemRowVariantProps`.
30
+
3
31
  ## 0.5.0
4
32
 
5
33
  ### Minor Changes
package/dist/index.d.ts CHANGED
@@ -32,8 +32,8 @@ declare function useOlunTheme(): UseOlunThemeValue;
32
32
  type SurfaceLevel = "surface" | "canvas" | "raised";
33
33
 
34
34
  declare const buttonVariants: (props?: ({
35
- variant?: "default" | "primary" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
36
- size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
35
+ variant?: "primary" | "secondary" | "destructive" | "default" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "link" | null | undefined;
36
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | "icon-xs" | null | undefined;
37
37
  } & class_variance_authority_types.ClassProp) | undefined) => string;
38
38
  type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
39
39
  type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
@@ -54,7 +54,7 @@ type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading'
54
54
  variant?: ButtonVariant;
55
55
  duration?: number;
56
56
  };
57
- declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
57
+ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant" | "size" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
58
58
  value: string;
59
59
  label?: React.ReactNode;
60
60
  copiedLabel?: React.ReactNode;
@@ -70,7 +70,7 @@ declare const inputVariants: (props?: ({
70
70
  surface?: SurfaceLevel | null | undefined;
71
71
  } & class_variance_authority_types.ClassProp) | undefined) => string;
72
72
  declare const inputMessageVariants: (props?: ({
73
- state?: "default" | "error" | "success" | null | undefined;
73
+ state?: "error" | "success" | "default" | null | undefined;
74
74
  size?: "sm" | "md" | "lg" | null | undefined;
75
75
  } & class_variance_authority_types.ClassProp) | undefined) => string;
76
76
  type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
@@ -119,11 +119,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
119
119
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
120
120
 
121
121
  declare const fileUploadZoneVariants: (props?: ({
122
- size?: "default" | "compact" | null | undefined;
122
+ size?: "compact" | "default" | null | undefined;
123
123
  surface?: SurfaceLevel | null | undefined;
124
124
  } & class_variance_authority_types.ClassProp) | undefined) => string;
125
125
  declare const fileUploadIconVariants: (props?: ({
126
- size?: "default" | "compact" | null | undefined;
126
+ size?: "compact" | "default" | null | undefined;
127
127
  } & class_variance_authority_types.ClassProp) | undefined) => string;
128
128
  interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
129
129
  accept?: string;
@@ -142,10 +142,10 @@ interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelEl
142
142
  declare const FileUploadZone: React.ForwardRefExoticComponent<FileUploadZoneProps & React.RefAttributes<HTMLLabelElement>>;
143
143
 
144
144
  declare const alertVariants: (props?: ({
145
- variant?: "error" | "success" | "info" | "warning" | null | undefined;
145
+ variant?: "error" | "warning" | "info" | "success" | null | undefined;
146
146
  } & class_variance_authority_types.ClassProp) | undefined) => string;
147
147
  declare const inlineAlertVariants: (props?: ({
148
- variant?: "error" | "success" | "info" | "warning" | null | undefined;
148
+ variant?: "error" | "warning" | "info" | "success" | null | undefined;
149
149
  surface?: "filled" | "plain" | null | undefined;
150
150
  } & class_variance_authority_types.ClassProp) | undefined) => string;
151
151
  type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
@@ -175,7 +175,7 @@ declare const textareaVariants: (props?: ({
175
175
  surface?: SurfaceLevel | null | undefined;
176
176
  } & class_variance_authority_types.ClassProp) | undefined) => string;
177
177
  declare const textareaMessageVariants: (props?: ({
178
- state?: "default" | "error" | "success" | null | undefined;
178
+ state?: "error" | "success" | "default" | null | undefined;
179
179
  } & class_variance_authority_types.ClassProp) | undefined) => string;
180
180
  type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
181
181
  /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -230,7 +230,7 @@ declare const selectVariants: (props?: ({
230
230
  surface?: SurfaceLevel | null | undefined;
231
231
  } & class_variance_authority_types.ClassProp) | undefined) => string;
232
232
  declare const selectMessageVariants: (props?: ({
233
- state?: "default" | "error" | "success" | null | undefined;
233
+ state?: "error" | "success" | "default" | null | undefined;
234
234
  size?: "sm" | "md" | "lg" | null | undefined;
235
235
  } & class_variance_authority_types.ClassProp) | undefined) => string;
236
236
  type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
@@ -854,8 +854,8 @@ declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProp
854
854
  declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<Popover$1.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
855
855
 
856
856
  declare const badgeVariants: (props?: ({
857
- variant?: "status" | "semantic" | "neutral" | "brand" | "pill" | "vibrant" | null | undefined;
858
- tone?: "accent" | "danger" | "success" | "info" | "warning" | "neutral" | null | undefined;
857
+ variant?: "brand" | "neutral" | "status" | "semantic" | "pill" | "vibrant" | null | undefined;
858
+ tone?: "accent" | "warning" | "info" | "success" | "neutral" | "danger" | null | undefined;
859
859
  size?: "xs" | "sm" | "md" | null | undefined;
860
860
  } & class_variance_authority_types.ClassProp) | undefined) => string;
861
861
  declare const badgeDotVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -873,7 +873,7 @@ declare const twoTierBadgeVariants: (props?: ({
873
873
  } & class_variance_authority_types.ClassProp) | undefined) => string;
874
874
  declare const twoTierBadgeLineVariants: (props?: ({
875
875
  tier?: "primary" | "secondary" | null | undefined;
876
- intent?: "danger" | "success" | "warning" | "neutral" | "brand" | "muted" | null | undefined;
876
+ intent?: "brand" | "muted" | "warning" | "success" | "neutral" | "danger" | null | undefined;
877
877
  } & class_variance_authority_types.ClassProp) | undefined) => string;
878
878
  type TwoTierBadgeIntent = NonNullable<VariantProps<typeof twoTierBadgeLineVariants>["intent"]>;
879
879
  interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof twoTierBadgeVariants> {
@@ -887,7 +887,7 @@ interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLDivElement>, Varian
887
887
  declare const TwoTierBadge: React.ForwardRefExoticComponent<TwoTierBadgeProps & React.RefAttributes<HTMLDivElement>>;
888
888
 
889
889
  declare const statusBadgeVariants: (props?: ({
890
- status?: "error" | "success" | "info" | "warning" | "active" | "pending" | "archived" | null | undefined;
890
+ status?: "error" | "warning" | "info" | "success" | "active" | "pending" | "archived" | null | undefined;
891
891
  size?: "xs" | "sm" | "md" | null | undefined;
892
892
  } & class_variance_authority_types.ClassProp) | undefined) => string;
893
893
  declare const statusBadgeDotVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -917,12 +917,12 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
917
917
 
918
918
  declare const chipVariants: (props?: ({
919
919
  variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
920
- tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
920
+ tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
921
921
  size?: "sm" | "md" | "lg" | null | undefined;
922
922
  pressed?: boolean | null | undefined;
923
923
  } & class_variance_authority_types.ClassProp) | undefined) => string;
924
924
  declare const chipCountVariants: (props?: ({
925
- tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
925
+ tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
926
926
  size?: "sm" | "md" | "lg" | null | undefined;
927
927
  } & class_variance_authority_types.ClassProp) | undefined) => string;
928
928
  type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
@@ -1116,7 +1116,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
1116
1116
  declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
1117
1117
 
1118
1118
  declare const toastVariants: (props?: ({
1119
- variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
1119
+ variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
1120
1120
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1121
1121
  declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
1122
1122
  type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -1157,17 +1157,17 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
1157
1157
  declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
1158
1158
 
1159
1159
  declare const otpFieldVariants: (props?: ({
1160
- size?: "default" | "compact" | null | undefined;
1160
+ size?: "compact" | "default" | null | undefined;
1161
1161
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1162
1162
  declare const otpFieldGroupVariants: (props?: ({
1163
- size?: "default" | "compact" | null | undefined;
1163
+ size?: "compact" | "default" | null | undefined;
1164
1164
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1165
1165
  declare const otpCellVariants: (props?: ({
1166
- size?: "default" | "compact" | null | undefined;
1166
+ size?: "compact" | "default" | null | undefined;
1167
1167
  surface?: SurfaceLevel | null | undefined;
1168
1168
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1169
1169
  declare const otpFieldMessageVariants: (props?: ({
1170
- state?: "default" | "error" | null | undefined;
1170
+ state?: "error" | "default" | null | undefined;
1171
1171
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1172
1172
  type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
1173
1173
  interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -1223,11 +1223,11 @@ declare const checkboxBoxVariants: (props?: ({
1223
1223
  size?: "sm" | "md" | null | undefined;
1224
1224
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1225
1225
  declare const checkboxGroupItemVariants: (props?: ({
1226
- appearance?: "plain" | "card" | null | undefined;
1226
+ appearance?: "card" | "plain" | null | undefined;
1227
1227
  density?: "compact" | "comfortable" | null | undefined;
1228
1228
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1229
1229
  declare const checkboxGroupBoxVariants: (props?: ({
1230
- appearance?: "plain" | "card" | null | undefined;
1230
+ appearance?: "card" | "plain" | null | undefined;
1231
1231
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1232
1232
  type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
1233
1233
  type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -1252,7 +1252,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
1252
1252
  declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
1253
1253
 
1254
1254
  declare const checkboxGroupVariants: (props?: ({
1255
- appearance?: "plain" | "card" | null | undefined;
1255
+ appearance?: "card" | "plain" | null | undefined;
1256
1256
  orientation?: "horizontal" | "vertical" | null | undefined;
1257
1257
  columns?: "one" | "two" | "three" | null | undefined;
1258
1258
  } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1273,16 +1273,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
1273
1273
  declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
1274
1274
 
1275
1275
  declare const radioGroupVariants: (props?: ({
1276
- appearance?: "plain" | "card" | null | undefined;
1276
+ appearance?: "card" | "plain" | null | undefined;
1277
1277
  orientation?: "horizontal" | "vertical" | null | undefined;
1278
1278
  columns?: "one" | "two" | "three" | null | undefined;
1279
1279
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1280
1280
  declare const radioVariants: (props?: ({
1281
- appearance?: "plain" | "card" | null | undefined;
1281
+ appearance?: "card" | "plain" | null | undefined;
1282
1282
  density?: "compact" | "comfortable" | null | undefined;
1283
1283
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1284
1284
  declare const radioControlVariants: (props?: ({
1285
- appearance?: "plain" | "card" | null | undefined;
1285
+ appearance?: "card" | "plain" | null | undefined;
1286
1286
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1287
1287
  type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
1288
1288
  type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;
@@ -1321,6 +1321,56 @@ interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
1321
1321
  }
1322
1322
  declare function Progress({ value, max, status, width, height, className, style, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
1323
1323
 
1324
+ /**
1325
+ * A single node in a TreeView. Consumers extend this shape with their own
1326
+ * fields (title, href, icon, …) and make the component generic over that type.
1327
+ * Only `id` (stable, unique within the tree) is required by the DS; children
1328
+ * are read through `getChildren` (default: `node.children`).
1329
+ */
1330
+ interface TreeNode {
1331
+ id: string;
1332
+ children?: TreeNode[];
1333
+ }
1334
+ /** State handed to `renderItem` so the consumer can reflect tree status. */
1335
+ interface TreeItemState {
1336
+ expanded: boolean;
1337
+ selected: boolean;
1338
+ /** 1-based ARIA level (roots are level 1). */
1339
+ depth: number;
1340
+ hasChildren: boolean;
1341
+ }
1342
+ interface TreeViewProps<T extends TreeNode> extends Omit<React.HTMLAttributes<HTMLUListElement>, "onSelect" | "role"> {
1343
+ /** Root nodes of the tree. */
1344
+ nodes: T[];
1345
+ /** Controlled "current" node (single-select). */
1346
+ selectedId?: string;
1347
+ /** When set, the selected node also carries this `aria-current` value. Use
1348
+ * `"page"` for navigation trees so assistive tech announces the current
1349
+ * location (e.g. the open folder). Default: no `aria-current`. */
1350
+ selectionAriaCurrent?: React.AriaAttributes["aria-current"];
1351
+ /** Initial expanded node ids (uncontrolled expansion). */
1352
+ defaultExpandedIds?: string[];
1353
+ /** Controlled expanded node ids. When set, expansion is fully controlled. */
1354
+ expandedIds?: string[];
1355
+ /** Fires whenever the expanded set changes (controlled or uncontrolled). */
1356
+ onExpandedChange?: (ids: string[]) => void;
1357
+ /** Fires when a node is activated (Enter/Space or click). */
1358
+ onSelect?: (id: string, node: T) => void;
1359
+ /** Render the item's content (icon + label/link). Receives node state. */
1360
+ renderItem: (node: T, state: TreeItemState) => React.ReactNode;
1361
+ /** Read a node's children. Default: `node.children`. */
1362
+ getChildren?: (node: T) => T[] | undefined;
1363
+ /** Required: the tree must be labelled (WAI-ARIA tree). */
1364
+ "aria-label": string;
1365
+ className?: string;
1366
+ }
1367
+ declare const treeViewVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
1368
+ declare const treeItemRowVariants: (props?: ({
1369
+ selected?: boolean | null | undefined;
1370
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1371
+ type TreeItemRowVariantProps = VariantProps<typeof treeItemRowVariants>;
1372
+ 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;
1373
+
1324
1374
  /**
1325
1375
  * OLUN 브랜드 로고.
1326
1376
  *
@@ -1369,4 +1419,4 @@ interface OrganizationLogoProps extends Omit<SVGProps<SVGSVGElement>, "width" |
1369
1419
  }
1370
1420
  declare function OrganizationLogo({ organization, size, className, style, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: OrganizationLogoProps): react_jsx_runtime.JSX.Element;
1371
1421
 
1372
- 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 };
1422
+ 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 CHANGED
@@ -203,6 +203,7 @@ var buttonVariants = cva(
203
203
  link: "border-transparent bg-transparent px-0 text-[var(--accent-fg)] underline-offset-4 hover:underline"
204
204
  },
205
205
  size: {
206
+ // Cross-control height map: pair Button xs/sm/md with field controls sm/md/lg (32/34/38px).
206
207
  xs: "h-[32px] gap-[6px] px-pad-compact-x py-pad-compact-y text-[12px] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
207
208
  sm: "h-[34px] gap-[6px] px-pad-compact-x py-pad-compact-y text-body-sm [&_svg]:size-[16px]",
208
209
  md: "h-[38px] gap-[6px] px-pad-default-x py-pad-default-y text-body-sm [&_svg]:size-[16px]",
@@ -4269,7 +4270,7 @@ function DataTableInner({
4269
4270
  {
4270
4271
  type: "button",
4271
4272
  className: cn(
4272
- "inline-flex min-w-0 items-center gap-[var(--space-0-5)] rounded-[var(--radius-xs)]",
4273
+ "inline-flex min-w-0 cursor-pointer items-center gap-[var(--space-0-5)] rounded-[var(--radius-xs)]",
4273
4274
  "text-inherit transition-colors motion-reduce:transition-none",
4274
4275
  "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]"
4275
4276
  ),
@@ -7330,6 +7331,7 @@ import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
7330
7331
  var searchFieldVariants = cva26("relative flex w-full items-center", {
7331
7332
  variants: {
7332
7333
  size: {
7334
+ // Field-control scale follows Select: sm/md/lg = 32/34/38px. Pair with Button xs/sm/md.
7333
7335
  sm: "h-[var(--space-4)]",
7334
7336
  md: "h-[34px]",
7335
7337
  lg: "h-[38px]"
@@ -7887,10 +7889,275 @@ function Progress({
7887
7889
  );
7888
7890
  }
7889
7891
 
7890
- // src/components/branding/olun-logo.tsx
7892
+ // src/components/ui/tree-view.tsx
7893
+ import * as React41 from "react";
7894
+ import { ChevronRight as ChevronRight2 } from "lucide-react";
7895
+ import { cva as cva29 } from "class-variance-authority";
7891
7896
  import { jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
7897
+ var treeViewVariants = cva29(
7898
+ "m-0 list-none p-[var(--space-0-5)] text-body-sm text-foreground"
7899
+ );
7900
+ var treeItemRowVariants = cva29(
7901
+ [
7902
+ "flex min-h-[var(--touch-target-min)] w-full cursor-pointer select-none items-center gap-[var(--space-1)]",
7903
+ "rounded-[var(--radius-sm)] py-[var(--space-1)] pr-[var(--space-1-5)]",
7904
+ "text-text-secondary transition-colors duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
7905
+ "hover:bg-[var(--action-hover)] hover:text-foreground",
7906
+ // Roving focus lives on the treeitem <li> (named group/treeitem); the ring is
7907
+ // painted on the visual row so it never wraps the nested child group.
7908
+ "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)]"
7909
+ ].join(" "),
7910
+ {
7911
+ variants: {
7912
+ selected: {
7913
+ // Selected = subtle fill (action-selected), matching nav selected state.
7914
+ // Never a left border (OLUN selected-state doctrine).
7915
+ true: "bg-[var(--action-selected)] font-medium text-foreground",
7916
+ false: ""
7917
+ }
7918
+ },
7919
+ defaultVariants: {
7920
+ selected: false
7921
+ }
7922
+ }
7923
+ );
7924
+ function defaultGetChildren(node) {
7925
+ return node.children;
7926
+ }
7927
+ function flattenVisibleNodes(nodes, getChildren, expandedSet, depth = 1, parentId = null, acc = []) {
7928
+ for (const node of nodes) {
7929
+ const children = getChildren(node);
7930
+ const hasChildren = Array.isArray(children) && children.length > 0;
7931
+ const expanded = hasChildren && expandedSet.has(node.id);
7932
+ acc.push({ node, id: node.id, depth, hasChildren, expanded, parentId });
7933
+ if (expanded && children) {
7934
+ flattenVisibleNodes(children, getChildren, expandedSet, depth + 1, node.id, acc);
7935
+ }
7936
+ }
7937
+ return acc;
7938
+ }
7939
+ function getTreeViewKeyAction(key, items, activeId) {
7940
+ if (items.length === 0 || activeId === null) return null;
7941
+ const index = items.findIndex((item) => item.id === activeId);
7942
+ if (index === -1) return null;
7943
+ const current = items[index];
7944
+ switch (key) {
7945
+ case "ArrowDown": {
7946
+ const next = items[index + 1];
7947
+ return next ? { type: "focus", id: next.id } : null;
7948
+ }
7949
+ case "ArrowUp": {
7950
+ const prev = items[index - 1];
7951
+ return prev ? { type: "focus", id: prev.id } : null;
7952
+ }
7953
+ case "Home":
7954
+ return { type: "focus", id: items[0].id };
7955
+ case "End":
7956
+ return { type: "focus", id: items[items.length - 1].id };
7957
+ case "ArrowRight": {
7958
+ if (current.hasChildren && !current.expanded) {
7959
+ return { type: "expand", id: current.id };
7960
+ }
7961
+ if (current.hasChildren && current.expanded) {
7962
+ const child = items[index + 1];
7963
+ return child && child.parentId === current.id ? { type: "focus", id: child.id } : null;
7964
+ }
7965
+ return null;
7966
+ }
7967
+ case "ArrowLeft": {
7968
+ if (current.hasChildren && current.expanded) {
7969
+ return { type: "collapse", id: current.id };
7970
+ }
7971
+ return current.parentId ? { type: "focus", id: current.parentId } : null;
7972
+ }
7973
+ case "Enter":
7974
+ return { type: "select", id: current.id };
7975
+ case " ":
7976
+ if (current.hasChildren) {
7977
+ return current.expanded ? { type: "collapse", id: current.id } : { type: "expand", id: current.id };
7978
+ }
7979
+ return { type: "select", id: current.id };
7980
+ default:
7981
+ return null;
7982
+ }
7983
+ }
7984
+ function TreeView({
7985
+ nodes,
7986
+ selectedId,
7987
+ selectionAriaCurrent,
7988
+ defaultExpandedIds,
7989
+ expandedIds,
7990
+ onExpandedChange,
7991
+ onSelect,
7992
+ renderItem,
7993
+ getChildren = defaultGetChildren,
7994
+ className,
7995
+ "aria-label": ariaLabel,
7996
+ ...rest
7997
+ }) {
7998
+ const isExpandedControlled = expandedIds !== void 0;
7999
+ const [internalExpanded, setInternalExpanded] = React41.useState(
8000
+ () => defaultExpandedIds ?? []
8001
+ );
8002
+ const expandedList = isExpandedControlled ? expandedIds : internalExpanded;
8003
+ const expandedSet = React41.useMemo(() => new Set(expandedList), [expandedList]);
8004
+ const items = React41.useMemo(
8005
+ () => flattenVisibleNodes(nodes, getChildren, expandedSet),
8006
+ [nodes, getChildren, expandedSet]
8007
+ );
8008
+ const [focusedId, setFocusedId] = React41.useState(null);
8009
+ const visibleIds = items.map((item) => item.id);
8010
+ const activeId = focusedId && visibleIds.includes(focusedId) ? focusedId : selectedId && visibleIds.includes(selectedId) ? selectedId : visibleIds[0] ?? null;
8011
+ const itemRefs = React41.useRef(/* @__PURE__ */ new Map());
8012
+ const commitExpanded = React41.useCallback(
8013
+ (next) => {
8014
+ if (!isExpandedControlled) setInternalExpanded(next);
8015
+ onExpandedChange?.(next);
8016
+ },
8017
+ [isExpandedControlled, onExpandedChange]
8018
+ );
8019
+ const setExpanded = React41.useCallback(
8020
+ (id, expand) => {
8021
+ const has = expandedSet.has(id);
8022
+ if (expand && !has) {
8023
+ commitExpanded([...expandedList, id]);
8024
+ } else if (!expand && has) {
8025
+ commitExpanded(expandedList.filter((value) => value !== id));
8026
+ }
8027
+ },
8028
+ [commitExpanded, expandedList, expandedSet]
8029
+ );
8030
+ const focusItem = React41.useCallback((id) => {
8031
+ setFocusedId(id);
8032
+ itemRefs.current.get(id)?.focus();
8033
+ }, []);
8034
+ const handleKeyDown = (event) => {
8035
+ const target = event.target;
8036
+ if (target.getAttribute("role") !== "treeitem") return;
8037
+ const targetId = target.getAttribute("data-id") ?? activeId;
8038
+ const action = getTreeViewKeyAction(event.key, items, targetId);
8039
+ if (!action) return;
8040
+ event.preventDefault();
8041
+ switch (action.type) {
8042
+ case "focus":
8043
+ focusItem(action.id);
8044
+ break;
8045
+ case "expand":
8046
+ setExpanded(action.id, true);
8047
+ break;
8048
+ case "collapse":
8049
+ setExpanded(action.id, false);
8050
+ break;
8051
+ case "select": {
8052
+ const item = items.find((entry) => entry.id === action.id);
8053
+ if (item) onSelect?.(item.id, item.node);
8054
+ break;
8055
+ }
8056
+ }
8057
+ };
8058
+ function renderLevel(levelNodes, depth) {
8059
+ return levelNodes.map((node) => {
8060
+ const children = getChildren(node);
8061
+ const hasChildren = Array.isArray(children) && children.length > 0;
8062
+ const expanded = hasChildren && expandedSet.has(node.id);
8063
+ const selected = node.id === selectedId;
8064
+ const isActive = node.id === activeId;
8065
+ const itemState = { expanded, selected, depth, hasChildren };
8066
+ return /* @__PURE__ */ jsxs44(
8067
+ "li",
8068
+ {
8069
+ ref: (element) => {
8070
+ if (element) itemRefs.current.set(node.id, element);
8071
+ else itemRefs.current.delete(node.id);
8072
+ },
8073
+ role: "treeitem",
8074
+ "data-slot": "treeitem",
8075
+ "data-id": node.id,
8076
+ "aria-level": depth,
8077
+ "aria-expanded": hasChildren ? expanded : void 0,
8078
+ "aria-selected": selected ? true : void 0,
8079
+ "aria-current": selected && selectionAriaCurrent ? selectionAriaCurrent : void 0,
8080
+ "data-selected": selected ? "true" : void 0,
8081
+ tabIndex: isActive ? 0 : -1,
8082
+ className: "group/treeitem block outline-none",
8083
+ onFocus: (event) => {
8084
+ if (event.target === event.currentTarget) setFocusedId(node.id);
8085
+ },
8086
+ onClick: (event) => {
8087
+ event.stopPropagation();
8088
+ onSelect?.(node.id, node);
8089
+ },
8090
+ children: [
8091
+ /* @__PURE__ */ jsxs44(
8092
+ "span",
8093
+ {
8094
+ "data-slot": "treeitem-row",
8095
+ style: {
8096
+ paddingInlineStart: `calc(var(--space-1) + var(--space-2) * ${depth - 1})`
8097
+ },
8098
+ className: treeItemRowVariants({ selected }),
8099
+ children: [
8100
+ hasChildren ? /* @__PURE__ */ jsx51(
8101
+ "span",
8102
+ {
8103
+ "data-slot": "treeitem-toggle",
8104
+ "aria-hidden": "true",
8105
+ onClick: (event) => {
8106
+ event.stopPropagation();
8107
+ setExpanded(node.id, !expanded);
8108
+ },
8109
+ className: "flex size-[var(--space-2)] shrink-0 items-center justify-center text-text-tertiary",
8110
+ children: /* @__PURE__ */ jsx51(
8111
+ ChevronRight2,
8112
+ {
8113
+ "aria-hidden": "true",
8114
+ "data-slot": "treeitem-chevron",
8115
+ className: cn(
8116
+ "size-[16px] transition-transform duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none",
8117
+ expanded && "rotate-90"
8118
+ ),
8119
+ strokeWidth: 2
8120
+ }
8121
+ )
8122
+ }
8123
+ ) : /* @__PURE__ */ jsx51(
8124
+ "span",
8125
+ {
8126
+ "data-slot": "treeitem-spacer",
8127
+ "aria-hidden": "true",
8128
+ className: "size-[var(--space-2)] shrink-0"
8129
+ }
8130
+ ),
8131
+ /* @__PURE__ */ jsx51("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--space-1)]", children: renderItem(node, itemState) })
8132
+ ]
8133
+ }
8134
+ ),
8135
+ 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
8136
+ ]
8137
+ },
8138
+ node.id
8139
+ );
8140
+ });
8141
+ }
8142
+ return /* @__PURE__ */ jsx51(
8143
+ "ul",
8144
+ {
8145
+ role: "tree",
8146
+ "data-slot": "tree",
8147
+ "aria-label": ariaLabel,
8148
+ "aria-multiselectable": false,
8149
+ className: cn(treeViewVariants(), className),
8150
+ onKeyDown: handleKeyDown,
8151
+ ...rest,
8152
+ children: renderLevel(nodes, 1)
8153
+ }
8154
+ );
8155
+ }
8156
+
8157
+ // src/components/branding/olun-logo.tsx
8158
+ import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
7892
8159
  function OlunSymbol({ size = 28, className }) {
7893
- return /* @__PURE__ */ jsxs44(
8160
+ return /* @__PURE__ */ jsxs45(
7894
8161
  "svg",
7895
8162
  {
7896
8163
  width: size,
@@ -7901,7 +8168,7 @@ function OlunSymbol({ size = 28, className }) {
7901
8168
  className,
7902
8169
  "aria-hidden": "true",
7903
8170
  children: [
7904
- /* @__PURE__ */ jsx51(
8171
+ /* @__PURE__ */ jsx52(
7905
8172
  "circle",
7906
8173
  {
7907
8174
  cx: "108",
@@ -7913,7 +8180,7 @@ function OlunSymbol({ size = 28, className }) {
7913
8180
  style: { color: "var(--text-primary)" }
7914
8181
  }
7915
8182
  ),
7916
- /* @__PURE__ */ jsx51("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-solid)" })
8183
+ /* @__PURE__ */ jsx52("circle", { cx: "185", cy: "175", r: "22", fill: "var(--accent-solid)" })
7917
8184
  ]
7918
8185
  }
7919
8186
  );
@@ -7924,7 +8191,7 @@ function OlunLogo({
7924
8191
  showSymbol = true,
7925
8192
  className
7926
8193
  }) {
7927
- return /* @__PURE__ */ jsxs44(
8194
+ return /* @__PURE__ */ jsxs45(
7928
8195
  "div",
7929
8196
  {
7930
8197
  className,
@@ -7934,8 +8201,8 @@ function OlunLogo({
7934
8201
  gap: "var(--space-1-5)"
7935
8202
  },
7936
8203
  children: [
7937
- showSymbol && /* @__PURE__ */ jsx51(OlunSymbol, { size: symbolSize }),
7938
- /* @__PURE__ */ jsxs44(
8204
+ showSymbol && /* @__PURE__ */ jsx52(OlunSymbol, { size: symbolSize }),
8205
+ /* @__PURE__ */ jsxs45(
7939
8206
  "span",
7940
8207
  {
7941
8208
  style: {
@@ -7947,7 +8214,7 @@ function OlunLogo({
7947
8214
  },
7948
8215
  children: [
7949
8216
  "OLUN",
7950
- /* @__PURE__ */ jsx51("span", { style: { color: "var(--accent-fg)" }, children: "." })
8217
+ /* @__PURE__ */ jsx52("span", { style: { color: "var(--accent-fg)" }, children: "." })
7951
8218
  ]
7952
8219
  }
7953
8220
  )
@@ -7958,11 +8225,11 @@ function OlunLogo({
7958
8225
 
7959
8226
  // src/components/branding/theme-toggle.tsx
7960
8227
  import { Sun, Moon } from "lucide-react";
7961
- import { jsx as jsx52 } from "react/jsx-runtime";
8228
+ import { jsx as jsx53 } from "react/jsx-runtime";
7962
8229
  function ThemeToggle({ className }) {
7963
8230
  const { resolvedTheme, toggleTheme } = useOlunTheme();
7964
8231
  const Icon = resolvedTheme === "dark" ? Moon : Sun;
7965
- return /* @__PURE__ */ jsx52(
8232
+ return /* @__PURE__ */ jsx53(
7966
8233
  "button",
7967
8234
  {
7968
8235
  onClick: () => toggleTheme(),
@@ -7974,14 +8241,14 @@ function ThemeToggle({ className }) {
7974
8241
  ),
7975
8242
  "aria-label": "\uD14C\uB9C8 \uC804\uD658",
7976
8243
  title: resolvedTheme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
7977
- children: /* @__PURE__ */ jsx52(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
8244
+ children: /* @__PURE__ */ jsx53(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
7978
8245
  }
7979
8246
  );
7980
8247
  }
7981
8248
 
7982
8249
  // src/components/branding/theme-fab.tsx
7983
8250
  import { Sun as Sun2, Moon as Moon2 } from "lucide-react";
7984
- import { jsx as jsx53 } from "react/jsx-runtime";
8251
+ import { jsx as jsx54 } from "react/jsx-runtime";
7985
8252
  function ThemeFab({ variant = "square" } = {}) {
7986
8253
  const { mounted, resolvedTheme, toggleTheme } = useOlunTheme();
7987
8254
  if (!mounted) {
@@ -8021,7 +8288,7 @@ function ThemeFab({ variant = "square" } = {}) {
8021
8288
  WebkitBackdropFilter: "blur(16px)",
8022
8289
  zIndex: 9999
8023
8290
  };
8024
- return /* @__PURE__ */ jsx53(
8291
+ return /* @__PURE__ */ jsx54(
8025
8292
  "button",
8026
8293
  {
8027
8294
  onClick: () => toggleTheme(),
@@ -8046,7 +8313,7 @@ function ThemeFab({ variant = "square" } = {}) {
8046
8313
  e.currentTarget.style.color = "var(--text-secondary)";
8047
8314
  }
8048
8315
  },
8049
- children: /* @__PURE__ */ jsx53(
8316
+ children: /* @__PURE__ */ jsx54(
8050
8317
  Icon,
8051
8318
  {
8052
8319
  size: isCircle ? 22 : 16,
@@ -8058,7 +8325,7 @@ function ThemeFab({ variant = "square" } = {}) {
8058
8325
  }
8059
8326
 
8060
8327
  // src/components/logos/organization-logo.tsx
8061
- import { jsx as jsx54 } from "react/jsx-runtime";
8328
+ import { jsx as jsx55 } from "react/jsx-runtime";
8062
8329
  var organizationLogoRegistry = {
8063
8330
  jbnu: {
8064
8331
  label: "\uC804\uBD81\uB300\uD559\uAD50 \uC5E0\uBE14\uB7FC",
@@ -8087,7 +8354,7 @@ function OrganizationLogo({
8087
8354
  }) {
8088
8355
  const asset = organizationLogoRegistry[organization];
8089
8356
  const isDecorative = ariaHidden === true || ariaHidden === "true";
8090
- return /* @__PURE__ */ jsx54(
8357
+ return /* @__PURE__ */ jsx55(
8091
8358
  "svg",
8092
8359
  {
8093
8360
  viewBox: asset.viewBox,
@@ -8105,7 +8372,7 @@ function OrganizationLogo({
8105
8372
  ...style
8106
8373
  },
8107
8374
  ...props,
8108
- children: asset.paths.map((path) => /* @__PURE__ */ jsx54("path", { d: path }, path))
8375
+ children: asset.paths.map((path) => /* @__PURE__ */ jsx55("path", { d: path }, path))
8109
8376
  }
8110
8377
  );
8111
8378
  }
@@ -8222,6 +8489,7 @@ export {
8222
8489
  TooltipContent,
8223
8490
  TooltipProvider,
8224
8491
  TooltipTrigger,
8492
+ TreeView,
8225
8493
  TwoTierBadge,
8226
8494
  WizardLayout,
8227
8495
  actionFooterStatusVariants,
@@ -8293,6 +8561,8 @@ export {
8293
8561
  toast,
8294
8562
  toastVariants,
8295
8563
  toastViewportVariants,
8564
+ treeItemRowVariants,
8565
+ treeViewVariants,
8296
8566
  twoTierBadgeLineVariants,
8297
8567
  twoTierBadgeVariants,
8298
8568
  useOlunTheme,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olundot/ui",
3
- "version": "0.5.0",
3
+ "version": "0.7.0",
4
4
  "description": "OLUN. shared React UI components built on OLUN design tokens",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -44,7 +44,7 @@
44
44
  "lucide-react": "^1.8.0",
45
45
  "radix-ui": "^1.4.3",
46
46
  "tailwind-merge": "^3.5.0",
47
- "@olundot/tokens": "^0.10.0"
47
+ "@olundot/tokens": "^0.11.0"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "react": ">=18",