chore: angle slider docs (#2044)

chakra-ui · Nov 24, 2024 · faec46d · faec46d
1 parent 0ec5c7e
commit faec46d
Show file tree

Hide file tree

Showing 25 changed files with 790 additions and 7 deletions.
diff --git a/examples/next-ts/pages/angle-slider.tsx b/examples/next-ts/pages/angle-slider.tsx
@@ -26,7 +26,7 @@ export default function Page() {
             <div {...api.getThumbProps()}></div>
             <div {...api.getMarkerGroupProps()}>
               {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
-                <div {...api.getMarkerProps({ value })}></div>
+                <div key={value} {...api.getMarkerProps({ value })}></div>
               ))}
             </div>
           </div>

diff --git a/packages/docs/data/accessibility.json b/packages/docs/data/accessibility.json
@@ -35,6 +35,50 @@
       }
     ]
   },
+  "angle-slider": {
+    "keyboard": [
+      {
+        "keys": ["ArrowRight"],
+        "description": "<span>Increments the angle slider based on defined step</span>"
+      },
+      {
+        "keys": ["ArrowLeft"],
+        "description": "<span>Decrements the angle slider based on defined step</span>"
+      },
+      {
+        "keys": ["ArrowUp"],
+        "description": "<span>Increases the value by the step amount.</span>"
+      },
+      {
+        "keys": ["ArrowDown"],
+        "description": "<span>Decreases the value by the step amount.</span>"
+      },
+      {
+        "keys": ["PageUp"],
+        "description": "<span>Increases the value by a larger step</span>"
+      },
+      {
+        "keys": ["PageDown"],
+        "description": "<span>Decreases the value by a larger step</span>"
+      },
+      {
+        "keys": ["Shift + ArrowUp"],
+        "description": "<span>Increases the value by a larger step</span>"
+      },
+      {
+        "keys": ["Shift + ArrowDown"],
+        "description": "<span>Decreases the value by a larger step</span>"
+      },
+      {
+        "keys": ["Home"],
+        "description": "Sets the value to 0 degrees."
+      },
+      {
+        "keys": ["End"],
+        "description": "Sets the value to 360 degrees."
+      }
+    ]
+  },
   "checkbox": {
     "keyboard": [
       {

diff --git a/packages/docs/data/api.json b/packages/docs/data/api.json
@@ -69,6 +69,79 @@
       }
     }
   },
+  "angle-slider": {
+    "api": {
+      "value": {
+        "type": "number",
+        "description": "The current value of the angle slider"
+      },
+      "valueAsDegree": {
+        "type": "string",
+        "description": "The current value as a degree string"
+      },
+      "setValue": {
+        "type": "(value: number) => void",
+        "description": "Sets the value of the angle slider"
+      },
+      "dragging": {
+        "type": "boolean",
+        "description": "Whether the slider is being dragged."
+      }
+    },
+    "context": {
+      "ids": {
+        "type": "Partial<ElementIds>",
+        "description": "The ids of the elements in the machine.\nUseful for composition."
+      },
+      "step": {
+        "type": "number",
+        "description": "The step value for the slider.",
+        "defaultValue": "1"
+      },
+      "value": {
+        "type": "number",
+        "description": "The value of the slider.",
+        "defaultValue": "0"
+      },
+      "onValueChange": {
+        "type": "(details: ValueChangeDetails) => void",
+        "description": "The callback function for when the value changes."
+      },
+      "onValueChangeEnd": {
+        "type": "(details: ValueChangeDetails) => void",
+        "description": "The callback function for when the value changes ends."
+      },
+      "disabled": {
+        "type": "boolean",
+        "description": "Whether the slider is disabled."
+      },
+      "readOnly": {
+        "type": "boolean",
+        "description": "Whether the slider is read-only."
+      },
+      "invalid": {
+        "type": "boolean",
+        "description": "Whether the slider is invalid."
+      },
+      "name": {
+        "type": "string",
+        "description": "The name of the slider. Useful for form submission."
+      },
+      "dir": {
+        "type": "\"ltr\" | \"rtl\"",
+        "description": "The document's text/writing direction.",
+        "defaultValue": "\"ltr\""
+      },
+      "id": {
+        "type": "string",
+        "description": "The unique identifier of the machine."
+      },
+      "getRootNode": {
+        "type": "() => ShadowRoot | Node | Document",
+        "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
+      }
+    }
+  },
   "avatar": {
     "api": {
       "loaded": {
@@ -364,6 +437,10 @@
       "setOpen": {
         "type": "(open: boolean) => void",
         "description": "Function to open or close the collapsible."
+      },
+      "measureSize": {
+        "type": "() => void",
+        "description": "Function to measure the size of the content."
       }
     },
     "context": {
@@ -483,6 +560,10 @@
         "type": "boolean",
         "description": "Whether the color picker is required"
       },
+      "invalid": {
+        "type": "boolean",
+        "description": "Whether the color picker is invalid"
+      },
       "onValueChange": {
         "type": "(details: ValueChangeDetails) => void",
         "description": "Handler that is called when the value changes, as the user drags."
@@ -529,6 +610,11 @@
         "description": "Whether to close the color picker when a swatch is selected",
         "defaultValue": "false"
       },
+      "openAutoFocus": {
+        "type": "boolean",
+        "description": "Whether to auto focus the color picker when it is opened",
+        "defaultValue": "true"
+      },
       "id": {
         "type": "string",
         "description": "The unique identifier of the machine."
@@ -582,6 +668,10 @@
         "type": "(value: string) => void",
         "description": "The value of the combobox input"
       },
+      "syncSelectedItems": {
+        "type": "() => void",
+        "description": "Function to sync the selected items with the value.\nUseful when `value` is updated from async sources."
+      },
       "selectedItems": {
         "type": "V[]",
         "description": "The selected items"

diff --git a/packages/docs/data/data-attr.json b/packages/docs/data/data-attr.json
@@ -36,6 +36,43 @@
       "data-state": "\"open\" | \"closed\""
     }
   },
+  "angle-slider": {
+    "Root": {
+      "data-scope": "angle-slider",
+      "data-part": "root",
+      "data-disabled": "Present when disabled",
+      "data-invalid": "Present when invalid",
+      "data-readonly": "Present when read-only"
+    },
+    "Label": {
+      "data-scope": "angle-slider",
+      "data-part": "label",
+      "data-disabled": "Present when disabled",
+      "data-invalid": "Present when invalid",
+      "data-readonly": "Present when read-only"
+    },
+    "Control": {
+      "data-scope": "angle-slider",
+      "data-part": "control",
+      "data-disabled": "Present when disabled",
+      "data-invalid": "Present when invalid",
+      "data-readonly": "Present when read-only"
+    },
+    "Thumb": {
+      "data-scope": "angle-slider",
+      "data-part": "thumb",
+      "data-disabled": "Present when disabled",
+      "data-invalid": "Present when invalid",
+      "data-readonly": "Present when read-only"
+    },
+    "Marker": {
+      "data-scope": "angle-slider",
+      "data-part": "marker",
+      "data-value": "The value of the item",
+      "data-state": "",
+      "data-disabled": "Present when disabled"
+    }
+  },
   "avatar": {
     "Image": {
       "data-scope": "avatar",
@@ -174,6 +211,7 @@
     "Content": {
       "data-scope": "collapsible",
       "data-part": "content",
+      "data-collapsible": "",
       "data-state": "\"open\" | \"closed\"",
       "data-disabled": "Present when disabled"
     },
@@ -189,20 +227,23 @@
       "data-scope": "color-picker",
       "data-part": "root",
       "data-disabled": "Present when disabled",
-      "data-readonly": "Present when read-only"
+      "data-readonly": "Present when read-only",
+      "data-invalid": "Present when invalid"
     },
     "Label": {
       "data-scope": "color-picker",
       "data-part": "label",
       "data-disabled": "Present when disabled",
       "data-readonly": "Present when read-only",
+      "data-invalid": "Present when invalid",
       "data-focus": "Present when focused"
     },
     "Control": {
       "data-scope": "color-picker",
       "data-part": "control",
       "data-disabled": "Present when disabled",
       "data-readonly": "Present when read-only",
+      "data-invalid": "Present when invalid",
       "data-state": "\"open\" | \"closed\"",
       "data-focus": "Present when focused"
     },
@@ -211,6 +252,7 @@
       "data-part": "trigger",
       "data-disabled": "Present when disabled",
       "data-readonly": "Present when read-only",
+      "data-invalid": "Present when invalid",
       "data-placement": "The placement of the trigger",
       "data-state": "\"open\" | \"closed\"",
       "data-focus": "Present when focused"
@@ -227,10 +269,26 @@
       "data-disabled": "Present when disabled",
       "data-focus": "Present when focused"
     },
+    "Area": {
+      "data-scope": "color-picker",
+      "data-part": "area",
+      "data-invalid": "Present when invalid",
+      "data-disabled": "Present when disabled",
+      "data-readonly": "Present when read-only"
+    },
+    "AreaBackground": {
+      "data-scope": "color-picker",
+      "data-part": "area-background",
+      "data-invalid": "Present when invalid",
+      "data-disabled": "Present when disabled",
+      "data-readonly": "Present when read-only"
+    },
     "AreaThumb": {
       "data-scope": "color-picker",
       "data-part": "area-thumb",
-      "data-disabled": "Present when disabled"
+      "data-disabled": "Present when disabled",
+      "data-invalid": "Present when invalid",
+      "data-readonly": "Present when read-only"
     },
     "ChannelSlider": {
       "data-scope": "color-picker",
@@ -265,12 +323,16 @@
       "data-scope": "color-picker",
       "data-part": "channel-input",
       "data-channel": "The color channel of the channelinput",
-      "data-disabled": "Present when disabled"
+      "data-disabled": "Present when disabled",
+      "data-invalid": "Present when invalid",
+      "data-readonly": "Present when read-only"
     },
     "EyeDropperTrigger": {
       "data-scope": "color-picker",
       "data-part": "eye-dropper-trigger",
-      "data-disabled": "Present when disabled"
+      "data-disabled": "Present when disabled",
+      "data-invalid": "Present when invalid",
+      "data-readonly": "Present when read-only"
     },
     "SwatchTrigger": {
       "data-scope": "color-picker",
@@ -1581,7 +1643,10 @@
     "BranchContent": {
       "data-scope": "tree-view",
       "data-part": "branch-content",
-      "data-state": "\"open\" | \"closed\""
+      "data-state": "\"open\" | \"closed\"",
+      "data-depth": "The depth of the item",
+      "data-path": "The path of the item",
+      "data-value": "The value of the item"
     },
     "BranchIndentGuide": {
       "data-scope": "tree-view",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/components/machines/angle-slider.tsx b/website/components/machines/angle-slider.tsx
@@ -0,0 +1,27 @@
+import * as angleSlider from "@zag-js/angle-slider"
+import { normalizeProps, useMachine } from "@zag-js/react"
+import { useId } from "react"
+
+export function AngleSlider(props: any) {
+  const [state, send] = useMachine(angleSlider.machine({ id: useId() }), {
+    context: props.controls,
+  })
+
+  const api = angleSlider.connect(state, send, normalizeProps)
+
+  return (
+    <div {...api.getRootProps()}>
+      <label {...api.getLabelProps()}>Wind direction</label>
+      <div {...api.getControlProps()}>
+        <div {...api.getThumbProps()}></div>
+        <div {...api.getMarkerGroupProps()}>
+          {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
+            <div key={value} {...api.getMarkerProps({ value })}></div>
+          ))}
+        </div>
+      </div>
+      <div {...api.getValueTextProps()}>{api.value} degrees</div>
+      <input {...api.getHiddenInputProps()} />
+    </div>
+  )
+}
diff --git a/website/components/showcase.tsx b/website/components/showcase.tsx
@@ -1,4 +1,5 @@
 import { Accordion } from "./machines/accordion"
+import { AngleSlider } from "./machines/angle-slider"
 import { Avatar } from "./machines/avatar"
 import { Carousel } from "./machines/carousel"
 import { Checkbox } from "./machines/checkbox"
@@ -54,6 +55,17 @@ const components = {
       }}
     />
   ),
+  AngleSlider: () => (
+    <Playground
+      name="angle-slider"
+      component={AngleSlider}
+      defaultProps={{
+        disabled: false,
+        readOnly: false,
+        step: 1,
+      }}
+    />
+  ),
   Avatar: () => (
     <Playground
       name="avatar"