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

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

@@ -0,0 +1,117 @@
+import { CollectionProps, CollectionRowProps, CollectionSectionProps, sectionNode } from "../../collection/index.js";
+import { ReactNode } from "react";
+import { Key } from "react-stately";
+//#region src/components/navigation-tree/index.d.ts
+type NavigationTreeItemProps = NavigationTreeItemText & Omit<CollectionRowProps, 'children' | 'onAction' | 'overline' | 'textValue'> & {
+  /**
+   * The rows nested under this one, as further `NavigationTree.Item`
+   * parts.
+   */
+  readonly children?: ReactNode;
+  /**
+   * Where the row leads, which a press opens and `selectedRoute` is matched
+   * against.
+   */
+  readonly href?: string;
+};
+type NavigationTreeItemText = {
+  /** The row's label, as something other than a plain string. */
+  readonly label?: ReactNode;
+  /** The row's text, which a label that is not a string cannot give. */
+  readonly textValue: string;
+} | {
+  /** The row's label: where it goes. */
+  readonly label: string;
+  /** The row's text. Defaults to the label. */
+  readonly textValue?: string;
+};
+type NavigationTreeProps<T extends object = object> = Omit<CollectionProps<T>, 'defaultSelectedKeys' | 'disallowEmptySelection' | 'onAction' | 'onSelectionChange' | 'renderEmptyState' | 'selectedKeys' | 'selectionMode' | 'selectLabel'> & {
+  /** The keys of the rows open at first, when the tree keeps its own. */
+  readonly defaultExpandedKeys?: Iterable<Key>;
+  /**
+   * The keys of the open rows, for a call site holding them itself with
+   * `onExpandedChange`.
+   */
+  readonly expandedKeys?: Iterable<Key>;
+  /** Called with the keys of the open rows whenever a row opens or closes. */
+  readonly onExpandedChange?: (keys: Set<Key>) => void;
+  /**
+   * The route the app is on, matched against each row's `href`: the row it
+   * matches is the current one, and the rows above it are its trail.
+   */
+  readonly selectedRoute?: null | string;
+};
+type NavigationTreeSectionProps = CollectionSectionProps;
+/**
+ * A nested set of links, with the current one marked. Give the tree a
+ * `selectedRoute` and each row an `href`, and the row whose `href` matches is
+ * the current one, drawn on the drawer's pill, while each row it sits under
+ * is drawn with a bold label, so a closed trail still shows where you are.
+ * Which rows are open is React Stately's, as web's is React Aria's: pass
+ * `expandedKeys` with `onExpandedChange` to control it, or
+ * `defaultExpandedKeys` to let it keep its own.
+ *
+ * ```tsx
+ * <NavigationTree aria-label="Label" selectedRoute="/second">
+ *   <NavigationTree.Item href="/first" id="first" label="First item">
+ *     <NavigationTree.Item href="/second" id="second" label="Second item" />
+ *   </NavigationTree.Item>
+ * </NavigationTree>
+ * ```
+ *
+ * There is no selection here, as there is none in React Aria's: what is
+ * current comes from the route rather than from anything the reader picked,
+ * and `Tree` is the one that selects. A press opens a row's `href` through
+ * the `RouterProvider` around it. Composed from parts, `NavigationTree.Item`
+ * and `NavigationTree.Section`, which the tree draws from their props, so
+ * neither renders anything on its own. Name the tree with `aria-label`. It
+ * scrolls by itself, so it wants a height to fill: a short tree on a page
+ * that scrolls takes `scrollEnabled={false}` and is laid out at its full
+ * length. It has no ground of its own, so it takes the drawer's, and `style`
+ * and `ref` land on the `FlatList`.
+ */
+declare function NavigationTree<T extends object = object>({ children, defaultExpandedKeys, disabledKeys, expandedKeys, items, onExpandedChange, selectedRoute, ...props }: NavigationTreeProps<T>): import("react").JSX.Element;
+declare namespace NavigationTree {
+  var Item: typeof NavigationTreeItem;
+  var Section: typeof NavigationTreeSection;
+}
+/**
+ * One row, and the rows under it. Its slots are ListItem's, with a `label`
+ * where ListItem has a headline and no overline, since the drawer page gives
+ * one line of label: `leading`, the `label`, `supporting` under it, and
+ * `trailing`, such as a count. Give it an `href`, which is what a press
+ * opens and what `selectedRoute` is matched against, and an `id`, which is
+ * the key opening is reported by.
+ *
+ * Rows nested as `children` are what make it open: a row with none draws no
+ * chevron. The tree draws it from its entry in the collection, so it renders
+ * nothing on its own. `style`, `ref` and `testID` land on the row.
+ */
+declare function NavigationTreeItem(_props: NavigationTreeItemProps): null;
+declare namespace NavigationTreeItem {
+  var getCollectionNode: typeof navigationItemNode;
+}
+/** A named group of rows, with its heading above them. */
+declare function NavigationTreeSection(_props: NavigationTreeSectionProps): null;
+declare namespace NavigationTreeSection {
+  var getCollectionNode: typeof sectionNode;
+}
+declare function navigationItemNode(props: NavigationTreeItemProps): Generator<{
+  'aria-label': string | undefined;
+  childNodes(): Generator<{
+    element: ReactNode;
+  }, void, unknown>;
+  hasChildNodes: boolean;
+  key: Key | undefined;
+  props: {
+    readonly 'aria-label'?: string;
+    readonly children?: ReactNode;
+    readonly id?: Key;
+  };
+  rendered: ReactNode;
+  textValue: string;
+  type: string;
+}, void, unknown>;
+//#endregion
+export { NavigationTree, NavigationTreeItem, type NavigationTreeItemProps, type NavigationTreeProps, NavigationTreeSection, type NavigationTreeSectionProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation-tree/index.js

@@ -0,0 +1,135 @@
+import { CollectionView, nestedRowNode, sectionNode } from "../../collection/index.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useTreeState } from "react-stately/useTreeState";
+//#region src/components/navigation-tree/index.tsx
+/**
+* A nested set of links, with the current one marked. Give the tree a
+* `selectedRoute` and each row an `href`, and the row whose `href` matches is
+* the current one, drawn on the drawer's pill, while each row it sits under
+* is drawn with a bold label, so a closed trail still shows where you are.
+* Which rows are open is React Stately's, as web's is React Aria's: pass
+* `expandedKeys` with `onExpandedChange` to control it, or
+* `defaultExpandedKeys` to let it keep its own.
+*
+* ```tsx
+* <NavigationTree aria-label="Label" selectedRoute="/second">
+*   <NavigationTree.Item href="/first" id="first" label="First item">
+*     <NavigationTree.Item href="/second" id="second" label="Second item" />
+*   </NavigationTree.Item>
+* </NavigationTree>
+* ```
+*
+* There is no selection here, as there is none in React Aria's: what is
+* current comes from the route rather than from anything the reader picked,
+* and `Tree` is the one that selects. A press opens a row's `href` through
+* the `RouterProvider` around it. Composed from parts, `NavigationTree.Item`
+* and `NavigationTree.Section`, which the tree draws from their props, so
+* neither renders anything on its own. Name the tree with `aria-label`. It
+* scrolls by itself, so it wants a height to fill: a short tree on a page
+* that scrolls takes `scrollEnabled={false}` and is laid out at its full
+* length. It has no ground of its own, so it takes the drawer's, and `style`
+* and `ref` land on the `FlatList`.
+*/
+function NavigationTree(t0) {
+	const $ = c(20);
+	let children;
+	let defaultExpandedKeys;
+	let disabledKeys;
+	let expandedKeys;
+	let items;
+	let onExpandedChange;
+	let props;
+	let selectedRoute;
+	if ($[0] !== t0) {
+		({children, defaultExpandedKeys, disabledKeys, expandedKeys, items, onExpandedChange, selectedRoute, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultExpandedKeys;
+		$[3] = disabledKeys;
+		$[4] = expandedKeys;
+		$[5] = items;
+		$[6] = onExpandedChange;
+		$[7] = props;
+		$[8] = selectedRoute;
+	} else {
+		children = $[1];
+		defaultExpandedKeys = $[2];
+		disabledKeys = $[3];
+		expandedKeys = $[4];
+		items = $[5];
+		onExpandedChange = $[6];
+		props = $[7];
+		selectedRoute = $[8];
+	}
+	const t1 = children;
+	let t2;
+	if ($[9] !== defaultExpandedKeys || $[10] !== disabledKeys || $[11] !== expandedKeys || $[12] !== items || $[13] !== onExpandedChange || $[14] !== t1) {
+		t2 = {
+			children: t1,
+			defaultExpandedKeys,
+			disabledKeys,
+			expandedKeys,
+			items,
+			onExpandedChange,
+			selectionMode: "none"
+		};
+		$[9] = defaultExpandedKeys;
+		$[10] = disabledKeys;
+		$[11] = expandedKeys;
+		$[12] = items;
+		$[13] = onExpandedChange;
+		$[14] = t1;
+		$[15] = t2;
+	} else t2 = $[15];
+	const state = useTreeState(t2);
+	const t3 = selectedRoute ?? void 0;
+	let t4;
+	if ($[16] !== props || $[17] !== state || $[18] !== t3) {
+		t4 = /* @__PURE__ */ jsx(CollectionView, {
+			...props,
+			kind: "drawer",
+			renderEmptyState: nothing,
+			selectedRoute: t3,
+			state
+		});
+		$[16] = props;
+		$[17] = state;
+		$[18] = t3;
+		$[19] = t4;
+	} else t4 = $[19];
+	return t4;
+}
+/**
+* One row, and the rows under it. Its slots are ListItem's, with a `label`
+* where ListItem has a headline and no overline, since the drawer page gives
+* one line of label: `leading`, the `label`, `supporting` under it, and
+* `trailing`, such as a count. Give it an `href`, which is what a press
+* opens and what `selectedRoute` is matched against, and an `id`, which is
+* the key opening is reported by.
+*
+* Rows nested as `children` are what make it open: a row with none draws no
+* chevron. The tree draws it from its entry in the collection, so it renders
+* nothing on its own. `style`, `ref` and `testID` land on the row.
+*/
+function NavigationTreeItem(_props) {
+	return null;
+}
+NavigationTreeItem.getCollectionNode = navigationItemNode;
+/** A named group of rows, with its heading above them. */
+function NavigationTreeSection(_props) {
+	return null;
+}
+NavigationTreeSection.getCollectionNode = sectionNode;
+function navigationItemNode(props) {
+	return nestedRowNode(props, props.label, props.textValue ?? (typeof props.label === "string" ? props.label : ""));
+}
+function nothing() {
+	return null;
+}
+NavigationTree.Item = NavigationTreeItem;
+NavigationTree.Section = NavigationTreeSection;
+//#endregion
+export { NavigationTree, NavigationTreeItem, NavigationTreeSection };
+
+//# sourceMappingURL=index.js.map

package/dist/components/navigation-tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Key","TreeProps","StatelyTreeProps","useTreeState","CollectionProps","CollectionRowProps","CollectionSectionProps","CollectionView","nestedRowNode","sectionNode","NavigationTreeItemProps","NavigationTreeItemText","Omit","children","href","label","textValue","NavigationTreeProps","T","defaultExpandedKeys","Iterable","expandedKeys","onExpandedChange","keys","Set","selectedRoute","NavigationTreeSectionProps","NavigationTree","t0","$","_c","disabledKeys","items","props","t1","t2","selectionMode","state","t3","undefined","t4","nothing","NavigationTreeItem","_props","getCollectionNode","navigationItemNode","NavigationTreeSection","Item","Section","_c"],"sources":["../../../src/components/navigation-tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Key } from 'react-stately'\nimport type { TreeProps as StatelyTreeProps } from 'react-stately/useTreeState'\n\nimport { useTreeState } from 'react-stately/useTreeState'\n\nimport type {\n  CollectionProps,\n  CollectionRowProps,\n  CollectionSectionProps,\n} from '../../collection'\n\nimport { CollectionView, nestedRowNode, sectionNode } from '../../collection'\n\n// kanso-ui's NavigationTree: the navigation drawer page's contents, a nested\n// set of links with the current one marked. It is Tree's shape, drawn by\n// src/collection as a Tree is, so its chevron, its 24dp a level and its\n// opening and closing are Tree's, and the row is src/row's under that\n// module's `drawer` variant: the drawer page's 56dp row with a label-large\n// label, held 12dp off each edge, on a secondary-container pill while it is\n// the current one.\n//\n// A tree selects, and a navigation tree navigates, so this takes\n// `selectedRoute` where Tree takes `selectedKeys`, and has no selection at\n// all, as React Aria's has none. The row whose `href` is the route is the\n// current one, and each row it sits under is drawn with a bold label, found\n// through every row, open or not, so a current row closed out of sight\n// still shows where it is.\n//\n// Three things differ from web's, each because a screen reader or a touch on\n// a phone works differently from a keyboard in a browser.\n//\n// **A row is one element to a screen reader**, a link, as Tree's row is one\n// element. It reports whether it is open, and opening and closing it are\n// accessibility actions, named from src/i18n as Tree's are. The current row\n// says so through `aria-current` on the web, as web's does, and reports\n// itself selected on native, which has no counterpart to it, as\n// NavigationBar's current destination does.\n//\n// **A press goes where the row leads**, through src/router, so under a\n// `RouterProvider` it moves between the app's screens and without one it asks\n// the platform to open the `href`. The chevron is what opens and closes a row\n// that has rows under it, and a row with no `href` opens and closes on a press\n// instead, as React Aria's does.\n//\n// **The tree is one `FlatList`**, as Tree is, so a long drawer draws only the\n// rows in view. A section's heading scrolls with its rows, as web's does,\n// since a drawer's headings are no list's subheads.\n\ntype NavigationTreeItemProps = NavigationTreeItemText &\n  Omit<\n    CollectionRowProps,\n    'children' | 'onAction' | 'overline' | 'textValue'\n  > & {\n    /**\n     * The rows nested under this one, as further `NavigationTree.Item`\n     * parts.\n     */\n    readonly children?: ReactNode\n    /**\n     * Where the row leads, which a press opens and `selectedRoute` is matched\n     * against.\n     */\n    readonly href?: string\n  }\n\n// What the row is worth as text, which the collection keeps beside the row\n// as web's does: a string label is taken as the value, and anything else has\n// to say what it is worth, so the compiler asks for it where web's types do.\ntype NavigationTreeItemText =\n  | {\n      /** The row's label, as something other than a plain string. */\n      readonly label?: ReactNode\n      /** The row's text, which a label that is not a string cannot give. */\n      readonly textValue: string\n    }\n  | {\n      /** The row's label: where it goes. */\n      readonly label: string\n      /** The row's text. Defaults to the label. */\n      readonly textValue?: string\n    }\n\ntype NavigationTreeProps<T extends object = object> = Omit<\n  CollectionProps<T>,\n  | 'defaultSelectedKeys'\n  | 'disallowEmptySelection'\n  | 'onAction'\n  | 'onSelectionChange'\n  | 'renderEmptyState'\n  | 'selectedKeys'\n  | 'selectionMode'\n  | 'selectLabel'\n> & {\n  /** The keys of the rows open at first, when the tree keeps its own. */\n  readonly defaultExpandedKeys?: Iterable<Key>\n  /**\n   * The keys of the open rows, for a call site holding them itself with\n   * `onExpandedChange`.\n   */\n  readonly expandedKeys?: Iterable<Key>\n  /** Called with the keys of the open rows whenever a row opens or closes. */\n  readonly onExpandedChange?: (keys: Set<Key>) => void\n  /**\n   * The route the app is on, matched against each row's `href`: the row it\n   * matches is the current one, and the rows above it are its trail.\n   */\n  readonly selectedRoute?: null | string\n}\n\ntype NavigationTreeSectionProps = CollectionSectionProps\n\n/**\n * A nested set of links, with the current one marked. Give the tree a\n * `selectedRoute` and each row an `href`, and the row whose `href` matches is\n * the current one, drawn on the drawer's pill, while each row it sits under\n * is drawn with a bold label, so a closed trail still shows where you are.\n * Which rows are open is React Stately's, as web's is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own.\n *\n * ```tsx\n * <NavigationTree aria-label=\"Label\" selectedRoute=\"/second\">\n *   <NavigationTree.Item href=\"/first\" id=\"first\" label=\"First item\">\n *     <NavigationTree.Item href=\"/second\" id=\"second\" label=\"Second item\" />\n *   </NavigationTree.Item>\n * </NavigationTree>\n * ```\n *\n * There is no selection here, as there is none in React Aria's: what is\n * current comes from the route rather than from anything the reader picked,\n * and `Tree` is the one that selects. A press opens a row's `href` through\n * the `RouterProvider` around it. Composed from parts, `NavigationTree.Item`\n * and `NavigationTree.Section`, which the tree draws from their props, so\n * neither renders anything on its own. Name the tree with `aria-label`. It\n * scrolls by itself, so it wants a height to fill: a short tree on a page\n * that scrolls takes `scrollEnabled={false}` and is laid out at its full\n * length. It has no ground of its own, so it takes the drawer's, and `style`\n * and `ref` land on the `FlatList`.\n */\nfunction NavigationTree<T extends object = object>({\n  children,\n  defaultExpandedKeys,\n  disabledKeys,\n  expandedKeys,\n  items,\n  onExpandedChange,\n  selectedRoute,\n  ...props\n}: NavigationTreeProps<T>) {\n  const state = useTreeState<T>({\n    // Each part builds its own entry in the collection; see\n    // `navigationItemNode` and the one src/collection gives. The collection\n    // skips what is not an element, as a ReactNode may be, and asks any\n    // element for its entry.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n    children: children as StatelyTreeProps<T>['children'],\n    defaultExpandedKeys,\n    disabledKeys,\n    expandedKeys,\n    items,\n    onExpandedChange,\n    selectionMode: 'none',\n  })\n\n  return (\n    <CollectionView<T>\n      {...props}\n      kind=\"drawer\"\n      renderEmptyState={nothing}\n      selectedRoute={selectedRoute ?? undefined}\n      state={state}\n    />\n  )\n}\n\n/**\n * One row, and the rows under it. Its slots are ListItem's, with a `label`\n * where ListItem has a headline and no overline, since the drawer page gives\n * one line of label: `leading`, the `label`, `supporting` under it, and\n * `trailing`, such as a count. Give it an `href`, which is what a press\n * opens and what `selectedRoute` is matched against, and an `id`, which is\n * the key opening is reported by.\n *\n * Rows nested as `children` are what make it open: a row with none draws no\n * chevron. The tree draws it from its entry in the collection, so it renders\n * nothing on its own. `style`, `ref` and `testID` land on the row.\n */\nfunction NavigationTreeItem(_props: NavigationTreeItemProps): null {\n  return null\n}\n\nNavigationTreeItem.getCollectionNode = navigationItemNode\n\n/** A named group of rows, with its heading above them. */\nfunction NavigationTreeSection(_props: NavigationTreeSectionProps): null {\n  return null\n}\n\nNavigationTreeSection.getCollectionNode = sectionNode\n\n// The entry the collection holds for an `Item` part, whose first line is its\n// label.\nfunction navigationItemNode(props: NavigationTreeItemProps) {\n  return nestedRowNode(\n    props,\n    props.label,\n    props.textValue ?? (typeof props.label === 'string' ? props.label : ''),\n  )\n}\n\n// What a drawer with no rows draws, which is nothing: React Aria's takes no\n// empty state, since a set of links has no search to have found none.\nfunction nothing() {\n  return null\n}\n\nNavigationTree.Item = NavigationTreeItem\nNavigationTree.Section = NavigationTreeSection\n\nexport { NavigationTree, NavigationTreeItem, NavigationTreeSection }\nexport type {\n  NavigationTreeItemProps,\n  NavigationTreeProps,\n  NavigationTreeSectionProps,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4IA,SAAA4B,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAjB;CAAA,IAAAM;CAAA,IAAAY;CAAA,IAAAV;CAAA,IAAAW;CAAA,IAAAV;CAAA,IAAAW;CAAA,IAAAR;CAAA,IAAAI,EAAA,OAAAD,IAAA;EAAmD,CAAA,CAAAf,UAAAM,qBAAAY,cAAAV,cAAAW,OAAAV,kBAAAG,eAAA,GAAAQ,SAAAL;EAS1BC,EAAA,KAAAD;EAAAC,EAAA,KAAAhB;EAAAgB,EAAA,KAAAV;EAAAU,EAAA,KAAAE;EAAAF,EAAA,KAAAR;EAAAQ,EAAA,KAAAG;EAAAH,EAAA,KAAAP;EAAAO,EAAA,KAAAI;EAAAJ,EAAA,KAAAJ;CAAA,OAAA;EAAAZ,WAAAgB,EAAA;EAAAV,sBAAAU,EAAA;EAAAE,eAAAF,EAAA;EAAAR,eAAAQ,EAAA;EAAAG,QAAAH,EAAA;EAAAP,mBAAAO,EAAA;EAAAI,QAAAJ,EAAA;EAAAJ,gBAAAI,EAAA;CAAA;CAOX,MAAAK,KAAArB;CAA2C,IAAAsB;CAAA,IAAAN,EAAA,OAAAV,uBAAAU,EAAA,QAAAE,gBAAAF,EAAA,QAAAR,gBAAAQ,EAAA,QAAAG,SAAAH,EAAA,QAAAP,oBAAAO,EAAA,QAAAK,IAAA;EANzBC,KAAA;GAAAtB,UAMlBqB;GAA2Cf;GAAAY;GAAAV;GAAAW;GAAAV;GAAAc,eAMtC;EACjB;EAACP,EAAA,KAAAV;EAAAU,EAAA,MAAAE;EAAAF,EAAA,MAAAR;EAAAQ,EAAA,MAAAG;EAAAH,EAAA,MAAAP;EAAAO,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAbD,MAAAQ,QAAclC,aAAgBgC,EAa7B;CAOkB,MAAAG,KAAAb,iBAAAc,KAAAA;CAA0B,IAAAC;CAAA,IAAAX,EAAA,QAAAI,SAAAJ,EAAA,QAAAQ,SAAAR,EAAA,QAAAS,IAAA;EAJ3CE,KAAA,oBAAC,gBAAD;GAAe,GACTP;GACC,MAAA;GACaQ,kBAAAA;GACH,eAAAH;GACRD;EAAK,CAAA;EACZR,EAAA,MAAAI;EAAAJ,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OANFW;AAME;;;;;;;;;;;;;AAgBN,SAASE,mBAAmBC,QAAuC;CACjE,OAAO;AACT;AAEAD,mBAAmBE,oBAAoBC;;AAGvC,SAASC,sBAAsBH,QAA0C;CACvE,OAAO;AACT;AAEAG,sBAAsBF,oBAAoBnC;AAI1C,SAASoC,mBAAmBZ,OAAgC;CAC1D,OAAOzB,cACLyB,OACAA,MAAMlB,OACNkB,MAAMjB,cAAc,OAAOiB,MAAMlB,UAAU,WAAWkB,MAAMlB,QAAQ,GACtE;AACF;AAIA,SAAS0B,UAAU;CACjB,OAAO;AACT;AAEAd,eAAeoB,OAAOL;AACtBf,eAAeqB,UAAUF"}

package/dist/components/number-field/index.js

@@ -9,12 +9,12 @@ import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
 import { useFieldValidation } from "../../form/index.js";
 import { IconButton } from "../icon-button/index.js";
 import { FieldBox, FieldInput, FieldMessage, describedBy, useFieldFocus } from "../../field/index.js";
+import { keyboardFor } from "../../number/keyboard.js";
 import { useNumberFieldState } from "../../number/state.js";
 import { c } from "react/compiler-runtime";
 import { AccessibilityInfo, Platform, Pressable, StyleSheet, View, useWindowDimensions } from "react-native";
 import { useEffect, useId, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { NumberFormatter } from "@internationalized/number";
 //#region src/components/number-field/index.tsx
 const STEPPER_WIDTH = 32;
 const GLYPH_SIZE = 20;
@@ -76,10 +76,6 @@ function glyphOf(color) {
 function halfOf({ spacing, typography }, outlined, fontScale) {
 	return outlined ? spacing.lg + typography.bodyLargeLineHeight * fontScale / 2 : spacing.sm + (typography.bodySmallLineHeight + typography.bodyLargeLineHeight) * fontScale / 2;
 }
-function keyboardOf(minValue, hasDecimals) {
-	if (minValue === void 0 || Number.isNaN(minValue) || minValue < 0) return Platform.OS === "ios" ? "numbers-and-punctuation" : "numeric";
-	return hasDecimals ? "decimal-pad" : "number-pad";
-}
 function marginVerticalOf(margin) {
 	return { marginVertical: margin };
 }
@@ -100,7 +96,7 @@ function marginVerticalOf(margin) {
 * ```
 */
 function NumberField(t0) {
-	const $ = c(126);
+	const $ = c(124);
 	let decrementLabel;
 	let defaultValue;
 	let description;
@@ -288,192 +284,185 @@ function NumberField(t0) {
 		$[60] = t14;
 	} else t14 = $[60];
 	const focus = useFieldFocus(t14);
-	let t15;
-	if ($[61] !== formatOptions || $[62] !== writtenIn) {
-		t15 = new NumberFormatter(writtenIn, formatOptions).resolvedOptions().maximumFractionDigits ?? 0;
-		$[61] = formatOptions;
-		$[62] = writtenIn;
-		$[63] = t15;
-	} else t15 = $[63];
-	const hasDecimals = t15 > 0;
 	const announced = useStepAnnouncement(state.inputValue);
 	const [stepperFocused, setStepperFocused] = useState(false);
+	let t15;
 	let t16;
-	let t17;
-	if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = () => control.current;
-		t17 = [];
-		$[64] = t16;
-		$[65] = t17;
+	if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = () => control.current;
+		t16 = [];
+		$[61] = t15;
+		$[62] = t16;
 	} else {
-		t16 = $[64];
-		t17 = $[65];
+		t15 = $[61];
+		t16 = $[62];
 	}
-	useImperativeHandle(inputRef, t16, t17);
-	let t18;
-	if ($[66] !== announced || $[67] !== decrementLabel || $[68] !== incrementLabel || $[69] !== label || $[70] !== state.canDecrement || $[71] !== state.canIncrement || $[72] !== state.decrement || $[73] !== state.increment || $[74] !== steppers || $[75] !== validation.onEdit || $[76] !== variant || $[77] !== writtenIn) {
-		let t19;
-		if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
-			t19 = () => {
+	useImperativeHandle(inputRef, t15, t16);
+	let t17;
+	if ($[63] !== announced || $[64] !== decrementLabel || $[65] !== incrementLabel || $[66] !== label || $[67] !== state.canDecrement || $[68] !== state.canIncrement || $[69] !== state.decrement || $[70] !== state.increment || $[71] !== steppers || $[72] !== validation.onEdit || $[73] !== variant || $[74] !== writtenIn) {
+		let t18;
+		if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+			t18 = () => {
 				setStepperFocused(false);
 			};
-			$[79] = t19;
-		} else t19 = $[79];
-		let t20;
-		if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
-			t20 = () => {
+			$[76] = t18;
+		} else t18 = $[76];
+		let t19;
+		if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+			t19 = () => {
 				setStepperFocused(true);
 			};
-			$[80] = t20;
-		} else t20 = $[80];
-		t18 = steppersOf({
+			$[77] = t19;
+		} else t19 = $[77];
+		t17 = steppersOf({
 			canDecrement: state.canDecrement,
 			canIncrement: state.canIncrement,
 			decrementLabel: decrementLabel ?? messagesFor(writtenIn).decrease.replace("{label}", label),
 			incrementLabel: incrementLabel ?? messagesFor(writtenIn).increase.replace("{label}", label),
 			inline: steppers === "horizontal",
-			onBlur: t19,
+			onBlur: t18,
 			onDecrement: announced(stepThen(state.decrement, validation.onEdit)),
-			onFocus: t20,
+			onFocus: t19,
 			onIncrement: announced(stepThen(state.increment, validation.onEdit)),
 			outlined: variant === "outlined"
 		});
-		$[66] = announced;
-		$[67] = decrementLabel;
-		$[68] = incrementLabel;
-		$[69] = label;
-		$[70] = state.canDecrement;
-		$[71] = state.canIncrement;
-		$[72] = state.decrement;
-		$[73] = state.increment;
-		$[74] = steppers;
-		$[75] = validation.onEdit;
-		$[76] = variant;
-		$[77] = writtenIn;
-		$[78] = t18;
-	} else t18 = $[78];
-	const t19 = focus.focused || stepperFocused;
-	const t20 = shownError !== void 0;
-	const t21 = state.inputValue !== "";
-	const t22 = focus.handlers;
-	let t23;
-	if ($[81] !== description || $[82] !== id || $[83] !== shownError) {
-		t23 = describedBy(id, {
+		$[63] = announced;
+		$[64] = decrementLabel;
+		$[65] = incrementLabel;
+		$[66] = label;
+		$[67] = state.canDecrement;
+		$[68] = state.canIncrement;
+		$[69] = state.decrement;
+		$[70] = state.increment;
+		$[71] = steppers;
+		$[72] = validation.onEdit;
+		$[73] = variant;
+		$[74] = writtenIn;
+		$[75] = t17;
+	} else t17 = $[75];
+	const t18 = focus.focused || stepperFocused;
+	const t19 = shownError !== void 0;
+	const t20 = state.inputValue !== "";
+	const t21 = focus.handlers;
+	let t22;
+	if ($[78] !== description || $[79] !== id || $[80] !== shownError) {
+		t22 = describedBy(id, {
 			description,
 			error: shownError
 		});
-		$[81] = description;
-		$[82] = id;
-		$[83] = shownError;
-		$[84] = t23;
-	} else t23 = $[84];
-	const t24 = !isDisabled && !isReadOnly;
+		$[78] = description;
+		$[79] = id;
+		$[80] = shownError;
+		$[81] = t22;
+	} else t22 = $[81];
+	const t23 = !isDisabled && !isReadOnly;
+	let t24;
+	if ($[82] !== formatOptions || $[83] !== minValue || $[84] !== writtenIn) {
+		t24 = keyboardFor(writtenIn, formatOptions, minValue);
+		$[82] = formatOptions;
+		$[83] = minValue;
+		$[84] = writtenIn;
+		$[85] = t24;
+	} else t24 = $[85];
 	let t25;
-	if ($[85] !== hasDecimals || $[86] !== minValue) {
-		t25 = keyboardOf(minValue, hasDecimals);
-		$[85] = hasDecimals;
-		$[86] = minValue;
-		$[87] = t25;
-	} else t25 = $[87];
+	if ($[86] !== state || $[87] !== validation.onEdit) {
+		t25 = editInto(state, validation.onEdit);
+		$[86] = state;
+		$[87] = validation.onEdit;
+		$[88] = t25;
+	} else t25 = $[88];
 	let t26;
-	if ($[88] !== state || $[89] !== validation.onEdit) {
-		t26 = editInto(state, validation.onEdit);
-		$[88] = state;
-		$[89] = validation.onEdit;
-		$[90] = t26;
-	} else t26 = $[90];
+	if ($[89] !== onSubmitEditing || $[90] !== state) {
+		t26 = commitBefore(state, onSubmitEditing);
+		$[89] = onSubmitEditing;
+		$[90] = state;
+		$[91] = t26;
+	} else t26 = $[91];
 	let t27;
-	if ($[91] !== onSubmitEditing || $[92] !== state) {
-		t27 = commitBefore(state, onSubmitEditing);
-		$[91] = onSubmitEditing;
-		$[92] = state;
-		$[93] = t27;
-	} else t27 = $[93];
-	let t28;
-	if ($[94] !== focus.handlers || $[95] !== label || $[96] !== numeric || $[97] !== props || $[98] !== returnKeyType || $[99] !== state.inputValue || $[100] !== t23 || $[101] !== t24 || $[102] !== t25 || $[103] !== t26 || $[104] !== t27) {
-		t28 = /* @__PURE__ */ jsx(FieldInput, {
+	if ($[92] !== focus.handlers || $[93] !== label || $[94] !== numeric || $[95] !== props || $[96] !== returnKeyType || $[97] !== state.inputValue || $[98] !== t22 || $[99] !== t23 || $[100] !== t24 || $[101] !== t25 || $[102] !== t26) {
+		t27 = /* @__PURE__ */ jsx(FieldInput, {
 			...props,
-			...t22,
+			...t21,
 			"aria-label": label,
 			autoComplete: "off",
 			autoCorrect: false,
-			described: t23,
-			editable: t24,
-			keyboardType: t25,
+			described: t22,
+			editable: t23,
+			keyboardType: t24,
 			numeric,
-			onChangeText: t26,
-			onSubmitEditing: t27,
+			onChangeText: t25,
+			onSubmitEditing: t26,
 			ref: control,
 			returnKeyType,
 			spellCheck: false,
 			value: state.inputValue
 		});
-		$[94] = focus.handlers;
-		$[95] = label;
-		$[96] = numeric;
-		$[97] = props;
-		$[98] = returnKeyType;
-		$[99] = state.inputValue;
-		$[100] = t23;
-		$[101] = t24;
-		$[102] = t25;
-		$[103] = t26;
-		$[104] = t27;
-		$[105] = t28;
-	} else t28 = $[105];
-	let t29;
-	if ($[106] !== floatingLabel || $[107] !== isDisabled || $[108] !== isRequired || $[109] !== label || $[110] !== t18 || $[111] !== t19 || $[112] !== t20 || $[113] !== t21 || $[114] !== t28 || $[115] !== variant) {
-		t29 = /* @__PURE__ */ jsx(FieldBox, {
+		$[92] = focus.handlers;
+		$[93] = label;
+		$[94] = numeric;
+		$[95] = props;
+		$[96] = returnKeyType;
+		$[97] = state.inputValue;
+		$[98] = t22;
+		$[99] = t23;
+		$[100] = t24;
+		$[101] = t25;
+		$[102] = t26;
+		$[103] = t27;
+	} else t27 = $[103];
+	let t28;
+	if ($[104] !== floatingLabel || $[105] !== isDisabled || $[106] !== isRequired || $[107] !== label || $[108] !== t17 || $[109] !== t18 || $[110] !== t19 || $[111] !== t20 || $[112] !== t27 || $[113] !== variant) {
+		t28 = /* @__PURE__ */ jsx(FieldBox, {
 			control,
-			end: t18,
+			end: t17,
 			floatingLabel,
 			isDisabled,
-			isFocused: t19,
-			isInvalid: t20,
-			isPopulated: t21,
+			isFocused: t18,
+			isInvalid: t19,
+			isPopulated: t20,
 			isRequired,
 			label,
 			variant,
-			children: t28
+			children: t27
 		});
-		$[106] = floatingLabel;
-		$[107] = isDisabled;
-		$[108] = isRequired;
-		$[109] = label;
-		$[110] = t18;
-		$[111] = t19;
-		$[112] = t20;
-		$[113] = t21;
+		$[104] = floatingLabel;
+		$[105] = isDisabled;
+		$[106] = isRequired;
+		$[107] = label;
+		$[108] = t17;
+		$[109] = t18;
+		$[110] = t19;
+		$[111] = t20;
+		$[112] = t27;
+		$[113] = variant;
 		$[114] = t28;
-		$[115] = variant;
-		$[116] = t29;
-	} else t29 = $[116];
-	let t30;
-	if ($[117] !== description || $[118] !== id || $[119] !== shownError) {
-		t30 = /* @__PURE__ */ jsx(FieldMessage, {
+	} else t28 = $[114];
+	let t29;
+	if ($[115] !== description || $[116] !== id || $[117] !== shownError) {
+		t29 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error: shownError,
 			id
 		});
-		$[117] = description;
-		$[118] = id;
-		$[119] = shownError;
-		$[120] = t30;
-	} else t30 = $[120];
-	let t31;
-	if ($[121] !== ref || $[122] !== style || $[123] !== t29 || $[124] !== t30) {
-		t31 = /* @__PURE__ */ jsxs(View, {
+		$[115] = description;
+		$[116] = id;
+		$[117] = shownError;
+		$[118] = t29;
+	} else t29 = $[118];
+	let t30;
+	if ($[119] !== ref || $[120] !== style || $[121] !== t28 || $[122] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(View, {
 			ref,
 			style,
-			children: [t29, t30]
+			children: [t28, t29]
 		});
-		$[121] = ref;
-		$[122] = style;
-		$[123] = t29;
-		$[124] = t30;
-		$[125] = t31;
-	} else t31 = $[125];
-	return t31;
+		$[119] = ref;
+		$[120] = style;
+		$[121] = t28;
+		$[122] = t29;
+		$[123] = t30;
+	} else t30 = $[123];
+	return t30;
 }
 function outwardSlop(half, place) {
 	const slop = hitSlop(half, STEPPER_WIDTH);