@gnome-ui/react-native 1.4.0 → 1.5.0

package/README.md

@@ -20,8 +20,9 @@ React Native component library following the [GNOME Human Interface Guidelines](
 > own public component) shipped — `Status Page` skipped for now. Tier 5
 > Advanced Controls fully ported: `Dropdown`, `Slider`, `SpinButton`,
 > `Avatar`, `Badge`, and `Popover`. Beyond Tier 5, `BottomSheet` (Tier 14)
-> and `Overlay`/`LevelBar`/`Expander`/`Divider`/`Highlight` (Tier 20) also
-> shipped. Component ports from
+> and `Overlay`/`LevelBar`/`Expander`/`Divider`/`Highlight`/`FileTypeIcon`/
+> `SegmentedBar` (Tier 20), `Chip` (Tier 7), and `IconButton`/`Drawer`
+> (Tier 8/Tier 20) also shipped. Component ports from
 > `@gnome-ui/react` continue tier by tier — see this package's own
 > [ROADMAP.md](./ROADMAP.md) for full
 > per-tier status against all 130 `@gnome-ui/react` components, and the
@@ -1291,6 +1292,144 @@ dropped, not a behavior gap. `prefers-contrast: more`'s solid-background/
 white-text swap ports via `useResolvedContrast()`, the same hook `Button`
 already uses for its own high-contrast branching.
 
+### FileTypeIcon
+
+```tsx
+import { FileTypeIcon } from '@gnome-ui/react-native';
+
+<FileTypeIcon name="report.pdf" />
+<FileTypeIcon mimeType="image/png" />
+<FileTypeIcon name="cover.jpg" thumbnail={thumbnailUrl} />
+<FileTypeIcon isFolder />
+```
+
+Small icon — optionally a thumbnail — resolved from a file's MIME type or
+name extension. Useful for file-manager-style listings. Mirrors
+`@gnome-ui/react`'s `FileTypeIcon`, falling back to the generic file icon
+(freedesktop's `text-x-generic`) when the type can't be resolved.
+
+`fileType.ts`'s category-resolution logic (MIME type / extension → one of
+13 categories, plus the freedesktop icon and generated label per category)
+is pure, DOM-free TS — duplicated verbatim from `@gnome-ui/react` rather
+than imported cross-package, the same `Icon.tsx` precedent already
+established for logic that isn't worth a shared package for one file's
+worth of code. `role="img"` + `accessibilityLabel` ports 1:1, and the
+thumbnail reuses `Avatar`'s own `Image`/`resizeMode="cover"` recipe, sized
+from `Icon`'s own size map so swapping between the resolved icon and a
+thumbnail never shifts layout.
+
+### Chip
+
+```tsx
+import { Chip } from '@gnome-ui/react-native';
+
+<Chip label="React" />
+<Chip label="React" onRemove={() => {}} />
+<Chip label="React" selectable selected={selected} onToggle={() => setSelected((s) => !s)} />
+```
+
+Compact pill-shaped label for tags, filters, and selection states. Mirrors
+`@gnome-ui/react`'s `Chip`. Three usage modes: **static** (just a visual
+label), **removable** (add `onRemove` for a × button), and **selectable**
+(add `selectable` + `selected` + `onToggle` for toggle behavior — same
+`isInteractive = selectable && !onRemove` precedence as the web version,
+so passing both renders the remove button, not a toggle). Pair with
+`WrapBox` for multi-chip layouts.
+
+The selected background/border tint
+(`color-mix(in srgb, accent 15%/50%, transparent)`) resolves to a literal
+8-digit `#RRGGBBAA` hex, the same `Highlight` precedent. The web version's
+`:hover`/`:active` background transitions collapse into a single
+pressed-state overlay tinted by `theme.activeOverlay` (the same
+`ActionRow`/`Card` recipe), since touch has no hover. The leading icon and
+remove (×) icon stay in the default foreground color rather than tracking
+the selected accent text (`color: inherit` on the web) — RN's `Icon` has
+no `currentColor` equivalent and only accepts a fixed named-swatch
+palette, none of which tracks the app's configurable accent color, so
+this is a decorative nicety dropped, not a behavior gap.
+`accessibilityRole="checkbox"` on the selectable form ports 1:1, the same
+`Checkbox` precedent.
+
+### SegmentedBar
+
+```tsx
+import { SegmentedBar } from '@gnome-ui/react-native';
+
+<SegmentedBar
+  values={[
+    { label: 'TypeScript', value: 60, color: '#3178c6' },
+    { label: 'JavaScript', value: 30, color: '#f7df1e' },
+    { label: 'CSS',        value: 10, color: '#563d7c' },
+  ]}
+/>
+```
+
+Horizontal bar split into proportional segments, one per category. Mirrors
+`@gnome-ui/react`'s `SegmentedBar`. Typical use case: repository language
+distribution. Values are normalized proportionally when they don't sum to
+100.
+
+The web version's hover interaction (dim every segment but the one under
+the pointer, brighten that one via `filter: brightness()`) is rebuilt for
+touch rather than dropped: each segment is a `Pressable`, and touching one
+dims the rest immediately via `onPressIn`/`onPressOut` — deliberately not
+gated behind `Tooltip`'s own long-press delay, since this feedback is the
+RN analog of a `Pressable`'s own instant `pressed` state, not the "peek"
+affordance a tooltip reveal is. Each segment is also wrapped in `Tooltip`
+(`placement="top"`, `delay={200}`, ported 1:1) for the label/percentage
+readout — `Tooltip` clones its own handlers onto the child while still
+calling the child's original ones, so the dim/highlight and the tooltip
+compose cleanly on the same `Pressable`. `filter: brightness(1.15)` on the
+actively-touched segment has no RN equivalent — dropped as a decorative
+nicety, since the touched segment already reads as highlighted by
+contrast once every other segment dims to 35% opacity.
+
+### IconButton
+
+```tsx
+import { IconButton } from '@gnome-ui/react-native';
+import { Search } from '@gnome-ui/icons';
+
+<IconButton icon={Search} label="Search" />
+<IconButton icon={Search} label="Search" tooltip="Search files" />
+```
+
+Icon-only action button composed from `Button`, `Icon`, and optionally
+`Tooltip` — mirrors `@gnome-ui/react`'s `IconButton`, itself already just a
+thin composition of those same three pieces. `label` is required since the
+button has no visible text. Built as a genuine prerequisite for `Drawer`'s
+`rail`, not scope creep — every piece it composes already existed.
+
+### Drawer
+
+```tsx
+import { Drawer } from '@gnome-ui/react-native';
+
+<Drawer open={open} title="Details" onClose={() => setOpen(false)}>
+  <Text>Drawer content can be any React node passed as children.</Text>
+</Drawer>
+```
+
+Slide-in panel for supplementary content, anchored to the left or right
+edge. Mirrors `@gnome-ui/react`'s `Drawer`. Supports a `rail` (an
+`IconButton` strip on the drawer's inner edge for switching panels without
+closing it) and nested-drawer width auto-scaling via context — a `Drawer`
+opened from within another drawer's content automatically renders
+narrower (`0.85^depth`, floored at 240px), so stacked drawers read as a
+drill-in hierarchy.
+
+Floats with a margin on every side and all four corners rounded, matching
+`@gnome-ui/react`'s own recent CSS update to the same look — positioned
+within the padded backdrop via `justifyContent` rather than the web CSS's
+`margin: auto` on the drawer itself, since RN auto-margin support was
+unverified for this Yoga version (confirmed correct with an on-device
+debug-color check before trusting it; `BottomSheet` already proves the
+same `justifyContent: 'flex-end'` mechanism on its own vertical axis).
+Unlike `BottomSheet`, there's no drag-to-dismiss — the web source defines
+no exit keyframes at all, so this follows `Dialog`'s simpler animation
+shape instead. `backdrop-filter: blur(4px)` has no port (no native blur
+dependency in this package).
+
 ## Installation
 
 ```bash

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,63 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ChipProps {
+    /** Text label displayed inside the chip. */
+    label: string;
+    /** Leading icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+    /**
+     * When provided, renders a remove (×) button and calls this handler.
+     * The chip root becomes a plain `View`; only the remove button is
+     * interactive.
+     */
+    onRemove?: () => void;
+    /**
+     * When true the chip renders as a toggle button.
+     * Use `selected` + `onToggle` to control its state.
+     */
+    selectable?: boolean;
+    /** Active/selected state. Only relevant when `selectable` is true. */
+    selected?: boolean;
+    /**
+     * Called when a selectable chip is pressed.
+     * Only relevant when `selectable` is true.
+     */
+    onToggle?: () => void;
+    /** Disabled state — applies to both selectable chips and the remove button. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Compact pill-shaped label for tags, filters, and selection states.
+ * Mirrors `@gnome-ui/react`'s `Chip`.
+ *
+ * Three usage modes:
+ * - **Static** — just a visual label (no `onRemove`, no `selectable`).
+ * - **Removable** — add `onRemove` to show a × button.
+ * - **Selectable** — add `selectable` + `selected` + `onToggle` for toggle
+ *   behavior. Same `isInteractive = selectable && !onRemove` precedence as
+ *   the web version: passing both `selectable` and `onRemove` renders the
+ *   remove button, not a toggle.
+ *
+ * Pair with `WrapBox` for multi-chip layouts.
+ *
+ * Rebuilt with `Pressable`/`View`/`Text` rather than ported from
+ * `@gnome-ui/react`'s `<button>`/`<span>`: the selected background/border
+ * tint (`color-mix(in srgb, accent 15%/50%, transparent)`) has no RN
+ * equivalent, resolved to a literal 8-digit `#RRGGBBAA` hex instead — the
+ * same `Highlight` precedent, since `accentBgColor` is always a plain
+ * 6-digit hex. The `:hover`/`:active` background transitions collapse into
+ * a single pressed-state overlay tinted by `theme.activeOverlay` (the same
+ * `ActionRow`/`Card` recipe), since touch has no hover. The leading icon
+ * and remove (×) icon don't recolor to match the selected accent text
+ * (`color: inherit` on the web) — RN's `Icon` has no `currentColor`
+ * equivalent and only accepts a fixed named-swatch palette, none of which
+ * tracks the app's configurable accent color, so both icons stay in the
+ * default foreground color; a decorative nicety dropped, not a behavior
+ * gap. `accessibilityRole="checkbox"` on the selectable form ports 1:1
+ * (the same `Checkbox` precedent).
+ *
+ * @see https://developer.gnome.org/hig/patterns/selection.html
+ */
+export declare const Chip: ({ label, icon, onRemove, selectable, selected, onToggle, disabled, style, testID, }: ChipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { ChipProps } from './Chip';
+export { Chip } from './Chip';

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,117 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type DrawerSide = 'left' | 'right';
+export type DrawerSize = 'classic' | 'wide';
+export interface DrawerRailItem {
+    /** Stable unique identifier. */
+    id: string;
+    /** Icon shown for this rail entry. */
+    icon: IconDefinition;
+    /** Accessible name, also used as the tooltip. */
+    label: string;
+    /** Whether this entry represents the currently visible drawer/panel. */
+    active?: boolean;
+    disabled?: boolean;
+    onPress: () => void;
+}
+export interface DrawerProps {
+    /** Whether the drawer is visible. */
+    open: boolean;
+    /** Edge that the drawer slides in from. Defaults to `"right"`. */
+    side?: DrawerSide;
+    /** Preset drawer width. Defaults to `"classic"`. */
+    size?: DrawerSize;
+    /** Optional drawer heading. */
+    title?: ReactNode;
+    /** Drawer content when a prop is preferred over `children`. */
+    content?: ReactNode;
+    /** Drawer content. Used when `content` is not provided. */
+    children?: ReactNode;
+    /** Called when the user dismisses the drawer with the Android back button or the backdrop. */
+    onClose?: () => void;
+    /** Whether pressing the backdrop closes the drawer. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+    /**
+     * Narrow icon rail rendered on the drawer's inner edge (the edge facing
+     * the backdrop), for switching between related drawers or panels without
+     * closing the drawer. Purely presentational — pressing an entry only
+     * calls its `onPress`; the caller decides what happens (swap `content`,
+     * open a different drawer, etc).
+     */
+    rail?: DrawerRailItem[];
+    style?: StyleProp<ViewStyle>;
+    /** Forwarded to the backdrop — useful for testing. */
+    testID?: string;
+}
+/**
+ * Slide-in panel for supplementary content, anchored to the left or right
+ * edge. Mirrors `@gnome-ui/react`'s `Drawer`.
+ *
+ * Rebuilt with `View`/`Modal` rather than ported from the web version's
+ * `createPortal(document.body)` + manual focus trap + Escape listener:
+ * `Modal` already floats above everything with no portal target needed,
+ * and `BackHandler`'s `hardwareBackPress` is the Android analog of the
+ * Escape listener (the same `Dialog`/`BottomSheet` precedent). Focus
+ * trapping has no port — no DOM `Tab`/`document.activeElement` concept in
+ * RN's touch-first model.
+ *
+ * **Floats with a margin on every side, all four corners rounded** — the
+ * backdrop `Pressable` carries `padding: theme.space3` (matching the
+ * `@gnome-ui/react` source's own recent update to the same floating-card
+ * look, not a divergence), and the drawer itself gets a uniform
+ * `borderRadius` instead of the flat-edge-on-the-anchored-side look a
+ * flush-to-the-screen-edge panel would need. Positioning within that
+ * padded backdrop uses `justifyContent: 'flex-end'`/`'flex-start'` on the
+ * backdrop (not the web CSS's `margin-left/right: auto` on the drawer
+ * itself) — confirmed empirically (a throwaway build with saturated debug
+ * colors standing in for the real theme colors, screenshotted on-device)
+ * that `justifyContent` renders correctly while auto-margins were, at
+ * best, unverified for this RN/Yoga version; `BottomSheet` already proves
+ * the same `justifyContent: 'flex-end'` mechanism works on this exact
+ * setup, just on the vertical axis instead of horizontal. On a phone-width
+ * screen the `classic`/`wide` presets (420/640, sized for wider viewports)
+ * get capped to fill essentially the entire available width after the
+ * margin either way, so the anchored side becomes visually obvious mainly
+ * on tablets — the same responsive behavior the web version would show at
+ * an equally narrow browser width, not an RN-specific gap.
+ *
+ * **No drag-to-dismiss, unlike `BottomSheet`**: the web source only
+ * defines entrance keyframes for both the backdrop and the panel, so this
+ * follows `Dialog`'s simpler shape (a single `progress` `Animated.Value`
+ * replayed via `useEffect` keyed on `open`, no separate exit animation or
+ * lagging `visible` state) rather than `BottomSheet`'s
+ * `PanResponder`-plus-timed-exit machinery.
+ *
+ * **The slide distance needs no `onLayout` measurement**, unlike
+ * `BottomSheet`'s content-driven height: the drawer's width is a value
+ * this component already computes in JS (`size`'s preset, scaled down by
+ * `DrawerDepthContext` depth, capped by the available space after the
+ * backdrop's margin) — RN's `transform` has no percentage-of-self units
+ * (the same `BottomSheet`/`Avatar`/`Slider` pitfall), but since the exact
+ * pixel width is already known synchronously, `translateX` can animate
+ * from that known offset to `0` immediately, with no first-frame
+ * imprecision to accept.
+ *
+ * **`DrawerDepthContext` (nested-drawer width auto-scaling) ports 1:1** —
+ * pure React Context state, no DOM dependency at all. A `Drawer` opened
+ * from within another drawer's `content`/`children` is detected via
+ * context and scales its own preset width down (`0.85^depth`, floored at
+ * `DRAWER_MIN_WIDTH`) so stacked drawers read as a drill-in hierarchy
+ * instead of identical overlapping panels.
+ *
+ * **`rail` reuses the newly-added `IconButton`** (itself just `Button` +
+ * `Icon` + optional `Tooltip`, the same composition `@gnome-ui/react`'s own
+ * `IconButton` already is) — `aria-pressed` becomes
+ * `accessibilityState={{ selected: item.active }}`, the closest RN
+ * equivalent for a toggleable icon button with no dedicated visual
+ * "pressed" style on either platform's source.
+ *
+ * `backdrop-filter: blur(4px)` has no port — no native blur view
+ * dependency exists in this package, the same gap already dropped from
+ * `Sidebar`'s blurred `variant`/`BottomSheet`'s backdrop. `role="dialog"` +
+ * `accessibilityViewIsModal` port 1:1 from `Dialog`'s own precedent.
+ *
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare const Drawer: ({ open, side, size, title, content, children, onClose, closeOnBackdrop, rail, style, testID, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { DrawerProps, DrawerRailItem, DrawerSide, DrawerSize } from './Drawer';
+export { Drawer } from './Drawer';

package/dist/components/FileTypeIcon/FileTypeIcon.d.ts

@@ -0,0 +1,45 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconSize } from '../Icon';
+export interface FileTypeIconProps {
+    /** File name (e.g. `"report.pdf"`) — resolves the icon from its extension. */
+    name?: string;
+    /**
+     * MIME type (e.g. `"application/pdf"`, `"inode/directory"`).
+     * Takes precedence over `name` when both are provided.
+     */
+    mimeType?: string;
+    /** Renders the folder icon regardless of `name`/`mimeType`. */
+    isFolder?: boolean;
+    /** Thumbnail image URL. When provided, renders the image instead of the resolved icon. */
+    thumbnail?: string;
+    /** Accessible label. Defaults to a generated description (e.g. `"PDF document"`). */
+    label?: string;
+    /** Icon size. Defaults to `"md"`. */
+    size?: IconSize;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Small icon — optionally a thumbnail — resolved from a file's MIME type
+ * or name extension. Useful for file-manager-style listings. Mirrors
+ * `@gnome-ui/react`'s `FileTypeIcon`.
+ *
+ * Falls back to the generic file icon (mirrors freedesktop's
+ * `text-x-generic`) when the type can't be resolved.
+ *
+ * `fileType.ts`'s category-resolution logic (MIME type / extension → one of
+ * 13 categories, plus the freedesktop icon and generated label per
+ * category) is pure, DOM-free TS — duplicated verbatim from
+ * `@gnome-ui/react` rather than imported cross-package, the same
+ * `isIconDefinition`/`Icon.tsx` precedent already established for
+ * DOM-independent logic that still isn't worth a shared package for one
+ * function's worth of code.
+ *
+ * `role="img"` + `accessibilityLabel` ports 1:1 (the same `Avatar`/
+ * `LevelBar` precedent for RN's newer web-aligned `Role` union). The
+ * thumbnail reuses `Avatar`'s own `Image`/`resizeMode="cover"` recipe,
+ * sized from `Icon`'s own `ICON_SIZE_MAP` so swapping between the resolved
+ * icon and a thumbnail never shifts layout — the same reasoning the web
+ * version's `.sm`/`.md`/`.lg` classes document.
+ */
+export declare const FileTypeIcon: ({ name, mimeType, isFolder, thumbnail, label, size, style, testID, }: FileTypeIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FileTypeIcon/fileType.d.ts

@@ -0,0 +1,8 @@
+import { IconDefinition } from '@gnome-ui/icons';
+export type FileTypeCategory = 'folder' | 'image' | 'audio' | 'video' | 'text' | 'pdf' | 'archive' | 'document' | 'spreadsheet' | 'presentation' | 'font' | 'executable' | 'unknown';
+/** Resolves a file-type category from a MIME type (e.g. `"image/png"`). */
+export declare function categoryFromMimeType(mimeType: string): FileTypeCategory | null;
+/** Resolves a file-type category from a file name's extension (e.g. `"report.pdf"`). */
+export declare function categoryFromName(name: string): FileTypeCategory | null;
+export declare function getFileTypeIcon(category: FileTypeCategory): IconDefinition;
+export declare function getFileTypeLabel(category: FileTypeCategory): string;

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

@@ -0,0 +1,3 @@
+export type { FileTypeIconProps } from './FileTypeIcon';
+export { FileTypeIcon } from './FileTypeIcon';
+export type { FileTypeCategory } from './fileType';

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,34 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { View } from 'react-native';
+import { ButtonProps, ButtonSize, ButtonVariant } from '../Button';
+import { IconSize } from '../Icon';
+import { TooltipPlacement } from '../Tooltip';
+export type IconButtonVariant = ButtonVariant | 'osd';
+export type IconButtonSize = ButtonSize;
+export interface IconButtonProps extends Omit<ButtonProps, 'accessibilityLabel' | 'children' | 'leadingIcon' | 'osd' | 'shape' | 'trailingIcon' | 'variant'> {
+    /** Icon definition imported from `@gnome-ui/icons`. */
+    icon: IconDefinition;
+    /** Accessible name for the icon-only button. */
+    label: string;
+    /** Visual style of the button. Use `"osd"` for media overlay controls. */
+    variant?: IconButtonVariant;
+    /** Size of the button. */
+    size?: IconButtonSize;
+    /** Override the rendered icon size. Defaults to a size matched to `size`. */
+    iconSize?: IconSize;
+    /** Optional tooltip label shown on long-press/hover/focus. */
+    tooltip?: string;
+    /** Preferred tooltip placement. */
+    tooltipPlacement?: TooltipPlacement;
+    /** Tooltip delay in milliseconds. */
+    tooltipDelay?: number;
+}
+/**
+ * Icon-only action button composed from `Button`, `Icon`, and optionally
+ * `Tooltip` — mirrors `@gnome-ui/react`'s `IconButton`, itself already just
+ * a thin composition of those same three pieces (its own JSDoc example
+ * shows the identical `<Tooltip><Button><Icon /></Button></Tooltip>`
+ * nesting `IconButton` here just formalizes into a named, reusable export).
+ * `label` is required since the button has no visible text.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,2 @@
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton';
+export { IconButton } from './IconButton';

package/dist/components/SegmentedBar/SegmentedBar.d.ts

@@ -0,0 +1,64 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SegmentedBarSegment {
+    /** Category name shown in the tooltip. */
+    label: string;
+    /**
+     * Percentage value 0–100.
+     * The sum of all segments should equal 100.
+     * If it does not, values are redistributed proportionally.
+     */
+    value: number;
+    /**
+     * Color for this segment.
+     * When omitted, a cycling palette of GNOME design tokens is used.
+     */
+    color?: string;
+}
+export interface SegmentedBarProps {
+    /** Segments to display. Each segment contributes its share of the full bar width. */
+    values: SegmentedBarSegment[];
+    /**
+     * Accessible label for the bar as a whole.
+     * Auto-generated from `values` when omitted (e.g. "TypeScript 60%, JavaScript 30%").
+     */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Horizontal bar split into proportional segments, one per category.
+ * Mirrors `@gnome-ui/react`'s `SegmentedBar`. Typical use case: repository
+ * language distribution.
+ *
+ * ```tsx
+ * <SegmentedBar
+ *   values={[
+ *     { label: 'TypeScript', value: 60, color: '#3178c6' },
+ *     { label: 'JavaScript', value: 30, color: '#f7df1e' },
+ *     { label: 'CSS',        value: 10, color: '#563d7c' },
+ *   ]}
+ * />
+ * ```
+ *
+ * The web version's hover interaction (dim every segment but the one under
+ * the pointer, brighten that one via `filter: brightness()`) is rebuilt for
+ * touch rather than dropped: each segment is a `Pressable`, and touching
+ * one dims the rest immediately via `onPressIn`/`onPressOut` — deliberately
+ * not gated behind `Tooltip`'s own long-press delay, since this feedback is
+ * the RN analog of a `Pressable`'s own instant `pressed` state, not the
+ * "peek" affordance a tooltip reveal is. Each segment is also wrapped in
+ * `Tooltip` (`label`/`placement="top"`/`delay={200}`, ported 1:1 from the
+ * web version's own tooltip) for the actual label/percentage readout,
+ * composing cleanly with the dim/highlight `onPressIn`/`onPressOut` since
+ * `Tooltip` clones its own handlers onto the child *and* still calls the
+ * child's original ones. `filter: brightness(1.15)` on the actively-touched
+ * segment has no RN equivalent (no `filter` support) — dropped as a
+ * decorative nicety, since the touched segment already reads as
+ * highlighted by contrast once every other segment dims to 35% opacity.
+ *
+ * `role="img"` + `accessibilityLabel` ports 1:1 from RN's newer web-aligned
+ * `Role` union (the same `Avatar`/`LevelBar` precedent).
+ *
+ * @see https://developer.gnome.org/hig/patterns/feedback/progress.html
+ */
+export declare const SegmentedBar: ({ values, accessibilityLabel, style, testID }: SegmentedBarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { SegmentedBarProps, SegmentedBarSegment } from './SegmentedBar';
+export { SegmentedBar } from './SegmentedBar';