react-native-gtkx 0.2.0-alpha.2 → 0.3.0-alpha.1

package/dist/common/list.js

@@ -1,166 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useColorScheme } from "../apis/index";
-import { Pressable } from "../components/pressable";
-import { Text } from "../components/text";
-import { View } from "../components/view";
-import { PlatformColor, StyleSheet } from "../style/index";
-/** The usual derivation, so no call site has to get the one-row case wrong. */
-export const rowPosition = (index, count) => {
-    const first = index === 0;
-    const last = index === count - 1;
-    if (first && last) {
-        return "only";
-    }
-    return first ? "first" : last ? "last" : "middle";
-};
-// libadwaita 1.9, /org/gnome/Adwaita/styles/gtk.css:
-//   list.boxed-list { background-color: var(--card-bg-color); border-radius: 12px;
-//                     box-shadow: 0 0 0 1px RGB(0 0 6/3%),
-//                                 0 1px 3px 1px RGB(0 0 6/7%),
-//                                 0 2px 6px 2px RGB(0 0 6/3%); }
-const RADIUS = 12;
-const styles = StyleSheet.create({
-    list: {
-        backgroundColor: PlatformColor("card-bg-color"),
-        borderRadius: RADIUS,
-        // The frame is a shadow, not a border, and that distinction is load
-        // bearing: a border would consume the box and inset every row by a pixel,
-        // and no border draws the two soft drops underneath.
-        boxShadow: [
-            {
-                offsetX: 0,
-                offsetY: 0,
-                spreadDistance: 1,
-                color: "rgba(0, 0, 6, 0.03)",
-            },
-            {
-                offsetX: 0,
-                offsetY: 1,
-                blurRadius: 3,
-                spreadDistance: 1,
-                color: "rgba(0, 0, 6, 0.07)",
-            },
-            {
-                offsetX: 0,
-                offsetY: 2,
-                blurRadius: 6,
-                spreadDistance: 2,
-                color: "rgba(0, 0, 6, 0.03)",
-            },
-        ],
-    },
-    // `list > row { padding: 2px }` plus
-    // `row > box.header { margin: 0 12px; border-spacing: 6px; min-height: 50px }`
-    // — 2 + 50 + 2 + the 1px separator is the 55px row pitch measured off the
-    // widget's own screenshot.
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-        minHeight: 54,
-        paddingVertical: 2,
-        paddingHorizontal: 14,
-        gap: 6,
-    },
-    separatorUnder: {
-        borderBottomWidth: 1,
-        borderBottomColor: PlatformColor("card-shade-color"),
-    },
-    firstRow: { borderTopLeftRadius: RADIUS, borderTopRightRadius: RADIUS },
-    lastRow: {
-        borderBottomLeftRadius: RADIUS,
-        borderBottomRightRadius: RADIUS,
-    },
-    // `row > box.header > box.title { margin: 6px 0; border-spacing: 3px }`
-    titleBox: { flex: 1, marginVertical: 6, gap: 3 },
-    // The theme font is `Adwaita Sans 11`, i.e. 11pt = 14.67px, and Adwaita sets
-    // the subtitle to `font-size: smaller` — Pango's one-step-down, 1/1.2. RN's
-    // fontSize is numeric only (there is no `smaller`, no em, no inherited
-    // percentage), so the computed value is what an app can write. Documented
-    // in docs/api.md rather than hidden here.
-    title: { fontSize: 14.7 },
-    // `row label.subtitle { opacity: var(--dim-opacity) }`, 55% in the light
-    // Adwaita palette.
-    subtitle: { fontSize: 12.2, opacity: 0.55 },
-    separator: {
-        height: 1,
-        backgroundColor: PlatformColor("card-shade-color"),
-    },
-});
-// Adwaita tints the hover and press states with a fraction of the FOREGROUND
-// colour (`color-mix(in srgb, currentColor 4%, transparent)`), so one literal
-// cannot serve both themes and CSS colour functions are not part of RN's
-// colour contract. Two literals plus the scheme is what an RN app writes on
-// every platform, and it is what this does.
-const TINTS = {
-    light: { hover: "rgba(0, 0, 0, 0.04)", press: "rgba(0, 0, 0, 0.08)" },
-    dark: {
-        hover: "rgba(255, 255, 255, 0.04)",
-        press: "rgba(255, 255, 255, 0.08)",
-    },
-};
-/**
- * The `.boxed-list` frame: a rounded, shadowed card. Put `ListRow`s in it
- * directly, or a `FlatList` whose `renderItem` returns them.
- *
- * ```tsx
- * <List>
- *   {tasks.map((task, index) => (
- *     <ListRow
- *       key={task.id}
- *       title={task.title}
- *       position={rowPosition(index, tasks.length)}
- *       onPress={() => open(task)}
- *     />
- *   ))}
- * </List>
- * ```
- */
-export const List = ({ children, style, testID }) => (_jsx(View, { testID: testID, style: [styles.list, style], children: children }));
-/**
- * One row of a {@link List} — `AdwActionRow`'s layout and states, built from
- * `Pressable`, `View` and `Text`.
- *
- * Hover and press come from `Pressable`'s state callback, so they cost what
- * they cost anywhere else in this platform: the hover path swaps a CSS class
- * on the widget without a React render (see components/pressable.tsx).
- *
- * **Not yet:** keyboard navigation between rows and a focus ring.
- * `GtkListBox` implements those as widget behaviour and RN has no focus model
- * for `View` to hang them on — `Pressable`'s state is `{pressed, hovered}`
- * with no `focused`. The ring itself is now drawable (`outlineWidth` and
- * friends), so what is missing is the state, not the paint.
- */
-export const ListRow = ({ title, subtitle, prefix, suffix, onPress, position = "middle", separator, style, testID, }) => {
-    const scheme = useColorScheme() === "dark" ? "dark" : "light";
-    const tints = TINTS[scheme];
-    const isFirst = position === "first" || position === "only";
-    const isLast = position === "last" || position === "only";
-    const drawSeparator = separator ?? !isLast;
-    const body = (_jsxs(_Fragment, { children: [prefix, _jsxs(View, { style: styles.titleBox, children: [typeof title === "string" ? (_jsx(Text, { style: styles.title, children: title })) : (title), typeof subtitle === "string" ? (_jsx(Text, { style: styles.subtitle, children: subtitle })) : (subtitle)] }), suffix] }));
-    const base = [
-        styles.row,
-        isFirst && styles.firstRow,
-        isLast && styles.lastRow,
-        drawSeparator && styles.separatorUnder,
-        style,
-    ];
-    if (!onPress) {
-        return (_jsx(View, { testID: testID, style: base, children: body }));
-    }
-    return (_jsx(Pressable, { testID: testID, onPress: onPress, 
-        // The tint goes on the ROW, which is why the corner radii above have to
-        // be on the row too: a hovered first row must round its own top corners
-        // or the highlight paints square over the card's rounded ones.
-        style: ({ hovered, pressed }) => [
-            ...base,
-            hovered && { backgroundColor: tints.hover },
-            pressed && { backgroundColor: tints.press },
-        ], children: body }));
-};
-/**
- * The hairline between two rows, for lists that draw their own separators —
- * a `FlatList`'s `ItemSeparatorComponent` is exactly this, and using it means
- * the rows themselves stay position-agnostic apart from their corners.
- */
-export const ListSeparator = () => _jsx(View, { style: styles.separator });
-//# sourceMappingURL=list.js.map

package/dist/common/list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["../../src/common/list.tsx"],"names":[],"mappings":"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","sourcesContent":["// Adwaita's boxed list, for code written in React Native.\n//\n// WHY this is here rather than in an app. `.boxed-list` is the single most\n// recognisable piece of GNOME chrome, and docs/research/react-native-first-showcase.md\n// measured what it actually is: a rounded, shadowed card whose rows carry\n// hairline separators, a hover tint and a press tint. Every one of those is a\n// style — there is no widget BEHAVIOUR in the look at all. So an app can build\n// it from `View` and `Pressable`, and `examples/tasks-nav` proves it.\n//\n// What an app should not have to do is rediscover the numbers. They come from\n// libadwaita's own compiled stylesheet, they are not obvious (the frame is a\n// three-part `box-shadow`, not a border; the first and last rows carry the\n// corner radii, not the container), and they move when libadwaita moves. That\n// is a platform's job, which is what this subpath is.\n//\n// Everything below is portable React Native underneath — no widget is created\n// that an app could not have created itself. Compare `Widget`/`SlotContent`\n// next door, which exist precisely because they CANNOT be written in RN.\nimport { type ReactNode } from \"react\"\nimport { useColorScheme } from \"../apis/index\"\nimport { Pressable } from \"../components/pressable\"\nimport { Text } from \"../components/text\"\nimport { View } from \"../components/view\"\nimport { PlatformColor, StyleSheet } from \"../style/index\"\nimport type { StyleProp } from \"../contracts\"\n\n/**\n * Where a row sits in its list, which is what decides its corner radii and\n * whether it draws a separator under itself.\n *\n * RN has no `:first-child`, so this is explicit. From a `FlatList` it is\n * `rowPosition(index, data.length)`; from a static list it is the same\n * expression over the array.\n */\nexport type ListRowPosition = \"first\" | \"middle\" | \"last\" | \"only\"\n\n/** The usual derivation, so no call site has to get the one-row case wrong. */\nexport const rowPosition = (index: number, count: number): ListRowPosition => {\n  const first = index === 0\n  const last = index === count - 1\n  if (first && last) {\n    return \"only\"\n  }\n  return first ? \"first\" : last ? \"last\" : \"middle\"\n}\n\n// libadwaita 1.9, /org/gnome/Adwaita/styles/gtk.css:\n//   list.boxed-list { background-color: var(--card-bg-color); border-radius: 12px;\n//                     box-shadow: 0 0 0 1px RGB(0 0 6/3%),\n//                                 0 1px 3px 1px RGB(0 0 6/7%),\n//                                 0 2px 6px 2px RGB(0 0 6/3%); }\nconst RADIUS = 12\n\nconst styles = StyleSheet.create({\n  list: {\n    backgroundColor: PlatformColor(\"card-bg-color\"),\n    borderRadius: RADIUS,\n    // The frame is a shadow, not a border, and that distinction is load\n    // bearing: a border would consume the box and inset every row by a pixel,\n    // and no border draws the two soft drops underneath.\n    boxShadow: [\n      {\n        offsetX: 0,\n        offsetY: 0,\n        spreadDistance: 1,\n        color: \"rgba(0, 0, 6, 0.03)\",\n      },\n      {\n        offsetX: 0,\n        offsetY: 1,\n        blurRadius: 3,\n        spreadDistance: 1,\n        color: \"rgba(0, 0, 6, 0.07)\",\n      },\n      {\n        offsetX: 0,\n        offsetY: 2,\n        blurRadius: 6,\n        spreadDistance: 2,\n        color: \"rgba(0, 0, 6, 0.03)\",\n      },\n    ],\n  },\n  // `list > row { padding: 2px }` plus\n  // `row > box.header { margin: 0 12px; border-spacing: 6px; min-height: 50px }`\n  // — 2 + 50 + 2 + the 1px separator is the 55px row pitch measured off the\n  // widget's own screenshot.\n  row: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    minHeight: 54,\n    paddingVertical: 2,\n    paddingHorizontal: 14,\n    gap: 6,\n  },\n  separatorUnder: {\n    borderBottomWidth: 1,\n    borderBottomColor: PlatformColor(\"card-shade-color\"),\n  },\n  firstRow: { borderTopLeftRadius: RADIUS, borderTopRightRadius: RADIUS },\n  lastRow: {\n    borderBottomLeftRadius: RADIUS,\n    borderBottomRightRadius: RADIUS,\n  },\n  // `row > box.header > box.title { margin: 6px 0; border-spacing: 3px }`\n  titleBox: { flex: 1, marginVertical: 6, gap: 3 },\n  // The theme font is `Adwaita Sans 11`, i.e. 11pt = 14.67px, and Adwaita sets\n  // the subtitle to `font-size: smaller` — Pango's one-step-down, 1/1.2. RN's\n  // fontSize is numeric only (there is no `smaller`, no em, no inherited\n  // percentage), so the computed value is what an app can write. Documented\n  // in docs/api.md rather than hidden here.\n  title: { fontSize: 14.7 },\n  // `row label.subtitle { opacity: var(--dim-opacity) }`, 55% in the light\n  // Adwaita palette.\n  subtitle: { fontSize: 12.2, opacity: 0.55 },\n  separator: {\n    height: 1,\n    backgroundColor: PlatformColor(\"card-shade-color\"),\n  },\n})\n\n// Adwaita tints the hover and press states with a fraction of the FOREGROUND\n// colour (`color-mix(in srgb, currentColor 4%, transparent)`), so one literal\n// cannot serve both themes and CSS colour functions are not part of RN's\n// colour contract. Two literals plus the scheme is what an RN app writes on\n// every platform, and it is what this does.\nconst TINTS = {\n  light: { hover: \"rgba(0, 0, 0, 0.04)\", press: \"rgba(0, 0, 0, 0.08)\" },\n  dark: {\n    hover: \"rgba(255, 255, 255, 0.04)\",\n    press: \"rgba(255, 255, 255, 0.08)\",\n  },\n} as const\n\nexport type ListProps = {\n  children?: ReactNode\n  style?: StyleProp\n  testID?: string\n}\n\n/**\n * The `.boxed-list` frame: a rounded, shadowed card. Put `ListRow`s in it\n * directly, or a `FlatList` whose `renderItem` returns them.\n *\n * ```tsx\n * <List>\n *   {tasks.map((task, index) => (\n *     <ListRow\n *       key={task.id}\n *       title={task.title}\n *       position={rowPosition(index, tasks.length)}\n *       onPress={() => open(task)}\n *     />\n *   ))}\n * </List>\n * ```\n */\nexport const List = ({ children, style, testID }: ListProps): ReactNode => (\n  <View\n    testID={testID}\n    style={[styles.list, style]}\n  >\n    {children}\n  </View>\n)\n\nexport type ListRowProps = {\n  /** Primary line. A string renders with the row's own typography; a node is\n   *  rendered as given, for a title that needs its own styling. */\n  title?: ReactNode\n  /** Second, dimmed line. Omitted rows are single-line, as `AdwActionRow`'s\n   *  are. */\n  subtitle?: ReactNode\n  /** Leading content — a checkbox, an icon, a colour swatch. */\n  prefix?: ReactNode\n  /** Trailing content — buttons, a value, a chevron. */\n  suffix?: ReactNode\n  /** Makes the row activatable: it gains the hover and press tints and calls\n   *  this. Without it the row is inert, like a non-`activatable`\n   *  `AdwActionRow`. */\n  onPress?: () => void\n  /** Position in the list, for the corner radii and the separator. Defaults\n   *  to `\"middle\"`, which is right for a row that is neither. */\n  position?: ListRowPosition\n  /** Draw the hairline under this row. Default true for every position except\n   *  the last — set it false when the list supplies its own separators (a\n   *  `FlatList`'s `ItemSeparatorComponent`, say). */\n  separator?: boolean\n  style?: StyleProp\n  testID?: string\n}\n\n/**\n * One row of a {@link List} — `AdwActionRow`'s layout and states, built from\n * `Pressable`, `View` and `Text`.\n *\n * Hover and press come from `Pressable`'s state callback, so they cost what\n * they cost anywhere else in this platform: the hover path swaps a CSS class\n * on the widget without a React render (see components/pressable.tsx).\n *\n * **Not yet:** keyboard navigation between rows and a focus ring.\n * `GtkListBox` implements those as widget behaviour and RN has no focus model\n * for `View` to hang them on — `Pressable`'s state is `{pressed, hovered}`\n * with no `focused`. The ring itself is now drawable (`outlineWidth` and\n * friends), so what is missing is the state, not the paint.\n */\nexport const ListRow = ({\n  title,\n  subtitle,\n  prefix,\n  suffix,\n  onPress,\n  position = \"middle\",\n  separator,\n  style,\n  testID,\n}: ListRowProps): ReactNode => {\n  const scheme = useColorScheme() === \"dark\" ? \"dark\" : \"light\"\n  const tints = TINTS[scheme]\n  const isFirst = position === \"first\" || position === \"only\"\n  const isLast = position === \"last\" || position === \"only\"\n  const drawSeparator = separator ?? !isLast\n\n  const body = (\n    <>\n      {prefix}\n      <View style={styles.titleBox}>\n        {typeof title === \"string\" ? (\n          <Text style={styles.title}>{title}</Text>\n        ) : (\n          title\n        )}\n        {typeof subtitle === \"string\" ? (\n          <Text style={styles.subtitle}>{subtitle}</Text>\n        ) : (\n          subtitle\n        )}\n      </View>\n      {suffix}\n    </>\n  )\n\n  const base = [\n    styles.row,\n    isFirst && styles.firstRow,\n    isLast && styles.lastRow,\n    drawSeparator && styles.separatorUnder,\n    style,\n  ]\n\n  if (!onPress) {\n    return (\n      <View\n        testID={testID}\n        style={base}\n      >\n        {body}\n      </View>\n    )\n  }\n\n  return (\n    <Pressable\n      testID={testID}\n      onPress={onPress}\n      // The tint goes on the ROW, which is why the corner radii above have to\n      // be on the row too: a hovered first row must round its own top corners\n      // or the highlight paints square over the card's rounded ones.\n      style={({ hovered, pressed }) => [\n        ...base,\n        hovered && { backgroundColor: tints.hover },\n        pressed && { backgroundColor: tints.press },\n      ]}\n    >\n      {body}\n    </Pressable>\n  )\n}\n\n/**\n * The hairline between two rows, for lists that draw their own separators —\n * a `FlatList`'s `ItemSeparatorComponent` is exactly this, and using it means\n * the rows themselves stay position-agnostic apart from their corners.\n */\nexport const ListSeparator = (): ReactNode => <View style={styles.separator} />\n"]}