feat: add scroller (#27)

* feat: add scroller

* feat: update scroller

* chore: cleanpu

* feat: better docs

* feat: add data-slot

* feat: update scroller

* feat: build registry

* feat: update scroller

* feat: add scroll button

* chore: cleanup

* feat: update scroller

* feat: update scroller

* feat: update scroller again

* feat: update scroll

Author: sadmann7

docs/__registry__/index.tsx

@@ -129,6 +129,26 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
+    "scroller": {
+      name: "scroller",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/ui/scroller.tsx",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/default/lib/composition.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/ui/scroller.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
     "sortable": {
       name: "sortable",
       description: "",
@@ -649,6 +669,70 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
+    "scroller-demo": {
+      name: "scroller-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/scroller-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/scroller-demo.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
+    "scroller-horizontal-demo": {
+      name: "scroller-horizontal-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/scroller-horizontal-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/scroller-horizontal-demo.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
+    "scroller-hidden-demo": {
+      name: "scroller-hidden-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/scroller-hidden-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/scroller-hidden-demo.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
+    "scroller-navigation-demo": {
+      name: "scroller-navigation-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/scroller-navigation-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/scroller-navigation-demo.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
     "sortable-dynamic-overlay-demo": {
       name: "sortable-dynamic-overlay-demo",
       description: "",

docs/app/(lobby)/pg/page.tsx

@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { tricks } from "@/lib/data";
+import ScrollerDemo from "@/registry/default/examples/scroller-demo";
 import {
   Combobox,
   ComboboxAnchor,
@@ -40,6 +41,7 @@ import { ChevronDown } from "lucide-react";
 export default function PlaygroundPage() {
   return (
     <Shell>
+      <ScrollerDemo />
       <Combobox className="w-[15rem]">
         <ComboboxAnchor>
           <ComboboxInput placeholder="Search tricks..." />
@@ -115,7 +117,7 @@ export default function PlaygroundPage() {
         <SelectTrigger className="w-[11.25rem]">
           <SelectValue placeholder="Select a trick" />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent className="max-h-20">
           <SelectGroup>
             <SelectLabel>Tricks</SelectLabel>
             {tricks.map((trick) => (

docs/content/docs/components/combobox.mdx

@@ -121,7 +121,7 @@ The container for all combobox parts.
     },
     {
       title: "[data-disabled]",
-      value: "Present when disabled.",
+      value: "Present when disabled",
     },
   ]}
 />
@@ -152,15 +152,15 @@ A wrapper element that positions the combobox popover relative to the input and
     },
     {
       title: "[data-anchor]",
-      value: "Present when the anchor is present.",
+      value: "Present when the anchor is present",
     },
     {
       title: "[data-disabled]",
-      value: "Present when disabled.",
+      value: "Present when disabled",
     },
     {
       title: "[data-focused]",
-      value: "Present when the anchor is focused.",
+      value: "Present when the anchor is focused",
     },
   ]}
 />
@@ -227,11 +227,11 @@ An individual badge representing a selected item in a multi-select combobox.
   attributes={[
     {
       title: "[data-disabled]",
-      value: "Present when the badge is disabled.",
+      value: "Present when the badge is disabled",
     },
     {
       title: "[data-highlighted]",
-      value: "Present when the badge is highlighted.",
+      value: "Present when the badge is highlighted",
     },
     {
       title: "[data-orientation]",
@@ -253,11 +253,11 @@ A button to remove a selected item from the multi-select combobox.
   attributes={[
     {
       title: "[data-disabled]",
-      value: "Present when the parent badge is disabled.",
+      value: "Present when the parent badge is disabled",
     },
     {
       title: "[data-highlighted]",
-      value: "Present when the parent badge is highlighted.",
+      value: "Present when the parent badge is highlighted",
     },
   ]}
 />
@@ -392,11 +392,11 @@ An interactive item in the combobox list.
   attributes={[
     {
       title: "[data-highlighted]",
-      value: "Present when the item is highlighted.",
+      value: "Present when the item is highlighted",
     },
     {
       title: "[data-disabled]",
-      value: "Present when the item is disabled.",
+      value: "Present when the item is disabled",
     },
     {
       title: "[data-state]",

docs/content/docs/components/editable.mdx

@@ -95,6 +95,15 @@ The main container component for editable functionality.
   name="RootProps"
 />
 
+<DataAttributesTable
+  attributes={[
+    {
+      title: "[data-slot]",
+      value: ["editable"],
+    },
+  ]}
+/>
+
 ### Label
 
 The label component for the editable field.
@@ -106,6 +115,10 @@ The label component for the editable field.
 
 <DataAttributesTable
   attributes={[
+    {
+      title: "[data-slot]",
+      value: ["editable-label"],
+    },
     {
       title: "[data-disabled]",
       value: "Present when the editable field is disabled",
@@ -132,6 +145,10 @@ Container for the preview and input components.
 
 <DataAttributesTable
   attributes={[
+    {
+      title: "[data-slot]",
+      value: ["editable-area"],
+    },
     {
       title: "[data-disabled]",
       value: "Present when the editable field is disabled",
@@ -154,6 +171,10 @@ The preview component that displays the current value.
 
 <DataAttributesTable
   attributes={[
+    {
+      title: "[data-slot]",
+      value: ["editable-preview"],
+    },
     {
       title: "[data-empty]",
       value: "Present when the field has no value",
@@ -178,6 +199,15 @@ The input component for editing the value.
   name="InputProps"
 />
 
+<DataAttributesTable
+  attributes={[
+    {
+      title: "[data-slot]",
+      value: ["editable-input"],
+    },
+  ]}
+/>
+
 ### Trigger
 
 Button to trigger edit mode.
@@ -189,6 +219,10 @@ Button to trigger edit mode.
 
 <DataAttributesTable
   attributes={[
+    {
+      title: "[data-slot]",
+      value: ["editable-trigger"],
+    },
     {
       title: "[data-disabled]",
       value: "Present when the editable field is disabled",
@@ -209,6 +243,15 @@ Container for action buttons.
   name="ToolbarProps"
 />
 
+<DataAttributesTable
+  attributes={[
+    {
+      title: "[data-slot]",
+      value: ["editable-toolbar"],
+    },
+  ]}
+/>
+
 ### Submit
 
 Button to submit changes.
@@ -218,6 +261,15 @@ Button to submit changes.
   name="SubmitProps"
 />
 
+<DataAttributesTable
+  attributes={[
+    {
+      title: "[data-slot]",
+      value: ["editable-submit"],
+    },
+  ]}
+/>
+
 ### Cancel
 
 Button to cancel changes.
@@ -227,6 +279,15 @@ Button to cancel changes.
   name="CancelProps"
 />
 
+<DataAttributesTable
+  attributes={[
+    {
+      title: "[data-slot]",
+      value: ["editable-cancel"],
+    },
+  ]}
+/>
+
 ## Accessibility
 
 ### Keyboard Interactions

docs/content/docs/components/kbd.mdx

@@ -47,9 +47,9 @@ import * as Kbd from "@/components/ui/kbd";
 </Kbd.Root>
 ```
 
-### Built-in Key Descriptions
+### Built-in Key Titles
 
-The component includes built-in descriptions for common keyboard symbols:
+The component includes built-in titles for common keyboard symbols:
 
 ```tsx
 <Kbd.Root>
@@ -59,15 +59,15 @@ The component includes built-in descriptions for common keyboard symbols:
 </Kbd.Root>
 ```
 
-### Custom Key Descriptions
+### Custom Key Titles
 
-You can provide custom descriptions for any key:
+You can provide custom titles for any key:
 
 ```tsx
 <Kbd.Root>
-  <Kbd.Key description="Windows key">⊞</Kbd.Key>
+  <Kbd.Key title="Windows key">⊞</Kbd.Key>
   <Kbd.Separator />
-  <Kbd.Key description="Lock screen">L</Kbd.Key>
+  <Kbd.Key title="Lock screen">L</Kbd.Key>
 </Kbd.Root>
 ```
 
@@ -92,6 +92,15 @@ The main container component for keyboard shortcuts.
   name="RootProps"
 />
 
+<DataAttributesTable
+  attributes={[
+    {
+      title: "[data-slot]",
+      value: ["kbd"],
+    },
+  ]}
+/>
+
 ### Key
 
 The component that represents a single keyboard key.
@@ -101,6 +110,15 @@ The component that represents a single keyboard key.
   name="KeyProps"
 />
 
+<DataAttributesTable
+  attributes={[
+    {
+      title: "[data-slot]",
+      value: ["kbd-key"],
+    },
+  ]}
+/>
+
 ### Separator
 
 The component that represents the separator between keyboard keys.
@@ -109,3 +127,12 @@ The component that represents the separator between keyboard keys.
   path="./types/docs/kbd.ts"
   name="SeparatorProps"
 />
+
+<DataAttributesTable
+  attributes={[
+    {
+      title: "[data-slot]",
+      value: ["kbd-separator"],
+    },
+  ]}
+/>