Skip to content

v1.0.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 30 Jul 04:41
v1.0.0
250ce84

@starbemtech/react-starsystem@1.0.0

Major Changes

  • 22c6d8f: Fix 11 existing components to match the Starbem Design System reference kit's public API. This is a breaking release — see the full list below before upgrading.

    Button: added variants tertiary, link, glass, glass-dark, glass-brand (9 total); added size="xl"; added pill and block props; added polymorphic as="a" rendering (disabled semantics become aria-disabled for the anchor branch).

    Checkbox / Radio: added tone ("primary" | "success" | "accent"), variant="card" (tile layout), error, and size="lg".

    Select: no prop changes — onChange's value-callback contract is now documented via JSDoc to avoid confusion with a native change event handler.

    Avatar: added size="2xl"; status is now boolean | "online" | "offline" | "away" instead of a closed enum; alt is no longer required when src is set (falls back to name); added shape, icon fallback, and ring props. AvatarGroup now takes children (<Avatar> elements) instead of an avatars array — the AvatarGroupItem type is removed.

    Modal: title type changed from string to ReactNode; added present ("auto" | "center" | "sheet" — responsive bottom-sheet layout), tone, icon, and align.

    Tabs: TabItem.content is now optional (Tabs can be used as a pure tab-bar with no panel, matching the DS — existing usage with content on every item is unaffected); added TabItem.icon, TabItem.count, variant="enclosed", size, and block.

    Badge: variant "default" is renamed to "neutral"; added variants "primary", "accent", "solid"; added dot; now spreads extra HTML attributes (onClick, data-*, aria-*, etc.) onto the root element.

    Spinner: size now also accepts a number (pixel diameter) in addition to "sm" | "md" | "lg"; added thickness; label is no longer a required prop (defaults to "Carregando"). Added a new Dots component (three-dot inline loader).

    Tooltip: added tone ("dark" | "light" | "brand") and a "rich" layout via the new title prop (renders title + content as two lines).

    Pagination: renamed currentPage → page, totalPages → total, onPageChange → onChange to match the DS; added pill; now spreads extra HTML attributes onto the root <nav>.

    Migration: update every Pagination and AvatarGroup usage per the renames above (Table's pagination prop follows automatically via its PaginationProps type). Every other change is additive — no other call site changes are required to keep compiling.

Minor Changes

  • 94472b0: Correct design tokens against the Starbem Design System reference kit: fix secondary color (#7F56D9), fix neutral-1000 (#272727), add ink color ramp, add error/warning/success semantic color scales, add semantic color aliases, switch body font from Inter to Funnel Display (single-typeface system), fix h1/h2/h4 font sizes, add overline size and per-size typeScale (line-height + letter-spacing), add space-40, rescale border-radius (sm 8px, md 12px, lg 16px, xl 24px, 2xl 32px), fix elevation shadow values to multi-layer DS values, add shadowBrand and ringFocus tokens, and load the missing Funnel Display @import.

    Note: these are token corrections only — component implementations still use hardcoded Tailwind arbitrary values (hex/px) instead of consuming these tokens, so no visual change ships in this release. Component migration is tracked separately.

  • f2416f8: Add responsive Menu navigation component (sidebar/rail/bottom/drawer/auto, container-query driven). Also fixes: ProgressCircle now accepts a label prop wired to aria-label; IconButton's label prop is now required (was optional but functionally mandatory); FilterChip's remove control is now a real sibling button instead of nested inside the chip's own button; FileUploader's inline upload progress bar now reuses the Progress component (adds proper ARIA progressbar semantics).

  • 41fac7d: Add 7 new components: Progress/ProgressCircle, Tag, IconButton, FilterBar/FilterChip, FileUploader/FileItem, ListItem, and Chart (Sparkline/LineChart/BarChart/DonutChart). All built directly against existing design tokens — no hardcoded colors.

  • c7c4adc: Add 5 new telehealth-domain components: Calendar (month date picker), DateInput (text field + calendar popover), Schedule (day/week/month agenda with video-consultation chips), Message (chat bubbles + TypingMessage/MessageDay/SystemMessage/MessageList), and VideoCall (video-consultation surface with spotlight/grid layout and live/connecting/ended states).

Patch Changes

  • dc6b276: Tech debt cleanup: Progress track now has a dark-mode background color; Menu's drawer panel content stays mounted while closed so the close animation actually slides, and the closed panel is now marked inert to prevent keyboard focus on hidden controls; AvatarGroup now respects an explicit ring prop on child Avatars instead of always forcing it to true; Checkbox's hover shadow is now tone-aware and dark-mode-aware (previously a single hardcoded amber color regardless of tone). Also added test coverage for FilterChip's disabled propagation, Tabs' mixed-content rendering, and Spinner's combined size+thickness behavior. No public API changes.
  • 75d5ac8: Migrate all existing components from hardcoded hex/px/shadow values to design tokens defined in the @theme block (colors, radius, elevation shadows). No API or behavior change — visual-only, aligning components with the corrected Starbem Design System tokens (secondary color, radius scale, shadow elevations) from the earlier token-correction release. A handful of values with no DS equivalent (two Button glass-variant glows, the Checkbox/Radio focus glow, the Select focus glow) remain hardcoded and are tracked as known technical debt.

🔖 Commits

Changes since v0.3.0:

  • 250ce84 fix(ci): pin packageManager to pnpm 11.13.1, stop hardcoding pnpm 9 in workflows
  • caf18e1 chore: release v1.0.0
  • dc6b276 chore: add changeset for tech debt cleanup
  • 5dd4366 chore: update pnpm-lock.yaml for example/'s workspace:* link
  • 623ea43 fix(example): version pnpm-workspace.yaml and link example/ to the local package via workspace:*
  • ed8f92e test: cover Spinner's combined size+thickness prop interaction
  • 146dd08 test: cover Tabs rendering a heterogeneous mix of plain/icon/count tab items together
  • 7a257a3 test: cover disabled propagation to both FilterChip buttons in the removable path
  • 3bf9886 fix(checkbox): make hover shadow tone-aware and dark-mode-aware (was a hardcoded amber rgba unrelated to tone)
  • 7d3046c fix(avatar): let AvatarGroup children override ring via an explicit ring prop
  • 5b4e036 fix(menu): mark closed drawer panel inert to prevent focusing hidden controls
  • fddc864 fix(menu): keep drawer panel content mounted while closed for a real slide-out animation
  • ba7996d fix(progress): add dark-mode track background color
  • f37e7cf docs: add implementation plan for tech debt cleanup
  • f2416f8 chore: add changeset for Menu component and debt fixes
  • 017e2ff test: add secondary-prop coverage for Progress, IconButton, FilterBar, Chart
  • ae9a8b2 fix(fileuploader): reuse Progress component for the inline upload bar (adds ARIA progressbar semantics)
  • e07d271 fix(filterbar): render FilterChip's remove control as a sibling button, not nested
  • 1102673 fix(iconbutton): make label required (icon-only control needs an accessible name)
  • 6fa1bec fix(progress): wire ProgressCircle's label prop to aria-label
  • c9c829e fix(menu): make auto mode accessible via ResizeObserver instead of aria-hidden dual-render, fix non-contiguous section grouping
  • 6bf25d4 feat(menu): add responsive Menu component (sidebar/rail/bottom/drawer/auto)
  • 0d00a9e docs: add implementation plan for Menu component and debt fixes
  • 145de1f docs: add design spec for Menu component
  • 76bcc78 docs: add implementation plan for Menu component and debt fixes
  • c56c2ac docs: add design spec for Menu component
  • 41fac7d chore: add changeset for 7 new components
  • 311609e fix(chart): implement BarChart hover tooltip, stop tooltip prop leaking to DOM
  • 66e61f6 feat(chart): add Chart, Sparkline, LineChart, BarChart and DonutChart components
  • 6fa4f10 fix(fileuploader): replace invalid ink-400 token with valid ink-300
  • b35af2b fix(listitem): replace invalid ink-400 token, align active color with NavItem/Table convention
  • ff8f6ba feat(listitem): add ListItem component
  • c187af7 fix(fileuploader): render title as visible text, add dark mode variants
  • fd7015e feat(fileuploader): add FileUploader and FileItem components
  • e96c251 fix(filterbar): segmented visual connection + keyboard-accessible remove chip
  • df0735e feat(filterbar): add FilterBar and FilterChip components
  • ccfee44 feat(iconbutton): add IconButton component
  • fc63598 feat(tag): add Tag component
  • 6509418 fix(progress): address review findings (drop eslint.config.js scope creep, tidy aria-label, add clamp test)
  • 2d751d0 feat(progress): add Progress and ProgressCircle components
  • 4bcaeda docs: add implementation plan for 7 new components
  • cb2e8c8 docs: add design spec for 7 pending components (Progress, Tag, IconButton, FilterBar, FileUploader, ListItem, Chart)
  • 87ba59e docs: add implementation plan for 7 new components
  • f56b79f docs: add design spec for 7 pending components (Progress, Tag, IconButton, FilterBar, FileUploader, ListItem, Chart)
  • 75d5ac8 chore: add changeset for token migration
  • 73f0758 refactor(videocall): migrate to design tokens
  • 7b67c7e refactor(topbar): migrate to design tokens
  • 0174475 refactor(tooltip): migrate to design tokens
  • 671c004 refactor(toggle): migrate to design tokens
  • 95278c4 refactor(toast): migrate to design tokens
  • 82b4314 refactor(textarea): migrate to design tokens
  • c2d4c6f refactor(tabs): migrate to design tokens
  • 45e37b0 refactor(table): migrate to design tokens
  • 1ac0bf1 refactor(spinner): migrate to design tokens
  • fab03a0 refactor(skeleton): migrate to design tokens
  • bc33ede refactor(sidebar): migrate to design tokens
  • 6ecc209 refactor(select): migrate to design tokens
  • 9b60d23 refactor(schedule): migrate to design tokens
  • 6cf5e4a refactor(radio): migrate to design tokens
  • eddfe6c refactor(popover): migrate to design tokens
  • 0eb913f refactor(pagination): migrate to design tokens
  • 82c6256 refactor(modal): migrate to design tokens
  • fc7fa91 refactor(message): migrate to design tokens
  • c474729 refactor(input): migrate to design tokens
  • 520d998 refactor(formfield): migrate to design tokens
  • 3344be9 refactor(emptystate): migrate to design tokens
  • d6ebd3a refactor(dropdownmenu): migrate to design tokens
  • edd08c7 refactor(drawer): migrate to design tokens
  • 08af54a refactor(divider): migrate to design tokens
  • 0b7bdfe refactor(dateinput): migrate to design tokens
  • 1e30611 docs: fix Task 9 plan gap — add missing border-[#374151] row (matches pattern used in every other task)
  • bcc87a0 refactor(checkbox): migrate to design tokens
  • 3de47aa refactor(card): migrate to design tokens
  • bf576cc refactor(calendar): migrate to design tokens
  • 4ce8855 refactor(button): migrate to design tokens
  • 49bba5d refactor(breadcrumb): migrate to design tokens
  • 28292fc refactor(badge): migrate to design tokens
  • 20e47e3 refactor(avatar): migrate to design tokens
  • 1b00232 refactor(alert): migrate to design tokens
  • b65f3a3 refactor(accordion): migrate to design tokens
  • 35d623b docs: add implementation plan for token migration, amend spec gaps
  • dadb52c docs: add design spec for existing-components token migration
  • 4769deb docs: add implementation plan for token migration, amend spec gaps
  • ca0a16c docs: add design spec for existing-components token migration
  • 7c48346 fix(Checkbox): apply error border to card wrapper when unchecked; fix(barrel): export missing DS union types
  • 22c6d8f fix(example): update Pagination and Badge usage for renamed props; chore: add major changeset for DS fidelity fixes
  • f5d78b5 feat(Pagination): rename currentPage/totalPages/onPageChange to page/total/onChange, add pill, spread HTML attributes
  • eec5b50 feat(Tooltip): add tone (dark/light/brand) and rich title+content layout
  • 054c180 feat(Spinner): numeric size, thickness override, default label; add Dots component
  • 8b4a0c4 feat(Badge): DS-aligned variant set, dot indicator, HTML attribute spread
  • dbd4543 feat(Tabs): make content optional, add icon, count, enclosed variant, size, block
  • d7a8121 fix(Modal): default align to start and scope auto size cap to sm:
  • 1d68e09 feat(Modal): add present (responsive sheet), tone badge, icon, align
  • f77e35e fix(Avatar): only clone size/ring props onto actual Avatar children in AvatarGroup
  • 5ed1301 feat(Avatar): add size 2xl, boolean status, optional alt, shape, icon fallback, ring; AvatarGroup takes children
  • e41afc7 docs(Select): clarify onChange is a value callback, not a native change event
  • 0c0b988 fix(Radio): apply error border to card wrapper when unchecked
  • 943fff7 feat(Radio): add tone, card variant, error state, size lg
  • 674d5b0 feat(Checkbox): add tone, card variant, error state, size lg
  • 2c25b1a fix(Button): dim loading anchor visually since :disabled never matches
  • ced2324 feat(Button): add DS variants, xl size, pill, block, polymorphic as prop
  • 5445ae5 docs: add implementation plan for existing-component DS fidelity fixes
  • 0f2c1f3 docs: add design spec for existing-component DS fidelity fixes
  • bb1345c docs: add implementation plan for existing-component DS fidelity fixes
  • 7a8bf62 docs: add design spec for existing-component DS fidelity fixes
  • c7c4adc feat: export telehealth components and add changeset
  • 26cfa3d feat: add VideoCall component
  • 9120c11 feat: add Message component and chat helpers
  • 7e57581 feat: add Schedule component
  • 2bcdcfe fix: correct aria-describedby condition in DateInput
  • 510d413 fix: resolve DateInput lint error and add missing ARIA attributes
  • 1c6c8d3 feat: add DateInput component
  • 01d328e feat: add Calendar component
  • 6f8191e docs: add implementation plan for telehealth components
  • 1cb1b04 docs: add design spec for telehealth components (Calendar, DateInput, Schedule, Message, VideoCall)
  • decea63 fix(tokens): correct design tokens against Starbem Design System reference
  • 139ffb9 docs: add implementation plan for telehealth components
  • 0e5f9ad docs: add design spec for telehealth components (Calendar, DateInput, Schedule, Message, VideoCall)
  • 94472b0 fix(tokens): correct design tokens against Starbem Design System reference
  • 5fb34a8 fix(example): migrate from react-router-dom to react-router v8
  • 2e123d6 fix: bump postcss and brace-expansion to patched versions
  • 5efedb7 feat(example): wire Icon component into sidebar, topbar, and page actions

Full diff

📦 Install

pnpm add @starbemtech/react-starsystem@1.0.0

🚀 Basic usage

import { Button } from '@starbemtech/react-starsystem'
import '@starbemtech/react-starsystem/style.css'

🎨 Design Tokens

import { colors, fontFamily, fontSize, spacing, borderRadius } from '@starbemtech/react-starsystem'

// colors
colors.primary.base   // #FF5100
colors.secondary.base // #7F56D9
colors.terciary.base  // #ED2E98
Assets 2
Loading