Skip to content

@streamuilib/react 0.5.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 24 Oct 06:08
· 45 commits to main since this release
v0.5.0
b93d5af

Every component now has a comic-book design. Each one keeps its classic
counterpart's props, native elements, keyboard support, and ARIA semantics,
and all motion stops under prefers-reduced-motion. Nothing existing
changed, so upgrading from 0.4.0 needs no code changes.

Added

Basics

  • ComicButton: comic-book buttons (a skewed panel, speech bubble, ribbon,
    burst, seal, splat, or blob) with halftone dots, a lift on hover, a slam into
    the shadow on press, and a "POW!" sound-effect pop on click (pop sets the
    words or turns it off).
  • ComicCard: comic-book panel cards (a skewed panel with halftone dots) with
    an optional narration caption and a starburst sfx; lifts on hover and the
    burst jumps. Compose the inside with CardTitle and CardDescription.
  • ComicAlert: a speech bubble pointing at a starburst with the tone's icon, a
    shouty title, and a stamped sound effect (HEY!, YES!, UH-OH!, YIKES!). Pops
    in on mount; warnings and errors shake the burst. Same tones and roles as
    Alert.

Form fields

  • ComicInput, ComicTextarea, ComicSelect: a thick ink frame with
    hand-inked corners, halftone dots, and a shadow that lifts on focus. Invalid
    fields tint pink and get an "Oops!" sticker (sfx sets or drops it).
    ComicTextarea is a speech bubble with a tail; ComicSelect's arrow sits on a
    starburst that spins on focus.
  • ComicCheckbox: a hand-inked box whose check mark draws in with a starburst
    flash.
  • ComicRadio and ComicRadioGroup: hand-inked blobs that fill with a
    spinning star, under a caption-box legend.
  • ComicSwitch: a halftone pill with a rolling starburst thumb and the state
    in the track (labels, default ON! / OFF).
  • ComicSlider: a starburst thumb that turns as it slides, with the value in a
    speech bubble (showValue, formatValue).

Disclosure and overlays

  • ComicTabs: tilted caption-box tabs over a comic panel; the active tab
    stands up lime and its panel pops in. Same keyboard support as Tabs.
  • ComicAccordion: hand-inked native <details> panels with a starburst
    toggle that spins open and answers on halftone dots.
  • ComicDialog: a native modal that slams in over a halftone backdrop, with a
    caption-box title, a round close button, and an optional sfx burst.
  • ComicTooltip: a speech-bubble tooltip with a tail and a bouncy pop-in, in
    five tones, built on Tooltip.

Feedback

  • ComicProgress: a hand-inked bar with speed lines racing along the fill, the
    percentage on a starburst at the front, and a "Done!" sticker at 100%
    (showValue, doneLabel).
  • ComicBattery: a hand-inked battery that drains from lime to pink, with a
    ZAP! burst when charging and a shaking LOW! when low (sfx). Same
    role="meter" semantics as Battery.
  • ComicSkeleton: a dashed loading block of drifting halftone dots.
  • ComicAvatar and ComicAvatarGroup: initials on a blob, starburst, seal, or
    splat sticker that jumps on hover; groups overlap at alternating tilts.

Media and icons

  • ComicAudioPlayer: a hand-inked player with a tilted cover sticker, a comic
    meter, a starburst play button that pops "La la!", comic seek and volume
    sliders, and an optional ComicTrackList playlist. Built on useAudioPlayer.
  • ComicTrackList: a playlist with dashed ink dividers and the current track
    on halftone dots with a NOW! sticker.
  • ComicEqualizer: thick-inked bars in mixed brights (tone="mix") with music
    notes floating up while it plays.
  • ComicAnimatedIcon: AnimatedIcon on a starburst, seal, splat, or blob
    sticker that bursts impact lines whenever the icon animates.
bun add @streamuilib/react@0.5.0

On npm: https://www.npmjs.com/package/@streamuilib/react/v/0.5.0

Assets 2
Loading