{
	"name": "PageLoader",
	"package": "@pagedotapp/page-loader",
	"description": "A spinner component to indicate loading states.",
	"tags": ["loader", "spinner", "feedback", "page-ui"],
	"attributes": [
		{
			"name": "children",
			"type": "React.ReactNode",
			"default": null,
			"description": "Optional text or content below the spinner",
			"required": false
		},
		{
			"name": "className",
			"type": "string",
			"default": null,
			"description": "Additional CSS class name",
			"required": false
		},
		{
			"name": "variant",
			"type": "'default' | 'primary' | 'secondary'",
			"default": "'default'",
			"description": "Color style of the loader",
			"required": false
		},
		{
			"name": "size",
			"type": "'small' | 'medium' | 'large'",
			"default": "'medium'",
			"description": "Size of the loader",
			"required": false
		},
		{
			"name": "disabled",
			"type": "boolean",
			"default": false,
			"description": "Whether interaction around the loader is disabled",
			"required": false
		},
		{
			"name": "id",
			"type": "string",
			"default": null,
			"description": "Optional id for testing or DOM selection",
			"required": false
		}
	],
	"usage": "Show when content is being loaded or submitted.",
	"example": "import { PageLoader } from '@pagedotapp/page-loader';\n\nfunction Example() {\n  return <PageLoader variant='primary' />;\n}",
	"goodPractices": [
		"Display near the element that is loading",
		"Remove the loader as soon as work is complete"
	],
	"badPractices": [
		"Leaving loaders running indefinitely",
		"Using multiple loaders at once without necessity"
	],
	"notes": "Purely visual, no built-in delay logic.",
	"editorProps": {
		"label": {
			"component": "TextInput",
			"title": "Label",
			"description": "* Loading text label for accessibility"
		},
		"emphasis": {
			"component": "Select",
			"title": "Emphasis",
			"description": "* Visual emphasis level",
			"responsive": true,
			"options": ["subtle", "normal", "strong"]
		},
		"tone": {
			"component": "Select",
			"title": "Tone",
			"description": "* Semantic tone",
			"responsive": true,
			"options": ["neutral", "accent", "positive", "critical"]
		},
		"size": {
			"component": "Select",
			"title": "Size",
			"description": "* Component size",
			"responsive": true,
			"options": ["xs", "sm", "md", "lg", "xl"]
		},
		"speed": {
			"component": "Select",
			"title": "Speed",
			"description": "* Animation speed",
			"responsive": true,
			"options": ["slow", "normal", "fast"]
		},
		"display": {
			"component": "Select",
			"title": "Display",
			"description": "* Display mode",
			"responsive": true,
			"options": ["inline", "block", "overlay"]
		},
		"withBackdrop": {
			"component": "Toggle",
			"title": "With Backdrop",
			"description": "* Show with backdrop (for overlay mode)",
			"default": false
		}
	}
}