Enhance loader components with detailed prop interfaces and accessibility features

- Updated FidgetSpinner, Grid, Hearts, Hourglass, InfinitySpin, LineWave, MagnifyingGlass, MutatingDots, Oval, ProgressBar, Puff, Radio, RevolvingDot, Rings, RotatingLines, RotatingSquare, RotatingTriangles, TailSpin, ThreeCircles, ThreeDots, Triangle, Vortex, and Watch components to include comprehensive prop interfaces.
- Added accessibility labels and customizable properties for colors, sizes, and visibility to improve user experience.
- Removed inheritance from BaseProps where applicable to define props explicitly.
- Updated TypeScript configuration to remove deprecated settings.

Author: mhnpd

docs/static/generated/props/Audio.json

@@ -1,68 +1,68 @@
 [
   {
-    "name": "color",
+    "name": "height",
     "required": false,
     "type": "enum",
-    "description": "Primary color applied to fill or stroke.",
-    "defaultValue": "#4fa94d"
+    "description": "Height of the SVG (number interpreted as px). Defaults to '100'.",
+    "defaultValue": "100"
   },
   {
-    "name": "colors",
+    "name": "width",
     "required": false,
     "type": "enum",
-    "description": "Provide multiple colors to render a gradient instead of a solid color.\nWhen 2 or more colors are supplied a gradient <defs> will be injected and\nthe primary color reference (fill or stroke) becomes url(#gradientId)."
+    "description": "Width of the SVG (number interpreted as px). Defaults to '100'.",
+    "defaultValue": "100"
   },
   {
-    "name": "gradientType",
+    "name": "color",
     "required": false,
     "type": "enum",
-    "description": "Type of gradient (linear or radial). Defaults to linear."
+    "description": "Primary color applied to the audio bars. Defaults to DEFAULT_COLOR.",
+    "defaultValue": "#4fa94d"
   },
   {
-    "name": "gradientAngle",
+    "name": "ariaLabel",
     "required": false,
     "type": "enum",
-    "description": "Angle (in degrees) applied via rotate() transform for linear gradients."
+    "description": "Accessible label announced to screen readers. Defaults to 'audio-loading'.",
+    "defaultValue": "audio-loading"
   },
   {
-    "name": "height",
+    "name": "wrapperStyle",
     "required": false,
     "type": "enum",
-    "description": "Height of the SVG (number interpreted as px).",
-    "defaultValue": "100"
+    "description": "Inline style object applied to the wrapper element.",
+    "defaultValue": "{}"
   },
   {
-    "name": "width",
+    "name": "wrapperClass",
     "required": false,
     "type": "enum",
-    "description": "Width of the SVG (number interpreted as px).",
-    "defaultValue": "100"
+    "description": "CSS class applied to the wrapper for custom styling."
   },
   {
-    "name": "ariaLabel",
+    "name": "visible",
     "required": false,
     "type": "enum",
-    "description": "Accessible label announced to screen readers (mapped to aria-label).",
-    "defaultValue": "audio-loading"
+    "description": "When false, the loader is not rendered. Defaults to true.",
+    "defaultValue": "true"
   },
   {
-    "name": "wrapperStyle",
+    "name": "colors",
     "required": false,
     "type": "enum",
-    "description": "Inline style object applied to the wrapper element.",
-    "defaultValue": "{}"
+    "description": "Provide multiple colors to render a gradient instead of a solid color.\nWhen 2 or more colors are supplied a gradient will be applied to the bars."
   },
   {
-    "name": "wrapperClass",
+    "name": "gradientType",
     "required": false,
     "type": "enum",
-    "description": "CSS class applied to the wrapper for custom styling."
+    "description": "Type of gradient (linear or radial). Defaults to linear."
   },
   {
-    "name": "visible",
+    "name": "gradientAngle",
     "required": false,
     "type": "enum",
-    "description": "When false, the loader is not rendered.",
-    "defaultValue": "true"
+    "description": "Angle (in degrees) applied via rotate() transform for linear gradients."
   }
 ]

docs/static/generated/props/BallTriangle.json

@@ -1,74 +1,74 @@
 [
   {
-    "name": "radius",
+    "name": "height",
     "required": false,
     "type": "enum",
-    "description": "",
-    "defaultValue": "5"
+    "description": "Height of the SVG (number interpreted as px). Defaults to 100.",
+    "defaultValue": "100"
   },
   {
-    "name": "color",
+    "name": "width",
     "required": false,
     "type": "enum",
-    "description": "Primary color applied to fill or stroke.",
-    "defaultValue": "#4fa94d"
+    "description": "Width of the SVG (number interpreted as px). Defaults to 100.",
+    "defaultValue": "100"
   },
   {
-    "name": "colors",
+    "name": "color",
     "required": false,
     "type": "enum",
-    "description": "Provide multiple colors to render a gradient instead of a solid color.\nWhen 2 or more colors are supplied a gradient <defs> will be injected and\nthe primary color reference (fill or stroke) becomes url(#gradientId)."
+    "description": "Primary color applied to the balls. Defaults to DEFAULT_COLOR.",
+    "defaultValue": "#4fa94d"
   },
   {
-    "name": "gradientType",
+    "name": "radius",
     "required": false,
     "type": "enum",
-    "description": "Type of gradient (linear or radial). Defaults to linear."
+    "description": "Radius of each ball in the triangle. Defaults to 5.",
+    "defaultValue": "5"
   },
   {
-    "name": "gradientAngle",
+    "name": "ariaLabel",
     "required": false,
     "type": "enum",
-    "description": "Angle (in degrees) applied via rotate() transform for linear gradients."
+    "description": "Accessible label announced to screen readers. Defaults to 'ball-triangle-loading'.",
+    "defaultValue": "ball-triangle-loading"
   },
   {
-    "name": "height",
+    "name": "wrapperStyle",
     "required": false,
     "type": "enum",
-    "description": "Height of the SVG (number interpreted as px).",
-    "defaultValue": "100"
+    "description": "Inline style object applied to the wrapper element."
   },
   {
-    "name": "width",
+    "name": "wrapperClass",
     "required": false,
     "type": "enum",
-    "description": "Width of the SVG (number interpreted as px).",
-    "defaultValue": "100"
+    "description": "CSS class applied to the wrapper for custom styling."
   },
   {
-    "name": "ariaLabel",
+    "name": "visible",
     "required": false,
     "type": "enum",
-    "description": "Accessible label announced to screen readers (mapped to aria-label).",
-    "defaultValue": "ball-triangle-loading"
+    "description": "When false, the loader is not rendered. Defaults to true.",
+    "defaultValue": "true"
   },
   {
-    "name": "wrapperStyle",
+    "name": "colors",
     "required": false,
     "type": "enum",
-    "description": "Inline style object applied to the wrapper element."
+    "description": "Provide multiple colors to render a gradient instead of a solid color.\nWhen 2 or more colors are supplied a gradient will be applied to the balls."
   },
   {
-    "name": "wrapperClass",
+    "name": "gradientType",
     "required": false,
     "type": "enum",
-    "description": "CSS class applied to the wrapper for custom styling."
+    "description": "Type of gradient (linear or radial). Defaults to linear."
   },
   {
-    "name": "visible",
+    "name": "gradientAngle",
     "required": false,
     "type": "enum",
-    "description": "When false, the loader is not rendered.",
-    "defaultValue": "true"
+    "description": "Angle (in degrees) applied via rotate() transform for linear gradients."
   }
 ]

docs/static/generated/props/Bars.json

@@ -1,67 +1,67 @@
 [
   {
-    "name": "color",
+    "name": "height",
     "required": false,
     "type": "enum",
-    "description": "Primary color applied to fill or stroke.",
-    "defaultValue": "#4fa94d"
+    "description": "Height of the SVG (number interpreted as px). Defaults to 80.",
+    "defaultValue": "80"
   },
   {
-    "name": "colors",
+    "name": "width",
     "required": false,
     "type": "enum",
-    "description": "Provide multiple colors to render a gradient instead of a solid color.\nWhen 2 or more colors are supplied a gradient <defs> will be injected and\nthe primary color reference (fill or stroke) becomes url(#gradientId)."
+    "description": "Width of the SVG (number interpreted as px). Defaults to 80.",
+    "defaultValue": "80"
   },
   {
-    "name": "gradientType",
+    "name": "color",
     "required": false,
     "type": "enum",
-    "description": "Type of gradient (linear or radial). Defaults to linear."
+    "description": "Primary color applied to the bars. Defaults to DEFAULT_COLOR.",
+    "defaultValue": "#4fa94d"
   },
   {
-    "name": "gradientAngle",
+    "name": "ariaLabel",
     "required": false,
     "type": "enum",
-    "description": "Angle (in degrees) applied via rotate() transform for linear gradients."
+    "description": "Accessible label announced to screen readers. Defaults to 'bars-loading'.",
+    "defaultValue": "bars-loading"
   },
   {
-    "name": "height",
+    "name": "wrapperStyle",
     "required": false,
     "type": "enum",
-    "description": "Height of the SVG (number interpreted as px).",
-    "defaultValue": "80"
+    "description": "Inline style object applied to the wrapper element."
   },
   {
-    "name": "width",
+    "name": "wrapperClass",
     "required": false,
     "type": "enum",
-    "description": "Width of the SVG (number interpreted as px).",
-    "defaultValue": "80"
+    "description": "CSS class applied to the wrapper for custom styling."
   },
   {
-    "name": "ariaLabel",
+    "name": "visible",
     "required": false,
     "type": "enum",
-    "description": "Accessible label announced to screen readers (mapped to aria-label).",
-    "defaultValue": "bars-loading"
+    "description": "When false, the loader is not rendered. Defaults to true.",
+    "defaultValue": "true"
   },
   {
-    "name": "wrapperStyle",
+    "name": "colors",
     "required": false,
     "type": "enum",
-    "description": "Inline style object applied to the wrapper element."
+    "description": "Provide multiple colors to render a gradient instead of a solid color.\nWhen 2 or more colors are supplied a gradient will be applied to the bars."
   },
   {
-    "name": "wrapperClass",
+    "name": "gradientType",
     "required": false,
     "type": "enum",
-    "description": "CSS class applied to the wrapper for custom styling."
+    "description": "Type of gradient (linear or radial). Defaults to linear."
   },
   {
-    "name": "visible",
+    "name": "gradientAngle",
     "required": false,
     "type": "enum",
-    "description": "When false, the loader is not rendered.",
-    "defaultValue": "true"
+    "description": "Angle (in degrees) applied via rotate() transform for linear gradients."
   }
 ]

docs/static/generated/props/Blocks.json

@@ -1,67 +1,67 @@
 [
   {
-    "name": "color",
+    "name": "height",
     "required": false,
     "type": "enum",
-    "description": "Primary color applied to fill or stroke."
+    "description": "Height of the SVG (number interpreted as px). Defaults to '80'.",
+    "defaultValue": "80"
   },
   {
-    "name": "colors",
+    "name": "width",
     "required": false,
     "type": "enum",
-    "description": "Provide multiple colors to render a gradient instead of a solid color.\nWhen 2 or more colors are supplied a gradient <defs> will be injected and\nthe primary color reference (fill or stroke) becomes url(#gradientId)."
+    "description": "Width of the SVG (number interpreted as px). Defaults to '80'.",
+    "defaultValue": "80"
   },
   {
-    "name": "gradientType",
+    "name": "color",
     "required": false,
     "type": "enum",
-    "description": "Type of gradient (linear or radial). Defaults to linear."
+    "description": "Primary color applied to the blocks. Can be overridden by colors array."
   },
   {
-    "name": "gradientAngle",
+    "name": "ariaLabel",
     "required": false,
     "type": "enum",
-    "description": "Angle (in degrees) applied via rotate() transform for linear gradients."
+    "description": "Accessible label announced to screen readers. Defaults to 'blocks-loading'.",
+    "defaultValue": "blocks-loading"
   },
   {
-    "name": "height",
+    "name": "wrapperStyle",
     "required": false,
     "type": "enum",
-    "description": "Height of the SVG (number interpreted as px).",
-    "defaultValue": "80"
+    "description": "Inline style object applied to the wrapper element.",
+    "defaultValue": "{}"
   },
   {
-    "name": "width",
+    "name": "wrapperClass",
     "required": false,
     "type": "enum",
-    "description": "Width of the SVG (number interpreted as px).",
-    "defaultValue": "80"
+    "description": "CSS class applied to the wrapper for custom styling."
   },
   {
-    "name": "ariaLabel",
+    "name": "visible",
     "required": false,
     "type": "enum",
-    "description": "Accessible label announced to screen readers (mapped to aria-label).",
-    "defaultValue": "blocks-loading"
+    "description": "When false, the loader is not rendered. Defaults to true.",
+    "defaultValue": "true"
   },
   {
-    "name": "wrapperStyle",
+    "name": "colors",
     "required": false,
     "type": "enum",
-    "description": "Inline style object applied to the wrapper element.",
-    "defaultValue": "{}"
+    "description": "Provide multiple colors to render a gradient instead of a solid color.\nWhen 2 or more colors are supplied a gradient will be applied to the blocks."
   },
   {
-    "name": "wrapperClass",
+    "name": "gradientType",
     "required": false,
     "type": "enum",
-    "description": "CSS class applied to the wrapper for custom styling."
+    "description": "Type of gradient (linear or radial). Defaults to linear."
   },
   {
-    "name": "visible",
+    "name": "gradientAngle",
     "required": false,
     "type": "enum",
-    "description": "When false, the loader is not rendered.",
-    "defaultValue": "true"
+    "description": "Angle (in degrees) applied via rotate() transform for linear gradients."
   }
 ]