Documentor
==========

.. raw:: html

   <style data-uid="hXdYW3t-_5E">@keyframes quirl-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes quirl-shimmer{0%{background-position:150% 0;}100%{background-position:-150% 0;}}@keyframes quirl-fade-in{from{opacity:0;}to{opacity:1;}}@keyframes quirl-scale-in{from{opacity:0;transform:scale(0.92);}to{opacity:1;transform:scale(1);}}@keyframes quirl-slide-up{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}@keyframes quirl-bounce-dot{0%,80%,100%{transform:scale(0.6);opacity:0.5;}40%{transform:scale(1);opacity:1;}}</style><div data-uid="z7SZtYmiI3w" id="documentor-docs" style="padding:clamp(20px, 5vw, 32px);gap:20px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;background:#111318;border:1px solid rgba(255, 255, 255, 0.12);border-radius:12px;max-width:720px;width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;animation:quirl-fade-in 0.3s ease-out;-webkit-animation:quirl-fade-in 0.3s ease-out;-moz-animation:quirl-fade-in 0.3s ease-out;-o-animation:quirl-fade-in 0.3s ease-out"><div data-uid="0.0" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><h2 data-uid="0.0.0" style="margin:0;color:#F5F5F5">Documentor</h2><span data-uid="0.0.1" style="display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;border-radius:9999px;font-weight:600;line-height:1;background:color-mix(in srgb, #F5C842 16%, transparent);color:#F5C842;animation:quirl-scale-in 0.2s ease-out;-webkit-animation:quirl-scale-in 0.2s ease-out;-moz-animation:quirl-scale-in 0.2s ease-out;-o-animation:quirl-scale-in 0.2s ease-out;padding:2px 8px;font-size:0.75rem">Component</span></div><p data-uid="0.1" style="margin:0;color:rgba(245, 245, 245, 0.6);line-height:1.5">Stitches together full documentation for any Duck component.</p><div data-uid="0.2" role="separator" aria-orientation="horizontal" style="display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;gap:12px;width:100%;margin:20px 0"><div data-uid="0.2.0" style="height:1px;background:rgba(255, 255, 255, 0.12);flex:1"></div></div><div data-uid="0.3" style="display:flex;flex-direction:column;gap:16px"><div data-uid="0.3.0" style="display:flex;flex-direction:column;gap:8px"><div data-uid="0.3.0.0" style="display:flex;align-items:center;gap:8px"><h4 data-uid="0.3.0.0.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Required Props</h4><span data-uid="0.3.0.0.1" style="display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;border-radius:9999px;font-weight:600;line-height:1;background:color-mix(in srgb, #FF9F0A 16%, transparent);color:#FF9F0A;animation:quirl-scale-in 0.2s ease-out;-webkit-animation:quirl-scale-in 0.2s ease-out;-moz-animation:quirl-scale-in 0.2s ease-out;-o-animation:quirl-scale-in 0.2s ease-out;padding:2px 8px;font-size:0.75rem">1</span></div><div data-uid="0.3.0.1" style="display:flex;flex-direction:column;gap:6px"><div data-uid="0.3.0.1.0" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.0.1.0.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.0.1.0.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">component_cls</p></div><p data-uid="0.3.0.1.0.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">The component class to document. Required.</p></div></div></div><div data-uid="0.3.1" style="display:flex;flex-direction:column;gap:8px"><div data-uid="0.3.1.0" style="display:flex;align-items:center;gap:8px"><h4 data-uid="0.3.1.0.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Optional Props</h4><span data-uid="0.3.1.0.1" style="display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;border-radius:9999px;font-weight:600;line-height:1;background:color-mix(in srgb, #F5F5F5 16%, transparent);color:#F5F5F5;animation:quirl-scale-in 0.2s ease-out;-webkit-animation:quirl-scale-in 0.2s ease-out;-moz-animation:quirl-scale-in 0.2s ease-out;-o-animation:quirl-scale-in 0.2s ease-out;padding:2px 8px;font-size:0.75rem">2</span></div><div data-uid="0.3.1.1" style="display:flex;flex-direction:column;gap:6px"><div data-uid="0.3.1.1.0" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.0.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.0.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">title</p></div><p data-uid="0.3.1.1.0.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">Optional heading text. Defaults to the class name.</p></div><div data-uid="0.3.1.1.1" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.1.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.1.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">id</p></div><p data-uid="0.3.1.1.1.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">Stable DOM id for the documentation card.</p></div></div></div></div><div data-uid="0.4" role="separator" aria-orientation="horizontal" style="display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;gap:12px;width:100%;margin:20px 0"><div data-uid="0.4.0" style="height:1px;background:rgba(255, 255, 255, 0.12);flex:1"></div></div><div data-uid="0.5" style="display:flex;flex-direction:column;gap:8px"><h4 data-uid="0.5.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Usage</h4><div data-uid="0.5.1" style="display:flex;align-items:center;justify-content:center;padding:32px 16px;border-radius:12px;border:1px dashed rgba(255, 255, 255, 0.12);color:rgba(245, 245, 245, 0.6);font-size:0.875rem;text-align:center">Usage code not available</div></div><div data-uid="0.6" role="separator" aria-orientation="horizontal" style="display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;gap:12px;width:100%;margin:20px 0"><div data-uid="0.6.0" style="height:1px;background:rgba(255, 255, 255, 0.12);flex:1"></div></div><div data-uid="0.7" style="flex-direction:column;gap:8px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><h4 data-uid="0.7.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Live Preview</h4><div data-uid="0.7.1" style="display:flex;align-items:center;justify-content:center;padding:32px 16px;border-radius:12px;border:1px dashed rgba(255, 255, 255, 0.12);color:rgba(245, 245, 245, 0.6);font-size:0.875rem;text-align:center"><p data-uid="0.7.1.0" style="margin:0">Documentor requires a component_cls to document and isn&#x27;t meant to preview itself.</p></div></div></div>