@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

package/dist/components/segmented-button/index.d.ts

@@ -0,0 +1,113 @@
+import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+import { Key } from "react-stately";
+//#region src/components/segmented-button/index.d.ts
+/** A name for the set: its own label, or the id of what labels it. */
+type LabelledBy = {
+  readonly 'aria-label': string;
+  readonly 'aria-labelledby'?: string;
+} | {
+  readonly 'aria-label'?: string;
+  readonly 'aria-labelledby': string;
+};
+type SegmentedButtonProps = LabelledBy & Omit<ViewProps, 'aria-label' | 'aria-labelledby' | 'children' | 'style'> & {
+  /** The segments, each a `SegmentedButton.Segment` with an `id`. */
+  readonly children?: ReactNode;
+  /** The keys chosen at first, when the set keeps its own selection. */
+  readonly defaultSelectedKeys?: Iterable<Key>;
+  /**
+   * Whether the chosen segment stays chosen when it is pressed again. On
+   * by default while one is chosen, since a radio group always holds a
+   * choice; `false` lets a press clear it. Off by default while several
+   * may be, where any of them can be turned off.
+   * @default true while one is chosen, false while several may be
+   */
+  readonly disallowEmptySelection?: boolean;
+  /**
+   * Disables every segment.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** Called with the chosen keys when the choice changes. */
+  readonly onSelectionChange?: (keys: Set<Key>) => void;
+  readonly ref?: Ref<View>;
+  /** The chosen keys, when the call site holds the selection. */
+  readonly selectedKeys?: Iterable<Key>;
+  /**
+   * Whether one segment is chosen at a time, or several.
+   * @default 'single'
+   */
+  readonly selectionMode?: SelectionMode$1;
+  /**
+   * Whether a chosen segment draws a check before its label, as the page
+   * has it. `false` leaves the segment's own icon in place while chosen,
+   * and draws the chosen segment on the stronger secondary container.
+   * @default true
+   */
+  readonly showSelectedIcon?: boolean;
+  readonly style?: StyleProp<ViewStyle>;
+};
+type SegmentedButtonSegmentProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'style'> & {
+  /** The segment's label. */
+  readonly children?: ReactNode;
+  /**
+   * Draws no press ripple. The hover and pressed state layers are unaffected.
+   * @default false
+   */
+  readonly disableRipple?: boolean;
+  /**
+   * An icon before the label, in the page's 18dp slot, which hands it the
+   * label's colour and its size through `useIconStyle()`. Replaced by the
+   * check while the segment is chosen, unless the set turns that off.
+   *
+   * Given with no label, the icon is the segment, centred in it and kept
+   * while chosen; name the segment with `aria-label` then.
+   */
+  readonly icon?: ReactNode;
+  /** The key the selection reports the segment by. */
+  readonly id: Key;
+  /**
+   * Disables the segment alone.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+};
+type SelectionMode$1 = 'multiple' | 'single';
+/**
+ * A row of two to five joined segments, of which one, or with
+ * `selectionMode="multiple"` several, is chosen. Pass `selectedKeys` with
+ * `onSelectionChange` to hold the choice, or `defaultSelectedKeys` to let the
+ * set keep its own. Give every segment an `id`, which is the key the choice
+ * is reported by.
+ *
+ * ```tsx
+ * <SegmentedButton aria-label="Label" defaultSelectedKeys={['first']}>
+ *   <SegmentedButton.Segment id="first">First item</SegmentedButton.Segment>
+ *   <SegmentedButton.Segment id="second">Second item</SegmentedButton.Segment>
+ * </SegmentedButton>
+ * ```
+ *
+ * Name the set with `aria-label` or `aria-labelledby`, one of which the
+ * props require. Choosing one is announced as a radio group, and choosing
+ * several as a toolbar of buttons that each say whether they are selected.
+ *
+ * `style`, `ref` and `testID` land on the track.
+ */
+declare function SegmentedButton({ children, defaultSelectedKeys, disallowEmptySelection, isDisabled, onSelectionChange, selectedKeys, selectionMode, showSelectedIcon, style, ...props }: SegmentedButtonProps): import("react").JSX.Element;
+declare namespace SegmentedButton {
+  var Segment: typeof SegmentedButtonSegment;
+}
+/**
+ * One segment. Its `id` is the key the choice reports it by, and its label is
+ * what names it. A chosen segment draws a check before its label; one not
+ * chosen draws its `icon`, if it has one. Renders nothing outside a
+ * `SegmentedButton`.
+ *
+ * `style`, `ref` and `testID` land on the segment's `Pressable`.
+ */
+declare function SegmentedButtonSegment({ children, disableRipple, hitSlop: ownHitSlop, icon, id, isDisabled: ownDisabled, onBlur, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, style, ...props }: SegmentedButtonSegmentProps): import("react").JSX.Element | null;
+//#endregion
+export { SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps };
+//# sourceMappingURL=index.d.ts.map