hsds_mobile 0.3.1

HeadSpace Design System — mobile component library (Flutter / Dart)

hsds_mobile

Flutter component library for the Headspace Design System.

Installation

dependencies:
  hsds_mobile: ^0.1.0

Components

HsdsBottomNav

Persistent tab bar for primary app navigation. Supports 3–5 labelled items with active/inactive states and an iOS home indicator.

import 'package:hsds_mobile/hsds_mobile.dart';

HsdsBottomNav(
  items: [
    HsdsBottomNavItem(
      label: 'Today',
      icon: HsdsBottomNavIcons.today.inactive,
      activeIcon: HsdsBottomNavIcons.today.active,
    ),
    HsdsBottomNavItem(
      label: 'Explore',
      icon: HsdsBottomNavIcons.explore.inactive,
      activeIcon: HsdsBottomNavIcons.explore.active,
    ),
    HsdsBottomNavItem(
      label: 'Profile',
      icon: HsdsBottomNavIcons.profile.inactive,
      activeIcon: HsdsBottomNavIcons.profile.active,
    ),
  ],
  selectedIndex: _selectedIndex,
  onTabSelected: (i) => setState(() => _selectedIndex = i),
)

Props

Prop	Type	Default	Description
items	List<HsdsBottomNavItem>	required	3–5 tab items
selectedIndex	int	required	Index of the active tab
onTabSelected	ValueChanged<int>	required	Called when a tab is tapped
showHomeIndicator	bool	true	Show iOS home indicator bar

Available icons: HsdsBottomNavIcons.today, .explore, .profile, .care, .ebb — each with .active and .inactive getters.

Tokens

Design tokens are available as constants:

HsdsColors.foregroundForeground       // #2D2C2B
HsdsColors.foregroundForegroundWeaker // #63605D
HsdsColors.surfaceSurface             // #FFFFFF
HsdsSpacing.small3X                   // 2dp
HsdsSpacing.large9X                   // 120dp (tablet inset)

Documentation

Full documentation at hsds.design/components/bottom-nav.