Hooks

There are two kinds of hook in this section, and telling them apart is the only thing you need to know before reading the rest of it.

Ours — real code, one page each: theme (useKanzoTheme, useIsMobile), layout (useSidebar, useTourContext) and charts and data (useChartContext and its variants, useMosaic, useCrossfilter, useSelected, useDataTable) from @kanzo-tech/ui, plus AI (useAiStream, useInlineCompletion, useSuggestions) from the sibling package @kanzo-tech/ai. They are listed in the sidebar.

Ark UI's, renamed — the 38 below. Each is literally one line:

export const useSelect = useSelectContext;

They exist so a component and its context hook share a name: you compose <Select> and read it with useSelect(), never useSelectContext(). There is no behaviour of ours in any of them, so there is nothing of ours to document — the authority is Ark's own page, linked per row.

Three renames hide the component

Most rows are the same word twice. Three are not, and looking these up under our name in Ark's docs finds nothing:

• useResizable is Ark's Splitter. Our Resizable is a Splitter; the hook kept the component's new name.
• useSheet is Ark's Dialog. A Sheet is a Dialog with edge placement, so it has no context of its own — useSheet and useDialog are the same function.
• useRating is Ark's RatingGroup.

The renames

Return values, arguments and behaviour are Ark's, unchanged. Call each inside its own component's provider.

All 38 come from the root barrel:

import { useSelect, useDialog, useTabs } from "@kanzo-tech/ui";

One example covers all thirty-eight

The shape never changes, so this is the only one on this page: compose the component, and read its machine from a child. Here useFileUpload() counts the plates and totals their bytes — one number per file is FileUploadItemSizeText's job, and a count and a sum across all of them is arithmetic no part does.

Note where Tally sits. It is a child of <FileUpload>, because a component that renders the root is above the provider and the hook would throw there — the warning above, as code. Swap useFileUpload for any row in the table and nothing else about this changes.

useTagsInput is the machine, and it names two hooks

Everywhere above, useX is Ark's context hook. TagsInput is the one compound that names both, because it ships a controlled root and a root has to be handed a machine:

import { TagsInputRootProvider, useTagsInput } from "@kanzo-tech/ui";

const tagsInput = useTagsInput({ defaultValue: ["react"] });

return <TagsInputRootProvider value={tagsInput}>{/* parts */}</TagsInputRootProvider>;

Reaching for the value or the items from inside the compound is useTagsInputContext, not useTagsInput. This mirrors Ark's own naming and Shark UI's, which is why the exception is here rather than smoothed away — a name that matches the reference while returning something else is worse than a table with one row that needs a sentence.

useHighlight is a machine hook too, and is not the same case: Ark's Highlight has no provider and therefore no context hook, so there was never a choice to make there.