marigold-ui/marigold @marigold/components@17.5.0

on GitHub

Minor Changes

• 727163c: feat([DST-1134]): add <RangeCalendar> component (alpha)

  Adds a new <RangeCalendar> for selecting a contiguous or non-contiguous date range, built on react-aria's <RangeCalendar> with Marigold conventions (disabled, readOnly, error, dateUnavailable, allowsNonContiguousRanges). Supports up to three side-by-side months via visibleDuration, stacking vertically below the sm breakpoint; the same responsive stacking now applies to multi-month <Calendar> for parity. description and errorMessage route through <FieldBase> so the help/error UI matches the rest of the form-component family (TriangleAlert icon + HelpText container). Ships as an alpha component with a stub docs page under the form section.

  DST-1134

• 4742e8e: feat([DST-901]): styleProps for width, maxWidth, height, space, spaceX, spaceY, pr, pl, pt, pb now accept both numeric scale values (4) and their string equivalents ("4"). The public types are now declarative (Scale | Fraction | WidthKeyword, etc.) instead of being derived from the internal class-name maps.

  Components that previously resolved width, maxWidth, and height via class-name lookup (Form, Calendar, legacy Table column header / select-all cell, Slider, Scrollable, Switch, Grid) now resolve them through CSS custom properties (createWidthVar / createHeightVar) targeting --width, --max-width, --height. Those variables — along with --container-width and --field-width already used by FieldBase — are registered as non-inheriting (@property … inherits: false) in the RUI theme so they cannot leak into descendants.

  createWidthVar gained support for the previously missing keywords (svh, lvh, dvh, px, container), and a new createHeightVar helper was added. Both share a common factory and a base keyword set, so they remain trivially in sync.

  The runtime class-name maps width, maxWidth, height, gapSpace, paddingSpace, paddingSpaceX, paddingSpaceY, paddingRight, paddingLeft, paddingTop, paddingBottom are no longer exported from @marigold/system. These were internal utilities consumed only by @marigold/components. Use the prop types (WidthProp, HeightProp, …) and the CSS-var helpers (createWidthVar, createHeightVar, createSpacingVar) instead. The corresponding TypeScript prop types are unchanged.

• 6587493: refa([DST-1298]): Refactor Divider component: API, styling, and docs

  We fixed the vertical orientation of the divider, which previously didn't work.
  Added new Divider stories and updated the Divider docs.

• e33a1e7: feat(DST-1322): add current prop to Sidebar.Nav for automatic active item detection

  Sidebar.Nav now accepts a current prop that resolves the active leaf automatically — pass the current pathname (string) for smart segment-aware matching, or a predicate (href, key) => boolean for full control. Removes the per-item active={pathname === '/...'} boilerplate. The per-item active prop on Sidebar.Item still works as a local override.

• 2ff7bda: feat(DST-1098): persistent idle sort indicator on sortable columns

  Table.Column with allowsSorting now shows a Lucide arrow-down-up icon when the column is sortable but not currently the active sort column. The active ascending/descending icons (SortAscending / SortDescending) are unchanged.

Patch Changes

• 3c6a943: fix([DST-1410]): restore RangeCalendar build by using createWidthVar for the width prop. The component still imported the width runtime map from @marigold/system, which DST-901 removed when it migrated dimension props to CSS variables. This broke main for everyone — typecheck, unit tests, and Storybook tests all failed on every open PR. Apply the same migration pattern Calendar already uses: w-(--width) className plus style={createWidthVar('width', width)}.

  DST-1410

• b7c132d: fix(DST-1354): restore collapsing Table.EditableCell edit trigger

  The overlay/ring affordance introduced in #5250 (DST-1275) did not read as editable in user testing: sighted users did not associate the hover ring with inline editing, and there was no discoverable trigger for keyboard or touch. This change reverts that approach and restores the explicit pencil edit button.

  The trigger collapses to zero layout space at rest (w-0 overflow-hidden) and expands on row hover or keyboard focus, so static layout remains clean while the affordance is discoverable the moment the user interacts with the row. When expanded, the wrapper switches to overflow-visible so the button's focus outline is not clipped. The cell itself stays clickable as a touch target. Enabled editable cells always truncate their content to stay aligned with column headers and match the single-line editing controls; disabled cells behave like a regular Table.Cell.

• f16b887: fix(DST-1352): use correct outline for focus + error state in compound fields

• 1cac70d: docs: improve AutoTypeTable prop rendering

  Centralizes the display of design-system aliases in the component docs'
  prop tables. Props whose types reference aliases from @marigold/system
  or @marigold/types (e.g. SpacingTokens, Scale, WidthProp,
  NonZeroPercentage) now render with a meaningful summary in the main
  cell and the full list of resolvable literal values on row expand —
  instead of a wall of literals in the cell and a redundant alias name on
  expand.

  Before:

  • Cell: SpacingTokens<Tokens> (a fabricated generic, inconsistent across components)

  • Expand: SpacingTokens | Scale | undefined (same alias names, no new info)

    After:

  • Cell: SpacingTokens | Scale (accurate, derived from the real type)

  • Expand: "96" | "80" | ... | "tight" | "related" | 0 (every concrete value)

    Under the hood this replaces 27 per-prop @remarks \TypeName`JSDoc overrides with a single fumadocs-typescript transform in the docs site, so future components pick up the same behavior automatically. A@remarks` tag on a prop still wins as an escape hatch.

    Multiselect.width and ComboBox.width now use WidthProp['width']
    directly instead of FieldBaseProps<'label'>['width'] — structurally
    identical, no runtime change.

• 5744bbf: feat([DST-1396]): mobile-optimized pagination layout

  Pagination now hides the numbered page buttons on small viewports (max-sm) and spreads the previous/next navigation buttons across the full width using justify-between. This produces a cleaner, touch-friendly pagination on mobile while preserving the full layout on larger screens.

• c2a1c72: fix: apply alignX from Table.Column to first column cells

  TableCellContent used a truthy check on columnIndex, causing it to skip the alignX lookup when columnIndex was 0 (first column). Replaced with a nullish check so all columns correctly inherit their alignment.

• de34b15: chore(deps): update react-aria-components, @react-aria/*, @react-stately/*, @react-types/*, and @internationalized/* packages to their latest versions.

• 04111ca: fix(DST-1355): widen variant and size prop types on Loader and ProgressCircle to accept arbitrary strings via | (string & {}). Matches the pattern already used by Button, Panel, and other components, and lets consumer themes register their own variant/size tokens without TypeScript errors while preserving IDE autocomplete for the built-in RUI values.

• Updated dependencies [727163c]

• Updated dependencies [4742e8e]

• Updated dependencies [de34b15]

  • @marigold/system@17.5.0