@gtkx/react 0.12.1 → 0.13.0

package/dist/jsx.js

@@ -1,369 +1,417 @@
 import { createElement } from "react";
 /**
- * Type-safe slot component for placing children in named widget slots.
+ * GTKX-specific intrinsic elements and components.
  *
- * GTK widgets often have named slots for specific child positions (e.g., titleWidget,
- * startWidget). This component provides type-safe access to those slots.
- *
- * @typeParam W - The widget type containing the slot
- *
- * @param props.for - The widget component type (used for type inference)
- * @param props.id - The slot identifier (type-checked against available slots)
- * @param props.children - Content to place in the slot
+ * This namespace provides React components for GTK layout, lists, menus, and slots
+ * that are specific to GTKX (not direct GTK widget bindings).
  *
  * @example
  * ```tsx
+ * import { x, GtkHeaderBar, GtkDropDown } from "@gtkx/react";
+ *
  * <GtkHeaderBar>
- *   <Slot for={GtkHeaderBar} id="titleWidget">
+ *   <x.Slot for={GtkHeaderBar} id="titleWidget">
  *     <GtkLabel label="App Title" />
- *   </Slot>
+ *   </x.Slot>
  * </GtkHeaderBar>
- * ```
- *
- * @internal
- */
-export function Slot(props) {
-    return createElement("Slot", { id: props.id }, props.children);
-}
-/**
- * Element type for pages within a GtkStack or AdwViewStack.
- *
- * @example
- * ```tsx
- * <GtkStack>
- *   <StackPage name="page1" title="First Page">
- *     <GtkLabel label="Content 1" />
- *   </StackPage>
- *   <StackPage name="page2" title="Second Page">
- *     <GtkLabel label="Content 2" />
- *   </StackPage>
- * </GtkStack>
- * ```
- */
-export const StackPage = "StackPage";
-/**
- * Element type for positioning children within a GtkGrid.
- *
- * @example
- * ```tsx
- * <GtkGrid>
- *   <GridChild column={0} row={0}>
- *     <GtkLabel label="Top Left" />
- *   </GridChild>
- *   <GridChild column={1} row={0} columnSpan={2}>
- *     <GtkLabel label="Spans 2 columns" />
- *   </GridChild>
- * </GtkGrid>
- * ```
- */
-export const GridChild = "GridChild";
-/**
- * Element type for positioning children within a GtkFixed.
- *
- * @example
- * ```tsx
- * <GtkFixed>
- *   <FixedChild x={20} y={30}>
- *     <GtkLabel label="Positioned at (20, 30)" />
- *   </FixedChild>
- *   <FixedChild x={100} y={50}>
- *     <GtkButton label="At (100, 50)" />
- *   </FixedChild>
- * </GtkFixed>
- * ```
- */
-export const FixedChild = "FixedChild";
-/**
- * Element types for pages within a GtkNotebook (tabbed interface).
- *
- * @example Simple text tabs
- * ```tsx
- * <GtkNotebook>
- *   <Notebook.Page label="Tab 1">
- *     <GtkLabel label="Content 1" />
- *   </Notebook.Page>
- *   <Notebook.Page label="Tab 2">
- *     <GtkLabel label="Content 2" />
- *   </Notebook.Page>
- * </GtkNotebook>
- * ```
  *
- * @example Custom tab widgets
- * ```tsx
- * <GtkNotebook>
- *   <Notebook.Page>
- *     <Notebook.PageTab>
- *       <GtkBox orientation={Gtk.Orientation.HORIZONTAL}>
- *         <GtkImage iconName="folder-symbolic" />
- *         <GtkLabel label="Files" />
- *       </GtkBox>
- *     </Notebook.PageTab>
- *     <GtkLabel label="Content" />
- *   </Notebook.Page>
- * </GtkNotebook>
- * ```
- */
-export const Notebook = {
-    /** A page within the notebook */
-    Page: "Notebook.Page",
-    /** Custom widget for the page tab label */
-    PageTab: "Notebook.PageTab",
-};
-/**
- * Element type for items in a ListView or GridView.
- *
- * @example
- * ```tsx
- * <ListView renderItem={(item) => <GtkLabel label={item.name} />}>
- *   <ListItem id="1" value={{ name: "Item 1" }} />
- *   <ListItem id="2" value={{ name: "Item 2" }} />
- * </ListView>
- * ```
- */
-export const ListItem = "ListItem";
-/**
- * Component for defining columns in a ColumnView (table widget).
- *
- * @typeParam T - The type of row data
- *
- * @example
- * ```tsx
- * <GtkColumnView>
- *   <ColumnViewColumn
- *     id="name"
- *     title="Name"
- *     expand
- *     renderCell={(item) => <GtkLabel label={item?.name ?? ""} />}
- *   />
- *   <ColumnViewColumn
- *     id="status"
- *     title="Status"
- *     renderCell={(item) => <GtkLabel label={item?.status ?? ""} />}
- *   />
- * </GtkColumnView>
- * ```
- *
- * @internal
- */
-export function ColumnViewColumn(props) {
-    return createElement("ColumnViewColumn", props);
-}
-/**
- * Virtualized list component with custom item rendering.
- *
- * Efficiently renders large lists by only creating widgets for visible items.
- *
- * @typeParam T - The type of items in the list
- *
- * @example
- * ```tsx
- * const items = [{ id: "1", name: "Apple" }, { id: "2", name: "Banana" }];
- *
- * <ListView renderItem={(item) => <GtkLabel label={item?.name ?? ""} />}>
- *   {items.map((item) => (
- *     <ListItem key={item.id} id={item.id} value={item} />
- *   ))}
- * </ListView>
- * ```
- *
- * @internal
- */
-export function ListView(props) {
-    return createElement("GtkListView", props);
-}
-/**
- * Virtualized grid component with custom item rendering.
- *
- * Efficiently renders large grids by only creating widgets for visible items.
- *
- * @typeParam T - The type of items in the grid
- *
- * @example
- * ```tsx
- * <GridView renderItem={(item) => <GtkImage iconName={item?.icon ?? ""} />}>
- *   {icons.map((icon) => (
- *     <ListItem key={icon.id} id={icon.id} value={icon} />
- *   ))}
- * </GridView>
- * ```
- *
- * @internal
- */
-export function GridView(props) {
-    return createElement("GtkGridView", props);
-}
-/**
- * Tree list component with hierarchical data and expand/collapse support.
- *
- * Renders a tree structure with expandable/collapsible rows using GTK's TreeListModel.
- * Items are defined declaratively by nesting TreeListItem components.
- *
- * @typeParam T - The type of items in the tree
- *
- * @example
- * ```tsx
- * interface Category { name: string; }
- * interface Setting { key: string; value: string; }
- *
- * <TreeListView<Category | Setting>
- *   renderItem={(item, row) => (
- *     <GtkLabel label={'name' in item ? item.name : item.key} />
- *   )}
- * >
- *   {categories.map(cat => (
- *     <TreeListItem key={cat.name} id={cat.name} value={cat}>
- *       {cat.settings?.map(setting => (
- *         <TreeListItem key={setting.key} id={setting.key} value={setting} />
- *       ))}
- *     </TreeListItem>
- *   ))}
- * </TreeListView>
- * ```
- *
- * @internal
- */
-export function TreeListView(props) {
-    return createElement("TreeListView", props);
-}
-/**
- * Element type for items in a TreeListView.
- *
- * Nesting TreeListItem components defines the tree hierarchy.
- *
- * @example
- * ```tsx
- * <TreeListView renderItem={(item) => <GtkLabel label={item.name} />}>
- *   <TreeListItem id="parent" value={{ name: "Parent" }}>
- *     <TreeListItem id="child1" value={{ name: "Child 1" }} />
- *     <TreeListItem id="child2" value={{ name: "Child 2" }} />
- *   </TreeListItem>
- * </TreeListView>
- * ```
- */
-export const TreeListItem = "TreeListItem";
-/**
- * Element type for simple string-based list items.
- *
- * Use when list items only need string values without complex data.
- *
- * @example
- * ```tsx
  * <GtkDropDown>
- *   <SimpleListItem id="opt1" value="Option 1" />
- *   <SimpleListItem id="opt2" value="Option 2" />
+ *   <x.SimpleListItem id="opt1" value="Option 1" />
+ *   <x.SimpleListItem id="opt2" value="Option 2" />
  * </GtkDropDown>
  * ```
  */
-export const SimpleListItem = "SimpleListItem";
-/**
- * Slot positions for AdwActionRow, AdwEntryRow, and AdwExpanderRow widgets.
- *
- * @example
- * ```tsx
- * <AdwActionRow title="Setting">
- *   <ActionRow.Prefix>
- *     <GtkCheckButton />
- *   </ActionRow.Prefix>
- *   <ActionRow.Suffix>
- *     <GtkButton iconName="go-next-symbolic" />
- *   </ActionRow.Suffix>
- * </AdwActionRow>
- * ```
- */
-export const ActionRow = {
-    /** Place child as a prefix (left side) of the row */
-    Prefix: "ActionRow.Prefix",
-    /** Place child as a suffix (right side) of the row */
-    Suffix: "ActionRow.Suffix",
-};
-/**
- * Slot positions for HeaderBar and ActionBar widgets.
- *
- * @example
- * ```tsx
- * <GtkHeaderBar>
- *   <Pack.Start>
- *     <GtkButton label="Back" />
- *   </Pack.Start>
- *   <Pack.End>
- *     <GtkMenuButton />
- *   </Pack.End>
- * </GtkHeaderBar>
- * ```
- */
-export const Pack = {
-    /** Place child at the start (left in LTR) of the bar */
-    Start: "Pack.Start",
-    /** Place child at the end (right in LTR) of the bar */
-    End: "Pack.End",
-};
-/**
- * Slot positions for AdwToolbarView.
- *
- * @example
- * ```tsx
- * <AdwToolbarView>
- *   <Toolbar.Top>
- *     <AdwHeaderBar />
- *   </Toolbar.Top>
- *   <GtkLabel label="Content" />
- *   <Toolbar.Bottom>
- *     <GtkActionBar />
- *   </Toolbar.Bottom>
- * </AdwToolbarView>
- * ```
- */
-export const Toolbar = {
-    /** Place toolbar at the top */
-    Top: "Toolbar.Top",
-    /** Place toolbar at the bottom */
-    Bottom: "Toolbar.Bottom",
-};
-/**
- * Element type for GtkOverlay main child container.
- */
-export const Overlay = "Overlay";
-/**
- * Element type for overlay children positioned above the main content.
- *
- * @example
- * ```tsx
- * <GtkOverlay>
- *   <Overlay>
- *     <GtkImage file="background.png" />
- *   </Overlay>
- *   <OverlayChild>
- *     <GtkLabel label="Overlaid text" cssClasses={["title-1"]} />
- *   </OverlayChild>
- * </GtkOverlay>
- * ```
- */
-export const OverlayChild = "OverlayChild";
-/**
- * Element types for declarative menu construction.
- *
- * Build menus with items, sections, and submenus declaratively.
- *
- * @example
- * ```tsx
- * <GtkMenuButton>
- *   <Menu.Section>
- *     <Menu.Item id="open" label="Open" onActivate={handleOpen} accels="<Control>o" />
- *     <Menu.Item id="save" label="Save" onActivate={handleSave} accels="<Control>s" />
- *   </Menu.Section>
- *   <Menu.Submenu label="Export">
- *     <Menu.Item id="pdf" label="As PDF" onActivate={exportPdf} />
- *     <Menu.Item id="png" label="As PNG" onActivate={exportPng} />
- *   </Menu.Submenu>
- * </GtkMenuButton>
- * ```
- */
-export const Menu = {
-    /** A clickable menu item with action */
-    Item: "Menu.Item",
-    /** A section grouping related menu items */
-    Section: "Menu.Section",
-    /** A submenu containing nested items */
-    Submenu: "Menu.Submenu",
+export const x = {
+    /**
+     * Type-safe slot component for placing children in named widget slots.
+     *
+     * GTK widgets often have named slots for specific child positions (e.g., titleWidget,
+     * startWidget). This component provides type-safe access to those slots.
+     *
+     * @example
+     * ```tsx
+     * <GtkHeaderBar>
+     *   <x.Slot for={GtkHeaderBar} id="titleWidget">
+     *     <GtkLabel label="App Title" />
+     *   </x.Slot>
+     * </GtkHeaderBar>
+     * ```
+     */
+    Slot(props) {
+        return createElement("Slot", { id: props.id }, props.children);
+    },
+    /**
+     * Element type for pages within a GtkStack or AdwViewStack.
+     *
+     * @example
+     * ```tsx
+     * <GtkStack page="page1">
+     *   <x.StackPage id="page1" title="First Page">
+     *     <GtkLabel label="Content 1" />
+     *   </x.StackPage>
+     * </GtkStack>
+     * ```
+     */
+    StackPage: "StackPage",
+    /**
+     * Element type for positioning children within a GtkGrid.
+     *
+     * @example
+     * ```tsx
+     * <GtkGrid>
+     *   <x.GridChild column={0} row={0}>
+     *     <GtkLabel label="Top Left" />
+     *   </x.GridChild>
+     * </GtkGrid>
+     * ```
+     */
+    GridChild: "GridChild",
+    /**
+     * Element type for positioning children within a GtkFixed.
+     *
+     * @example
+     * ```tsx
+     * <GtkFixed>
+     *   <x.FixedChild x={20} y={30}>
+     *     <GtkLabel label="Positioned at (20, 30)" />
+     *   </x.FixedChild>
+     * </GtkFixed>
+     * ```
+     */
+    FixedChild: "FixedChild",
+    /**
+     * Element type for a page within a GtkNotebook (tabbed interface).
+     *
+     * @example
+     * ```tsx
+     * <GtkNotebook>
+     *   <x.NotebookPage label="Tab 1">
+     *     <GtkLabel label="Content 1" />
+     *   </x.NotebookPage>
+     * </GtkNotebook>
+     * ```
+     */
+    NotebookPage: "NotebookPage",
+    /**
+     * Element type for a custom widget as the page tab label.
+     */
+    NotebookPageTab: "NotebookPageTab",
+    /**
+     * Element type for items in a ListView or GridView.
+     *
+     * @example
+     * ```tsx
+     * <x.ListView renderItem={(item) => <GtkLabel label={item.name} />}>
+     *   <x.ListItem id="1" value={{ name: "Item 1" }} />
+     * </x.ListView>
+     * ```
+     */
+    ListItem: "ListItem",
+    /**
+     * Element type for items in a TreeListView.
+     *
+     * @example
+     * ```tsx
+     * <x.TreeListView renderItem={(item) => <GtkLabel label={item.name} />}>
+     *   <x.TreeListItem id="parent" value={{ name: "Parent" }}>
+     *     <x.TreeListItem id="child" value={{ name: "Child" }} />
+     *   </x.TreeListItem>
+     * </x.TreeListView>
+     * ```
+     */
+    TreeListItem: "TreeListItem",
+    /**
+     * Element type for simple string-based list items.
+     *
+     * @example
+     * ```tsx
+     * <GtkDropDown>
+     *   <x.SimpleListItem id="opt1" value="Option 1" />
+     * </GtkDropDown>
+     * ```
+     */
+    SimpleListItem: "SimpleListItem",
+    /**
+     * Component for defining columns in a ColumnView (table widget).
+     *
+     * @example
+     * ```tsx
+     * <GtkColumnView>
+     *   <x.ColumnViewColumn
+     *     id="name"
+     *     title="Name"
+     *     expand
+     *     renderCell={(item) => <GtkLabel label={item?.name ?? ""} />}
+     *   />
+     * </GtkColumnView>
+     * ```
+     */
+    ColumnViewColumn(props) {
+        return createElement("ColumnViewColumn", props);
+    },
+    /**
+     * Virtualized list component with custom item rendering.
+     *
+     * @example
+     * ```tsx
+     * <x.ListView renderItem={(item) => <GtkLabel label={item?.name ?? ""} />}>
+     *   <x.ListItem id="1" value={{ name: "Apple" }} />
+     * </x.ListView>
+     * ```
+     */
+    ListView(props) {
+        return createElement("GtkListView", props);
+    },
+    /**
+     * Virtualized grid component with custom item rendering.
+     *
+     * @example
+     * ```tsx
+     * <x.GridView renderItem={(item) => <GtkImage iconName={item?.icon ?? ""} />}>
+     *   <x.ListItem id="1" value={{ icon: "folder" }} />
+     * </x.GridView>
+     * ```
+     */
+    GridView(props) {
+        return createElement("GtkGridView", props);
+    },
+    /**
+     * Tree list component with hierarchical data and expand/collapse support.
+     *
+     * @example
+     * ```tsx
+     * <x.TreeListView renderItem={(item, row) => <GtkLabel label={item.name} />}>
+     *   <x.TreeListItem id="root" value={{ name: "Root" }}>
+     *     <x.TreeListItem id="child" value={{ name: "Child" }} />
+     *   </x.TreeListItem>
+     * </x.TreeListView>
+     * ```
+     */
+    TreeListView(props) {
+        return createElement("TreeListView", props);
+    },
+    /**
+     * Place child as a prefix (left side) of AdwActionRow, AdwEntryRow, or AdwExpanderRow.
+     *
+     * @example
+     * ```tsx
+     * <AdwActionRow title="Setting">
+     *   <x.ActionRowPrefix>
+     *     <GtkCheckButton />
+     *   </x.ActionRowPrefix>
+     * </AdwActionRow>
+     * ```
+     */
+    ActionRowPrefix: "ActionRowPrefix",
+    /**
+     * Place child as a suffix (right side) of AdwActionRow, AdwEntryRow, or AdwExpanderRow.
+     *
+     * @example
+     * ```tsx
+     * <AdwActionRow title="Setting">
+     *   <x.ActionRowSuffix>
+     *     <GtkButton iconName="go-next-symbolic" />
+     *   </x.ActionRowSuffix>
+     * </AdwActionRow>
+     * ```
+     */
+    ActionRowSuffix: "ActionRowSuffix",
+    /**
+     * Place child at the start (left in LTR) of HeaderBar or ActionBar.
+     *
+     * @example
+     * ```tsx
+     * <GtkHeaderBar>
+     *   <x.PackStart>
+     *     <GtkButton label="Back" />
+     *   </x.PackStart>
+     * </GtkHeaderBar>
+     * ```
+     */
+    PackStart: "PackStart",
+    /**
+     * Place child at the end (right in LTR) of HeaderBar or ActionBar.
+     *
+     * @example
+     * ```tsx
+     * <GtkHeaderBar>
+     *   <x.PackEnd>
+     *     <GtkMenuButton />
+     *   </x.PackEnd>
+     * </GtkHeaderBar>
+     * ```
+     */
+    PackEnd: "PackEnd",
+    /**
+     * Place toolbar at the top of AdwToolbarView.
+     *
+     * @example
+     * ```tsx
+     * <AdwToolbarView>
+     *   <x.ToolbarTop>
+     *     <AdwHeaderBar />
+     *   </x.ToolbarTop>
+     * </AdwToolbarView>
+     * ```
+     */
+    ToolbarTop: "ToolbarTop",
+    /**
+     * Place toolbar at the bottom of AdwToolbarView.
+     *
+     * @example
+     * ```tsx
+     * <AdwToolbarView>
+     *   <x.ToolbarBottom>
+     *     <GtkActionBar />
+     *   </x.ToolbarBottom>
+     * </AdwToolbarView>
+     * ```
+     */
+    ToolbarBottom: "ToolbarBottom",
+    /**
+     * Element type for overlay children positioned above the main content.
+     *
+     * @example
+     * ```tsx
+     * <GtkOverlay>
+     *   <GtkImage file="background.png" />
+     *   <x.OverlayChild>
+     *     <GtkLabel label="Overlaid text" />
+     *   </x.OverlayChild>
+     * </GtkOverlay>
+     * ```
+     */
+    OverlayChild: "OverlayChild",
+    /**
+     * A clickable menu item with action.
+     *
+     * @example
+     * ```tsx
+     * <GtkMenuButton>
+     *   <x.MenuItem id="open" label="Open" onActivate={handleOpen} />
+     * </GtkMenuButton>
+     * ```
+     */
+    MenuItem: "MenuItem",
+    /**
+     * A section grouping related menu items.
+     *
+     * @example
+     * ```tsx
+     * <GtkMenuButton>
+     *   <x.MenuSection label="File">
+     *     <x.MenuItem id="open" label="Open" onActivate={handleOpen} />
+     *   </x.MenuSection>
+     * </GtkMenuButton>
+     * ```
+     */
+    MenuSection: "MenuSection",
+    /**
+     * A submenu containing nested items.
+     *
+     * @example
+     * ```tsx
+     * <GtkMenuButton>
+     *   <x.MenuSubmenu label="Export">
+     *     <x.MenuItem id="pdf" label="As PDF" onActivate={exportPdf} />
+     *   </x.MenuSubmenu>
+     * </GtkMenuButton>
+     * ```
+     */
+    MenuSubmenu: "MenuSubmenu",
+    /**
+     * A mark to display on a GtkScale slider.
+     *
+     * @example
+     * ```tsx
+     * <GtkScale>
+     *   <x.ScaleMark value={0} label="Min" />
+     *   <x.ScaleMark value={50} />
+     *   <x.ScaleMark value={100} label="Max" />
+     * </GtkScale>
+     * ```
+     */
+    ScaleMark: "ScaleMark",
+    /**
+     * A day mark on a GtkCalendar.
+     *
+     * @example
+     * ```tsx
+     * <GtkCalendar>
+     *   <x.CalendarMark day={15} />
+     *   <x.CalendarMark day={20} />
+     *   <x.CalendarMark day={25} />
+     * </GtkCalendar>
+     * ```
+     */
+    CalendarMark: "CalendarMark",
+    /**
+     * An offset threshold for a GtkLevelBar.
+     *
+     * @example
+     * ```tsx
+     * <GtkLevelBar>
+     *   <x.LevelBarOffset id="low" value={0.25} />
+     *   <x.LevelBarOffset id="high" value={0.75} />
+     *   <x.LevelBarOffset id="full" value={1.0} />
+     * </GtkLevelBar>
+     * ```
+     */
+    LevelBarOffset: "LevelBarOffset",
+    /**
+     * A toggle button for an AdwToggleGroup.
+     *
+     * @example
+     * ```tsx
+     * <AdwToggleGroup>
+     *   <x.Toggle id="list" iconName="view-list-symbolic" />
+     *   <x.Toggle id="grid" iconName="view-grid-symbolic" />
+     * </AdwToggleGroup>
+     * ```
+     */
+    Toggle: "Toggle",
+    /**
+     * Nested rows container for AdwExpanderRow.
+     *
+     * @example
+     * ```tsx
+     * <AdwExpanderRow title="Settings">
+     *   <ExpanderRow.Row>
+     *     <AdwActionRow title="Option 1" />
+     *     <AdwActionRow title="Option 2" />
+     *   </ExpanderRow.Row>
+     * </AdwExpanderRow>
+     * ```
+     */
+    ExpanderRowRow: "ExpanderRowRow",
+    /**
+     * Action widget container for AdwExpanderRow header.
+     *
+     * @example
+     * ```tsx
+     * <AdwExpanderRow title="Group">
+     *   <ExpanderRow.Action>
+     *     <GtkButton iconName="emblem-system-symbolic" />
+     *   </ExpanderRow.Action>
+     * </AdwExpanderRow>
+     * ```
+     */
+    ExpanderRowAction: "ExpanderRowAction",
+    /**
+     * A page within an AdwNavigationView.
+     *
+     * @example
+     * ```tsx
+     * <AdwNavigationView history={["home"]}>
+     *   <x.NavigationPage id="home" title="Home">
+     *     <GtkLabel label="Welcome!" />
+     *   </x.NavigationPage>
+     *   <x.NavigationPage id="settings" title="Settings">
+     *     <GtkLabel label="Settings page" />
+     *   </x.NavigationPage>
+     * </AdwNavigationView>
+     * ```
+     */
+    NavigationPage: "NavigationPage",
 };
 export * from "./generated/jsx.js";