feat: ScrollArea component (#3591)

* chore: implement scroll-area

* chore: add slash command

* chore: bump deps

* feat(scroll-area): enhance scrollbar functionality and context management

* fix: build

* chore: update deps

* chore: update style

* chore: update examples

* chore: document types

Author: segunadebayo

.claude/commands/zag.md

@@ -0,0 +1,16 @@
+---
+description: Implement a Zag.js component in Ark UI
+---
+
+## Steps
+
+- Make sure the component is installed
+- Install it for every framework if it’s not
+- Check the `[component]-types.d.ts` file to understand it’s api and anatomy
+- Implement the component similar to the `[framework]/components/avatar/src`
+- Styling a component happens in `.storybook/styles` (as CSS) so we can share across frameworks
+  - No Tailwind
+  - No style prop
+- Create an example folder and agree with me on the list of examples before working on it
+- After examples are created, create or update the stories file based on the framework
+- Repeat for all frameworks (please ask before moving on to the next framework)

.storybook/styles.css

@@ -25,6 +25,7 @@
 @import url('./styles/qr-code.css');
 @import url('./styles/radio-group.css');
 @import url('./styles/segment-group.css');
+@import url('./styles/scroll-area.css');
 @import url('./styles/select.css');
 @import url('./styles/signature-pad.css');
 @import url('./styles/slider.css');
@@ -47,7 +48,10 @@ body {
   min-height: 100dvh;
 }
 
-* {
+*,
+*::before,
+*::after {
+  margin: 0;
   box-sizing: border-box;
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',

.storybook/styles/listbox.css

@@ -12,7 +12,6 @@
 }
 
 [data-scope='listbox'][data-part='content'] {
-  padding: 0px;
   list-style: none;
   width: 400px;
   margin: 0;
@@ -48,7 +47,6 @@
     justify-content: center;
     min-height: 40px;
     border: 1px solid #ccc;
-    padding: 8px;
 
     > * {
       flex: 0 0 auto;

.storybook/styles/radio-group.css

@@ -63,7 +63,6 @@
 
 [data-scope='radio-group'][data-part='indicator'] {
   height: 4px;
-  background-color: red;
   z-index: 1;
   border-radius: 0.25rem;
   box-shadow:

.storybook/styles/scroll-area.css

@@ -0,0 +1,78 @@
+[data-scope='scroll-area'][data-part='viewport'] {
+  border-radius: 0.375rem;
+  outline: 1px solid lightgray;
+  outline-offset: -1px;
+
+  /* hide scrollbar */
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+[data-scope='scroll-area'][data-part='content'] {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-block: 0.75rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 1.5rem;
+}
+
+[data-scope='scroll-area'][data-part='scrollbar'] {
+  display: flex;
+  background-color: lightgray;
+  border-radius: 0.375rem;
+  margin: 0.5rem;
+  opacity: 0;
+  transition: opacity 150ms 300ms;
+
+  &[data-hovering],
+  &[data-scrolling] {
+    opacity: 1;
+    transition-duration: 75ms;
+    transition-delay: 0ms;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+  }
+
+  &[data-orientation='vertical'] {
+    justify-content: center;
+    width: 0.5rem;
+    &::before {
+      width: 1.25rem;
+      height: 100%;
+    }
+    &:not([data-overflow-y]) {
+      display: none;
+    }
+  }
+
+  &[data-orientation='horizontal'] {
+    align-items: center;
+    height: 0.5rem;
+    &::before {
+      width: 100%;
+      height: 1.25rem;
+    }
+    &:not([data-overflow-x]) {
+      display: none;
+    }
+  }
+}
+
+[data-scope='scroll-area'][data-part='thumb'] {
+  border-radius: inherit;
+  background-color: gray;
+
+  &[data-orientation='vertical'] {
+    width: 100%;
+  }
+
+  &[data-orientation='horizontal'] {
+    height: 100%;
+  }
+}