refactor: scroll-spy api (#169)

* refactor: component api

* chore: update test

Author: sadmann7

docs/components/data-attributes-table.tsx

@@ -8,19 +8,16 @@ import {
 } from "@/components/ui/table";
 
 interface DataAttributesTableProps {
-  attributes?: {
+  data?: {
     title: string;
     value: string | string[];
   }[];
   slot?: string;
 }
 
-export function DataAttributesTable({
-  attributes,
-  slot,
-}: DataAttributesTableProps) {
+export function DataAttributesTable({ data, slot }: DataAttributesTableProps) {
   const allAttributes = [
-    ...(attributes ?? []),
+    ...(data ?? []),
     ...(slot ? [{ title: "[data-slot]", value: `"${slot}"` }] : []),
   ];
 

docs/content/docs/components/angle-slider.mdx

@@ -130,7 +130,7 @@ The main container component for the angle slider.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the angle slider is disabled.",
@@ -148,7 +148,7 @@ The circular track that represents the full range of possible values.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the angle slider is disabled.",
@@ -170,7 +170,7 @@ The portion of the track that represents the selected range.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the angle slider is disabled.",
@@ -188,7 +188,7 @@ The draggable handle for selecting values.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the angle slider is disabled.",
@@ -206,7 +206,7 @@ Displays the current value(s) with customizable formatting.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the angle slider is disabled.",

docs/content/docs/components/checkbox-group.mdx

@@ -120,7 +120,7 @@ Container for the checkbox group.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-invalid]",
       value: "Present when invalid.",
@@ -146,7 +146,7 @@ Label for the checkbox group.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when disabled.",
@@ -164,7 +164,7 @@ Container for checkbox items.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-orientation]",
       value: ["vertical", "horizontal"],
@@ -186,7 +186,7 @@ Individual checkbox item.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["checked", "unchecked"],
@@ -216,7 +216,7 @@ Visual indicator for the checkbox state.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["checked", "unchecked"],
@@ -238,7 +238,7 @@ Optional description text for the checkbox group.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when disabled.",
@@ -260,7 +260,7 @@ Error or validation message for the checkbox group.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when disabled.",

docs/content/docs/components/circular-progress.mdx

@@ -129,7 +129,7 @@ The main container component for the circular progress.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["indeterminate", "loading", "complete"],
@@ -163,7 +163,7 @@ The SVG container that holds the circular progress tracks and ranges.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["indeterminate", "loading", "complete"],
@@ -197,7 +197,7 @@ The background circle that represents the full range of possible values.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["indeterminate", "loading", "complete"],
@@ -215,7 +215,7 @@ The portion of the circle that represents the current progress value.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["indeterminate", "loading", "complete"],
@@ -245,7 +245,7 @@ The text element that displays the current progress value or custom content.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["indeterminate", "loading", "complete"],

docs/content/docs/components/color-picker.mdx

@@ -176,7 +176,7 @@ A button that activates the browser's native eye dropper tool to pick colors fro
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the component is disabled.",

docs/content/docs/components/color-swatch.mdx

@@ -70,7 +70,7 @@ A color swatch component that displays a color value with optional transparency
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the component is disabled.",

docs/content/docs/components/combobox.mdx

@@ -116,7 +116,7 @@ The container for all combobox parts.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["open", "closed"],
@@ -147,7 +147,7 @@ A wrapper element that positions the combobox popover relative to the input and
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {   
       title: "[data-state]",
       value: ["open", "closed"],
@@ -177,7 +177,7 @@ A button that toggles the combobox popover. Handles focus management and keyboar
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["open", "closed"],
@@ -208,7 +208,7 @@ A container for displaying selected items as badges in a multi-select combobox.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-orientation]",
       value: ["horizontal", "vertical"],
@@ -226,7 +226,7 @@ An individual badge representing a selected item in a multi-select combobox.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the badge is disabled",
@@ -252,7 +252,7 @@ A button to remove a selected item from the multi-select combobox.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the parent badge is disabled",
@@ -275,7 +275,7 @@ A button that clears the input value and resets the filter.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when disabled",
@@ -304,7 +304,7 @@ The popover container for combobox items. Positions the combobox popover relativ
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-state]",
       value: ["open", "closed"],
@@ -400,7 +400,7 @@ An interactive item in the combobox list.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-highlighted]",
       value: "Present when the item is highlighted",

docs/content/docs/components/editable.mdx

@@ -112,7 +112,7 @@ The label component for the editable field.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the editable field is disabled",
@@ -138,7 +138,7 @@ Container for the preview and input components.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the editable field is disabled",
@@ -160,7 +160,7 @@ The preview component that displays the current value.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-empty]",
       value: "Present when the field has no value",
@@ -195,7 +195,7 @@ Button to trigger edit mode.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the editable field is disabled",

docs/content/docs/components/file-upload.mdx

@@ -122,7 +122,7 @@ A container for drag and drop functionality.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the dropzone is disabled.",
@@ -148,7 +148,7 @@ A button that opens the file selection dialog.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the trigger is disabled.",
@@ -166,7 +166,7 @@ A container for displaying uploaded files.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-orientation]",
       value: ["horizontal", "vertical"],
@@ -233,7 +233,7 @@ A button to clear all files from the list.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the clear button is disabled.",

docs/content/docs/components/kanban.mdx

@@ -100,7 +100,7 @@ Individual kanban column component.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the column is disabled.",
@@ -122,7 +122,7 @@ A button component that acts as a drag handle for kanban columns.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the column is disabled.",
@@ -144,7 +144,7 @@ Individual kanban item component.
 />
 
 <DataAttributesTable
-  attributes={[
+  data={[
     {
       title: "[data-disabled]",
       value: "Present when the item is disabled.",
@@ -166,7 +166,7 @@ A button component that acts as a drag handle for kanban items.
 />
 
 <DataAttributesTable
-  attributes={[ 
+  data={[ 
     {
       title: "[data-disabled]",
       value: "Present when the item is disabled.",