{
  "package": "@hybr1d-tech/charizard",
  "site": "https://ui.zenadmin.co",
  "generatedFrom": "src/site/manifest.ts",
  "components": [
    {
      "name": "Button",
      "slug": "button",
      "category": "Actions",
      "description": "Primary, secondary and tertiary buttons, icon-only buttons and grouped actions with menus.",
      "docs": "https://ui.zenadmin.co/#/components/button",
      "markdown": "https://ui.zenadmin.co/components/button.md",
      "exports": [
        "Button"
      ],
      "import": "import {Button} from '@hybr1d-tech/charizard'",
      "sections": [
        "Variants",
        "Sizes",
        "Disabled",
        "Icon buttons",
        "Group actions",
        "Actions dropdown"
      ],
      "snippets": [
        "import {Button, BUTTON_VARIANT} from '@hybr1d-tech/charizard'\n\n<Button>Primary</Button>\n<Button variant={BUTTON_VARIANT.SECONDARY}>Secondary</Button>\n<Button variant={BUTTON_VARIANT.TERTIARY}>Tertiary</Button>\n<Button variant={BUTTON_VARIANT.LINK}>Link</Button>",
        "import {Button, BUTTON_VARIANT} from '@hybr1d-tech/charizard'\n\n<Button.GroupAction\n  variant={BUTTON_VARIANT.SECONDARY}\n  menuItems={[\n    {label: 'Item 1', onClick: () => console.log('Item 1 clicked')},\n    {label: 'Disabled Item', onClick: () => {}, disabled: true},\n  ]}\n>\n  Click me\n</Button.GroupAction>"
      ],
      "props": {
        "Button": {
          "props": [
            {
              "name": "btnType",
              "type": "\"button\" | \"reset\" | \"submit\"",
              "required": false
            },
            {
              "name": "children",
              "type": "ReactNode",
              "required": false
            },
            {
              "name": "className",
              "type": "string",
              "required": false
            },
            {
              "name": "customStyles",
              "type": "CSSProperties",
              "required": false,
              "defaultValue": "{}"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "ReactNode",
              "required": false
            },
            {
              "name": "onClick",
              "type": "MouseEventHandler<HTMLButtonElement>",
              "required": false
            },
            {
              "name": "size",
              "type": "BUTTON_SIZE",
              "required": false,
              "defaultValue": "BUTTON_SIZE.DEFAULT"
            },
            {
              "name": "type",
              "type": "BUTTON_TYPE.ICON_ONLY | BUTTON_TYPE.ICON_LEFT | BUTTON_TYPE.ICON_RIGHT | BUTTON_TYPE.BASIC | BUTTON_TYPE.BUTTON | BUTTON_TYPE.RESET",
              "required": false,
              "defaultValue": "BUTTON_TYPE.BASIC"
            },
            {
              "name": "variant",
              "type": "BUTTON_VARIANT",
              "required": false,
              "defaultValue": "BUTTON_VARIANT.PRIMARY"
            },
            {
              "name": "zapTriggerProps",
              "type": "any",
              "required": false,
              "defaultValue": "{}"
            }
          ]
        }
      }
    },
    {
      "name": "SegmentedControl",
      "slug": "segmented-control",
      "category": "Actions",
      "description": "Mutually exclusive option switcher rendered as connected segments.",
      "docs": "https://ui.zenadmin.co/#/components/segmented-control",
      "markdown": "https://ui.zenadmin.co/components/segmented-control.md",
      "exports": [
        "SegmentedControl"
      ],
      "import": "import {SegmentedControl} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic usage",
        "Default value",
        "Observing selection"
      ],
      "snippets": [
        "import {SegmentedControl} from '@hybr1d-tech/charizard'\n\n<SegmentedControl\n  items={[\n    {label: 'Overview', value: 'overview', component: <OverviewPanel />},\n    {label: 'Activity', value: 'activity', component: <ActivityPanel />},\n    {label: 'Settings', value: 'settings', component: <SettingsPanel />},\n  ]}\n/>",
        "<SegmentedControl\n  items={items}\n  defaultValue=\"activity\"\n/>"
      ],
      "props": {
        "SegmentedControl": {
          "props": [
            {
              "name": "items",
              "type": "{ label: string; value: string; component: ReactNode; }[]",
              "required": true,
              "description": "items to show in segmented control"
            },
            {
              "name": "defaultValue",
              "type": "string",
              "required": false,
              "description": "default value to be selected on first render"
            },
            {
              "name": "handleOnChange",
              "type": "((value: string | null) => void)",
              "required": false,
              "description": "handle on change\nuse this if you are controlling the behavior of segmented control from an external entity"
            }
          ]
        }
      }
    },
    {
      "name": "Input",
      "slug": "input",
      "category": "Forms & inputs",
      "description": "Text input and textarea with labels, error handling, icons and adornments.",
      "docs": "https://ui.zenadmin.co/#/components/input",
      "markdown": "https://ui.zenadmin.co/components/input.md",
      "exports": [
        "InputV2",
        "TextareaV2",
        "InputControlV2",
        "LabelV2"
      ],
      "import": "import {InputV2, TextareaV2, InputControlV2, LabelV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic usage",
        "Label and control",
        "Icons and adornments",
        "Numeric inputs"
      ],
      "snippets": [
        "import {InputV2, TextareaV2} from '@hybr1d-tech/charizard'\n\n<InputV2 placeholder=\"Enter asset tag\" />\n<InputV2 placeholder=\"Enter serial number\" errorMsg=\"Serial number is required\" />\n<InputV2 placeholder=\"Managed by MDM\" disabled />\n<TextareaV2 placeholder=\"Add a note about this device\" rows={3} />",
        "import {InputControlV2, LabelV2, InputV2} from '@hybr1d-tech/charizard'\n\n<InputControlV2>\n  <LabelV2 required info=\"Shown on the device sticker\">Asset tag</LabelV2>\n  <InputV2 placeholder=\"e.g. ZEN-MBP-0042\" />\n</InputControlV2>",
        "import {InputCount, InputNumber} from '@hybr1d-tech/charizard'\n\nconst [count, setCount] = useState(2)\n\n<InputCount count={count} onCountChange={setCount} min={0} max={10} />\n<InputNumber count={seats} onCountChange={setSeats} min={1} max={500} />"
      ],
      "props": {
        "InputV2": {
          "props": [
            {
              "name": "containerClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "containerStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "errorMsg",
              "type": "string",
              "required": false
            },
            {
              "name": "inputStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "onErrorHeightChange",
              "type": "((height: number) => void)",
              "required": false
            }
          ],
          "nativeProps": "input"
        },
        "TextareaV2": {
          "props": [
            {
              "name": "containerClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "containerStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "errorMsg",
              "type": "string",
              "required": false
            },
            {
              "name": "inputStyles",
              "type": "CSSProperties",
              "required": false
            }
          ],
          "nativeProps": "textarea"
        },
        "InputControlV2": {
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": true
            }
          ],
          "nativeProps": "div"
        },
        "LabelV2": {
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": true
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "info",
              "type": "string",
              "required": false,
              "defaultValue": "''"
            },
            {
              "name": "required",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "tooltipProps",
              "type": "Partial<TooltipV2Props>",
              "required": false,
              "defaultValue": "{}"
            }
          ],
          "nativeProps": "label"
        }
      }
    },
    {
      "name": "Checkbox",
      "slug": "checkbox",
      "category": "Forms & inputs",
      "description": "Checkbox with label, indeterminate and disabled states.",
      "docs": "https://ui.zenadmin.co/#/components/checkbox",
      "markdown": "https://ui.zenadmin.co/components/checkbox.md",
      "exports": [
        "CheckboxV2"
      ],
      "import": "import {CheckboxV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic usage",
        "States",
        "Disabled",
        "Select-all pattern"
      ],
      "snippets": [
        "import {CheckboxV2} from '@hybr1d-tech/charizard'\n\nconst [subscribed, setSubscribed] = useState(true)\n\n<CheckboxV2\n  label=\"Email me when an order ships\"\n  checked={subscribed}\n  onChange={setSubscribed}\n/>",
        "const allChecked = selected.length === devices.length\nconst someChecked = selected.length > 0 && !allChecked\n\n<CheckboxV2\n  label=\"All devices\"\n  checked={allChecked}\n  indeterminate={someChecked}\n  onChange={checked => setSelected(checked ? devices.map(d => d.id) : [])}\n/>"
      ],
      "props": {
        "CheckboxV2": {
          "props": [
            {
              "name": "label",
              "type": "ReactNode",
              "required": true
            },
            {
              "name": "onChange",
              "type": "(checked: boolean) => void",
              "required": true
            },
            {
              "name": "checked",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "className",
              "type": "string",
              "required": false
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "indeterminate",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            }
          ]
        }
      }
    },
    {
      "name": "RadioGroup",
      "slug": "radio-group",
      "category": "Forms & inputs",
      "description": "Single-choice radio group with horizontal and vertical layouts.",
      "docs": "https://ui.zenadmin.co/#/components/radio-group",
      "markdown": "https://ui.zenadmin.co/components/radio-group.md",
      "exports": [
        "RadioGroupV2"
      ],
      "import": "import {RadioGroupV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic usage",
        "Subheadings and tooltips",
        "Controlled",
        "States"
      ],
      "snippets": [
        "import {RadioGroupV2} from '@hybr1d-tech/charizard'\n\n<RadioGroupV2\n  label=\"Shipping speed\"\n  items={[\n    {label: {heading: 'Standard (5-7 business days)'}, value: 'standard'},\n    {label: {heading: 'Express (2-3 business days)'}, value: 'express'},\n    {label: {heading: 'Next-day'}, value: 'next-day'},\n  ]}\n  defaultValue=\"standard\"\n  onChange={value => setShipping(value)}\n/>",
        "const [ownership, setOwnership] = useState<string | null>('company')\n\n<RadioGroupV2\n  label=\"Device ownership\"\n  items={items}\n  value={ownership ?? undefined}\n  onChange={setOwnership}\n/>"
      ],
      "props": {
        "RadioGroupV2": {
          "props": [
            {
              "name": "items",
              "type": "{ label: { heading: ReactNode; subHeading?: string | undefined; }; value: string; tooltip?: { txt: string; trigger?: ReactNode; placement?: string | undefined; } | undefined; }[]",
              "required": true,
              "description": "items to show in radio group"
            },
            {
              "name": "onChange",
              "type": "(value: string | null) => void",
              "required": true,
              "description": "callback to be called on change of radio group"
            },
            {
              "name": "defaultValue",
              "type": "string",
              "required": false,
              "description": "default value to be selected on first render (uncontrolled)"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "errorMsg",
              "type": "string",
              "required": false,
              "description": "error msg to display"
            },
            {
              "name": "handleClickManually",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "isLoading",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "label",
              "type": "string",
              "required": false,
              "description": "heading for radio group"
            },
            {
              "name": "optionsContainerStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "required",
              "type": "boolean",
              "required": false,
              "description": "if radio group is required",
              "defaultValue": "false"
            },
            {
              "name": "value",
              "type": "string",
              "required": false,
              "description": "controlled value - when provided, component becomes controlled"
            }
          ]
        }
      }
    },
    {
      "name": "Switch",
      "slug": "switch",
      "category": "Forms & inputs",
      "description": "On/off toggle switch.",
      "docs": "https://ui.zenadmin.co/#/components/switch",
      "markdown": "https://ui.zenadmin.co/components/switch.md",
      "exports": [
        "SwitchV2"
      ],
      "import": "import {SwitchV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic usage",
        "Controlled",
        "Info tooltip and error",
        "Disabled"
      ],
      "snippets": [
        "import {SwitchV2} from '@hybr1d-tech/charizard'\n\n<SwitchV2\n  defaultChecked\n  onCheckedChange={({checked}) => console.log(checked)}\n>\n  Notify me on delivery\n</SwitchV2>",
        "const [mfa, setMfa] = useState(true)\n\n<SwitchV2 checked={mfa} onCheckedChange={({checked}) => setMfa(checked)}>\n  Require MFA for all users\n</SwitchV2>"
      ],
      "props": {
        "SwitchV2": {
          "props": [
            {
              "name": "checked",
              "type": "boolean",
              "required": false,
              "description": "The controlled checked state of the switch"
            },
            {
              "name": "children",
              "type": "ReactNode",
              "required": false
            },
            {
              "name": "defaultChecked",
              "type": "boolean",
              "required": false,
              "description": "The initial checked state of the switch when rendered.\nUse when you don't need to control the checked state of the switch."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Whether the switch is disabled."
            },
            {
              "name": "errorMsg",
              "type": "string",
              "required": false
            },
            {
              "name": "form",
              "type": "string",
              "required": false,
              "description": "The id of the form that the switch belongs to"
            },
            {
              "name": "info",
              "type": "string",
              "required": false,
              "defaultValue": "''"
            },
            {
              "name": "invalid",
              "type": "boolean",
              "required": false,
              "description": "If `true`, the switch is marked as invalid."
            },
            {
              "name": "label",
              "type": "string",
              "required": false,
              "description": "Specifies the localized strings that identifies the accessibility elements and their states"
            },
            {
              "name": "name",
              "type": "string",
              "required": false,
              "description": "The name of the input field in a switch\n(Useful for form submission)."
            },
            {
              "name": "onCheckedChange",
              "type": "((details: CheckedChangeDetails) => void)",
              "required": false,
              "description": "Function to call when the switch is clicked."
            },
            {
              "name": "readOnly",
              "type": "boolean",
              "required": false,
              "description": "Whether the switch is read-only"
            },
            {
              "name": "required",
              "type": "boolean",
              "required": false,
              "description": "If `true`, the switch input is marked as required,"
            },
            {
              "name": "tooltipProps",
              "type": "Partial<TooltipV2Props>",
              "required": false,
              "defaultValue": "{}"
            },
            {
              "name": "value",
              "type": "string | number",
              "required": false,
              "description": "The value of switch input. Useful for form submission.",
              "defaultValue": "\"on\""
            }
          ]
        }
      }
    },
    {
      "name": "Select",
      "slug": "select",
      "category": "Forms & inputs",
      "description": "Single and multi-select dropdown with search, sub-labels and creatable options.",
      "docs": "https://ui.zenadmin.co/#/components/select",
      "markdown": "https://ui.zenadmin.co/components/select.md",
      "exports": [
        "SelectV2",
        "CreatableSelectV2"
      ],
      "import": "import {SelectV2, CreatableSelectV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic usage",
        "Variants",
        "Checkbox variant (controlled multi)",
        "Creatable"
      ],
      "snippets": [
        "import {SelectV2} from '@hybr1d-tech/charizard'\n\n<SelectV2\n  options={[\n    {label: 'MacBook Pro 14\"', value: 'mbp-14', subLabel: 'M3 Pro · 18GB · 512GB'},\n    {label: 'Dell XPS 13', value: 'xps-13', subLabel: 'i7 · 16GB · 512GB'},\n  ]}\n  placeholder=\"Select a laptop\"\n  onChange={value => setLaptop(value as string)}\n/>",
        "const [approvers, setApprovers] = useState<string[]>([apiUsers[0].id])\n\n<SelectV2\n  options={userOptions}\n  variant={SELECT_VARIANT.CHECKBOX}\n  isMulti\n  value={userOptions.filter(o => approvers.includes(o.value))}\n  onChange={value => setApprovers(value as string[])}\n/>"
      ],
      "props": {
        "SelectV2": {
          "props": [
            {
              "name": "onChange",
              "type": "(value: string | string[], actionMeta: SelectActionMeta) => void",
              "required": true,
              "description": "Handle change events on the select"
            },
            {
              "name": "options",
              "type": "Option[]",
              "required": true,
              "description": "Array of options that populate the select menu"
            },
            {
              "name": "customStyles",
              "type": "StylesConfig<any>",
              "required": false
            },
            {
              "name": "errorMsg",
              "type": "string",
              "required": false
            },
            {
              "name": "mainContainerClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "showDivider",
              "type": "boolean",
              "required": false
            },
            {
              "name": "variant",
              "type": "SELECT_VARIANT",
              "required": false
            }
          ]
        },
        "CreatableSelectV2": {
          "props": [
            {
              "name": "onChange",
              "type": "(value: string | string[], actionMeta: SelectActionMeta) => void",
              "required": true,
              "description": "Handle change events on the select"
            },
            {
              "name": "onCreateOption",
              "type": "(value: string) => void | Promise<void>",
              "required": true
            },
            {
              "name": "options",
              "type": "Option[]",
              "required": true,
              "description": "Array of options that populate the select menu"
            },
            {
              "name": "customStyles",
              "type": "StylesConfig<any>",
              "required": false
            },
            {
              "name": "errorMsg",
              "type": "string",
              "required": false
            },
            {
              "name": "mainContainerClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "showDivider",
              "type": "boolean",
              "required": false
            },
            {
              "name": "variant",
              "type": "SELECT_VARIANT",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "Selectors",
      "slug": "selectors",
      "category": "Forms & inputs",
      "description": "Multi-select option picker with custom option rendering.",
      "docs": "https://ui.zenadmin.co/#/components/selectors",
      "markdown": "https://ui.zenadmin.co/components/selectors.md",
      "exports": [
        "SelectorsV2"
      ],
      "import": "import {SelectorsV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Default",
        "Custom options",
        "Interactive"
      ],
      "snippets": [
        "import {SelectorsV2} from '@hybr1d-tech/charizard'\n\n<SelectorsV2\n  options={[\n    {label: 'Option 1', value: 'option1'},\n    {label: 'Option 2', value: 'option2'},\n    {label: 'Option 3', value: 'option3'},\n  ]}\n  value=\"option1\"\n  onChange={value => console.log(value)}\n/>",
        "const [selectedValue, setSelectedValue] = useState('option1')\n\n<SelectorsV2\n  options={dummyOptions}\n  value={selectedValue}\n  onChange={newValue => setSelectedValue(newValue)}\n/>"
      ],
      "props": {
        "SelectorsV2": {
          "props": [
            {
              "name": "onChange",
              "type": "(value: string) => void",
              "required": true
            },
            {
              "name": "options",
              "type": "{ label: string; value: string; }[]",
              "required": true
            },
            {
              "name": "value",
              "type": "string",
              "required": true
            }
          ]
        }
      }
    },
    {
      "name": "Search",
      "slug": "search",
      "category": "Forms & inputs",
      "description": "Debounced search input with clear button and overflow handling.",
      "docs": "https://ui.zenadmin.co/#/components/search",
      "markdown": "https://ui.zenadmin.co/components/search.md",
      "exports": [
        "SearchV2"
      ],
      "import": "import {SearchV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic usage",
        "Controlled with debounce",
        "States"
      ],
      "snippets": [
        "import {SearchV2} from '@hybr1d-tech/charizard'\n\n<SearchV2 placeholder=\"Search devices\" />",
        "const [query, setQuery] = useState('')\n\n<SearchV2\n  search={query}\n  setSearch={setQuery}\n  placeholder=\"Search assigned devices\"\n/>"
      ],
      "props": {
        "SearchV2": {
          "props": [
            {
              "name": "containerClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "containerStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "errorMsg",
              "type": "string",
              "required": false
            },
            {
              "name": "inputGroupProps",
              "type": "Omit<InputGroupPropsV2, \"children\">",
              "required": false,
              "defaultValue": "{}"
            },
            {
              "name": "inputStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "onErrorHeightChange",
              "type": "((height: number) => void)",
              "required": false
            },
            {
              "name": "search",
              "type": "string",
              "required": false,
              "defaultValue": "''"
            },
            {
              "name": "setSearch",
              "type": "Dispatch<SetStateAction<string>>",
              "required": false
            }
          ],
          "nativeProps": "input"
        }
      }
    },
    {
      "name": "DatePicker",
      "slug": "date-picker",
      "category": "Forms & inputs",
      "description": "Date and date-range picker built on react-day-picker, with quick-select presets.",
      "docs": "https://ui.zenadmin.co/#/components/date-picker",
      "markdown": "https://ui.zenadmin.co/components/date-picker.md",
      "exports": [
        "DatePicker"
      ],
      "import": "import {DatePicker} from '@hybr1d-tech/charizard'",
      "sections": [
        "Date range picker",
        "Single date picker",
        "Formats, error and disabled"
      ],
      "snippets": [
        "import {DateRangePicker, useDateRangePicker} from '@hybr1d-tech/charizard'\n\nconst {period, handleDateChange} = useDateRangePicker()\n\n<DateRangePicker\n  value={{from: period.from, to: period.to}}\n  onChange={handleDateChange}\n  mode=\"range\"\n  showQuickSelect\n  disabled={date => date > new Date()}\n/>",
        "import {DatePicker} from '@hybr1d-tech/charizard'\n\nconst [date, setDate] = React.useState<string | Date | undefined>()\n\n<DatePicker mode=\"single\" variant=\"form\" value={date} onChange={setDate} />"
      ],
      "props": {
        "DatePicker": {
          "props": [
            {
              "name": "mode",
              "type": "\"single\"",
              "required": true,
              "defaultValue": "'single'"
            },
            {
              "name": "onChange",
              "type": "(value?: string | Date | undefined) => void",
              "required": true
            },
            {
              "name": "buttonVariant",
              "type": "BUTTON_VARIANT",
              "required": false,
              "defaultValue": "BUTTON_VARIANT.GHOST"
            },
            {
              "name": "customContainerStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "disabled",
              "type": "Matcher | Matcher[]",
              "required": false
            },
            {
              "name": "disableDatepicker",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "displayDateFormat",
              "type": "\"do LLL y\" | \"dd LLL y\" | \"yyyy-MM-dd\" | \"dd/MM/yyyy\"",
              "required": false,
              "defaultValue": "'do LLL y'\n'do LLL y' => 1st Jan 2021\n'dd LLL y' => 01 Jan 2021\n'yyyy-MM-dd' => 2021-01-01\n'dd/MM/yyyy' => 01/01/2021"
            },
            {
              "name": "endMonth",
              "type": "Date",
              "required": false,
              "defaultValue": "new Date(2050, 0)"
            },
            {
              "name": "errorMsg",
              "type": "string",
              "required": false,
              "defaultValue": "''"
            },
            {
              "name": "isError",
              "type": "boolean",
              "required": false
            },
            {
              "name": "popoverConfig",
              "type": "{ placement?: Placement | undefined; }",
              "required": false
            },
            {
              "name": "showOutsideDays",
              "type": "boolean",
              "required": false,
              "defaultValue": "true"
            },
            {
              "name": "startMonth",
              "type": "Date",
              "required": false,
              "defaultValue": "new Date(2020, 0)"
            },
            {
              "name": "trigger",
              "type": "ReactNode",
              "required": false
            },
            {
              "name": "value",
              "type": "string | Date",
              "required": false
            },
            {
              "name": "variant",
              "type": "\"form\" | \"default\"",
              "required": false,
              "defaultValue": "'default'"
            }
          ]
        }
      }
    },
    {
      "name": "TimePicker",
      "slug": "time-picker",
      "category": "Forms & inputs",
      "description": "Time-of-day picker.",
      "docs": "https://ui.zenadmin.co/#/components/time-picker",
      "markdown": "https://ui.zenadmin.co/components/time-picker.md",
      "exports": [
        "TimePicker"
      ],
      "import": "import {TimePicker} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic usage",
        "24-hour format",
        "With seconds",
        "Disabled"
      ],
      "snippets": [
        "import {TimePicker} from '@hybr1d-tech/charizard'\n\nconst [maintenanceAt, setMaintenanceAt] = useState<number | undefined>()\n\n<TimePicker\n  timestamp={maintenanceAt}\n  onTimeChange={ts => setMaintenanceAt(ts)}\n/>",
        "import {TimePicker, TIME_PICKER_FORMAT} from '@hybr1d-tech/charizard'\n\n<TimePicker\n  format={TIME_PICKER_FORMAT.DUAL}\n  onTimeChange={ts => setSyncAt(ts)}\n/>"
      ],
      "props": {
        "TimePicker": {
          "props": [
            {
              "name": "onTimeChange",
              "type": "(timestamp: number) => void",
              "required": true
            },
            {
              "name": "containerClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "containerStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "enableSeconds",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "errorMsg",
              "type": "string",
              "required": false
            },
            {
              "name": "format",
              "type": "TIME_PICKER_FORMAT",
              "required": false,
              "defaultValue": "TIME_PICKER_FORMAT.STANDARD"
            },
            {
              "name": "inputStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "onErrorHeightChange",
              "type": "((height: number) => void)",
              "required": false
            },
            {
              "name": "timestamp",
              "type": "number",
              "required": false
            }
          ],
          "nativeProps": "input"
        }
      }
    },
    {
      "name": "ColorPicker",
      "slug": "color-picker",
      "category": "Forms & inputs",
      "description": "Color picker with a preset palette.",
      "docs": "https://ui.zenadmin.co/#/components/color-picker",
      "markdown": "https://ui.zenadmin.co/components/color-picker.md",
      "exports": [
        "ColorPicker"
      ],
      "import": "import {ColorPicker} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic usage",
        "Label and default color",
        "Error state"
      ],
      "snippets": [
        "import {ColorPicker} from '@hybr1d-tech/charizard'\n\n<ColorPicker\n  name=\"tag-color\"\n  onChange={color => setTagColor(color)}\n/>",
        "<ColorPicker\n  name=\"brand-color\"\n  label=\"Workspace accent color\"\n  required\n  defaultColor=\"#2980b9\"\n  onChange={color => setBrandColor(color)}\n/>"
      ],
      "props": {
        "ColorPicker": {
          "props": [
            {
              "name": "name",
              "type": "string",
              "required": true
            },
            {
              "name": "onChange",
              "type": "(color: string) => void",
              "required": true
            },
            {
              "name": "defaultColor",
              "type": "string",
              "required": false
            },
            {
              "name": "errorMsg",
              "type": "string | false",
              "required": false
            },
            {
              "name": "label",
              "type": "string",
              "required": false
            },
            {
              "name": "required",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            }
          ]
        }
      }
    },
    {
      "name": "Upload",
      "slug": "upload",
      "category": "Forms & inputs",
      "description": "File upload dropzone with progress and file management.",
      "docs": "https://ui.zenadmin.co/#/components/upload",
      "markdown": "https://ui.zenadmin.co/components/upload.md",
      "exports": [
        "Upload"
      ],
      "import": "import {Upload} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic upload (simulated)",
        "Single file",
        "Disabled"
      ],
      "snippets": [
        "import {DOCS_TYPE, Upload} from '@hybr1d-tech/charizard'\n\n<Upload\n  type={DOCS_TYPE.LEAVE_DOCS}\n  getUploadDoc={files => console.log(files)}\n  handleImageUpload={handleImageUpload} // presigned-URL flow in the real app\n  acceptedFileTypes=\"image/png, image/jpeg, image/webp, application/pdf\"\n  addDocumentSubtitle=\"PDF, PNG, WEBP and JPEG.\"\n  fileUploadLimit={2}\n  uploadFileLimit={5}\n/>"
      ],
      "props": {
        "Upload": {
          "props": [
            {
              "name": "getUploadDoc",
              "type": "(arg: any) => void",
              "required": true
            },
            {
              "name": "handleImageUpload",
              "type": "(images: any[], type: DOCS_TYPE, key?: string | undefined, value?: string | undefined, customUrl?: string | undefined, inventoryId?: string | null | undefined, softwareId?: string | null | undefined) => Promise<{ uploadedFiles: UploadFileType[]; isUploaded: boolean; }>",
              "required": true
            },
            {
              "name": "type",
              "type": "DOCS_TYPE",
              "required": true
            },
            {
              "name": "acceptedFileTypes",
              "type": "string",
              "required": false,
              "defaultValue": "'image/png, image/jpeg, image/jpeg, image/webp, application/pdf, .doc, .docx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'"
            },
            {
              "name": "addDocumentSubtitle",
              "type": "string",
              "required": false
            },
            {
              "name": "addDocumentText",
              "type": "string",
              "required": false,
              "defaultValue": "'Upload file'"
            },
            {
              "name": "additionalNode",
              "type": "ReactElement<unknown, string | JSXElementConstructor<any>>",
              "required": false
            },
            {
              "name": "alignContent",
              "type": "UPLOAD_ALIGN_BTN_CONTENT",
              "required": false
            },
            {
              "name": "beforeUploadHandler",
              "type": "(() => void)",
              "required": false
            },
            {
              "name": "customComponent",
              "type": "ReactNode",
              "required": false
            },
            {
              "name": "customUrl",
              "type": "string",
              "required": false
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "error",
              "type": "string | null",
              "required": false
            },
            {
              "name": "extraSubtitleText",
              "type": "string",
              "required": false
            },
            {
              "name": "fileContainerClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "fileUploadLimit",
              "type": "number",
              "required": false,
              "defaultValue": "10"
            },
            {
              "name": "inventoryId",
              "type": "string | null",
              "required": false,
              "defaultValue": "undefined"
            },
            {
              "name": "isMultiple",
              "type": "boolean",
              "required": false,
              "defaultValue": "true"
            },
            {
              "name": "preLoadedFiles",
              "type": "UploadFileType[]",
              "required": false,
              "defaultValue": "[]"
            },
            {
              "name": "setIsUploading",
              "type": "((arg: any) => void)",
              "required": false
            },
            {
              "name": "showFileList",
              "type": "boolean",
              "required": false,
              "defaultValue": "true"
            },
            {
              "name": "showUploadIcon",
              "type": "boolean",
              "required": false,
              "defaultValue": "true"
            },
            {
              "name": "singleFileClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "softwareId",
              "type": "string | null",
              "required": false
            },
            {
              "name": "uploadBtnClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "uploadFileLimit",
              "type": "number",
              "required": false,
              "defaultValue": "5"
            },
            {
              "name": "variant",
              "type": "string",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "Table",
      "slug": "table",
      "category": "Data display",
      "description": "Batteries-included data table on TanStack Table v8: filters, sorting, search, pagination, row selection, expansion, column reordering and export.",
      "docs": "https://ui.zenadmin.co/#/components/table",
      "markdown": "https://ui.zenadmin.co/components/table.md",
      "exports": [
        "Table"
      ],
      "import": "import {Table} from '@hybr1d-tech/charizard'",
      "sections": [
        "Inventory list"
      ],
      "snippets": [
        "import {createColumnHelper} from '@tanstack/react-table'\nimport {Table, TableDeviceCell, type TableFeatureSet} from '@hybr1d-tech/charizard'\n\n// Table v9 leads every generic with TFeatures. Pass charizard's TableFeatureSet so the\n// helper describes the same table <Table /> builds — that is what makes per-column\n// options like \\"
      ],
      "props": {
        "Table": {
          "props": [
            {
              "name": "columns",
              "type": "any",
              "required": true
            },
            {
              "name": "data",
              "type": "any",
              "required": true
            },
            {
              "name": "loaderConfig",
              "type": "{ text?: string | undefined; isFetching: boolean; isError: boolean; errMsg?: string | undefined; }",
              "required": true
            },
            {
              "name": "actionsConfig",
              "type": "{ isDropdownActions?: boolean | undefined; menuItems?: { label: string; iconSrc?: string | undefined; onClick: any; filterFn?: any; disabled?: boolean | ((data: any) => boolean) | undefined; }[] | undefined; }",
              "required": false,
              "description": "column for actions dropdown in the last row",
              "defaultValue": "{\n    isDropdownActions: false,\n  }"
            },
            {
              "name": "customActionItems",
              "type": "ReactElement<unknown, string | JSXElementConstructor<any>>[]",
              "required": false
            },
            {
              "name": "customColumnConfig",
              "type": "{ description?: string | undefined; columns?: TableCustomColumns | undefined; isPending: boolean; isError: boolean; handleSaveColumns: (columns: any) => Promise<void>; variant?: TableCustomColsVariant | undefined; }",
              "required": false,
              "description": "custom columns"
            },
            {
              "name": "emptyStateConfig",
              "type": "{ title?: string | undefined; desc?: string | undefined; btnText?: string | undefined; onClick?: any; icon?: string | undefined; customStyle?: CSSProperties | undefined; }",
              "required": false
            },
            {
              "name": "expansionConfig",
              "type": "{ getRows: (row: any) => any[] | undefined; columns?: ColumnDef<any, any>[] | undefined; entityName?: string | undefined; caption?: string | undefined; content?: ((row: any) => ReactNode) | undefined; expandMode?: \"multiple\" | \"single\" | undefined; }",
              "required": false,
              "description": "Expandable rows for one-to-many data (an order and its items, an invoice and\nits lines). An expanded parent reveals a nested table with its OWN header\nrow, because the two grains describe different things: an order has a date\nand a total, an item has a serial number and a delivery status. Sharing one\nheader would force every child field into a column defined for its parent.\n\nOpt-in: without this config the table behaves exactly as before — no\nexpander column, no expanded row model."
            },
            {
              "name": "exportConfig",
              "type": "{ isPending: boolean; isError: boolean; handleExport: any; isLegacy?: boolean | undefined; }",
              "required": false,
              "description": "export config (csv)"
            },
            {
              "name": "filterConfig",
              "type": "FilterConfig",
              "required": false,
              "description": "table filtering, data comes from an api"
            },
            {
              "name": "paginationConfig",
              "type": "{ metaData?: { total_items: number; items_on_page: number; page_no: number; } | undefined; page: number; setPage: (page: number) => void; limit: number; setLimit: (limit: number) => void; }",
              "required": false
            },
            {
              "name": "pinningConfig",
              "type": "{ columnPinning: ColumnPinningState; setColumnPinning: Dispatch<SetStateAction<ColumnPinningState>>; }",
              "required": false
            },
            {
              "name": "rowSelectionConfig",
              "type": "{ isCheckbox?: boolean | undefined; isRadio?: boolean | undefined; entityName: string; actions?: { iconSrc: string; label: string; onClick: any; }[] | undefined; setSelectedRows?: Dispatch<any> | undefined; iconSrc?: string | undefined; clearOnSearch?: boolean | undefined; rowIdKey: string; rowSelection?: {} | undefined; setRowSelection?: Dispatch<SetStateAction<{}>> | undefined; }",
              "required": false,
              "description": "Row checkbox or radio selection config",
              "defaultValue": "{\n    isCheckbox: false,\n    isRadio: false,\n    clearOnSearch: true,\n    entityName: '',\n    rowIdKey: 'id',\n  }"
            },
            {
              "name": "searchConfig",
              "type": "{ placeholder?: string | undefined; search: string; setSearch: any; }",
              "required": false,
              "description": "table search"
            },
            {
              "name": "sortConfig",
              "type": "{ sortBy: string; setSortBy: any; sortOrd: \"\" | \"asc\" | \"desc\"; setSortOrd: any; sortMap: Record<string, string>; }",
              "required": false,
              "description": "table sorting"
            },
            {
              "name": "tableStyleConfig",
              "type": "{ maxHeight?: string | undefined; stickyIds?: string[] | undefined; }",
              "required": false
            },
            {
              "name": "totalText",
              "type": "string",
              "required": false
            },
            {
              "name": "visibilityConfig",
              "type": "{ columnVisibility: ColumnVisibilityState; setColumnVisibility: Dispatch<SetStateAction<ColumnVisibilityState>>; }",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "TaskCards",
      "slug": "task-cards",
      "category": "Data display",
      "description": "Card list for task-style records with headers and pagination.",
      "docs": "https://ui.zenadmin.co/#/components/task-cards",
      "markdown": "https://ui.zenadmin.co/components/task-cards.md",
      "exports": [
        "TaskCards"
      ],
      "import": "import {TaskCards} from '@hybr1d-tech/charizard'",
      "sections": [
        "Task list"
      ],
      "snippets": [
        "import {TaskCards} from '@hybr1d-tech/charizard'\n\nconst headers = ['Task', 'Details', 'Status']\n\n// Renders link/navigation affordances, so it must live under a react-router context.\nexport function OpenTasks() {\n  return <TaskCards headers={headers} data={tasks} />\n}"
      ],
      "props": {
        "TaskCards": {
          "props": [
            {
              "name": "headers",
              "type": "string[]",
              "required": true
            },
            {
              "name": "data",
              "type": "ITask[]",
              "required": false
            },
            {
              "name": "emptyText",
              "type": "string",
              "required": false,
              "defaultValue": "'No requests'"
            },
            {
              "name": "isError",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "isLoading",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "labels",
              "type": "string[]",
              "required": false
            },
            {
              "name": "moduleAccess",
              "type": "{ hasDeviceAccess?: boolean | undefined; hasLeaveAccess?: boolean | undefined; }",
              "required": false
            },
            {
              "name": "onClicks",
              "type": "((data: ITask) => void)[][]",
              "required": false
            },
            {
              "name": "paginationConfig",
              "type": "{ metaData?: { total_items: number; items_on_page: number; page_no: number; } | undefined; page: number; setPage: (page: number) => void; limit: number; setLimit: (limit: number) => void; }",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "Badge",
      "slug": "badge",
      "category": "Data display",
      "description": "Small count or status badge.",
      "docs": "https://ui.zenadmin.co/#/components/badge",
      "markdown": "https://ui.zenadmin.co/components/badge.md",
      "exports": [
        "Badge"
      ],
      "import": "import {Badge} from '@hybr1d-tech/charizard'",
      "sections": [
        "Statuses",
        "Highlights",
        "Selected (removable)"
      ],
      "snippets": [
        "import {Badge, BADGE_STATUS} from '@hybr1d-tech/charizard'\n\n<Badge status={BADGE_STATUS.POSITIVE}>Compliant</Badge>\n<Badge status={BADGE_STATUS.WARNING}>Update pending</Badge>\n<Badge status={BADGE_STATUS.NEGATIVE}>Non-compliant</Badge>",
        "import {Badge, BADGE_STATUS, BADGE_HIGHLIGHT} from '@hybr1d-tech/charizard'\nimport infoIcon from './assets/info-circle.svg'\n\n<Badge highlight={BADGE_HIGHLIGHT.DOT} status={BADGE_STATUS.POSITIVE}>Online</Badge>\n<Badge highlight={BADGE_HIGHLIGHT.ICON} icon={infoIcon} status={BADGE_STATUS.HIGHLIGHT}>\n  Awaiting approval\n</Badge>"
      ],
      "props": {
        "Badge": {
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": true
            },
            {
              "name": "customSvgStyles",
              "type": "CSSProperties",
              "required": false,
              "defaultValue": "{}"
            },
            {
              "name": "highlight",
              "type": "BADGE_HIGHLIGHT",
              "required": false,
              "defaultValue": "BADGE_HIGHLIGHT.NONE"
            },
            {
              "name": "icon",
              "type": "string",
              "required": false
            },
            {
              "name": "onClick",
              "type": "() => void",
              "required": false
            },
            {
              "name": "selected",
              "type": "true | false",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "status",
              "type": "BADGE_STATUS",
              "required": false,
              "defaultValue": "BADGE_STATUS.DEFAULT"
            }
          ]
        }
      }
    },
    {
      "name": "Pill",
      "slug": "pill",
      "category": "Data display",
      "description": "Rounded pill label.",
      "docs": "https://ui.zenadmin.co/#/components/pill",
      "markdown": "https://ui.zenadmin.co/components/pill.md",
      "exports": [
        "Pill"
      ],
      "import": "import {Pill} from '@hybr1d-tech/charizard'",
      "sections": [
        "Statuses",
        "In context"
      ],
      "snippets": [
        "import {Pill, PILL_STATUS} from '@hybr1d-tech/charizard'\n\n<Pill>Procurement</Pill>\n<Pill status={PILL_STATUS.POSITIVE}>Delivered</Pill>\n<Pill status={PILL_STATUS.WARNING}>Awaiting quote</Pill>\n<Pill status={PILL_STATUS.NEGATIVE}>Payment overdue</Pill>"
      ],
      "props": {
        "Pill": {
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": true
            },
            {
              "name": "status",
              "type": "PILL_STATUS",
              "required": false,
              "defaultValue": "PILL_STATUS.DEFAULT"
            }
          ]
        }
      }
    },
    {
      "name": "Tag",
      "slug": "tag",
      "category": "Data display",
      "description": "Removable tag chip.",
      "docs": "https://ui.zenadmin.co/#/components/tag",
      "markdown": "https://ui.zenadmin.co/components/tag.md",
      "exports": [
        "Tag"
      ],
      "import": "import {Tag} from '@hybr1d-tech/charizard'",
      "sections": [
        "Statuses",
        "With icon and custom styles"
      ],
      "snippets": [
        "import {Tag, STATUS_MAP} from '@hybr1d-tech/charizard'\n\n<Tag status={STATUS_MAP.SUCCESS} text=\"Assigned\" />\n<Tag status={STATUS_MAP.WARNING} text=\"Unassigned\" />\n<Tag status={STATUS_MAP.INFO} text=\"In-transition\" />\n<Tag status={STATUS_MAP.ERROR} text=\"Under maintenance\" />\n<Tag status={STATUS_MAP.DEFAULT} text=\"Archived\" />",
        "import checkIcon from './assets/check.svg'\n\n<Tag status={STATUS_MAP.SUCCESS} text=\"MDM enrolled\" icon={checkIcon} />\n<Tag status={STATUS_MAP.INFO} text=\"Awaiting handover\" icon={infoIcon} />\n<Tag status={STATUS_MAP.DEFAULT} text=\"Spare pool\" customStyles={{borderRadius: 16}} />"
      ],
      "props": {
        "Tag": {
          "props": [
            {
              "name": "status",
              "type": "STATUS_MAP",
              "required": true
            },
            {
              "name": "text",
              "type": "string",
              "required": true
            },
            {
              "name": "customStyles",
              "type": "CSSProperties",
              "required": false,
              "defaultValue": "{}"
            },
            {
              "name": "icon",
              "type": "string",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "Status",
      "slug": "status",
      "category": "Data display",
      "description": "Colored status indicator with label.",
      "docs": "https://ui.zenadmin.co/#/components/status",
      "markdown": "https://ui.zenadmin.co/components/status.md",
      "exports": [
        "Status"
      ],
      "import": "import {Status} from '@hybr1d-tech/charizard'",
      "sections": [
        "Dot statuses",
        "Icon statuses"
      ],
      "snippets": [
        "import {Status, STATUS_STATUS} from '@hybr1d-tech/charizard'\n\n<Status status={STATUS_STATUS.ENABLED}>\n  <div className=\"zap-caption-medium\">MDM enrolled</div>\n</Status>\n<Status status={STATUS_STATUS.WARNING}>\n  <div className=\"zap-caption-medium\">OS update pending</div>\n</Status>\n<Status status={STATUS_STATUS.NODATA}>\n  <div className=\"zap-caption-medium\">Agent unreachable</div>\n</Status>",
        "<Status status={STATUS_STATUS.DONE}>\n  <div className=\"zap-caption-medium\">Onboarding complete</div>\n</Status>\n<Status status={STATUS_STATUS.CANCEL}>\n  <div className=\"zap-caption-medium\">Order cancelled</div>\n</Status>"
      ],
      "props": {
        "Status": {
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": true
            },
            {
              "name": "status",
              "type": "STATUS_STATUS",
              "required": false,
              "defaultValue": "STATUS_STATUS.INFO"
            }
          ]
        }
      }
    },
    {
      "name": "Avatar",
      "slug": "avatar",
      "category": "Data display",
      "description": "User avatar with image fallback.",
      "docs": "https://ui.zenadmin.co/#/components/avatar",
      "markdown": "https://ui.zenadmin.co/components/avatar.md",
      "exports": [
        "Avatar"
      ],
      "import": "import {Avatar} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic",
        "Custom sizes"
      ],
      "snippets": [
        "import {Avatar} from '@hybr1d-tech/charizard'\n\nconst user = {\n  first_name: 'Priya',\n  last_name: 'Nair',\n  work_email: 'priya.nair@acme.io',\n  profile_img_url: '...',\n}\n\n<Avatar user={user} />",
        "<Avatar user={user} imageStyles={{width: 24, height: 24}} />\n<Avatar user={user} imageStyles={{width: 40, height: 40}} />\n<Avatar user={user} imageStyles={{width: 64, height: 64}} />"
      ],
      "props": {
        "Avatar": {
          "props": [
            {
              "name": "user",
              "type": "any",
              "required": true
            },
            {
              "name": "imageStyles",
              "type": "CSSProperties",
              "required": false,
              "defaultValue": "{}"
            }
          ]
        }
      }
    },
    {
      "name": "UserChip",
      "slug": "user-chip",
      "category": "Data display",
      "description": "Compact user identity chip (avatar + name).",
      "docs": "https://ui.zenadmin.co/#/components/user-chip",
      "markdown": "https://ui.zenadmin.co/components/user-chip.md",
      "exports": [
        "UserChip"
      ],
      "import": "import {UserChip} from '@hybr1d-tech/charizard'",
      "sections": [
        "Statuses",
        "Selected"
      ],
      "snippets": [
        "import {UserChip, USER_CHIP_STATUS} from '@hybr1d-tech/charizard'\n\n<UserChip\n  status={USER_CHIP_STATUS.POSITIVE}\n  username=\"Priya Nair\"\n  profileImgUrl={priya.profile_img_url}\n/>",
        "<UserChip\n  selected\n  username=\"Marcus Chen\"\n  profileImgUrl={marcus.profile_img_url}\n/>"
      ],
      "props": {
        "UserChip": {
          "props": [
            {
              "name": "profileImgUrl",
              "type": "string",
              "required": false
            },
            {
              "name": "selected",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "status",
              "type": "USER_CHIP_STATUS",
              "required": false,
              "defaultValue": "USER_CHIP_STATUS.DEFAULT"
            },
            {
              "name": "username",
              "type": "string",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "UsersChip",
      "slug": "users-chip",
      "category": "Data display",
      "description": "Overflow-aware chip for a set of users.",
      "docs": "https://ui.zenadmin.co/#/components/users-chip",
      "markdown": "https://ui.zenadmin.co/components/users-chip.md",
      "exports": [
        "UsersChip"
      ],
      "import": "import {UsersChip} from '@hybr1d-tech/charizard'",
      "sections": [
        "Statuses",
        "Counts and empty state",
        "API-shaped data"
      ],
      "snippets": [
        "import {UsersChip, USER_CHIP_STATUS} from '@hybr1d-tech/charizard'\n\nconst users = [\n  {\n    first_name: 'Priya',\n    last_name: 'Nair',\n    work_email: 'priya.nair@acme.io',\n    profile_img_url: '...',\n    id: 'cea4d3ed-bc4b-4092-ba5d-8245a106e08d',\n  },\n  // ...\n]\n\n<UsersChip status={USER_CHIP_STATUS.POSITIVE} users={users} />",
        "<UsersChip users={users} userCount={45} />\n<UsersChip users={[]} />",
        "// rows straight from the users-list API response\n<UsersChip users={apiUsers.slice(0, 5)} userCount={meta.total_items} />"
      ],
      "props": {
        "UsersChip": {
          "props": [
            {
              "name": "users",
              "type": "Partial<UsersChipUser>[]",
              "required": true
            },
            {
              "name": "status",
              "type": "USER_CHIP_STATUS",
              "required": false,
              "defaultValue": "USER_CHIP_STATUS.DEFAULT"
            },
            {
              "name": "userCount",
              "type": "number",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "Accordion",
      "slug": "accordion",
      "category": "Data display",
      "description": "Expandable content sections.",
      "docs": "https://ui.zenadmin.co/#/components/accordion",
      "markdown": "https://ui.zenadmin.co/components/accordion.md",
      "exports": [
        "Accordion"
      ],
      "import": "import {Accordion} from '@hybr1d-tech/charizard'",
      "sections": [
        "Multiple expandable sections"
      ],
      "snippets": [
        "import {Accordion} from '@hybr1d-tech/charizard'\n\n<Accordion defaultActiveKey=\"mdm\" isMulti allEventKeys={['mdm', 'apps', 'offboarding']}>\n  <Accordion.Item eventKey=\"mdm\">\n    <Accordion.Header eventKey=\"mdm\">How do devices get enrolled into MDM?</Accordion.Header>\n    <Accordion.Collapse eventKey=\"mdm\">\n      <div>New devices enroll automatically at first boot via zero-touch provisioning.</div>\n    </Accordion.Collapse>\n  </Accordion.Item>\n\n  <Accordion.Item eventKey=\"apps\">\n    <Accordion.Header eventKey=\"apps\">Which apps are installed by default?</Accordion.Header>\n    <Accordion.Collapse eventKey=\"apps\">\n      <div>The baseline bundle: browser, VPN client, password manager and the ZenAdmin agent.</div>\n    </Accordion.Collapse>\n  </Accordion.Item>\n</Accordion>"
      ],
      "props": {
        "Accordion": {
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": true
            },
            {
              "name": "allEventKeys",
              "type": "string[]",
              "required": false,
              "defaultValue": "[]"
            },
            {
              "name": "collapsible",
              "type": "boolean",
              "required": false,
              "description": "Whether an accordion item can be closed after it has been expanded.",
              "defaultValue": "false"
            },
            {
              "name": "customClasses",
              "type": "string",
              "required": false
            },
            {
              "name": "customStyle",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "defaultActiveKey",
              "type": "string",
              "required": false
            },
            {
              "name": "defaultValue",
              "type": "string[]",
              "required": false,
              "description": "The initial value of the expanded accordion items.\nUse when you don't need to control the value of the accordion."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Whether the accordion items are disabled"
            },
            {
              "name": "id",
              "type": "string",
              "required": false,
              "description": "The unique identifier of the machine."
            },
            {
              "name": "isMulti",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "isOpenAll",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "multiple",
              "type": "boolean",
              "required": false,
              "description": "Whether multiple accordion items can be expanded at the same time.",
              "defaultValue": "false"
            },
            {
              "name": "onFocusChange",
              "type": "((details: FocusChangeDetails) => void)",
              "required": false,
              "description": "The callback fired when the focused accordion item changes."
            },
            {
              "name": "onValueChange",
              "type": "((details: ValueChangeDetails) => void)",
              "required": false,
              "description": "The callback fired when the state of expanded/collapsed accordion items changes."
            },
            {
              "name": "orientation",
              "type": "\"horizontal\" | \"vertical\"",
              "required": false,
              "description": "The orientation of the accordion items.",
              "defaultValue": "\"vertical\""
            },
            {
              "name": "value",
              "type": "string[]",
              "required": false,
              "description": "The controlled value of the expanded accordion items."
            }
          ]
        }
      }
    },
    {
      "name": "Progress",
      "slug": "progress",
      "category": "Data display",
      "description": "Progress bar.",
      "docs": "https://ui.zenadmin.co/#/components/progress",
      "markdown": "https://ui.zenadmin.co/components/progress.md",
      "exports": [
        "Progress"
      ],
      "import": "import {Progress} from '@hybr1d-tech/charizard'",
      "sections": [
        "Stepper wizard",
        "Header actions and skip"
      ],
      "snippets": [
        "import {Progress} from '@hybr1d-tech/charizard'\n\n<Progress\n  steps={[\n    {label: 'Select device', component: <SelectDevice />, isError: false},\n    {label: 'Assign user', component: <AssignUser />, isError: false},\n    {label: 'Review', component: <Review />, isError: false},\n  ]}\n  onCancelClick={() => console.log('cancelled')}\n  onFinalStepClick={() => console.log('submitted')}\n  lastStepFooterContinueBtnText=\"Create order\"\n/>"
      ],
      "props": {
        "Progress": {
          "props": [
            {
              "name": "lastStepFooterContinueBtnText",
              "type": "string",
              "required": true,
              "description": "text to show on footer continue button when the step is last step",
              "defaultValue": "'Confirm'"
            },
            {
              "name": "onCancelClick",
              "type": "() => void",
              "required": true,
              "description": "handle cancel click"
            },
            {
              "name": "onFinalStepClick",
              "type": "() => void",
              "required": true,
              "description": "handle final step click"
            },
            {
              "name": "steps",
              "type": "{ label: string; component: ReactNode; isError: boolean; onContinueClick?: Function | undefined; }[]",
              "required": true,
              "description": "steps to show\nif there isError is true, user won't be able to click on Continue or finish button"
            },
            {
              "name": "allowNavigationOnStepClick",
              "type": "boolean",
              "required": false,
              "description": "allow navigation of steps when user click on certain step",
              "defaultValue": "true"
            },
            {
              "name": "jumpToStep",
              "type": "number",
              "required": false,
              "description": "directly jump to particular step (index starts from 0)",
              "defaultValue": "0"
            },
            {
              "name": "lastStepHeaderContinueBtnText",
              "type": "string",
              "required": false,
              "description": "text to show on header continue button when the step is last step",
              "defaultValue": "'Finish'"
            },
            {
              "name": "onSkipClick",
              "type": "(() => void)",
              "required": false,
              "description": "on skip click",
              "defaultValue": "() => {}"
            },
            {
              "name": "showFooter",
              "type": "boolean",
              "required": false,
              "description": "show footer",
              "defaultValue": "true"
            },
            {
              "name": "showHeaderBtns",
              "type": "boolean",
              "required": false,
              "description": "show buttons on header",
              "defaultValue": "false"
            },
            {
              "name": "showSkipBtn",
              "type": "boolean",
              "required": false,
              "description": "show skip button or not",
              "defaultValue": "false"
            },
            {
              "name": "skipBtnText",
              "type": "string",
              "required": false,
              "description": "skip button text",
              "defaultValue": "'Skip and continue'"
            },
            {
              "name": "stepToShowSkipBtn",
              "type": "number",
              "required": false,
              "description": "step to show skip button (counting starts from zero)",
              "defaultValue": "0"
            }
          ]
        }
      }
    },
    {
      "name": "AsyncImage",
      "slug": "async-image",
      "category": "Data display",
      "description": "Image with async loading state and fallback.",
      "docs": "https://ui.zenadmin.co/#/components/async-image",
      "markdown": "https://ui.zenadmin.co/components/async-image.md",
      "exports": [
        "AsyncImage"
      ],
      "import": "import {AsyncImage} from '@hybr1d-tech/charizard'",
      "sections": [
        "Loaded image",
        "Loading state"
      ],
      "snippets": [
        "import {AsyncImage} from '@hybr1d-tech/charizard'\n\n<AsyncImage\n  src={product.image_url}\n  alt='MacBook Pro 14\" M4'\n  className={classes.thumb}\n/>",
        "<AsyncImage\n  src=\"/cdn/product-shots/still-uploading.png\"\n  alt=\"Product shot\"\n  className={classes.banner}\n/>"
      ],
      "props": {
        "AsyncImage": {
          "props": [
            {
              "name": "alt",
              "type": "string",
              "required": true
            },
            {
              "name": "src",
              "type": "string",
              "required": true
            }
          ],
          "nativeProps": "img"
        }
      }
    },
    {
      "name": "SVG",
      "slug": "svg",
      "category": "Data display",
      "description": "Inline SVG renderer with CSS-filter coloring.",
      "docs": "https://ui.zenadmin.co/#/components/svg",
      "markdown": "https://ui.zenadmin.co/components/svg.md",
      "exports": [
        "SVG"
      ],
      "import": "import {SVG} from '@hybr1d-tech/charizard'",
      "sections": [
        "Library icons",
        "Sizing, coloring and clicks"
      ],
      "snippets": [
        "import {SVG} from '@hybr1d-tech/charizard'\nimport searchIcon from './assets/search.svg'\n\n<SVG path={searchIcon} width={24} height={24} />",
        "<SVG path={checkIcon} width={16} height={16} />\n<SVG path={checkIcon} width={32} height={32} customSvgStyles={{fill: 'var(--status-success-s50)'}} />\n<SVG path={plusIcon} width={24} height={24} handleClick={() => addRow()} />"
      ],
      "props": {
        "SVG": {
          "props": [
            {
              "name": "path",
              "type": "string",
              "required": true
            },
            {
              "name": "customSpanStyles",
              "type": "CSSProperties",
              "required": false,
              "defaultValue": "{}"
            },
            {
              "name": "customSvgStyles",
              "type": "CSSProperties",
              "required": false,
              "defaultValue": "{}"
            },
            {
              "name": "handleClick",
              "type": "((e: any) => void)",
              "required": false
            },
            {
              "name": "height",
              "type": "number",
              "required": false
            },
            {
              "name": "spanClassName",
              "type": "string",
              "required": false,
              "defaultValue": "''"
            },
            {
              "name": "svgClassName",
              "type": "string",
              "required": false,
              "defaultValue": "''"
            },
            {
              "name": "width",
              "type": "number",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "Modal",
      "slug": "modal",
      "category": "Overlays & feedback",
      "description": "Dialog with header, scrollable body, footer buttons and size variants.",
      "docs": "https://ui.zenadmin.co/#/components/modal",
      "markdown": "https://ui.zenadmin.co/components/modal.md",
      "exports": [
        "ModalV2"
      ],
      "import": "import {ModalV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic modal",
        "Backdrop",
        "Hidden header"
      ],
      "snippets": [
        "import {ModalV2, Button, BUTTON_VARIANT, useDisclosure, type DialogFooterButtons} from '@hybr1d-tech/charizard'\n\nconst {isOpen, onOpen, onClose} = useDisclosure()\n\nconst buttons: DialogFooterButtons = [\n  {variant: BUTTON_VARIANT.SECONDARY, btnText: 'Cancel', onClick: onClose},\n  {variant: BUTTON_VARIANT.PRIMARY, btnText: 'Confirm', onClick: onClose},\n]\n\n<Button onClick={onOpen}>Open ModalV2</Button>\n<ModalV2\n  title=\"Order laptop\"\n  subTitle=\"MacBook Pro 14-inch, M4 Pro\"\n  isOpen={isOpen}\n  onClose={onClose}\n  footerButtons={buttons}\n>\n  Modal body content goes here.\n</ModalV2>"
      ],
      "props": {
        "ModalV2": {
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": true,
              "description": "Content to be displayed inside the modal."
            },
            {
              "name": "footerButtons",
              "type": "DialogFooterButtons",
              "required": true,
              "description": "Array of footer buttons for the modal."
            },
            {
              "name": "title",
              "type": "string",
              "required": true,
              "description": "Title of the modal."
            },
            {
              "name": "closeOnInteractOutside",
              "type": "boolean",
              "required": false
            },
            {
              "name": "customModalClasses",
              "type": "string",
              "required": false
            },
            {
              "name": "hideHeader",
              "type": "boolean",
              "required": false,
              "defaultValue": "false"
            },
            {
              "name": "isOpen",
              "type": "boolean",
              "required": false,
              "description": "Indicates if the modal is open."
            },
            {
              "name": "onClose",
              "type": "(() => void)",
              "required": false,
              "description": "Callback function to close the modal."
            },
            {
              "name": "onCustomInteractOutside",
              "type": "((event: InteractOutsideEvent) => void)",
              "required": false
            },
            {
              "name": "showBackdrop",
              "type": "boolean",
              "required": false,
              "description": "Indicates whether to show a backdrop behind the modal.",
              "defaultValue": "false"
            },
            {
              "name": "subTitle",
              "type": "string",
              "required": false,
              "description": "Optional subtitle of the modal."
            },
            {
              "name": "trigger",
              "type": "ReactNode",
              "required": false,
              "description": "Optional trigger element to open the modal."
            }
          ]
        }
      }
    },
    {
      "name": "Drawer",
      "slug": "drawer",
      "category": "Overlays & feedback",
      "description": "Slide-in side panel that locks body scroll while open.",
      "docs": "https://ui.zenadmin.co/#/components/drawer",
      "markdown": "https://ui.zenadmin.co/components/drawer.md",
      "exports": [
        "DrawerV2"
      ],
      "import": "import {DrawerV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic drawer",
        "Sizes & position"
      ],
      "snippets": [
        "import {DrawerV2, BUTTON_VARIANT, useDisclosure, type DialogFooterButtons} from '@hybr1d-tech/charizard'\n\nconst {isOpen, onOpen, onClose} = useDisclosure()\n\nconst buttons: DialogFooterButtons = [\n  {variant: BUTTON_VARIANT.SECONDARY, btnText: 'Cancel', onClick: onClose},\n  {variant: BUTTON_VARIANT.PRIMARY, btnText: 'Save', onClick: onClose},\n]\n\n<DrawerV2\n  isOpen={isOpen}\n  onClose={onClose}\n  title=\"Edit workflow\"\n  subTitle=\"Onboarding — new joiner\"\n  size=\"md\"\n  buttons={buttons}\n>\n  Drawer content goes here.\n</DrawerV2>"
      ],
      "props": {
        "DrawerV2": {
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": true,
              "description": "Drawer content"
            },
            {
              "name": "isOpen",
              "type": "boolean",
              "required": true,
              "description": "Drawer is open or not"
            },
            {
              "name": "onClose",
              "type": "() => void",
              "required": true,
              "description": "Callback function when drawer is closed"
            },
            {
              "name": "buttons",
              "type": "DialogFooterButtons",
              "required": false,
              "description": "footer buttons to show"
            },
            {
              "name": "contentClassName",
              "type": "string",
              "required": false,
              "description": "Drawer content className"
            },
            {
              "name": "customContainerStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "customFooter",
              "type": "ReactNode",
              "required": false,
              "description": "Custom drawer footer"
            },
            {
              "name": "customHeader",
              "type": "ReactNode",
              "required": false,
              "description": "Custom drawer header"
            },
            {
              "name": "drawerPosition",
              "type": "\"left\" | \"right\"",
              "required": false,
              "description": "Drawer position",
              "defaultValue": "'right'"
            },
            {
              "name": "footerAddon",
              "type": "ReactNode",
              "required": false
            },
            {
              "name": "footerClassName",
              "type": "string",
              "required": false,
              "description": "Drawer footer className"
            },
            {
              "name": "headerClassName",
              "type": "string",
              "required": false,
              "description": "Drawer header className"
            },
            {
              "name": "showBackdrop",
              "type": "boolean",
              "required": false,
              "description": "Show backdrop or not",
              "defaultValue": "true"
            },
            {
              "name": "showFooter",
              "type": "boolean",
              "required": false,
              "description": "Show footer or not",
              "defaultValue": "true"
            },
            {
              "name": "showHeader",
              "type": "boolean",
              "required": false,
              "description": "Show header or not",
              "defaultValue": "true"
            },
            {
              "name": "size",
              "type": "\"sm\" | \"md\" | \"lg\" | \"xlg\" | \"xxlg\"",
              "required": false,
              "description": "Drawer size",
              "defaultValue": "'md'"
            },
            {
              "name": "subTitle",
              "type": "string",
              "required": false,
              "description": "Drawer subTitle"
            },
            {
              "name": "title",
              "type": "string",
              "required": false,
              "description": "Drawer title"
            }
          ]
        }
      }
    },
    {
      "name": "Popover",
      "slug": "popover",
      "category": "Overlays & feedback",
      "description": "Anchored popover with trigger and content.",
      "docs": "https://ui.zenadmin.co/#/components/popover",
      "markdown": "https://ui.zenadmin.co/components/popover.md",
      "exports": [
        "Popover"
      ],
      "import": "import {Popover} from '@hybr1d-tech/charizard'",
      "sections": [
        "Click to open",
        "Open on hover",
        "Placement & background"
      ],
      "snippets": [
        "import {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverCloseButton,\n} from '@hybr1d-tech/charizard'\n\n<Popover placement=\"bottom\">\n  <PopoverTrigger openOnHover={false}>Click me</PopoverTrigger>\n  <PopoverContent>\n    <PopoverTitle>Popover title</PopoverTitle>\n    <PopoverDescription>Anchored content with an arrow.</PopoverDescription>\n    <PopoverCloseButton>Close</PopoverCloseButton>\n  </PopoverContent>\n</Popover>"
      ],
      "props": {
        "Popover": {
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": true,
              "description": "Content of the trigger"
            },
            {
              "name": "closeOnScroll",
              "type": "boolean",
              "required": false,
              "description": "close popover on scroll",
              "defaultValue": "false"
            },
            {
              "name": "containerRef",
              "type": "RefObject<HTMLElement>",
              "required": false,
              "description": "when using closeOnScroll, its necessary to pass containerRef to track scroll movement of the container you want to close the popover with respect to."
            },
            {
              "name": "placement",
              "type": "Placement",
              "required": false,
              "description": "Placement of the popover",
              "defaultValue": "'top'"
            },
            {
              "name": "popoverProps",
              "type": "any",
              "required": false,
              "description": "Props to pass to the popover machine"
            }
          ]
        }
      }
    },
    {
      "name": "Tooltip",
      "slug": "tooltip",
      "category": "Overlays & feedback",
      "description": "Hover tooltip with placement and delay controls.",
      "docs": "https://ui.zenadmin.co/#/components/tooltip",
      "markdown": "https://ui.zenadmin.co/components/tooltip.md",
      "exports": [
        "TooltipV2"
      ],
      "import": "import {TooltipV2} from '@hybr1d-tech/charizard'",
      "sections": [
        "Variants",
        "Placements",
        "Content truncation"
      ],
      "snippets": [
        "import {TooltipV2, Button} from '@hybr1d-tech/charizard'\n\n<TooltipV2\n  placement=\"top\"\n  variant=\"dark\"\n  trigger={<Button>Hover me</Button>}\n  content=\"This is a tooltip\"\n/>"
      ],
      "props": {
        "TooltipV2": {
          "props": [
            {
              "name": "content",
              "type": "ReactNode",
              "required": true,
              "defaultValue": "''"
            },
            {
              "name": "trigger",
              "type": "ReactNode",
              "required": true
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "defaultValue": "''"
            },
            {
              "name": "contentMaxLength",
              "type": "number | null",
              "required": false,
              "defaultValue": "TOOLTIP_DEFAULTS.contentMaxLength"
            },
            {
              "name": "customStyle",
              "type": "CSSProperties",
              "required": false,
              "defaultValue": "{}"
            },
            {
              "name": "opacity",
              "type": "number",
              "required": false,
              "defaultValue": "TOOLTIP_DEFAULTS.opacity"
            },
            {
              "name": "placement",
              "type": "\"left\" | \"right\" | \"bottom\" | \"top\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"",
              "required": false,
              "defaultValue": "'top'"
            },
            {
              "name": "portalClass",
              "type": "string",
              "required": false
            },
            {
              "name": "portalId",
              "type": "string",
              "required": false
            },
            {
              "name": "variant",
              "type": "\"dark\" | \"light\" | \"success\" | \"warning\" | \"error\" | \"info\"",
              "required": false,
              "defaultValue": "'dark'"
            }
          ]
        }
      }
    },
    {
      "name": "Alert",
      "slug": "alert",
      "category": "Overlays & feedback",
      "description": "Inline alert banner in info, success, warning and error intents.",
      "docs": "https://ui.zenadmin.co/#/components/alert",
      "markdown": "https://ui.zenadmin.co/components/alert.md",
      "exports": [
        "Alert"
      ],
      "import": "import {Alert} from '@hybr1d-tech/charizard'",
      "sections": [
        "Alert types",
        "Dismissible",
        "Expandable (show more)"
      ],
      "snippets": [
        "import {Alert, ALERT_TYPES} from '@hybr1d-tech/charizard'\n\n<Alert\n  alertType={ALERT_TYPES.DEFAULT}\n  header={<div>Alert header</div>}\n  body={<p>Supporting detail for the alert goes here.</p>}\n/>",
        "import {Alert, ALERT_TYPES, ALERT_ACTION_TYPES} from '@hybr1d-tech/charizard'\n\nconst [showMore, setShowMore] = React.useState(false)\n\n<Alert\n  alertType={ALERT_TYPES.WARNING}\n  actionType={ALERT_ACTION_TYPES.SHOW_MORE}\n  header={<div>Some devices are missing warranty info</div>}\n  body={<p>Expanded details are revealed by the chevron.</p>}\n  showMore={showMore}\n  setShowMore={setShowMore}\n/>"
      ],
      "props": {
        "Alert": {
          "props": [
            {
              "name": "alertType",
              "type": "ALERT_TYPES",
              "required": true
            },
            {
              "name": "header",
              "type": "ReactNode",
              "required": true
            },
            {
              "name": "actionType",
              "type": "ALERT_ACTION_TYPES",
              "required": false
            },
            {
              "name": "body",
              "type": "ReactNode",
              "required": false
            },
            {
              "name": "hide",
              "type": "boolean",
              "required": false
            },
            {
              "name": "setHide",
              "type": "Dispatch<SetStateAction<boolean>>",
              "required": false
            },
            {
              "name": "setShowMore",
              "type": "Dispatch<SetStateAction<boolean>>",
              "required": false
            },
            {
              "name": "showMore",
              "type": "boolean",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "Toasts",
      "slug": "toasts",
      "category": "Overlays & feedback",
      "description": "Toast notifications (success, error, info, warning) on react-toastify.",
      "docs": "https://ui.zenadmin.co/#/components/toasts",
      "markdown": "https://ui.zenadmin.co/components/toasts.md",
      "exports": [
        "Toasts"
      ],
      "import": "import {Toasts} from '@hybr1d-tech/charizard'",
      "sections": [
        "Toast variants",
        "With supporting text",
        "Options"
      ],
      "snippets": [
        "import {toastSuccess, toastError, toastInfo, toastWarning} from '@hybr1d-tech/charizard'\n\n// Mount <ToastContainer /> from react-toastify once at the app root,\n// then fire toasts from anywhere:\ntoastSuccess({msg: 'Inventory item added'})\ntoastInfo({msg: 'Sync scheduled for tonight'})\ntoastWarning({msg: 'License expires in 7 days'})\ntoastError({msg: 'Could not reach the MDM server'})",
        "toastSuccess({\n  msg: 'Successfully added inventory item',\n  info: 'The device is now available to fulfill orders placed before today.',\n})"
      ],
      "props": {}
    },
    {
      "name": "Loader",
      "slug": "loader",
      "category": "Overlays & feedback",
      "description": "Loading spinners in multiple styles.",
      "docs": "https://ui.zenadmin.co/#/components/loader",
      "markdown": "https://ui.zenadmin.co/components/loader.md",
      "exports": [
        "Loader"
      ],
      "import": "import {Loader} from '@hybr1d-tech/charizard'",
      "sections": [
        "Spinner variants",
        "Custom size"
      ],
      "snippets": [
        "import {Loader, LOADER_VARIANT} from '@hybr1d-tech/charizard'\n\n<Loader variant={LOADER_VARIANT.RING} />\n<Loader variant={LOADER_VARIANT.DUAL_RING} />\n<Loader variant={LOADER_VARIANT.ELLIPSES} />\n<Loader variant={LOADER_VARIANT.GRID} />\n<Loader variant={LOADER_VARIANT.HOURGLASS} />\n<Loader variant={LOADER_VARIANT.RIPPLE} />\n<Loader variant={LOADER_VARIANT.ROLLER} />\n<Loader variant={LOADER_VARIANT.SPINNER} />"
      ],
      "props": {
        "Loader": {
          "props": [
            {
              "name": "containerStyle",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "loaderStyle",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "size",
              "type": "number",
              "required": false
            },
            {
              "name": "variant",
              "type": "LOADER_VARIANT",
              "required": false,
              "defaultValue": "LOADER_VARIANT.RING"
            }
          ]
        }
      }
    },
    {
      "name": "Skeleton",
      "slug": "skeleton",
      "category": "Overlays & feedback",
      "description": "Skeleton loading placeholders.",
      "docs": "https://ui.zenadmin.co/#/components/skeleton",
      "markdown": "https://ui.zenadmin.co/components/skeleton.md",
      "exports": [
        "Skeleton"
      ],
      "import": "import {Skeleton} from '@hybr1d-tech/charizard'",
      "sections": [
        "Text placeholder",
        "Shapes",
        "Composite card"
      ],
      "snippets": [
        "import {Skeleton} from '@hybr1d-tech/charizard'\n\n// Skeleton renders an animated span; give it dimensions via style or className.\n<Skeleton style={{display: 'block', width: 320, height: 14}} />\n<Skeleton style={{display: 'block', width: 280, height: 14}} />\n<Skeleton style={{display: 'block', width: 180, height: 14}} />"
      ],
      "props": {
        "Skeleton": {
          "props": [],
          "nativeProps": "div"
        }
      }
    },
    {
      "name": "Tabs",
      "slug": "tabs",
      "category": "Navigation & layout",
      "description": "Tab switcher with panels.",
      "docs": "https://ui.zenadmin.co/#/components/tabs",
      "markdown": "https://ui.zenadmin.co/components/tabs.md",
      "exports": [
        "Tabs"
      ],
      "import": "import {Tabs} from '@hybr1d-tech/charizard'",
      "sections": [
        "Controlled tabs",
        "Custom styling"
      ],
      "snippets": [
        "const [activeKey, setActiveKey] = React.useState('overview')\n\n<Tabs id=\"device-tabs\" activeKey={activeKey} onSelect={setActiveKey}>\n  <Tab title=\"Overview\" eventKey=\"overview\" isActive={false} onClick={() => {}}>\n    <p>Overview pane</p>\n  </Tab>\n  <Tab title=\"Specifications\" eventKey=\"specs\" isActive={false} onClick={() => {}}>\n    <p>Specifications pane</p>\n  </Tab>\n  <Tab title=\"Activity\" eventKey=\"activity\" isActive={false} onClick={() => {}}>\n    <p>Activity pane</p>\n  </Tab>\n</Tabs>",
        "<Tabs\n  id=\"billing-tabs\"\n  activeKey={activeKey}\n  onSelect={setActiveKey}\n  customStyles={{maxWidth: 420}}\n>\n  <Tab\n    title=\"Monthly\"\n    eventKey=\"monthly\"\n    customStyles={{letterSpacing: '0.04em'}}\n    isActive={false}\n    onClick={() => {}}\n  >\n    Billed every month.\n  </Tab>\n  <Tab\n    title=\"Yearly\"\n    eventKey=\"yearly\"\n    customStyles={{letterSpacing: '0.04em'}}\n    isActive={false}\n    onClick={() => {}}\n  >\n    Billed once a year.\n  </Tab>\n</Tabs>"
      ],
      "props": {
        "Tabs": {
          "props": [
            {
              "name": "activeKey",
              "type": "string",
              "required": true
            },
            {
              "name": "children",
              "type": "ReactElement<TabProps, string | JSXElementConstructor<any>>[]",
              "required": true
            },
            {
              "name": "id",
              "type": "string",
              "required": true
            },
            {
              "name": "onSelect",
              "type": "(key: string) => void",
              "required": true
            },
            {
              "name": "customClassName",
              "type": "string",
              "required": false,
              "defaultValue": "''"
            },
            {
              "name": "customStyles",
              "type": "CSSProperties",
              "required": false,
              "defaultValue": "{}"
            }
          ]
        }
      }
    },
    {
      "name": "LayoutTabs",
      "slug": "layout-tabs",
      "category": "Navigation & layout",
      "description": "Route-level tab navigation.",
      "docs": "https://ui.zenadmin.co/#/components/layout-tabs",
      "markdown": "https://ui.zenadmin.co/components/layout-tabs.md",
      "exports": [
        "LayoutTabs"
      ],
      "import": "import {LayoutTabs} from '@hybr1d-tech/charizard'",
      "sections": [
        "Basic layout tabs",
        "onValueChange callback"
      ],
      "snippets": [
        "<LayoutTabs\n  defaultValue=\"details\"\n  tabs={[\n    {label: 'Details', value: 'details', content: <DetailsPane />},\n    {label: 'Apps', value: 'apps', content: <AppsPane />},\n    {label: 'Security', value: 'security', content: <SecurityPane />},\n  ]}\n/>",
        "const [current, setCurrent] = React.useState('open')\n\n<LayoutTabs\n  defaultValue=\"open\"\n  tabs={orderTabs}\n  tabClassName=\"my-tab-list\"\n  onValueChange={value => setCurrent(value)}\n/>"
      ],
      "props": {
        "LayoutTabs": {
          "props": [
            {
              "name": "defaultValue",
              "type": "string",
              "required": true,
              "description": "default value (initial tab to render)"
            },
            {
              "name": "tabs",
              "type": "{ label: string; value: string; content: ReactNode; }[]",
              "required": true,
              "description": "tabs to render"
            },
            {
              "name": "onValueChange",
              "type": "((value: string) => void)",
              "required": false,
              "description": "callback function when tab is changed"
            },
            {
              "name": "tabClassName",
              "type": "string",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "Breadcrumbs",
      "slug": "breadcrumbs",
      "category": "Navigation & layout",
      "description": "Router-aware breadcrumb trail.",
      "docs": "https://ui.zenadmin.co/#/components/breadcrumbs",
      "markdown": "https://ui.zenadmin.co/components/breadcrumbs.md",
      "exports": [
        "Breadcrumbs"
      ],
      "import": "import {Breadcrumbs} from '@hybr1d-tech/charizard'",
      "sections": [
        "Trail from the global store",
        "Overflow collapsing (4+ items)"
      ],
      "snippets": [
        "// in the app shell (rendered once):\n<Breadcrumbs />\n\n// in a page component:\nuseBreadcrumbs([\n  {label: 'Home', href: '/'},\n  {label: 'Tabs', href: '/components/tabs'},\n  {label: 'Breadcrumbs', active: true},\n])",
        "useBreadcrumbs([\n  {label: 'Home', href: '/'},\n  {label: 'Tabs', href: '/components/tabs'},\n  {label: 'LayoutTabs', href: '/components/layout-tabs'},\n  {label: 'EmptyState', href: '/components/empty-state'},\n  {label: 'Breadcrumbs', active: true},\n])"
      ],
      "props": {}
    },
    {
      "name": "EmptyState",
      "slug": "empty-state",
      "category": "Navigation & layout",
      "description": "Empty-state placeholder with illustration and actions.",
      "docs": "https://ui.zenadmin.co/#/components/empty-state",
      "markdown": "https://ui.zenadmin.co/components/empty-state.md",
      "exports": [
        "EmptyState"
      ],
      "import": "import {EmptyState} from '@hybr1d-tech/charizard'",
      "sections": [
        "Default (column layout)",
        "Row layout",
        "With action button"
      ],
      "snippets": [
        "<EmptyState\n  icon={boxIconSvg}\n  title=\"No devices yet\"\n  desc=\"Devices will appear here once they are enrolled or imported.\"\n/>",
        "<EmptyState\n  icon={boxIconSvg}\n  title=\"No team members\"\n  desc=\"Invite your teammates to start assigning devices.\"\n  btnText=\"Invite people\"\n  onClick={handleInvite}\n/>"
      ],
      "props": {
        "EmptyState": {
          "props": [
            {
              "name": "icon",
              "type": "string",
              "required": true
            },
            {
              "name": "title",
              "type": "string",
              "required": true
            },
            {
              "name": "btnText",
              "type": "string",
              "required": false
            },
            {
              "name": "customSvgClassName",
              "type": "string",
              "required": false
            },
            {
              "name": "customSvgStyles",
              "type": "CSSProperties",
              "required": false
            },
            {
              "name": "desc",
              "type": "string",
              "required": false
            },
            {
              "name": "flexDir",
              "type": "\"column\" | \"row\"",
              "required": false,
              "defaultValue": "'column'"
            },
            {
              "name": "onClick",
              "type": "MouseEventHandler<HTMLButtonElement>",
              "required": false
            }
          ]
        }
      }
    },
    {
      "name": "Error",
      "slug": "error",
      "category": "Navigation & layout",
      "description": "Full-page error layouts (404, 500).",
      "docs": "https://ui.zenadmin.co/#/components/error",
      "markdown": "https://ui.zenadmin.co/components/error.md",
      "exports": [
        "Error"
      ],
      "import": "import {Error} from '@hybr1d-tech/charizard'",
      "sections": [
        "404 page",
        "500 page",
        "Error boundary fallback"
      ],
      "snippets": [
        "// route-level usage: renders Error404 at ./404 (and as the index) and Error500 at ./500\n<Route path=\"/error/*\" element={<ErrorsPage homeRoute=\"/\" />} />\n\n// or compose the pieces directly:\n<ErrorsLayout homeRoute=\"/\">\n  <Error404 />\n</ErrorsLayout>",
        "<ErrorsLayout homeRoute=\"/\">\n  <Error500 />\n</ErrorsLayout>"
      ],
      "props": {}
    },
    {
      "name": "Helmet",
      "slug": "helmet",
      "category": "Navigation & layout",
      "description": "Document head / page title manager.",
      "docs": "https://ui.zenadmin.co/#/components/helmet",
      "markdown": "https://ui.zenadmin.co/components/helmet.md",
      "exports": [
        "Helmet"
      ],
      "import": "import {Helmet} from '@hybr1d-tech/charizard'",
      "sections": [
        "Setting the document title",
        "Full metadata API"
      ],
      "snippets": [
        "<Helmet title=\"Devices — ZenAdmin\" />",
        "<Helmet\n  title=\"Devices — ZenAdmin\"\n  description=\"Manage every company device from one place.\"\n  keywords=\"devices, MDM, IT asset management\"\n  canonicalUrl=\"https://app.zenadmin.ai/devices\"\n  ogImage=\"https://app.zenadmin.ai/og/devices.png\"\n  site=\"https://app.zenadmin.ai\"\n>\n  {/* extra head tags as children */}\n  <meta name=\"robots\" content=\"noindex\" />\n</Helmet>"
      ],
      "props": {
        "Helmet": {
          "props": [
            {
              "name": "canonicalUrl",
              "type": "string",
              "required": false,
              "defaultValue": "typeof window !== 'undefined' ? window.location.href : ''"
            },
            {
              "name": "children",
              "type": "ReactNode",
              "required": false
            },
            {
              "name": "description",
              "type": "string",
              "required": false
            },
            {
              "name": "keywords",
              "type": "string",
              "required": false
            },
            {
              "name": "ogImage",
              "type": "string",
              "required": false,
              "defaultValue": "'assets/logo-full.svg'"
            },
            {
              "name": "site",
              "type": "string",
              "required": false,
              "defaultValue": "typeof window !== 'undefined' ? window.location.href : ''"
            },
            {
              "name": "title",
              "type": "string",
              "required": false
            }
          ]
        }
      }
    }
  ]
}