@gnome-ui/react-native 1.5.0 → 1.7.0

package/dist/components/WrapBox/WrapBox.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export type WrapBoxJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+export type WrapBoxAlign = 'start' | 'center' | 'end' | 'stretch';
+export interface WrapBoxProps extends Omit<ViewProps, 'style'> {
+    /** Gap between children on the same line, in dp. Default: `6`. */
+    childSpacing?: number;
+    /** Gap between lines, in dp. Defaults to `childSpacing`. */
+    lineSpacing?: number;
+    /** Horizontal distribution of children within each line. Default: `"start"`. */
+    justify?: WrapBoxJustify;
+    /** Cross-axis alignment of children within each line. Default: `"center"`. */
+    align?: WrapBoxAlign;
+    /** When true children wrap in the reverse direction (bottom to top). */
+    wrapReverse?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Flexible wrapping layout container — children flow horizontally and wrap
+ * to new lines when they don't fit, like words in a paragraph, without
+ * locking them into a grid. Mirrors `AdwWrapBox` (libadwaita 1.7 / GNOME
+ * 48) and `@gnome-ui/react`'s own `WrapBox`.
+ *
+ * Pair with `Chip` for tag lists and filter rows, or use standalone for any
+ * collection of variable-width items.
+ *
+ * The web version ships its values as CSS custom properties consumed by a
+ * stylesheet (`--wrapbox-gap`, `--wrapbox-justify`, …) because a CSS module
+ * can't take runtime values any other way; RN has no such indirection, so
+ * they're written straight onto the style object here. Everything else is a
+ * direct translation: `flex-flow: row wrap` becomes
+ * `flexDirection: 'row'` + `flexWrap`, and the shorthand
+ * `gap: <row> <column>` splits into RN's separate `rowGap`/`columnGap`
+ * (the single `gap` property would set both, which is exactly what this
+ * component must be able to avoid).
+ *
+ * As in `Box`, `childSpacing`/`lineSpacing` are numbers only — RN's gap
+ * properties take dp, not CSS strings — and `align`/`justify` keep the
+ * web's bare `start`/`end` keywords in the public API while mapping
+ * internally onto Yoga's `flex-start`/`flex-end`.
+ *
+ * `alignContent: 'stretch'` is set explicitly even though neither package
+ * exposes an `alignContent` prop — **CSS defaults it to `stretch`, Yoga
+ * defaults it to `flex-start`**, so without this line `align="stretch"`
+ * silently does nothing on RN whenever the children have no cross-size of
+ * their own: the line collapses to zero height before `alignItems` ever
+ * gets to stretch anything into it. Caught on-device (the stretch row of
+ * the example app's demo screen rendered empty); this restores the web
+ * version's behaviour exactly. It's a no-op in the ordinary case where the
+ * container hugs its content rather than having a fixed height.
+ *
+ * @example
+ * // Tag list
+ * <WrapBox childSpacing={6}>
+ *   {tags.map((tag) => <Chip key={tag}>{tag}</Chip>)}
+ * </WrapBox>
+ *
+ * @example
+ * // Looser gap between lines than between items
+ * <WrapBox childSpacing={6} lineSpacing={12} justify="center">
+ *   {filters.map((filter) => <Chip key={filter}>{filter}</Chip>)}
+ * </WrapBox>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.WrapBox.html
+ */
+export declare const WrapBox: import('react').ForwardRefExoticComponent<WrapBoxProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,2 @@
+export type { WrapBoxAlign, WrapBoxJustify, WrapBoxProps } from './WrapBox';
+export { WrapBox } from './WrapBox';