@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 +28 -0
- package/dist/index.d.ts +78 -28
- package/dist/index.js +288 -18
- package/package.json +2 -2
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?: "
|
|
36
|
-
size?: "
|
|
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, "
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
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" | "
|
|
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" | "
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
858
|
-
tone?: "accent" | "
|
|
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?: "
|
|
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" | "
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
1160
|
+
size?: "compact" | "default" | null | undefined;
|
|
1161
1161
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1162
1162
|
declare const otpFieldGroupVariants: (props?: ({
|
|
1163
|
-
size?: "
|
|
1163
|
+
size?: "compact" | "default" | null | undefined;
|
|
1164
1164
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1165
1165
|
declare const otpCellVariants: (props?: ({
|
|
1166
|
-
size?: "
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
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/
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
7938
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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.
|
|
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.
|
|
47
|
+
"@olundot/tokens": "^0.11.0"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"react": ">=18",
|