@gnome-ui/react-native 1.5.0 → 1.6.0

package/dist/components/ToggleGroup/ToggleGroupItem.d.ts

@@ -0,0 +1,49 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { PressableProps, View } from 'react-native';
+export interface ToggleGroupItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'> {
+    /** String identifier — becomes the group's `value` when this item is selected. */
+    name: string;
+    /** Visible label. Omit for icon-only items (pass `accessibilityLabel` instead). */
+    label?: string;
+    /** Icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+    /** Accessible name. Required for icon-only items; defaults to `label`. */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+}
+/**
+ * Individual toggle inside a `ToggleGroup`. Can be icon-only, label-only, or
+ * icon + label — for icon-only items always pass an `accessibilityLabel` so
+ * screen readers can identify the option.
+ *
+ * The active state's three `color-mix(in srgb, accent N%, transparent)`
+ * values resolve to 8-digit `#RRGGBBAA` hexes off `theme.accentBgColor`
+ * (always a plain 6-digit hex), the technique `Chip` already established for
+ * exactly this selected-tint problem — `26` for 15% and `66` for 40% in
+ * light, `40` for 25% and `80` for 50% in dark. The CSS paints its active
+ * ring as an `inset 0 0 0 1px` box-shadow, which RN has no equivalent for;
+ * it becomes a real `borderWidth: 1` that every item carries at all times
+ * (transparent when inactive) so selecting one never shifts the row's
+ * layout — the same substitution `AvatarGroup` made for its own ring.
+ *
+ * `:hover` has no touch counterpart and collapses away; `:active` maps to
+ * `Pressable`'s `pressed` state using `theme.activeOverlay`, whose light
+ * (`rgba(0, 0, 0, 0.12)`) and dark (`rgba(255, 255, 255, 0.14)`) values are
+ * character-for-character the CSS's own `:active` colors — the same
+ * coincidence `ViewSwitcherItem` documented and reused. The
+ * `background-color`/`box-shadow` transition is dropped rather than
+ * rebuilt on `Animated`: `ViewSwitcherItem`, the closest sibling, doesn't
+ * animate its own selection either, so there is no reduced-motion handling
+ * to wire up here.
+ *
+ * The icon keeps the default foreground color instead of tracking the
+ * active accent text: `Icon` has no `currentColor` equivalent, and its
+ * `color` prop is a fixed GNOME palette (`blue`, `green`, …) with no
+ * `accent` member — which couldn't follow the app's configurable accent
+ * anyway. Same call, same reason, as `Chip`.
+ *
+ * `icon` is an `IconDefinition` rather than the `ReactNode` the older
+ * `ViewSwitcherItem` takes; that component predates `Icon` shipping in this
+ * package, while `Chip` and the web version both type it this way.
+ */
+export declare const ToggleGroupItem: import('react').ForwardRefExoticComponent<ToggleGroupItemProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,4 @@
+export type { ToggleGroupProps } from './ToggleGroup';
+export { ToggleGroup } from './ToggleGroup';
+export type { ToggleGroupItemProps } from './ToggleGroupItem';
+export { ToggleGroupItem } from './ToggleGroupItem';

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';