@kanso-labs/react-native-kanso-ui 0.5.0 → 0.6.0

package/dist/components/menu/index.js

@@ -1,24 +1,24 @@
-import { CheckGlyph, ChevronEndGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
+import { rowContentColor, rowStyles } from "../../row/styles.js";
+import { RowContent, rowStyleOf } from "../../row/index.js";
+import { CheckGlyph, ChevronEndGlyph } from "../../glyphs/index.js";
 import { refsOf } from "../../ref/index.js";
 import { useOpenLink } from "../../router/index.js";
 import { ButtonSlotContext } from "../../button/slots.js";
 import { ProgressIndicator } from "../progress-indicator/index.js";
 import { messagesFor } from "../../i18n/index.js";
-import { usePressFeedback } from "../../press/index.js";
 import { Overlay } from "../../overlay/host.js";
 import { useAnchoredPlacement } from "../../overlay/anchored.js";
-import { rowContentColor, rowStyles } from "../../row/styles.js";
-import { RowContent, rowStyleOf } from "../../row/index.js";
 import { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus } from "../../overlay/panel.js";
 import { Separator } from "../separator/index.js";
 import { c } from "react/compiler-runtime";
-import { Children, createContext, use, useEffect, useId, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { I18nManager, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
+import { Children, createContext, use, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useMenuTriggerState, useSubmenuTriggerState } from "react-stately/useMenuTriggerState";
 import { useTreeState } from "react-stately/useTreeState";
 //#region src/components/menu/index.tsx

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

@@ -1,6 +1,6 @@
 import { IndicatorTone } from "../../indicator/index.js";
-import { ComponentRef, Ref } from "react";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/meter/index.d.ts
 type MeterProps = Omit<ViewProps, 'children' | 'style'> & {
   /**

package/dist/components/meter/index.js

@@ -3,8 +3,8 @@ import { composeStyles } from "../../theme/styles.js";
 import { DETERMINATE_EASING, stylesOf } from "../../indicator/styles.js";
 import { IndicatorLabels, IndicatorLine, readingOf, useEased, useIndicatorColors, useMeasuredWidth } from "../../indicator/index.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/meter/index.tsx
 const styles = StyleSheet.create({ line: { alignSelf: "stretch" } });
 /**

package/dist/components/navigation-bar/index.d.ts

@@ -0,0 +1,170 @@
+import { NavigationDestinationProps } from "../../navigation/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/navigation-bar/index.d.ts
+type NavigationBarItemProps = NavigationDestinationProps & {
+  /**
+   * Where the destination goes, through the app's router, and what the
+   * bar's `selectedRoute` is matched against.
+   */
+  readonly href: string;
+};
+type NavigationBarProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The destinations, each a `NavigationBar.Item`. */
+  readonly children?: ReactNode;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * The route of the current destination, matched against each
+   * destination's `href`. The match is the selected tab, and draws the
+   * active indicator.
+   */
+  readonly selectedRoute?: string | undefined;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/** The routes a tab navigator hands its tab bar, as both navigators do. */
+type NavigationTabBarProps = Omit<NavigationBarProps, 'children' | 'selectedRoute'> & TabNavigatorProps & {
+  /** Each route's options, by the route's key. */
+  readonly descriptors: Readonly<Partial<Record<string, {
+    readonly options: TabOptions;
+  }>>>;
+  /**
+   * The insets the navigator measured, which the bar measures for itself
+   * instead.
+   */
+  readonly insets?: unknown;
+  /** The navigator's routes, and which of them is focused. */
+  readonly state: {
+    readonly index: number;
+    readonly routes: readonly TabRoute[];
+  };
+};
+/**
+ * What hears a tab bar's events: React Navigation's `navigation` and Expo
+ * Router's `emitter` alike.
+ */
+type TabEmitter = {
+  emit(event: TabEvent): unknown;
+};
+/** The events a tab bar reports, as both navigators name them. */
+type TabEvent = {
+  readonly canPreventDefault: true;
+  readonly target: string;
+  readonly type: 'tabPress';
+} | {
+  readonly target: string;
+  readonly type: 'tabLongPress';
+};
+/**
+ * How a tab bar moves to a tab: through React Navigation's `navigation`, or
+ * through Expo Router's `navigateToTab`.
+ */
+type TabNavigatorProps = {
+  readonly emitter: TabEmitter;
+  readonly navigateToTab: (routeKey: string) => void;
+  readonly navigation?: never;
+} | {
+  readonly emitter?: never;
+  readonly navigateToTab?: never;
+  readonly navigation: TabEmitter & {
+    navigate(name: string, params?: object): void;
+  };
+};
+/**
+ * A tab's options the bar reads, as React Navigation's bottom tabs and Expo
+ * Router's tabs both hand them to a tab bar. Options they take that are not
+ * listed here are left to them.
+ */
+type TabOptions = {
+  /** The tab's name for a screen reader, where it differs from its label. */
+  readonly tabBarAccessibilityLabel?: string | undefined;
+  /**
+   * The badge on the tab's icon. A number, or a string of digits, is the
+   * large badge's count; any other string is the small dot, since a badge
+   * draws a count and nothing else.
+   */
+  readonly tabBarBadge?: number | string | undefined;
+  readonly tabBarButtonTestID?: string | undefined;
+  /** The tab's icon, drawn at the size and in the colour it is handed. */
+  readonly tabBarIcon?: ((props: {
+    readonly color: string;
+    readonly focused: boolean;
+    readonly size: number;
+  }) => ReactNode) | undefined;
+  /** The tab's label, in place of its title. */
+  readonly tabBarLabel?: ((props: {
+    readonly children: string;
+    readonly color: string;
+    readonly focused: boolean;
+    readonly position: 'below-icon' | 'beside-icon';
+  }) => ReactNode) | string | undefined;
+  readonly title?: string | undefined;
+};
+type TabRoute = {
+  readonly key: string;
+  readonly name: string;
+  readonly params?: object | undefined;
+};
+/**
+ * The bar of three to five top-level destinations a compact window keeps at
+ * its bottom edge. Each destination goes to its `href` through the app's
+ * router, see `RouterProvider`.
+ *
+ * ```tsx
+ * <NavigationBar selectedRoute="/first">
+ *   <NavigationBar.Item href="/first" icon={<FirstIcon />}>
+ *     First item
+ *   </NavigationBar.Item>
+ *   <NavigationBar.Item href="/second" icon={<SecondIcon />}>
+ *     Second item
+ *   </NavigationBar.Item>
+ *   <NavigationBar.Item href="/third" icon={<ThirdIcon />}>
+ *     Third item
+ *   </NavigationBar.Item>
+ * </NavigationBar>
+ * ```
+ *
+ * Draw it below the screen's content, at the bottom of the window: it paints
+ * its surface to the bottom edge and keeps its destinations clear of the home
+ * indicator itself. From the medium window size class each destination puts
+ * its label beside its icon, where the bar is wide enough for every label.
+ *
+ * `style`, `ref` and `testID` land on the bar's own view, which is announced
+ * as a tab list.
+ */
+declare function NavigationBar({ children, selectedRoute, style, ...props }: NavigationBarProps): import("react").JSX.Element;
+declare namespace NavigationBar {
+  var Item: typeof NavigationBarItem;
+}
+/**
+ * One destination of a navigation bar: an icon, a label and, while it is the
+ * current one, the active indicator behind the icon. Pressing it calls
+ * `onPress`, then goes to its `href`. Renders nothing of its own outside a
+ * `NavigationBar`, whose `selectedRoute` says whether it is selected.
+ *
+ * `style`, `ref` and `testID` land on the destination's `Pressable`.
+ */
+declare function NavigationBarItem({ href, onPress, ...props }: NavigationBarItemProps): import("react").JSX.Element;
+/**
+ * A navigation bar drawing a tab navigator's routes, for the `tabBar` prop of
+ * React Navigation's bottom tabs and of Expo Router's `Tabs` alike.
+ *
+ * ```tsx
+ * <Tabs tabBar={(props) => <NavigationTabBar {...props} />}>
+ *   <Tabs.Screen name="index" options={{ tabBarIcon: () => <FirstIcon />, title: 'First item' }} />
+ * </Tabs>
+ * ```
+ *
+ * Each route is a destination, labelled by its `tabBarLabel` or its title,
+ * with the icon `tabBarIcon` draws and the badge `tabBarBadge` asks for, and
+ * the focused route is the selected one. Pressing a destination reports
+ * `tabPress` to the navigator and moves to its route unless a listener
+ * prevents it, and a long press reports `tabLongPress`, as the navigators'
+ * own tab bars do.
+ *
+ * `style`, `ref` and `testID` land on the bar's own view, as on a
+ * `NavigationBar`.
+ */
+declare function NavigationTabBar({ descriptors, emitter, insets: _insets, navigateToTab, navigation, state, ...props }: NavigationTabBarProps): import("react").JSX.Element;
+//#endregion
+export { NavigationBar, NavigationBarItem, type NavigationBarItemProps, type NavigationBarProps, NavigationTabBar, type NavigationTabBarProps };
+//# sourceMappingURL=index.d.ts.map