@gtkx/react 0.20.0 → 0.21.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 (157) hide show
  1. package/README.md +26 -62
  2. package/dist/components/compound.d.ts +40 -0
  3. package/dist/components/compound.d.ts.map +1 -0
  4. package/dist/components/compound.js +46 -0
  5. package/dist/components/compound.js.map +1 -0
  6. package/dist/components/list.d.ts +42 -2
  7. package/dist/components/list.d.ts.map +1 -1
  8. package/dist/components/list.js +42 -1
  9. package/dist/components/list.js.map +1 -1
  10. package/dist/components/slot-widget.d.ts +15 -0
  11. package/dist/components/slot-widget.d.ts.map +1 -0
  12. package/dist/components/slot-widget.js +37 -0
  13. package/dist/components/slot-widget.js.map +1 -0
  14. package/dist/errors.d.ts +6 -0
  15. package/dist/errors.d.ts.map +1 -1
  16. package/dist/errors.js +8 -6
  17. package/dist/errors.js.map +1 -1
  18. package/dist/generated/compounds.d.ts +2672 -0
  19. package/dist/generated/compounds.d.ts.map +1 -0
  20. package/dist/generated/compounds.js +2624 -0
  21. package/dist/generated/compounds.js.map +1 -0
  22. package/dist/generated/internal.d.ts +2 -2
  23. package/dist/generated/internal.d.ts.map +1 -1
  24. package/dist/generated/internal.js +2751 -4748
  25. package/dist/generated/internal.js.map +1 -1
  26. package/dist/generated/jsx.d.ts +2042 -4592
  27. package/dist/generated/jsx.d.ts.map +1 -1
  28. package/dist/generated/jsx.js +919 -3478
  29. package/dist/generated/jsx.js.map +1 -1
  30. package/dist/generated/registry.d.ts +1 -0
  31. package/dist/generated/registry.d.ts.map +1 -1
  32. package/dist/generated/registry.js +0 -1
  33. package/dist/generated/registry.js.map +1 -1
  34. package/dist/index.d.ts +2 -0
  35. package/dist/index.d.ts.map +1 -1
  36. package/dist/index.js +2 -0
  37. package/dist/index.js.map +1 -1
  38. package/dist/jsx.d.ts +116 -414
  39. package/dist/jsx.d.ts.map +1 -1
  40. package/dist/jsx.js +5 -328
  41. package/dist/jsx.js.map +1 -1
  42. package/dist/metadata.d.ts +1 -1
  43. package/dist/metadata.d.ts.map +1 -1
  44. package/dist/metadata.js.map +1 -1
  45. package/dist/nodes/alert-dialog.d.ts +14 -0
  46. package/dist/nodes/alert-dialog.d.ts.map +1 -0
  47. package/dist/nodes/alert-dialog.js +41 -0
  48. package/dist/nodes/alert-dialog.js.map +1 -0
  49. package/dist/nodes/animation.d.ts +5 -4
  50. package/dist/nodes/animation.d.ts.map +1 -1
  51. package/dist/nodes/animation.js +65 -49
  52. package/dist/nodes/animation.js.map +1 -1
  53. package/dist/nodes/column-view-column.js +2 -2
  54. package/dist/nodes/column-view-column.js.map +1 -1
  55. package/dist/nodes/container-slot.d.ts +3 -1
  56. package/dist/nodes/container-slot.d.ts.map +1 -1
  57. package/dist/nodes/container-slot.js +28 -16
  58. package/dist/nodes/container-slot.js.map +1 -1
  59. package/dist/nodes/drawing-area.d.ts +3 -1
  60. package/dist/nodes/drawing-area.d.ts.map +1 -1
  61. package/dist/nodes/drawing-area.js +20 -22
  62. package/dist/nodes/drawing-area.js.map +1 -1
  63. package/dist/nodes/event-controller.d.ts.map +1 -1
  64. package/dist/nodes/event-controller.js +3 -7
  65. package/dist/nodes/event-controller.js.map +1 -1
  66. package/dist/nodes/fixed-child.d.ts +1 -0
  67. package/dist/nodes/fixed-child.d.ts.map +1 -1
  68. package/dist/nodes/fixed-child.js +13 -0
  69. package/dist/nodes/fixed-child.js.map +1 -1
  70. package/dist/nodes/grid-child.d.ts +1 -0
  71. package/dist/nodes/grid-child.d.ts.map +1 -1
  72. package/dist/nodes/grid-child.js +13 -0
  73. package/dist/nodes/grid-child.js.map +1 -1
  74. package/dist/nodes/internal/construct.js +2 -2
  75. package/dist/nodes/internal/construct.js.map +1 -1
  76. package/dist/nodes/internal/widget.d.ts.map +1 -1
  77. package/dist/nodes/internal/widget.js +5 -9
  78. package/dist/nodes/internal/widget.js.map +1 -1
  79. package/dist/nodes/list-item-node.d.ts +6 -6
  80. package/dist/nodes/list-item-node.d.ts.map +1 -1
  81. package/dist/nodes/list-item-node.js +27 -5
  82. package/dist/nodes/list-item-node.js.map +1 -1
  83. package/dist/nodes/notebook-page.js +2 -2
  84. package/dist/nodes/notebook-page.js.map +1 -1
  85. package/dist/nodes/overlay-child.d.ts +2 -0
  86. package/dist/nodes/overlay-child.d.ts.map +1 -1
  87. package/dist/nodes/overlay-child.js +29 -8
  88. package/dist/nodes/overlay-child.js.map +1 -1
  89. package/dist/nodes/spin-row.d.ts +14 -0
  90. package/dist/nodes/spin-row.d.ts.map +1 -0
  91. package/dist/nodes/spin-row.js +46 -0
  92. package/dist/nodes/spin-row.js.map +1 -0
  93. package/dist/nodes/switch-row.d.ts +11 -0
  94. package/dist/nodes/switch-row.d.ts.map +1 -0
  95. package/dist/nodes/switch-row.js +15 -0
  96. package/dist/nodes/switch-row.js.map +1 -0
  97. package/dist/nodes/text-anchor.d.ts.map +1 -1
  98. package/dist/nodes/text-anchor.js +10 -0
  99. package/dist/nodes/text-anchor.js.map +1 -1
  100. package/dist/nodes/text-tag.d.ts.map +1 -1
  101. package/dist/nodes/text-tag.js +45 -39
  102. package/dist/nodes/text-tag.js.map +1 -1
  103. package/dist/nodes/toggle-group.d.ts +12 -6
  104. package/dist/nodes/toggle-group.d.ts.map +1 -1
  105. package/dist/nodes/toggle-group.js +53 -4
  106. package/dist/nodes/toggle-group.js.map +1 -1
  107. package/dist/nodes/widget.d.ts.map +1 -1
  108. package/dist/nodes/widget.js +7 -14
  109. package/dist/nodes/widget.js.map +1 -1
  110. package/dist/registry.d.ts.map +1 -1
  111. package/dist/registry.js +7 -5
  112. package/dist/registry.js.map +1 -1
  113. package/dist/types.d.ts +1 -0
  114. package/dist/types.d.ts.map +1 -1
  115. package/dist/use-property.d.ts +29 -0
  116. package/dist/use-property.d.ts.map +1 -0
  117. package/dist/use-property.js +44 -0
  118. package/dist/use-property.js.map +1 -0
  119. package/dist/use-setting.d.ts +36 -0
  120. package/dist/use-setting.d.ts.map +1 -0
  121. package/dist/use-setting.js +68 -0
  122. package/dist/use-setting.js.map +1 -0
  123. package/package.json +3 -3
  124. package/src/components/compound.tsx +57 -0
  125. package/src/components/list.tsx +59 -2
  126. package/src/components/slot-widget.tsx +46 -0
  127. package/src/errors.ts +8 -7
  128. package/src/generated/compounds.ts +2741 -0
  129. package/src/generated/internal.ts +2752 -4754
  130. package/src/generated/jsx.ts +2495 -5012
  131. package/src/generated/registry.ts +2 -1
  132. package/src/index.ts +2 -0
  133. package/src/jsx.ts +121 -443
  134. package/src/metadata.ts +1 -1
  135. package/src/nodes/alert-dialog.ts +55 -0
  136. package/src/nodes/animation.ts +67 -60
  137. package/src/nodes/column-view-column.ts +2 -2
  138. package/src/nodes/container-slot.ts +30 -17
  139. package/src/nodes/drawing-area.ts +23 -32
  140. package/src/nodes/event-controller.ts +3 -7
  141. package/src/nodes/fixed-child.ts +13 -0
  142. package/src/nodes/grid-child.ts +13 -0
  143. package/src/nodes/internal/construct.ts +2 -2
  144. package/src/nodes/internal/widget.ts +6 -12
  145. package/src/nodes/list-item-node.ts +33 -9
  146. package/src/nodes/notebook-page.ts +2 -2
  147. package/src/nodes/overlay-child.ts +30 -9
  148. package/src/nodes/spin-row.ts +72 -0
  149. package/src/nodes/switch-row.ts +26 -0
  150. package/src/nodes/text-anchor.ts +9 -0
  151. package/src/nodes/text-tag.ts +45 -40
  152. package/src/nodes/toggle-group.ts +63 -9
  153. package/src/nodes/widget.ts +6 -13
  154. package/src/registry.ts +7 -5
  155. package/src/types.ts +1 -0
  156. package/src/use-property.ts +58 -0
  157. package/src/use-setting.ts +96 -0
package/dist/jsx.d.ts CHANGED
@@ -5,7 +5,7 @@ import type * as Gsk from "@gtkx/ffi/gsk";
5
5
  import type * as Gtk from "@gtkx/ffi/gtk";
6
6
  import type * as GtkSource from "@gtkx/ffi/gtksource";
7
7
  import type * as Pango from "@gtkx/ffi/pango";
8
- import type { ReactElement, ReactNode } from "react";
8
+ import type { ReactNode } from "react";
9
9
  import type { WidgetSlotNames } from "./generated/jsx.js";
10
10
  /**
11
11
  * CSS properties that can be animated on a widget.
@@ -32,14 +32,40 @@ export type AnimatableProperties = {
32
32
  /** Vertical skew angle in degrees */
33
33
  skewY?: number;
34
34
  };
35
+ /** @internal */
36
+ type AnimationBaseProps = {
37
+ /** Initial property values before animation starts, or `false` to skip initial state */
38
+ initial?: AnimatableProperties | false;
39
+ /** Target property values to animate towards */
40
+ animate?: AnimatableProperties;
41
+ /** Property values to animate to when the component unmounts */
42
+ exit?: AnimatableProperties;
43
+ /** Whether to animate from `initial` to `animate` when first mounted (default: false) */
44
+ animateOnMount?: boolean;
45
+ /** Callback fired when an animation begins */
46
+ onAnimationStart?: () => void;
47
+ /** Callback fired when an animation completes */
48
+ onAnimationComplete?: () => void;
49
+ /** The child widget to animate (must be a single GTK widget) */
50
+ children?: ReactNode;
51
+ };
35
52
  /**
36
- * Transition configuration for timed (duration-based) animations.
53
+ * Props for a timed (duration-based) animation using Adw.TimedAnimation.
37
54
  *
38
- * @see {@link https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.TimedAnimation.html Adw.TimedAnimation}
55
+ * @example
56
+ * ```tsx
57
+ * <AdwTimedAnimation
58
+ * initial={{ opacity: 0 }}
59
+ * animate={{ opacity: 1 }}
60
+ * duration={300}
61
+ * easing={Adw.Easing.EASE_OUT_CUBIC}
62
+ * animateOnMount
63
+ * >
64
+ * <GtkLabel label="Fade in" />
65
+ * </AdwTimedAnimation>
66
+ * ```
39
67
  */
40
- export type TimedTransition = {
41
- /** Discriminant: duration-based animation with easing curves */
42
- mode: "timed";
68
+ export type AdwTimedAnimationProps = AnimationBaseProps & {
43
69
  /** Animation duration in milliseconds (default: 300) */
44
70
  duration?: number;
45
71
  /** Easing function for the animation curve (default: EASE_OUT_CUBIC) */
@@ -54,16 +80,22 @@ export type TimedTransition = {
54
80
  alternate?: boolean;
55
81
  };
56
82
  /**
57
- * Transition configuration for spring (physics-based) animations.
83
+ * Props for a spring (physics-based) animation using Adw.SpringAnimation.
58
84
  *
59
- * Spring animations simulate a mass attached to a spring, providing natural-feeling motion.
60
- * The animation settles when the spring reaches equilibrium.
61
- *
62
- * @see {@link https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SpringAnimation.html Adw.SpringAnimation}
85
+ * @example
86
+ * ```tsx
87
+ * <AdwSpringAnimation
88
+ * initial={{ scale: 0.9, opacity: 0 }}
89
+ * animate={{ scale: 1, opacity: 1 }}
90
+ * damping={0.8}
91
+ * stiffness={200}
92
+ * animateOnMount
93
+ * >
94
+ * <GtkButton label="Spring in" />
95
+ * </AdwSpringAnimation>
96
+ * ```
63
97
  */
64
- export type SpringTransition = {
65
- /** Discriminant: physics-based spring animation */
66
- mode: "spring";
98
+ export type AdwSpringAnimationProps = AnimationBaseProps & {
67
99
  /** Damping ratio controlling oscillation decay (default: 1, critically damped) */
68
100
  damping?: number;
69
101
  /** Spring stiffness in N/m affecting animation speed (default: 100) */
@@ -78,50 +110,9 @@ export type SpringTransition = {
78
110
  delay?: number;
79
111
  };
80
112
  /**
81
- * Discriminated union of all transition configurations.
82
- *
83
- * The `mode` field determines the animation type:
84
- * - `"timed"`: Duration-based animation with easing curves (uses {@link Adw.TimedAnimation})
85
- * - `"spring"`: Physics-based spring animation (uses {@link Adw.SpringAnimation})
86
- */
87
- export type AnimationTransition = TimedTransition | SpringTransition;
88
- /**
89
- * Props for the Animation component.
90
- *
91
- * Provides a declarative API for animating widget properties using either
92
- * timed (duration-based) or spring (physics-based) animations.
93
- *
94
- * @example
95
- * ```tsx
96
- * <x.Animation
97
- * initial={{ opacity: 0, translateY: -20 }}
98
- * animate={{ opacity: 1, translateY: 0 }}
99
- * exit={{ opacity: 0, translateY: 20 }}
100
- * transition={{ mode: "spring", damping: 0.8, stiffness: 200 }}
101
- * animateOnMount
102
- * >
103
- * <GtkLabel label="Animated content" />
104
- * </x.Animation>
105
- * ```
113
+ * @internal Union type used by the AnimationNode internally.
106
114
  */
107
- export type AnimationProps = {
108
- /** Initial property values before animation starts, or `false` to skip initial state */
109
- initial?: AnimatableProperties | false;
110
- /** Target property values to animate towards */
111
- animate?: AnimatableProperties;
112
- /** Property values to animate to when the component unmounts */
113
- exit?: AnimatableProperties;
114
- /** Transition configuration including animation mode and parameters */
115
- transition?: AnimationTransition;
116
- /** Whether to animate from `initial` to `animate` when first mounted (default: false) */
117
- animateOnMount?: boolean;
118
- /** Callback fired when an animation begins */
119
- onAnimationStart?: () => void;
120
- /** Callback fired when an animation completes */
121
- onAnimationComplete?: () => void;
122
- /** The child widget to animate (must be a single GTK widget) */
123
- children?: ReactNode;
124
- };
115
+ export type AnimationProps = AdwTimedAnimationProps | AdwSpringAnimationProps;
125
116
  /**
126
117
  * Props for the Shortcut virtual element.
127
118
  *
@@ -319,7 +310,7 @@ export type LevelBarOffset = {
319
310
  /**
320
311
  * Props for slot-based child positioning.
321
312
  *
322
- * @see {@link Slot} for type-safe slot usage
313
+ * Used internally by compound components with slot props (e.g. `titleWidget` on `AdwHeaderBar`).
323
314
  */
324
315
  export type SlotProps = {
325
316
  /** The slot identifier */
@@ -327,21 +318,6 @@ export type SlotProps = {
327
318
  /** Content to place in the slot */
328
319
  children?: ReactNode;
329
320
  };
330
- /**
331
- * Type mapping widgets to their valid container slot method names.
332
- *
333
- * Each key is a JSX element name and each value is a union of method names
334
- * that can be used as the `id` prop on `x.ContainerSlot`.
335
- */
336
- export type ContainerSlotNames = {
337
- AdwActionRow: "addPrefix" | "addSuffix";
338
- AdwEntryRow: "addPrefix" | "addSuffix";
339
- AdwExpanderRow: "addPrefix" | "addSuffix" | "addRow" | "addAction";
340
- AdwHeaderBar: "packStart" | "packEnd";
341
- AdwToolbarView: "addTopBar" | "addBottomBar";
342
- GtkActionBar: "packStart" | "packEnd";
343
- GtkHeaderBar: "packStart" | "packEnd";
344
- };
345
321
  /**
346
322
  * Props for method-based container slot child positioning.
347
323
  */
@@ -383,7 +359,7 @@ export type ListItem<T = unknown, S = unknown> = {
383
359
  /**
384
360
  * Props for positioning children within a GtkGrid.
385
361
  *
386
- * @see {@link GridChild} for usage
362
+ * Used by `GtkGrid.Child` compound component.
387
363
  */
388
364
  export type GridChildProps = {
389
365
  /** Content to place in the grid cell */
@@ -400,7 +376,7 @@ export type GridChildProps = {
400
376
  /**
401
377
  * Props for positioning children within a GtkFixed.
402
378
  *
403
- * @see {@link FixedChild} for usage
379
+ * Used by `GtkFixed.Child` compound component.
404
380
  */
405
381
  export type FixedChildProps = {
406
382
  /** Content to place in the fixed container */
@@ -417,7 +393,7 @@ export type FixedChildProps = {
417
393
  *
418
394
  * @typeParam T - The type of data for each row
419
395
  *
420
- * @see {@link ColumnViewColumn} for usage
396
+ * Used by `GtkColumnView.Column` compound component.
421
397
  */
422
398
  export type ColumnViewColumnProps<T = unknown> = {
423
399
  /** Column header text */
@@ -462,7 +438,7 @@ export type NotebookPageTabProps = {
462
438
  /**
463
439
  * Props for pages within a Stack or ViewStack.
464
440
  *
465
- * @see {@link StackPage} for usage
441
+ * Used by `GtkStack.Page` and `AdwViewStack.Page` compound components.
466
442
  */
467
443
  export type StackPageProps = {
468
444
  /** Content to place in the stack page */
@@ -485,7 +461,7 @@ export type StackPageProps = {
485
461
  /**
486
462
  * Props for menu items.
487
463
  *
488
- * @see {@link Menu} for building menus
464
+ * Used by menu compound components like `GtkMenuButton.MenuItem`.
489
465
  */
490
466
  export type MenuItemProps = {
491
467
  /** Unique identifier for this menu item */
@@ -561,7 +537,7 @@ export type ToggleProps = {
561
537
  *
562
538
  * Each response represents a button the user can click to dismiss the dialog.
563
539
  *
564
- * @see {@link x.AlertDialogResponse} for usage
540
+ * Used by `AdwAlertDialog.Response` compound component.
565
541
  */
566
542
  export type AlertDialogResponseProps = {
567
543
  /** Unique response ID (used in response signal and for default/close response) */
@@ -573,7 +549,11 @@ export type AlertDialogResponseProps = {
573
549
  /** Whether the response button is enabled */
574
550
  enabled?: boolean;
575
551
  };
576
- type NavigationPageBaseProps = {
552
+ /**
553
+ * Base props shared by all navigation page declarations, regardless
554
+ * of the parent container (NavigationView or NavigationSplitView).
555
+ */
556
+ export type NavigationPageBaseProps = {
577
557
  /** Display title for the navigation page */
578
558
  title?: string;
579
559
  /** Whether the page can be popped from the navigation stack */
@@ -581,6 +561,22 @@ type NavigationPageBaseProps = {
581
561
  /** Page content */
582
562
  children?: ReactNode;
583
563
  };
564
+ /**
565
+ * Props for a navigation page inside an `AdwNavigationView`.
566
+ *
567
+ * The `id` serves as the page tag for navigation history.
568
+ */
569
+ export type NavigationViewPageProps = NavigationPageBaseProps & {
570
+ id: string;
571
+ };
572
+ /**
573
+ * Props for a navigation page inside an `AdwNavigationSplitView`.
574
+ *
575
+ * The `id` is narrowed to the valid slot positions of the split view.
576
+ */
577
+ export type NavigationSplitViewPageProps = NavigationPageBaseProps & {
578
+ id: WidgetSlotNames["AdwNavigationSplitView"];
579
+ };
584
580
  /**
585
581
  * Props for the NavigationPage virtual element with type-safe targeting.
586
582
  *
@@ -634,6 +630,7 @@ export type TextBufferProps = {
634
630
  /** Callback fired when the redo availability changes */
635
631
  onCanRedoChanged?: ((canRedo: boolean) => void) | null;
636
632
  };
633
+ /** @internal */
637
634
  type BaseListViewProps = {
638
635
  /** Estimated item height in pixels for virtualization */
639
636
  estimatedItemHeight?: number;
@@ -646,6 +643,12 @@ type BaseListViewProps = {
646
643
  /** Selection behavior (single, multiple, none, etc.) */
647
644
  selectionMode?: Gtk.SelectionMode | null;
648
645
  };
646
+ /**
647
+ * Props for the {@link GtkListView} compound component.
648
+ *
649
+ * Extends the shared list-view base props with item data, a render
650
+ * callback, optional tree expansion, and section header rendering.
651
+ */
649
652
  export type ListViewProps<T = unknown, S = unknown> = BaseListViewProps & {
650
653
  /** Data items to display in the list */
651
654
  items?: ListItem<T, S>[];
@@ -656,6 +659,12 @@ export type ListViewProps<T = unknown, S = unknown> = BaseListViewProps & {
656
659
  /** Function to render section headers when items contain section entries */
657
660
  renderHeader?: ((item: S) => ReactNode) | null;
658
661
  };
662
+ /**
663
+ * Props for the {@link GtkGridView} compound component.
664
+ *
665
+ * Extends the shared list-view base props with item data and a
666
+ * render callback for each grid cell.
667
+ */
659
668
  export type GridViewProps<T = unknown> = BaseListViewProps & {
660
669
  /** Data items to display in the grid */
661
670
  items?: ListItem<T>[];
@@ -710,335 +719,6 @@ export type AdjustableProps = {
710
719
  /** Callback fired when the adjustable value changes */
711
720
  onValueChanged?: ((value: number, self: Gtk.Range | Gtk.ScaleButton | Gtk.SpinButton | Adw.SpinRow) => void) | null;
712
721
  };
713
- /**
714
- * GTKX-specific intrinsic elements and components.
715
- *
716
- * This namespace provides React components for GTK layout, lists, menus, and slots
717
- * that are specific to GTKX (not direct GTK widget bindings).
718
- *
719
- * @example
720
- * ```tsx
721
- * import { x, GtkHeaderBar } from "@gtkx/react";
722
- *
723
- * <GtkHeaderBar>
724
- * <x.Slot for={GtkHeaderBar} id="titleWidget">
725
- * <GtkLabel label="App Title" />
726
- * </x.Slot>
727
- * </GtkHeaderBar>
728
- * ```
729
- */
730
- export declare const x: {
731
- /**
732
- * Type-safe slot component for placing children in named widget slots.
733
- *
734
- * GTK widgets often have named slots for specific child positions (e.g., titleWidget,
735
- * startWidget). This component provides type-safe access to those slots.
736
- *
737
- * @example
738
- * ```tsx
739
- * <GtkHeaderBar>
740
- * <x.Slot for={GtkHeaderBar} id="titleWidget">
741
- * <GtkLabel label="App Title" />
742
- * </x.Slot>
743
- * </GtkHeaderBar>
744
- * ```
745
- */
746
- Slot<W extends keyof WidgetSlotNames>(props: {
747
- for: W;
748
- id: WidgetSlotNames[W];
749
- children?: ReactNode;
750
- }): ReactElement;
751
- /**
752
- * Element type for pages within a GtkStack or AdwViewStack.
753
- *
754
- * @example
755
- * ```tsx
756
- * <GtkStack page="page1">
757
- * <x.StackPage id="page1" title="First Page">
758
- * <GtkLabel label="Content 1" />
759
- * </x.StackPage>
760
- * </GtkStack>
761
- * ```
762
- */
763
- StackPage: "StackPage";
764
- /**
765
- * Element type for positioning children within a GtkGrid.
766
- *
767
- * @example
768
- * ```tsx
769
- * <GtkGrid>
770
- * <x.GridChild column={0} row={0}>
771
- * <GtkLabel label="Top Left" />
772
- * </x.GridChild>
773
- * </GtkGrid>
774
- * ```
775
- */
776
- GridChild: "GridChild";
777
- /**
778
- * Element type for positioning children within a GtkFixed.
779
- *
780
- * @example
781
- * ```tsx
782
- * <GtkFixed>
783
- * <x.FixedChild x={20} y={30}>
784
- * <GtkLabel label="Positioned at (20, 30)" />
785
- * </x.FixedChild>
786
- * </GtkFixed>
787
- * ```
788
- */
789
- FixedChild: "FixedChild";
790
- /**
791
- * Element type for a page within a GtkNotebook (tabbed interface).
792
- *
793
- * @example
794
- * ```tsx
795
- * <GtkNotebook>
796
- * <x.NotebookPage label="Tab 1">
797
- * <GtkLabel label="Content 1" />
798
- * </x.NotebookPage>
799
- * </GtkNotebook>
800
- * ```
801
- */
802
- NotebookPage: "NotebookPage";
803
- /**
804
- * Element type for a custom widget as the page tab label.
805
- */
806
- NotebookPageTab: "NotebookPageTab";
807
- /**
808
- * Component for defining columns in a ColumnView (table widget).
809
- *
810
- * @example
811
- * ```tsx
812
- * <GtkColumnView>
813
- * <x.ColumnViewColumn
814
- * id="name"
815
- * title="Name"
816
- * expand
817
- * renderCell={(item) => <GtkLabel label={item?.name ?? ""} />}
818
- * />
819
- * </GtkColumnView>
820
- * ```
821
- */
822
- ColumnViewColumn<T = unknown>(props: ColumnViewColumnProps<T>): ReactElement;
823
- /**
824
- * Type-safe container slot for placing children via parent widget methods.
825
- *
826
- * Unlike `x.Slot` (which uses property setters for single-child slots),
827
- * `x.ContainerSlot` calls attachment methods that support multiple children
828
- * (e.g., `addPrefix()`, `packStart()`, `addTopBar()`).
829
- *
830
- * The `for` prop provides TypeScript type narrowing for the `id` prop
831
- * and is not used at runtime.
832
- *
833
- * @example
834
- * ```tsx
835
- * <AdwToolbarView>
836
- * <x.ContainerSlot for={AdwToolbarView} id="addTopBar">
837
- * <AdwHeaderBar />
838
- * </x.ContainerSlot>
839
- * </AdwToolbarView>
840
- *
841
- * <GtkHeaderBar>
842
- * <x.ContainerSlot for={GtkHeaderBar} id="packStart">
843
- * <GtkButton label="Back" />
844
- * </x.ContainerSlot>
845
- * </GtkHeaderBar>
846
- *
847
- * <AdwActionRow title="Setting">
848
- * <x.ContainerSlot for={AdwActionRow} id="addPrefix">
849
- * <GtkCheckButton />
850
- * </x.ContainerSlot>
851
- * </AdwActionRow>
852
- * ```
853
- */
854
- ContainerSlot<W extends keyof ContainerSlotNames>(props: {
855
- for: W;
856
- id: ContainerSlotNames[W];
857
- children?: ReactNode;
858
- }): ReactElement;
859
- /**
860
- * Element type for overlay children positioned above the main content.
861
- *
862
- * @example
863
- * ```tsx
864
- * <GtkOverlay>
865
- * <GtkImage file="background.png" />
866
- * <x.OverlayChild>
867
- * <GtkLabel label="Overlaid text" />
868
- * </x.OverlayChild>
869
- * </GtkOverlay>
870
- * ```
871
- */
872
- OverlayChild: "OverlayChild";
873
- /**
874
- * A clickable menu item with action.
875
- *
876
- * @example
877
- * ```tsx
878
- * <GtkMenuButton>
879
- * <x.MenuItem id="open" label="Open" onActivate={handleOpen} />
880
- * </GtkMenuButton>
881
- * ```
882
- */
883
- MenuItem: "MenuItem";
884
- /**
885
- * A section grouping related menu items.
886
- *
887
- * @example
888
- * ```tsx
889
- * <GtkMenuButton>
890
- * <x.MenuSection label="File">
891
- * <x.MenuItem id="open" label="Open" onActivate={handleOpen} />
892
- * </x.MenuSection>
893
- * </GtkMenuButton>
894
- * ```
895
- */
896
- MenuSection: "MenuSection";
897
- /**
898
- * A submenu containing nested items.
899
- *
900
- * @example
901
- * ```tsx
902
- * <GtkMenuButton>
903
- * <x.MenuSubmenu label="Export">
904
- * <x.MenuItem id="pdf" label="As PDF" onActivate={exportPdf} />
905
- * </x.MenuSubmenu>
906
- * </GtkMenuButton>
907
- * ```
908
- */
909
- MenuSubmenu: "MenuSubmenu";
910
- /**
911
- * Declarative text tag for styling text content.
912
- *
913
- * Wrap text content with a TextTag to apply styling. Tags can be nested.
914
- *
915
- * @example
916
- * ```tsx
917
- * <GtkTextView>
918
- * Normal <x.TextTag id="bold" weight={Pango.Weight.BOLD}>
919
- * bold <x.TextTag id="red" foreground="red">and red</x.TextTag>
920
- * </x.TextTag> text.
921
- * </GtkTextView>
922
- * ```
923
- */
924
- TextTag: "TextTag";
925
- /**
926
- * Declarative anchor for embedding widgets in text flow.
927
- *
928
- * The anchor is placed at the current position in the text.
929
- *
930
- * @example
931
- * ```tsx
932
- * <GtkTextView>
933
- * Click here: <x.TextAnchor>
934
- * <GtkButton label="Click me" />
935
- * </x.TextAnchor> to continue.
936
- * </GtkTextView>
937
- * ```
938
- */
939
- TextAnchor: "TextAnchor";
940
- /**
941
- * Declarative inline paintable for embedding images/icons in text flow.
942
- *
943
- * The paintable is placed at the current position in the text.
944
- *
945
- * @example
946
- * ```tsx
947
- * <GtkTextView>
948
- * Click the icon <x.TextPaintable paintable={iconPaintable} /> to continue.
949
- * </GtkTextView>
950
- * ```
951
- */
952
- TextPaintable: "TextPaintable";
953
- /**
954
- * A toggle button for an AdwToggleGroup.
955
- *
956
- * @example
957
- * ```tsx
958
- * <AdwToggleGroup>
959
- * <x.Toggle id="list" iconName="view-list-symbolic" />
960
- * <x.Toggle id="grid" iconName="view-grid-symbolic" />
961
- * </AdwToggleGroup>
962
- * ```
963
- */
964
- Toggle: "Toggle";
965
- /**
966
- * A response button for an AdwAlertDialog.
967
- *
968
- * @example
969
- * ```tsx
970
- * <AdwAlertDialog
971
- * heading="Delete File?"
972
- * body="This cannot be undone."
973
- * defaultResponse="cancel"
974
- * closeResponse="cancel"
975
- * >
976
- * <x.AlertDialogResponse id="cancel" label="Cancel" />
977
- * <x.AlertDialogResponse id="delete" label="Delete" appearance={Adw.ResponseAppearance.DESTRUCTIVE} />
978
- * </AdwAlertDialog>
979
- * ```
980
- */
981
- AlertDialogResponse: "AlertDialogResponse";
982
- /**
983
- * Type-safe page component for AdwNavigationView or AdwNavigationSplitView.
984
- *
985
- * The `for` prop is required and determines valid `id` values:
986
- * - `AdwNavigationView`: any string (page tags for navigation history)
987
- * - `AdwNavigationSplitView`: `"content"` or `"sidebar"` (slot positions)
988
- *
989
- * @example
990
- * ```tsx
991
- * // In NavigationView - id can be any string
992
- * <AdwNavigationView history={["home"]}>
993
- * <x.NavigationPage for={AdwNavigationView} id="home" title="Home">
994
- * <GtkLabel label="Welcome!" />
995
- * </x.NavigationPage>
996
- * </AdwNavigationView>
997
- *
998
- * // In NavigationSplitView - id is narrowed to "content" | "sidebar"
999
- * <AdwNavigationSplitView>
1000
- * <x.NavigationPage for={AdwNavigationSplitView} id="sidebar" title="Sidebar">
1001
- * <GtkLabel label="Sidebar" />
1002
- * </x.NavigationPage>
1003
- * <x.NavigationPage for={AdwNavigationSplitView} id="content" title="Content">
1004
- * <GtkLabel label="Content" />
1005
- * </x.NavigationPage>
1006
- * </AdwNavigationSplitView>
1007
- * ```
1008
- */
1009
- NavigationPage: "NavigationPage";
1010
- /**
1011
- * A keyboard shortcut definition.
1012
- *
1013
- * Must be a child of `<GtkShortcutController>`.
1014
- *
1015
- * @example
1016
- * ```tsx
1017
- * <x.Shortcut trigger="<Control>s" onActivate={save} />
1018
- * <x.Shortcut trigger={["F5", "<Control>r"]} onActivate={refresh} />
1019
- * <x.Shortcut trigger="Escape" onActivate={cancel} disabled={!canCancel} />
1020
- * ```
1021
- */
1022
- Shortcut: "Shortcut";
1023
- /**
1024
- * Declarative animation wrapper using Adw.TimedAnimation or Adw.SpringAnimation.
1025
- *
1026
- * Provides framer-motion-inspired API for animating child widgets.
1027
- *
1028
- * @example
1029
- * ```tsx
1030
- * <x.Animation
1031
- * initial={{ opacity: 0, scale: 0.9 }}
1032
- * animate={{ opacity: 1, scale: 1 }}
1033
- * transition={{ mode: "spring", damping: 0.8, stiffness: 200 }}
1034
- * animateOnMount
1035
- * >
1036
- * <GtkButton label="Animated Button" />
1037
- * </x.Animation>
1038
- * ```
1039
- */
1040
- Animation: "Animation";
1041
- };
1042
722
  interface StackProps {
1043
723
  /** ID of the currently visible page */
1044
724
  page?: string | null;
@@ -1047,8 +727,9 @@ declare global {
1047
727
  namespace React {
1048
728
  namespace JSX {
1049
729
  interface IntrinsicElements {
1050
- AlertDialogResponse: AlertDialogResponseProps;
1051
- Animation: AnimationProps;
730
+ Slot: SlotProps;
731
+ AdwTimedAnimation: AdwTimedAnimationProps;
732
+ AdwSpringAnimation: AdwSpringAnimationProps;
1052
733
  ContainerSlot: ContainerSlotProps;
1053
734
  ColumnViewColumn: ColumnViewColumnProps;
1054
735
  FixedChild: FixedChildProps;
@@ -1063,13 +744,19 @@ declare global {
1063
744
  TextPaintable: TextPaintableProps;
1064
745
  TextTag: TextTagProps;
1065
746
  StackPage: StackPageProps;
1066
- Toggle: ToggleProps;
1067
747
  NavigationPage: NavigationPageProps;
1068
748
  Shortcut: ShortcutProps;
1069
749
  }
1070
750
  }
1071
751
  }
1072
752
  }
753
+ /**
754
+ * Accessibility attribute props mixed into every widget.
755
+ *
756
+ * Maps to the GTK `GtkAccessible` interface properties, states,
757
+ * and relations, allowing assistive technologies to query widget
758
+ * semantics.
759
+ */
1073
760
  export type AccessibleProps = {
1074
761
  accessibleAutocomplete?: Gtk.AccessibleAutocomplete;
1075
762
  accessibleDescription?: string;
@@ -1146,6 +833,10 @@ declare module "./generated/jsx.js" {
1146
833
  /** Callback fired when the spin row value changes */
1147
834
  onValueChanged?: ((value: number, self: Adw.SpinRow) => void) | null;
1148
835
  }
836
+ interface AdwSwitchRowProps {
837
+ /** Callback fired when the switch row active state changes */
838
+ onActiveChanged?: ((active: boolean, self: Adw.SwitchRow) => void) | null;
839
+ }
1149
840
  interface GtkCalendarProps {
1150
841
  /** Array of day numbers (1-31) to display as marked */
1151
842
  markedDays?: number[] | null;
@@ -1222,8 +913,8 @@ declare module "./generated/jsx.js" {
1222
913
  onClose?: (() => void) | null;
1223
914
  }
1224
915
  interface GtkDrawingAreaProps {
1225
- /** Callback fired when the drawing area needs to be redrawn */
1226
- onDraw?: ((cr: cairo.Context, width: number, height: number, self: Gtk.DrawingArea) => void) | null;
916
+ /** Render function called when the drawing area needs to be redrawn. Changing this reference automatically queues a redraw. */
917
+ render?: ((cr: cairo.Context, width: number, height: number, self: Gtk.DrawingArea) => void) | null;
1227
918
  }
1228
919
  interface GtkColorDialogButtonProps extends DialogButtonProps {
1229
920
  /** Callback fired when the selected color changes */
@@ -1253,6 +944,12 @@ declare module "./generated/jsx.js" {
1253
944
  interface AdwToggleGroupProps {
1254
945
  /** Callback fired when the active toggle changes */
1255
946
  onActiveChanged?: ((active: number, activeName: string | null) => void) | null;
947
+ /** Declarative toggle definitions for the group */
948
+ toggles?: ToggleProps[];
949
+ }
950
+ interface AdwAlertDialogProps {
951
+ /** Declarative response button definitions for the dialog */
952
+ responses?: AlertDialogResponseProps[];
1256
953
  }
1257
954
  interface GtkDragSourceProps {
1258
955
  /** Paintable to use as the drag icon */
@@ -1268,5 +965,10 @@ declare module "./generated/jsx.js" {
1268
965
  }
1269
966
  }
1270
967
  export { AdwComboRow, GtkColumnView, GtkDropDown, GtkGridView, GtkListView } from "./components/list.js";
968
+ export * from "./generated/compounds.js";
969
+ /** JSX intrinsic element name for timed (duration-based) Adwaita animations. */
970
+ export declare const AdwTimedAnimation: "AdwTimedAnimation";
971
+ /** JSX intrinsic element name for spring-physics-based Adwaita animations. */
972
+ export declare const AdwSpringAnimation: "AdwSpringAnimation";
1271
973
  export * from "./generated/jsx.js";
1272
974
  //# sourceMappingURL=jsx.d.ts.map