@vibe-labs/design-interactions

Interaction, cursor, scroll, and pointer utility classes for the Vibe Design System.

Usage

@import "@vibe-labs/design-interactions";

Contents

All classes generated into @layer vibe.utilities via the build script.

Cursor

.cursor-auto · .cursor-default · .cursor-pointer · .cursor-grab · .cursor-grabbing · .cursor-move · .cursor-not-allowed · .cursor-wait · .cursor-text · .cursor-crosshair · .cursor-col-resize · .cursor-row-resize · .cursor-none

User Select

.select-none · .select-text · .select-all · .select-auto

Pointer Events

.pointer-events-none · .pointer-events-auto

Touch Action

.touch-auto · .touch-none · .touch-pan-x · .touch-pan-y · .touch-manipulation

Scroll Behavior

.scroll-auto · .scroll-smooth

Scroll Snap

• Container: .snap-x · .snap-y · .snap-both · .snap-none
• Strictness: .snap-mandatory · .snap-proximity (sets --snap-strictness)
• Child alignment: .snap-start · .snap-center · .snap-end · .snap-align-none
• Stop: .snap-always · .snap-normal

Overscroll Behavior

• .overscroll-auto · .overscroll-contain · .overscroll-none
• .overscroll-x-auto · .overscroll-x-contain · .overscroll-x-none
• .overscroll-y-auto · .overscroll-y-contain · .overscroll-y-none

Resize

.resize-none · .resize · .resize-x · .resize-y

Will-Change

.will-change-auto · .will-change-transform · .will-change-opacity · .will-change-scroll · .will-change-contents

Dist Structure

File	Description
index.css	Barrel — imports generated utilities
interactions.css	Core classes
interactions.g.css	Generated utility classes

Dependencies

None — this package is self-contained.

Build

npm run build