Skip to content

v0.1.0

Choose a tag to compare

@JulioAugustoS JulioAugustoS released this 28 Jul 14:14

@starbemtech/react-starsystem@0.1.0

Minor Changes

  • 565f3cc: Add Tabs component (ID-3188) built on @radix-ui/react-tabs, with line (underline) and filled (pill) variants, horizontal/vertical orientation, items (label + content), controlled (value/onChange) and uncontrolled (defaultValue) modes, disabled tabs, and full keyboard navigation (arrows).

    New runtime dependency: @radix-ui/react-tabs.

  • 02f40e3: Add Divider/Separator component (ID-3197) built on @radix-ui/react-separator, with horizontal/vertical orientation, solid/dashed variants, and a centered label (e.g. "ou") for the horizontal case.

    New runtime dependency: @radix-ui/react-separator.

  • 6bd27ae: Add Popover component (ID-3185) built on @radix-ui/react-popover, with configurable trigger, content (slot), side, align, and onOpenChange. Supports rich content (forms, lists, etc.), automatic focus trap, and closes on Escape or an outside click.

    New runtime dependency: @radix-ui/react-popover.

  • 9c703fd: Add DropdownMenu component (ID-3186) built on @radix-ui/react-dropdown-menu, with item/separator/label/checkbox-item/sub-menu entry types, icon and badge support per item, configurable trigger/align, an onSelect callback, and full keyboard navigation (arrows, Enter, Escape).

    New runtime dependency: @radix-ui/react-dropdown-menu.

  • 848d863: Add Table component (ID-3193), with typed columns (custom render, sortable), client-side sorting, optional row selection (checkbox column, controlled or uncontrolled), loading state with skeleton rows, an integrated empty state (default or custom), horizontal scroll on small viewports, and an optional built-in Pagination footer.

    Checkbox gains an aria-label prop for cases without a visible label (used by Table's selection checkboxes).

  • ce159af: Add Tooltip component (ID-3184) built on @radix-ui/react-tooltip, with top/bottom/left/right sides, configurable delay, a disabled escape hatch, and support for rich (non-text) content.

    New runtime dependency: @radix-ui/react-tooltip.

  • d1bfd77: Add Sidebar and NavItem components (ID-3190), with 1-level nested sub-menus (collapsible), a collapsed compact mode (icons only, label shown via Tooltip on hover), header/footer slots, and aria-current="page" on the active item.

  • 74733f5: Add generic Card component (ID-3194), composable via Card.Header/Card.Body/Card.Footer, with default/outlined/elevated variants, padding sizes, an accessible clickable mode (onClick, keyboard-operable, focus ring), and a loading state that swaps content for an internal skeleton.

  • fca9367: Add Toast/Notification component (ID-3178) built on @radix-ui/react-toast, with a ToastProvider + imperative toast.success/error/warning/info ToastManager API, configurable position, stacking, auto-dismiss with optional progress bar, and per-variant aria-live.

    New runtime dependency: @radix-ui/react-toast.

  • 61c208b: Add TopBar/Header component (ID-3189), with start/center/end slots, sticky (with scroll shadow) and bordered props, and a responsive layout (title hidden/truncated on narrow screens, actions never shrink).

  • cd64344: Add Drawer/Sheet component (ID-3183) built on @radix-ui/react-dialog, with left/right/bottom positions, sm/md/lg/full sizes, optional title, onClose callback, focus trap, Escape-to-close, and a dark overlay.

  • b37fd2c: Add Alert/Banner component (ID-3177) with info/success/warning/error variants, optional title/description/icon/action, and dismissible state with exit transition and accessible close button.

  • 5b53723: Add Breadcrumb component (ID-3191), with items (label + href), a customizable separator, automatic ellipsis truncation via maxItems, and aria-current="page" on the last item.

  • 1a4045e: Add Pagination component (ID-3192), with currentPage/totalPages/onPageChange, configurable siblingCount, optional showFirstLast controls, automatic ellipsis for long page ranges, aria-current="page" on the active page, and a compact prev/next + indicator layout for mobile.

  • 78e47b6: Add Modal/Dialog component (ID-3182) built on @radix-ui/react-dialog, with sm/md/lg/xl/full sizes, optional title/description/footer slot, onClose callback, closeOnOverlayClick toggle, automatic focus trap, Escape-to-close, and internal scroll for overflowing content.

    New runtime dependency: @radix-ui/react-dialog.

  • f319098: Add Avatar and AvatarGroup components (ID-3195), with xs/sm/md/lg/xl sizes, automatic fallback chain (image → initials from name → generic icon), an optional online/offline/away status indicator, and AvatarGroup for a horizontal stack with +N overflow. alt is required by the type whenever src is provided.

  • 06be1ab: Add Accordion component (ID-3196) built on @radix-ui/react-accordion, with single/multiple types, defaultValue, per-item disabled, keyboard navigation, aria-expanded/aria-controls, and a smooth CSS-driven expand/collapse animation.

  • 3f9150b: Add Badge/Tag component (ID-3176) with default/success/warning/error/info variants, sm/md sizes, optional prefix icon, and removable state with accessible remove button.


🔖 Commits

  • 773880c spec(input): add P3 Input Field spec and tasks (ID-3169)
  • 0c29095 docs(button): Storybook stories — all variants, sizes, states (ID-3168)
  • b5349f1 test(button): comprehensive Button tests — variants, states, icons (ID-3168)
  • cfbc940 feat(button): implement Button component with Figma-verified tokens (ID-3168)
  • dc7cac1 🚀 (publish.yml): update GitHub Actions workflow to trigger on version tags for better release management 📝 (STATE.md): update project phase to P2 and mark tasks as completed for accurate project tracking
  • e8c837f fix(tokens): rename --font-weight-extrabold, add elevationSecondary tests, widen SwatchRow type
  • 1485546 feat(tokens): barrel exports for all token packages + Storybook token showcase
  • ba9ccdc fix(tokens): add missing borderRadius xl/2xl keys and tests
  • 18ee8b0 feat(tokens): add spacing, border-radius, and elevation shadow tokens
  • 0e55d76 fix(tokens): remove premature colors re-export from index.ts; use toBeDefined for placeholder weights
  • 892b2fc feat(tokens): add typography tokens — font family, size, weight, line-height
  • bb67dab feat(tokens): add color tokens — Primary, Secondary, Terciary, Neutral palettes
  • 444d1c9 docs(specs): update P1 spec+tasks for 3-palette structure (Primary/Secondary/Terciary) per Figma
  • 12455be docs(tokens): document Figma-extracted values for P1
  • 58a7819 docs(specs): add P1 design tokens feature spec and tasks
  • c6f2f81 docs(specs): align ROADMAP.md phases with actual Jira numbering
  • c0fba32 ✨ (docs): add comprehensive architecture, conventions, integrations, concerns, and tech stack documentation to improve project clarity and guidance for developers.
  • 6b7e7b3 create claude.md and docs
  • 366bdd9 fix: add vitest, wire eslint-config-prettier, fix publish workflow, harden assetFileNames
  • 8f40a59 docs: fix typo tales→stories in CLAUDE.md
  • 749c2c1 chore: finalize P0 scaffold — ready for component authoring
  • 56ca4be chore: add GitHub Actions CI + changeset publish workflow
  • 9f1e1b6 chore: add changesets for semantic versioning
  • c37744d chore: add ESLint 9 flat config + Prettier
  • fd397a9 chore: add Storybook 8 + placeholder Button component
  • 37f5212 fix: rename CSS output from index.css to style.css
  • 0f21e8a chore: add Tailwind CSS v4 with @theme token placeholder
  • 90ce53c chore: configure vite lib mode + TypeScript
  • a4f2f9d chore: initialize @starbemtech/react-starsystem package
  • e9c30c7 chore: initial empty commit

Full history: this is the first published release — see CHANGELOG.md for the complete list of changes.


📦 Install

pnpm add @starbemtech/react-starsystem@0.1.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 // #8660EC
colors.terciary.base  // #ED2E98