Ascent Mobile Design System

React Native mobile design-system components for Ascent products.

Registry install

npm install ascent-mobile-design-system --legacy-peer-deps

Then import public components from the package entry point:

import {
  BottomSheet,
  Button,
  DatePicker,
  Form,
  FormikDatePicker,
  FormikInput,
  FormikMonthPicker,
  FormikSelect,
  FormikTimePicker,
  Input,
  MonthPicker,
  Screen,
  Select,
  ThemeProvider,
  ThemeToggle,
  TimePicker,
} from 'ascent-mobile-design-system';

Local package install

From this repository:

npm run verify
npm run package:pack

From another React Native project:

npm install ../AscentMobileDesignSystem/.local-packages/ascent-mobile-design-system-0.0.1.tgz --legacy-peer-deps

The repository also keeps an ignored local-consumer/ folder for smoke-testing the tarball installation without publishing it.

ThemeProvider defaults to a solid appearance. Pass initialAppearance="glass" when the product should use frosted materials, hairline rims, lift, and the extra press/overlay motion. AppearanceToggle can switch that at runtime. Toasts and picker panels use a denser glass fill so content behind them does not show through.

BottomSheet is controlled with isOpen and onClose. It auto-sizes to content, scrolls after its maximum height, animates with a blurred backdrop, and supports backdrop, downward-pan, and explicit callback-driven dismissal. The consuming root must use GestureHandlerRootView; a native rebuild is required after the first install.

DatePicker matches Input chrome. Dates are unrestricted unless minDate and/or maxDate are passed. dateFormat accepts patterns such as dd/mm/yyyy. The overlay closes on a selected date or an outside tap.

TimePicker matches DatePicker chrome. Times are unrestricted unless minTime and/or maxTime are passed. hourCycle is '12' (default, with AM/PM) or '24'. The overlay can switch 12-hour and 24-hour picking and closes on a selected minute or an outside tap.

MonthPicker matches DatePicker chrome. It shows month text only (full or short/half names) with no year and no min/max. The overlay closes on a selected month or an outside tap.

The package includes reusable source and the agent/design-system reference docs. Storybook, tests, native app scaffolding, and showcase content stay in this repository and are excluded from the package tarball. Start with AI_DESIGN_SKILL.md and COMPONENT_INVENTORY.md after installing.