@kanso-labs/react-native-kanso-ui 0.1.0 → 0.2.0

package/dist/components/progress-indicator/index.d.ts

@@ -0,0 +1,113 @@
+import { IndicatorTone } from "../../indicator/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { Ref } from "react";
+//#region src/components/progress-indicator/index.d.ts
+type ProgressIndicatorProps = Omit<ViewProps, 'children' | 'style'> & {
+  /**
+   * How far the work is loaded ahead of the value, a video's buffered
+   * seconds or a queue's fetched pages. Read on the same scale as `value`:
+   * the track is solid up to it and dotted beyond. Ignored while the
+   * indicator is indeterminate and by the ring, and left out for work with
+   * nothing to buffer.
+   */
+  readonly buffer?: number;
+  /**
+   * How wide the ring is drawn, as a CSS length read the way a theme's
+   * lengths are. Everything inside scales with it, so a ring in a button can
+   * take the button's icon size. The length is in px, since a relative unit
+   * has nothing on native to be relative to. Ignored by the line, which fills
+   * the width it is given.
+   * @default '40px', or '48px' for the wavy ring
+   */
+  readonly diameter?: `${number}px`;
+  /**
+   * How the value reads.
+   * @default { style: 'percent' }
+   */
+  readonly formatOptions?: Intl.NumberFormatOptions;
+  /**
+   * For work whose length is not known: the indicator runs on its own, and
+   * has no value to show or announce.
+   * @default false
+   */
+  readonly isIndeterminate?: boolean;
+  /**
+   * What the work is, shown above the indicator. A screen reader reads it as
+   * the indicator's name; an indicator whose surroundings name it takes
+   * `aria-label` instead and leaves this out.
+   */
+  readonly label?: string;
+  /**
+   * The BCP 47 locale the value is written in. Defaults to the device's.
+   */
+  readonly locale?: string;
+  /**
+   * The value at which the work is done.
+   * @default 100
+   */
+  readonly maxValue?: number;
+  /**
+   * The value at which the work starts.
+   * @default 0
+   */
+  readonly minValue?: number;
+  readonly ref?: Ref<View>;
+  /**
+   * The page's two shapes. `wavy` draws the active indicator as a wave, which
+   * lies flat near either end of a determinate value, and leaves the track
+   * and the stop flat; the wavy ring is 48dp across rather than 40. Under
+   * reduced motion a wavy indicator is drawn flat.
+   * @default 'flat'
+   */
+  readonly shape?: ProgressIndicatorShape;
+  /**
+   * Whether the value is shown beside the label. Ignored while the indicator
+   * is indeterminate, which has no value to show.
+   * @default false
+   */
+  readonly showValue?: boolean;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * Which colours it is drawn in. `primary` is the page's own pair, the active
+   * indicator in primary over a secondary container track, and `inherit`
+   * takes the colour of the slot it sits in, for an indicator inside something
+   * that already has one, such as a button, where primary would be the fill.
+   * @default 'primary'
+   */
+  readonly tone?: ProgressIndicatorTone;
+  /**
+   * How far the work has gone, between `minValue` and `maxValue`.
+   * @default 0
+   */
+  readonly value?: number;
+  /** The value as words, in place of the number `formatOptions` writes. */
+  readonly valueLabel?: string;
+  /**
+   * The line the page draws, or the ring: `linear` fills the width it is
+   * given, `circular` is 40dp across.
+   * @default 'linear'
+   */
+  readonly variant?: ProgressIndicatorVariant;
+};
+type ProgressIndicatorShape = 'flat' | 'wavy';
+type ProgressIndicatorTone = Extract<IndicatorTone, 'inherit' | 'primary'>;
+type ProgressIndicatorVariant = 'circular' | 'linear';
+/**
+ * Progress through a task, as a line or a ring. Pass `value` between
+ * `minValue` and `maxValue`, or set `isIndeterminate` for work whose length is
+ * not known. `formatOptions` says how the value reads, in `locale`, and
+ * `buffer` marks how far the work is loaded ahead of it.
+ *
+ * ```tsx
+ * <ProgressIndicator label="Label" showValue value={40} />
+ * ```
+ *
+ * A screen reader hears it as a progress bar named by its label, with its
+ * value as `formatOptions` writes it, and no value while it is indeterminate.
+ * `style`, `ref` and `testID` land on the indicator as a whole, which is the
+ * view a layout positions.
+ */
+declare function ProgressIndicator({ 'aria-label': ariaLabel, buffer, diameter, formatOptions, isIndeterminate, label, locale, maxValue, minValue, shape, showValue, style, tone, value, valueLabel, variant, ...props }: ProgressIndicatorProps): import("react").JSX.Element;
+//#endregion
+export { ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant };
+//# sourceMappingURL=index.d.ts.map