refraction_ui 0.49.0

A headless, highly customizable, and fully accessible Flutter UI library matching Refraction UI.

0.49.0

• Theme (additive, non-breaking): a much richer, semantic-role token vocabulary so a product's whole look is token-driven. Every new token is optional with a getter that derives a sensible default from the existing tokens, so all curated palettes, the six named-theme statics, and every existing RefractionColors/RefractionThemeData construction keep compiling and rendering pixel-identically — nothing new is required.
  • RefractionColors — new color roles (each a nullable field + default-deriving getter, all wired through copyWith/lerp):
    • Brand depth: primaryHover (primary darkened ~6%), primaryActive (primary darkened ~12%), primarySoft (primary blended ~12% over background), primarySoftForeground (→ primary), primaryGradient (List<Color>, → [primary, primary]).
    • Second brand hue: tertiary (→ secondary), tertiaryForeground (→ secondaryForeground), tertiarySoft (tertiary blended ~12% over background), tertiarySoftForeground (→ tertiary).
    • Ink/surface: placeholder (→ mutedForeground), surfaceSubtle (→ muted), borderSubtle (border pulled ~50% toward background).
    • Status: positive (→ success), positiveForeground (→ white), caution (→ warning), cautionForeground (→ white), done (→ success), neutral (→ mutedForeground), neutralForeground (→ foreground), pending (→ warning), pendingForeground (→ white).
    • Charts: chart1–chart5 — a categorical ramp seeded from primary (chart1 = primary; the rest are hue-rotations of it).
  • RefractionThemeData — new non-color scales (nullable + default-deriving getters, all wired through copyWith):
    • Radius scale: radiusSm/radiusMd/radiusLg (→ base borderRadius), radiusPill (999), radiusSheet (borderRadius * 3.5).
    • Elevation scale: elevationSm/elevationMd/elevationLg + shadowTint (→ colors.foreground). softShadow/heavyShadow are now back-compat aliases of elevationSm/elevationLg (resolved both directions).
    • Spacing scale: spacingXs/spacingSm/spacingMd/spacingLg/spacingXl (4/8/12/16/24) + gutter (16); control sizing controlHeightSm/controlHeightMd/controlHeightLg (32/36/44).
    • Typography: a new RefractionTypography token type — fonts-by-role (fontDisplay/fontBody/fontMono/fontSerif, defaulting to the theme fontFamily), a role-based type scale (display/headline/title/body/label/caption/kicker), optional variable-font weight (FontVariation), and a textScale factor (default 1.0) — wired as an optional typography field with a default instance and a resolvedTypography getter.
  • Components: RefractionButton now reads radiusMd, controlHeight*, and the spacing* scale; RefractionCard reads radiusLg/elevationSm and its header/content/footer paddings read spacingXl. Every derived default equals the value these components used before, so appearance is unchanged.

0.48.0

• BREAKING — Media components moved out of core. The media/conferencing components RefractionVideoPlayer, RefractionVideoTile, and RefractionVideoGrid (with RefractionVideoState, RefractionVideoTileData, RefractionVideoTileMicState, and RefractionVideoGridLayout) have moved to a new sibling package, refraction_ui_media. As a result, refraction_ui core no longer depends on the native video_player plugin (ExoPlayer / AVFoundation) — apps that never render video no longer pull it into their plugin registrant. Migration: if you use any of these widgets, add refraction_ui_media to your pubspec.yaml and import package:refraction_ui_media/refraction_ui_media.dart; the widget APIs are unchanged. All other core components are unaffected.

0.47.1

• Theme: Add success, warning, and info status tokens to RefractionColors (wired through copyWith/lerp and every curated palette) and route the previously hardcoded status hues through them: RefractionCallout success/warning/info variants, RefractionEmptyState tones, the RefractionInput valid state, the RefractionAudioRoom raised-hand badge, RefractionLogger warning level, and the RefractionBrowserChromeMock live badge. One token swap now re-skins every status surface. Note: the callout success/warning variants and the browser-chrome live badge adopt the shared token hues (green-500 0xFF22C55E, amber-500 0xFFF59E0B), replacing their slightly different ad-hoc greens/oranges; every other routed surface is pixel-identical.
• Tests: Add widget tests for the 13 exported widgets that had none — RefractionAlert, RefractionCallout, RefractionBottomNav, RefractionBreadcrumbs, RefractionRichChatInput, RefractionCommandMenu, RefractionFooter, RefractionInputGroup, RefractionMobileNav, RefractionNavbar, RefractionSearchBar, RefractionSelect, and RefractionSkeleton — plus direct unit coverage of the new status tokens.
• Widgetbook: Add example use cases for the 7 widgets missing from the catalog (RefractionBottomNav, RefractionBreadcrumbs, RefractionDialog, RefractionFooter, RefractionInputGroup, RefractionSearchBar, RefractionSkeleton) and regenerate the directories index.
• Docs: README corrections (accurate install/snippet details).
• Chore: Set the Dart SDK floor to >=3.27.0 and drop the unused widgetbook_annotation dev dependency from the package.
• Chore: Remove the duplicate RefractionCallout class from alert.dart — the exported implementation lives in callout.dart (the barrel already hid the duplicate).
• Chore: Move store-compliance notes under store_compliance/, clean up the analyze gate, and refresh the example lockfile.

0.47.0

• Feature: Jumbo emoji-only chat messages now animate — the package bundles Google's animated Noto emoji (Lottie, ~190 of the most-used emoji, assets/emoji_animated/, SIL OFL 1.1 / Apache 2.0 — see NOTICE). RefractionChatBubble plays the Lottie for any jumbo glyph that has an asset and falls back to the static glyph for the rest. Bundle-size note: this adds ~12 MB of Lottie JSON.
• Feature: RefractionChatBubble now follows WhatsApp's emoji/sticker conventions — emoji-only messages (1–3 emoji, grapheme-cluster safe, ZWJ sequences count as one) render jumbo (56/44/36px by count) with no bubble background, and a sticker parameter renders EmojiSticker messages bubble-less at 96px, so animated (Lottie) stickers actually animate in chat.
• Feature: Add RefractionChatBubble + RefractionChatAttachment — a WhatsApp-style message renderer so apps can compose a chat transcript out of the box: text bubbles, image/video media grids (1 large, 2-up, 2×2, "+N" overflow) with the message text as the media caption, audio rows, file cards with formatted sizes, author headers, and timestamp + delivery-status tick footers. Includes a RefractionChatAttachmentView single-attachment renderer (shared by RefractionConversation and RefractionThreadView — both now render attachments as media/files instead of filename chips), an imageBuilder seam for host media stacks, and an onAttachmentTap hook for viewers/players.
• Fix: RefractionComposer now resigns the field when the user taps outside the composer surface — mobile soft keyboards don't dismiss on their own, and every messaging app closes the keyboard when the conversation is tapped. The pill, attachment tray, counter, accessory panel, and the suggestion overlay (including its rows) share one TapRegion, so interactions with them never steal focus; an uncontrolled accessory panel closes on an outside tap as well (a controlled showAccessoryPanel remains the host's call).
• Fix: RefractionComposer action slots (attach/send/stop) were optically misaligned with the input text — slots laid out as iconSlotSize squares bottom-anchored against a shorter single-line text box, putting the glyph's center (iconSlotSize − lineHeight)/2 (2–5 px by density) above the text's center. A slot's vertical layout contribution is now exactly one scaled text line, so the glyph centers on the text line when single-line and on the last line when the field has grown. Width, glyph size, and hit targets are unchanged.
• Feature: Add ComposerActionSlot — a public action slot for RefractionComposer's leadingBuilder/trailingBuilder, sized and aligned exactly like the built-in attach/send slots (one scaled text line tall, full-density hit target), so host-built slots (e.g. an emoji toggle) don't hand-roll sizes.

0.46.1

• Fix: RefractionPopover no longer throws _ElementLifecycle.defunct when disposed — it called setState() from dispose() (via _closePopover()); guarded with isDisposing. Affected any screen that disposes a popover (e.g. navigating away while one is mounted) in debug builds.

0.46.0

• Chat / Emoji: Major RefractionComposer + RefractionEmojiPicker upgrade.
  • Full emoji set (~1,900, Unicode 16.0) from one generated source shared by the picker and the composer's : shortcode resolver.
  • Uniform default rendering via a swappable EmojiRenderer seam — ships bundled Twemoji SVG assets (CC-BY 4.0; attribution in NOTICE/README) so emoji look identical on every platform; swap to defaultEmojiRenderer (native) to opt out. Note: the bundled Twemoji assets add ~8 MB to the package; the native renderer avoids this.
  • Stickers: EmojiSticker type + a starter pack (8 SVG + 1 Lottie animated) + host-pack support and a sticker render seam.
  • Accessory panel API (accessoryPanelBuilder, controller.openAccessoryPanel()/closeAccessoryPanel()/toggleAccessoryPanel()) — an emoji/expression panel opens in the keyboard's place with the field still visible above it (WhatsApp/Slack-style), not a modal sheet. Addresses Nesta feedback #432.
  • Filled surface (ComposerSurface.filled, now default) with a calm caret-based focus (no saturated full-perimeter ring), and an optional external FocusNode — both from Nesta feedback #432.
  • Motion polish: AnimatedSwitcher send⇄stop, eased suggestion overlay (faster exit), spring-in attachment chips, animated emoji category switching; all reduced-motion aware.
• Fix: RefractionEmojiPicker now renders the complete category set with search, recents, and animated tabs.

0.45.0

• Chat: Add RefractionComposer — a headless-core chat composer with auto-grow (viewport-capped), IME-safe Enter-to-send, @mention / /slash / :emoji: / #tag trigger suggestions committing atomic tokens, an attachments tray, injectable drafts, edit-in-place, busy/stop primary action, compact/comfortable/spacious density variants, RTL mirroring, and full Semantics. The pure-Dart ComposerCore (lib/src/core/) has zero package:flutter imports and emits structured {plainText, tokens[]} output identical to the React core.
• Fix: Export RefractionMobileNav from the package barrel (shipped in 0.42.0 but never exported, so consumers couldn't import it).

0.44.0

• Marketing / Landing: Add RefractionSectionHead, RefractionStatGrid, RefractionNumberedSteps, RefractionPricingCard, RefractionBrandNetworkCell, RefractionMarqueeStrip, RefractionBrowserChromeMock, RefractionMasteryBar, and RefractionAudienceFeatureCard (#385).

• Video Conferencing: Add RefractionVideoTile, RefractionVideoGrid, RefractionCallControls, RefractionLiveCaptions, RefractionLiveTranscript, RefractionAudioRoom, RefractionFloatingReactions, and RefractionPreCallLobby (#384).

• Canvas / Diagramming: Add RefractionInfiniteCanvas, RefractionStickyNote, RefractionFlowEditor, RefractionGraphView, RefractionLiveCursors, and RefractionMiniMap (#384).

• Forms / Assessment: Add RefractionRatingScale, RefractionWizard, RefractionRadialGauge, RefractionTimeline, and RefractionChecklist (#384).

• Pipeline: Add RefractionSortableList, RefractionKanbanBoard, and RefractionSlotPicker (#389).

• IDE Chrome: Add RefractionEditorTabs, RefractionTerminal, RefractionTestResults, and RefractionEditorStatusBar (#384).

  Brings the Flutter package to complete component parity with all React/Astro easyloops and loopwyse components (Epics #259).

0.43.0

• Auth surface: Add RefractionSegmentedControl — a pill-shaped, radio-semantics value picker with an animated active segment, sm/md sizes, controlled/uncontrolled usage, and roving arrow/Home/End keyboard navigation.

• Auth surface: Add RefractionPasswordField — a password input with a built-in show/hide toggle — and extend RefractionInput with validationState (valid/invalid border + trailing check) and leadingIcon.

• Auth surface: Add RefractionSocialAuthButton / RefractionSocialAuthRow — branded Google/GitHub/Microsoft/Apple sign-in buttons with loading and a "Last used" badge, plus a responsive one-/two-column row.

• Auth surface: Add RefractionSeparator — horizontal/vertical rule with an optional centered label (labeled divider).

• Auth surface: Add RefractionEmptyState / RefractionConfirmationCard — a centered icon-chip + title/body/actions column with tone tints and an optional bordered surface.

  Brings the Flutter package to parity with the React/Astro auth-surface components (#330–#334, #339).

0.42.0

• Navigation: Add RefractionMobileNav, a mobile-first bottom/top navigation bar component with integrated icon and label states.

0.41.0

• Accessibility: Add RefractionSkipToContent, an accessibility-first widget that remains visually hidden until focused via keyboard navigation, allowing screen reader and keyboard users to bypass heavy navigation bars.

0.40.0

• Data Presentation: Add RefractionVersionSelector, a dropdown-like widget tailored for displaying and switching between software documentation versions.

0.39.0

• Data Presentation: Add RefractionLogger, a console/log output viewer widget with severity filtering and copy-to-clipboard functionality.

0.38.0

• Data Presentation: Add RefractionKeyboardShortcut, a widget designed to cleanly format and style keyboard shortcut representations (like ⌘ K).

0.37.0

• Data Presentation: Add RefractionStatusIndicator, a customizable status widget for displaying system states (Operational, Degraded, etc.) with support for pulsing animations.

0.36.0

• Data Presentation: Add RefractionPresenceIndicator, a highly customizable status indicator widget often used in tandem with Avatars to denote online presence.

0.35.0

• Data Presentation: Add RefractionConversation, a wrapper component for rendering highly customizable linear chat streams (like SMS or chatbots).

0.34.0

• Data Presentation: Add RefractionThreadView, a wrapper component designed for rendering linear sequences of messages with robust nesting support.

0.33.0

• Data Entry: Add RefractionCalendar, a highly customizable date selection widget supporting single, multiple, and range selection modes.

0.32.0

• Commerce: Add RefractionPayment, a wrapper component for rendering highly customizable payment summaries and order breakdowns.

0.31.0

• Data Entry: Add RefractionForm, a comprehensive wrapper for managing form state, input validation, submission loading states, and error messaging.

0.30.0

• Data Presentation: Add RefractionContentProtection, a wrapper component for blurring, overlaying, and gating content (e.g., paywalls, age gates).

0.29.0

• Feedback Components: Add RefractionFeedbackDialog, providing a pre-built modal logic for collecting structured user feedback with honeypot and email validation.

0.28.0

• Feedback Components: Add RefractionCookieConsent, providing a customizable headless prompt for managing cookie preferences and GDPR compliance.

0.27.0

• Feedback Components: Add RefractionInstallPrompt, providing a customizable headless prompt for triggering app installation flows (PWA/Home Screen).

0.26.0

• Feedback Components: Add RefractionCallout, providing prominent headless banners for hints, warnings, and error highlights with 5 distinct semantic variants.

0.25.0

• Layout Components: Add RefractionSheet, providing a headless modal side-sheet with drag-to-dismiss gestures for all four edges.

0.24.0

• Data Components: Add RefractionDropdownMenu, providing deeply nested menus with groups, dividers, shortcuts, and disabled states.

0.23.0

• Data Components: Add RefractionReactionBar, providing a headless emoji/icon reaction row with state tracking and tap callbacks.

0.22.0

• Data Components: Add RefractionAnimatedText, providing headless text animations (fade, typewriter, slideUp) with robust typography token integration.

0.21.0

• Data Components: Add RefractionCharts, providing headless data visualization components (RefractionLineChart, RefractionBarChart, RefractionPieChart) with complete theming support.

0.20.0

• Data Components: Add RefractionSlideViewer, providing a headless swipeable slide presentation component with standard web parity.

0.19.0

• Layout Components: Add RefractionDeviceFrame, rendering standard device mockup outlines (iPhone, iPad, Android) powered by RefractionTheme styling tokens.

0.18.0

• Data Components: Add RefractionDiffViewer, providing a headless side-by-side or inline code diff visualization powered by RefractionTheme styling tokens.

0.17.0

• Data Components: Add RefractionMarkdownRenderer, integrating flutter_markdown seamlessly with RefractionTheme to map standard markdown tags to Refraction typography tokens.

0.16.0

• Media Components: Add RefractionVoicePill, providing an animated status pill for active recording states, powered by RefractionTheme styling tokens.

0.15.0

• Media Components: Add RefractionWaveform, which uses CustomPainter to dynamically render audio amplitudes as responsive, theme-aware bars.

0.14.0

• Media Components: Add RefractionVideoPlayer, providing a headless UI shell (play/pause, progress slider, volume controls) overlaying standard video playback, fully synchronized with RefractionTheme.

0.13.0

• Data Components: Add RefractionTableOfContents with deep nesting support and semantic token mapping for foreground and muted elements.

0.12.0

• Layout Components: Add RefractionAppShell which provides a foundational layout structure with responsive headers, footers, sidebars, and main content regions.

0.11.0

• Layout Components: Add RefractionCardGrid leveraging responsive algorithms and LayoutBuilder constraints to auto-calculate cross-axis alignments.

0.10.0

• Layout Components: Add RefractionResizableLayout providing deeply customizable horizontal/vertical split panels with drag handles and boundary constraints.

0.9.0

• Navigation Components: Add RefractionSteps supporting vertical/horizontal rendering, custom step states, and connector builders.

0.8.0

• Navigation Components: Add RefractionPagination featuring exhaustive logical ellipses boundaries and exact algorithmic match for shadcn/MUI style arrays.

0.7.0

• Data Components: Add RefractionFileTree featuring recursively rendered and deeply nested files/folders with comprehensive keyboard navigation and interaction scaling tests.

0.6.0

• Layout Components: Add RefractionCollapsible leveraging SizeTransition for fluid expand/collapse animations and comprehensive state tests.

0.5.0

• Layout Components: Add RefractionCarousel built on top of PageView with >100 comprehensive gesture tests and full theme propagation.

0.4.0

• Data Components: Add RefractionDataTable with sorting, filtering, row selection, and comprehensive gesture-based interaction tests.
• Architecture: Fix RefractionCodeEditor touch interactions by replacing EditableText with TextField.
• Theming: Implement strict TextSelectionTheme boundaries across all text inputs (input.dart, code_editor.dart, chat_input.dart, date_picker.dart, etc.) to guarantee selection highlights and handles use RefractionTheme instead of falling back to the OS Material theme.

0.3.0

Implements the "Wave 1" Flutter UI components, bringing 11 new headless, themeable components mapped directly from the Web specifications, closing a major portion of the Component Parity epic.

• Forms & Inputs: Add RefractionInputGroup, RefractionSearchBar, RefractionDatePicker, RefractionFileUpload, RefractionEmojiPicker, RefractionCodeEditor, RefractionCommandInput, RefractionInlineEditor, RefractionLanguageSelector, RefractionLocationSelector, and RefractionRichEditor.
• Bug Fixes: Fixed a critical generic inference bug within RefractionSelect.createState that caused infinite flex constraints during testing.

0.2.0

Adds the Flutter telemetry and analytics surfaces that were missing from the initial pub.dev release.

• Add the telemetry core with presets, redaction, console/mock/Faro sinks, durable delivery, crash capture, lifecycle flush, native context, ATT consent, and isolate queue support.
• Add the analytics core with Segment-style envelopes, identity/session handling, consent, redaction, HTTP/console/mock sinks, and a namespaced package:refraction_ui/analytics.dart entrypoint.
• Add mobile analytics adapters for Firebase and PostHog, app background session tracking, secure storage abstractions, and iOS privacy/store compliance metadata.
• Export telemetry from the main package barrel and analytics from both the main barrel and the analytics-specific barrel while preserving the web contracts and uniform cross-platform structure.

0.1.0

Initial release of refraction_ui for Flutter — a headless, highly customizable, fully accessible UI library mirroring the Refraction UI design system.

Components included:

• Layout & navigation: Sidebar, Tabs, Accordion
• Inputs & forms: Input, Select, Checkbox, Radio, RadioGroup, Switch, OTP Input
• Buttons & menus: Button, Command Menu, Dropdown
• Feedback: Alert, Toast, Tooltip, Skeleton, Progress, Slider
• Identity & status: Avatar, Badge
• Theming: RefractionTheme, RefractionThemeData, RefractionColors

All components consume RefractionThemeData for theme tokens, matching the headless-and-token-driven approach of the React/Angular/Astro packages.