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

package/dist/components/supporting-pane/index.js

@@ -0,0 +1,109 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/supporting-pane/index.tsx
+const SUPPORTING_PANE = 360;
+const BESIDE = /* @__PURE__ */ new Set([
+	"expanded",
+	"extraLarge",
+	"large"
+]);
+const styles = StyleSheet.create({
+	leading: { flexDirection: "row-reverse" },
+	main: {
+		flex: 1,
+		minWidth: 0
+	},
+	supporting: { width: SUPPORTING_PANE },
+	trailing: { flexDirection: "row" }
+});
+const stylesOf = themedStyles(({ spacing }) => StyleSheet.create({ root: { gap: spacing.xl } }));
+/**
+* Material Design's supporting pane layout: a main pane and a companion that
+* reflows underneath it when there is no room beside it.
+*
+* ```tsx
+* <SupportingPane main={<Article />} supporting={<Related />} />
+* ```
+*
+* Layout only: neither pane paints a surface or a border of its own, so what
+* goes in them is composed at the call site out of Cards, lists or plain
+* content. The main pane comes first in the tree in both shapes, so a screen
+* reader reaches it before the content that supports it.
+*
+* `style`, `ref` and `testID` land on the outer `View`, and a `style` there
+* applies over the layout's own.
+*/
+function SupportingPane(t0) {
+	const $ = c(18);
+	let main;
+	let props;
+	let style;
+	let supporting;
+	let t1;
+	if ($[0] !== t0) {
+		({main, placement: t1, style, supporting, ...props} = t0);
+		$[0] = t0;
+		$[1] = main;
+		$[2] = props;
+		$[3] = style;
+		$[4] = supporting;
+		$[5] = t1;
+	} else {
+		main = $[1];
+		props = $[2];
+		style = $[3];
+		supporting = $[4];
+		t1 = $[5];
+	}
+	const placement = t1 === void 0 ? "trailing" : t1;
+	const own = stylesOf(useTheme());
+	const beside = BESIDE.has(useWindowSizeClass());
+	const row = placement === "leading" ? styles.leading : styles.trailing;
+	const T0 = View;
+	const t2 = composeStyles(own.root, beside ? row : null, style);
+	const t3 = beside ? styles.main : null;
+	let t4;
+	if ($[6] !== main || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(View, {
+			style: t3,
+			children: main
+		});
+		$[6] = main;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	const t5 = beside ? styles.supporting : null;
+	let t6;
+	if ($[9] !== supporting || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(View, {
+			style: t5,
+			children: supporting
+		});
+		$[9] = supporting;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== T0 || $[13] !== props || $[14] !== t2 || $[15] !== t4 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(T0, {
+			...props,
+			style: t2,
+			children: [t4, t6]
+		});
+		$[12] = T0;
+		$[13] = props;
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+}
+//#endregion
+export { SupportingPane };
+
+//# sourceMappingURL=index.js.map

package/dist/components/supporting-pane/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ViewProps","ViewStyle","StyleSheet","View","WindowSizeClass","useWindowSizeClass","useTheme","composeStyles","themedStyles","SUPPORTING_PANE","BESIDE","ReadonlySet","Set","styles","create","leading","flexDirection","main","flex","minWidth","supporting","width","trailing","stylesOf","spacing","root","gap","xl","SupportingPaneProps","Omit","placement","ref","SupportingPane","t0","$","_c","props","style","t1","undefined","own","beside","has","row","T0","t2","t3","t4","t5","t6","t7","_c"],"sources":["../../../src/components/supporting-pane/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\n\nimport type { WindowSizeClass } from '../../hooks/useWindowSizeClass'\n\nimport { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's SupportingPane, Material Design's supporting pane canonical\n// layout. The supporting pane holds content that only means anything next to\n// the main pane, such as comments, related items or a tool panel, which is\n// what separates it from list-detail, where the second pane stands on its own.\n//\n// The page gives the layout two shapes. Below the expanded window size the\n// supporting pane is stacked under the main one, which is Material Design's\n// reflow strategy; the page's other compact option, a bottom sheet, is\n// Sheet's job at the call site. From expanded up, 840dp, the supporting pane\n// stands beside the main one at a fixed 360dp and the main pane takes the\n// rest. Native has no media queries, so the shape follows\n// `useWindowSizeClass()`, as ListDetail's does.\n//\n// **Which side the supporting pane takes is a choice of the side-by-side\n// shape alone.** The page puts it below the focus pane in medium windows and\n// under, and \"on the leading or trailing side of the focus pane\" from\n// expanded up, so `placement` moves the pane beside the main one and leaves\n// the stacked shape alone.\n//\n// **The main pane is first in the tree in both shapes, and a leading pane is\n// drawn before it by reversing the row.** That is web's departure too, for\n// web's reason: the page asks that the reading order match the arrangement\n// on screen, and no one order of the panes satisfies both of its rules. A\n// supporting pane written first would read before the main one when the\n// layout stacks, which is the one arrangement the page rules out, so the\n// break lands side by side instead, where a screen reader reaches the main\n// pane before the leading one drawn at its start.\n//\n// Both panes stay mounted in the same places in the tree in both shapes, so\n// a rotation or an unfolding keeps what either holds. A row runs from the\n// start edge, so under a right-to-left layout leading is the right-hand side,\n// with nothing here turning it over.\n\n// Material Design's width for the supporting pane, beside the main one.\nconst SUPPORTING_PANE = 360\n\n// The window sizes with room for both panes side by side.\nconst BESIDE: ReadonlySet<WindowSizeClass> = new Set([\n  'expanded',\n  'extraLarge',\n  'large',\n])\n\nconst styles = StyleSheet.create({\n  leading: {\n    flexDirection: 'row-reverse',\n  },\n  // The main pane beside the supporting one: whatever the fixed pane leaves,\n  // which a long unbroken line inside cannot widen past its share.\n  main: {\n    flex: 1,\n    minWidth: 0,\n  },\n  supporting: {\n    width: SUPPORTING_PANE,\n  },\n  trailing: {\n    flexDirection: 'row',\n  },\n})\n\n// The 24dp between the panes, web's `spacing.xl`, in either shape.\nconst stylesOf = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    root: {\n      gap: spacing.xl,\n    },\n  }),\n)\n\ntype SupportingPaneProps = Omit<ViewProps, 'children'> & {\n  /**\n   * The primary content. Takes whatever width the supporting pane leaves from\n   * the expanded window size up.\n   */\n  readonly main?: ReactNode\n  /**\n   * Which side of the main pane the supporting one takes from the expanded\n   * window size up. Below it the layout stacks either way, with the\n   * supporting pane under the main one.\n   * @default 'trailing'\n   */\n  readonly placement?: 'leading' | 'trailing'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Content that only means something beside `main`. Sits below it in a\n   * compact or medium window, and beside it at a fixed 360dp from the\n   * expanded window size up.\n   */\n  readonly supporting?: ReactNode\n}\n\n/**\n * Material Design's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * ```tsx\n * <SupportingPane main={<Article />} supporting={<Related />} />\n * ```\n *\n * Layout only: neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists or plain\n * content. The main pane comes first in the tree in both shapes, so a screen\n * reader reaches it before the content that supports it.\n *\n * `style`, `ref` and `testID` land on the outer `View`, and a `style` there\n * applies over the layout's own.\n */\nfunction SupportingPane({\n  main,\n  placement = 'trailing',\n  style,\n  supporting,\n  ...props\n}: SupportingPaneProps) {\n  const own = stylesOf(useTheme())\n  const beside = BESIDE.has(useWindowSizeClass())\n  const row = placement === 'leading' ? styles.leading : styles.trailing\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(own.root, beside ? row : null, style)}\n    >\n      <View style={beside ? styles.main : null}>{main}</View>\n      <View style={beside ? styles.supporting : null}>{supporting}</View>\n    </View>\n  )\n}\n\nexport type { SupportingPaneProps }\n\nexport { SupportingPane }\n"],"mappings":";;;;;;;AA6CA,MAAMY,kBAAkB;AAGxB,MAAMC,yBAAuC,IAAIE,IAAI;CACnD;CACA;CACA;AAAO,CACR;AAED,MAAMC,SAASX,WAAWY,OAAO;CAC/BC,SAAS,EACPC,eAAe,cACjB;CAGAC,MAAM;EACJC,MAAM;EACNC,UAAU;CACZ;CACAC,YAAY,EACVC,OAAOZ,gBACT;CACAa,UAAU,EACRN,eAAe,MACjB;AACF,CAAC;AAGD,MAAMO,WAAWf,cAAc,EAAEgB,cAC/BtB,WAAWY,OAAO,EAChBW,MAAM,EACJC,KAAKF,QAAQG,GACf,EACF,CAAC,CACH;;;;;;;;;;;;;;;;;AAwCA,SAAAK,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAlB;CAAA,IAAAmB;CAAA,IAAAC;CAAA,IAAAjB;CAAA,IAAAkB;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAwB,CAAA,CAAAhB,MAAAa,WAAAQ,IAAAD,OAAAjB,YAAA,GAAAgB,SAAAH;EAMFC,EAAA,KAAAD;EAAAC,EAAA,KAAAjB;EAAAiB,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAd;EAAAc,EAAA,KAAAI;CAAA,OAAA;EAAArB,OAAAiB,EAAA;EAAAE,QAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAd,aAAAc,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAJpB,MAAAJ,YAAAQ,OAAAC,KAAAA,IAAA,aAAAD;CAKA,MAAAE,MAAYjB,SAASjB,SAAS,CAAC;CAC/B,MAAAmC,SAAe/B,OAAMgC,IAAKrC,mBAAmB,CAAC;CAC9C,MAAAsC,MAAYb,cAAc,YAAYjB,OAAME,UAAWF,OAAMS;CAG1D,MAAAsB,KAAAzC;CAEQ,MAAA0C,KAAAtC,cAAyBiC,IAAGf,MAAOgB,SAAAE,MAAA,MAAqBN,KAAK;CAEvD,MAAAS,KAAAL,SAAS5B,OAAMI,OAAf;CAA2B,IAAA8B;CAAA,IAAAb,EAAA,OAAAjB,QAAAiB,EAAA,OAAAY,IAAA;EAAxCC,KAAA,oBAAC,MAAD;GAAa,OAAAD;GAA8B7B,UAAAA;EAAtC,CAAA;EAAkDiB,EAAA,KAAAjB;EAAAiB,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAC1C,MAAAc,KAAAP,SAAS5B,OAAMO,aAAf;CAAiC,IAAA6B;CAAA,IAAAf,EAAA,OAAAd,cAAAc,EAAA,QAAAc,IAAA;EAA9CC,KAAA,oBAAC,MAAD;GAAa,OAAAD;GAAoC5B,UAAAA;EAA5C,CAAA;EAA8Dc,EAAA,KAAAd;EAAAc,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAU,MAAAV,EAAA,QAAAE,SAAAF,EAAA,QAAAW,MAAAX,EAAA,QAAAa,MAAAb,EAAA,QAAAe,IAAA;EALrEC,KAAA,qBAAC,IAAD;GAAK,GACCd;GACG,OAAAS;GAFT,UAAA,CAIEE,IACAE,EALG;;EAMEf,EAAA,MAAAU;EAAAV,EAAA,MAAAE;EAAAF,EAAA,MAAAW;EAAAX,EAAA,MAAAa;EAAAb,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,OANPgB;AAMO"}

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

@@ -0,0 +1,196 @@
+import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
+import { Key, Orientation } from "react-stately";
+//#region src/components/tabs/index.d.ts
+/** How the bar shares its room among the tabs. */
+type TabsLayout = 'fixed' | 'scrollable';
+type TabsListProps<T extends object = object> = {
+  /** Names the bar, for a screen reader. */
+  readonly 'aria-label'?: string;
+  /** Names the bar after the element with this id. */
+  readonly 'aria-labelledby'?: string;
+  /**
+   * The tabs, as `Tabs.Tab` elements each given an `id`, or with `items` a
+   * function from an item to its tab.
+   */
+  readonly children?: ((item: T) => ReactElement) | ReactNode;
+  /** The items to draw a tab for, through the function `children` is. */
+  readonly items?: Iterable<T>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type TabsPanelProps = {
+  readonly children?: ReactNode;
+  /**
+   * The key of the tab the panel belongs to, which is drawn while that tab
+   * is selected. A panel given none is drawn under whichever tab is.
+   */
+  readonly id?: Key;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type TabsPanelsProps = {
+  /** The `Tabs.Panel` elements, whose box moves between their heights. */
+  readonly children?: ReactNode;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type TabsProps = {
+  /** The bar, as a `Tabs.List`, and the `Tabs.Panel` elements it switches. */
+  readonly children?: ReactNode;
+  /** The tab selected at first, when the bar keeps its own selection. */
+  readonly defaultSelectedKey?: Key;
+  /** The keys of the tabs that take no press, and draw disabled. */
+  readonly disabledKeys?: Iterable<Key>;
+  /**
+   * Disables every tab.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * How the bar shares its room: `fixed` divides it into equal sections, and
+   * `scrollable` gives each tab its label's width in a bar that scrolls,
+   * which is the page's choice for more tabs than the room has sections for.
+   * @default 'fixed'
+   */
+  readonly layout?: TabsLayout;
+  /** Called with the key of the tab that has just been selected. */
+  readonly onSelectionChange?: (key: Key) => void;
+  /**
+   * Whether the bar runs across, above its panels, or down, beside them.
+   * @default 'horizontal'
+   */
+  readonly orientation?: Orientation;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /** The key of the selected tab, when the call site holds it. */
+  readonly selectedKey?: Key | null;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /**
+   * Which of the page's two tab bars this is: `primary` for the main one,
+   * `secondary` for a strip under a primary one.
+   * @default 'primary'
+   */
+  readonly variant?: TabsVariant;
+};
+type TabsTabProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'role' | 'style'> & {
+  /**
+   * A badge on the tab: `true` for the badges page's small dot, a number for
+   * the large badge holding it. It sits on a primary tab's icon, and after
+   * the label anywhere else. The badge is hidden from a screen reader, so say
+   * what it says in the tab's `aria-label` too: "Second item, 3 new".
+   */
+  readonly badge?: boolean | number;
+  /** The tab's label. */
+  readonly children?: ReactNode;
+  /** Where the tab goes when pressed, through the app's router. */
+  readonly href?: string;
+  /**
+   * An icon with the label, at the page's 24dp: over it on a primary tab,
+   * whose bar grows to 64dp, and before it on a secondary one. The slot hands
+   * it its colour and size through `useIconStyle()`.
+   */
+  readonly icon?: ReactNode;
+  /**
+   * The tab's key, which selection reports and its `Tabs.Panel` shares.
+   * Without one, a tab drawn from `items` takes its item's `id` or `key`.
+   */
+  readonly id?: Key;
+  /**
+   * Draws the tab disabled, and it takes no press, as a key in the bar's
+   * `disabledKeys` does.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * The tab's text, for a label that is not a plain string. Read off
+   * `children` when it is one.
+   */
+  readonly textValue?: string;
+};
+/** The tabs page's two styles of tab bar. */
+type TabsVariant = 'primary' | 'secondary';
+/**
+ * A tab bar and the panels it switches between. Pass `selectedKey` with
+ * `onSelectionChange` to hold the selection, or `defaultSelectedKey` to let
+ * the bar keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it shows
+ * through a shared `id`, and a bar may stand alone without panels.
+ *
+ * ```tsx
+ * <Tabs defaultSelectedKey="first">
+ *   <Tabs.List aria-label="Sections">
+ *     <Tabs.Tab id="first">First item</Tabs.Tab>
+ *     <Tabs.Tab id="second">Second item</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel id="first">
+ *     <Text>Supporting line</Text>
+ *   </Tabs.Panel>
+ *   <Tabs.Panel id="second">
+ *     <Text>Supporting line</Text>
+ *   </Tabs.Panel>
+ * </Tabs>
+ * ```
+ *
+ * Write the `Tabs.List` among the children of `Tabs`, inside any view or
+ * fragment, rather than in a component of the call site's own: the bar is
+ * found there, and its tabs are what the selection is built from.
+ *
+ * `style`, `ref` and `testID` land on the root view, the one a layout
+ * positions.
+ */
+declare function Tabs({ children, defaultSelectedKey, disabledKeys, isDisabled, layout, onSelectionChange, orientation, ref, selectedKey, style, testID, variant }: TabsProps): import("react").JSX.Element;
+declare namespace Tabs {
+  var List: typeof TabsList;
+  var Panel: typeof TabsPanel;
+  var Panels: typeof TabsPanels;
+  var Tab: typeof TabsTab;
+}
+/**
+ * The bar: every tab, drawn from the entries its `Tabs.Tab` children gave
+ * the root, with the divider and the indicator. Name it with `aria-label` or
+ * `aria-labelledby`.
+ *
+ * `style`, `ref` and `testID` land on the bar's own view.
+ */
+declare function TabsList<T extends object = object>({ 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, ref, style, testID }: TabsListProps<T>): import("react").JSX.Element;
+/**
+ * One tab of a `Tabs.List`, which draws it: the root builds its selection
+ * from these, so one renders nothing on its own. Give every tab an `id`,
+ * which is the key selection reports and its `Tabs.Panel` shares.
+ */
+declare function TabsTab(_props: TabsTabProps): null;
+declare namespace TabsTab {
+  var getCollectionNode: (props: TabsTabProps) => Generator<{
+    'aria-label': string | undefined;
+    hasChildNodes: boolean;
+    key: Key | undefined;
+    props: TabsTabProps;
+    rendered: ReactNode;
+    textValue: string;
+    type: string;
+  }, void, unknown>;
+}
+/**
+ * The content of one tab, drawn while its tab is selected. Its `id` is the
+ * tab's.
+ *
+ * `style`, `ref` and `testID` land on the panel's own view.
+ */
+declare function TabsPanel({ children, id, ref, style, testID }: TabsPanelProps): import("react").JSX.Element | null;
+/**
+ * An optional box around the panels, which moves its height as one panel
+ * gives way to the next, over medium1 on the emphasized curve and at once
+ * under reduced motion. Without it the panels still work; the box around
+ * them simply jumps from one height to the other.
+ *
+ * `style`, `ref` and `testID` land on the box.
+ */
+declare function TabsPanels({ children, ref, style, testID }: TabsPanelsProps): import("react").JSX.Element;
+//#endregion
+export { Tabs, type TabsLayout, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsPanels, type TabsPanelsProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant };
+//# sourceMappingURL=index.d.ts.map