improvements

[gfazioli]

• feat(SelectStepper): add orientation, swipe, imperative API, gradient, size and docs 🚀
• feat(SelectStepper): 🎨 add size, border, gradient, renderOption and update docs
• 🎉 feat(SelectStepper): add viewHeight prop for vertical orientation
• refactor: update SelectStepper navigation, swipe, and reset behavior — 🚀
• ✨ feat(select-stepper): add responsive props support

[Copilot]

Pull request overview

This PR significantly extends the SelectStepper component API and UX to support vertical orientation, swipe navigation, an imperative control API, responsive props, size/gradient styling, and expanded documentation/tests across the package and docs site.

Changes:

• Added responsive viewWidth/viewHeight/size/orientation support via generated CSS variables and breakpoint media queries.
• Implemented vertical orientation (layout + icons + keyboard mapping), swipe gestures (pointer events), and an imperative controlRef API.
• Expanded Jest test coverage and documentation/demos for the new features.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
package/src/index.ts	Exports additional public types and re-exports Mantine types used by the public API.
package/src/SelectStepperMediaVariables.tsx	New helper to generate responsive CSS variables via Mantine breakpoints/InlineStyles.
package/src/SelectStepper.tsx	Core feature work: orientation, swipe, imperative API, callbacks, responsive sizing, and a11y updates.
package/src/SelectStepper.test.tsx	Large expansion of tests for navigation, looping, swipe, orientation, a11y, and controlRef behavior.
package/src/SelectStepper.story.tsx	Adds new stories demonstrating vertical, sizes, gradient, imperative API, callbacks, and swipe.
package/src/SelectStepper.module.css	Adds vertical-mode layout rules and new CSS variables for height and touch behavior.
docs/styles-api/SelectStepper.styles-api.ts	Documents the new --select-stepper-view-height variable.
docs/docs.mdx	Adds/reshuffles docs sections for animation callbacks, keyboard navigation, swipe, sizes, responsive props, vertical mode, gradient, and imperative API.
docs/demos/index.ts	Registers new demos (emptyValue/gradient/imperative/responsive/sizes/swipeable/vertical).
docs/demos/SelectStepper.demo.vertical.tsx	New demo for vertical orientation.
docs/demos/SelectStepper.demo.swipeable.tsx	New demo for swipe gestures.
docs/demos/SelectStepper.demo.stylesApi.tsx	Fixes package import in code snippet.
docs/demos/SelectStepper.demo.size.tsx	New demo for the size prop.
docs/demos/SelectStepper.demo.responsive.tsx	New demo for responsive props (viewport + orientation).
docs/demos/SelectStepper.demo.inForm.tsx	Updates the “in form” demo content to showcase different usage.
docs/demos/SelectStepper.demo.imperative.tsx	New demo for controlRef imperative methods.
docs/demos/SelectStepper.demo.gradient.tsx	New demo for gradient variant.
docs/demos/SelectStepper.demo.emptyValue.tsx	New demo for emptyValue.
docs/demos/SelectStepper.demo.configurator.tsx	Adds configurator controls for variant/orientation/size/viewHeight.
README.md	Updates README with feature list and imperative API example; formatting tweaks.
CLAUDE.md	Adds repo workflow/architecture guidance (commands, structure, key behaviors).

Comments suppressed due to low confidence (2)

package/src/SelectStepper.tsx:67

• A new CSS variable --select-stepper-action-size is introduced (set in SelectStepperMediaVariables and consumed via --ai-size on the ActionIcons), but it is not included in the exported SelectStepperCssVariables type. This makes the public Styles API types incomplete/inaccurate.

Add --select-stepper-action-size to the root union in SelectStepperCssVariables (or rename/remove the variable if it is intended to be private).

export type SelectStepperCssVariables = {
  root:
    | '--select-stepper-view-width'
    | '--select-stepper-view-height'
    | '--select-stepper-animation-duration'
    | '--select-stepper-animation-timing-function'
    | '--select-stepper-radius';
  wrapper: '--select-stepper-margin-top' | '--select-stepper-margin-bottom';

docs/styles-api/SelectStepper.styles-api.ts:27

• --select-stepper-action-size is now an actual runtime CSS variable (used to drive ActionIcon sizing), but it is not documented in the Styles API vars.root list. This leaves consumers without guidance for overriding the variable.

Add --select-stepper-action-size to SelectStepperStylesApi.vars.root with a short description (e.g. controls navigation button size).

  vars: {
    root: {
      '--select-stepper-view-width': 'Controls the width of the view area',
      '--select-stepper-view-height':
        'Controls the height of the view area in vertical orientation',
      '--select-stepper-animation-duration': 'Controls the duration of scroll animations',
      '--select-stepper-animation-timing-function':
        'Controls the timing function for scroll animations',
      '--select-stepper-radius': 'Controls the border radius',
    },

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.