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

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

@@ -0,0 +1,111 @@
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/slider/index.d.ts
+type SliderProps = {
+  /**
+   * The slider's name for a screen reader, when no `label` is drawn: a
+   * slider that a row labels some other way leaves `label` out and passes
+   * this instead.
+   */
+  readonly 'aria-label'?: string;
+  /** The value the slider starts at, when it keeps its own. */
+  readonly defaultValue?: number | number[];
+  /**
+   * How the value reads, in the indicator and to a screen reader, in the
+   * provider's locale.
+   */
+  readonly formatOptions?: Intl.NumberFormatOptions;
+  /**
+   * The page's inset icon, at the start of the active part, from `md` up:
+   * the page gives it a size at M, L and XL alone. Drawn for a single
+   * handle, and only while the active part has room for it. It reads its
+   * colour and size through `useIconStyle()`.
+   */
+  readonly icon?: ReactNode;
+  /**
+   * Draws the slider disabled, and takes no presses, drags or screen reader
+   * actions.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * What the slider sets. A slider that a row labels some other way leaves
+   * it out and passes `aria-label` instead.
+   */
+  readonly label?: string;
+  /**
+   * The largest value.
+   * @default 100
+   */
+  readonly maxValue?: number;
+  /**
+   * The smallest value.
+   * @default 0
+   */
+  readonly minValue?: number;
+  /** Called with the value as it moves. */
+  readonly onChange?: (value: number | number[]) => void;
+  /** Called with the value once a drag, a press or an action has ended. */
+  readonly onChangeEnd?: (value: number | number[]) => void;
+  /**
+   * Along which axis the handle moves. A vertical slider is 240dp tall until
+   * `style` says otherwise.
+   * @default 'horizontal'
+   */
+  readonly orientation?: 'horizontal' | 'vertical';
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * A stop at every step, the page's stops configuration, so the reader can
+   * see where the handle can land. Meant for a slider with a handful of
+   * steps: each stop is a 4dp dot, and a fine step draws a crowd of them.
+   * @default false
+   */
+  readonly showStops?: boolean;
+  /**
+   * The page's sizes, by the track's thickness: 16dp at `xs`, 24dp at `sm`,
+   * 40dp at `md`, 56dp at `lg` and 96dp at `xl`, with the handle 44dp long
+   * up to `sm` and 52dp, 68dp and 108dp past it.
+   * @default 'xs'
+   */
+  readonly size?: SliderSize;
+  /**
+   * The distance between two values the handle can land on.
+   * @default 1
+   */
+  readonly step?: number;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /**
+   * A name for each handle of a range slider, in order, since two handles
+   * named by the same label cannot be told apart.
+   */
+  readonly thumbLabels?: readonly string[];
+  /**
+   * The value, for a call site holding it itself with `onChange`: a number
+   * for one handle, or an array of numbers for a handle each.
+   */
+  readonly value?: number | number[];
+};
+type SliderSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+/**
+ * A slider for one value, or for a range when the value is an array. Its
+ * state is React Stately's, as web's is: pass `value` with `onChange` to
+ * control it, or `defaultValue` to let it keep its own, with `minValue`,
+ * `maxValue` and `step` to shape it and `formatOptions` to say how it reads.
+ *
+ * ```tsx
+ * <Slider defaultValue={40} label="Label" />
+ * ```
+ *
+ * A press on the track moves the nearest handle there, and a drag carries
+ * it. A screen reader hears each handle as an adjustable control named by the
+ * label, which it moves a step at a time. `style`, `ref` and `testID` land on
+ * the slider as a whole, which is the view a layout positions and the one
+ * that gives a vertical slider its height. With a `testID`, the drag and the
+ * press are registered with Gesture Handler as `<testID>-pan` and
+ * `<testID>-tap`, which its `getByGestureTestId` finds in a test.
+ */
+declare function Slider({ 'aria-label': ariaLabel, defaultValue, formatOptions, icon, isDisabled, label, maxValue, minValue, onChange, onChangeEnd, orientation, ref, showStops, size, step, style, testID, thumbLabels, value }: SliderProps): import("react").JSX.Element;
+//#endregion
+export { Slider, type SliderProps, type SliderSize };
+//# sourceMappingURL=index.d.ts.map