{"package":"@zenoxai/ui","version":"0.1.0","entries":[{"name":"accordion","kind":"component","title":"Accordion","main":"Accordion","importPath":"@zenoxai/ui/components/accordion","docsUrl":"https://ui.zenox.services/components/accordion","description":"Accordion is a vertical stack of sections whose bodies expand and collapse\nunder their headings: an FAQ, groups of settings, a long detail view. For a\nsingle region to show and hide, use Collapsible; to switch between views of\nthe same subject, Tabs.\n\nEach AccordionItem holds one AccordionTrigger and one AccordionContent. One\nsection is open at a time; set `multiple` to let several stay open.","exports":[{"name":"Accordion","description":"Accordion is a vertical stack of sections whose bodies expand and collapse\nunder their headings: an FAQ, groups of settings, a long detail view. For a\nsingle region to show and hide, use Collapsible; to switch between views of\nthe same subject, Tabs.\n\nEach AccordionItem holds one AccordionTrigger and one AccordionContent. One\nsection is open at a time; set `multiple` to let several stay open.","props":[{"name":"defaultValue","type":"AccordionValue<any>","required":false,"description":"The uncontrolled value of the item(s) that should be initially expanded.\n\nTo render a controlled accordion, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"hiddenUntilFound","type":"boolean","required":false,"default":"false","description":"Allows the browser's built-in page search to find and expand the panel contents.\n\nOverrides the `keepMounted` prop and uses `hidden=\"until-found\"`\nto hide the element without removing it from the DOM."},{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the element in the DOM while the panel is closed.\nThis prop is ignored when `hiddenUntilFound` is used."},{"name":"loopFocus","type":"boolean","required":false,"description":"Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)\nto remove roving focus.\n\nThis prop no longer affects keyboard focus behavior.\n@deprecated"},{"name":"multiple","type":"boolean","required":false,"default":"false","description":"Whether multiple items can be open at the same time."},{"name":"onValueChange","type":"((value: AccordionValue<any>, eventDetails: AccordionRootChangeEventDetails) => void)","required":false,"description":"Event handler called when an accordion item is expanded or collapsed.\nProvides the new value as an argument."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)\nto remove roving focus.\n\nThis prop no longer affects keyboard focus behavior.\n@deprecated"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, State<any>>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"AccordionValue<any>","required":false,"description":"The controlled value of the item(s) that should be expanded.\n\nTo render an uncontrolled accordion, use the `defaultValue` prop instead."}]},{"name":"AccordionItem","props":[{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: AccordionItemChangeEventDetails) => void)","required":false,"description":"Event handler called when the panel is opened or closed."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":false,"description":"A unique value that identifies this accordion item.\nIf no value is provided, a unique ID will be generated automatically.\nUse when controlling the accordion programmatically, or to set an initial\nopen state.\n@example ```tsx\n<Accordion.Root value={['a']}>\n  <Accordion.Item value=\"a\" /> // initially open\n  <Accordion.Item value=\"b\" /> // initially closed\n</Accordion.Root>\n```"}]},{"name":"AccordionTrigger","description":"AccordionTrigger is the heading button that opens and closes its item. It\nrenders inside an <h3>, so place the accordion under an h2.","props":[{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"AccordionContent","props":[{"name":"hiddenUntilFound","type":"boolean","required":false,"default":"false","description":"Allows the browser's built-in page search to find and expand the panel contents.\n\nOverrides the `keepMounted` prop and uses `hidden=\"until-found\"`\nto hide the element without removing it from the DOM."},{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the element in the DOM while the panel is closed.\nThis prop is ignored when `hiddenUntilFound` is used."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionPanelState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"alert","kind":"component","title":"Alert","main":"Alert","importPath":"@zenoxai/ui/components/alert","docsUrl":"https://ui.zenox.services/components/alert","description":"Alert is a message box in the page flow: a warning about the data below, a\nfailed background job, a note after a save. Compose an icon, AlertTitle,\nAlertDescription and an optional AlertAction. For a one-line notice use the\nInfoBanner pattern; for passing feedback after an action, a toast; for a\ndecision that blocks the page, AlertDialog.\n\nIt has role=\"alert\", which interrupts screen readers when it appears. Pass\nrole=\"status\" for a message that is not urgent.","exports":[{"name":"Alert","description":"Alert is a message box in the page flow: a warning about the data below, a\nfailed background job, a note after a save. Compose an icon, AlertTitle,\nAlertDescription and an optional AlertAction. For a one-line notice use the\nInfoBanner pattern; for passing feedback after an action, a toast; for a\ndecision that blocks the page, AlertDialog.\n\nIt has role=\"alert\", which interrupts screen readers when it appears. Pass\nrole=\"status\" for a message that is not urgent.","props":[{"name":"variant","type":"\"default\" | \"destructive\" | \"info\" | \"success\" | \"warning\" | \"neutral\" | null","required":false,"description":"Tone of the message. `default` is a plain card; `info`, `success`,\n`warning` and `destructive` tint the border, fill and text; `neutral`\nis a muted gray box."}]},{"name":"AlertTitle","props":[]},{"name":"AlertDescription","props":[]},{"name":"AlertAction","description":"AlertAction pins a button or a close icon to the top-right corner.","props":[]}]},{"name":"alert-dialog","kind":"component","title":"Alert Dialog","main":"AlertDialog","importPath":"@zenoxai/ui/components/alert-dialog","docsUrl":"https://ui.zenox.services/components/alert-dialog","description":"AlertDialog is a modal that stops the user to confirm a consequential\naction, such as deleting a record or discarding changes. Unlike Dialog, it\ndoes not close on an outside click. For a plain yes or no, call `confirm()`\nfrom the ConfirmDialog pattern instead of composing one; for a form or\nother content, use Dialog.\n\nAlways render an AlertDialogTitle and an AlertDialogDescription: they name\nand describe the dialog for screen readers.","exports":[{"name":"AlertDialog","description":"AlertDialog is a modal that stops the user to confirm a consequential\naction, such as deleting a record or discarding changes. Unlike Dialog, it\ndoes not close on an outside click. For a plain yes or no, call `confirm()`\nfrom the ConfirmDialog pattern instead of composing one; for a form or\nother content, use Dialog.\n\nAlways render an AlertDialogTitle and an AlertDialogDescription: they name\nand describe the dialog for screen readers.","props":[{"name":"actionsRef","type":"RefObject<DialogRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the alert dialog after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the alert dialog completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the alert dialog imperatively when called."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."},{"name":"handle","type":"AlertDialogHandle<unknown>","required":false,"description":"A handle to associate the alert dialog with a trigger.\nIf specified, allows external triggers to control the alert dialog's open state.\nCan be created with the AlertDialog.createHandle() method."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the alert dialog is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the dialog is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the dialog is currently open."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"AlertDialogAction","description":"AlertDialogAction is the confirming button. It does not close the dialog:\nrun the action, then close the dialog through its controlled `open` state,\nso a failed request can keep it open.","props":[{"name":"focusableWhenDisabled","type":"boolean","required":false,"default":"false","description":"Whether the button should be focusable when disabled."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null","required":false,"description":"Height: `xs` 24px, `sm` 28px, `default` 32px, `lg` 36px. The `icon-*`\nsizes are square buttons of the same heights for a single icon. The\nicon follows the size name: 12px at `xs`, 14px at `sm`, 16px at\n`default` and `lg`."},{"name":"variant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | null","required":false,"description":"Visual weight. `default` is the filled primary action, one per view;\n`outline` and `secondary` are for the other actions; `ghost` has no\nfill until hover, for toolbars and icon buttons; `destructive` is\nfor delete and other irreversible actions; `link` looks like inline\ntext."}]},{"name":"AlertDialogCancel","description":"AlertDialogCancel closes the dialog without acting. It renders an outline\nButton and takes its `variant` and `size`.","props":[{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogCloseState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null","required":false,"default":"default","description":"Height: `xs` 24px, `sm` 28px, `default` 32px, `lg` 36px. The `icon-*`\nsizes are square buttons of the same heights for a single icon. The\nicon follows the size name: 12px at `xs`, 14px at `sm`, 16px at\n`default` and `lg`."},{"name":"variant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | null","required":false,"default":"outline","description":"Visual weight. `default` is the filled primary action, one per view;\n`outline` and `secondary` are for the other actions; `ghost` has no\nfill until hover, for toolbars and icon buttons; `destructive` is\nfor delete and other irreversible actions; `link` looks like inline\ntext."}]},{"name":"AlertDialogContent","description":"AlertDialogContent is the dialog box, rendered in a portal over a dimmed\nbackdrop. Like DialogContent, it is never taller than the viewport less a\n16px margin on each side and scrolls when its content is longer.","props":[{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the dialog is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."},{"name":"initialFocus","type":"boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the dialog is opened.\nBy default, focus moves to the first tabbable element inside the popup, except when the dialog\nis opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"sm\"","required":false,"default":"default","description":"`default` is 400px wide from the sm breakpoint, as wide as a `sm`\nDialog, with the header aligned left. `sm` stays 320px wide, centers the\nheader and lays the footer buttons out in two equal columns."}]},{"name":"AlertDialogDescription","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogDescriptionState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"AlertDialogFooter","props":[]},{"name":"AlertDialogHeader","props":[]},{"name":"AlertDialogMedia","description":"AlertDialogMedia is the icon tile beside or above the title, for a symbol\nthat sets the tone, such as a warning sign.","props":[]},{"name":"AlertDialogOverlay","props":[{"name":"forceRender","type":"boolean","required":false,"default":"false","description":"Whether the backdrop is forced to render even when nested."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogBackdropState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"AlertDialogPortal","props":[{"name":"container","type":"HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null","required":false,"description":"A parent element to render the portal element into."},{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the portal mounted in the DOM while the popup is hidden."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogPortalState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"AlertDialogTitle","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTitleState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"AlertDialogTrigger","props":[{"name":"handle","type":"AlertDialogHandle<unknown>","required":false,"description":"A handle to associate the trigger with an alert dialog.\nCan be created with the AlertDialog.createHandle() method."},{"name":"id","type":"string","required":false,"description":"ID of the trigger. In addition to being forwarded to the rendered element,\nit is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop)."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"payload","type":"unknown","required":false,"description":"A payload to pass to the dialog when it is opened."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"aspect-ratio","kind":"component","title":"Aspect Ratio","main":"AspectRatio","importPath":"@zenoxai/ui/components/aspect-ratio","docsUrl":"https://ui.zenox.services/components/aspect-ratio","description":"AspectRatio is a box that keeps a width-to-height ratio as its width\nchanges, for images, video and embeds. Make its child fill it, for example\nwith `className=\"size-full object-cover\"` on an img.","exports":[{"name":"AspectRatio","description":"AspectRatio is a box that keeps a width-to-height ratio as its width\nchanges, for images, video and embeds. Make its child fill it, for example\nwith `className=\"size-full object-cover\"` on an img.","props":[{"name":"ratio","type":"number","required":true,"description":"Width divided by height, for example `16 / 9`."}]}]},{"name":"avatar","kind":"component","title":"Avatar","main":"Avatar","importPath":"@zenoxai/ui/components/avatar","docsUrl":"https://ui.zenox.services/components/avatar","description":"Avatar is the round picture of a person or an account. AvatarFallback,\ninitials or an icon, shows while AvatarImage loads or when it fails;\nAvatarBadge adds a status dot and AvatarGroup overlaps several avatars.\n\nGive AvatarImage an alt with the person's name, or alt=\"\" when the name is\nalready written next to it.","exports":[{"name":"Avatar","description":"Avatar is the round picture of a person or an account. AvatarFallback,\ninitials or an icon, shows while AvatarImage loads or when it fails;\nAvatarBadge adds a status dot and AvatarGroup overlaps several avatars.\n\nGive AvatarImage an alt with the person's name, or alt=\"\" when the name is\nalready written next to it.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AvatarRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\"","required":false,"default":"default","description":"Diameter: `sm` 24px, `default` 32px, `lg` 40px."}]},{"name":"AvatarImage","props":[{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether the image element stays mounted and loads in place instead of being preloaded.\nSupports `loading=\"lazy\"` and optimized image components such as `next/image`."},{"name":"onLoadingStatusChange","type":"((status: ImageLoadingStatus) => void)","required":false,"description":"Callback fired when the loading status changes."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, AvatarImageState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"AvatarFallback","props":[{"name":"delay","type":"number","required":false,"default":"0","description":"How long to wait before showing the fallback. Specified in milliseconds."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AvatarFallbackState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"AvatarGroup","description":"AvatarGroup overlaps a row of avatars, each ringed to keep it distinct.","props":[]},{"name":"AvatarGroupCount","description":"AvatarGroupCount is the trailing \"+N\" circle of an AvatarGroup, sized to\nmatch the avatars in it.","props":[]},{"name":"AvatarBadge","description":"AvatarBadge is a dot pinned to the avatar's bottom-right corner, for\npresence or status. Its color means nothing to a screen reader: state the\nstatus in text as well.","props":[]}]},{"name":"badge","kind":"component","title":"Badge","main":"Badge","importPath":"@zenoxai/ui/components/badge","docsUrl":"https://ui.zenox.services/components/badge","description":"Badge is a short label: a count, a tag, a category. For the state of a\nrecord use the StatusBadge pattern, and for a severity level SeverityBadge;\nboth map the domain value to a tone for you. A removable filter is a\nFilterChip.\n\nColor must not carry the meaning alone: the text says it. To make a badge\nnavigate, pass `render={<a href=\"...\" />}`.","exports":[{"name":"Badge","description":"Badge is a short label: a count, a tag, a category. For the state of a\nrecord use the StatusBadge pattern, and for a severity level SeverityBadge;\nboth map the domain value to a tone for you. A removable filter is a\nFilterChip.\n\nColor must not carry the meaning alone: the text says it. To make a badge\nnavigate, pass `render={<a href=\"...\" />}`.","props":[{"name":"pill","type":"boolean | null","required":false,"description":"Fully rounded ends instead of the default small radius."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"tone","type":"\"info\" | \"success\" | \"warning\" | \"neutral\" | \"primary\" | \"danger\" | null","required":false,"description":"Color for the `soft`, `solid` and `outline` variants (`neutral` has no\neffect on `outline`). The other variants ignore it."},{"name":"variant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"soft\" | \"solid\" | null","required":false,"description":"Style. `default`, `secondary`, `destructive`, `outline`, `ghost` and\n`link` are complete on their own. `soft` (tinted fill) and `solid`\n(strong fill) take their color from `tone` and render uncolored\nwithout one."}]}]},{"name":"breadcrumb","kind":"component","title":"Breadcrumb","main":"Breadcrumb","importPath":"@zenoxai/ui/components/breadcrumb","docsUrl":"https://ui.zenox.services/components/breadcrumb","description":"Breadcrumb shows where the current page sits in the hierarchy, as a trail\nof links back to its ancestors. Compose BreadcrumbList with a\nBreadcrumbItem per level: a BreadcrumbLink for each ancestor, a\nBreadcrumbSeparator between levels and a BreadcrumbPage for the current\npage.\n\nIt renders <nav aria-label=\"breadcrumb\">; pass a translated aria-label.","exports":[{"name":"Breadcrumb","description":"Breadcrumb shows where the current page sits in the hierarchy, as a trail\nof links back to its ancestors. Compose BreadcrumbList with a\nBreadcrumbItem per level: a BreadcrumbLink for each ancestor, a\nBreadcrumbSeparator between levels and a BreadcrumbPage for the current\npage.\n\nIt renders <nav aria-label=\"breadcrumb\">; pass a translated aria-label.","props":[]},{"name":"BreadcrumbList","props":[]},{"name":"BreadcrumbItem","props":[]},{"name":"BreadcrumbLink","description":"BreadcrumbLink is the link to an ancestor page; pass `render` to use the\nrouter's link component.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"BreadcrumbPage","description":"BreadcrumbPage is the current page, the last level: text marked\naria-current=\"page\", not a link.","props":[]},{"name":"BreadcrumbSeparator","description":"BreadcrumbSeparator is the chevron between two levels, hidden from screen\nreaders; pass children to replace the icon.","props":[]},{"name":"BreadcrumbEllipsis","description":"BreadcrumbEllipsis stands in for collapsed middle levels. It is hidden from\nscreen readers, so when it opens a menu of those levels, wrap it in a\nbutton with an aria-label.","props":[{"name":"label","type":"string","required":false,"default":"More","description":"Already-translated text read by screen readers in place of the dots."}]}]},{"name":"button","kind":"component","title":"Button","main":"Button","importPath":"@zenoxai/ui/components/button","docsUrl":"https://ui.zenox.services/components/button","description":"Button runs an action on the current page: submit a form, open a dialog,\napply a filter. To navigate, use a link styled as a button instead:\n`<a href=\"...\" className={buttonVariants({ variant: \"outline\" })}>`.\nRendering an <a> through `render` keeps the look but Base UI gives the\nelement role=\"button\", so screen readers announce it as a button.\n\nAn icon-only button needs aria-label: the icon carries no accessible name.\n\nDisabled buttons are dimmed to 50%. While an action runs, keep the button\ndisabled and set aria-busy=\"true\" with a Spinner inside: a busy button is\nnot dimmed, so it reads as working rather than unavailable.","exports":[{"name":"Button","description":"Button runs an action on the current page: submit a form, open a dialog,\napply a filter. To navigate, use a link styled as a button instead:\n`<a href=\"...\" className={buttonVariants({ variant: \"outline\" })}>`.\nRendering an <a> through `render` keeps the look but Base UI gives the\nelement role=\"button\", so screen readers announce it as a button.\n\nAn icon-only button needs aria-label: the icon carries no accessible name.\n\nDisabled buttons are dimmed to 50%. While an action runs, keep the button\ndisabled and set aria-busy=\"true\" with a Spinner inside: a busy button is\nnot dimmed, so it reads as working rather than unavailable.","props":[{"name":"focusableWhenDisabled","type":"boolean","required":false,"default":"false","description":"Whether the button should be focusable when disabled."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null","required":false,"default":"default","description":"Height: `xs` 24px, `sm` 28px, `default` 32px, `lg` 36px. The `icon-*`\nsizes are square buttons of the same heights for a single icon. The\nicon follows the size name: 12px at `xs`, 14px at `sm`, 16px at\n`default` and `lg`."},{"name":"variant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | null","required":false,"default":"default","description":"Visual weight. `default` is the filled primary action, one per view;\n`outline` and `secondary` are for the other actions; `ghost` has no\nfill until hover, for toolbars and icon buttons; `destructive` is\nfor delete and other irreversible actions; `link` looks like inline\ntext."}]}]},{"name":"button-group","kind":"component","title":"Button Group","main":"ButtonGroup","importPath":"@zenoxai/ui/components/button-group","docsUrl":"https://ui.zenox.services/components/button-group","description":"ButtonGroup joins related buttons, inputs and selects into one bar with\nshared borders, such as a split button or a field with its submit button.\nFor a set of toggles where one or several are on, use ToggleGroup.\n\nIt has role=\"group\"; give it an aria-label when the purpose of the group\nis not clear from its contents.","exports":[{"name":"ButtonGroup","description":"ButtonGroup joins related buttons, inputs and selects into one bar with\nshared borders, such as a split button or a field with its submit button.\nFor a set of toggles where one or several are on, use ToggleGroup.\n\nIt has role=\"group\"; give it an aria-label when the purpose of the group\nis not clear from its contents.","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\" | null","required":false,"default":"horizontal","description":"`horizontal` (default) joins the items side by side; `vertical`\nstacks them."}]},{"name":"ButtonGroupSeparator","description":"ButtonGroupSeparator draws a divider between two items whose joined edges\nwould not show one, such as two borderless secondary buttons.","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"vertical","description":"The orientation of the separator."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ButtonGroupText","description":"ButtonGroupText is a static segment of the bar, such as a label or a unit,\nstyled to match the buttons beside it.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"calendar","kind":"component","title":"Calendar","main":"Calendar","importPath":"@zenoxai/ui/components/calendar","docsUrl":"https://ui.zenox.services/components/calendar","description":"Calendar is a month grid for picking a date, several dates or a range,\nbuilt on react-day-picker: set `mode` to \"single\", \"multiple\" or \"range\".\nFor a date field in a form, open it from a button inside a Popover.\n\nPass the app's date-fns `locale`, so month and weekday names and the first\nday of the week follow the user's language.","exports":[{"name":"Calendar","description":"Calendar is a month grid for picking a date, several dates or a range,\nbuilt on react-day-picker: set `mode` to \"single\", \"multiple\" or \"range\".\nFor a date field in a form, open it from a button inside a Popover.\n\nPass the app's date-fns `locale`, so month and weekday names and the first\nday of the week follow the user's language.","props":[{"name":"buttonVariant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | null","required":false,"default":"ghost","description":"Button variant of the previous and next month arrows."}]},{"name":"CalendarDayButton","description":"CalendarDayButton is the button of one day. Calendar uses it already; it is\nexported to wrap or restyle through the `components.DayButton` prop.","props":[{"name":"locale","type":"Partial<DayPickerLocale>","required":false,"description":"Locale of the `data-day` attribute's date; Calendar passes its own."}]}]},{"name":"card","kind":"component","title":"Card","main":"Card","importPath":"@zenoxai/ui/components/card","docsUrl":"https://ui.zenox.services/components/card","description":"Card is a bordered surface that groups the content about one subject: a\nchart, a summary, a settings section. Compose CardHeader (CardTitle,\nCardDescription, CardAction), CardContent and CardFooter. For a single KPI\nfigure use the StatTile pattern; for a row in a list, Item.","exports":[{"name":"Card","description":"Card is a bordered surface that groups the content about one subject: a\nchart, a summary, a settings section. Compose CardHeader (CardTitle,\nCardDescription, CardAction), CardContent and CardFooter. For a single KPI\nfigure use the StatTile pattern; for a row in a list, Item.","props":[{"name":"size","type":"\"default\" | \"sm\"","required":false,"default":"default","description":"`sm` tightens the padding and gaps from 16px to 12px and steps the title\ndown to text-sm, for dense grids."}]},{"name":"CardHeader","description":"CardHeader is the top band, set off from the body by a divider. A\nCardAction inside it takes a right-hand column beside the title and\ndescription.","props":[]},{"name":"CardFooter","description":"CardFooter is the bottom band, on a muted fill above a divider, for actions\nor a summary line.","props":[]},{"name":"CardTitle","description":"CardTitle renders an <h2> by default, so card sections appear in heading\nnavigation; pass `render={<h3 />}` where the card sits under another h2.\nIt sits at the container step (text-base, medium); in a `size=\"sm\"` card,\nat the compact step (text-md, semibold), where a medium weight would not\nstand apart from 12.5px medium labels.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"CardAction","description":"CardAction is the slot at the right of CardHeader, for a button or a menu\nthat acts on the whole card. It is vertically centered on the title and\ndescription together, as the action of a SectionHeading is (upstream\naligns it to the top).","props":[]},{"name":"CardDescription","props":[]},{"name":"CardContent","props":[]}]},{"name":"carousel","kind":"component","title":"Carousel","main":"Carousel","importPath":"@zenoxai/ui/components/carousel","docsUrl":"https://ui.zenox.services/components/carousel","description":"Carousel shows a row of slides one view at a time, moved with the arrow\nbuttons, a swipe or the arrow keys; it is built on Embla. Use it for media\nand previews, not for content the user must read in full: hidden slides\nare easy to miss.\n\nGive it an aria-label, since it is a region landmark. From the md\nbreakpoint, CarouselPrevious and CarouselNext sit outside its left and\nright edges, so leave 48px of room on each side; on smaller screens they\nsit inside the edges, over the slides, where there is no room to spare.","exports":[{"name":"Carousel","description":"Carousel shows a row of slides one view at a time, moved with the arrow\nbuttons, a swipe or the arrow keys; it is built on Embla. Use it for media\nand previews, not for content the user must read in full: hidden slides\nare easy to miss.\n\nGive it an aria-label, since it is a region landmark. From the md\nbreakpoint, CarouselPrevious and CarouselNext sit outside its left and\nright edges, so leave 48px of room on each side; on smaller screens they\nsit inside the edges, over the slides, where there is no room to spare.","props":[{"name":"opts","type":"Partial<OptionsType>","required":false,"description":"Embla options, such as `loop` or `align`; `axis` follows `orientation`."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"horizontal","description":"Scroll direction. Defaults to horizontal."},{"name":"plugins","type":"CreatePluginType<LoosePluginType, {}>[]","required":false,"description":"Embla plugins, such as autoplay."},{"name":"setApi","type":"((api: EmblaCarouselType) => void)","required":false,"description":"Receives the Embla API when ready, to drive the carousel from outside."}]},{"name":"CarouselContent","description":"CarouselContent is the scrolling track that holds the CarouselItems.","props":[]},{"name":"CarouselItem","description":"CarouselItem is one slide. It spans the whole track by default; set a\nbasis class such as `basis-1/3` to show several at once.","props":[]},{"name":"CarouselPrevious","description":"CarouselPrevious scrolls back one slide and is disabled at the start. Its\naccessible name is the English \"Previous slide\"; pass a translated\naria-label.","props":[{"name":"focusableWhenDisabled","type":"boolean","required":false,"default":"false","description":"Whether the button should be focusable when disabled."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null","required":false,"default":"icon-sm","description":"Height: `xs` 24px, `sm` 28px, `default` 32px, `lg` 36px. The `icon-*`\nsizes are square buttons of the same heights for a single icon. The\nicon follows the size name: 12px at `xs`, 14px at `sm`, 16px at\n`default` and `lg`."},{"name":"variant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | null","required":false,"default":"outline","description":"Visual weight. `default` is the filled primary action, one per view;\n`outline` and `secondary` are for the other actions; `ghost` has no\nfill until hover, for toolbars and icon buttons; `destructive` is\nfor delete and other irreversible actions; `link` looks like inline\ntext."}]},{"name":"CarouselNext","description":"CarouselNext scrolls forward one slide and is disabled at the end. Its\naccessible name is the English \"Next slide\"; pass a translated aria-label.","props":[{"name":"focusableWhenDisabled","type":"boolean","required":false,"default":"false","description":"Whether the button should be focusable when disabled."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null","required":false,"default":"icon-sm","description":"Height: `xs` 24px, `sm` 28px, `default` 32px, `lg` 36px. The `icon-*`\nsizes are square buttons of the same heights for a single icon. The\nicon follows the size name: 12px at `xs`, 14px at `sm`, 16px at\n`default` and `lg`."},{"name":"variant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | null","required":false,"default":"outline","description":"Visual weight. `default` is the filled primary action, one per view;\n`outline` and `secondary` are for the other actions; `ghost` has no\nfill until hover, for toolbars and icon buttons; `destructive` is\nfor delete and other irreversible actions; `link` looks like inline\ntext."}]},{"name":"useCarousel","description":"useCarousel returns the Embla API and scroll state of the Carousel above.","props":[]}]},{"name":"chart","kind":"component","title":"Chart","main":"ChartContainer","importPath":"@zenoxai/ui/components/chart","docsUrl":"https://ui.zenox.services/components/chart","description":"ChartContainer wraps one Recharts chart: it makes the chart responsive,\nstyles it with the theme tokens and turns `config` into the\n`--color-<key>` variables its series use. Size it with a height or an\naspect class; it defaults to aspect-video. For a single figure, use the\nStatTile pattern.\n\nA chart is opaque to screen readers: say what it shows in nearby text or an\naria-label. Config keys and colors are written into a <style> tag as they\nare, so build the config in code, never from user input.","exports":[{"name":"ChartContainer","description":"ChartContainer wraps one Recharts chart: it makes the chart responsive,\nstyles it with the theme tokens and turns `config` into the\n`--color-<key>` variables its series use. Size it with a height or an\naspect class; it defaults to aspect-video. For a single figure, use the\nStatTile pattern.\n\nA chart is opaque to screen readers: say what it shows in nearby text or an\naria-label. Config keys and colors are written into a <style> tag as they\nare, so build the config in code, never from user input.","props":[{"name":"config","type":"ChartConfig","required":true,"description":"Label, icon and color of each data key of the chart."},{"name":"initialDimension","type":"{ width: number; height: number; }","required":false,"default":"{ width: 320, height: 200 } as const","description":"Size used until the container measures itself, as on the server."}]},{"name":"ChartTooltip","description":"The Tooltip component displays a floating box with data values when hovering over or clicking on chart elements.\n\nIt can be configured to show information for individual data points or for all points at a specific axis coordinate.\nThe appearance and content of the tooltip can be customized via props.","props":[]},{"name":"ChartTooltipContent","description":"ChartTooltipContent is the themed tooltip body: a heading, then a swatch,\nlabel and value per series, labeled from the chart config. Values are\nformatted with toLocaleString() in the browser's locale; pass `formatter`\nto format them in the app's locale.","props":[{"name":"hideIndicator","type":"boolean","required":false,"default":"false","description":"Hides the color swatch beside each series."},{"name":"hideLabel","type":"boolean","required":false,"default":"false","description":"Hides the heading, the label of the hovered point."},{"name":"indicator","type":"\"line\" | \"dot\" | \"dashed\"","required":false,"default":"dot","description":"Shape of the swatch: `dot` (default), `line` or `dashed`."},{"name":"labelKey","type":"string","required":false,"description":"Config key whose label becomes the heading, or the payload field\nholding it. Defaults to the label of the hovered point."},{"name":"nameKey","type":"string","required":false,"description":"Config key that names each series, or the payload field holding it.\nDefaults to each item's name, then its data key."}]},{"name":"ChartLegend","description":"ChartLegend is Recharts' Legend; pass `content={<ChartLegendContent />}` to\nrender it in the theme.","props":[]},{"name":"ChartLegendContent","description":"ChartLegendContent is the themed legend: a swatch and label per series.","props":[{"name":"hideIcon","type":"boolean","required":false,"default":"false","description":"Shows the color swatch even where the config sets an icon."},{"name":"nameKey","type":"string","required":false,"description":"Config key that names each series, or the payload field holding it."}]},{"name":"ChartStyle","description":"ChartStyle writes the `--color-<key>` variables of a config for one chart.\nChartContainer renders it already; use it only in a custom container.","props":[{"name":"config","type":"ChartConfig","required":true},{"name":"id","type":"string","required":true}]}]},{"name":"checkbox","kind":"component","title":"Checkbox","main":"Checkbox","importPath":"@zenoxai/ui/components/checkbox","docsUrl":"https://ui.zenox.services/components/checkbox","description":"Checkbox turns one option on or off, or picks several options from a list.\nFor a setting that takes effect at once, use Switch; for one choice out of\nseveral, RadioGroup.\n\nLabel it: wrap it with its text in a FieldLabel or Label, or give it an\n`id` and point the label's htmlFor at it.","exports":[{"name":"Checkbox","description":"Checkbox turns one option on or off, or picks several options from a list.\nFor a setting that takes effect at once, use Switch; for one choice out of\nseveral, RadioGroup.\n\nLabel it: wrap it with its text in a FieldLabel or Label, or give it an\n`id` and point the label's htmlFor at it.","props":[{"name":"checked","type":"boolean","required":false,"default":"undefined","description":"Whether the checkbox is currently ticked.\n\nTo render an uncontrolled checkbox, use the `defaultChecked` prop instead."},{"name":"defaultChecked","type":"boolean","required":false,"default":"false","description":"Whether the checkbox is initially ticked.\n\nTo render a controlled checkbox, use the `checked` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"form","type":"string","required":false,"description":"Identifies the form that owns the hidden input.\nUseful when the checkbox is rendered outside the form."},{"name":"id","type":"string","required":false,"description":"The id of the input element."},{"name":"indeterminate","type":"boolean","required":false,"default":"false","description":"Whether the checkbox is in a mixed state: neither ticked, nor unticked."},{"name":"inputRef","type":"Ref<HTMLInputElement>","required":false,"description":"A ref to access the hidden `<input>` element."},{"name":"name","type":"string","required":false,"default":"undefined","description":"Identifies the field when a form is submitted."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onCheckedChange","type":"((checked: boolean, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)","required":false,"description":"Event handler called when the checkbox is ticked or unticked."},{"name":"parent","type":"boolean","required":false,"default":"false","description":"Whether the checkbox controls a group of child checkboxes.\n\nMust be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group)."},{"name":"readOnly","type":"boolean","required":false,"default":"false","description":"Whether the user should be unable to tick or untick the checkbox."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CheckboxRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"required","type":"boolean","required":false,"default":"false","description":"Whether the user must tick the checkbox before submitting a form."},{"name":"uncheckedValue","type":"string","required":false,"description":"The value submitted with the form when the checkbox is unchecked.\nBy default, unchecked checkboxes do not submit any value, matching native checkbox behavior."},{"name":"value","type":"string","required":false,"description":"The checkbox's value. Identifies it within a [Checkbox Group](https://base-ui.com/react/components/checkbox-group), falling back to `name` when omitted.\nWhen submitting a form, a checked box submits `value`; with no `value`, it submits the native \"on\"."}]}]},{"name":"collapsible","kind":"component","title":"Collapsible","main":"Collapsible","importPath":"@zenoxai/ui/components/collapsible","docsUrl":"https://ui.zenox.services/components/collapsible","description":"Collapsible shows and hides one region with a CollapsibleTrigger, such as\nadvanced options or the rest of a long description. For a stack of such\nsections, use Accordion.","exports":[{"name":"Collapsible","description":"Collapsible shows and hides one region with a CollapsibleTrigger, such as\nadvanced options or the rest of a long description. For a stack of such\nsections, use Accordion.","props":[{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the collapsible panel is initially open.\n\nTo render a controlled collapsible, use the `open` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the panel is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the collapsible panel is currently open.\n\nTo render an uncontrolled collapsible, use the `defaultOpen` prop instead."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsibleRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"CollapsibleTrigger","props":[{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsibleTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"CollapsibleContent","description":"CollapsibleContent is the region that opens and closes. Its height\nanimates like an AccordionContent; it clips its content while it moves.","props":[{"name":"hiddenUntilFound","type":"boolean","required":false,"default":"false","description":"Allows the browser's built-in page search to find and expand the panel contents.\n\nOverrides the `keepMounted` prop and uses `hidden=\"until-found\"`\nto hide the element without removing it from the DOM."},{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the element in the DOM while the panel is hidden.\nThis prop is ignored when `hiddenUntilFound` is used."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsiblePanelState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"combobox","kind":"component","title":"Combobox","main":"Combobox","importPath":"@zenoxai/ui/components/combobox","docsUrl":"https://ui.zenox.services/components/combobox","description":"Groups all parts of the combobox.\nDoesn't render its own HTML element.\n\nDocumentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)","exports":[{"name":"Combobox","description":"Groups all parts of the combobox.\nDoesn't render its own HTML element.\n\nDocumentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)","props":[{"name":"actionsRef","type":"RefObject<Actions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the combobox after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the combobox completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the combobox imperatively when called."},{"name":"autoComplete","type":"string","required":false,"description":"Provides a hint to the browser for autofill.\n@see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete"},{"name":"autoHighlight","type":"boolean","required":false,"default":"false","description":"Whether the first matching item is highlighted automatically while filtering."},{"name":"defaultInputValue","type":"string | number | readonly string[]","required":false,"description":"The uncontrolled input value when initially rendered.\n\nTo render a controlled input, use the `inputValue` prop instead."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the popup is initially open.\n\nTo render a controlled popup, use the `open` prop instead."},{"name":"defaultValue","type":"ComboboxInputValue<Value, Multiple> | null","required":false,"description":"The uncontrolled selected value of the combobox when it's initially rendered.\n\nTo render a controlled combobox, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"filter","type":"((item: Item, query: string, itemToString?: ((item: Item) => string)) => boolean) | null","required":false,"description":"Filter function used to match items vs input query.\nReceives the source item, which is the derived value's item when `items` is a `createItems()`\ncollection, and the item itself otherwise."},{"name":"filteredItems","type":"readonly Item[] | readonly Group<Item>[]","required":false,"description":"Filtered items to display in the list.\nWhen provided, the list uses these items instead of filtering the `items` prop internally.\nWhen `items` is also provided, this array must preserve its flat or grouped structure.\nWith a `createItems()` collection, pass source items rather than derived values.\nNullish entries are not supported, as in `items`.\nUse when you want to control filtering logic externally with the `useFilter()` hook."},{"name":"form","type":"string","required":false,"description":"Identifies the form that owns the internal input.\nUseful when the combobox is rendered outside the form."},{"name":"grid","type":"boolean","required":false,"default":"false","description":"Whether list items are presented in a grid layout.\nWhen enabled, arrow keys navigate across rows and columns inferred from DOM rows."},{"name":"highlightItemOnHover","type":"boolean","required":false,"default":"true","description":"Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."},{"name":"id","type":"string","required":false,"description":"The id of the component."},{"name":"inline","type":"boolean","required":false,"default":"false","description":"Whether the list is rendered inline without using the component's own popup.\n\nSpecify `open` unconditionally in conjunction with this prop so the list is considered\nvisible: `<Combobox.Root inline open>`\n\nIn a `Combobox.Root` > `Dialog.Root` composition, bind the Combobox's `open` and\n`onOpenChange` props to the `Dialog`'s `open` and `onOpenChange` state instead so the\ncomponent resets its transient state (filter query, highlighted item, and input value) when\nthe dialog closes."},{"name":"inputRef","type":"Ref<HTMLInputElement>","required":false,"description":"A ref to the hidden input element."},{"name":"inputValue","type":"string | number | readonly string[]","required":false,"description":"The input value of the combobox. Use when controlled."},{"name":"isItemEqualToValue","type":"((itemValue: Value, value: Value) => boolean)","required":false,"description":"Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially.\nWith a `createItems()` collection, both arguments are derived values.\nDefaults to `Object.is` comparison."},{"name":"items","type":"readonly any[] | readonly Group<any>[] | ComboboxItemCollection<Item, Value>","required":false,"description":"The items to be displayed in the list.\nCan be a flat array of items, an array of groups with items, or a collection created by\nthe `createItems()` function, which derives each item's selection value and label.\nNullish entries are not supported: remove them from the data before passing it."},{"name":"itemToStringLabel","type":"((itemValue: Value) => string)","required":false,"description":"When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input.\nIf the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.\nWith a `createItems()` collection, this receives the derived value, and the collection's\n`getLabel` takes precedence for values it can resolve."},{"name":"itemToStringValue","type":"((itemValue: Value) => string)","required":false,"description":"When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission.\nIf the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.\nWith a `createItems()` collection, this receives the derived value."},{"name":"limit","type":"number","required":false,"default":"-1","description":"The maximum number of items to display in the list."},{"name":"locale","type":"LocalesArgument","required":false,"description":"The locale to use for string comparison.\nDefaults to the user's runtime locale."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The first item can then be reached by pressing <kbd>ArrowDown</kbd> again from the input, or the last item can be reached by pressing <kbd>ArrowUp</kbd> from the input.\nThe input is always included in the focus loop per [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).\nWhen disabled, focus does not move when on the last element and the user presses <kbd>ArrowDown</kbd>, or when on the first element and the user presses <kbd>ArrowUp</kbd>."},{"name":"modal","type":"boolean","required":false,"default":"false","description":"Determines if the popup enters a modal state when open.\n- `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior."},{"name":"multiple","type":"boolean","required":false,"default":"false","description":"Whether multiple items can be selected."},{"name":"name","type":"string","required":false,"description":"Identifies the field when a form is submitted."},{"name":"onInputValueChange","type":"((inputValue: string, eventDetails: ChangeEventDetails) => void)","required":false,"description":"Event handler called when the input value changes."},{"name":"onItemHighlighted","type":"((highlightedValue: Value, eventDetails: HighlightEventDetails) => void)","required":false,"description":"Callback fired when an item is highlighted or unhighlighted.\nReceives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed.\nThe `reason` can be:\n- `'keyboard'`: the highlight changed due to keyboard navigation.\n- `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent`\n  rather than a `PointerEvent`.\n- `'none'`: the highlight changed for another reason, such as typing, `autoHighlight`, the\n  item list changing, or the popup opening or closing."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: OpenChangeEventDetails) => void)","required":false,"description":"Event handler called when the popup is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the popup is opened or closed."},{"name":"onValueChange","type":"((value: ComboboxOutputValue<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: ChangeEventDetails) => void)","required":false,"description":"Event handler called when the selected value of the combobox changes."},{"name":"open","type":"boolean","required":false,"description":"Whether the popup is currently open. Use when controlled."},{"name":"openOnInputClick","type":"boolean","required":false,"default":"true","description":"Whether the popup opens when clicking the input."},{"name":"readOnly","type":"boolean","required":false,"default":"false","description":"Whether the user should be unable to choose a different option from the popup."},{"name":"required","type":"boolean","required":false,"default":"false","description":"Whether the user must choose a value before submitting a form."},{"name":"value","type":"ComboboxInputValue<Value, Multiple> | null","required":false,"description":"The selected value of the combobox. Use when controlled."},{"name":"virtualized","type":"boolean","required":false,"default":"false","description":"Whether the items are being externally virtualized."}]},{"name":"ComboboxInput","description":"ComboboxInput is the text field of a single-value combobox, with a chevron\nthat opens the list and an optional clear button. `className` styles the\nsurrounding InputGroup.","props":[{"name":"clearLabel","type":"string","required":false,"default":"Clear","description":"Already-translated accessible name of the clear button."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxInputState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"showClear","type":"boolean","required":false,"default":"false","description":"Shows an X button that clears the value. Defaults to false."},{"name":"showTrigger","type":"boolean","required":false,"default":"true","description":"Shows the chevron button that opens the list. Defaults to true."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\"","required":false,"default":"default","description":"Height: `sm` 28px, `default` 32px, `lg` 36px, the sizes of InputGroup\nand Input. The chevron is 14px at `sm`, 16px otherwise."},{"name":"triggerLabel","type":"string","required":false,"default":"Show options","description":"Already-translated accessible name of the chevron button."}]},{"name":"ComboboxContent","description":"ComboboxContent is the popup, rendered in a portal below the input and at\nleast as wide as it. With chips, pass the ref from useComboboxAnchor as\n`anchor`, so it aligns with the chips box.","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"anchor","type":"Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null","required":false,"description":"An element to position the popup against.\nBy default, the popup will be positioned against the trigger."},{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the popup is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"initialFocus","type":"boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the popup is opened.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"bottom","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"}]},{"name":"ComboboxList","description":"ComboboxList is the scrolling list of options; give it a function child\nthat renders a ComboboxItem per filtered item.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxListState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ComboboxItem","props":[{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"index","type":"number","required":false,"description":"The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"An optional click handler for the item when selected.\nIt fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":false,"default":"null","description":"A unique value that identifies this item."}]},{"name":"ComboboxGroup","props":[{"name":"items","type":"readonly any[]","required":false,"description":"Items to be rendered within this group.\nWhen provided, child `Collection` components will use these items."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ComboboxLabel","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxGroupLabelState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ComboboxCollection","description":"ComboboxCollection renders the filtered items of one ComboboxGroup through\na function child; a flat list needs only the function child of\nComboboxList.","props":[]},{"name":"ComboboxEmpty","description":"ComboboxEmpty is the message shown when no item matches the query.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxEmptyState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ComboboxSeparator","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"The orientation of the separator."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxSeparatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ComboboxChips","description":"ComboboxChips is the input box of a multiple combobox: a ComboboxChip per\nselected value, then a ComboboxChipsInput.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxChipsState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ComboboxChip","props":[{"name":"removeLabel","type":"string","required":false,"default":"Remove","description":"Already-translated accessible name of the remove button."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxChipState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"showRemove","type":"boolean","required":false,"default":"true","description":"Shows the X button that removes the chip. Defaults to true."}]},{"name":"ComboboxChipsInput","description":"ComboboxChipsInput is the text input after the chips in ComboboxChips.","props":[{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxInputState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ComboboxTrigger","description":"ComboboxTrigger is a button with a chevron that opens the list.\nComboboxInput renders one already; use it alone when the input sits inside\nthe popup.","props":[{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ComboboxTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ComboboxValue","description":"ComboboxValue renders the selected value, or a function of it, such as the\nchips of a multiple combobox.","props":[{"name":"placeholder","type":"ReactNode","required":false,"description":"The placeholder value to display when no value is selected.\nThis is overridden by `children` if specified, or by a null item's label in `items`."}]},{"name":"useComboboxAnchor","description":"useComboboxAnchor returns a ref to attach to ComboboxChips and pass as\n`anchor` to ComboboxContent, so the popup aligns with the chips box.","props":[]}]},{"name":"command","kind":"component","title":"Command","main":"Command","importPath":"@zenoxai/ui/components/command","docsUrl":"https://ui.zenox.services/components/command","description":"Command is a searchable list of actions, built on cmdk: type to filter,\narrows to move, Enter to run. Use it for a command palette (CommandDialog)\nor an action picker in a popover. To pick a form value from a long list,\nuse Combobox.\n\nEach CommandItem runs its `onSelect`; give it a `value` or `keywords` when\nits visible text is not what users will type.","exports":[{"name":"Command","description":"Command is a searchable list of actions, built on cmdk: type to filter,\narrows to move, Enter to run. Use it for a command palette (CommandDialog)\nor an action picker in a popover. To pick a form value from a long list,\nuse Combobox.\n\nEach CommandItem runs its `onSelect`; give it a `value` or `keywords` when\nits visible text is not what users will type.","props":[]},{"name":"CommandDialog","description":"CommandDialog opens a Command in a modal dialog near the top of the screen:\nthe command palette. Control it with `open` and `onOpenChange`, and bind\nthe shortcut that opens it yourself.","props":[{"name":"actionsRef","type":"RefObject<DialogRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the dialog after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the dialog completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the dialog imperatively when called."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."},{"name":"description","type":"string","required":false,"default":"Search for a command to run","description":"Accessible description, visually hidden; pass a translated one."},{"name":"disablePointerDismissal","type":"boolean","required":false,"default":"false","description":"Whether to prevent the dialog from closing on outside presses.\nFor non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it."},{"name":"handle","type":"DialogHandle<unknown>","required":false,"description":"A handle to associate the dialog with a trigger.\nIf specified, allows external triggers to control the dialog's open state.\nCan be created with the Dialog.createHandle() method."},{"name":"modal","type":"boolean | \"trap-focus\"","required":false,"default":"true","description":"Determines if the dialog enters a modal state when open.\n- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nWhen `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so\ntouch screen readers can escape the popup."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: DialogRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the dialog is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the dialog is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the dialog is currently open."},{"name":"showCloseButton","type":"boolean","required":false,"default":"false","description":"Shows the X button at the top-right corner; Escape closes it anyway."},{"name":"title","type":"string","required":false,"default":"Command palette","description":"Accessible name of the dialog, visually hidden; pass a translated one."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"CommandInput","description":"CommandInput is the search field that filters the items.","props":[]},{"name":"CommandList","props":[]},{"name":"CommandEmpty","description":"CommandEmpty is the message shown when no item matches the query.","props":[]},{"name":"CommandGroup","props":[]},{"name":"CommandItem","props":[]},{"name":"CommandShortcut","description":"CommandShortcut is the key hint at the right edge of an item. It is display\ntext only: bind the keys yourself.","props":[]},{"name":"CommandSeparator","props":[]}]},{"name":"context-menu","kind":"component","title":"Context Menu","main":"ContextMenu","importPath":"@zenoxai/ui/components/context-menu","docsUrl":"https://ui.zenox.services/components/context-menu","description":"ContextMenu is the menu that opens on right-click or long press over its\nContextMenuTrigger, with actions for what is under the pointer. For a menu\nopened from a visible button, use DropdownMenu.\n\nTouch and keyboard users rarely find it: make every action also reachable\nfrom a visible control.","exports":[{"name":"ContextMenu","description":"ContextMenu is the menu that opens on right-click or long press over its\nContextMenuTrigger, with actions for what is under the pointer. For a menu\nopened from a visible button, use DropdownMenu.\n\nTouch and keyboard users rarely find it: make every action also reachable\nfrom a visible control.","props":[{"name":"actionsRef","type":"RefObject<MenuRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes.\n  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own.\n  Whether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the menu imperatively when called."},{"name":"closeParentOnEsc","type":"boolean","required":false,"description":"@ignore\n@deprecated This prop has no effect on Context Menu."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the menu is initially open.\n\nTo render a controlled menu, use the `open` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"highlightItemOnHover","type":"boolean","required":false,"default":"true","description":"Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."},{"name":"onItemHighlighted","type":"((highlightedItem: HTMLElement, eventDetails: MenuRootHighlightEventDetails) => void)","required":false,"description":"Callback fired when an item is highlighted or unhighlighted.\nReceives the highlighted item element (or `undefined` if no item is highlighted) and details\ncontaining the reason for the change, the event, and the item's text label.\nThe `reason` can be:\n- `'keyboard'`: the highlight changed due to keyboard navigation.\n- `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent`\n  rather than a `PointerEvent`.\n- `'none'`: the highlight changed for another reason, such as automatic highlighting while\n  filtering, the item list changing, or the popup opening or closing."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: ContextMenuRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the menu is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the menu is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the menu is currently open."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"The visual orientation of the menu.\nControls whether roving focus uses up/down or left/right arrow keys."}]},{"name":"ContextMenuTrigger","description":"ContextMenuTrigger is the area that opens the menu on right-click.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ContextMenuTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ContextMenuContent","description":"ContextMenuContent is the menu popup, opened at the pointer.","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"4","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n\nDefaults to `2` for root context menus when `side` is not specified and `align` is not\n`'center'`. Otherwise, it defaults to `0`.\n@example ```jsx\n<ContextMenu.Positioner\n  alignOffset={({ side, anchor }) => {\n    return side === 'top' || side === 'bottom' ? anchor.width : anchor.height;\n  }}\n/>\n```"},{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the menu is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"right","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions.\n\nSubmenus default to `'inline-end'`."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n\nDefaults to `-5` for root context menus when `side` is not specified and `align` is not\n`'center'`. Otherwise, it defaults to `0`.\n@example ```jsx\n<ContextMenu.Positioner\n  sideOffset={({ side, anchor }) => {\n    return side === 'top' || side === 'bottom' ? anchor.height : anchor.width;\n  }}\n/>\n```"}]},{"name":"ContextMenuItem","props":[{"name":"closeOnClick","type":"boolean","required":false,"default":"true","description":"Whether to close the menu when the item is clicked."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"The click handler for the menu item."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"variant","type":"\"default\" | \"destructive\"","required":false,"default":"default","description":"`destructive` colors the item red, for delete and other risky actions."}]},{"name":"ContextMenuCheckboxItem","props":[{"name":"checked","type":"boolean","required":false,"description":"Whether the checkbox item is currently ticked.\n\nTo render an uncontrolled checkbox item, use the `defaultChecked` prop instead."},{"name":"closeOnClick","type":"boolean","required":false,"default":"false","description":"Whether to close the menu when the item is clicked."},{"name":"defaultChecked","type":"boolean","required":false,"default":"false","description":"Whether the checkbox item is initially ticked.\n\nTo render a controlled checkbox item, use the `checked` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onCheckedChange","type":"((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the checkbox item is ticked or unticked."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"The click handler for the menu item."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuCheckboxItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ContextMenuRadioItem","props":[{"name":"closeOnClick","type":"boolean","required":false,"default":"false","description":"Whether to close the menu when the item is clicked."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"The click handler for the menu item."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":true,"description":"Value of the radio item.\nThis is the value that will be set in the MenuRadioGroup when the item is selected."}]},{"name":"ContextMenuLabel","description":"ContextMenuLabel is a section heading inside the menu. It is a plain div,\nnot linked to the items under it, because Base UI's GroupLabel throws\noutside a Group. When the items need that aria-labelledby association,\nwrap them in a ContextMenuGroup with `ContextMenu.GroupLabel` from\n\"@base-ui/react/context-menu\".","props":[{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."}]},{"name":"ContextMenuSeparator","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"vertical","description":"The orientation of the separator."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ContextMenuShortcut","description":"ContextMenuShortcut is the key hint at the right edge of an item. It is\ndisplay text only: bind the keys yourself.","props":[]},{"name":"ContextMenuGroup","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ContextMenuPortal","props":[{"name":"container","type":"HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null","required":false,"description":"A parent element to render the portal element into."},{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the portal mounted in the DOM while the popup is hidden."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPortalState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ContextMenuSub","props":[{"name":"actionsRef","type":"RefObject<MenuRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes.\n  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own.\n  Whether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the menu imperatively when called."},{"name":"closeParentOnEsc","type":"boolean","required":false,"default":"false","description":"When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the menu is initially open.\n\nTo render a controlled menu, use the `open` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"highlightItemOnHover","type":"boolean","required":false,"default":"true","description":"Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."},{"name":"onItemHighlighted","type":"((highlightedItem: HTMLElement, eventDetails: MenuRootHighlightEventDetails) => void)","required":false,"description":"Callback fired when an item is highlighted or unhighlighted.\nReceives the highlighted item element (or `undefined` if no item is highlighted) and details\ncontaining the reason for the change, the event, and the item's text label.\nThe `reason` can be:\n- `'keyboard'`: the highlight changed due to keyboard navigation.\n- `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent`\n  rather than a `PointerEvent`.\n- `'none'`: the highlight changed for another reason, such as automatic highlighting while\n  filtering, the item list changing, or the popup opening or closing."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the menu is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the menu is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the menu is currently open."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"The visual orientation of the menu.\nControls whether roving focus uses up/down or left/right arrow keys."}]},{"name":"ContextMenuSubContent","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"4","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n\nDefaults to `2` for root context menus when `side` is not specified and `align` is not\n`'center'`. Otherwise, it defaults to `0`.\n@example ```jsx\n<ContextMenu.Positioner\n  alignOffset={({ side, anchor }) => {\n    return side === 'top' || side === 'bottom' ? anchor.width : anchor.height;\n  }}\n/>\n```"},{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the menu is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"right","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions.\n\nSubmenus default to `'inline-end'`."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n\nDefaults to `-5` for root context menus when `side` is not specified and `align` is not\n`'center'`. Otherwise, it defaults to `0`.\n@example ```jsx\n<ContextMenu.Positioner\n  sideOffset={({ side, anchor }) => {\n    return side === 'top' || side === 'bottom' ? anchor.height : anchor.width;\n  }}\n/>\n```"}]},{"name":"ContextMenuSubTrigger","props":[{"name":"closeDelay","type":"number","required":false,"default":"0","description":"How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"delay","type":"number","required":false,"default":"100","description":"How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false},{"name":"openOnHover","type":"boolean","required":false,"default":"true","description":"Whether the menu should also open when the trigger is hovered."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuSubmenuTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ContextMenuRadioGroup","props":[{"name":"defaultValue","type":"any","required":false,"description":"The uncontrolled value of the radio item that should be initially selected.\n\nTo render a controlled radio group, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"onValueChange","type":"((value: any, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Function called when the selected value changes."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":false,"description":"The controlled value of the radio item that should be currently selected.\n\nTo render an uncontrolled radio group, use the `defaultValue` prop instead."}]}]},{"name":"dialog","kind":"component","title":"Dialog","main":"Dialog","importPath":"@zenoxai/ui/components/dialog","docsUrl":"https://ui.zenox.services/components/dialog","description":"Dialog is a modal window over the page for a short, focused task: a small\nform, a choice, a preview. It traps focus and closes on Escape or an\noutside click. To confirm a destructive action, use AlertDialog or\n`confirm()` from the ConfirmDialog pattern; for a long form or a record's\ndetails beside a list, Sheet; on touch screens, Drawer.\n\nAlways render a DialogTitle: it names the dialog for screen readers. Add a\nDialogDescription when the title alone does not explain it.","exports":[{"name":"Dialog","description":"Dialog is a modal window over the page for a short, focused task: a small\nform, a choice, a preview. It traps focus and closes on Escape or an\noutside click. To confirm a destructive action, use AlertDialog or\n`confirm()` from the ConfirmDialog pattern; for a long form or a record's\ndetails beside a list, Sheet; on touch screens, Drawer.\n\nAlways render a DialogTitle: it names the dialog for screen readers. Add a\nDialogDescription when the title alone does not explain it.","props":[{"name":"actionsRef","type":"RefObject<DialogRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the dialog after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the dialog completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the dialog imperatively when called."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."},{"name":"disablePointerDismissal","type":"boolean","required":false,"default":"false","description":"Whether to prevent the dialog from closing on outside presses.\nFor non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it."},{"name":"handle","type":"DialogHandle<unknown>","required":false,"description":"A handle to associate the dialog with a trigger.\nIf specified, allows external triggers to control the dialog's open state.\nCan be created with the Dialog.createHandle() method."},{"name":"modal","type":"boolean | \"trap-focus\"","required":false,"default":"true","description":"Determines if the dialog enters a modal state when open.\n- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nWhen `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so\ntouch screen readers can escape the popup."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: DialogRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the dialog is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the dialog is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the dialog is currently open."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"DialogClose","description":"DialogClose closes the dialog when pressed; pass `render={<Button />}` to\nstyle it as a button.","props":[{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogCloseState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DialogContent","description":"DialogContent is the dialog box, centered in a portal over a dimmed\nbackdrop, with a close button at its top-right corner. It is never taller\nthan the viewport less a 16px margin on each side: longer content scrolls\ninside it, footer included.","props":[{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the dialog is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."},{"name":"initialFocus","type":"boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the dialog is opened.\nBy default, focus moves to the first tabbable element inside the popup, except when the dialog\nis opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"showCloseButton","type":"boolean","required":false,"default":"true","description":"Renders the X button at the top-right corner. Its accessible name is the\nEnglish \"Close\": to translate it, turn this off and render your own\nDialogClose."},{"name":"size","type":"\"sm\" | \"lg\" | \"md\" | \"xl\"","required":false,"default":"sm","description":"Maximum width from the sm breakpoint: `sm` 400px (default), `md` 560px,\n`lg` 800px, `xl` 1100px. Below it the dialog spans the viewport less a\n16px margin on each side."}]},{"name":"DialogDescription","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogDescriptionState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DialogFooter","description":"DialogFooter is the action bar on a muted band at the bottom of the dialog:\nbuttons aligned right from the sm breakpoint, and stacked below it with the\nlast one on top.","props":[{"name":"showCloseButton","type":"boolean","required":false,"default":"false","description":"Appends an outline button that closes the dialog. Its text is the English\n\"Close\"; in other languages render a translated DialogClose instead."}]},{"name":"DialogHeader","props":[]},{"name":"DialogOverlay","description":"DialogOverlay is the dimmed, blurred backdrop. DialogContent renders it\nalready.","props":[{"name":"forceRender","type":"boolean","required":false,"default":"false","description":"Whether the backdrop is forced to render even when nested."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogBackdropState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DialogPortal","description":"DialogPortal moves the dialog to the end of the document body. DialogContent\nrenders it already.","props":[{"name":"container","type":"HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null","required":false,"description":"A parent element to render the portal element into."},{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the portal mounted in the DOM while the popup is hidden."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogPortalState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DialogTitle","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTitleState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DialogTrigger","props":[{"name":"handle","type":"DialogHandle<unknown>","required":false,"description":"A handle to associate the trigger with a dialog.\nCan be created with the Dialog.createHandle() method."},{"name":"id","type":"string","required":false,"description":"ID of the trigger. In addition to being forwarded to the rendered element,\nit is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop)."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"payload","type":"unknown","required":false,"description":"A payload to pass to the dialog when it is opened."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"direction","kind":"component","title":"Direction","main":"DirectionProvider","importPath":"@zenoxai/ui/components/direction","docsUrl":"https://ui.zenox.services/components/direction","description":"Enables RTL behavior for Base UI components.\n\nDocumentation: [Base UI Direction Provider](https://base-ui.com/react/utils/direction-provider)","exports":[{"name":"DirectionProvider","description":"Enables RTL behavior for Base UI components.\n\nDocumentation: [Base UI Direction Provider](https://base-ui.com/react/utils/direction-provider)","props":[{"name":"direction","type":"\"ltr\" | \"rtl\"","required":false,"default":"'ltr'","description":"The reading direction of the text"}]}]},{"name":"drawer","kind":"component","title":"Drawer","main":"Drawer","importPath":"@zenoxai/ui/components/drawer","docsUrl":"https://ui.zenox.services/components/drawer","description":"Drawer is a panel that slides in from an edge and can be swiped closed,\nmade for touch: a bottom sheet of actions or a short form on mobile. On\ndesktop, use Sheet for a side panel and Dialog for a centered window.\n\nAlways render a DrawerTitle: it names the drawer for screen readers.","exports":[{"name":"Drawer","description":"Drawer is a panel that slides in from an edge and can be swiped closed,\nmade for touch: a bottom sheet of actions or a short form on mobile. On\ndesktop, use Sheet for a side panel and Dialog for a centered window.\n\nAlways render a DrawerTitle: it names the drawer for screen readers.","props":[{"name":"actionsRef","type":"RefObject<DrawerRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the drawer after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the drawer completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the drawer imperatively when called."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the drawer is initially open.\n\nTo render a controlled drawer, use the `open` prop instead."},{"name":"defaultSnapPoint","type":"DrawerSnapPoint | null","required":false,"description":"The initial snap point value when uncontrolled."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the drawer is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open drawer."},{"name":"disablePointerDismissal","type":"boolean","required":false,"default":"false","description":"Whether to prevent the drawer from closing on outside presses.\nFor non-modal drawers, this also prevents the drawer from closing when focus moves outside of it."},{"name":"handle","type":"DrawerHandle<unknown>","required":false,"description":"A handle to associate the drawer with a trigger.\nIf specified, allows detached triggers to control the drawer's open state.\nCan be created with the Drawer.createHandle() method."},{"name":"modal","type":"boolean | \"trap-focus\"","required":false,"default":"true","description":"Determines if the drawer enters a modal state when open.\n- `true`: user interaction is limited to just the drawer: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: DrawerRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the drawer is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the drawer is opened or closed."},{"name":"onSnapPointChange","type":"((snapPoint: DrawerSnapPoint | null, eventDetails: DrawerRootSnapPointChangeEventDetails) => void)","required":false,"description":"Callback fired when the snap point changes."},{"name":"open","type":"boolean","required":false,"description":"Whether the drawer is currently open."},{"name":"showSwipeHandle","type":"boolean","required":false,"default":"false","description":"Shows a grab bar on the drawer's inner edge. Defaults to false."},{"name":"snapPoint","type":"DrawerSnapPoint | null","required":false,"description":"The currently active snap point. Use with `onSnapPointChange` to control the snap point."},{"name":"snapPoints","type":"DrawerSnapPoint[]","required":false,"description":"Snap points used to position the drawer.\nUse numbers between 0 and 1 to represent fractions of the viewport height,\nnumbers greater than 1 as pixel values, or strings in `px`/`rem` units\n(for example, `'148px'` or `'30rem'`)."},{"name":"snapToSequentialPoints","type":"boolean","required":false,"default":"false","description":"Disables velocity-based snap skipping so drag distance determines the next snap point."},{"name":"swipeDirection","type":"\"left\" | \"right\" | \"up\" | \"down\"","required":false,"default":"down","description":"The swipe direction used to dismiss the drawer."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the drawer is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled drawer.\nThere's no need to specify this prop when the drawer is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"DrawerPortal","description":"DrawerPortal moves the drawer to the end of the document body. DrawerContent\nrenders it already.","props":[{"name":"container","type":"HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null","required":false,"description":"A parent element to render the portal element into."},{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the portal mounted in the DOM while the popup is hidden."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DrawerPortalState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DrawerOverlay","description":"DrawerOverlay is the backdrop, which fades as the drawer is swiped away.\nDrawerContent renders it already when the drawer is modal.","props":[{"name":"forceRender","type":"boolean","required":false,"default":"false","description":"Whether the backdrop is forced to render even when nested."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DrawerBackdropState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DrawerSwipeHandle","description":"DrawerSwipeHandle is the grab bar, hidden from screen readers. Drawer\nrenders it when `showSwipeHandle` is set.","props":[]},{"name":"DrawerTrigger","props":[{"name":"handle","type":"DrawerHandle<unknown>","required":false,"description":"A handle to associate the trigger with a drawer.\nCan be created with the Drawer.createHandle() method."},{"name":"id","type":"string","required":false,"description":"ID of the trigger. In addition to being forwarded to the rendered element,\nit is also used to specify the active trigger for drawers in controlled mode (with the Drawer.Root `triggerId` prop)."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"payload","type":"unknown","required":false,"description":"A payload to pass to the drawer when it is opened."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DrawerTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DrawerClose","props":[{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DrawerCloseState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DrawerContent","description":"DrawerContent is the sliding panel, in a portal with a backdrop when the\ndrawer is modal. The edge it comes from follows `swipeDirection` on\nDrawer: `down`, the default, makes a bottom sheet.","props":[{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the drawer is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"initialFocus","type":"boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the drawer is opened.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DrawerPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DrawerHeader","props":[]},{"name":"DrawerFooter","description":"DrawerFooter holds the actions at the bottom, stacked at full width. A body\nbetween header and footer brings its own 16px inset (`p-4`); when the\nfooter follows the header directly, it adds the 16px gap itself.","props":[]},{"name":"DrawerTitle","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DrawerTitleState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DrawerDescription","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DrawerDescriptionState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"dropdown-menu","kind":"component","title":"Dropdown Menu","main":"DropdownMenu","importPath":"@zenoxai/ui/components/dropdown-menu","docsUrl":"https://ui.zenox.services/components/dropdown-menu","description":"DropdownMenu is a list of actions or options opened from a button: the\nactions of a row, a user menu, a \"More\" overflow. To pick a form value, use\nSelect; for a searchable list of commands, Command.\n\nThe DropdownMenuTrigger needs an accessible name; an icon-only trigger\nneeds aria-label.","exports":[{"name":"DropdownMenu","description":"DropdownMenu is a list of actions or options opened from a button: the\nactions of a row, a user menu, a \"More\" overflow. To pick a form value, use\nSelect; for a searchable list of commands, Command.\n\nThe DropdownMenuTrigger needs an accessible name; an icon-only trigger\nneeds aria-label.","props":[{"name":"actionsRef","type":"RefObject<MenuRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes.\n  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own.\n  Whether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the menu imperatively when called."},{"name":"closeParentOnEsc","type":"boolean","required":false,"default":"false","description":"When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the menu is initially open.\n\nTo render a controlled menu, use the `open` prop instead."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the menu is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open menu."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"handle","type":"MenuHandle<unknown>","required":false,"description":"A handle to associate the menu with a trigger.\nIf specified, allows external triggers to control the menu's open state."},{"name":"highlightItemOnHover","type":"boolean","required":false,"default":"true","description":"Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."},{"name":"modal","type":"boolean","required":false,"default":"true","description":"Determines if the menu enters a modal state when open.\n- `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.\n\nNested menus ignore this prop, and menus opened by hover are never modal."},{"name":"onItemHighlighted","type":"((highlightedItem: HTMLElement, eventDetails: MenuRootHighlightEventDetails) => void)","required":false,"description":"Callback fired when an item is highlighted or unhighlighted.\nReceives the highlighted item element (or `undefined` if no item is highlighted) and details\ncontaining the reason for the change, the event, and the item's text label.\nThe `reason` can be:\n- `'keyboard'`: the highlight changed due to keyboard navigation.\n- `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent`\n  rather than a `PointerEvent`.\n- `'none'`: the highlight changed for another reason, such as automatic highlighting while\n  filtering, the item list changing, or the popup opening or closing."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the menu is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the menu is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the menu is currently open."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"The visual orientation of the menu.\nControls whether roving focus uses up/down or left/right arrow keys."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the menu is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled menu.\nThere's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"DropdownMenuPortal","description":"DropdownMenuPortal moves the menu to the end of the document body.\nDropdownMenuContent renders it already.","props":[{"name":"container","type":"HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null","required":false,"description":"A parent element to render the portal element into."},{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the portal mounted in the DOM while the popup is hidden."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPortalState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DropdownMenuTrigger","props":[{"name":"closeDelay","type":"number","required":false,"default":"0","description":"How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"delay","type":"number","required":false,"default":"100","description":"How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"handle","type":"MenuHandle<unknown>","required":false,"description":"A handle to associate the trigger with a menu."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"openOnHover","type":"boolean","required":false,"description":"Whether the menu should also open when the trigger is hovered."},{"name":"payload","type":"unknown","required":false,"description":"A payload to pass to the menu when it is opened."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DropdownMenuContent","description":"DropdownMenuContent is the menu popup, in a portal below the trigger, as\nwide as the trigger and at least 144px.","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side.\n\nSubmenus and menubars default to `'start'`."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the menu is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"bottom","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions.\n\nSubmenus and vertical menubars default to `'inline-end'`."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"}]},{"name":"DropdownMenuGroup","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DropdownMenuLabel","description":"DropdownMenuLabel is a section heading inside the menu. It is a plain div,\nnot linked to the items under it, because Base UI's GroupLabel throws\noutside a Group. When the items need that aria-labelledby association,\nwrap them in a DropdownMenuGroup with `Menu.GroupLabel` from\n\"@base-ui/react/menu\".","props":[{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."}]},{"name":"DropdownMenuItem","props":[{"name":"closeOnClick","type":"boolean","required":false,"default":"true","description":"Whether to close the menu when the item is clicked."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"The click handler for the menu item."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"variant","type":"\"default\" | \"destructive\"","required":false,"default":"default","description":"`destructive` colors the item red, for delete and other risky actions."}]},{"name":"DropdownMenuCheckboxItem","props":[{"name":"checked","type":"boolean","required":false,"description":"Whether the checkbox item is currently ticked.\n\nTo render an uncontrolled checkbox item, use the `defaultChecked` prop instead."},{"name":"closeOnClick","type":"boolean","required":false,"default":"false","description":"Whether to close the menu when the item is clicked."},{"name":"defaultChecked","type":"boolean","required":false,"default":"false","description":"Whether the checkbox item is initially ticked.\n\nTo render a controlled checkbox item, use the `checked` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onCheckedChange","type":"((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the checkbox item is ticked or unticked."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"The click handler for the menu item."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuCheckboxItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DropdownMenuRadioGroup","props":[{"name":"defaultValue","type":"any","required":false,"description":"The uncontrolled value of the radio item that should be initially selected.\n\nTo render a controlled radio group, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"onValueChange","type":"((value: any, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Function called when the selected value changes."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":false,"description":"The controlled value of the radio item that should be currently selected.\n\nTo render an uncontrolled radio group, use the `defaultValue` prop instead."}]},{"name":"DropdownMenuRadioItem","props":[{"name":"closeOnClick","type":"boolean","required":false,"default":"false","description":"Whether to close the menu when the item is clicked."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"The click handler for the menu item."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":true,"description":"Value of the radio item.\nThis is the value that will be set in the MenuRadioGroup when the item is selected."}]},{"name":"DropdownMenuSeparator","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"vertical","description":"The orientation of the separator."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DropdownMenuShortcut","description":"DropdownMenuShortcut is the key hint at the right edge of an item. It is\ndisplay text only: bind the keys yourself.","props":[]},{"name":"DropdownMenuSub","props":[{"name":"actionsRef","type":"RefObject<MenuRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes.\n  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own.\n  Whether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the menu imperatively when called."},{"name":"closeParentOnEsc","type":"boolean","required":false,"default":"false","description":"When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the menu is initially open.\n\nTo render a controlled menu, use the `open` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"highlightItemOnHover","type":"boolean","required":false,"default":"true","description":"Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."},{"name":"onItemHighlighted","type":"((highlightedItem: HTMLElement, eventDetails: MenuRootHighlightEventDetails) => void)","required":false,"description":"Callback fired when an item is highlighted or unhighlighted.\nReceives the highlighted item element (or `undefined` if no item is highlighted) and details\ncontaining the reason for the change, the event, and the item's text label.\nThe `reason` can be:\n- `'keyboard'`: the highlight changed due to keyboard navigation.\n- `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent`\n  rather than a `PointerEvent`.\n- `'none'`: the highlight changed for another reason, such as automatic highlighting while\n  filtering, the item list changing, or the popup opening or closing."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the menu is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the menu is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the menu is currently open."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"The visual orientation of the menu.\nControls whether roving focus uses up/down or left/right arrow keys."}]},{"name":"DropdownMenuSubTrigger","props":[{"name":"closeDelay","type":"number","required":false,"default":"0","description":"How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"delay","type":"number","required":false,"default":"100","description":"How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false},{"name":"openOnHover","type":"boolean","required":false,"default":"true","description":"Whether the menu should also open when the trigger is hovered."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuSubmenuTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"DropdownMenuSubContent","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side.\n\nSubmenus and menubars default to `'start'`."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the menu is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"bottom","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions.\n\nSubmenus and vertical menubars default to `'inline-end'`."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"}]}]},{"name":"empty","kind":"component","title":"Empty","main":"Empty","importPath":"@zenoxai/ui/components/empty","docsUrl":"https://ui.zenox.services/components/empty","description":"Empty is the layout of an empty state: a centered column with EmptyMedia,\nan EmptyHeader holding EmptyTitle and EmptyDescription, and EmptyContent\nfor actions. For a list, table or card with no data, use the\nListEmptyState pattern, which builds on it; for a failed load,\nListErrorState.","exports":[{"name":"Empty","description":"Empty is the layout of an empty state: a centered column with EmptyMedia,\nan EmptyHeader holding EmptyTitle and EmptyDescription, and EmptyContent\nfor actions. For a list, table or card with no data, use the\nListEmptyState pattern, which builds on it; for a failed load,\nListErrorState.","props":[]},{"name":"EmptyHeader","props":[]},{"name":"EmptyTitle","props":[]},{"name":"EmptyDescription","props":[]},{"name":"EmptyContent","description":"EmptyContent holds the actions under the text, such as a button that\ncreates the first item.","props":[]},{"name":"EmptyMedia","description":"EmptyMedia is the illustration or icon above the title.","props":[{"name":"variant","type":"\"default\" | \"icon\" | null","required":false,"default":"default","description":"`default` shows the media as it is, for an illustration; `icon` sets\nan icon in a 32px muted tile."}]}]},{"name":"field","kind":"component","title":"Field","main":"Field","importPath":"@zenoxai/ui/components/field","docsUrl":"https://ui.zenox.services/components/field","description":"Field lays out one form control with its FieldLabel, FieldDescription and\nFieldError, stacked or on one row. FieldSet with a FieldLegend groups\nrelated fields, and FieldGroup stacks fields with the standard spacing.\n\nField is layout only and links nothing. Give the control an `id` and the\nlabel a matching htmlFor, point the control's aria-describedby at the\ndescription and error, and when the value is invalid set aria-invalid on\nthe control and data-invalid on the Field.","exports":[{"name":"Field","description":"Field lays out one form control with its FieldLabel, FieldDescription and\nFieldError, stacked or on one row. FieldSet with a FieldLegend groups\nrelated fields, and FieldGroup stacks fields with the standard spacing.\n\nField is layout only and links nothing. Give the control an `id` and the\nlabel a matching htmlFor, point the control's aria-describedby at the\ndescription and error, and when the value is invalid set aria-invalid on\nthe control and data-invalid on the Field.","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\" | \"responsive\" | null","required":false,"default":"vertical","description":"`vertical` (default) puts the label above the control; `horizontal`\nputs them on one row, as for a checkbox or a switch; `responsive` is\nvertical until its FieldGroup is 28rem (448px) wide, then horizontal."}]},{"name":"FieldLabel","description":"FieldLabel is the label of a field. Wrapped around a whole Field, it makes\na selectable card: a bordered option that highlights when the checkbox or\nradio inside it is checked. Only an unchecked card takes the hover fill, so\nhover never hides the checked tint.","props":[]},{"name":"FieldDescription","props":[]},{"name":"FieldError","description":"FieldError shows the validation messages of a field with role=\"alert\", and\nrenders nothing when there are none. Pass the message as children, or the\n`errors` of a form library.","props":[{"name":"errors","type":"({ message?: string; })[] | undefined","required":false,"description":"Error objects, such as react-hook-form's. Duplicate messages are dropped;\none message renders as text, several as a list. Children win over it."}]},{"name":"FieldGroup","description":"FieldGroup stacks fields with the standard gap. It is also the container\nwhose width `orientation=\"responsive\"` responds to, so it takes no width\nfrom its content: give it a definite width (`w-full`, `w-56`, the form\ncolumn), never `w-fit`, or its labels wrap one word per line.","props":[]},{"name":"FieldLegend","description":"FieldLegend is the caption of a FieldSet.","props":[{"name":"variant","type":"\"label\" | \"legend\"","required":false,"default":"legend","description":"`legend` (default) is a section heading at text-base; `label` has the\nsize of a FieldLabel, for a set that reads as one question, such as a\nradio group."}]},{"name":"FieldSeparator","description":"FieldSeparator is a horizontal rule between fields or groups, with optional\ncentered text such as \"Or\".","props":[]},{"name":"FieldSet","description":"FieldSet groups related fields under a FieldLegend, as a <fieldset>.","props":[]},{"name":"FieldContent","description":"FieldContent stacks a label and a description beside the control of a\nhorizontal Field, such as the text next to a checkbox.","props":[]},{"name":"FieldTitle","description":"FieldTitle is text styled as a label that is not a <label>, such as the\ntitle of a FieldLabel card whose control is labeled otherwise.","props":[]}]},{"name":"filter-chip","kind":"component","title":"Filter Chip","main":"FilterChip","importPath":"@zenoxai/ui/components/filter-chip","docsUrl":"https://ui.zenox.services/components/filter-chip","description":"FilterChip shows one applied filter as \"label: value\", with an optional\nremove button, in the bar above a list or table. For a static tag or a\ncount, use Badge.\n\nPass `label` and `value` already translated, and a `removeAriaLabel` in the\nsame language when the chip is removable.","exports":[{"name":"FilterChip","description":"FilterChip shows one applied filter as \"label: value\", with an optional\nremove button, in the bar above a list or table. For a static tag or a\ncount, use Badge.\n\nPass `label` and `value` already translated, and a `removeAriaLabel` in the\nsame language when the chip is removable.","props":[{"name":"label","type":"ReactNode","required":false,"description":"Field/dimension being filtered (e.g. \"Severity\"). Renders before the colon."},{"name":"onRemove","type":"(() => void)","required":false,"description":"When present, renders an inline X button that calls this on click."},{"name":"removeAriaLabel","type":"string","required":false,"description":"Accessible name of the remove button. Defaults to the English\n\"Remove filter <label>\" when `label` is a string, else \"Remove filter\";\npass a translated one."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\" | null","required":false,"description":"Height: `sm` 20px, `default` 24px, `lg` 28px. Text is the 12.5px body\nsize, 10px at `sm`; the remove icon is 12px at `sm`, 14px otherwise."},{"name":"value","type":"ReactNode","required":false,"description":"Filter value (e.g. \"Critical\"). Renders bold after the colon."},{"name":"variant","type":"\"default\" | \"ghost\" | \"active\" | null","required":false,"description":"`default` is outlined; `active` is tinted with the primary color, to\nmark the chip in focus; `ghost` has a muted fill and no border."}]}]},{"name":"hover-card","kind":"component","title":"Hover Card","main":"HoverCard","importPath":"@zenoxai/ui/components/hover-card","docsUrl":"https://ui.zenox.services/components/hover-card","description":"HoverCard previews what is behind a link, such as a user or a record, when\nthe pointer rests on its HoverCardTrigger. Keep it optional: touch users\ncannot hover, so the link itself must lead to the same information. For a\none-line hint use Tooltip; for interactive content opened on click,\nPopover.","exports":[{"name":"HoverCard","description":"HoverCard previews what is behind a link, such as a user or a record, when\nthe pointer rests on its HoverCardTrigger. Keep it optional: touch users\ncannot hover, so the link itself must lead to the same information. For a\none-line hint use Tooltip; for interactive content opened on click,\nPopover.","props":[{"name":"actionsRef","type":"RefObject<PreviewCardRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the preview card after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the preview card completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the preview card imperatively when called."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the preview card is initially open.\n\nTo render a controlled preview card, use the `open` prop instead."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the preview card is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open preview card."},{"name":"handle","type":"PreviewCardHandle<unknown>","required":false,"description":"A handle to associate the preview card with a trigger.\nIf specified, allows external triggers to control the card's open state.\nCan be created with the PreviewCard.createHandle() method."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: PreviewCardRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the preview card is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the preview card is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the preview card is currently open."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the preview card is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled preview card.\nThere's no need to specify this prop when the preview card is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"HoverCardTrigger","props":[{"name":"closeDelay","type":"number","required":false,"default":"300","description":"How long to wait before closing the preview card. Specified in milliseconds."},{"name":"delay","type":"number","required":false,"default":"600","description":"How long to wait before the preview card opens. Specified in milliseconds."},{"name":"handle","type":"PreviewCardHandle<unknown>","required":false,"description":"A handle to associate the trigger with a preview card."},{"name":"payload","type":"unknown","required":false,"description":"A payload to pass to the preview card when it is opened."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, PreviewCardTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"HoverCardContent","description":"HoverCardContent is the floating card, 256px wide, in a portal below the\ntrigger and centered on it. It enters and exits with the same motion as\nPopover.","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PreviewCardPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"bottom","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"}]}]},{"name":"input","kind":"component","title":"Input","main":"Input","importPath":"@zenoxai/ui/components/input","docsUrl":"https://ui.zenox.services/components/input","description":"Input is a single-line text field. For several lines use Textarea; for a\nnumber with steppers, NumberInput; for icons, text or buttons attached to\nthe field, InputGroup.\n\nLabel it with a FieldLabel or Label whose htmlFor matches its `id`, or an\naria-label; a placeholder is not a label.","exports":[{"name":"Input","description":"Input is a single-line text field. For several lines use Textarea; for a\nnumber with steppers, NumberInput; for icons, text or buttons attached to\nthe field, InputGroup.\n\nLabel it with a FieldLabel or Label whose htmlFor matches its `id`, or an\naria-label; a placeholder is not a label.","props":[{"name":"size","type":"\"default\" | \"sm\" | \"lg\"","required":false,"default":"default","description":"Height: `sm` 28px, `default` 32px, `lg` 36px, the heights of the Button\nsizes of the same names. Replaces the native `size` attribute (a width\nin characters); set the width with a class instead."}]}]},{"name":"input-group","kind":"component","title":"Input Group","main":"InputGroup","importPath":"@zenoxai/ui/components/input-group","docsUrl":"https://ui.zenox.services/components/input-group","description":"InputGroup attaches icons, text, key hints or buttons to an input or a\ntextarea inside one bordered box: a search field with its icon, a URL with\nits prefix, a message box with a send button. Use InputGroupInput or\nInputGroupTextarea as the control and an InputGroupAddon per attachment.\n\nLabel the control as you would an Input; an icon-only InputGroupButton\nneeds aria-label.","exports":[{"name":"InputGroup","description":"InputGroup attaches icons, text, key hints or buttons to an input or a\ntextarea inside one bordered box: a search field with its icon, a URL with\nits prefix, a message box with a send button. Use InputGroupInput or\nInputGroupTextarea as the control and an InputGroupAddon per attachment.\n\nLabel the control as you would an Input; an icon-only InputGroupButton\nneeds aria-label.","props":[{"name":"size","type":"\"default\" | \"sm\" | \"lg\"","required":false,"default":"default","description":"Height of the group on one row: `sm` 28px, `default` 32px, `lg` 36px,\nthe heights of Input and Button. An `sm` group fits `xs` buttons only."}]},{"name":"InputGroupAddon","description":"InputGroupAddon holds the icons, text or buttons attached to the control.\nA click on its empty area focuses the input.","props":[{"name":"align","type":"\"inline-end\" | \"inline-start\" | \"block-start\" | \"block-end\" | null","required":false,"default":"inline-start","description":"Where the addon sits: `inline-start` (default) and `inline-end` before\nand after the control on its row; `block-start` and `block-end` as\nfull-width rows above and below it, as around a textarea."}]},{"name":"InputGroupButton","description":"InputGroupButton is a compact button sized to sit in an addon. It defaults\nto type=\"button\" and the ghost variant, so it never submits the form by\naccident.\n\nEach `size` is the Button size of the same name, with its text, icon and\nradius: `xs` (default) is 24px tall, for a short text label; `sm` is 28px;\n`icon-xs` (24px) and `icon-sm` (28px) are square, for an icon alone. A 28px\nbutton fits the default and `lg` groups; in an `sm` group use `xs` sizes.","props":[{"name":"focusableWhenDisabled","type":"boolean","required":false,"default":"false","description":"Whether the button should be focusable when disabled."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"xs\" | \"sm\" | \"icon-xs\" | \"icon-sm\"","required":false,"default":"xs"},{"name":"type","type":"\"button\" | \"submit\" | \"reset\"","required":false,"default":"button"},{"name":"variant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | null","required":false,"default":"ghost","description":"Visual weight. `default` is the filled primary action, one per view;\n`outline` and `secondary` are for the other actions; `ghost` has no\nfill until hover, for toolbars and icon buttons; `destructive` is\nfor delete and other irreversible actions; `link` looks like inline\ntext."}]},{"name":"InputGroupText","description":"InputGroupText is static text or an icon inside an addon, such as a\ncurrency sign or a unit.","props":[]},{"name":"InputGroupInput","description":"InputGroupInput is the Input to use inside an InputGroup: it drops its own\nborder and focus ring, which the group draws instead.","props":[]},{"name":"InputGroupTextarea","description":"InputGroupTextarea is the Textarea to use inside an InputGroup: it drops its\nown border and focus ring, which the group draws instead.","props":[]}]},{"name":"input-otp","kind":"component","title":"Input Otp","main":"InputOTP","importPath":"@zenoxai/ui/components/input-otp","docsUrl":"https://ui.zenox.services/components/input-otp","description":"InputOTP is a one-time code field with a box per character, built on\ninput-otp; it accepts a pasted code and the browser's one-time-code\nautofill. Set `maxLength` to the code length and render that many\nInputOTPSlot elements, grouped with InputOTPGroup.\n\nLabel it with a FieldLabel or an aria-label. Set aria-invalid on the root\nalone: every slot shows the invalid state.","exports":[{"name":"InputOTP","description":"InputOTP is a one-time code field with a box per character, built on\ninput-otp; it accepts a pasted code and the browser's one-time-code\nautofill. Set `maxLength` to the code length and render that many\nInputOTPSlot elements, grouped with InputOTPGroup.\n\nLabel it with a FieldLabel or an aria-label. Set aria-invalid on the root\nalone: every slot shows the invalid state.","props":[{"name":"containerClassName","type":"string","required":false,"description":"Classes for the wrapper around the slots; `className` styles the input."}]},{"name":"InputOTPGroup","description":"InputOTPGroup joins adjacent slots into one bordered segment.","props":[]},{"name":"InputOTPSlot","description":"InputOTPSlot is the box that shows one character of the code.","props":[{"name":"index","type":"number","required":true,"description":"Position of the character it shows, from 0."}]},{"name":"InputOTPSeparator","description":"InputOTPSeparator is the dash between two groups of slots.","props":[]}]},{"name":"item","kind":"component","title":"Item","main":"Item","importPath":"@zenoxai/ui/components/item","docsUrl":"https://ui.zenox.services/components/item","description":"Item is a row with optional media, a title and description, and actions:\na list entry, a setting, a linked record. Compose ItemMedia, ItemContent\n(ItemTitle, ItemDescription) and ItemActions. For data in columns use\nTable; for a standalone boxed section, Card.\n\nTo make the whole row a link, pass `render={<a href=\"...\" />}`.","exports":[{"name":"Item","description":"Item is a row with optional media, a title and description, and actions:\na list entry, a setting, a linked record. Compose ItemMedia, ItemContent\n(ItemTitle, ItemDescription) and ItemActions. For data in columns use\nTable; for a standalone boxed section, Card.\n\nTo make the whole row a link, pass `render={<a href=\"...\" />}`.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | null","required":false,"default":"default","description":"Density. `sm` tightens the vertical padding (8px instead of 10px);\n`sm` and `xs` shrink an image ItemMedia (40, 32 and 24px) and the\ngap between Items in an ItemGroup; `xs` also tightens the padding\nand drops it inside a dropdown menu."},{"name":"variant","type":"\"default\" | \"outline\" | \"muted\" | null","required":false,"default":"default","description":"`default` has no border or fill; `outline` adds a border; `muted` a\nlight fill."}]},{"name":"ItemMedia","description":"ItemMedia is the leading icon, avatar or image of an Item. When the Item\nhas a description, it aligns with the title instead of the middle.","props":[{"name":"variant","type":"\"image\" | \"default\" | \"icon\" | null","required":false,"default":"default","description":"`default` shows the media as it is; `icon` sizes an icon to 16px;\n`image` crops an image to a square that follows the Item `size`."}]},{"name":"ItemContent","description":"ItemContent is the text column of an Item, holding ItemTitle and\nItemDescription; it takes the remaining width.","props":[]},{"name":"ItemActions","description":"ItemActions holds the buttons at the end of the row.","props":[]},{"name":"ItemGroup","description":"ItemGroup stacks Items as a list with role=\"list\". Items do not set a role\nof their own: give each one role=\"listitem\".","props":[]},{"name":"ItemSeparator","description":"ItemSeparator is a horizontal rule between Items in an ItemGroup.","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"vertical","description":"The orientation of the separator."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ItemTitle","description":"ItemTitle is the main text of an Item, clamped to one line.","props":[]},{"name":"ItemDescription","description":"ItemDescription is the text under the title, clamped to two lines.","props":[]},{"name":"ItemHeader","description":"ItemHeader is a full-width row above the Item's main row, its children\npushed to both ends.","props":[]},{"name":"ItemFooter","description":"ItemFooter is a full-width row below the Item's main row, its children\npushed to both ends.","props":[]}]},{"name":"kbd","kind":"component","title":"Kbd","main":"Kbd","importPath":"@zenoxai/ui/components/kbd","docsUrl":"https://ui.zenox.services/components/kbd","description":"Kbd shows a key or a shortcut, such as Ctrl K, in text, tooltips and\nmenus. It is display text only: bind the keys yourself.","exports":[{"name":"Kbd","description":"Kbd shows a key or a shortcut, such as Ctrl K, in text, tooltips and\nmenus. It is display text only: bind the keys yourself.","props":[]},{"name":"KbdGroup","description":"KbdGroup sets the keys of one shortcut, such as Ctrl and K, side by side.","props":[]}]},{"name":"label","kind":"component","title":"Label","main":"Label","importPath":"@zenoxai/ui/components/label","docsUrl":"https://ui.zenox.services/components/label","description":"Label is the text label of a form control. Link it with htmlFor and the\ncontrol's `id`, or by wrapping the control. Inside a Field, use FieldLabel,\nwhich builds on it.","exports":[{"name":"Label","description":"Label is the text label of a form control. Link it with htmlFor and the\ncontrol's `id`, or by wrapping the control. Inside a Field, use FieldLabel,\nwhich builds on it.","props":[]}]},{"name":"logo","kind":"component","title":"Logo","main":"ZenoxWordmark","importPath":"@zenoxai/ui/components/logo","docsUrl":"https://ui.zenox.services/components/logo","description":"ZenoxWordmark is the full Zenox lockup, with the mark standing in for the O.\nIts aspect ratio is about 4.9:1, so size it by height and let the width\nfollow. The `h-5` default is an optical match for 16px controls beside it:\nthe letters fill most of the box, where type of the same size reaches only\ncap height.","exports":[{"name":"ZenoxWordmark","description":"ZenoxWordmark is the full Zenox lockup, with the mark standing in for the O.\nIts aspect ratio is about 4.9:1, so size it by height and let the width\nfollow. The `h-5` default is an optical match for 16px controls beside it:\nthe letters fill most of the box, where type of the same size reaches only\ncap height.","props":[{"name":"title","type":"string","required":false,"description":"Accessible name. When set, the artwork is announced as an image with this\nname; when omitted it is decorative and hidden from assistive technology,\nwhich is right when visible text beside it already names the product."}]},{"name":"ZenoxMark","description":"ZenoxMark is the Zenox signal fan, the brand glyph on its own. Use it where\nthe full wordmark does not fit: a collapsed sidebar, an app loader, a\nfavicon-sized slot. It paints in `currentColor` and defaults to\n`text-brand-mark`: the brand blue in light mode, white in dark mode. On the\ntopbar or another dark band in light mode, pass `text-topbar-fg`.\n\nThe artwork is official and must not be redrawn, recolored per path or\nstretched; size it with a single size-* or h-* class.","props":[{"name":"title","type":"string","required":false,"description":"Accessible name. When set, the artwork is announced as an image with this\nname; when omitted it is decorative and hidden from assistive technology,\nwhich is right when visible text beside it already names the product."}]},{"name":"TellyuMark","description":"TellyuMark is the mark of Tellyu, the AI layer of the platform. Use it\nwherever Tellyu is the one speaking (assistant messages, AI-generated\ncontent), never in place of the Zenox mark. The box is about 1:1.1, so it\nreads smaller than a square icon of the same class; size it one step up.","props":[{"name":"title","type":"string","required":false,"description":"Accessible name. When set, the artwork is announced as an image with this\nname; when omitted it is decorative and hidden from assistive technology,\nwhich is right when visible text beside it already names the product."}]}]},{"name":"menubar","kind":"component","title":"Menubar","main":"Menubar","importPath":"@zenoxai/ui/components/menubar","docsUrl":"https://ui.zenox.services/components/menubar","description":"Menubar is a horizontal bar of menus, like the File and Edit menus of a\ndesktop app, with arrow keys moving between them. Each MenubarMenu holds a\nMenubarTrigger and its MenubarContent. For a single menu, use DropdownMenu;\nfor site navigation, NavigationMenu.","exports":[{"name":"Menubar","description":"Menubar is a horizontal bar of menus, like the File and Edit menus of a\ndesktop app, with arrow keys moving between them. Each MenubarMenu holds a\nMenubarTrigger and its MenubarContent. For a single menu, use DropdownMenu;\nfor site navigation, NavigationMenu.","props":[{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the whole menubar is disabled."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."},{"name":"modal","type":"boolean","required":false,"default":"true","description":"Whether the menubar is modal."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"The orientation of the menubar."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenubarState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"MenubarPortal","description":"MenubarPortal moves a menu to the end of the document body. MenubarContent\nrenders one already.","props":[{"name":"container","type":"HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null","required":false,"description":"A parent element to render the portal element into."},{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the portal mounted in the DOM while the popup is hidden."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPortalState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"MenubarMenu","description":"MenubarMenu is one menu of the bar: a trigger and its content.","props":[{"name":"actionsRef","type":"RefObject<MenuRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes.\n  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own.\n  Whether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the menu imperatively when called."},{"name":"closeParentOnEsc","type":"boolean","required":false,"default":"false","description":"When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the menu is initially open.\n\nTo render a controlled menu, use the `open` prop instead."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the menu is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open menu."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"handle","type":"MenuHandle<unknown>","required":false,"description":"A handle to associate the menu with a trigger.\nIf specified, allows external triggers to control the menu's open state."},{"name":"highlightItemOnHover","type":"boolean","required":false,"default":"true","description":"Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."},{"name":"modal","type":"boolean","required":false,"default":"true","description":"Determines if the menu enters a modal state when open.\n- `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.\n\nNested menus ignore this prop, and menus opened by hover are never modal."},{"name":"onItemHighlighted","type":"((highlightedItem: HTMLElement, eventDetails: MenuRootHighlightEventDetails) => void)","required":false,"description":"Callback fired when an item is highlighted or unhighlighted.\nReceives the highlighted item element (or `undefined` if no item is highlighted) and details\ncontaining the reason for the change, the event, and the item's text label.\nThe `reason` can be:\n- `'keyboard'`: the highlight changed due to keyboard navigation.\n- `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent`\n  rather than a `PointerEvent`.\n- `'none'`: the highlight changed for another reason, such as automatic highlighting while\n  filtering, the item list changing, or the popup opening or closing."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the menu is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the menu is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the menu is currently open."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"The visual orientation of the menu.\nControls whether roving focus uses up/down or left/right arrow keys."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the menu is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled menu.\nThere's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"MenubarTrigger","props":[{"name":"closeDelay","type":"number","required":false,"default":"0","description":"How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"delay","type":"number","required":false,"default":"100","description":"How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"handle","type":"MenuHandle<unknown>","required":false,"description":"A handle to associate the trigger with a menu."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"openOnHover","type":"boolean","required":false,"description":"Whether the menu should also open when the trigger is hovered."},{"name":"payload","type":"unknown","required":false,"description":"A payload to pass to the menu when it is opened."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"MenubarContent","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side.\n\nSubmenus and menubars default to `'start'`."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the menu is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"bottom","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions.\n\nSubmenus and vertical menubars default to `'inline-end'`."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"}]},{"name":"MenubarGroup","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"MenubarSeparator","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"vertical","description":"The orientation of the separator."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"MenubarLabel","props":[{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."}]},{"name":"MenubarItem","props":[{"name":"closeOnClick","type":"boolean","required":false,"default":"true","description":"Whether to close the menu when the item is clicked."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"The click handler for the menu item."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"variant","type":"\"default\" | \"destructive\"","required":false,"default":"default","description":"`destructive` colors the item red, for delete and other risky actions."}]},{"name":"MenubarShortcut","description":"MenubarShortcut is the key hint at the right edge of an item. It is display\ntext only: bind the keys yourself.","props":[]},{"name":"MenubarCheckboxItem","props":[{"name":"checked","type":"boolean","required":false,"description":"Whether the checkbox item is currently ticked.\n\nTo render an uncontrolled checkbox item, use the `defaultChecked` prop instead."},{"name":"closeOnClick","type":"boolean","required":false,"default":"false","description":"Whether to close the menu when the item is clicked."},{"name":"defaultChecked","type":"boolean","required":false,"default":"false","description":"Whether the checkbox item is initially ticked.\n\nTo render a controlled checkbox item, use the `checked` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onCheckedChange","type":"((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the checkbox item is ticked or unticked."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"The click handler for the menu item."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuCheckboxItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"MenubarRadioGroup","props":[{"name":"defaultValue","type":"any","required":false,"description":"The uncontrolled value of the radio item that should be initially selected.\n\nTo render a controlled radio group, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"onValueChange","type":"((value: any, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Function called when the selected value changes."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":false,"description":"The controlled value of the radio item that should be currently selected.\n\nTo render an uncontrolled radio group, use the `defaultValue` prop instead."}]},{"name":"MenubarRadioItem","props":[{"name":"closeOnClick","type":"boolean","required":false,"default":"false","description":"Whether to close the menu when the item is clicked."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false,"description":"The click handler for the menu item."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":true,"description":"Value of the radio item.\nThis is the value that will be set in the MenuRadioGroup when the item is selected."}]},{"name":"MenubarSub","props":[{"name":"actionsRef","type":"RefObject<MenuRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes.\n  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own.\n  Whether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the menu imperatively when called."},{"name":"closeParentOnEsc","type":"boolean","required":false,"default":"false","description":"When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the menu is initially open.\n\nTo render a controlled menu, use the `open` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"highlightItemOnHover","type":"boolean","required":false,"default":"true","description":"Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."},{"name":"onItemHighlighted","type":"((highlightedItem: HTMLElement, eventDetails: MenuRootHighlightEventDetails) => void)","required":false,"description":"Callback fired when an item is highlighted or unhighlighted.\nReceives the highlighted item element (or `undefined` if no item is highlighted) and details\ncontaining the reason for the change, the event, and the item's text label.\nThe `reason` can be:\n- `'keyboard'`: the highlight changed due to keyboard navigation.\n- `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent`\n  rather than a `PointerEvent`.\n- `'none'`: the highlight changed for another reason, such as automatic highlighting while\n  filtering, the item list changing, or the popup opening or closing."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the menu is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the menu is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the menu is currently open."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"The visual orientation of the menu.\nControls whether roving focus uses up/down or left/right arrow keys."}]},{"name":"MenubarSubTrigger","props":[{"name":"closeDelay","type":"number","required":false,"default":"0","description":"How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"delay","type":"number","required":false,"default":"100","description":"How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"inset","type":"boolean","required":false,"description":"Indents the text to line up with items that have a leading icon."},{"name":"label","type":"string","required":false,"description":"Overrides the text used for keyboard text navigation and filtering.\nFalls back to the rendered text when not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onClick","type":"((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)","required":false},{"name":"openOnHover","type":"boolean","required":false,"default":"true","description":"Whether the menu should also open when the trigger is hovered."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuSubmenuTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"MenubarSubContent","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side.\n\nSubmenus and menubars default to `'start'`."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the menu is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"id","type":"string","required":false,"description":"@ignore"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"bottom","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions.\n\nSubmenus and vertical menubars default to `'inline-end'`."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"}]}]},{"name":"native-select","kind":"component","title":"Native Select","main":"NativeSelect","importPath":"@zenoxai/ui/components/native-select","docsUrl":"https://ui.zenox.services/components/native-select","description":"NativeSelect is the browser's own <select>, styled like Input, with\nNativeSelectOption and NativeSelectOptGroup inside. It suits mobile forms,\nwhere the system picker is easier to use; for a styled popup with richer\nitems, use Select.\n\nLabel it with a FieldLabel or Label whose htmlFor matches its `id`, or an\naria-label. `className` styles the wrapper; every other prop goes to the\n<select>.","exports":[{"name":"NativeSelect","description":"NativeSelect is the browser's own <select>, styled like Input, with\nNativeSelectOption and NativeSelectOptGroup inside. It suits mobile forms,\nwhere the system picker is easier to use; for a styled popup with richer\nitems, use Select.\n\nLabel it with a FieldLabel or Label whose htmlFor matches its `id`, or an\naria-label. `className` styles the wrapper; every other prop goes to the\n<select>.","props":[{"name":"size","type":"\"default\" | \"sm\" | \"lg\"","required":false,"default":"default","description":"Height: `sm` 28px, `default` 32px, `lg` 36px, the heights of Input and\nButton. The chevron is 14px at `sm`, 16px otherwise."}]},{"name":"NativeSelectOptGroup","description":"NativeSelectOptGroup groups options under a label, as an <optgroup>.","props":[]},{"name":"NativeSelectOption","description":"NativeSelectOption is one <option> of a NativeSelect.","props":[]}]},{"name":"navigation-menu","kind":"component","title":"Navigation Menu","main":"NavigationMenu","importPath":"@zenoxai/ui/components/navigation-menu","docsUrl":"https://ui.zenox.services/components/navigation-menu","description":"NavigationMenu is a bar of site navigation links in which some items open\na panel of further links, as in a marketing site header. Each\nNavigationMenuItem holds a NavigationMenuLink, or a NavigationMenuTrigger\nwith its NavigationMenuContent. For the app's main navigation use Sidebar;\nfor a menu of actions, DropdownMenu or Menubar.","exports":[{"name":"NavigationMenu","description":"NavigationMenu is a bar of site navigation links in which some items open\na panel of further links, as in a marketing site header. Each\nNavigationMenuItem holds a NavigationMenuLink, or a NavigationMenuTrigger\nwith its NavigationMenuContent. For the app's main navigation use Sidebar;\nfor a menu of actions, DropdownMenu or Menubar.","props":[{"name":"actionsRef","type":"RefObject<NavigationMenuRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the navigation menu popup after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onValueChange` first, otherwise the navigation menu popup completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the navigation menu imperatively when called."},{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side."},{"name":"closeDelay","type":"number","required":false,"default":"50","description":"How long to wait before closing the navigation popup. Specified in milliseconds."},{"name":"defaultValue","type":"any","required":false,"default":"null","description":"The uncontrolled value of the item that should be initially selected.\n\nTo render a controlled navigation menu, use the `value` prop instead."},{"name":"delay","type":"number","required":false,"default":"50","description":"How long to wait before opening the navigation popup. Specified in milliseconds."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the navigation menu is closed."},{"name":"onValueChange","type":"((value: any, eventDetails: NavigationMenuRootChangeEventDetails) => void)","required":false,"description":"Callback fired when the value changes."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"The orientation of the navigation menu."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NavigationMenuRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":false,"default":"null","description":"The controlled value of the navigation menu item that should be currently open.\nWhen non-nullish, the menu will be open. When nullish, the menu will be closed.\n\nTo render an uncontrolled navigation menu, use the `defaultValue` prop instead."}]},{"name":"NavigationMenuContent","description":"NavigationMenuContent is the panel of links of one item, shown in the\npopup under the bar.","props":[{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the content mounted in the DOM while the popup is closed.\nEnsures the content is present during server-side rendering for web crawlers."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NavigationMenuContentState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"NavigationMenuIndicator","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NavigationMenuIconState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"NavigationMenuItem","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NavigationMenuItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":false,"description":"A unique value that identifies this navigation menu item.\nIf no value is provided, a unique ID will be generated automatically.\nUse when controlling the navigation menu programmatically."}]},{"name":"NavigationMenuLink","description":"NavigationMenuLink is a link in the bar or in a panel. Set `active` on the\nlink to the current page: it takes the selection colors (primary-soft fill\nand text) and keeps them on hover and focus. Pass `render` to use the\nrouter's link.","props":[{"name":"active","type":"boolean","required":false,"default":"false","description":"Whether the link is the currently active page."},{"name":"closeOnClick","type":"boolean","required":false,"default":"false","description":"Whether to close the navigation menu when the link is clicked."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, NavigationMenuLinkState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"NavigationMenuList","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NavigationMenuListState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"NavigationMenuTrigger","description":"NavigationMenuTrigger is a top-level item that opens its\nNavigationMenuContent panel, with a chevron that turns when it is open.","props":[{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NavigationMenuTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"NavigationMenuPositioner","description":"NavigationMenuPositioner places the popup that shows the open panel.\nNavigationMenu renders it already.","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"anchor","type":"Element | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null","required":false,"description":"An element to position the popup against.\nBy default, the popup will be positioned against the trigger."},{"name":"arrowPadding","type":"number","required":false,"default":"5","description":"Minimum distance to maintain between the arrow and the edges of the popup.\n\nUse it to prevent the arrow element from hanging out of the rounded corners of a popup."},{"name":"collisionAvoidance","type":"CollisionAvoidance","required":false,"description":"Determines how to handle collisions when positioning the popup.\n\n`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):\n- `'flip'`: keep the requested side when it fits; otherwise try the opposite side\n  (`top` and `bottom`, or `left` and `right`).\n- `'shift'`: never change side; keep the requested side and move the popup within\n  the clipping boundary so it stays visible.\n- `'none'`: do not correct side-axis overflow.\n\n`align` controls overflow on the alignment axis (`start`/`center`/`end`):\n- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.\n- `'shift'`: keep side and requested alignment, then nudge the popup along the\n  alignment axis to fit.\n- `'none'`: do not correct alignment-axis overflow.\n\n`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the\npreferred axis cannot fit:\n- `'start'`: allow perpendicular fallback and try the logical start side first\n  (`top` before `bottom`, or `left` before `right` in LTR).\n- `'end'`: allow perpendicular fallback and try the logical end side first\n  (`bottom` before `top`, or `right` before `left` in LTR).\n- `'none'`: do not fallback to the perpendicular axis.\n\nWhen `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.\nIf `align` is omitted, it defaults to `'flip'`.\n@example ```jsx\n<Positioner\n  collisionAvoidance={{\n    side: 'shift',\n    align: 'shift',\n    fallbackAxisSide: 'none',\n  }}\n/>\n```"},{"name":"collisionBoundary","type":"Boundary","required":false,"default":"'clipping-ancestors'","description":"An element or a rectangle that delimits the area that the popup is confined to."},{"name":"collisionPadding","type":"Padding","required":false,"default":"5","description":"Additional space to maintain from the edge of the collision boundary."},{"name":"disableAnchorTracking","type":"boolean","required":false,"default":"false","description":"Whether to disable the popup from tracking any layout shift of its positioning anchor."},{"name":"positionMethod","type":"\"absolute\" | \"fixed\"","required":false,"default":"'absolute'","description":"Determines which CSS `position` property to use."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NavigationMenuPositionerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"bottom","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"},{"name":"sticky","type":"boolean","required":false,"default":"false","description":"Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view."}]}]},{"name":"number-input","kind":"component","title":"Number Input","main":"NumberInput","importPath":"@zenoxai/ui/components/number-input","docsUrl":"https://ui.zenox.services/components/number-input","description":"NumberInput is a field for a number, with arrow-key stepping and clamping\nto `min` and `max`, built on Base UI NumberField. On its own it renders one\nboxed input; for stepper buttons, compose the parts instead:\n\n```tsx\n<NumberInput.Root value={n} onValueChange={setN} min={0} max={100}>\n  <NumberInput.Group>\n    <NumberInput.Decrement />\n    <NumberInput.Field aria-label=\"Quantity\" />\n    <NumberInput.Increment />\n  </NumberInput.Group>\n</NumberInput.Root>\n```\n\nLabel it with `ariaLabel`, or with a FieldLabel whose htmlFor matches its\n`id`. Pass `locale` and `format` so the number reads in the user's locale.","exports":[{"name":"NumberInput","description":"NumberInput is a field for a number, with arrow-key stepping and clamping\nto `min` and `max`, built on Base UI NumberField. On its own it renders one\nboxed input; for stepper buttons, compose the parts instead:\n\n```tsx\n<NumberInput.Root value={n} onValueChange={setN} min={0} max={100}>\n  <NumberInput.Group>\n    <NumberInput.Decrement />\n    <NumberInput.Field aria-label=\"Quantity\" />\n    <NumberInput.Increment />\n  </NumberInput.Group>\n</NumberInput.Root>\n```\n\nLabel it with `ariaLabel`, or with a FieldLabel whose htmlFor matches its\n`id`. Pass `locale` and `format` so the number reads in the user's locale.","props":[{"name":"allowOutOfRange","type":"boolean","required":false,"default":"false","description":"When true, direct text entry may be outside the `min`/`max` range without clamping,\nso native range underflow/overflow validation can occur.\nStep-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp."},{"name":"allowWheelScrub","type":"boolean","required":false,"default":"false","description":"Whether to allow the user to scrub the input value with the mouse wheel while focused and\nhovering over the input."},{"name":"ariaLabel","type":"string","required":false,"description":"Accessible name of the input, when no visible label points at it."},{"name":"defaultValue","type":"number","required":false,"description":"The uncontrolled value of the field when it's initially rendered.\n\nTo render a controlled number field, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"form","type":"string","required":false,"description":"Identifies the form that owns the hidden input.\nUseful when the number field is rendered outside the form."},{"name":"format","type":"NumberFormatOptions","required":false,"description":"Options to format the input value."},{"name":"id","type":"string","required":false,"description":"The id of the input element."},{"name":"inputClassName","type":"string","required":false,"description":"Classes for the input; `className` styles the root."},{"name":"inputRef","type":"Ref<HTMLInputElement>","required":false,"description":"A ref to access the hidden input element.\nRef to the input element, to focus it from outside."},{"name":"largeStep","type":"number","required":false,"default":"10","description":"The large step value of the input element when incrementing while the shift key is held.\nSnaps to multiples of this value when `snapOnStep` is enabled."},{"name":"locale","type":"LocalesArgument","required":false,"description":"The locale of the input element.\nDefaults to the user's runtime locale."},{"name":"max","type":"number","required":false,"description":"The maximum value of the input element."},{"name":"min","type":"number","required":false,"description":"The minimum value of the input element."},{"name":"name","type":"string","required":false,"description":"Identifies the field when a form is submitted."},{"name":"onValueChange","type":"((value: number | null, eventDetails: NumberFieldRootChangeEventDetails) => void)","required":false,"description":"Callback fired when the number value changes.\n\nThe `eventDetails.reason` indicates what triggered the change:\n- `'input-change'` for parseable typing or programmatic text updates\n- `'input-clear'` when the field becomes empty\n- `'input-blur'` when formatting (and clamping, if enabled) occurs on blur\n- `'input-paste'` for paste interactions\n- `'keyboard'` for arrow-key/Home/End stepping (typing digits uses `'input-change'`/`'input-clear'`)\n- `'increment-press'` / `'decrement-press'` for button presses on the increment and decrement controls\n- `'wheel'` for wheel-based scrubbing\n- `'scrub'` for scrub area drags"},{"name":"onValueCommitted","type":"((value: number | null, eventDetails: NumberFieldRootCommitEventDetails) => void)","required":false,"description":"Callback function that is fired when the value is committed.\nIt runs later than `onValueChange`, when:\n- The input is blurred after typing a value.\n- The pointer is released after scrubbing or pressing the increment/decrement buttons.\n\nIt runs simultaneously with `onValueChange` when interacting with the keyboard or the\nmouse wheel.\n\n**Warning**: This is a generic event not a change event."},{"name":"readOnly","type":"boolean","required":false,"default":"false","description":"Whether the user should be unable to change the field value."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NumberFieldRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"required","type":"boolean","required":false,"default":"false","description":"Whether the user must enter a value before submitting a form."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\"","required":false,"description":"Height of the field and its steppers: `sm` 28px, `default` 32px, `lg`\n36px, the heights of Input and Button."},{"name":"smallStep","type":"number","required":false,"default":"0.1","description":"The small step value of the input element when incrementing while the alt key is held.\nSnaps to multiples of this value when `snapOnStep` is enabled."},{"name":"snapOnStep","type":"boolean","required":false,"default":"false","description":"Whether the value should snap to the nearest step when incrementing or decrementing."},{"name":"step","type":"number | \"any\"","required":false,"default":"1","description":"Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area.\nTo always enable step validation on form submission, specify the `min` prop explicitly in conjunction with this prop.\nSpecify `step=\"any\"` to always disable step validation; interactive stepping then uses a base amount of `1`, while the alt and shift keys still step by `smallStep` and `largeStep`."},{"name":"value","type":"number | null","required":false,"description":"The raw numeric value of the field."}]},{"name":"NumberInputRoot","description":"NumberInputRoot holds the value, range and step of a composed NumberInput,\nalso exposed as NumberInput.Root. Every other part goes inside it.","props":[{"name":"allowOutOfRange","type":"boolean","required":false,"default":"false","description":"When true, direct text entry may be outside the `min`/`max` range without clamping,\nso native range underflow/overflow validation can occur.\nStep-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp."},{"name":"allowWheelScrub","type":"boolean","required":false,"default":"false","description":"Whether to allow the user to scrub the input value with the mouse wheel while focused and\nhovering over the input."},{"name":"defaultValue","type":"number","required":false,"description":"The uncontrolled value of the field when it's initially rendered.\n\nTo render a controlled number field, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"form","type":"string","required":false,"description":"Identifies the form that owns the hidden input.\nUseful when the number field is rendered outside the form."},{"name":"format","type":"NumberFormatOptions","required":false,"description":"Options to format the input value."},{"name":"id","type":"string","required":false,"description":"The id of the input element."},{"name":"inputRef","type":"Ref<HTMLInputElement>","required":false,"description":"A ref to access the hidden input element.\nRef to the input element, to focus it from outside."},{"name":"largeStep","type":"number","required":false,"default":"10","description":"The large step value of the input element when incrementing while the shift key is held.\nSnaps to multiples of this value when `snapOnStep` is enabled."},{"name":"locale","type":"LocalesArgument","required":false,"description":"The locale of the input element.\nDefaults to the user's runtime locale."},{"name":"max","type":"number","required":false,"description":"The maximum value of the input element."},{"name":"min","type":"number","required":false,"description":"The minimum value of the input element."},{"name":"name","type":"string","required":false,"description":"Identifies the field when a form is submitted."},{"name":"onValueChange","type":"((value: number | null, eventDetails: NumberFieldRootChangeEventDetails) => void)","required":false,"description":"Callback fired when the number value changes.\n\nThe `eventDetails.reason` indicates what triggered the change:\n- `'input-change'` for parseable typing or programmatic text updates\n- `'input-clear'` when the field becomes empty\n- `'input-blur'` when formatting (and clamping, if enabled) occurs on blur\n- `'input-paste'` for paste interactions\n- `'keyboard'` for arrow-key/Home/End stepping (typing digits uses `'input-change'`/`'input-clear'`)\n- `'increment-press'` / `'decrement-press'` for button presses on the increment and decrement controls\n- `'wheel'` for wheel-based scrubbing\n- `'scrub'` for scrub area drags"},{"name":"onValueCommitted","type":"((value: number | null, eventDetails: NumberFieldRootCommitEventDetails) => void)","required":false,"description":"Callback function that is fired when the value is committed.\nIt runs later than `onValueChange`, when:\n- The input is blurred after typing a value.\n- The pointer is released after scrubbing or pressing the increment/decrement buttons.\n\nIt runs simultaneously with `onValueChange` when interacting with the keyboard or the\nmouse wheel.\n\n**Warning**: This is a generic event not a change event."},{"name":"readOnly","type":"boolean","required":false,"default":"false","description":"Whether the user should be unable to change the field value."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NumberFieldRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"required","type":"boolean","required":false,"default":"false","description":"Whether the user must enter a value before submitting a form."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\"","required":false,"default":"default","description":"Height of the field and its steppers: `sm` 28px, `default` 32px, `lg`\n36px, the heights of Input and Button."},{"name":"smallStep","type":"number","required":false,"default":"0.1","description":"The small step value of the input element when incrementing while the alt key is held.\nSnaps to multiples of this value when `snapOnStep` is enabled."},{"name":"snapOnStep","type":"boolean","required":false,"default":"false","description":"Whether the value should snap to the nearest step when incrementing or decrementing."},{"name":"step","type":"number | \"any\"","required":false,"default":"1","description":"Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area.\nTo always enable step validation on form submission, specify the `min` prop explicitly in conjunction with this prop.\nSpecify `step=\"any\"` to always disable step validation; interactive stepping then uses a base amount of `1`, while the alt and shift keys still step by `smallStep` and `largeStep`."},{"name":"value","type":"number | null","required":false,"description":"The raw numeric value of the field."}]},{"name":"NumberInputGroup","description":"NumberInputGroup joins the field and stepper buttons in one bordered box,\nas tall as an Input of the same size.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NumberFieldGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"NumberInputField","description":"NumberInputField is the text input of a composed NumberInput.","props":[{"name":"aria-roledescription","type":"string","required":false,"default":"'Number field'","description":"A user-friendly description of the input's role for assistive tech. This is a role\ndescription, not an accessible name — use `Field.Label` or `aria-label` to name the control."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, NumberFieldInputState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"NumberInputIncrement","description":"NumberInputIncrement is the plus button. Its accessible name defaults to\nthe English \"Increase\"; pass a translated aria-label.","props":[{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NumberFieldIncrementState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"NumberInputDecrement","description":"NumberInputDecrement is the minus button. Its accessible name defaults to\nthe English \"Decrease\"; pass a translated aria-label.","props":[{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NumberFieldDecrementState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"NumberInputScrubArea","description":"NumberInputScrubArea changes the value as the pointer drags across it, such\nas on the field's label.","props":[{"name":"direction","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"Cursor movement direction in the scrub area."},{"name":"pixelSensitivity","type":"number","required":false,"default":"2","description":"Determines how many pixels the cursor must move before the value changes.\nA higher value will make scrubbing less sensitive."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, NumberFieldScrubAreaState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"teleportDistance","type":"number","required":false,"description":"If specified, determines the distance that the cursor may move from the center\nof the scrub area before it will loop back around."}]}]},{"name":"pagination","kind":"component","title":"Pagination","main":"Pagination","importPath":"@zenoxai/ui/components/pagination","docsUrl":"https://ui.zenox.services/components/pagination","description":"Pagination is the row of page links under a paginated list: previous,\nnumbered pages, an ellipsis for skipped runs, and next. Compose\nPaginationContent with a PaginationItem around each link.\n\nThe links are <a> elements: give each an `href`, and mark the current\npage with `isActive`. The built-in labels are English; pass translated\nones (aria-label here, `text` and aria-label on PaginationPrevious and\nPaginationNext).","exports":[{"name":"Pagination","description":"Pagination is the row of page links under a paginated list: previous,\nnumbered pages, an ellipsis for skipped runs, and next. Compose\nPaginationContent with a PaginationItem around each link.\n\nThe links are <a> elements: give each an `href`, and mark the current\npage with `isActive`. The built-in labels are English; pass translated\nones (aria-label here, `text` and aria-label on PaginationPrevious and\nPaginationNext).","props":[]},{"name":"PaginationContent","props":[]},{"name":"PaginationEllipsis","description":"PaginationEllipsis marks a run of skipped pages; it is hidden from screen\nreaders.","props":[{"name":"label","type":"string","required":false,"default":"More pages","description":"Already-translated text read by screen readers in place of the dots."}]},{"name":"PaginationItem","props":[]},{"name":"PaginationLink","description":"PaginationLink is a page link styled as a ghost button. The current page,\nmarked with `isActive`, takes the selection colors, like the current entry\nof a Sidebar or a pressed Toggle.","props":[{"name":"isActive","type":"boolean","required":false,"description":"Marks the current page: the selection colors (primary-soft fill and\ntext, primary border) and aria-current=\"page\"."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null","required":false,"default":"icon","description":"Height: `xs` 24px, `sm` 28px, `default` 32px, `lg` 36px. The `icon-*`\nsizes are square buttons of the same heights for a single icon. The\nicon follows the size name: 12px at `xs`, 14px at `sm`, 16px at\n`default` and `lg`."}]},{"name":"PaginationNext","description":"PaginationNext links to the next page. Its aria-label defaults to the\nEnglish \"Go to next page\".","props":[{"name":"isActive","type":"boolean","required":false,"description":"Marks the current page: the selection colors (primary-soft fill and\ntext, primary border) and aria-current=\"page\"."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null","required":false,"description":"Height: `xs` 24px, `sm` 28px, `default` 32px, `lg` 36px. The `icon-*`\nsizes are square buttons of the same heights for a single icon. The\nicon follows the size name: 12px at `xs`, 14px at `sm`, 16px at\n`default` and `lg`."},{"name":"text","type":"string","required":false,"default":"Next","description":"Visible label beside the chevron, shown from the sm breakpoint up."}]},{"name":"PaginationPrevious","description":"PaginationPrevious links to the previous page. Its aria-label defaults to\nthe English \"Go to previous page\".","props":[{"name":"isActive","type":"boolean","required":false,"description":"Marks the current page: the selection colors (primary-soft fill and\ntext, primary border) and aria-current=\"page\"."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null","required":false,"description":"Height: `xs` 24px, `sm` 28px, `default` 32px, `lg` 36px. The `icon-*`\nsizes are square buttons of the same heights for a single icon. The\nicon follows the size name: 12px at `xs`, 14px at `sm`, 16px at\n`default` and `lg`."},{"name":"text","type":"string","required":false,"default":"Previous","description":"Visible label beside the chevron, shown from the sm breakpoint up."}]}]},{"name":"popover","kind":"component","title":"Popover","main":"Popover","importPath":"@zenoxai/ui/components/popover","docsUrl":"https://ui.zenox.services/components/popover","description":"Popover is a floating panel anchored to its PopoverTrigger and opened on\nclick, for interactive content that does not need a page of its own: a\nfilter form, a date picker, quick settings. For a short hint on hover use\nTooltip; for a list of actions, DropdownMenu; for a task that must hold\nthe user's focus, Dialog.\n\nGive the panel a PopoverTitle, or an aria-label on PopoverContent, so\nscreen readers announce what opened.","exports":[{"name":"Popover","description":"Popover is a floating panel anchored to its PopoverTrigger and opened on\nclick, for interactive content that does not need a page of its own: a\nfilter form, a date picker, quick settings. For a short hint on hover use\nTooltip; for a list of actions, DropdownMenu; for a task that must hold\nthe user's focus, Dialog.\n\nGive the panel a PopoverTitle, or an aria-label on PopoverContent, so\nscreen readers announce what opened.","props":[{"name":"actionsRef","type":"RefObject<PopoverRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the popover after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the popover completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the popover imperatively when called."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the popover is initially open.\n\nTo render a controlled popover, use the `open` prop instead."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the popover is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open popover."},{"name":"handle","type":"PopoverHandle<unknown>","required":false,"description":"A handle to associate the popover with a trigger.\nIf specified, allows external triggers to control the popover's open state."},{"name":"modal","type":"boolean | \"trap-focus\"","required":false,"default":"false","description":"Determines if the popover enters a modal state when open.\n- `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.\n\nWhen `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered\ninside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as\nTailwind's `sr-only` utility.\n\nWhen `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch\nscreen readers can escape the popup."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: PopoverRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the popover is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the popover is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the popover is currently open."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the popover is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled popover.\nThere's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"PopoverContent","description":"PopoverContent is the panel, 288px wide, in a portal below the trigger.","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the popover is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."},{"name":"initialFocus","type":"boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the popover is opened.\nBy default, focus moves to the first tabbable element inside the popup, except when the popover\nis opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"bottom","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"}]},{"name":"PopoverDescription","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverDescriptionState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"PopoverHeader","description":"PopoverHeader stacks a PopoverTitle and a PopoverDescription at the top.","props":[]},{"name":"PopoverTitle","description":"PopoverTitle names the panel, at the compact title step (text-md,\nsemibold): the panel's text and controls sit at 12.5px, so the title needs\nthe larger size and the heavier weight to stand apart.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverTitleState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"PopoverTrigger","props":[{"name":"closeDelay","type":"number","required":false,"default":"0","description":"How long to wait before closing the popover that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"delay","type":"number","required":false,"default":"300","description":"How long to wait before the popover may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop."},{"name":"handle","type":"PopoverHandle<unknown>","required":false,"description":"A handle to associate the trigger with a popover."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"openOnHover","type":"boolean","required":false,"default":"false","description":"Whether the popover should also open when the trigger is hovered."},{"name":"payload","type":"unknown","required":false,"description":"A payload to pass to the popover when it is opened."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"progress","kind":"component","title":"Progress","main":"Progress","importPath":"@zenoxai/ui/components/progress","docsUrl":"https://ui.zenox.services/components/progress","description":"Progress is a bar that shows how much of a task is done, such as an upload\nor an import. Pass `value` from 0 to `max` (100 by default), or null while\nthe amount is unknown.\n\nName it with a ProgressLabel or an aria-label. ProgressLabel and\nProgressValue, as children, sit on a row above the track.","exports":[{"name":"Progress","description":"Progress is a bar that shows how much of a task is done, such as an upload\nor an import. Pass `value` from 0 to `max` (100 by default), or null while\nthe amount is unknown.\n\nName it with a ProgressLabel or an aria-label. ProgressLabel and\nProgressValue, as children, sit on a row above the track.","props":[{"name":"aria-valuetext","type":"string","required":false,"description":"A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar."},{"name":"format","type":"NumberFormatOptions","required":false,"description":"Options to format the value."},{"name":"getAriaValueText","type":"((formattedValue: string, value: number | null) => string)","required":false,"description":"Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar."},{"name":"locale","type":"LocalesArgument","required":false,"description":"The locale used by `Intl.NumberFormat` when formatting the value.\nDefaults to the user's runtime locale."},{"name":"max","type":"number","required":false,"default":"100","description":"The maximum value."},{"name":"min","type":"number","required":false,"default":"0","description":"The minimum value."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"number | null","required":true,"description":"The current value. The component is indeterminate when value is `null`."}]},{"name":"ProgressTrack","description":"ProgressTrack is the bar's background. Progress renders it already; it is\nexported for custom layouts.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressTrackState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ProgressIndicator","description":"ProgressIndicator is the filled part of the bar. Progress renders it\nalready; it is exported for custom layouts.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressIndicatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ProgressLabel","description":"ProgressLabel names the bar, above the track on the left.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressLabelState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"ProgressValue","description":"ProgressValue shows the formatted value, above the track on the right.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressValueState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"radio-group","kind":"component","title":"Radio Group","main":"RadioGroup","importPath":"@zenoxai/ui/components/radio-group","docsUrl":"https://ui.zenox.services/components/radio-group","description":"RadioGroup picks exactly one option from a short list that stays in view,\nsuch as a plan or a frequency. For a long list, use Select; for an on/off\nchoice, Checkbox or Switch; for a compact segmented control, ToggleGroup.\n\nName the group with a FieldLegend in a FieldSet or an aria-label, and\nlabel each RadioGroupItem with a FieldLabel or Label.","exports":[{"name":"RadioGroup","description":"RadioGroup picks exactly one option from a short list that stays in view,\nsuch as a plan or a frequency. For a long list, use Select; for an on/off\nchoice, Checkbox or Switch; for a compact segmented control, ToggleGroup.\n\nName the group with a FieldLegend in a FieldSet or an aria-label, and\nlabel each RadioGroupItem with a FieldLabel or Label.","props":[{"name":"defaultValue","type":"any","required":false,"description":"The uncontrolled value of the radio button that should be initially selected.\n\nTo render a controlled radio group, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"form","type":"string","required":false,"description":"Identifies the form that owns the radio inputs.\nUseful when the radio group is rendered outside the form."},{"name":"inputRef","type":"Ref<HTMLInputElement>","required":false,"description":"A ref to access the hidden input element."},{"name":"name","type":"string","required":false,"description":"Identifies the field when a form is submitted."},{"name":"onValueChange","type":"((value: any, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)","required":false,"description":"Callback fired when the value changes."},{"name":"readOnly","type":"boolean","required":false,"default":"false","description":"Whether the user should be unable to select a different radio button in the group."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"required","type":"boolean","required":false,"default":"false","description":"Whether the user must choose a value before submitting a form."},{"name":"value","type":"any","required":false,"description":"The controlled value of the radio item that should be currently selected.\n\nTo render an uncontrolled radio group, use the `defaultValue` prop instead."}]},{"name":"RadioGroupItem","props":[{"name":"disabled","type":"boolean","required":false,"description":"Whether the component should ignore user interaction."},{"name":"inputRef","type":"Ref<HTMLInputElement>","required":false,"description":"A ref to access the hidden input element."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"readOnly","type":"boolean","required":false,"description":"Whether the user should be unable to select the radio button."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"required","type":"boolean","required":false,"description":"Whether the user must choose a value before submitting a form."},{"name":"value","type":"any","required":true,"description":"The unique identifying value of the radio in a group."}]}]},{"name":"resizable","kind":"component","title":"Resizable","main":"ResizablePanelGroup","importPath":"@zenoxai/ui/components/resizable","docsUrl":"https://ui.zenox.services/components/resizable","description":"ResizablePanelGroup lays out ResizablePanel elements in a row, or a column\nwith `orientation=\"vertical\"`, with a ResizableHandle between each pair\nthat the user drags to resize them; it is built on react-resizable-panels.\nUse it for split views, such as a list beside its detail.\n\nGive the group a height: it fills its container.","exports":[{"name":"ResizablePanelGroup","description":"ResizablePanelGroup lays out ResizablePanel elements in a row, or a column\nwith `orientation=\"vertical\"`, with a ResizableHandle between each pair\nthat the user drags to resize them; it is built on react-resizable-panels.\nUse it for split views, such as a list beside its detail.\n\nGive the group a height: it fills its container.","props":[]},{"name":"ResizablePanel","description":"ResizablePanel is one resizable area of a ResizablePanelGroup; set its\n`defaultSize` and `minSize` on it.","props":[]},{"name":"ResizableHandle","description":"ResizableHandle is the divider between two panels of a\nResizablePanelGroup. The user drags it, or focuses it and uses the arrow\nkeys, to resize them. The line tints primary on hover and turns solid\nprimary while dragged.","props":[{"name":"withHandle","type":"boolean","required":false,"description":"Shows a grip on the divider, so it is easier to spot."}]}]},{"name":"scroll-area","kind":"component","title":"Scroll Area","main":"ScrollArea","importPath":"@zenoxai/ui/components/scroll-area","docsUrl":"https://ui.zenox.services/components/scroll-area","description":"ScrollArea is a scrolling region with a thin themed scrollbar in place of\nthe browser's, for a panel of fixed size such as a sidebar list or a\npopover body. Let the page itself scroll natively.\n\nGive it a height or a max height, or it grows with its content and never\nscrolls.","exports":[{"name":"ScrollArea","description":"ScrollArea is a scrolling region with a thin themed scrollbar in place of\nthe browser's, for a panel of fixed size such as a sidebar list or a\npopover body. Let the page itself scroll natively.\n\nGive it a height or a max height, or it grows with its content and never\nscrolls.","props":[{"name":"overflowEdgeThreshold","type":"number | Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number; }>","required":false,"default":"0","description":"The threshold in pixels that must be passed before the overflow edge attributes are applied.\nAccepts a single number for all edges or an object to configure them individually."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ScrollAreaRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"scrollbarClassName","type":"string","required":false,"description":"Classes for the scrollbar track. Use it to size the bar or to fade it in on\n`data-hovering` / `data-scrolling` — the primitive keeps the track visible\nat all times, which reads as clutter on a permanently mounted surface."}]},{"name":"ScrollBar","description":"ScrollBar is a scrollbar track and thumb. ScrollArea renders a vertical\none; add a ScrollBar with `orientation=\"horizontal\"` inside it for\nsideways scrolling.","props":[{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the HTML element in the DOM when the viewport isn't scrollable."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"vertical","description":"Whether the scrollbar controls vertical or horizontal scroll."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ScrollAreaScrollbarState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"select","kind":"component","title":"Select","main":"Select","importPath":"@zenoxai/ui/components/select","docsUrl":"https://ui.zenox.services/components/select","description":"Groups all parts of the select.\nDoesn't render its own HTML element.\n\nDocumentation: [Base UI Select](https://base-ui.com/react/components/select)","exports":[{"name":"Select","description":"Groups all parts of the select.\nDoesn't render its own HTML element.\n\nDocumentation: [Base UI Select](https://base-ui.com/react/components/select)","props":[{"name":"actionsRef","type":"RefObject<SelectRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the select after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the select completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the select imperatively when called."},{"name":"autoComplete","type":"string","required":false,"description":"Provides a hint to the browser for autofill.\n@see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete"},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the select popup is initially open.\n\nTo render a controlled select popup, use the `open` prop instead."},{"name":"defaultValue","type":"SelectInputValue<Value, Multiple> | null","required":false,"description":"The uncontrolled value of the select when it's initially rendered.\n\nTo render a controlled select, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"form","type":"string","required":false,"description":"Identifies the form that owns the hidden input.\nUseful when the select is rendered outside the form."},{"name":"highlightItemOnHover","type":"boolean","required":false,"default":"true","description":"Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."},{"name":"id","type":"string","required":false,"description":"The id of the Select."},{"name":"inputRef","type":"Ref<HTMLInputElement>","required":false,"description":"A ref to access the hidden input element."},{"name":"isItemEqualToValue","type":"((itemValue: Value, value: Value) => boolean)","required":false,"description":"Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.\nDefaults to `Object.is` comparison."},{"name":"items","type":"readonly Group<any>[] | Record<string, ReactNode> | readonly { label: ReactNode; value: any; }[]","required":false,"description":"Data structure of the items rendered in the select popup.\nWhen specified, `<Select.Value>` renders the label of the selected item instead of the raw value.\n@example ```tsx\nconst items = {\n  sans: 'Sans-serif',\n  serif: 'Serif',\n  mono: 'Monospace',\n  cursive: 'Cursive',\n};\n<Select.Root items={items} />\n```"},{"name":"itemToStringLabel","type":"((itemValue: Value) => string)","required":false,"description":"When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.\nIf the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop."},{"name":"itemToStringValue","type":"((itemValue: Value) => string)","required":false,"description":"When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.\nIf the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop."},{"name":"modal","type":"boolean","required":false,"default":"true","description":"Determines if the select enters a modal state when open.\n- `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior."},{"name":"multiple","type":"boolean","required":false,"default":"false","description":"Whether multiple items can be selected."},{"name":"name","type":"string","required":false,"description":"Identifies the field when a form is submitted."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: SelectRootOpenChangeEventDetails) => void)","required":false,"description":"Event handler called when the select popup is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the select popup is opened or closed."},{"name":"onValueChange","type":"((value: SelectOutputValue<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the value of the select changes."},{"name":"open","type":"boolean","required":false,"description":"Whether the select popup is currently open."},{"name":"readOnly","type":"boolean","required":false,"default":"false","description":"Whether the user should be unable to choose a different option from the select popup."},{"name":"required","type":"boolean","required":false,"default":"false","description":"Whether the user must choose a value before submitting a form."},{"name":"value","type":"SelectInputValue<Value, Multiple> | null","required":false,"description":"The value of the select. Use when controlled."}]},{"name":"SelectContent","description":"SelectContent is the popup list, in a portal below the trigger and as wide\nas it, with scroll arrows when the items overflow.","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side."},{"name":"alignItemWithTrigger","type":"boolean","required":false,"default":"false","description":"Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the select popup is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"bottom","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"}]},{"name":"SelectGroup","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SelectItem","description":"SelectItem is one option, with a check mark when selected. Its children are\nthe text shown in the list.","props":[{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"label","type":"string","required":false,"description":"Specifies the text label to use when the item is matched during keyboard text navigation.\n\nDefaults to the item text content if not provided."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectItemState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":false,"default":"null","description":"A unique value that identifies this select item."}]},{"name":"SelectLabel","description":"SelectLabel is the heading of a SelectGroup.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectGroupLabelState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SelectScrollDownButton","description":"SelectScrollDownButton scrolls the list down on hover. SelectContent\nrenders it already.","props":[{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the HTML element in the DOM while the select popup is not scrollable."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectScrollDownArrowState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SelectScrollUpButton","description":"SelectScrollUpButton scrolls the list up on hover. SelectContent renders\nit already.","props":[{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the HTML element in the DOM while the select popup is not scrollable."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectScrollUpArrowState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SelectSeparator","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"The orientation of the separator."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectSeparatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SelectTrigger","description":"SelectTrigger is the button that shows the SelectValue and opens the list.","props":[{"name":"disabled","type":"boolean","required":false,"description":"Whether the component should ignore user interaction."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\"","required":false,"default":"default","description":"Height: `sm` 28px, `default` 32px, `lg` 36px, the heights of Input and\nButton. The chevron is 14px at `sm`, 16px otherwise."}]},{"name":"SelectValue","description":"SelectValue shows the selected item in the trigger. Without `items` on the\nroot it shows the raw value, not the item's label.","props":[{"name":"placeholder","type":"ReactNode","required":false,"description":"The placeholder value to display when no value is selected.\nThis is overridden by `children` if specified, or by a null item's label in `items`."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectValueState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"separator","kind":"component","title":"Separator","main":"Separator","importPath":"@zenoxai/ui/components/separator","docsUrl":"https://ui.zenox.services/components/separator","description":"Separator is a 1px rule between groups of content, horizontal by default\nor vertical with `orientation`; a vertical one stretches to the height of\nits flex row.","exports":[{"name":"Separator","description":"Separator is a 1px rule between groups of content, horizontal by default\nor vertical with `orientation`; a vertical one stretches to the height of\nits flex row.","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"vertical","description":"The orientation of the separator."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"sheet","kind":"component","title":"Sheet","main":"Sheet","importPath":"@zenoxai/ui/components/sheet","docsUrl":"https://ui.zenox.services/components/sheet","description":"Sheet is a panel that slides in from an edge of the screen over the page,\nfor content that keeps the list behind it in context: a record's details,\na long form, a set of filters. For a short task use Dialog; on touch\nscreens, Drawer, which can be swiped closed.\n\nAlways render a SheetTitle: it names the sheet for screen readers.","exports":[{"name":"Sheet","description":"Sheet is a panel that slides in from an edge of the screen over the page,\nfor content that keeps the list behind it in context: a record's details,\na long form, a set of filters. For a short task use Dialog; on touch\nscreens, Drawer, which can be swiped closed.\n\nAlways render a SheetTitle: it names the sheet for screen readers.","props":[{"name":"actionsRef","type":"RefObject<DialogRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the dialog after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the dialog completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the dialog imperatively when called."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."},{"name":"disablePointerDismissal","type":"boolean","required":false,"default":"false","description":"Whether to prevent the dialog from closing on outside presses.\nFor non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it."},{"name":"handle","type":"DialogHandle<unknown>","required":false,"description":"A handle to associate the dialog with a trigger.\nIf specified, allows external triggers to control the dialog's open state.\nCan be created with the Dialog.createHandle() method."},{"name":"modal","type":"boolean | \"trap-focus\"","required":false,"default":"true","description":"Determines if the dialog enters a modal state when open.\n- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nWhen `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so\ntouch screen readers can escape the popup."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: DialogRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the dialog is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the dialog is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the dialog is currently open."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"SheetTrigger","props":[{"name":"handle","type":"DialogHandle<unknown>","required":false,"description":"A handle to associate the trigger with a dialog.\nCan be created with the Dialog.createHandle() method."},{"name":"id","type":"string","required":false,"description":"ID of the trigger. In addition to being forwarded to the rendered element,\nit is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop)."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"payload","type":"unknown","required":false,"description":"A payload to pass to the dialog when it is opened."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SheetClose","props":[{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogCloseState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SheetContent","description":"SheetContent is the sliding panel, in a portal over a dimmed backdrop, with\na close button at its top-right corner. SheetHeader, the body and\nSheetFooter stack inside it 24px apart; give the body its own side padding\n(px-4) and no vertical padding.","props":[{"name":"finalFocus","type":"boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the dialog is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."},{"name":"initialFocus","type":"boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | void | HTMLElement | null)","required":false,"description":"Determines the element to focus when the dialog is opened.\nBy default, focus moves to the first tabbable element inside the popup, except when the dialog\nis opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"showCloseButton","type":"boolean","required":false,"default":"true","description":"Renders the X button at the top-right corner. Its accessible name is the\nEnglish \"Close\": to translate it, turn this off and render your own\nSheetClose."},{"name":"showOverlay","type":"boolean","required":false,"default":"true","description":"Renders the dimmed backdrop. Turning it off does not make the sheet\nnon-modal; set `modal={false}` on Sheet for that."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\"","required":false,"default":"right","description":"Edge the sheet slides in from. Defaults to right."},{"name":"size","type":"\"sm\" | \"lg\" | \"md\" | \"xl\"","required":false,"default":"sm","description":"Maximum width of a left or right sheet from the sm breakpoint: `sm` 400px\n(default), `md` 560px, `lg` 800px, `xl` 1100px. Below it the sheet is 75%\nof the viewport wide; top and bottom sheets always span the full width."}]},{"name":"SheetHeader","description":"SheetHeader is the top band of the sheet, for its title and description.","props":[]},{"name":"SheetFooter","description":"SheetFooter is the action bar on a muted band, pushed to the bottom of the\nsheet.","props":[]},{"name":"SheetTitle","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTitleState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SheetDescription","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogDescriptionState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]}]},{"name":"sidebar","kind":"component","title":"Sidebar","main":"Sidebar","importPath":"@zenoxai/ui/components/sidebar","docsUrl":"https://ui.zenox.services/components/sidebar","description":"Sidebar is the app's main navigation column. On desktop it collapses off\ncanvas or to a rail of icons; on mobile it opens as a Sheet. Wrap the\nlayout in SidebarProvider, put the Sidebar beside a SidebarInset that holds\nthe page, and toggle it with SidebarTrigger. For links in a site header,\nuse NavigationMenu.\n\nBuild its body from SidebarHeader, a SidebarContent of SidebarGroup and\nSidebarMenu elements, and SidebarFooter.","exports":[{"name":"Sidebar","description":"Sidebar is the app's main navigation column. On desktop it collapses off\ncanvas or to a rail of icons; on mobile it opens as a Sheet. Wrap the\nlayout in SidebarProvider, put the Sidebar beside a SidebarInset that holds\nthe page, and toggle it with SidebarTrigger. For links in a site header,\nuse NavigationMenu.\n\nBuild its body from SidebarHeader, a SidebarContent of SidebarGroup and\nSidebarMenu elements, and SidebarFooter.","props":[{"name":"collapsible","type":"\"none\" | \"icon\" | \"offcanvas\"","required":false,"default":"offcanvas","description":"How it collapses on desktop: `offcanvas` (default) slides it out of view;\n`icon` shrinks it to a 48px rail of icons, with SidebarMenuButton\ntooltips; `none` keeps it open."},{"name":"side","type":"\"left\" | \"right\"","required":false,"default":"left","description":"Edge of the screen it sits on. Defaults to left."},{"name":"variant","type":"\"inset\" | \"sidebar\" | \"floating\"","required":false,"default":"sidebar","description":"`sidebar` (default) is flush with the screen edge, behind a border;\n`floating` is a rounded panel inset from the edges; `inset` renders the\nSidebarInset beside it as a rounded card."}]},{"name":"SidebarContent","description":"SidebarContent is the scrolling middle of the sidebar, with its groups.","props":[]},{"name":"SidebarFooter","description":"SidebarFooter is the bottom band of the sidebar, below the scrolling\ncontent, for the user menu.","props":[]},{"name":"SidebarGroup","description":"SidebarGroup is a section of the sidebar, with an optional\nSidebarGroupLabel and SidebarGroupAction above its SidebarGroupContent.","props":[]},{"name":"SidebarGroupAction","description":"SidebarGroupAction is an icon button at the top-right of a group, such as\n\"Add project\". It needs aria-label.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SidebarGroupContent","props":[]},{"name":"SidebarGroupLabel","description":"SidebarGroupLabel is the small heading of a group; it fades out when the\nsidebar collapses to icons.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SidebarHeader","description":"SidebarHeader is the top band of the sidebar, above the scrolling content,\nfor the logo or a workspace switcher.","props":[]},{"name":"SidebarInput","description":"SidebarInput is an Input sized for the sidebar, such as a search field.","props":[{"name":"size","type":"\"default\" | \"sm\" | \"lg\"","required":false,"description":"Height: `sm` 28px, `default` 32px, `lg` 36px, the heights of the Button\nsizes of the same names. Replaces the native `size` attribute (a width\nin characters); set the width with a class instead."}]},{"name":"SidebarInset","description":"SidebarInset is the <main> element that holds the page beside the sidebar.\nWith the sidebar's `variant=\"inset\"`, it renders as a rounded card.","props":[]},{"name":"SidebarMenu","description":"SidebarMenu is the list of navigation entries in a group; each\nSidebarMenuItem holds a SidebarMenuButton.","props":[]},{"name":"SidebarMenuAction","description":"SidebarMenuAction is an icon button at the end of a menu entry, such as a\n\"More\" menu. It needs aria-label.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"showOnHover","type":"boolean","required":false,"default":"false","description":"On desktop, hides it until the entry is hovered or focused."}]},{"name":"SidebarMenuBadge","description":"SidebarMenuBadge is a count at the end of a menu entry, such as unread\nitems; it hides when the sidebar collapses to icons.","props":[]},{"name":"SidebarMenuButton","description":"SidebarMenuButton is a navigation entry, an icon and a label, rendered as a\nbutton or, with `render`, as a link. On the entry of the current page set\n`isActive`, which highlights it and sets aria-current=\"page\".","props":[{"name":"isActive","type":"boolean","required":false,"default":"false","description":"Marks the entry as the current page: highlight and aria-current=\"page\"."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\" | null","required":false,"default":"default","description":"Height: `sm` 28px, `default` 32px, `lg` 48px, for an entry with two\nlines such as a workspace switcher. Every size uses the 12.5px body\ntext."},{"name":"tooltip","type":"string | (TooltipPopupProps & Pick<TooltipPositionerProps, \"align\" | \"side\" | \"sideOffset\" | \"alignOffset\">)","required":false,"description":"Label shown beside the entry while the sidebar is collapsed to icons, as\na string or as TooltipContent props."},{"name":"variant","type":"\"default\" | \"outline\" | null","required":false,"default":"default","description":"`default` has no fill until hover; `outline` adds a background and a\nborder."}]},{"name":"SidebarMenuItem","props":[]},{"name":"SidebarMenuSkeleton","description":"SidebarMenuSkeleton is the loading placeholder of a menu entry, with a text\nbar of random width.","props":[{"name":"showIcon","type":"boolean","required":false,"default":"false","description":"Adds a square placeholder for the icon."}]},{"name":"SidebarMenuSub","description":"SidebarMenuSub is a nested list of entries under a SidebarMenuItem,\nindented along a guide line; it hides when the sidebar collapses to icons.","props":[]},{"name":"SidebarMenuSubButton","description":"SidebarMenuSubButton is an entry of a SidebarMenuSub. It renders an <a>, so\npass `href`, or `render` the router's link.","props":[{"name":"isActive","type":"boolean","required":false,"default":"false","description":"Marks the entry as the current page: highlight and aria-current=\"page\"."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"sm\" | \"md\"","required":false,"default":"md","description":"Kept for compatibility with the shadcn API: `md` (default) and `sm`\nboth render a 28px row with the 12.5px body text, since smaller text\nis hard to read in navigation. The value is exposed as `data-size`."}]},{"name":"SidebarMenuSubItem","props":[]},{"name":"SidebarProvider","description":"SidebarProvider holds the open state of the Sidebar and lays the sidebar\nand the page out side by side; wrap the whole app shell in it. It toggles\nthe sidebar on Ctrl+B or Cmd+B, and saves the desktop state in the\n`sidebar_state` cookie for seven days: read that cookie on the server and\npass it as `defaultOpen` to restore the state.","props":[{"name":"defaultOpen","type":"boolean","required":false,"default":"true","description":"Initial desktop state when uncontrolled. Defaults to true (open)."},{"name":"onOpenChange","type":"((open: boolean) => void)","required":false,"description":"Called with the new desktop state. The mobile sheet is not reported."},{"name":"open","type":"boolean","required":false,"description":"Controlled desktop state; pair it with `onOpenChange`."}]},{"name":"SidebarRail","description":"SidebarRail is a thin strip along the sidebar's inner edge that toggles it\non click, a pointer shortcut. It is out of the tab order, so keep a\nSidebarTrigger for keyboard users.","props":[]},{"name":"SidebarSeparator","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"vertical","description":"The orientation of the separator."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"SidebarTrigger","description":"SidebarTrigger is the icon button that opens and closes the sidebar, on\nmobile too. Its accessible name is the English \"Toggle sidebar\"; pass a\ntranslated aria-label.","props":[{"name":"focusableWhenDisabled","type":"boolean","required":false,"default":"false","description":"Whether the button should be focusable when disabled."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null","required":false,"description":"Height: `xs` 24px, `sm` 28px, `default` 32px, `lg` 36px. The `icon-*`\nsizes are square buttons of the same heights for a single icon. The\nicon follows the size name: 12px at `xs`, 14px at `sm`, 16px at\n`default` and `lg`."},{"name":"variant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | null","required":false,"description":"Visual weight. `default` is the filled primary action, one per view;\n`outline` and `secondary` are for the other actions; `ghost` has no\nfill until hover, for toolbars and icon buttons; `destructive` is\nfor delete and other irreversible actions; `link` looks like inline\ntext."}]},{"name":"useSidebar","description":"useSidebar returns the sidebar state and its setters (`open`,\n`toggleSidebar`, `isMobile`, `openMobile`); call it inside SidebarProvider.","props":[]}]},{"name":"skeleton","kind":"component","title":"Skeleton","main":"Skeleton","importPath":"@zenoxai/ui/components/skeleton","docsUrl":"https://ui.zenox.services/components/skeleton","description":"Skeleton is a pulsing placeholder in the shape of content that is still\nloading. Size it like what replaces it, so the layout does not jump. For an\naction in progress, use Spinner.\n\nScreen readers skip it: mark the loading region with aria-busy instead.","exports":[{"name":"Skeleton","description":"Skeleton is a pulsing placeholder in the shape of content that is still\nloading. Size it like what replaces it, so the layout does not jump. For an\naction in progress, use Spinner.\n\nScreen readers skip it: mark the loading region with aria-busy instead.","props":[]}]},{"name":"slider","kind":"component","title":"Slider","main":"Slider","importPath":"@zenoxai/ui/components/slider","docsUrl":"https://ui.zenox.services/components/slider","description":"Slider picks a number, or a range with two thumbs, by dragging along a\ntrack: a threshold, a volume, a price range. When the exact figure matters,\nuse NumberInput, alone or next to it.\n\nA number renders one thumb; an array renders one thumb per entry, so pass\n`[from, to]` for a range. Name it with aria-labelledby pointing at a\nvisible label, or name each thumb with `thumbLabels`.","exports":[{"name":"Slider","description":"Slider picks a number, or a range with two thumbs, by dragging along a\ntrack: a threshold, a volume, a price range. When the exact figure matters,\nuse NumberInput, alone or next to it.\n\nA number renders one thumb; an array renders one thumb per entry, so pass\n`[from, to]` for a range. Name it with aria-labelledby pointing at a\nvisible label, or name each thumb with `thumbLabels`.","props":[{"name":"defaultValue","type":"number | readonly number[]","required":false,"description":"The uncontrolled value of the slider when it's initially rendered.\n\nTo render a controlled slider, use the `value` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the slider should ignore user interaction."},{"name":"form","type":"string","required":false,"description":"Identifies the form that owns the slider inputs.\nUseful when the slider is rendered outside the form."},{"name":"format","type":"NumberFormatOptions","required":false,"description":"Options to format the value."},{"name":"largeStep","type":"number","required":false,"default":"10","description":"The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down."},{"name":"locale","type":"LocalesArgument","required":false,"description":"The locale used by `Intl.NumberFormat` when formatting the value.\nDefaults to the user's runtime locale."},{"name":"max","type":"number","required":false,"default":"100","description":"The maximum allowed value of the slider.\nShould not be equal to min."},{"name":"min","type":"number","required":false,"default":"0","description":"The minimum allowed value of the slider.\nShould not be equal to max."},{"name":"minStepsBetweenValues","type":"number","required":false,"default":"0","description":"The minimum steps between values in a range slider."},{"name":"name","type":"string","required":false,"description":"Identifies the field when a form is submitted."},{"name":"onValueChange","type":"((value: number | readonly number[], eventDetails: SliderRootChangeEventDetails) => void)","required":false,"description":"Callback function that is fired when the slider's value changed.\nReceives the new value as the first argument; the originating event is\navailable as `eventDetails.event`. The value is also reflected on\n`eventDetails.event.target.value` for form integration.\n\nThe `eventDetails.reason` indicates what triggered the change:\n\n- `'input-change'` when the hidden range input emits a change event (for example, via form integration)\n- `'track-press'` when the control track is pressed\n- `'drag'` while dragging a thumb\n- `'keyboard'` for keyboard input\n- `'none'` when the change is triggered without a specific interaction"},{"name":"onValueCommitted","type":"((value: number | readonly number[], eventDetails: SliderRootCommitEventDetails) => void)","required":false,"description":"Callback function that is fired when a value change is committed.\nDoes not fire if the value did not change, or if the change was canceled.\n**Warning**: This is a generic event, not a change event.\n\nThe `eventDetails.reason` indicates what triggered the commit:\n\n- `'drag'` while dragging a thumb\n- `'track-press'` when the control track is pressed\n- `'keyboard'` for keyboard input\n- `'input-change'` when the hidden range input emits a change event (for example, via form integration)\n- `'none'` when the commit occurs without a specific interaction"},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"The component orientation."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"step","type":"number","required":false,"default":"1","description":"The granularity with which the slider can step through values. (A \"discrete\" slider.)\nThe `min` prop serves as the origin for the valid values.\nWe recommend (max - min) to be evenly divisible by the step."},{"name":"thumbAlignment","type":"\"center\" | \"edge\" | \"edge-client-only\"","required":false,"default":"'center'","description":"How the thumb(s) are aligned relative to `Slider.Control` when the value is at `min` or `max`:\n- `center`: The center of the thumb is aligned with the control edge\n- `edge`: The thumb is inset within the control such that its edge is aligned with the control edge\n- `edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return"},{"name":"thumbCollisionBehavior","type":"\"none\" | \"push\" | \"swap\"","required":false,"default":"'push'","description":"Controls how thumbs behave when they collide during pointer interactions.\n\n- `'push'` (default): Thumbs push each other without restoring their previous positions when dragged back.\n- `'swap'`: Thumbs swap places when dragged past each other.\n- `'none'`: Thumbs cannot move past each other; excess movement is ignored."},{"name":"thumbLabels","type":"string[]","required":false,"description":"Already-translated accessible name of each thumb, in order."},{"name":"value","type":"number | readonly number[]","required":false,"description":"The value of the slider.\nFor range sliders, provide an array with one value per thumb."}]}]},{"name":"sonner","kind":"component","title":"Sonner","main":"Toaster","importPath":"@zenoxai/ui/components/sonner","docsUrl":"https://ui.zenox.services/components/sonner","description":"Toaster renders the toasts raised with `toast()` from \"sonner\": brief\nfeedback after an action, such as \"Saved\" or \"Export failed\", that goes\naway on its own. Mount it once near the root of the app. For a message\nthat must stay on the page, use Alert.\n\n`toast.success()`, `toast.info()`, `toast.warning()` and `toast.error()`\ntake the colors of the Alert of the same tone; a plain `toast()` stays on\nthe neutral surface. Pass `richColors={false}` to keep every toast neutral.\n\nIt follows the `.dark` class on <html>, so it needs no theme provider.\nKeep toast text short, and never make a toast the only way to reach an\naction: it disappears.","exports":[{"name":"Toaster","description":"Toaster renders the toasts raised with `toast()` from \"sonner\": brief\nfeedback after an action, such as \"Saved\" or \"Export failed\", that goes\naway on its own. Mount it once near the root of the app. For a message\nthat must stay on the page, use Alert.\n\n`toast.success()`, `toast.info()`, `toast.warning()` and `toast.error()`\ntake the colors of the Alert of the same tone; a plain `toast()` stays on\nthe neutral surface. Pass `richColors={false}` to keep every toast neutral.\n\nIt follows the `.dark` class on <html>, so it needs no theme provider.\nKeep toast text short, and never make a toast the only way to reach an\naction: it disappears.","props":[]}]},{"name":"spinner","kind":"component","title":"Spinner","main":"Spinner","importPath":"@zenoxai/ui/components/spinner","docsUrl":"https://ui.zenox.services/components/spinner","description":"Spinner is a rotating loader for an action in progress, such as a button\nwaiting for the server. For content that is loading, prefer a Skeleton in\nits shape.\n\nIt has role=\"status\" and the English aria-label \"Loading\"; pass a\ntranslated aria-label.","exports":[{"name":"Spinner","description":"Spinner is a rotating loader for an action in progress, such as a button\nwaiting for the server. For content that is loading, prefer a Skeleton in\nits shape.\n\nIt has role=\"status\" and the English aria-label \"Loading\"; pass a\ntranslated aria-label.","props":[]}]},{"name":"switch","kind":"component","title":"Switch","main":"Switch","importPath":"@zenoxai/ui/components/switch","docsUrl":"https://ui.zenox.services/components/switch","description":"Switch turns a setting on or off with immediate effect, such as email\nnotifications. For a choice that applies only when a form is submitted,\nuse Checkbox.\n\nLabel it with a FieldLabel or Label, or an aria-label.","exports":[{"name":"Switch","description":"Switch turns a setting on or off with immediate effect, such as email\nnotifications. For a choice that applies only when a form is submitted,\nuse Checkbox.\n\nLabel it with a FieldLabel or Label, or an aria-label.","props":[{"name":"checked","type":"boolean","required":false,"description":"Whether the switch is currently active.\n\nTo render an uncontrolled switch, use the `defaultChecked` prop instead."},{"name":"defaultChecked","type":"boolean","required":false,"default":"false","description":"Whether the switch is initially active.\n\nTo render a controlled switch, use the `checked` prop instead."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"form","type":"string","required":false,"description":"Identifies the form that owns the hidden input.\nUseful when the switch is rendered outside the form."},{"name":"id","type":"string","required":false,"description":"The id of the hidden input element.\n\nWhen `nativeButton` is `true`, the id is applied to the root element."},{"name":"inputRef","type":"Ref<HTMLInputElement>","required":false,"description":"A ref to access the hidden `<input>` element."},{"name":"name","type":"string","required":false,"description":"Identifies the field when a form is submitted."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onCheckedChange","type":"((checked: boolean, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)","required":false,"description":"Event handler called when the switch is activated or deactivated."},{"name":"readOnly","type":"boolean","required":false,"default":"false","description":"Whether the user should be unable to activate or deactivate the switch."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"required","type":"boolean","required":false,"default":"false","description":"Whether the user must activate the switch before submitting a form."},{"name":"size","type":"\"default\" | \"sm\"","required":false,"default":"default","description":"`default` is 32 by 18px; `sm` is 24 by 14px."},{"name":"uncheckedValue","type":"string","required":false,"description":"The value submitted with the form when the switch is off.\nBy default, unchecked switches do not submit any value, matching native checkbox behavior."},{"name":"value","type":"string","required":false,"description":"The value submitted with the form when the switch is on.\nBy default, switch submits the \"on\" value, matching native checkbox behavior."}]}]},{"name":"table","kind":"component","title":"Table","main":"Table","importPath":"@zenoxai/ui/components/table","docsUrl":"https://ui.zenox.services/components/table","description":"Table is a styled HTML table for data in rows and columns, in a container\nthat scrolls sideways when the table is too wide. It has no sorting,\nselection or pagination of its own; build those around it. For a list of\nentries with media and actions but no columns, use Item.\n\nName it with a TableCaption or an aria-label, and use TableHead for header\ncells. Mark a selected row with data-state=\"selected\" on its TableRow.","exports":[{"name":"Table","description":"Table is a styled HTML table for data in rows and columns, in a container\nthat scrolls sideways when the table is too wide. It has no sorting,\nselection or pagination of its own; build those around it. For a list of\nentries with media and actions but no columns, use Item.\n\nName it with a TableCaption or an aria-label, and use TableHead for header\ncells. Mark a selected row with data-state=\"selected\" on its TableRow.","props":[{"name":"containerClassName","type":"string","required":false,"description":"Classes for the scrolling container. Give it a max height (`max-h-96`)\nfor a table that scrolls inside the page, together with a `sticky`\nTableHeader. The container scrolls on both axes, so a header cannot\nstick to the page's own scroll."},{"name":"containerLabel","type":"string","required":false,"description":"Already-translated name of the scrolling container. Set it when the\ntable can be wider than its container: the container then becomes a\nfocusable, named region, so keyboard users can scroll it sideways."}]},{"name":"TableHeader","props":[{"name":"sticky","type":"boolean","required":false,"default":"false","description":"Keeps the header at the top of the table's scrolling container (see\n`containerClassName` on Table), with its bottom rule drawn as a shadow:\na collapsed border would scroll away with the rows."}]},{"name":"TableBody","props":[]},{"name":"TableFooter","props":[]},{"name":"TableHead","props":[]},{"name":"TableRow","props":[]},{"name":"TableCell","props":[]},{"name":"TableCaption","description":"TableCaption is the table's title, shown below it and read as its name.","props":[]}]},{"name":"tabs","kind":"component","title":"Tabs","main":"Tabs","importPath":"@zenoxai/ui/components/tabs","docsUrl":"https://ui.zenox.services/components/tabs","description":"Tabs switches between views of one subject that share a place on the\npage, such as the overview and the history of a record. Compose a TabsList\nwith a TabsTrigger per view, and a TabsContent per view matched by\n`value`. For a control that filters the same list, use ToggleGroup.","exports":[{"name":"Tabs","description":"Tabs switches between views of one subject that share a place on the\npage, such as the overview and the history of a record. Compose a TabsList\nwith a TabsTrigger per view, and a TabsContent per view matched by\n`value`. For a control that filters the same list, use ToggleGroup.","props":[{"name":"defaultValue","type":"any","required":false,"default":"0","description":"The default value. Use when the component is not controlled.\nWhen the value is `null`, no Tab will be active."},{"name":"onValueChange","type":"((value: any, eventDetails: TabsRootChangeEventDetails) => void)","required":false,"description":"Callback invoked when new value is being set.\n\nThe event `reason` is `'none'` for user-initiated changes, such as a click\nor keyboard navigation; `'initial'` for the first automatic selection or\nfallback in uncontrolled roots when `defaultValue` is omitted or\n`undefined`, including when the implicit initial value is disabled or\nmissing; `'disabled'` for automatic fallback when the selected tab becomes\ndisabled in uncontrolled roots; or `'missing'` for automatic fallback when\nthe selected tab is removed, or when an explicit `defaultValue` never\nmatches a mounted tab in uncontrolled roots.\n\nFor automatic changes, the selected value can be `null` when no enabled Tab\nis available as a fallback.\n\nAutomatic changes cannot be canceled; calling `eventDetails.cancel()` for\n`'initial'`, `'disabled'`, or `'missing'` has no effect."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"horizontal","description":"The component orientation (layout flow direction)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsRootState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":false,"description":"The value of the currently active `Tab`. Use when the component is controlled.\nWhen the value is `null`, no Tab will be active."}]},{"name":"TabsList","description":"TabsList is the row of TabsTrigger buttons.","props":[{"name":"activateOnFocus","type":"boolean","required":false,"default":"false","description":"Whether to automatically change the active tab on arrow key focus.\nOtherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsListState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"variant","type":"\"line\" | \"default\" | null","required":false,"default":"default","description":"`default` is a bordered track whose active tab takes the selection\ncolors, the same control as a segmented ToggleGroup; `line` is a\nfull-width bar on a bottom rule, with the active tab underlined, for\npage headers, sheets and status pivots."}]},{"name":"TabsTrigger","props":[{"name":"disabled","type":"boolean","required":false,"description":"Whether the Tab is disabled.\n\nIf a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected.\nInstead, the next enabled Tab will be selected.\nHowever, it does not work like this during server-side rendering, as it is not known\nduring pre-rendering which Tabs are disabled.\nTo work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsTabState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":true,"description":"The value of the Tab."}]},{"name":"TabsContent","props":[{"name":"keepMounted","type":"boolean","required":false,"default":"false","description":"Whether to keep the HTML element in the DOM while the panel is hidden."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsPanelState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"value","type":"any","required":true,"description":"The value of the TabPanel. It will be shown when the Tab with the corresponding value is active."}]},{"name":"TabsIndicator","description":"TabsIndicator is a bar that slides to the active tab. Place it inside a\nTabsList with `variant=\"line\"` for an animated underline; Base UI sets the\n`--active-tab-{width,height,left,top}` variables it moves with.","props":[{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsIndicatorState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"renderBeforeHydration","type":"boolean","required":false,"default":"false","description":"Whether to render itself before React hydrates.\nThis minimizes the time that the indicator isn't visible after server-side rendering."}]}]},{"name":"textarea","kind":"component","title":"Textarea","main":"Textarea","importPath":"@zenoxai/ui/components/textarea","docsUrl":"https://ui.zenox.services/components/textarea","description":"Textarea is a multi-line text field that grows with its content, for\ncomments and descriptions. For a single line use Input; to attach buttons\nor a counter, an InputGroup with InputGroupTextarea.\n\nLabel it with a FieldLabel or Label whose htmlFor matches its `id`, or an\naria-label.","exports":[{"name":"Textarea","description":"Textarea is a multi-line text field that grows with its content, for\ncomments and descriptions. For a single line use Input; to attach buttons\nor a counter, an InputGroup with InputGroupTextarea.\n\nLabel it with a FieldLabel or Label whose htmlFor matches its `id`, or an\naria-label.","props":[]}]},{"name":"toggle","kind":"component","title":"Toggle","main":"Toggle","importPath":"@zenoxai/ui/components/toggle","docsUrl":"https://ui.zenox.services/components/toggle","description":"Toggle is a two-state button that stays pressed, such as Bold in a text\ntoolbar or \"Show archived\" above a list. For several related toggles use\nToggleGroup; for a setting in a form, Switch or Checkbox.\n\nAn icon-only toggle needs aria-label. Keep its label the same in both\nstates: the pressed state is announced on its own.","exports":[{"name":"Toggle","description":"Toggle is a two-state button that stays pressed, such as Bold in a text\ntoolbar or \"Show archived\" above a list. For several related toggles use\nToggleGroup; for a setting in a form, Switch or Checkbox.\n\nAn icon-only toggle needs aria-label. Keep its label the same in both\nstates: the pressed state is announced on its own.","props":[{"name":"defaultPressed","type":"boolean","required":false,"default":"false","description":"Whether the toggle button is currently pressed.\nThis is the uncontrolled counterpart of `pressed`."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onPressedChange","type":"((pressed: boolean, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)","required":false,"description":"Callback fired when the pressed state is changed."},{"name":"pressed","type":"boolean","required":false,"description":"Whether the toggle button is currently pressed.\nThis is the controlled counterpart of `defaultPressed`."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ToggleState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\" | null","required":false,"default":"default","description":"Height: `sm` 28px, `default` 32px, `lg` 36px."},{"name":"value","type":"string","required":false,"description":"A unique string that identifies the toggle when used\ninside a toggle group."},{"name":"variant","type":"\"default\" | \"outline\" | \"segmented\" | null","required":false,"default":"default","description":"`default` is borderless; `outline` adds the border of an outline\nButton; `segmented` is an item of a segmented ToggleGroup. Every\nvariant marks the pressed state the same way, with the selection\ncolors (primary-soft fill and text) that FilterChip and the sidebar\nuse, so pressed never looks like hover."}]}]},{"name":"toggle-group","kind":"component","title":"Toggle Group","main":"ToggleGroup","importPath":"@zenoxai/ui/components/toggle-group","docsUrl":"https://ui.zenox.services/components/toggle-group","description":"ToggleGroup is a set of toggles where one, or several with `multiple`, can\nbe on: a view switch, a time window, text formatting. With the default\n`spacing` of 0 the items join into one bar; pass a positive `spacing` for\nseparate items. `variant=\"segmented\"` is a segmented control: the items sit\ninside one bordered track, and without `multiple` one item always stays\npressed. To switch between panels of content use Tabs; for one choice in a\nform, RadioGroup.\n\nName the group with an aria-label, and give every icon-only\nToggleGroupItem an aria-label too.","exports":[{"name":"ToggleGroup","description":"ToggleGroup is a set of toggles where one, or several with `multiple`, can\nbe on: a view switch, a time window, text formatting. With the default\n`spacing` of 0 the items join into one bar; pass a positive `spacing` for\nseparate items. `variant=\"segmented\"` is a segmented control: the items sit\ninside one bordered track, and without `multiple` one item always stays\npressed. To switch between panels of content use Tabs; for one choice in a\nform, RadioGroup.\n\nName the group with an aria-label, and give every icon-only\nToggleGroupItem an aria-label too.","props":[{"name":"defaultValue","type":"readonly string[]","required":false,"description":"The pressed state of the toggle group represented by an array of\nthe values of all pressed toggle buttons.\nThis is the uncontrolled counterpart of `value`."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the toggle group should ignore user interaction."},{"name":"loopFocus","type":"boolean","required":false,"default":"true","description":"Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."},{"name":"multiple","type":"boolean","required":false,"default":"false","description":"When `false` only one item in the group can be pressed. If any item in\nthe group becomes pressed, the others will become unpressed.\nWhen `true` multiple items can be pressed."},{"name":"onValueChange","type":"((groupValue: string[], eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)","required":false,"description":"Callback fired when the pressed states of the toggle group changes."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"horizontal"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ToggleGroupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\" | null","required":false,"description":"Height: `sm` 28px, `default` 32px, `lg` 36px."},{"name":"spacing","type":"number","required":false,"default":"0","description":"Gap between items, in 4px steps. 0 (default) joins them into one bar.\nIgnored by the segmented variant, which has its own track."},{"name":"value","type":"readonly string[]","required":false,"description":"The pressed state of the toggle group represented by an array of\nthe values of all pressed toggle buttons.\nThis is the controlled counterpart of `defaultValue`."},{"name":"variant","type":"\"default\" | \"outline\" | \"segmented\" | null","required":false,"description":"`default` is borderless; `outline` adds the border of an outline\nButton; `segmented` is an item of a segmented ToggleGroup. Every\nvariant marks the pressed state the same way, with the selection\ncolors (primary-soft fill and text) that FilterChip and the sidebar\nuse, so pressed never looks like hover."}]},{"name":"ToggleGroupItem","description":"ToggleGroupItem is one toggle of a ToggleGroup, identified by its `value`.\nA `variant` or `size` set on the group overrides its own.","props":[{"name":"defaultPressed","type":"boolean","required":false,"default":"false","description":"Whether the toggle button is currently pressed.\nThis is the uncontrolled counterpart of `pressed`."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the component should ignore user interaction."},{"name":"nativeButton","type":"boolean","required":false,"default":"true","description":"Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."},{"name":"onPressedChange","type":"((pressed: boolean, eventDetails: { reason: \"none\"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)","required":false,"description":"Callback fired when the pressed state is changed."},{"name":"pressed","type":"boolean","required":false,"description":"Whether the toggle button is currently pressed.\nThis is the controlled counterpart of `defaultPressed`."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ToggleState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"size","type":"\"default\" | \"sm\" | \"lg\" | null","required":false,"default":"default","description":"Height: `sm` 28px, `default` 32px, `lg` 36px."},{"name":"value","type":"string","required":false,"description":"A unique string that identifies the toggle when used\ninside a toggle group."},{"name":"variant","type":"\"default\" | \"outline\" | \"segmented\" | null","required":false,"default":"default","description":"`default` is borderless; `outline` adds the border of an outline\nButton; `segmented` is an item of a segmented ToggleGroup. Every\nvariant marks the pressed state the same way, with the selection\ncolors (primary-soft fill and text) that FilterChip and the sidebar\nuse, so pressed never looks like hover."}]}]},{"name":"tooltip","kind":"component","title":"Tooltip","main":"Tooltip","importPath":"@zenoxai/ui/components/tooltip","docsUrl":"https://ui.zenox.services/components/tooltip","description":"Tooltip shows a short text label for a control on hover and keyboard\nfocus, most often the name of an icon button. For an explanation beside a\ntitle or a figure use the HelpTooltip pattern; for rich or interactive\ncontent, Popover or HoverCard.\n\nNever put information only in a tooltip: touch users cannot hover. The\ntooltip does not name its trigger, so an icon button still needs its own\naria-label.","exports":[{"name":"Tooltip","description":"Tooltip shows a short text label for a control on hover and keyboard\nfocus, most often the name of an icon button. For an explanation beside a\ntitle or a figure use the HelpTooltip pattern; for rich or interactive\ncontent, Popover or HoverCard.\n\nNever put information only in a tooltip: touch users cannot hover. The\ntooltip does not name its trigger, so an icon button still needs its own\naria-label.","props":[{"name":"actionsRef","type":"RefObject<TooltipRootActions | null>","required":false,"description":"A ref to imperative actions.\n- `unmount`: Ends the closing phase of the tooltip after an externally controlled closing animation finishes.\nCall `preventUnmountOnClose()` in `onOpenChange` first, otherwise the tooltip completes closing on its own.\nWhether it leaves the DOM is decided by `keepMounted` on the portal.\n- `close`: Closes the tooltip imperatively when called."},{"name":"defaultOpen","type":"boolean","required":false,"default":"false","description":"Whether the tooltip is initially open.\n\nTo render a controlled tooltip, use the `open` prop instead."},{"name":"defaultTriggerId","type":"string | null","required":false,"description":"ID of the trigger that the tooltip is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"Whether the tooltip is disabled."},{"name":"disableHoverablePopup","type":"boolean","required":false,"default":"false","description":"Whether the tooltip contents can be hovered without closing the tooltip."},{"name":"handle","type":"TooltipHandle<unknown>","required":false,"description":"A handle to associate the tooltip with a trigger.\nIf specified, allows external triggers to control the tooltip's open state.\nCan be created with the Tooltip.createHandle() method."},{"name":"onOpenChange","type":"((open: boolean, eventDetails: TooltipRootChangeEventDetails) => void)","required":false,"description":"Event handler called when the tooltip is opened or closed."},{"name":"onOpenChangeComplete","type":"((open: boolean) => void)","required":false,"description":"Event handler called after any animations complete when the tooltip is opened or closed."},{"name":"open","type":"boolean","required":false,"description":"Whether the tooltip is currently open."},{"name":"trackCursorAxis","type":"\"none\" | \"both\" | \"x\" | \"y\"","required":false,"default":"'none'","description":"Determines which axis the tooltip should track the cursor on."},{"name":"triggerId","type":"string | null","required":false,"description":"ID of the trigger that the tooltip is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled tooltip.\nThere's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set)."}]},{"name":"TooltipTrigger","props":[{"name":"closeDelay","type":"number","required":false,"default":"0","description":"How long to wait before closing the tooltip. Specified in milliseconds."},{"name":"closeOnClick","type":"boolean","required":false,"default":"true","description":"Whether the tooltip should close when this trigger is clicked."},{"name":"delay","type":"number","required":false,"default":"600","description":"How long to wait before opening the tooltip on hover. Specified in milliseconds."},{"name":"disabled","type":"boolean","required":false,"default":"false","description":"If `true`, the tooltip will not open when interacting with this trigger.\nNote that this doesn't apply the `disabled` attribute to the trigger element.\nIf you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop."},{"name":"handle","type":"TooltipHandle<unknown>","required":false,"description":"A handle to associate the trigger with a tooltip."},{"name":"payload","type":"unknown","required":false,"description":"A payload to pass to the tooltip when it is opened."},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TooltipTriggerState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."}]},{"name":"TooltipContent","description":"TooltipContent is the bubble with an arrow, in a portal above the trigger.\nIts colors invert the page: a dark bubble with light text in the light\ntheme, a light bubble with dark text in the dark theme.","props":[{"name":"align","type":"\"center\" | \"start\" | \"end\"","required":false,"default":"start","description":"How to align the popup relative to the specified side."},{"name":"alignOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```"},{"name":"render","type":"ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TooltipPopupState>","required":false,"description":"Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"","required":false,"default":"top","description":"Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."},{"name":"sideOffset","type":"number | OffsetFunction","required":false,"default":"0","description":"Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"}]},{"name":"TooltipProvider","description":"TooltipProvider shares the open delay of the tooltips inside it, so moving\nfrom one trigger to the next shows the next tooltip at once. Mount one near\nthe root; its `delay` defaults to 0 here.","props":[{"name":"closeDelay","type":"number","required":false,"description":"How long to wait before closing a tooltip. Specified in milliseconds."},{"name":"delay","type":"number","required":false,"default":"0","description":"How long to wait before opening the tooltip on hover. Specified in milliseconds."},{"name":"timeout","type":"number","required":false,"default":"400","description":"Another tooltip will open instantly if the previous tooltip\nis closed within this timeout. Specified in milliseconds."}]}]},{"name":"confirm-dialog","kind":"pattern","title":"Confirm Dialog","main":"ConfirmDialogHost","importPath":"@zenoxai/ui/patterns/confirm-dialog","docsUrl":"https://ui.zenox.services/patterns/confirm-dialog","description":"ConfirmDialogHost renders the dialog that `confirm()` opens. Mount it once,\nnext to the Toaster, near the root of the app. It holds no props per call:\nevery call passes its own options to `confirm()`.","exports":[{"name":"ConfirmDialogHost","description":"ConfirmDialogHost renders the dialog that `confirm()` opens. Mount it once,\nnext to the Toaster, near the root of the app. It holds no props per call:\nevery call passes its own options to `confirm()`.","props":[{"name":"cancelLabel","type":"string","required":false,"default":"Cancel","description":"Already-translated default for the cancel button."},{"name":"confirmLabel","type":"string","required":false,"default":"Confirm","description":"Already-translated default for the confirm button."}]},{"name":"useConfirmDialog","description":"useConfirmDialog returns the `confirm()` function. It exists for symmetry\nwith hooks-first code; calling `confirm` directly works the same.","props":[]},{"name":"confirm","description":"Opens the app's confirmation dialog and resolves to true when the user\nconfirms, false when they cancel or `onConfirm` throws. Requires one\n<ConfirmDialogHost /> mounted near the root of the app.\n\nA second call while a dialog is open cancels the first one.","props":[{"name":"cancelLabel","type":"string","required":false},{"name":"checkboxField","type":"ConfirmCheckboxField","required":false},{"name":"confirmLabel","type":"string","required":false},{"name":"confirmVariant","type":"\"link\" | \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\"","required":false,"description":"Variant of the confirm button. Use `destructive` for irreversible actions."},{"name":"description","type":"string","required":true},{"name":"inputField","type":"ConfirmInputField","required":false},{"name":"onConfirm","type":"((input: { text: string; checked: boolean; }) => Promise<void>)","required":false,"description":"Runs while the dialog shows a pending state. If it throws, the dialog\ncloses and the promise resolves to false; report the error from here."},{"name":"title","type":"string","required":true}]}]},{"name":"copy-button","kind":"pattern","title":"Copy Button","main":"CopyButton","importPath":"@zenoxai/ui/patterns/copy-button","docsUrl":"https://ui.zenox.services/patterns/copy-button","description":"CopyButton copies one value to the clipboard and confirms it by swapping\nits icon for a check for a moment.","exports":[{"name":"CopyButton","description":"CopyButton copies one value to the clipboard and confirms it by swapping\nits icon for a check for a moment.","props":[{"name":"copiedLabel","type":"string","required":false,"default":"Copied","description":"Already-translated text announced to screen readers after a copy."},{"name":"label","type":"string","required":false,"default":"Copy","description":"Already-translated accessible name and tooltip."},{"name":"onCopy","type":"((value: string) => void)","required":false,"description":"Called after the value reached the clipboard. Show a toast here when the\nsurface needs more feedback than the check icon."},{"name":"onCopyError","type":"((error: unknown) => void)","required":false,"description":"Called when the value could not be written: the page is not a secure\ncontext (no Clipboard API) or the browser denied the write."},{"name":"revealOnHover","type":"boolean","required":false,"default":"false","description":"Hide until the enclosing `group/value` is hovered."},{"name":"value","type":"string","required":true,"description":"The exact text written to the clipboard, never a masked rendering."}]},{"name":"ValueActions","description":"ValueActions renders a value followed by its actions, revealed on hover:\ncopy it and pivot on it. It owns the `group/value` the actions hide behind,\nso the caller composes the value's own rendering as children.\n\nWhen the cell shows a derived label (a translated enum, a country name),\noffer the pivot without the copy: copying text the user cannot see is a\nsurprise.","props":[{"name":"copyLabel","type":"string","required":false,"description":"Already-translated label of the copy action."},{"name":"copyValue","type":"string | null","required":false,"description":"Text written to the clipboard. Omit to drop the copy action."},{"name":"onCopy","type":"((value: string) => void)","required":false,"description":"Forwarded to the copy action."},{"name":"onPivot","type":"(() => void) | null","required":false,"description":"\"Show every row with this value\". Omit to drop the pivot action."},{"name":"pivotLabel","type":"string","required":false,"default":"Search for this value","description":"Already-translated label of the pivot action."}]}]},{"name":"description-list","kind":"pattern","title":"Description List","main":"DescriptionList","importPath":"@zenoxai/ui/patterns/description-list","docsUrl":"https://ui.zenox.services/patterns/description-list","description":"DescriptionList is the label and value list of a detail view: a record's\nproperties, a snapshot's metadata. Rows share one rhythm and one divider, so\nevery sheet and card reads the same.\n\nRenders a real <dl>; each DescriptionItem is a <dt>/<dd> pair.","exports":[{"name":"DescriptionItem","props":[{"name":"block","type":"boolean","required":false,"default":"false","description":"Stacks the value under a full-width label instead of beside it. Use it\nfor blocks (long text, code, JSON) that need the full width."},{"name":"label","type":"ReactNode","required":true},{"name":"mono","type":"boolean","required":false,"default":"false","description":"Renders the value in the monospace face, for identifiers and hashes."}]},{"name":"DescriptionList","description":"DescriptionList is the label and value list of a detail view: a record's\nproperties, a snapshot's metadata. Rows share one rhythm and one divider, so\nevery sheet and card reads the same.\n\nRenders a real <dl>; each DescriptionItem is a <dt>/<dd> pair.","props":[]}]},{"name":"empty-value","kind":"pattern","title":"Empty Value","main":"EmptyValue","importPath":"@zenoxai/ui/patterns/empty-value","docsUrl":"https://ui.zenox.services/patterns/empty-value","description":"EmptyValue marks a missing value in a table cell, a description list or a\ndetail view: a muted dash on screen and `label` (\"No value\" by default)\nfor screen readers. A blank cell would be ambiguous, and \"N/A\" or \"-\" read\nas data. When the absence itself means something, such as \"Never scanned\"\nor \"No owner\", write that text instead.","exports":[{"name":"EmptyValue","description":"EmptyValue marks a missing value in a table cell, a description list or a\ndetail view: a muted dash on screen and `label` (\"No value\" by default)\nfor screen readers. A blank cell would be ambiguous, and \"N/A\" or \"-\" read\nas data. When the absence itself means something, such as \"Never scanned\"\nor \"No owner\", write that text instead.","props":[{"name":"label","type":"string","required":false,"default":"No value","description":"Already-translated text screen readers announce instead of the dash."}]}]},{"name":"help-tooltip","kind":"pattern","title":"Help Tooltip","main":"HelpTooltip","importPath":"@zenoxai/ui/patterns/help-tooltip","docsUrl":"https://ui.zenox.services/patterns/help-tooltip","description":"HelpTooltip is the info icon that explains a title, a figure or a field on\nhover and keyboard focus. It is a real button, so it is reachable with Tab,\nand the tooltip text doubles as its accessible name.\n\nUse it for supporting information only. Anything the user must read to\ncomplete the task belongs in visible text, not behind an icon.","exports":[{"name":"HelpTooltip","description":"HelpTooltip is the info icon that explains a title, a figure or a field on\nhover and keyboard focus. It is a real button, so it is reachable with Tab,\nand the tooltip text doubles as its accessible name.\n\nUse it for supporting information only. Anything the user must read to\ncomplete the task belongs in visible text, not behind an icon.","props":[{"name":"content","type":"ReactNode","required":true,"description":"The explanation shown on hover and focus. Keep it to a sentence or two."},{"name":"label","type":"string","required":false,"description":"Accessible name of the trigger. Defaults to the content when it is a\nstring, so a screen reader hears the explanation itself."},{"name":"size","type":"\"sm\" | \"md\"","required":false,"default":"sm","description":"Icon size step. `sm` sits beside body text, `md` beside a page title."}]}]},{"name":"info-banner","kind":"pattern","title":"Info Banner","main":"InfoBanner","importPath":"@zenoxai/ui/patterns/info-banner","docsUrl":"https://ui.zenox.services/patterns/info-banner","description":"InfoBanner is a one-line Alert with an icon: context the user should know\nbefore acting on the content below it (a partial result, a delayed sync, a\nfeature in preview). For a titled message with a description, compose\nAlert, AlertTitle and AlertDescription directly.\n\nIt renders as `role=\"note\"`: static context, not announced. Pass\n`role=\"status\"` when the banner appears in response to an action, or\n`role=\"alert\"` for an urgent message that must interrupt.","exports":[{"name":"InfoBanner","description":"InfoBanner is a one-line Alert with an icon: context the user should know\nbefore acting on the content below it (a partial result, a delayed sync, a\nfeature in preview). For a titled message with a description, compose\nAlert, AlertTitle and AlertDescription directly.\n\nIt renders as `role=\"note\"`: static context, not announced. Pass\n`role=\"status\"` when the banner appears in response to an action, or\n`role=\"alert\"` for an urgent message that must interrupt.","props":[{"name":"icon","type":"ReactNode","required":false,"description":"Replaces the leading Info icon. Pass `false` to render no icon."},{"name":"tone","type":"\"default\" | \"destructive\" | \"info\" | \"success\" | \"warning\" | \"neutral\"","required":false,"default":"info","description":"Color of the banner. Defaults to `info`."}]}]},{"name":"list-empty-state","kind":"pattern","title":"List Empty State","main":"ListEmptyState","importPath":"@zenoxai/ui/patterns/list-empty-state","docsUrl":"https://ui.zenox.services/patterns/list-empty-state","description":"ListEmptyState is the \"nothing to show\" state of a list, a table body, a\nchart card or a sheet section. It is for a request that succeeded and came\nback empty; a request that failed renders ListErrorState instead.\n\n\"No data\" and \"no match for these filters\" are different states. A list\nnarrowed to nothing should say so and offer to clear the filters.","exports":[{"name":"ListEmptyState","description":"ListEmptyState is the \"nothing to show\" state of a list, a table body, a\nchart card or a sheet section. It is for a request that succeeded and came\nback empty; a request that failed renders ListErrorState instead.\n\n\"No data\" and \"no match for these filters\" are different states. A list\nnarrowed to nothing should say so and offer to clear the filters.","props":[{"name":"action","type":"ReactNode","required":false,"description":"The one thing the user can do from here: clear the filters, create the\nfirst item. Omit when there is nothing to do but wait for data."},{"name":"description","type":"string","required":false,"description":"Already-translated second line. Omit for a one-line state."},{"name":"icon","type":"LucideIcon","required":false,"description":"Replaces the default inbox glyph."},{"name":"title","type":"string","required":true,"description":"Already-translated title, for example \"No alerts yet\"."}]}]},{"name":"list-error-state","kind":"pattern","title":"List Error State","main":"ListErrorState","importPath":"@zenoxai/ui/patterns/list-error-state","docsUrl":"https://ui.zenox.services/patterns/list-error-state","description":"ListErrorState is the state of a list, table or card whose request failed.\nIt tells a failure apart from a legitimately empty result (ListEmptyState).\n\nNever pass the raw error message as the description: it can carry backend\ninternals or personal data. Log or report diagnostics separately.","exports":[{"name":"ListErrorState","description":"ListErrorState is the state of a list, table or card whose request failed.\nIt tells a failure apart from a legitimately empty result (ListEmptyState).\n\nNever pass the raw error message as the description: it can carry backend\ninternals or personal data. Log or report diagnostics separately.","props":[{"name":"description","type":"string","required":false,"default":"The data could not be loaded. Try again in a moment.","description":"Already-translated description."},{"name":"onRetry","type":"(() => void)","required":false,"description":"Called by the retry button. Omit to hide the button."},{"name":"retryLabel","type":"string","required":false,"default":"Try again","description":"Already-translated retry label."},{"name":"title","type":"string","required":false,"default":"Something went wrong","description":"Already-translated title."}]}]},{"name":"page-header","kind":"pattern","title":"Page Header","main":"PageHeader","importPath":"@zenoxai/ui/patterns/page-header","docsUrl":"https://ui.zenox.services/patterns/page-header","description":"PageHeader is the top of every page: one <h1> at the page step of the type\nscale (text-xl, semibold), an optional icon and hint, an action slot on the\nright, and an optional tab row underneath.\n\nIt renders only the header line. The surrounding band (padding, border,\nheight contract) belongs to the app shell, which knows how the page scrolls.","exports":[{"name":"PageHeader","description":"PageHeader is the top of every page: one <h1> at the page step of the type\nscale (text-xl, semibold), an optional icon and hint, an action slot on the\nright, and an optional tab row underneath.\n\nIt renders only the header line. The surrounding band (padding, border,\nheight contract) belongs to the app shell, which knows how the page scrolls.","props":[{"name":"actions","type":"ReactNode","required":false,"description":"Right-hand slot: filters, a primary action, or both."},{"name":"hint","type":"string","required":false,"description":"One-sentence description of the page, shown in an info tooltip next to\nthe title. Never rendered as a paragraph: the header stays one line tall."},{"name":"icon","type":"ReactNode","required":false,"description":"Leading icon, usually the module's lucide icon at size-5."},{"name":"tabs","type":"ReactNode","required":false,"description":"Row under the title, typically a line-variant <TabsList>."},{"name":"title","type":"ReactNode","required":true,"description":"The page title, rendered as the page's single <h1>."},{"name":"titleClassName","type":"string","required":false,"description":"Extra classes for the <h1>, merged last so they win."}]}]},{"name":"section-heading","kind":"pattern","title":"Section Heading","main":"SectionHeading","importPath":"@zenoxai/ui/patterns/section-heading","docsUrl":"https://ui.zenox.services/patterns/section-heading","description":"SectionHeading delimits a group inside a page, a card or a settings form:\na heading at the card-title step (text-lg, semibold), an optional\none-line description and an optional action on the right, vertically\ncentered on the title and description together, as CardAction is.","exports":[{"name":"SectionHeading","description":"SectionHeading delimits a group inside a page, a card or a settings form:\na heading at the card-title step (text-lg, semibold), an optional\none-line description and an optional action on the right, vertically\ncentered on the title and description together, as CardAction is.","props":[{"name":"action","type":"ReactNode","required":false,"description":"Right-aligned slot, usually a small button."},{"name":"as","type":"\"h2\" | \"h3\" | \"h4\"","required":false,"default":"h2","description":"Heading level. Defaults to h2, one step below the page <h1>."},{"name":"description","type":"ReactNode","required":false,"description":"One line under the title."},{"name":"title","type":"ReactNode","required":true}]}]},{"name":"severity-badge","kind":"pattern","title":"Severity Badge","main":"SeverityBadge","importPath":"@zenoxai/ui/patterns/severity-badge","docsUrl":"https://ui.zenox.services/patterns/severity-badge","description":"SeverityBadge shows a severity level with its label. The label is always\nrendered, so the level never depends on color alone.\n\nMap scores, priorities and CVSS bands to a level in the app; the badge only\nrenders it. A missing severity is missing information, not a level: render\na muted placeholder instead of `unknown` when the record has none.","exports":[{"name":"SeverityBadge","description":"SeverityBadge shows a severity level with its label. The label is always\nrendered, so the level never depends on color alone.\n\nMap scores, priorities and CVSS bands to a level in the app; the badge only\nrenders it. A missing severity is missing information, not a level: render\na muted placeholder instead of `unknown` when the record has none.","props":[{"name":"label","type":"string","required":false,"description":"Already-translated label. Defaults to the English level name."},{"name":"level","type":"\"high\" | \"low\" | \"critical\" | \"medium\" | \"unknown\"","required":true},{"name":"variant","type":"\"soft\" | \"dot\"","required":false,"default":"dot","description":"`dot` (default) is a colored dot before the label, for tables and lists.\n`soft` is a tinted pill, for detail grids where the level is a value of\nits own."}]}]},{"name":"stat-tile","kind":"pattern","title":"Stat Tile","main":"StatTile","importPath":"@zenoxai/ui/patterns/stat-tile","docsUrl":"https://ui.zenox.services/patterns/stat-tile","description":"StatTile is the single-figure card of a summary band: a label, one figure\nat the KPI step of the type scale (text-2xl, semibold, tabular figures),\nand optionally a unit, a delta, a hint and a meta line. Every KPI row uses\nit, so figures read the same size and weight on every screen.\n\nThe figure is never colored. A figure that needs attention takes `tone`,\nwhich colors the meta line, its reason, with the tone's icon.","exports":[{"name":"StatDelta","description":"StatDelta is the change of a figure against a previous period: an arrow\nfor the direction and the value, on the soft fill of its sentiment. The\ncolor says whether the change is good news, not which way it went, so a\ndrop in open alerts and a rise in coverage both read green. StatTile\nrenders it from its `delta` prop; use it alone beside other figures.","props":[{"name":"label","type":"string","required":false,"description":"Already-translated sentence screen readers announce instead of the bare\nvalue, such as \"18% fewer than the previous 7 days\"."},{"name":"sentiment","type":"\"neutral\" | \"positive\" | \"negative\"","required":false,"default":"neutral","description":"Whether the move is good news. Only the app knows: fewer alerts is\npositive, fewer patched hosts is negative. Defaults to `neutral`."},{"name":"trend","type":"\"flat\" | \"up\" | \"down\"","required":true,"description":"Which way the figure moved. Drives the arrow, never the color."},{"name":"value","type":"string","required":true,"description":"The change, already formatted for the user's locale (\"18%\", \"+42\")."}]},{"name":"StatTile","description":"StatTile is the single-figure card of a summary band: a label, one figure\nat the KPI step of the type scale (text-2xl, semibold, tabular figures),\nand optionally a unit, a delta, a hint and a meta line. Every KPI row uses\nit, so figures read the same size and weight on every screen.\n\nThe figure is never colored. A figure that needs attention takes `tone`,\nwhich colors the meta line, its reason, with the tone's icon.","props":[{"name":"delta","type":"StatDeltaProps","required":false,"description":"Change against a previous period, shown beside the figure."},{"name":"exactValue","type":"string","required":false,"description":"The exact figure when `value` is abbreviated (\"1.2M\"): shown on hover and\nannounced by screen readers instead of the abbreviation."},{"name":"hint","type":"string","required":false,"description":"Explanation of how the figure is computed, shown in a tooltip."},{"name":"icon","type":"ReactNode","required":false,"description":"Leading icon before the label."},{"name":"isLoading","type":"boolean","required":false,"default":"false","description":"Renders skeletons in place of the figure and the meta line."},{"name":"label","type":"string","required":true,"description":"Already-translated label above the figure."},{"name":"meta","type":"ReactNode","required":false,"description":"Line under the figure: the period, the comparison, the source. With a\n`tone`, the reason the figure needs attention."},{"name":"onClick","type":"(() => void)","required":false,"description":"Makes the whole tile a button, usually to open the filtered list."},{"name":"tone","type":"\"default\" | \"warning\" | \"danger\"","required":false,"default":"default","description":"Whether the figure needs attention: a queue above its target, items past\ntheir SLA. The figure stays neutral; the meta line takes the tone's color\nand icon, so the state is read together with its reason."},{"name":"trailing","type":"ReactNode","required":false,"description":"Custom content on the figure's baseline. Prefer `unit` and `delta`."},{"name":"unit","type":"string","required":false,"description":"Unit after the figure, set smaller: \"%\", \"ms\", \"GB\"."},{"name":"value","type":"string | null","required":true,"description":"The figure, already formatted for the user's locale (\"1,204\", \"4h 12m\").\n`null` means there is no data, and the tile shows an empty value instead\nof a misleading zero."}]}]},{"name":"status-badge","kind":"pattern","title":"Status Badge","main":"StatusBadge","importPath":"@zenoxai/ui/patterns/status-badge","docsUrl":"https://ui.zenox.services/patterns/status-badge","description":"StatusBadge shows the state of a record (new, in progress, resolved,\nfailed) as a soft badge. State is always told by text, and preferably an\nicon too, never by color alone.\n\nThe library does not know your statuses. Keep a `getStatusTone(status)`\nmap in the app and pass the tone and label in.","exports":[{"name":"StatusBadge","description":"StatusBadge shows the state of a record (new, in progress, resolved,\nfailed) as a soft badge. State is always told by text, and preferably an\nicon too, never by color alone.\n\nThe library does not know your statuses. Keep a `getStatusTone(status)`\nmap in the app and pass the tone and label in.","props":[{"name":"icon","type":"LucideIcon","required":false,"description":"Leading glyph. Give one whenever color alone would carry the meaning."},{"name":"label","type":"string","required":true,"description":"Already-translated label. Never a raw enum or i18n key."},{"name":"tone","type":"\"info\" | \"success\" | \"warning\" | \"neutral\" | \"danger\"","required":true,"description":"Color of the badge."}]},{"name":"StatusDot","description":"StatusDot is a decorative 8px dot in a status tone, for dense lists.","props":[{"name":"tone","type":"\"info\" | \"success\" | \"warning\" | \"neutral\" | \"danger\"","required":true}]}]}]}