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

package/dist/components/separator/index.js

@@ -1,7 +1,9 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { SeparatorOrientationContext } from "../../separator/index.js";
 import { c } from "react/compiler-runtime";
 import { StyleSheet, View } from "react-native";
+import { use } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/separator/index.tsx
 const styles = StyleSheet.create({
@@ -58,50 +60,51 @@ const VERTICAL = { "aria-orientation": "vertical" };
 */
 function Separator(t0) {
 	const $ = c(14);
+	let own;
 	let props;
 	let style;
 	let t1;
-	let t2;
 	if ($[0] !== t0) {
-		({inset: t1, orientation: t2, style, ...props} = t0);
+		({inset: t1, orientation: own, style, ...props} = t0);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = style;
-		$[3] = t1;
-		$[4] = t2;
+		$[1] = own;
+		$[2] = props;
+		$[3] = style;
+		$[4] = t1;
 	} else {
-		props = $[1];
-		style = $[2];
-		t1 = $[3];
-		t2 = $[4];
+		own = $[1];
+		props = $[2];
+		style = $[3];
+		t1 = $[4];
 	}
 	const inset = t1 === void 0 ? "none" : t1;
-	const orientation = t2 === void 0 ? "horizontal" : t2;
 	const theme = useTheme();
-	const t3 = orientation === "vertical" ? VERTICAL : void 0;
-	let t4;
+	const provided = use(SeparatorOrientationContext);
+	const orientation = own ?? provided ?? "horizontal";
+	const t2 = orientation === "vertical" ? VERTICAL : void 0;
+	let t3;
 	if ($[5] !== inset || $[6] !== orientation || $[7] !== style || $[8] !== theme) {
-		t4 = composeStyles(styles[orientation], fillOf(theme).rule, insetsOf(theme)[orientation][inset], style);
+		t3 = composeStyles(styles[orientation], fillOf(theme).rule, insetsOf(theme)[orientation][inset], style);
 		$[5] = inset;
 		$[6] = orientation;
 		$[7] = style;
 		$[8] = theme;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== props || $[11] !== t3 || $[12] !== t4) {
-		t5 = /* @__PURE__ */ jsx(View, {
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== props || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(View, {
 			role: "separator",
-			...t3,
+			...t2,
 			...props,
-			style: t4
+			style: t3
 		});
 		$[10] = props;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
-	return t5;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
 }
 //#endregion
 export { Separator };

package/dist/components/separator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","Ref","ViewProps","ViewStyle","StyleSheet","View","useTheme","composeStyles","themedStyles","styles","create","horizontal","alignSelf","flexShrink","height","vertical","width","fillOf","colors","rule","backgroundColor","outlineVariant","insetsOf","spacing","both","marginEnd","lg","marginStart","none","start","marginBottom","marginTop","VERTICAL","SeparatorInset","SeparatorProps","inset","orientation","ref","Separator","t0","$","_c","props","style","t1","t2","undefined","theme","t3","t4","t5","_c"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\n\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own, as on web: the design system treats the two\n// as one decision.\n//\n// Drawn as a filled 1dp view rather than as a border, so the rule is the view\n// itself, which flex `gap` and anything measuring it can see.\n//\n// A rule has no length of its own. `alignSelf: 'stretch'` takes it from the\n// parent's cross axis: a horizontal rule spans a column, which is what a\n// `View` is by default, and a vertical one spans a row. A rule between two\n// rows should match whatever they turn out to be rather than being told a\n// length at the call site, and in a parent running the same way as the rule\n// it has none, which is the documented cost.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The page\n// names them \"inset\" and \"middle-inset\"; the prop says `start` and `both`, as\n// on web, since the two words say which ends move. The inset is a margin on\n// the axis the rule runs along, which shortens a stretched rule rather than\n// pushing it out of its parent. A horizontal rule's is `marginStart`, which\n// React Native puts on the right under right-to-left.\nconst styles = StyleSheet.create({\n  horizontal: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    height: 1,\n  },\n  vertical: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    width: 1,\n  },\n})\n\nconst fillOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    rule: { backgroundColor: colors.outlineVariant },\n  }),\n)\n\n// The page's 16dp, on the axis the rule runs along.\nconst insetsOf = themedStyles(({ spacing }) => ({\n  horizontal: StyleSheet.create({\n    both: { marginEnd: spacing.lg, marginStart: spacing.lg },\n    none: {},\n    start: { marginStart: spacing.lg },\n  }),\n  vertical: StyleSheet.create({\n    both: { marginBottom: spacing.lg, marginTop: spacing.lg },\n    none: {},\n    start: { marginTop: spacing.lg },\n  }),\n}))\n\n// React Native Web writes `aria-orientation` onto the element, which React\n// Native's types do not name. A horizontal rule needs none, since that is the\n// separator role's own default.\nconst VERTICAL: { readonly 'aria-orientation': 'vertical' } = {\n  'aria-orientation': 'vertical',\n}\n\ntype SeparatorInset = 'both' | 'none' | 'start'\n\ntype SeparatorProps = ViewProps & {\n  /**\n   * How far the rule is held off the ends it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both` holds\n   * it off each end, which is its middle-inset one. The inset follows the\n   * writing direction rather than a fixed side.\n   * @default 'none'\n   */\n  readonly inset?: SeparatorInset\n  /**\n   * Which way the rule runs. A rule takes its length from its parent: a\n   * horizontal one spans a column, and a vertical one a row.\n   * @default 'horizontal'\n   */\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/**\n * A 1dp rule between items, in the outline-variant colour, carrying the\n * separator role.\n *\n * ```tsx\n * <Stack gap=\"none\">\n *   <Text>First item</Text>\n *   <Separator inset=\"start\" />\n *   <Text>Second item</Text>\n * </Stack>\n * ```\n *\n * `inset` holds the rule off the ends it runs between, `start` off the\n * leading one and `both` off each, which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * Web draws the rule again as a border under forced colours, which neither\n * iOS nor Android has. `style`, `ref` and `testID` land on the `View`, and a\n * `style` there applies over the rule's own.\n */\nfunction Separator({\n  inset = 'none',\n  orientation = 'horizontal',\n  style,\n  ...props\n}: SeparatorProps) {\n  const theme = useTheme()\n\n  return (\n    <View\n      role=\"separator\"\n      {...(orientation === 'vertical' ? VERTICAL : undefined)}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles[orientation],\n        fillOf(theme).rule,\n        insetsOf(theme)[orientation][inset],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { SeparatorInset, SeparatorProps }\n\nexport { Separator }\n"],"mappings":";;;;;;AA6BA,MAAMS,SAASL,WAAWM,OAAO;CAC/BC,YAAY;EACVC,WAAW;EACXC,YAAY;EACZC,QAAQ;CACV;CACAC,UAAU;EACRH,WAAW;EACXC,YAAY;EACZG,OAAO;CACT;AACF,CAAC;AAED,MAAMC,SAAST,cAAc,EAAEU,aAC7Bd,WAAWM,OAAO,EAChBS,MAAM,EAAEC,iBAAiBF,OAAOG,eAAe,EACjD,CAAC,CACH;AAGA,MAAMC,WAAWd,cAAc,EAAEe,eAAe;CAC9CZ,YAAYP,WAAWM,OAAO;EAC5Bc,MAAM;GAAEC,WAAWF,QAAQG;GAAIC,aAAaJ,QAAQG;EAAG;EACvDE,MAAM,CAAC;EACPC,OAAO,EAAEF,aAAaJ,QAAQG,GAAG;CACnC,CAAC;CACDX,UAAUX,WAAWM,OAAO;EAC1Bc,MAAM;GAAEM,cAAcP,QAAQG;GAAIK,WAAWR,QAAQG;EAAG;EACxDE,MAAM,CAAC;EACPC,OAAO,EAAEE,WAAWR,QAAQG,GAAG;CACjC,CAAC;AACH,EAAE;AAKF,MAAMM,WAAwD,EAC5D,oBAAoB,WACtB;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAAM,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAmB,CAAA,CAAAJ,OAAAS,IAAAR,aAAAS,IAAAF,OAAA,GAAAD,SAAAH;EAKFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,QAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAJf,MAAAL,QAAAS,OAAAE,KAAAA,IAAA,SAAAF;CACA,MAAAR,cAAAS,OAAAC,KAAAA,IAAA,eAAAD;CAIA,MAAAE,QAAczC,SAAS;CAKd,MAAA0C,KAAAZ,gBAAgB,aAAhBJ,WAAAc,KAAAA;CAAiD,IAAAG;CAAA,IAAAT,EAAA,OAAAL,SAAAK,EAAA,OAAAJ,eAAAI,EAAA,OAAAG,SAAAH,EAAA,OAAAO,OAAA;EAE/CE,KAAA1C,cACLE,OAAO2B,cACPnB,OAAO8B,KAAK,CAAC,CAAA5B,MACbG,SAASyB,KAAK,CAAC,CAACX,YAAY,CAACD,QAC7BQ,KACF;EAACH,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAO;EAAAP,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAE,SAAAF,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,IAAA;EATHC,KAAA,oBAAC,MAAD;GACO,MAAA;GAAW,GACXF;GAAiD,GAClDN;GACG,OAAAO;EAKN,CAAA;EACDT,EAAA,MAAAE;EAAAF,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAVFU;AAUE"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","ViewProps","ViewStyle","use","StyleSheet","View","SeparatorOrientationContext","useTheme","composeStyles","themedStyles","styles","create","horizontal","alignSelf","flexShrink","height","vertical","width","fillOf","colors","rule","backgroundColor","outlineVariant","insetsOf","spacing","both","marginEnd","lg","marginStart","none","start","marginBottom","marginTop","VERTICAL","SeparatorInset","SeparatorProps","inset","orientation","ref","Separator","t0","$","_c","own","props","style","t1","undefined","theme","provided","t2","t3","t4","_c"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { ViewProps, ViewStyle } from 'react-native'\n\nimport { use } from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport { SeparatorOrientationContext } from '../../separator'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own, as on web: the design system treats the two\n// as one decision.\n//\n// Drawn as a filled 1dp view rather than as a border, so the rule is the view\n// itself, which flex `gap` and anything measuring it can see.\n//\n// A rule has no length of its own. `alignSelf: 'stretch'` takes it from the\n// parent's cross axis: a horizontal rule spans a column, which is what a\n// `View` is by default, and a vertical one spans a row. A rule between two\n// rows should match whatever they turn out to be rather than being told a\n// length at the call site, and in a parent running the same way as the rule\n// it has none, which is the documented cost.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The page\n// names them \"inset\" and \"middle-inset\"; the prop says `start` and `both`, as\n// on web, since the two words say which ends move. The inset is a margin on\n// the axis the rule runs along, which shortens a stretched rule rather than\n// pushing it out of its parent. A horizontal rule's is `marginStart`, which\n// React Native puts on the right under right-to-left.\nconst styles = StyleSheet.create({\n  horizontal: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    height: 1,\n  },\n  vertical: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    width: 1,\n  },\n})\n\nconst fillOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    rule: { backgroundColor: colors.outlineVariant },\n  }),\n)\n\n// The page's 16dp, on the axis the rule runs along.\nconst insetsOf = themedStyles(({ spacing }) => ({\n  horizontal: StyleSheet.create({\n    both: { marginEnd: spacing.lg, marginStart: spacing.lg },\n    none: {},\n    start: { marginStart: spacing.lg },\n  }),\n  vertical: StyleSheet.create({\n    both: { marginBottom: spacing.lg, marginTop: spacing.lg },\n    none: {},\n    start: { marginTop: spacing.lg },\n  }),\n}))\n\n// React Native Web writes `aria-orientation` onto the element, which React\n// Native's types do not name. A horizontal rule needs none, since that is the\n// separator role's own default.\nconst VERTICAL: { readonly 'aria-orientation': 'vertical' } = {\n  'aria-orientation': 'vertical',\n}\n\ntype SeparatorInset = 'both' | 'none' | 'start'\n\ntype SeparatorProps = ViewProps & {\n  /**\n   * How far the rule is held off the ends it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both` holds\n   * it off each end, which is its middle-inset one. The inset follows the\n   * writing direction rather than a fixed side.\n   * @default 'none'\n   */\n  readonly inset?: SeparatorInset\n  /**\n   * Which way the rule runs. A rule takes its length from its parent: a\n   * horizontal one spans a column, and a vertical one a row. Inside a\n   * `Toolbar` it runs across the bar unless this says otherwise.\n   * @default 'horizontal'\n   */\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/**\n * A 1dp rule between items, in the outline-variant colour, carrying the\n * separator role.\n *\n * ```tsx\n * <Stack gap=\"none\">\n *   <Text>First item</Text>\n *   <Separator inset=\"start\" />\n *   <Text>Second item</Text>\n * </Stack>\n * ```\n *\n * `inset` holds the rule off the ends it runs between, `start` off the\n * leading one and `both` off each, which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * Web draws the rule again as a border under forced colours, which neither\n * iOS nor Android has. `style`, `ref` and `testID` land on the `View`, and a\n * `style` there applies over the rule's own.\n */\nfunction Separator({\n  inset = 'none',\n  orientation: own,\n  style,\n  ...props\n}: SeparatorProps) {\n  const theme = useTheme()\n  const provided = use(SeparatorOrientationContext)\n  const orientation = own ?? provided ?? 'horizontal'\n\n  return (\n    <View\n      role=\"separator\"\n      {...(orientation === 'vertical' ? VERTICAL : undefined)}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles[orientation],\n        fillOf(theme).rule,\n        insetsOf(theme)[orientation][inset],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { SeparatorInset, SeparatorProps }\n\nexport { Separator }\n"],"mappings":";;;;;;;;AA+BA,MAAMW,SAASN,WAAWO,OAAO;CAC/BC,YAAY;EACVC,WAAW;EACXC,YAAY;EACZC,QAAQ;CACV;CACAC,UAAU;EACRH,WAAW;EACXC,YAAY;EACZG,OAAO;CACT;AACF,CAAC;AAED,MAAMC,SAAST,cAAc,EAAEU,aAC7Bf,WAAWO,OAAO,EAChBS,MAAM,EAAEC,iBAAiBF,OAAOG,eAAe,EACjD,CAAC,CACH;AAGA,MAAMC,WAAWd,cAAc,EAAEe,eAAe;CAC9CZ,YAAYR,WAAWO,OAAO;EAC5Bc,MAAM;GAAEC,WAAWF,QAAQG;GAAIC,aAAaJ,QAAQG;EAAG;EACvDE,MAAM,CAAC;EACPC,OAAO,EAAEF,aAAaJ,QAAQG,GAAG;CACnC,CAAC;CACDX,UAAUZ,WAAWO,OAAO;EAC1Bc,MAAM;GAAEM,cAAcP,QAAQG;GAAIK,WAAWR,QAAQG;EAAG;EACxDE,MAAM,CAAC;EACPC,OAAO,EAAEE,WAAWR,QAAQG,GAAG;CACjC,CAAC;AACH,EAAE;AAKF,MAAMM,WAAwD,EAC5D,oBAAoB,WACtB;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAAM,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAmB,CAAA,CAAAJ,OAAAU,IAAAT,aAAAM,KAAAE,OAAA,GAAAD,SAAAJ;EAKFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,MAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,QAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAJf,MAAAL,QAAAU,OAAAC,KAAAA,IAAA,SAAAD;CAKA,MAAAE,QAAczC,SAAS;CACvB,MAAA0C,WAAiB9C,IAAIG,2BAA2B;CAChD,MAAA+B,cAAoBM,OAAAM,YAAA;CAKX,MAAAC,KAAAb,gBAAgB,aAAhBJ,WAAAc,KAAAA;CAAiD,IAAAI;CAAA,IAAAV,EAAA,OAAAL,SAAAK,EAAA,OAAAJ,eAAAI,EAAA,OAAAI,SAAAJ,EAAA,OAAAO,OAAA;EAE/CG,KAAA3C,cACLE,OAAO2B,cACPnB,OAAO8B,KAAK,CAAC,CAAA5B,MACbG,SAASyB,KAAK,CAAC,CAACX,YAAY,CAACD,QAC7BS,KACF;EAACJ,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;EAAAP,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAG,SAAAH,EAAA,QAAAS,MAAAT,EAAA,QAAAU,IAAA;EATHC,KAAA,oBAAC,MAAD;GACO,MAAA;GAAW,GACXF;GAAiD,GAClDN;GACG,OAAAO;EAKN,CAAA;EACDV,EAAA,MAAAG;EAAAH,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAVFW;AAUE"}

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