Skip to content
Sisyphos UI

Changelog

Every release of @sisyphos-ui/react and its sub-packages. Follow along via RSS.

RSS
Latest release
v1.0.0· Multi-framework v1 — React, Vue, and Angular ship from one design system
View details
v1.0.0MajorCurrent

Multi-framework v1 — React, Vue, and Angular ship from one design system

Sisyphos UI grows from a React-only kit into a multi-framework design system. Three brand-new umbrella packages ship 33 components for React 18+, Vue 3+, and Angular 18+ — same class names, same ARIA, same CSS tokens, same keyboard behavior across all three. The 35 per-component v0.5 packages are deprecated; the new umbrellas are the install path going forward.

Three framework umbrellas

@sisyphos-ui/react@1.0.0, @sisyphos-ui/vue@1.0.0, and @sisyphos-ui/angular@1.0.0 land in one release. Pick the binding that matches your stack — pnpm add @sisyphos-ui/<framework> + import the bundled stylesheet once, that's the whole install.

Identical contract everywhere

Same class names (sisyphos-button, sisyphos-dialog, …), same ARIA semantics, same WAI-ARIA keyboard support, same CSS variables. Verified by 1,038 tests across the three frameworks. Migrate teams without re-learning anything.

Theming stays runtime

applyTheme() lives in @sisyphos-ui/core@1.0.0 — framework-agnostic, called once, flips every token across React + Vue + Angular at the same time. No ThemeProvider, no per-binding setup.

Multi-framework live preview

Every component page on sisyphosui.com gets a framework picker that swaps the live demo between React, Vue 3, and Angular 18 in place — all rendered inline in the same page. See the component you're documenting render in three frameworks side-by-side, with the same DOM under the hood.

Added

  • @sisyphos-ui/react@1.0.0 — unified umbrella replacing the 33 per-component packages and the @sisyphos-ui/ui aggregator.
  • @sisyphos-ui/vue@1.0.0 — Vue 3 binding with <script setup> + defineProps/defineEmits APIs, full v-model:* / v-model two-way bindings.
  • @sisyphos-ui/angular@1.0.0 — Angular 18 standalone components binding with signals + OnPush change detection, ng-packagr Partial-Ivy publish format.
  • @sisyphos-ui/core@1.0.0 — design tokens + applyTheme + dark-mode helpers, framework-agnostic, the foundation every umbrella builds on.
  • Portal + useFocusTrap + useScrollLock primitives publicly re-exported from @sisyphos-ui/react@1.0.2 for advanced consumers composing custom overlays.

Deprecated

  • @sisyphos-ui/ui (umbrella) and the 33 per-component @sisyphos-ui/<name> packages are now deprecated on npm. They keep working at their last 0.5.x version but new projects should adopt the v1.0 framework umbrellas.

Install

npm
$ pnpm add @sisyphos-ui/react@1.0.0
v0.5.0Minor

Table truncation, mask caret lock, default times, real tristate

Eight component primitives pick up the polish features production apps usually have to hand-roll. Table learns column truncation, a delayed loading skeleton, and per-row hooks. Input locks the caret past a mask's fixed prefix. DatePicker remembers a default time on first pick. Checkbox finally has a real tristate. Core's Escape handling is now stack-aware so nested overlays close one layer at a time. NumberInput stops shipping a Turkish locale to international consumers.

Table — truncate, loading delay, row hooks

`<TableColumn>` gains `truncate` (CSS ellipsis with native `title` fallback when overflowing). `loadingDelay` smooths the skeleton flicker on fast loads. `rowClassName(row, index)` and a first-class `onRowDoubleClick` round out per-row hooks.

Input — mask prefix caret lock

On masks with a fixed prefix (e.g. `+90 (5` in `tel-tr`) the caret can no longer wander into the literal area. Real text selections (Ctrl+A) are preserved so select-all-then-replace still works. New helper: `getMaskPrefixLength(maskSpec)`.

Checkbox — real tristate via `indeterminate`

Sets the DOM `indeterminate` flag and exposes `aria-checked="mixed"` so screen readers announce the mixed state. Activating an indeterminate checkbox calls `onChange(true)` — the standard select-all promotion that hierarchical pickers need.

Core — stack-aware `useEscapeKey`

Nested overlays now close one layer at a time. Open a Popover inside a Dialog, press Escape — only the Popover dismisses. The fix is internal; every overlay package picks it up automatically.

Added

  • Table — TableColumn.truncate, Table.loadingDelay, Table.rowClassName(row, index), Table.onRowDoubleClick(row, index). Skeleton placeholder widths now vary across columns.
  • Input — caret lock past a mask's fixed prefix on focus, click, and key-up. New getMaskPrefixLength export.
  • DatePicker — defaultHour, defaultMinute, plus the range-aware defaultStartHour / defaultStartMinute / defaultEndHour / defaultEndMinute. Defaults only apply on first pick; user-edited times survive subsequent re-picks.
  • Checkbox — indeterminate prop with synced DOM flag and aria-checked="mixed". Tristate visual matches the configured color token across primary / success / warning / error / info.
  • FileUpload — directory enables folder selection via webkitdirectory (preserves webkitRelativePath). onBeforeRemove(file) returns a boolean (or Promise) to cancel removal.
  • TreeSelect — auto-expand matched ancestors while a search term is active; clearing the search restores manual expand/collapse state.
  • Core — useEscapeKey is stack-aware. Only the topmost handler fires.

Changed

  • NumberInput — locale prop now defaults to the runtime locale instead of tr-TR. Pass an explicit BCP 47 tag (e.g. tr-TR, de-DE) to lock the format. Existing call sites that pass locale explicitly keep their behavior.

Install

npmGitHub release
$ pnpm add @sisyphos-ui/react@0.5.0
v0.4.0Minor

Kbd, Command, ContextMenu — and a Firefox spinner fix

Three new packages round out the keyboard / menu story: a Kbd chip for rendering shortcuts, a ContextMenu anchored at the pointer, and a Command palette with substring filtering. Dialog picks up an auto-rendered close button, Toast gains `loading` + `promise`, Table adds row-click selection and a context-menu hook, and Spinner moves to SVG to kill Firefox's antialiasing seam on small sizes.

New <Kbd>

Single keys or shortcuts (`cmd+k`, `mod+s`). Platform-aware — `mod` resolves to ⌘ on macOS and ⌃ elsewhere — with built-in glyphs for modifiers, arrows, Enter/Tab/Esc.

New <ContextMenu>

Right-click menu anchored at the pointer. Portal-mounted, viewport-clamped, keyboard navigable. Pairs with the new Table `onRowContextMenu` prop.

New <Command>

Compound command palette (Input / List / Group / Item / Empty / Separator). Case-insensitive substring filter; groups auto-hide when all items filter out. Drop it inside a Dialog for the classic ⌘K menu.

Toast `loading` + `promise`

`toast.promise(p, { loading, success, error })` morphs a loading toast into success or error when the promise settles. Action and close-button alignment also fixed.

Added

  • New package — @sisyphos-ui/kbd: Kbd component with platform-aware mod, built-in alias glyphs, outlined + soft variants.
  • New package — @sisyphos-ui/context-menu: right-click menu anchored at the pointer with same item shape as DropdownMenu.
  • New package — @sisyphos-ui/command: compound command palette with filtering, groups, keyboard nav, combobox/listbox a11y.
  • Dialog — showCloseButton + closeButtonLabel props auto-render the close button in the top-right.
  • Toast — toast.loading(title) and toast.promise(promise, { loading, success, error }). Shared id morphs loading → success/error in place.
  • Table — rowSelectionMode: "checkbox" | "click" | "doubleClick" and onRowContextMenu(event, row, index).

Changed

  • Spinner — rewritten as inline SVG. Firefox no longer shows the antialiasing seam on border-radius: 50% borders at small sizes. Public API unchanged; thickness now drives stroke-width via --sisyphos-spinner-thickness.
  • Toast — action and close button center vertically against the full toast body. Fixes "Undo" floating to the top line when a description was present.
  • Accordion — trigger vertical padding reduced from $spacing-md (16px) to $spacing-s (10px).
  • Input — startIcon / endIcon wrappers clamp direct <svg> / <img> children to 1.15em so 24×24 Lucide defaults no longer blow out xs/sm inputs.
  • Button — SCSS migrated from deprecated map-get() to map.get().

Install

npmGitHub release
$ pnpm add @sisyphos-ui/react@0.4.0
v0.3.0Minor

Input masks, data-grid Table, submenus

Twenty-two packages land a feature-and-polish pass. Input gains masks, Table becomes a real data-grid, DropdownMenu grows submenus, and a full PageSkeleton joins the loading-state toolkit.

Input masks

New mask prop plus mask.ts helpers. Expanded variants, refreshed styles, broader test coverage.

Data-grid Table

Sorting, row selection, loading skeletons, empty states, refined pagination.

DropdownMenu submenus

Nested menus with improved keyboard navigation and consistent styling.

PageSkeleton

New full-page loading primitive alongside richer Skeleton building blocks.

Added

  • Input — mask prop and mask.ts helpers for phone, date, currency, and custom formats.
  • Table — sorting, row selection, loading skeletons, empty-state integration.
  • Skeleton — new PageSkeleton component and extra primitives for common layouts.
  • DropdownMenu — submenu support with full keyboard navigation.

Changed

  • Input — expanded variants and refreshed visual styles.
  • Table — refined pagination and broader test coverage.
  • DatePicker — UX and styling refinements, better edge-case handling.
  • Checkbox, Radio, RadioGroup — accessibility polish and consistent styling.
  • FileUpload — drag-and-drop and file-type filtering polish.
  • Slider, Carousel, Tabs, Tooltip, Popover, Toast, EmptyState, Alert, Accordion, Card, Dialog, Spinner, Select, TreeSelect — behavioural fixes and style refinements.
  • ui — bundle-css.mjs build tweaks for aggregated stylesheet output.
  • eslint-config — ruleset tuning.

Install

npmGitHub release
$ pnpm add @sisyphos-ui/react@0.3.0
v0.2.0Minor

Initial public release

Sisyphos UI goes public. A headless-flavored, accessible React design system built on CSS variables and SCSS tokens — 30+ components as tree-shakable packages plus an umbrella.

30+ components

Every component ships as an independent, tree-shakable package. The @sisyphos-ui/react umbrella bundles them all.

Accessible by default

WAI-ARIA compliant, keyboard operable, focus-trap and scroll-lock wired into every overlay.

Themeable at runtime

applyTheme(), setThemeMode(), and CSS variables under --sisyphos-*. Works with any styling stack.

Strict TypeScript

Compound APIs, controlled + uncontrolled modes, forwardRef + displayName, full prop JSDoc.

Added

  • Initial public release of the Sisyphos UI design system.
  • 30+ accessible components: Accordion, Alert, Avatar, Breadcrumb, Button, Card, Carousel, Checkbox, Chip, DatePicker, Dialog, DropdownMenu, EmptyState, FileUpload, Input, NumberInput, Popover, Radio, Select, Skeleton, Slider, Spinner, Switch, Table, Tabs, Textarea, Toast, Tooltip, TreeSelect, and more.
  • Runtime theming primitives — applyTheme(), setThemeMode(), and the full CSS variable system under --sisyphos-*.
  • Compound component APIs for Dialog, Tabs, Accordion, Card, Radio, and others.
  • Controlled and uncontrolled modes on every interactive component.
  • Strict TypeScript types with forwardRef, displayName, and full prop JSDoc.

Install

npmGitHub release
$ pnpm add @sisyphos-ui/react@0.2.0

Looking for a specific component’s history? Every @sisyphos-ui/* package ships its own CHANGELOG.md on npm. Or watch the GitHub repository for release notifications.