@kanso-labs/react-native-kanso-ui 0.9.0 → 0.10.0

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,196 @@
+import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
+import { Key, Orientation } from "react-stately";
+//#region src/components/tabs/index.d.ts
+/** How the bar shares its room among the tabs. */
+type TabsLayout = 'fixed' | 'scrollable';
+type TabsListProps<T extends object = object> = {
+  /** Names the bar, for a screen reader. */
+  readonly 'aria-label'?: string;
+  /** Names the bar after the element with this id. */
+  readonly 'aria-labelledby'?: string;
+  /**
+   * The tabs, as `Tabs.Tab` elements each given an `id`, or with `items` a
+   * function from an item to its tab.
+   */
+  readonly children?: ((item: T) => ReactElement) | ReactNode;
+  /** The items to draw a tab for, through the function `children` is. */
+  readonly items?: Iterable<T>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type TabsPanelProps = {
+  readonly children?: ReactNode;
+  /**
+   * The key of the tab the panel belongs to, which is drawn while that tab
+   * is selected. A panel given none is drawn under whichever tab is.
+   */
+  readonly id?: Key;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type TabsPanelsProps = {
+  /** The `Tabs.Panel` elements, whose box moves between their heights. */
+  readonly children?: ReactNode;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type TabsProps = {
+  /** The bar, as a `Tabs.List`, and the `Tabs.Panel` elements it switches. */
+  readonly children?: ReactNode;
+  /** The tab selected at first, when the bar keeps its own selection. */
+  readonly defaultSelectedKey?: Key;
+  /** The keys of the tabs that take no press, and draw disabled. */
+  readonly disabledKeys?: Iterable<Key>;
+  /**
+   * Disables every tab.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * How the bar shares its room: `fixed` divides it into equal sections, and
+   * `scrollable` gives each tab its label's width in a bar that scrolls,
+   * which is the page's choice for more tabs than the room has sections for.
+   * @default 'fixed'
+   */
+  readonly layout?: TabsLayout;
+  /** Called with the key of the tab that has just been selected. */
+  readonly onSelectionChange?: (key: Key) => void;
+  /**
+   * Whether the bar runs across, above its panels, or down, beside them.
+   * @default 'horizontal'
+   */
+  readonly orientation?: Orientation;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /** The key of the selected tab, when the call site holds it. */
+  readonly selectedKey?: Key | null;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /**
+   * Which of the page's two tab bars this is: `primary` for the main one,
+   * `secondary` for a strip under a primary one.
+   * @default 'primary'
+   */
+  readonly variant?: TabsVariant;
+};
+type TabsTabProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'role' | 'style'> & {
+  /**
+   * A badge on the tab: `true` for the badges page's small dot, a number for
+   * the large badge holding it. It sits on a primary tab's icon, and after
+   * the label anywhere else. The badge is hidden from a screen reader, so say
+   * what it says in the tab's `aria-label` too: "Second item, 3 new".
+   */
+  readonly badge?: boolean | number;
+  /** The tab's label. */
+  readonly children?: ReactNode;
+  /** Where the tab goes when pressed, through the app's router. */
+  readonly href?: string;
+  /**
+   * An icon with the label, at the page's 24dp: over it on a primary tab,
+   * whose bar grows to 64dp, and before it on a secondary one. The slot hands
+   * it its colour and size through `useIconStyle()`.
+   */
+  readonly icon?: ReactNode;
+  /**
+   * The tab's key, which selection reports and its `Tabs.Panel` shares.
+   * Without one, a tab drawn from `items` takes its item's `id` or `key`.
+   */
+  readonly id?: Key;
+  /**
+   * Draws the tab disabled, and it takes no press, as a key in the bar's
+   * `disabledKeys` does.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * The tab's text, for a label that is not a plain string. Read off
+   * `children` when it is one.
+   */
+  readonly textValue?: string;
+};
+/** The tabs page's two styles of tab bar. */
+type TabsVariant = 'primary' | 'secondary';
+/**
+ * A tab bar and the panels it switches between. Pass `selectedKey` with
+ * `onSelectionChange` to hold the selection, or `defaultSelectedKey` to let
+ * the bar keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it shows
+ * through a shared `id`, and a bar may stand alone without panels.
+ *
+ * ```tsx
+ * <Tabs defaultSelectedKey="first">
+ *   <Tabs.List aria-label="Sections">
+ *     <Tabs.Tab id="first">First item</Tabs.Tab>
+ *     <Tabs.Tab id="second">Second item</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel id="first">
+ *     <Text>Supporting line</Text>
+ *   </Tabs.Panel>
+ *   <Tabs.Panel id="second">
+ *     <Text>Supporting line</Text>
+ *   </Tabs.Panel>
+ * </Tabs>
+ * ```
+ *
+ * Write the `Tabs.List` among the children of `Tabs`, inside any view or
+ * fragment, rather than in a component of the call site's own: the bar is
+ * found there, and its tabs are what the selection is built from.
+ *
+ * `style`, `ref` and `testID` land on the root view, the one a layout
+ * positions.
+ */
+declare function Tabs({ children, defaultSelectedKey, disabledKeys, isDisabled, layout, onSelectionChange, orientation, ref, selectedKey, style, testID, variant }: TabsProps): import("react").JSX.Element;
+declare namespace Tabs {
+  var List: typeof TabsList;
+  var Panel: typeof TabsPanel;
+  var Panels: typeof TabsPanels;
+  var Tab: typeof TabsTab;
+}
+/**
+ * The bar: every tab, drawn from the entries its `Tabs.Tab` children gave
+ * the root, with the divider and the indicator. Name it with `aria-label` or
+ * `aria-labelledby`.
+ *
+ * `style`, `ref` and `testID` land on the bar's own view.
+ */
+declare function TabsList<T extends object = object>({ 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, ref, style, testID }: TabsListProps<T>): import("react").JSX.Element;
+/**
+ * One tab of a `Tabs.List`, which draws it: the root builds its selection
+ * from these, so one renders nothing on its own. Give every tab an `id`,
+ * which is the key selection reports and its `Tabs.Panel` shares.
+ */
+declare function TabsTab(_props: TabsTabProps): null;
+declare namespace TabsTab {
+  var getCollectionNode: (props: TabsTabProps) => Generator<{
+    'aria-label': string | undefined;
+    hasChildNodes: boolean;
+    key: Key | undefined;
+    props: TabsTabProps;
+    rendered: ReactNode;
+    textValue: string;
+    type: string;
+  }, void, unknown>;
+}
+/**
+ * The content of one tab, drawn while its tab is selected. Its `id` is the
+ * tab's.
+ *
+ * `style`, `ref` and `testID` land on the panel's own view.
+ */
+declare function TabsPanel({ children, id, ref, style, testID }: TabsPanelProps): import("react").JSX.Element | null;
+/**
+ * An optional box around the panels, which moves its height as one panel
+ * gives way to the next, over medium1 on the emphasized curve and at once
+ * under reduced motion. Without it the panels still work; the box around
+ * them simply jumps from one height to the other.
+ *
+ * `style`, `ref` and `testID` land on the box.
+ */
+declare function TabsPanels({ children, ref, style, testID }: TabsPanelsProps): import("react").JSX.Element;
+//#endregion
+export { Tabs, type TabsLayout, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsPanels, type TabsPanelsProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant };
+//# sourceMappingURL=index.d.ts.map