@gtkx/react 0.12.1 → 0.13.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.
Files changed (80) hide show
  1. package/README.md +1 -1
  2. package/dist/generated/jsx.d.ts +32 -18
  3. package/dist/host-config.js +3 -3
  4. package/dist/jsx.d.ts +524 -366
  5. package/dist/jsx.js +401 -353
  6. package/dist/nodes/action-row-child.d.ts +4 -11
  7. package/dist/nodes/action-row-child.js +10 -66
  8. package/dist/nodes/action-row.js +21 -4
  9. package/dist/nodes/application.js +22 -3
  10. package/dist/nodes/autowrapped.js +13 -3
  11. package/dist/nodes/calendar-mark.d.ts +15 -0
  12. package/dist/nodes/calendar-mark.js +29 -0
  13. package/dist/nodes/calendar.d.ts +1 -0
  14. package/dist/nodes/calendar.js +70 -0
  15. package/dist/nodes/column-view-column.d.ts +1 -0
  16. package/dist/nodes/column-view-column.js +4 -0
  17. package/dist/nodes/column-view.js +24 -7
  18. package/dist/nodes/expander-row-child.d.ts +15 -0
  19. package/dist/nodes/expander-row-child.js +20 -0
  20. package/dist/nodes/expander-row.d.ts +1 -0
  21. package/dist/nodes/expander-row.js +54 -0
  22. package/dist/nodes/fixed-child.js +10 -8
  23. package/dist/nodes/grid-child.js +10 -8
  24. package/dist/nodes/index.d.ts +12 -0
  25. package/dist/nodes/index.js +12 -0
  26. package/dist/nodes/internal/list-item-renderer.d.ts +3 -0
  27. package/dist/nodes/internal/list-item-renderer.js +25 -9
  28. package/dist/nodes/internal/list-store.js +2 -2
  29. package/dist/nodes/internal/tree-list-item-renderer.d.ts +8 -0
  30. package/dist/nodes/internal/tree-list-item-renderer.js +68 -24
  31. package/dist/nodes/internal/tree-store.js +3 -4
  32. package/dist/nodes/level-bar-offset.d.ts +13 -0
  33. package/dist/nodes/level-bar-offset.js +35 -0
  34. package/dist/nodes/level-bar.d.ts +1 -0
  35. package/dist/nodes/level-bar.js +82 -0
  36. package/dist/nodes/list-view.js +14 -7
  37. package/dist/nodes/menu.js +4 -4
  38. package/dist/nodes/models/list.d.ts +2 -1
  39. package/dist/nodes/models/list.js +21 -12
  40. package/dist/nodes/models/menu.d.ts +1 -0
  41. package/dist/nodes/models/menu.js +24 -17
  42. package/dist/nodes/models/tree-list.d.ts +2 -1
  43. package/dist/nodes/models/tree-list.js +43 -24
  44. package/dist/nodes/navigation-page.d.ts +16 -0
  45. package/dist/nodes/navigation-page.js +58 -0
  46. package/dist/nodes/navigation-view.d.ts +1 -0
  47. package/dist/nodes/navigation-view.js +105 -0
  48. package/dist/nodes/notebook-page-tab.js +1 -1
  49. package/dist/nodes/notebook-page.js +3 -2
  50. package/dist/nodes/notebook.js +3 -3
  51. package/dist/nodes/overlay-child.js +29 -14
  52. package/dist/nodes/pack-child.d.ts +4 -11
  53. package/dist/nodes/pack-child.js +10 -66
  54. package/dist/nodes/pack.js +21 -4
  55. package/dist/nodes/popover-menu.js +15 -12
  56. package/dist/nodes/scale-mark.d.ts +17 -0
  57. package/dist/nodes/scale-mark.js +38 -0
  58. package/dist/nodes/scale.d.ts +1 -0
  59. package/dist/nodes/scale.js +70 -0
  60. package/dist/nodes/simple-list-view.js +3 -3
  61. package/dist/nodes/slot.js +2 -2
  62. package/dist/nodes/stack-page.js +7 -7
  63. package/dist/nodes/stack.js +5 -5
  64. package/dist/nodes/toggle-group.d.ts +1 -0
  65. package/dist/nodes/toggle-group.js +48 -0
  66. package/dist/nodes/toggle.d.ts +15 -0
  67. package/dist/nodes/toggle.js +70 -0
  68. package/dist/nodes/toolbar-child.js +18 -16
  69. package/dist/nodes/tree-list-view.js +16 -7
  70. package/dist/nodes/virtual-child.d.ts +18 -0
  71. package/dist/nodes/virtual-child.js +62 -0
  72. package/dist/nodes/widget.js +22 -8
  73. package/dist/nodes/window.d.ts +22 -0
  74. package/dist/nodes/window.js +11 -2
  75. package/dist/render.d.ts +3 -5
  76. package/dist/render.js +3 -5
  77. package/dist/scheduler.d.ts +13 -1
  78. package/dist/scheduler.js +26 -6
  79. package/dist/types.d.ts +25 -0
  80. package/package.json +3 -3
package/dist/jsx.d.ts CHANGED
@@ -1,32 +1,8 @@
1
- import type * as Gdk from "@gtkx/ffi/gdk";
2
1
  import type * as Gtk from "@gtkx/ffi/gtk";
3
2
  import type { ReactElement, ReactNode } from "react";
4
3
  import type { RenderItemFn } from "./nodes/internal/list-item-renderer.js";
5
4
  import type { TreeRenderItemFn } from "./nodes/internal/tree-list-item-renderer.js";
6
- /**
7
- * Props for EventController-based event handlers.
8
- *
9
- * These props attach EventControllers to widgets for handling
10
- * pointer motion, clicks, and keyboard events.
11
- */
12
- export interface EventControllerProps {
13
- /** Called when the pointer enters the widget */
14
- onEnter?: (x: number, y: number) => void;
15
- /** Called when the pointer leaves the widget */
16
- onLeave?: () => void;
17
- /** Called when the pointer moves over the widget */
18
- onMotion?: (x: number, y: number) => void;
19
- /** Called when a mouse button is pressed */
20
- onPressed?: (nPress: number, x: number, y: number) => void;
21
- /** Called when a mouse button is released */
22
- onReleased?: (nPress: number, x: number, y: number) => void;
23
- /** Called when a key is pressed (for focusable widgets) */
24
- onKeyPressed?: (keyval: number, keycode: number, state: Gdk.ModifierType) => boolean;
25
- /** Called when a key is released */
26
- onKeyReleased?: (keyval: number, keycode: number, state: Gdk.ModifierType) => void;
27
- /** Called when the widget is scrolled */
28
- onScroll?: (dx: number, dy: number) => boolean;
29
- }
5
+ export type { EventControllerProps } from "./types.js";
30
6
  /**
31
7
  * Props for slot-based child positioning.
32
8
  *
@@ -149,6 +125,8 @@ export type ColumnViewRootProps<C extends string = string> = {
149
125
  sortOrder?: Gtk.SortType;
150
126
  /** Callback when sort changes */
151
127
  onSortChange?: (column: C | null, order: Gtk.SortType) => void;
128
+ /** Estimated row height in pixels for proper virtualization before content loads */
129
+ estimatedRowHeight?: number;
152
130
  };
153
131
  /**
154
132
  * Props for notebook (tabbed) pages.
@@ -165,8 +143,8 @@ export type NotebookPageTabProps = SlotProps;
165
143
  * Props for the root Stack component.
166
144
  */
167
145
  export type StackRootProps = Omit<SlotProps, "id"> & {
168
- /** Name of the currently visible child page */
169
- visibleChildName?: string;
146
+ /** ID of the currently visible page */
147
+ page?: string;
170
148
  };
171
149
  /**
172
150
  * Props for pages within a Stack or ViewStack.
@@ -174,8 +152,8 @@ export type StackRootProps = Omit<SlotProps, "id"> & {
174
152
  * @see {@link StackPage} for usage
175
153
  */
176
154
  export type StackPageProps = Omit<SlotProps, "id"> & {
177
- /** Unique name for this page (used with visibleChildName) */
178
- name?: string;
155
+ /** Unique identifier for this page (used with page prop) */
156
+ id?: string;
179
157
  /** Display title shown in stack switchers */
180
158
  title?: string;
181
159
  /** Icon name from the icon theme */
@@ -234,158 +212,132 @@ export type OverlayChildProps = Omit<SlotProps, "id"> & {
234
212
  clipOverlay?: boolean;
235
213
  };
236
214
  /**
237
- * Type mapping widget names to their available slot IDs.
238
- */
239
- export type { WidgetSlotNames } from "./generated/jsx.js";
240
- /**
241
- * Type-safe slot component for placing children in named widget slots.
215
+ * Props for the ScaleMark virtual element.
242
216
  *
243
- * GTK widgets often have named slots for specific child positions (e.g., titleWidget,
244
- * startWidget). This component provides type-safe access to those slots.
245
- *
246
- * @typeParam W - The widget type containing the slot
247
- *
248
- * @param props.for - The widget component type (used for type inference)
249
- * @param props.id - The slot identifier (type-checked against available slots)
250
- * @param props.children - Content to place in the slot
217
+ * Used to declaratively add marks to a GtkScale slider.
251
218
  *
252
219
  * @example
253
220
  * ```tsx
254
- * <GtkHeaderBar>
255
- * <Slot for={GtkHeaderBar} id="titleWidget">
256
- * <GtkLabel label="App Title" />
257
- * </Slot>
258
- * </GtkHeaderBar>
221
+ * <GtkScale>
222
+ * <x.ScaleMark value={0} label="Min" />
223
+ * <x.ScaleMark value={50} label="Mid" />
224
+ * <x.ScaleMark value={100} label="Max" />
225
+ * </GtkScale>
259
226
  * ```
260
- *
261
- * @internal
262
227
  */
263
- export declare function Slot<W extends keyof import("./generated/jsx.js").WidgetSlotNames>(props: {
264
- for: W;
265
- id: import("./generated/jsx.js").WidgetSlotNames[W];
266
- children?: ReactNode;
267
- }): ReactElement;
228
+ export type ScaleMarkProps = {
229
+ /** The value at which to place the mark */
230
+ value: number;
231
+ /** Position of the mark (TOP or BOTTOM for horizontal, LEFT or RIGHT for vertical) */
232
+ position?: Gtk.PositionType;
233
+ /** Optional label text (supports Pango markup) */
234
+ label?: string | null;
235
+ };
268
236
  /**
269
- * Element type for pages within a GtkStack or AdwViewStack.
237
+ * Props for the CalendarMark virtual element.
270
238
  *
271
- * @example
272
- * ```tsx
273
- * <GtkStack>
274
- * <StackPage name="page1" title="First Page">
275
- * <GtkLabel label="Content 1" />
276
- * </StackPage>
277
- * <StackPage name="page2" title="Second Page">
278
- * <GtkLabel label="Content 2" />
279
- * </StackPage>
280
- * </GtkStack>
281
- * ```
282
- */
283
- export declare const StackPage: "StackPage";
284
- /**
285
- * Element type for positioning children within a GtkGrid.
239
+ * Used to declaratively mark days on a GtkCalendar.
286
240
  *
287
241
  * @example
288
242
  * ```tsx
289
- * <GtkGrid>
290
- * <GridChild column={0} row={0}>
291
- * <GtkLabel label="Top Left" />
292
- * </GridChild>
293
- * <GridChild column={1} row={0} columnSpan={2}>
294
- * <GtkLabel label="Spans 2 columns" />
295
- * </GridChild>
296
- * </GtkGrid>
243
+ * <GtkCalendar>
244
+ * <x.CalendarMark day={15} />
245
+ * <x.CalendarMark day={20} />
246
+ * <x.CalendarMark day={25} />
247
+ * </GtkCalendar>
297
248
  * ```
298
249
  */
299
- export declare const GridChild: "GridChild";
250
+ export type CalendarMarkProps = {
251
+ /** The day of the month to mark (1-31) */
252
+ day: number;
253
+ };
300
254
  /**
301
- * Element type for positioning children within a GtkFixed.
255
+ * Props for the LevelBarOffset virtual element.
256
+ *
257
+ * Used to declaratively add offset thresholds to a GtkLevelBar.
258
+ * Each offset defines a named threshold that triggers visual style changes.
302
259
  *
303
260
  * @example
304
261
  * ```tsx
305
- * <GtkFixed>
306
- * <FixedChild x={20} y={30}>
307
- * <GtkLabel label="Positioned at (20, 30)" />
308
- * </FixedChild>
309
- * <FixedChild x={100} y={50}>
310
- * <GtkButton label="At (100, 50)" />
311
- * </FixedChild>
312
- * </GtkFixed>
262
+ * <GtkLevelBar>
263
+ * <x.LevelBarOffset id="low" value={0.25} />
264
+ * <x.LevelBarOffset id="high" value={0.75} />
265
+ * <x.LevelBarOffset id="full" value={1.0} />
266
+ * </GtkLevelBar>
313
267
  * ```
314
268
  */
315
- export declare const FixedChild: "FixedChild";
269
+ export type LevelBarOffsetProps = {
270
+ /** Unique identifier for this offset (used for CSS styling) */
271
+ id: string;
272
+ /** The threshold value (0.0 to 1.0 for continuous mode, or integer for discrete) */
273
+ value: number;
274
+ };
316
275
  /**
317
- * Element types for pages within a GtkNotebook (tabbed interface).
276
+ * Props for the Toggle virtual element.
318
277
  *
319
- * @example Simple text tabs
320
- * ```tsx
321
- * <GtkNotebook>
322
- * <Notebook.Page label="Tab 1">
323
- * <GtkLabel label="Content 1" />
324
- * </Notebook.Page>
325
- * <Notebook.Page label="Tab 2">
326
- * <GtkLabel label="Content 2" />
327
- * </Notebook.Page>
328
- * </GtkNotebook>
329
- * ```
278
+ * Used to declaratively add toggles to an AdwToggleGroup.
330
279
  *
331
- * @example Custom tab widgets
280
+ * @example
332
281
  * ```tsx
333
- * <GtkNotebook>
334
- * <Notebook.Page>
335
- * <Notebook.PageTab>
336
- * <GtkBox orientation={Gtk.Orientation.HORIZONTAL}>
337
- * <GtkImage iconName="folder-symbolic" />
338
- * <GtkLabel label="Files" />
339
- * </GtkBox>
340
- * </Notebook.PageTab>
341
- * <GtkLabel label="Content" />
342
- * </Notebook.Page>
343
- * </GtkNotebook>
282
+ * <AdwToggleGroup>
283
+ * <x.Toggle id="view-list" iconName="view-list-symbolic" />
284
+ * <x.Toggle id="view-grid" iconName="view-grid-symbolic" />
285
+ * <x.Toggle id="view-flow" label="Flow" />
286
+ * </AdwToggleGroup>
344
287
  * ```
345
288
  */
346
- export declare const Notebook: {
347
- /** A page within the notebook */
348
- Page: "Notebook.Page";
349
- /** Custom widget for the page tab label */
350
- PageTab: "Notebook.PageTab";
289
+ export type ToggleProps = {
290
+ /** Optional identifier for accessing toggle by id instead of index */
291
+ id?: string | null;
292
+ /** Label text to display */
293
+ label?: string | null;
294
+ /** Icon name to display */
295
+ iconName?: string | null;
296
+ /** Tooltip text (supports Pango markup) */
297
+ tooltip?: string;
298
+ /** Whether the toggle is enabled */
299
+ enabled?: boolean;
300
+ /** Whether underline in label indicates mnemonic */
301
+ useUnderline?: boolean;
351
302
  };
352
303
  /**
353
- * Element type for items in a ListView or GridView.
354
- *
355
- * @example
356
- * ```tsx
357
- * <ListView renderItem={(item) => <GtkLabel label={item.name} />}>
358
- * <ListItem id="1" value={{ name: "Item 1" }} />
359
- * <ListItem id="2" value={{ name: "Item 2" }} />
360
- * </ListView>
361
- * ```
304
+ * Props for ExpanderRow child slots (Row and Action).
362
305
  */
363
- export declare const ListItem: "ListItem";
306
+ export type ExpanderRowChildProps = {
307
+ /** Children to add to this slot */
308
+ children?: ReactNode;
309
+ };
364
310
  /**
365
- * Component for defining columns in a ColumnView (table widget).
311
+ * Props for the NavigationPage virtual element.
366
312
  *
367
- * @typeParam T - The type of row data
313
+ * Used to declaratively define pages in an AdwNavigationView.
368
314
  *
369
315
  * @example
370
316
  * ```tsx
371
- * <GtkColumnView>
372
- * <ColumnViewColumn
373
- * id="name"
374
- * title="Name"
375
- * expand
376
- * renderCell={(item) => <GtkLabel label={item?.name ?? ""} />}
377
- * />
378
- * <ColumnViewColumn
379
- * id="status"
380
- * title="Status"
381
- * renderCell={(item) => <GtkLabel label={item?.status ?? ""} />}
382
- * />
383
- * </GtkColumnView>
317
+ * <AdwNavigationView history={["home", "details"]}>
318
+ * <x.NavigationPage id="home" title="Home">
319
+ * <HomeContent />
320
+ * </x.NavigationPage>
321
+ * <x.NavigationPage id="details" title="Details">
322
+ * <DetailsContent />
323
+ * </x.NavigationPage>
324
+ * </AdwNavigationView>
384
325
  * ```
385
- *
386
- * @internal
387
326
  */
388
- export declare function ColumnViewColumn<T = unknown>(props: ColumnViewColumnProps<T>): ReactElement;
327
+ export type NavigationPageProps = {
328
+ /** Unique identifier for this page (used in history array) */
329
+ id: string;
330
+ /** Title displayed in the header bar */
331
+ title?: string;
332
+ /** Whether the page can be popped via back button/gestures */
333
+ canPop?: boolean;
334
+ /** Page content */
335
+ children?: ReactNode;
336
+ };
337
+ /**
338
+ * Type mapping widget names to their available slot IDs.
339
+ */
340
+ export type { WidgetSlotNames } from "./generated/jsx.js";
389
341
  /**
390
342
  * Props for the ListView component.
391
343
  *
@@ -394,28 +346,9 @@ export declare function ColumnViewColumn<T = unknown>(props: ColumnViewColumnPro
394
346
  export type ListViewProps<T = unknown> = Omit<import("./generated/jsx.js").GtkListViewProps, "renderItem"> & {
395
347
  /** Function to render each list item */
396
348
  renderItem: (item: T | null) => ReactNode;
349
+ /** Estimated item height in pixels for proper virtualization before content loads */
350
+ estimatedItemHeight?: number;
397
351
  };
398
- /**
399
- * Virtualized list component with custom item rendering.
400
- *
401
- * Efficiently renders large lists by only creating widgets for visible items.
402
- *
403
- * @typeParam T - The type of items in the list
404
- *
405
- * @example
406
- * ```tsx
407
- * const items = [{ id: "1", name: "Apple" }, { id: "2", name: "Banana" }];
408
- *
409
- * <ListView renderItem={(item) => <GtkLabel label={item?.name ?? ""} />}>
410
- * {items.map((item) => (
411
- * <ListItem key={item.id} id={item.id} value={item} />
412
- * ))}
413
- * </ListView>
414
- * ```
415
- *
416
- * @internal
417
- */
418
- export declare function ListView<T = unknown>(props: ListViewProps<T>): ReactElement;
419
352
  /**
420
353
  * Props for the GridView component.
421
354
  *
@@ -424,26 +357,9 @@ export declare function ListView<T = unknown>(props: ListViewProps<T>): ReactEle
424
357
  export type GridViewProps<T = unknown> = Omit<import("./generated/jsx.js").GtkGridViewProps, "renderItem"> & {
425
358
  /** Function to render each grid item */
426
359
  renderItem: (item: T | null) => ReactNode;
360
+ /** Estimated item height in pixels for proper virtualization before content loads */
361
+ estimatedItemHeight?: number;
427
362
  };
428
- /**
429
- * Virtualized grid component with custom item rendering.
430
- *
431
- * Efficiently renders large grids by only creating widgets for visible items.
432
- *
433
- * @typeParam T - The type of items in the grid
434
- *
435
- * @example
436
- * ```tsx
437
- * <GridView renderItem={(item) => <GtkImage iconName={item?.icon ?? ""} />}>
438
- * {icons.map((icon) => (
439
- * <ListItem key={icon.id} id={icon.id} value={icon} />
440
- * ))}
441
- * </GridView>
442
- * ```
443
- *
444
- * @internal
445
- */
446
- export declare function GridView<T = unknown>(props: GridViewProps<T>): ReactElement;
447
363
  /**
448
364
  * Props for the TreeListView component.
449
365
  *
@@ -452,6 +368,8 @@ export declare function GridView<T = unknown>(props: GridViewProps<T>): ReactEle
452
368
  export type TreeListViewProps<T = unknown> = Omit<import("./generated/jsx.js").GtkListViewProps, "renderItem"> & {
453
369
  /** Function to render each tree item */
454
370
  renderItem: TreeRenderItemFn<T>;
371
+ /** Estimated item height in pixels for proper virtualization before content loads */
372
+ estimatedItemHeight?: number;
455
373
  /** Whether to automatically expand new rows (default: false) */
456
374
  autoexpand?: boolean;
457
375
  /** Selection mode for the tree */
@@ -462,206 +380,446 @@ export type TreeListViewProps<T = unknown> = Omit<import("./generated/jsx.js").G
462
380
  onSelectionChanged?: (ids: string[]) => void;
463
381
  };
464
382
  /**
465
- * Tree list component with hierarchical data and expand/collapse support.
383
+ * GTKX-specific intrinsic elements and components.
466
384
  *
467
- * Renders a tree structure with expandable/collapsible rows using GTK's TreeListModel.
468
- * Items are defined declaratively by nesting TreeListItem components.
469
- *
470
- * @typeParam T - The type of items in the tree
385
+ * This namespace provides React components for GTK layout, lists, menus, and slots
386
+ * that are specific to GTKX (not direct GTK widget bindings).
471
387
  *
472
388
  * @example
473
389
  * ```tsx
474
- * interface Category { name: string; }
475
- * interface Setting { key: string; value: string; }
390
+ * import { x, GtkHeaderBar, GtkDropDown } from "@gtkx/react";
476
391
  *
477
- * <TreeListView<Category | Setting>
478
- * renderItem={(item, row) => (
479
- * <GtkLabel label={'name' in item ? item.name : item.key} />
480
- * )}
481
- * >
482
- * {categories.map(cat => (
483
- * <TreeListItem key={cat.name} id={cat.name} value={cat}>
484
- * {cat.settings?.map(setting => (
485
- * <TreeListItem key={setting.key} id={setting.key} value={setting} />
486
- * ))}
487
- * </TreeListItem>
488
- * ))}
489
- * </TreeListView>
490
- * ```
491
- *
492
- * @internal
493
- */
494
- export declare function TreeListView<T = unknown>(props: TreeListViewProps<T>): ReactElement;
495
- /**
496
- * Element type for items in a TreeListView.
497
- *
498
- * Nesting TreeListItem components defines the tree hierarchy.
499
- *
500
- * @example
501
- * ```tsx
502
- * <TreeListView renderItem={(item) => <GtkLabel label={item.name} />}>
503
- * <TreeListItem id="parent" value={{ name: "Parent" }}>
504
- * <TreeListItem id="child1" value={{ name: "Child 1" }} />
505
- * <TreeListItem id="child2" value={{ name: "Child 2" }} />
506
- * </TreeListItem>
507
- * </TreeListView>
508
- * ```
509
- */
510
- export declare const TreeListItem: "TreeListItem";
511
- /**
512
- * Element type for simple string-based list items.
513
- *
514
- * Use when list items only need string values without complex data.
515
- *
516
- * @example
517
- * ```tsx
518
- * <GtkDropDown>
519
- * <SimpleListItem id="opt1" value="Option 1" />
520
- * <SimpleListItem id="opt2" value="Option 2" />
521
- * </GtkDropDown>
522
- * ```
523
- */
524
- export declare const SimpleListItem: "SimpleListItem";
525
- /**
526
- * Slot positions for AdwActionRow, AdwEntryRow, and AdwExpanderRow widgets.
527
- *
528
- * @example
529
- * ```tsx
530
- * <AdwActionRow title="Setting">
531
- * <ActionRow.Prefix>
532
- * <GtkCheckButton />
533
- * </ActionRow.Prefix>
534
- * <ActionRow.Suffix>
535
- * <GtkButton iconName="go-next-symbolic" />
536
- * </ActionRow.Suffix>
537
- * </AdwActionRow>
538
- * ```
539
- */
540
- export declare const ActionRow: {
541
- /** Place child as a prefix (left side) of the row */
542
- Prefix: "ActionRow.Prefix";
543
- /** Place child as a suffix (right side) of the row */
544
- Suffix: "ActionRow.Suffix";
545
- };
546
- /**
547
- * Slot positions for HeaderBar and ActionBar widgets.
548
- *
549
- * @example
550
- * ```tsx
551
392
  * <GtkHeaderBar>
552
- * <Pack.Start>
553
- * <GtkButton label="Back" />
554
- * </Pack.Start>
555
- * <Pack.End>
556
- * <GtkMenuButton />
557
- * </Pack.End>
393
+ * <x.Slot for={GtkHeaderBar} id="titleWidget">
394
+ * <GtkLabel label="App Title" />
395
+ * </x.Slot>
558
396
  * </GtkHeaderBar>
559
- * ```
560
- */
561
- export declare const Pack: {
562
- /** Place child at the start (left in LTR) of the bar */
563
- Start: "Pack.Start";
564
- /** Place child at the end (right in LTR) of the bar */
565
- End: "Pack.End";
566
- };
567
- /**
568
- * Slot positions for AdwToolbarView.
569
- *
570
- * @example
571
- * ```tsx
572
- * <AdwToolbarView>
573
- * <Toolbar.Top>
574
- * <AdwHeaderBar />
575
- * </Toolbar.Top>
576
- * <GtkLabel label="Content" />
577
- * <Toolbar.Bottom>
578
- * <GtkActionBar />
579
- * </Toolbar.Bottom>
580
- * </AdwToolbarView>
581
- * ```
582
- */
583
- export declare const Toolbar: {
584
- /** Place toolbar at the top */
585
- Top: "Toolbar.Top";
586
- /** Place toolbar at the bottom */
587
- Bottom: "Toolbar.Bottom";
588
- };
589
- /**
590
- * Element type for GtkOverlay main child container.
591
- */
592
- export declare const Overlay: "Overlay";
593
- /**
594
- * Element type for overlay children positioned above the main content.
595
- *
596
- * @example
597
- * ```tsx
598
- * <GtkOverlay>
599
- * <Overlay>
600
- * <GtkImage file="background.png" />
601
- * </Overlay>
602
- * <OverlayChild>
603
- * <GtkLabel label="Overlaid text" cssClasses={["title-1"]} />
604
- * </OverlayChild>
605
- * </GtkOverlay>
606
- * ```
607
- */
608
- export declare const OverlayChild: "OverlayChild";
609
- /**
610
- * Element types for declarative menu construction.
611
- *
612
- * Build menus with items, sections, and submenus declaratively.
613
397
  *
614
- * @example
615
- * ```tsx
616
- * <GtkMenuButton>
617
- * <Menu.Section>
618
- * <Menu.Item id="open" label="Open" onActivate={handleOpen} accels="<Control>o" />
619
- * <Menu.Item id="save" label="Save" onActivate={handleSave} accels="<Control>s" />
620
- * </Menu.Section>
621
- * <Menu.Submenu label="Export">
622
- * <Menu.Item id="pdf" label="As PDF" onActivate={exportPdf} />
623
- * <Menu.Item id="png" label="As PNG" onActivate={exportPng} />
624
- * </Menu.Submenu>
625
- * </GtkMenuButton>
398
+ * <GtkDropDown>
399
+ * <x.SimpleListItem id="opt1" value="Option 1" />
400
+ * <x.SimpleListItem id="opt2" value="Option 2" />
401
+ * </GtkDropDown>
626
402
  * ```
627
403
  */
628
- export declare const Menu: {
629
- /** A clickable menu item with action */
630
- Item: "Menu.Item";
631
- /** A section grouping related menu items */
632
- Section: "Menu.Section";
633
- /** A submenu containing nested items */
634
- Submenu: "Menu.Submenu";
404
+ export declare const x: {
405
+ /**
406
+ * Type-safe slot component for placing children in named widget slots.
407
+ *
408
+ * GTK widgets often have named slots for specific child positions (e.g., titleWidget,
409
+ * startWidget). This component provides type-safe access to those slots.
410
+ *
411
+ * @example
412
+ * ```tsx
413
+ * <GtkHeaderBar>
414
+ * <x.Slot for={GtkHeaderBar} id="titleWidget">
415
+ * <GtkLabel label="App Title" />
416
+ * </x.Slot>
417
+ * </GtkHeaderBar>
418
+ * ```
419
+ */
420
+ Slot<W extends keyof import("./generated/jsx.js").WidgetSlotNames>(props: {
421
+ for: W;
422
+ id: import("./generated/jsx.js").WidgetSlotNames[W];
423
+ children?: ReactNode;
424
+ }): ReactElement;
425
+ /**
426
+ * Element type for pages within a GtkStack or AdwViewStack.
427
+ *
428
+ * @example
429
+ * ```tsx
430
+ * <GtkStack page="page1">
431
+ * <x.StackPage id="page1" title="First Page">
432
+ * <GtkLabel label="Content 1" />
433
+ * </x.StackPage>
434
+ * </GtkStack>
435
+ * ```
436
+ */
437
+ StackPage: "StackPage";
438
+ /**
439
+ * Element type for positioning children within a GtkGrid.
440
+ *
441
+ * @example
442
+ * ```tsx
443
+ * <GtkGrid>
444
+ * <x.GridChild column={0} row={0}>
445
+ * <GtkLabel label="Top Left" />
446
+ * </x.GridChild>
447
+ * </GtkGrid>
448
+ * ```
449
+ */
450
+ GridChild: "GridChild";
451
+ /**
452
+ * Element type for positioning children within a GtkFixed.
453
+ *
454
+ * @example
455
+ * ```tsx
456
+ * <GtkFixed>
457
+ * <x.FixedChild x={20} y={30}>
458
+ * <GtkLabel label="Positioned at (20, 30)" />
459
+ * </x.FixedChild>
460
+ * </GtkFixed>
461
+ * ```
462
+ */
463
+ FixedChild: "FixedChild";
464
+ /**
465
+ * Element type for a page within a GtkNotebook (tabbed interface).
466
+ *
467
+ * @example
468
+ * ```tsx
469
+ * <GtkNotebook>
470
+ * <x.NotebookPage label="Tab 1">
471
+ * <GtkLabel label="Content 1" />
472
+ * </x.NotebookPage>
473
+ * </GtkNotebook>
474
+ * ```
475
+ */
476
+ NotebookPage: "NotebookPage";
477
+ /**
478
+ * Element type for a custom widget as the page tab label.
479
+ */
480
+ NotebookPageTab: "NotebookPageTab";
481
+ /**
482
+ * Element type for items in a ListView or GridView.
483
+ *
484
+ * @example
485
+ * ```tsx
486
+ * <x.ListView renderItem={(item) => <GtkLabel label={item.name} />}>
487
+ * <x.ListItem id="1" value={{ name: "Item 1" }} />
488
+ * </x.ListView>
489
+ * ```
490
+ */
491
+ ListItem: "ListItem";
492
+ /**
493
+ * Element type for items in a TreeListView.
494
+ *
495
+ * @example
496
+ * ```tsx
497
+ * <x.TreeListView renderItem={(item) => <GtkLabel label={item.name} />}>
498
+ * <x.TreeListItem id="parent" value={{ name: "Parent" }}>
499
+ * <x.TreeListItem id="child" value={{ name: "Child" }} />
500
+ * </x.TreeListItem>
501
+ * </x.TreeListView>
502
+ * ```
503
+ */
504
+ TreeListItem: "TreeListItem";
505
+ /**
506
+ * Element type for simple string-based list items.
507
+ *
508
+ * @example
509
+ * ```tsx
510
+ * <GtkDropDown>
511
+ * <x.SimpleListItem id="opt1" value="Option 1" />
512
+ * </GtkDropDown>
513
+ * ```
514
+ */
515
+ SimpleListItem: "SimpleListItem";
516
+ /**
517
+ * Component for defining columns in a ColumnView (table widget).
518
+ *
519
+ * @example
520
+ * ```tsx
521
+ * <GtkColumnView>
522
+ * <x.ColumnViewColumn
523
+ * id="name"
524
+ * title="Name"
525
+ * expand
526
+ * renderCell={(item) => <GtkLabel label={item?.name ?? ""} />}
527
+ * />
528
+ * </GtkColumnView>
529
+ * ```
530
+ */
531
+ ColumnViewColumn<T = unknown>(props: ColumnViewColumnProps<T>): ReactElement;
532
+ /**
533
+ * Virtualized list component with custom item rendering.
534
+ *
535
+ * @example
536
+ * ```tsx
537
+ * <x.ListView renderItem={(item) => <GtkLabel label={item?.name ?? ""} />}>
538
+ * <x.ListItem id="1" value={{ name: "Apple" }} />
539
+ * </x.ListView>
540
+ * ```
541
+ */
542
+ ListView<T = unknown>(props: ListViewProps<T>): ReactElement;
543
+ /**
544
+ * Virtualized grid component with custom item rendering.
545
+ *
546
+ * @example
547
+ * ```tsx
548
+ * <x.GridView renderItem={(item) => <GtkImage iconName={item?.icon ?? ""} />}>
549
+ * <x.ListItem id="1" value={{ icon: "folder" }} />
550
+ * </x.GridView>
551
+ * ```
552
+ */
553
+ GridView<T = unknown>(props: GridViewProps<T>): ReactElement;
554
+ /**
555
+ * Tree list component with hierarchical data and expand/collapse support.
556
+ *
557
+ * @example
558
+ * ```tsx
559
+ * <x.TreeListView renderItem={(item, row) => <GtkLabel label={item.name} />}>
560
+ * <x.TreeListItem id="root" value={{ name: "Root" }}>
561
+ * <x.TreeListItem id="child" value={{ name: "Child" }} />
562
+ * </x.TreeListItem>
563
+ * </x.TreeListView>
564
+ * ```
565
+ */
566
+ TreeListView<T = unknown>(props: TreeListViewProps<T>): ReactElement;
567
+ /**
568
+ * Place child as a prefix (left side) of AdwActionRow, AdwEntryRow, or AdwExpanderRow.
569
+ *
570
+ * @example
571
+ * ```tsx
572
+ * <AdwActionRow title="Setting">
573
+ * <x.ActionRowPrefix>
574
+ * <GtkCheckButton />
575
+ * </x.ActionRowPrefix>
576
+ * </AdwActionRow>
577
+ * ```
578
+ */
579
+ ActionRowPrefix: "ActionRowPrefix";
580
+ /**
581
+ * Place child as a suffix (right side) of AdwActionRow, AdwEntryRow, or AdwExpanderRow.
582
+ *
583
+ * @example
584
+ * ```tsx
585
+ * <AdwActionRow title="Setting">
586
+ * <x.ActionRowSuffix>
587
+ * <GtkButton iconName="go-next-symbolic" />
588
+ * </x.ActionRowSuffix>
589
+ * </AdwActionRow>
590
+ * ```
591
+ */
592
+ ActionRowSuffix: "ActionRowSuffix";
593
+ /**
594
+ * Place child at the start (left in LTR) of HeaderBar or ActionBar.
595
+ *
596
+ * @example
597
+ * ```tsx
598
+ * <GtkHeaderBar>
599
+ * <x.PackStart>
600
+ * <GtkButton label="Back" />
601
+ * </x.PackStart>
602
+ * </GtkHeaderBar>
603
+ * ```
604
+ */
605
+ PackStart: "PackStart";
606
+ /**
607
+ * Place child at the end (right in LTR) of HeaderBar or ActionBar.
608
+ *
609
+ * @example
610
+ * ```tsx
611
+ * <GtkHeaderBar>
612
+ * <x.PackEnd>
613
+ * <GtkMenuButton />
614
+ * </x.PackEnd>
615
+ * </GtkHeaderBar>
616
+ * ```
617
+ */
618
+ PackEnd: "PackEnd";
619
+ /**
620
+ * Place toolbar at the top of AdwToolbarView.
621
+ *
622
+ * @example
623
+ * ```tsx
624
+ * <AdwToolbarView>
625
+ * <x.ToolbarTop>
626
+ * <AdwHeaderBar />
627
+ * </x.ToolbarTop>
628
+ * </AdwToolbarView>
629
+ * ```
630
+ */
631
+ ToolbarTop: "ToolbarTop";
632
+ /**
633
+ * Place toolbar at the bottom of AdwToolbarView.
634
+ *
635
+ * @example
636
+ * ```tsx
637
+ * <AdwToolbarView>
638
+ * <x.ToolbarBottom>
639
+ * <GtkActionBar />
640
+ * </x.ToolbarBottom>
641
+ * </AdwToolbarView>
642
+ * ```
643
+ */
644
+ ToolbarBottom: "ToolbarBottom";
645
+ /**
646
+ * Element type for overlay children positioned above the main content.
647
+ *
648
+ * @example
649
+ * ```tsx
650
+ * <GtkOverlay>
651
+ * <GtkImage file="background.png" />
652
+ * <x.OverlayChild>
653
+ * <GtkLabel label="Overlaid text" />
654
+ * </x.OverlayChild>
655
+ * </GtkOverlay>
656
+ * ```
657
+ */
658
+ OverlayChild: "OverlayChild";
659
+ /**
660
+ * A clickable menu item with action.
661
+ *
662
+ * @example
663
+ * ```tsx
664
+ * <GtkMenuButton>
665
+ * <x.MenuItem id="open" label="Open" onActivate={handleOpen} />
666
+ * </GtkMenuButton>
667
+ * ```
668
+ */
669
+ MenuItem: "MenuItem";
670
+ /**
671
+ * A section grouping related menu items.
672
+ *
673
+ * @example
674
+ * ```tsx
675
+ * <GtkMenuButton>
676
+ * <x.MenuSection label="File">
677
+ * <x.MenuItem id="open" label="Open" onActivate={handleOpen} />
678
+ * </x.MenuSection>
679
+ * </GtkMenuButton>
680
+ * ```
681
+ */
682
+ MenuSection: "MenuSection";
683
+ /**
684
+ * A submenu containing nested items.
685
+ *
686
+ * @example
687
+ * ```tsx
688
+ * <GtkMenuButton>
689
+ * <x.MenuSubmenu label="Export">
690
+ * <x.MenuItem id="pdf" label="As PDF" onActivate={exportPdf} />
691
+ * </x.MenuSubmenu>
692
+ * </GtkMenuButton>
693
+ * ```
694
+ */
695
+ MenuSubmenu: "MenuSubmenu";
696
+ /**
697
+ * A mark to display on a GtkScale slider.
698
+ *
699
+ * @example
700
+ * ```tsx
701
+ * <GtkScale>
702
+ * <x.ScaleMark value={0} label="Min" />
703
+ * <x.ScaleMark value={50} />
704
+ * <x.ScaleMark value={100} label="Max" />
705
+ * </GtkScale>
706
+ * ```
707
+ */
708
+ ScaleMark: "ScaleMark";
709
+ /**
710
+ * A day mark on a GtkCalendar.
711
+ *
712
+ * @example
713
+ * ```tsx
714
+ * <GtkCalendar>
715
+ * <x.CalendarMark day={15} />
716
+ * <x.CalendarMark day={20} />
717
+ * <x.CalendarMark day={25} />
718
+ * </GtkCalendar>
719
+ * ```
720
+ */
721
+ CalendarMark: "CalendarMark";
722
+ /**
723
+ * An offset threshold for a GtkLevelBar.
724
+ *
725
+ * @example
726
+ * ```tsx
727
+ * <GtkLevelBar>
728
+ * <x.LevelBarOffset id="low" value={0.25} />
729
+ * <x.LevelBarOffset id="high" value={0.75} />
730
+ * <x.LevelBarOffset id="full" value={1.0} />
731
+ * </GtkLevelBar>
732
+ * ```
733
+ */
734
+ LevelBarOffset: "LevelBarOffset";
735
+ /**
736
+ * A toggle button for an AdwToggleGroup.
737
+ *
738
+ * @example
739
+ * ```tsx
740
+ * <AdwToggleGroup>
741
+ * <x.Toggle id="list" iconName="view-list-symbolic" />
742
+ * <x.Toggle id="grid" iconName="view-grid-symbolic" />
743
+ * </AdwToggleGroup>
744
+ * ```
745
+ */
746
+ Toggle: "Toggle";
747
+ /**
748
+ * Nested rows container for AdwExpanderRow.
749
+ *
750
+ * @example
751
+ * ```tsx
752
+ * <AdwExpanderRow title="Settings">
753
+ * <ExpanderRow.Row>
754
+ * <AdwActionRow title="Option 1" />
755
+ * <AdwActionRow title="Option 2" />
756
+ * </ExpanderRow.Row>
757
+ * </AdwExpanderRow>
758
+ * ```
759
+ */
760
+ ExpanderRowRow: "ExpanderRowRow";
761
+ /**
762
+ * Action widget container for AdwExpanderRow header.
763
+ *
764
+ * @example
765
+ * ```tsx
766
+ * <AdwExpanderRow title="Group">
767
+ * <ExpanderRow.Action>
768
+ * <GtkButton iconName="emblem-system-symbolic" />
769
+ * </ExpanderRow.Action>
770
+ * </AdwExpanderRow>
771
+ * ```
772
+ */
773
+ ExpanderRowAction: "ExpanderRowAction";
774
+ /**
775
+ * A page within an AdwNavigationView.
776
+ *
777
+ * @example
778
+ * ```tsx
779
+ * <AdwNavigationView history={["home"]}>
780
+ * <x.NavigationPage id="home" title="Home">
781
+ * <GtkLabel label="Welcome!" />
782
+ * </x.NavigationPage>
783
+ * <x.NavigationPage id="settings" title="Settings">
784
+ * <GtkLabel label="Settings page" />
785
+ * </x.NavigationPage>
786
+ * </AdwNavigationView>
787
+ * ```
788
+ */
789
+ NavigationPage: "NavigationPage";
635
790
  };
636
791
  declare global {
637
792
  namespace React {
638
793
  namespace JSX {
639
794
  interface IntrinsicElements {
640
- StackPage: StackPageProps;
641
- GridChild: GridChildProps;
795
+ ActionRowPrefix: SlotProps;
796
+ ActionRowSuffix: SlotProps;
797
+ CalendarMark: CalendarMarkProps;
798
+ ColumnViewColumn: ColumnViewColumnProps<any>;
799
+ ExpanderRowAction: ExpanderRowChildProps;
800
+ ExpanderRowRow: ExpanderRowChildProps;
642
801
  FixedChild: FixedChildProps;
643
- "Notebook.Page": NotebookPageProps;
644
- "Notebook.PageTab": NotebookPageTabProps;
802
+ GridChild: GridChildProps;
803
+ LevelBarOffset: LevelBarOffsetProps;
645
804
  ListItem: ListItemProps;
646
- TreeListItem: TreeListItemProps<any>;
647
- ColumnViewColumn: ColumnViewColumnProps<any>;
648
- SimpleListItem: StringListItemProps;
649
- "ActionRow.Prefix": SlotProps;
650
- "ActionRow.Suffix": SlotProps;
651
- "Pack.Start": SlotProps;
652
- "Pack.End": SlotProps;
653
- "Toolbar.Top": SlotProps;
654
- "Toolbar.Bottom": SlotProps;
805
+ MenuItem: MenuItemProps;
806
+ MenuSection: MenuSectionProps;
807
+ MenuSubmenu: MenuSubmenuProps;
808
+ NotebookPage: NotebookPageProps;
809
+ NotebookPageTab: NotebookPageTabProps;
655
810
  OverlayChild: OverlayChildProps;
656
- "Menu.Item": MenuItemProps;
657
- "Menu.Section": MenuSectionProps;
658
- "Menu.Submenu": MenuSubmenuProps;
811
+ PackEnd: SlotProps;
812
+ PackStart: SlotProps;
813
+ ScaleMark: ScaleMarkProps;
814
+ SimpleListItem: StringListItemProps;
815
+ StackPage: StackPageProps;
816
+ Toggle: ToggleProps;
817
+ ToolbarBottom: SlotProps;
818
+ ToolbarTop: SlotProps;
819
+ TreeListItem: TreeListItemProps<any>;
820
+ NavigationPage: NavigationPageProps;
659
821
  }
660
822
  }
661
823
  }
662
824
  }
663
825
  export * from "./generated/jsx.js";
664
- declare module "./generated/jsx.js" {
665
- interface WidgetProps extends EventControllerProps {
666
- }
667
- }