{ "package": "@logicplanes/kaeso-ui", "version": "0.1.0", "components": [ { "entry": "app-frame", "kind": "components", "import": "@logicplanes/kaeso-ui/app-frame", "components": [ { "name": "AppFrame", "description": "The page frame of an app: a skip link to the content, the sidebar, the inset panel and, on phones, a bar with a menu button.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The page, inside the inset panel." }, { "name": "sidebar", "type": "ReactNode", "required": true, "default": null, "description": "The Sidebar." }, { "name": "brandHref", "type": "string", "required": false, "default": null, "description": "Where the phone bar's wordmark links to (the app's home), as `Sidebar.Brand`'s `href`; without it the wordmark is not a link." }, { "name": "brandLabel", "type": "string", "required": false, "default": null, "description": "The accessible name of the phone bar's wordmark (default \"Kaeso\"), as `Sidebar.Brand`'s `label`." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "corner", "type": "ReactNode", "required": false, "default": null, "description": "A bottom-right status area. Unused by default." }, { "name": "fill", "type": "\"screen\" | \"parent\"", "required": false, "default": "screen", "description": "`screen` fills the viewport (default); `parent` fills its container (previews, embedded tools)." } ], "file": "src/components/app-frame/app-frame.tsx" }, { "name": "NavSheet", "description": "The sidebar as a floating panel from the left edge (a peek): the mobile navigation sheet, and the preview of a collapsed sidebar while the expand button is hovered (`peek`: it closes when the pointer leaves).", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The navigation, usually the app's `Sidebar`." }, { "name": "onOpenChange", "type": "(open: boolean) => void", "required": true, "default": null, "description": "Called when the navigation opens or closes." }, { "name": "open", "type": "boolean", "required": true, "default": null, "description": "Whether the navigation is shown on phones." }, { "name": "peek", "type": "boolean", "required": false, "default": "false", "description": "Slides the sheet in a little, to hint that it can be opened." }, { "name": "returnFocus", "type": "RefObject", "required": false, "default": null, "description": "The element that gets focus back when the sheet closes." } ], "file": "src/components/app-frame/app-frame.tsx" } ], "variants": { "APP_FRAME_BODY_DEFAULT": { "axes": { "padding": {} }, "defaults": {} }, "APP_FRAME_BODY": { "axes": { "padding": { "none": "Edge to edge: lists and tables that bring their own row insets (default)", "list": "A list or table under the header: 8px above the first row; rows bring their own side insets", "page": "A content page (overviews, charts, sections): 24px sides, 16px under the header, 48px at the end" } }, "defaults": {} }, "APP_FRAME_DEFAULT": { "axes": { "fill": {} }, "defaults": {} }, "APP_FRAME": { "axes": { "fill": { "screen": "Fills the viewport (default)", "parent": "Fills its container: previews, embedded tools" } }, "defaults": {} } } }, { "entry": "avatar", "kind": "components", "import": "@logicplanes/kaeso-ui/avatar", "components": [ { "name": "Avatar", "description": "The first letters of the first and last word; `max` 1 keeps only the first.", "props": [ { "name": "name", "type": "string", "required": true, "default": null, "description": "The person's or organization's name; its first letters show without a picture, and it is the accessible name." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "decorative", "type": "boolean", "required": false, "default": null, "description": "Hides it from assistive technology when the same information is already written next to it." }, { "name": "kind", "type": "\"person\" | \"org\"", "required": false, "default": "person", "description": "A person (round) or an organization (rounded square)." }, { "name": "size", "type": "24 | 20 | 28 | 32 | 40", "required": false, "default": "24", "description": "The diameter in pixels." }, { "name": "src", "type": "string", "required": false, "default": null, "description": "The picture's address; without one, or when it fails to load, the letters show." } ], "file": "src/components/avatar/avatar.tsx" }, { "name": "AvatarGroup", "description": "Overlapping avatars with a 2px panel ring and a \"+3\".", "props": [ { "name": "people", "type": "{ name: string; src?: string | undefined; }[]", "required": true, "default": null, "description": "The people to show, in order." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "Content after the avatars, such as a button to invite more people." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "max", "type": "number", "required": false, "default": "4", "description": "Show at most this many; the rest become \"+3\"." }, { "name": "size", "type": "24 | 20 | 28 | 32 | 40", "required": false, "default": "24", "description": "The diameter of each avatar in pixels." } ], "file": "src/components/avatar/avatar.tsx" } ], "variants": { "AVATAR_DEFAULT": { "axes": { "size": {}, "kind": {} }, "defaults": {} }, "AVATAR": { "axes": { "size": { "20": "20px", "24": "24px: rows and the org switcher (default)", "28": "28px", "32": "32px", "40": "40px: menus, profiles" }, "kind": { "person": "People are round", "org": "Organizations and projects: radius 8" } }, "defaults": {} } } }, { "entry": "badge", "kind": "components", "import": "@logicplanes/kaeso-ui/badge", "components": [ { "name": "Badge", "description": "A small pill label: 22px, 12/500. Words carry meaning; color supports them.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The badge's text, one or two words." }, { "name": "tone", "type": "\"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\" | \"outline\" | \"ink\"", "required": false, "default": "neutral", "description": "The status it marks; keep it next to words that say the same." } ], "file": "src/components/badge/badge.tsx" } ], "variants": { "BADGE_DEFAULT": { "axes": { "tone": {} }, "defaults": {} }, "BADGE": { "axes": { "tone": { "neutral": "Neutral (default)", "success": "Success", "warning": "Warning", "danger": "Danger", "info": "Information", "outline": "A ring only", "ink": "Inverted, for the one thing that must stand out" } }, "defaults": {} } } }, { "entry": "banner", "kind": "components", "import": "@logicplanes/kaeso-ui/banner", "components": [ { "name": "Banner", "description": "An inline notice: a tint, an icon, an optional title, the text, actions at the end. The banner is its own size container. From 480px inside its padding (the `banner` container size, `@banner:`) the actions sit on the right, centered on the title and text together, and the icon stays on the first line. Narrower (a phone) the actions go under the text, starting where the text starts: their 24px inset is the icon's 16px column and its 8px gap, which in the row is the gap before them.", "props": [ { "name": "actions", "type": "ReactNode", "required": false, "default": null, "description": "sm pills: on the right, centered on the title and text; under the text when the banner is narrow." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "The message, with actions if it needs them." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "icon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon in place of the tone's own." }, { "name": "layout", "type": "\"inline\" | \"full\"", "required": false, "default": "inline", "description": "Inside the content (`inline`) or across the full width of the panel (`full`)." }, { "name": "onDismiss", "type": "(() => void)", "required": false, "default": null, "description": "Only informational banners can be dismissed." }, { "name": "title", "type": "ReactNode", "required": false, "default": null, "description": "The banner's heading." }, { "name": "tone", "type": "\"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\"", "required": false, "default": "neutral", "description": "The kind of message, from neutral information to a danger warning." } ], "file": "src/components/banner/banner.tsx" } ], "variants": { "BANNER_DEFAULT": { "axes": { "tone": {}, "layout": {} }, "defaults": {} }, "BANNER": { "axes": { "tone": { "neutral": "A neutral notice (default)", "info": "Information", "success": "Something worked", "warning": "Attention needed soon", "danger": "Something failed or will fail" }, "layout": { "inline": "Inside content: radius 14 (default)", "full": "Across the top of the panel for global notices" } }, "defaults": {} } } }, { "entry": "button", "kind": "components", "import": "@logicplanes/kaeso-ui/button", "components": [ { "name": "Button", "description": "The button. Every one is a pill; icon-only buttons are circles (see `IconButton`).", "props": [ { "name": "icon", "type": "IconSvgElement", "required": true, "default": null, "description": "The only content of an icon button; give it an `aria-label`." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "The button's label: a verb first, in sentence case." }, { "name": "count", "type": "number", "required": false, "default": null, "description": "A count after the label." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "disabledReason", "type": "string", "required": false, "default": null, "description": "Why the button is disabled, shown as a tooltip. The button stays focusable so people can read it." }, { "name": "fullWidth", "type": "boolean", "required": false, "default": null, "description": "Fills the width of its container." }, { "name": "href", "type": "string", "required": false, "default": null, "description": "Renders a link that looks like the button." }, { "name": "leadingIcon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon before the text." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "Work is underway: the button is busy and ignores clicks at once; the spinner shows only once the work has taken 300ms, then for at least 400ms (`useDelayedLoading`). It replaces the leading icon, or covers the label; the width never changes." }, { "name": "rel", "type": "string", "required": false, "default": null, "description": "The link's relationship, as on an `a` element." }, { "name": "reserveLabels", "type": "ReactNode[]", "required": false, "default": null, "description": "Every label this button can show (\"Copy key\", \"Copied\"). The button keeps the width of the widest, so a state change never resizes it." }, { "name": "shape", "type": "\"pill\" | \"circle\"", "required": false, "default": null, "description": "Icon-only buttons are circles and need an accessible name." }, { "name": "shortcut", "type": "string[] | string[][]", "required": false, "default": null, "description": "A shortcut hint after the label (lg and xl, and in menus)." }, { "name": "size", "type": "\"md\" | \"xs\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": null, "description": "The height, from `xs` (24px) to `xl` (44px)." }, { "name": "target", "type": "string", "required": false, "default": null, "description": "Where the link opens, as on an `a` element." }, { "name": "trailingIcon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon after the text." }, { "name": "variant", "type": "\"danger\" | \"link\" | \"secondary\" | \"primary\" | \"ghost\" | \"quiet\" | \"soft\" | \"danger-secondary\"", "required": false, "default": null, "description": "`primary` for the one main action of a view, `secondary` for others, `ghost` and `quiet` for toolbars, `danger` for destructive actions." } ], "file": "src/components/button/button.tsx" } ], "variants": { "BUTTON_DEFAULT": { "axes": { "variant": {}, "size": {}, "shape": {} }, "defaults": {} }, "BUTTON": { "axes": { "variant": { "primary": "Ink with a faint top light. Exactly one per view.", "secondary": "Raised, ring and a soft shadow. The default.", "ghost": "Transparent until hovered: toolbars, rows, quiet actions", "quiet": "A ghost in secondary text that darkens on hover: actions inside a field (clear, reveal, copy)", "soft": "A fill without a ring: the active pill tab", "danger": "The destructive confirm, with the primary's material", "danger-secondary": "Raised with danger text; tints on hover. Destructive triggers.", "link": "Text with an underline, for actions inside sentences" }, "size": { "xs": "24px: chips inside rows and tables only", "sm": "32px: toolbars, headers, settings rows", "md": "36px: the default", "lg": "40px: prominent actions", "xl": "48px: sign-in and setup forms, empty-state actions" }, "shape": { "pill": "Every button is a pill", "circle": "Icon-only: a circle of the same height" } }, "defaults": {} } } }, { "entry": "button-group", "kind": "components", "import": "@logicplanes/kaeso-ui/button-group", "components": [ { "name": "ButtonGroup", "description": "Related actions side by side: connected pills, or spaced with `attached={false}`.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The buttons, joined into one pill." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "Names the group for assistive technology." }, { "name": "attached", "type": "boolean", "required": false, "default": "true", "description": "Connected pills (default) or separate pills with a gap." }, { "name": "size", "type": "GroupSize", "required": false, "default": "md", "description": "The size of every button in the group." } ], "file": "src/components/button-group/button-group.tsx" } ], "variants": { "BUTTON_GROUP_DEFAULT": { "axes": { "attached": {}, "size": {} }, "defaults": {} }, "BUTTON_GROUP": { "axes": { "attached": { "true": "Connected: one outer pill with inner hairline dividers (default)", "false": "Spaced: separate pills 8px apart" }, "size": { "xs": "24px", "sm": "32px", "md": "36px (default)", "lg": "40px" } }, "defaults": {} } } }, { "entry": "calendar", "kind": "components", "import": "@logicplanes/kaeso-ui/calendar", "components": [ { "name": "Calendar", "description": "The calendar: 36px day circles, today ringed, ranges as a continuous strip with ink ends. Always six weeks, so paging never changes its height; with two months side by side, each shows only its own days.", "props": [ { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultMonth", "type": "Date", "required": false, "default": null, "description": "The month shown first when `month` isn't controlled; the arrows move from there." }, { "name": "disabled", "type": "((date: Date) => boolean)", "required": false, "default": null, "description": "Returns `true` for days that can't be chosen." }, { "name": "mode", "type": "\"single\" | \"range\"", "required": false, "default": "single", "description": "Picks one day (`single`) or a range (`range`)." }, { "name": "month", "type": "Date", "required": false, "default": null, "description": "The month shown, when you control it." }, { "name": "numberOfMonths", "type": "number", "required": false, "default": "1", "description": "How many months are shown side by side." }, { "name": "onMonthChange", "type": "((month: Date) => void)", "required": false, "default": null, "description": "Called when the month shown changes." }, { "name": "onSelect", "type": "((value: Date | DateRange) => void)", "required": false, "default": null, "description": "Called with the new day or range." }, { "name": "selected", "type": "Date | DateRange", "required": false, "default": null, "description": "The selected day or range." }, { "name": "weekStartsOn", "type": "0 | 4 | 1 | 2 | 3 | 5 | 6", "required": false, "default": "1", "description": "0 = Sunday, 1 = Monday (default)." } ], "file": "src/components/calendar/calendar.tsx" } ], "variants": { "CALENDAR_DEFAULT": { "axes": { "mode": {} }, "defaults": {} }, "CALENDAR": { "axes": { "mode": { "single": "One date (default)", "range": "A range: a continuous strip between ink ends" } }, "defaults": {} } } }, { "entry": "charts", "kind": "components", "import": "@logicplanes/kaeso-ui/charts", "components": [ { "name": "BarChart", "description": "Bars for comparing values across categories: grouped, stacked, or horizontal for rankings. The category under the pointer, or reached with the arrow keys, shows its tooltip.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name (\"Requests by model\")." }, { "name": "categories", "type": "string[]", "required": true, "default": null, "description": "The names along the category axis, one per bar group, in order. They also head the tooltip and the data table." }, { "name": "series", "type": "BarSeries[]", "required": true, "default": null, "description": "The bars' series, each with an `id`, a `label`, one value per category and an optional `color`. Colors otherwise come from the series order by `id`." }, { "name": "axisLabels", "type": "string[]", "required": false, "default": null, "description": "Shorter names under the bars, one per category (\"3 Aug\" for \"Week of 3 Aug\"); the tooltip, the table and screen readers keep the categories. Name the year where one begins (\"Aug\", \"Dec\", \"2026\", \"Feb\"), and pass `dates`: where the labels don't all fit, the axis keeps every nth, and keeps that one before the newest (`axisLabelIndexes`)." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "dates", "type": "readonly AxisDate[]", "required": false, "default": null, "description": "The day each category begins, one per category: a `Date`, or an ISO day (\"2026-01-05\"). Where the axis thins its labels, it keeps the ones where a year begins (the month after December, the first week in January), read from these, so every language keeps the same labels." }, { "name": "empty", "type": "boolean", "required": false, "default": null, "description": "Shows the empty state (`emptyText`) in place of the data. Pass it when the period has no data." }, { "name": "emptyText", "type": "ReactNode", "required": false, "default": null, "description": "What the empty state says. Defaults to \"No data for this period\" in the provider's language." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "The data failed to load: the chart keeps its height, says so quietly and offers Try again. Errors are toasts, so the value isn't shown; toast the message where the request fails." }, { "name": "formatValue", "type": "((v: number) => string)", "required": false, "default": "(v) => formatNumber(v)", "description": "Formats values on the axis and in the tooltip." }, { "name": "height", "type": "number", "required": false, "default": "240", "description": "The plot's height in px (240 by default)." }, { "name": "highlight", "type": "number", "required": false, "default": null, "description": "Highlight a category as the pointer does, with its tooltip: a linked view, or the states pages." }, { "name": "layout", "type": "\"horizontal\" | \"grouped\" | \"stacked\"", "required": false, "default": "grouped", "description": "`grouped` puts each category's bars side by side (default), `stacked` stacks them, and `horizontal` draws bars across for rankings." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "The data is loading: the chart keeps its height and shows a quiet loading bar." }, { "name": "onRetry", "type": "(() => void)", "required": false, "default": null, "description": "Called when Try again is pressed after `error`; without it, the button doesn't show." } ], "file": "src/components/charts/bar.tsx" }, { "name": "ChartFrame", "description": "The frame every chart draws in: a hidden data table for assistive technology, a \"View as table\" toggle, and the empty, loading and error states. Use it to build a chart of your own that behaves like the others.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The plot, usually an SVG, drawn at `height`." }, { "name": "height", "type": "number", "required": true, "default": null, "description": "The plot's height in px. The empty, loading and error states keep it, so nothing below moves." }, { "name": "label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name, also the caption of the hidden data table." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "legend", "type": "ReactNode", "required": false, "default": null, "description": "A legend under the plot, usually a `Legend`. It is hidden while the table is shown." }, { "name": "state", "type": "ChartState", "required": false, "default": "{}", "description": "The chart's `loading`, `error`, `onRetry`, `empty` and `emptyText`, as the charts take them." }, { "name": "table", "type": "TableData", "required": false, "default": null, "description": "The data as `columns` and `rows`, for screen readers and the table view. Without it there is no table and no toggle." }, { "name": "toggle", "type": "boolean", "required": false, "default": "true", "description": "Shows the \"View as table\" button when there is a `table` (on by default)." } ], "file": "src/components/charts/core.tsx" }, { "name": "ChartLive", "description": "A polite live region that announces what the keyboard highlight shows once it settles. Charts use it because their tooltip is hidden from assistive technology.", "props": [ { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "The line to announce, usually from `liveLine`; nothing while nothing is highlighted." } ], "file": "src/components/charts/core.tsx" }, { "name": "ChartTooltip", "description": "The tooltip a chart shows for a highlighted point or category: a heading with the x value and one row per series. It flips to the left past the middle and stays inside the chart.", "props": [ { "name": "heading", "type": "ReactNode", "required": true, "default": null, "description": "The heading, usually the highlighted time or category." }, { "name": "rows", "type": "TooltipRow[]", "required": true, "default": null, "description": "One row per series, each with an `id`, a `label`, a `color`, a `value` and an optional `share`." }, { "name": "visible", "type": "boolean", "required": true, "default": null, "description": "Shows the tooltip; it fades out when false." }, { "name": "width", "type": "number", "required": true, "default": null, "description": "The chart's width in px, so the tooltip flips and stays inside it." }, { "name": "x", "type": "number", "required": true, "default": null, "description": "The anchor's x position in px from the chart's left edge. The tooltip sits 16px to its right." }, { "name": "y", "type": "number", "required": true, "default": null, "description": "The anchor's y position in px from the chart's top." }, { "name": "xLeft", "type": "number", "required": false, "default": null, "description": "Where the tooltip ends when it flips to the left, such as the left edge of a highlighted bar group, so it never covers it. Defaults to `x`." } ], "file": "src/components/charts/core.tsx" }, { "name": "Donut", "description": "A ring of shares with the total in the center and a legend beside it, or under it when narrow. Use it for a few parts of one whole.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name (\"Requests by model\")." }, { "name": "slices", "type": "Slice[]", "required": true, "default": null, "description": "The parts of the whole, each with an `id`, a `label`, a `value` and an optional `color`. Slices under 2% are grouped as Other when there are two or more." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "empty", "type": "boolean", "required": false, "default": null, "description": "Shows the empty state (`emptyText`) in place of the data. By default it shows when every value is 0." }, { "name": "emptyText", "type": "ReactNode", "required": false, "default": null, "description": "What the empty state says. Defaults to \"No data for this period\" in the provider's language." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "The data failed to load: the chart keeps its height, says so quietly and offers Try again. Errors are toasts, so the value isn't shown; toast the message where the request fails." }, { "name": "formatValue", "type": "((v: number) => string)", "required": false, "default": "(v) => formatNumber(v)", "description": "Formats the total in the center and the values in the legend. Defaults to `formatNumber`." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "The data is loading: the chart keeps its height and shows a quiet loading bar." }, { "name": "onRetry", "type": "(() => void)", "required": false, "default": null, "description": "Called when Try again is pressed after `error`; without it, the button doesn't show." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": "md", "description": "The ring's diameter: `sm` 140px, `md` 160px (default) or `lg` 180px." }, { "name": "total", "type": "ReactNode", "required": false, "default": null, "description": "Replaces the total in the center, which is otherwise the sum of the slices written with `formatValue`." }, { "name": "totalLabel", "type": "ReactNode", "required": false, "default": null, "description": "The word under the total. Defaults to \"Total\" in the provider's language." } ], "file": "src/components/charts/donut.tsx" }, { "name": "Gauge", "description": "A semicircle meter for one share of a limit, such as \"budget used\". It turns to warning at the first threshold and to danger at 100%.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name (\"Requests by model\")." }, { "name": "value", "type": "number", "required": true, "default": null, "description": "The share used, from 0 to 1. Values above 1 fill the arc and turn it to danger." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "A caption under the value (\"of $500.00 budget\")." }, { "name": "thresholds", "type": "number[]", "required": false, "default": "[0.8]", "description": "Fractions marked as ticks on the arc (`[0.8]` by default). From the lowest one, the arc turns to warning." }, { "name": "valueLabel", "type": "ReactNode", "required": false, "default": null, "description": "Replaces the value in the center, which is otherwise the percentage." } ], "file": "src/components/charts/gauge.tsx" }, { "name": "Heatmap", "description": "A grid of cells shaded on a five-step ramp, for one value across two dimensions such as hour by weekday.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name (\"Requests by model\")." }, { "name": "columns", "type": "string[]", "required": true, "default": null, "description": "The column labels, left to right (hours, or weeks)." }, { "name": "rows", "type": "string[]", "required": true, "default": null, "description": "The row labels, top to bottom (weekdays)." }, { "name": "values", "type": "number[][]", "required": true, "default": null, "description": "The values by row, then column: `values[row][column]`. The darkest step is the largest value." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "columnLabelEvery", "type": "number", "required": false, "default": "3", "description": "Labels every nth column, starting with the first (3 by default), so dense columns stay readable." }, { "name": "formatValue", "type": "((v: number) => string)", "required": false, "default": "(v) => formatNumber(v)", "description": "Formats a cell's value for its tooltip and screen readers. Defaults to `formatNumber`." } ], "file": "src/components/charts/heatmap.tsx" }, { "name": "Legend", "description": "Pills with swatches that name a chart's series. With `onToggle` they show and hide series, and hovering one can isolate it.", "props": [ { "name": "items", "type": "LegendItem[]", "required": true, "default": null, "description": "One item per series, each with an `id`, a `label`, a `color` and an optional `value`." }, { "name": "hidden", "type": "Set", "required": false, "default": null, "description": "The `id`s of the series that are hidden; their pills show as off." }, { "name": "onHover", "type": "((id: string | null) => void)", "required": false, "default": null, "description": "Called with a series `id` when its pill is hovered or focused, and with `null` when it is left." }, { "name": "onToggle", "type": "((id: string) => void)", "required": false, "default": null, "description": "Called with a series `id` when its pill is pressed. Without it, the pills are plain labels." }, { "name": "shape", "type": "\"square\" | \"line\"", "required": false, "default": "square", "description": "The swatch: `square` for filled marks (default) or `line` for lines." } ], "file": "src/components/charts/core.tsx" }, { "name": "Ring", "description": "The same component as `Donut` under another name, with the same props.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name (\"Requests by model\")." }, { "name": "slices", "type": "Slice[]", "required": true, "default": null, "description": "The parts of the whole, each with an `id`, a `label`, a `value` and an optional `color`. Slices under 2% are grouped as Other when there are two or more." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "empty", "type": "boolean", "required": false, "default": null, "description": "Shows the empty state (`emptyText`) in place of the data. By default it shows when every value is 0." }, { "name": "emptyText", "type": "ReactNode", "required": false, "default": null, "description": "What the empty state says. Defaults to \"No data for this period\" in the provider's language." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "The data failed to load: the chart keeps its height, says so quietly and offers Try again. Errors are toasts, so the value isn't shown; toast the message where the request fails." }, { "name": "formatValue", "type": "((v: number) => string)", "required": false, "default": "(v) => formatNumber(v)", "description": "Formats the total in the center and the values in the legend. Defaults to `formatNumber`." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "The data is loading: the chart keeps its height and shows a quiet loading bar." }, { "name": "onRetry", "type": "(() => void)", "required": false, "default": null, "description": "Called when Try again is pressed after `error`; without it, the button doesn't show." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": "md", "description": "The ring's diameter: `sm` 140px, `md` 160px (default) or `lg` 180px." }, { "name": "total", "type": "ReactNode", "required": false, "default": null, "description": "Replaces the total in the center, which is otherwise the sum of the slices written with `formatValue`." }, { "name": "totalLabel", "type": "ReactNode", "required": false, "default": null, "description": "The word under the total. Defaults to \"Total\" in the provider's language." } ], "file": "src/components/charts/donut.tsx" }, { "name": "Sankey", "description": "A flow diagram, such as requests from keys to models to providers, with ribbons as wide as each flow. Hovering a node highlights its paths.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name (\"Requests by model\")." }, { "name": "links", "type": "SankeyLinkIn[]", "required": true, "default": null, "description": "The flows, each with a `source` and a `target` node `id` and a `value`." }, { "name": "nodes", "type": "SankeyNodeIn[]", "required": true, "default": null, "description": "The nodes, each with an `id` and a `label`. Columns follow from the links." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "empty", "type": "boolean", "required": false, "default": null, "description": "Shows the empty state (`emptyText`) in place of the data. Pass it when the period has no data." }, { "name": "emptyText", "type": "ReactNode", "required": false, "default": null, "description": "What the empty state says. Defaults to \"No data for this period\" in the provider's language." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "The data failed to load: the chart keeps its height, says so quietly and offers Try again. Errors are toasts, so the value isn't shown; toast the message where the request fails." }, { "name": "formatValue", "type": "((v: number) => string)", "required": false, "default": "(v) => formatNumber(v)", "description": "Formats the values beside the nodes and in the data table. Defaults to `formatNumber`." }, { "name": "height", "type": "number", "required": false, "default": "320", "description": "The diagram's height in px (320 by default)." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "The data is loading: the chart keeps its height and shows a quiet loading bar." }, { "name": "onRetry", "type": "(() => void)", "required": false, "default": null, "description": "Called when Try again is pressed after `error`; without it, the button doesn't show." } ], "file": "src/components/charts/sankey.tsx" }, { "name": "ShareBar", "description": "One pill split into segments by share, with a legend under it. Use it for a compact breakdown of one whole in a row or a card.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name (\"Requests by model\")." }, { "name": "slices", "type": "Slice[]", "required": true, "default": null, "description": "The parts of the whole, each with an `id`, a `label`, a `value` and an optional `color`." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "formatValue", "type": "((v: number) => string)", "required": false, "default": "(v) => formatNumber(v)", "description": "Formats a segment's value in its tooltip. Defaults to `formatNumber`." }, { "name": "legend", "type": "boolean", "required": false, "default": "true", "description": "Shows the legend with each share under the bar (on by default)." } ], "file": "src/components/charts/donut.tsx" }, { "name": "Sparkline", "description": "A small line chart of one series, inline beside a value, with its last point marked. Set `fluid` to fill a stat tile's width.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name (\"Requests by model\")." }, { "name": "values", "type": "number[]", "required": true, "default": null, "description": "The values in order, oldest first." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "color", "type": "string", "required": false, "default": "var(--k-viz-1)", "description": "The line's color (`var(--k-viz-1)` by default). Pass `seriesColor(id)` to match the series elsewhere." }, { "name": "fluid", "type": "boolean", "required": false, "default": null, "description": "Fills the container's width at 32px high, without the last point's dot, as in a stat tile. Otherwise it is 80×24." } ], "file": "src/components/charts/sparkline.tsx" }, { "name": "Swatch", "description": "The mark that keys a series: a short stroke for lines, a small rounded square for filled marks. Never a dot.", "props": [ { "name": "color", "type": "string", "required": true, "default": null, "description": "The series color." }, { "name": "off", "type": "boolean", "required": false, "default": null, "description": "Draws the swatch as off, for a hidden series." }, { "name": "shape", "type": "\"square\" | \"line\"", "required": false, "default": "square", "description": "`square` for filled marks (default) or `line` for lines." } ], "file": "src/components/charts/core.tsx" }, { "name": "TimeseriesChart", "description": "A line or area chart of values over time, such as usage, with a crosshair and tooltip. The point under the pointer, or reached with the arrow keys, shows its values.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The chart's accessible name (\"Requests by model\")." }, { "name": "series", "type": "TimeSeries[]", "required": true, "default": null, "description": "The series, each with an `id`, a `label`, `points` of `t` (a time) and `v`, and an optional `color`." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "empty", "type": "boolean", "required": false, "default": null, "description": "Shows the empty state (`emptyText`) in place of the data. By default it shows when every value is 0." }, { "name": "emptyText", "type": "ReactNode", "required": false, "default": null, "description": "What the empty state says. Defaults to \"No data for this period\" in the provider's language." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "The data failed to load: the chart keeps its height, says so quietly and offers Try again. Errors are toasts, so the value isn't shown; toast the message where the request fails." }, { "name": "formatTime", "type": "((t: Date) => string)", "required": false, "default": null, "description": "Names a point's time in the tooltip, the table and for screen readers, where a point stands for more than its instant: \"Week of 3 Aug\", \"Aug 2026\". The axis keeps its calendar ticks." }, { "name": "formatValue", "type": "((v: number) => string)", "required": false, "default": "(v) => formatNumber(v)", "description": "Formats values on the axis and in the tooltip." }, { "name": "height", "type": "number", "required": false, "default": "240", "description": "The plot's height in px (240 by default)." }, { "name": "hideLegend", "type": "boolean", "required": false, "default": null, "description": "Hide the legend (one series)." }, { "name": "highlight", "type": "number", "required": false, "default": null, "description": "Highlight a point in time as the pointer does, with the crosshair and tooltip: a linked view, or the states pages." }, { "name": "kind", "type": "\"stacked\" | \"line\" | \"area\"", "required": false, "default": "line", "description": "`line` draws lines (default), `area` adds a light fill under each line, and `stacked` stacks the areas." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "The data is loading: the chart keeps its height and shows a quiet loading bar." }, { "name": "onRetry", "type": "(() => void)", "required": false, "default": null, "description": "Called when Try again is pressed after `error`; without it, the button doesn't show." }, { "name": "threshold", "type": "{ value: number; label: string; }", "required": false, "default": null, "description": "A threshold line (a budget) in danger, dashed." } ], "file": "src/components/charts/timeseries.tsx" } ], "variants": { "BAR_CHART_DEFAULT": { "axes": { "layout": {} }, "defaults": {} }, "BAR_CHART": { "axes": { "layout": { "grouped": "Bars side by side per category (default)", "stacked": "Bars stacked per category", "horizontal": "Horizontal bars for rankings" } }, "defaults": {} }, "CHARTS_DEFAULT": { "axes": { "chrome": {} }, "defaults": {} }, "CHARTS": { "axes": { "chrome": { "default": "Dashed 3 3 grid, tertiary 12px labels, a strong baseline; no frame" } }, "defaults": {} }, "DONUT_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "DONUT": { "axes": { "size": { "md": "160px (default)", "sm": "140px", "lg": "180px" } }, "defaults": {} }, "GAUGE_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "GAUGE": { "axes": { "size": { "md": "180px (default)" } }, "defaults": {} }, "HEATMAP_DEFAULT": { "axes": { "layout": {} }, "defaults": {} }, "HEATMAP": { "axes": { "layout": { "week": "Hour × weekday (default)", "year": "Day × week" } }, "defaults": {} }, "SANKEY_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "SANKEY": { "axes": { "size": { "md": "Fills its width; 320px tall by default" } }, "defaults": {} }, "SHARE_BAR_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "SHARE_BAR": { "axes": { "size": { "md": "One 8px pill (default)" } }, "defaults": {} }, "SPARKLINE_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "SPARKLINE": { "axes": { "size": { "md": "80×24 inline (default)" } }, "defaults": {} }, "TIMESERIES_CHART_DEFAULT": { "axes": { "kind": {} }, "defaults": {} }, "TIMESERIES_CHART": { "axes": { "kind": { "line": "2px lines, hover dots only (default)", "area": "Lines with a 10% fill (16% in dark mode)", "stacked": "Stacked areas" } }, "defaults": {} } } }, { "entry": "checkbox", "kind": "components", "import": "@logicplanes/kaeso-ui/checkbox", "components": [ { "name": "Checkbox", "description": "A checkbox with its label and description; with a `parent`, it checks or unchecks a group.", "props": [ { "name": "aria-describedby", "type": "string", "required": false, "default": null, "description": "The ids of the elements that describe it." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "aria-labelledby", "type": "string", "required": false, "default": null, "description": "Names the box by other text, such as the first line of a row whose label holds more." }, { "name": "checked", "type": "boolean", "required": false, "default": null, "description": "Whether it is checked, when you control it." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultChecked", "type": "boolean", "required": false, "default": null, "description": "Whether it starts checked, when the component keeps its own state." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "indeterminate", "type": "boolean", "required": false, "default": null, "description": "Shows a dash: some, but not all, of a group is checked." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The label; the whole row becomes the target." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onCheckedChange", "type": "((checked: boolean) => void)", "required": false, "default": null, "description": "Called with the new state when it is checked or unchecked." }, { "name": "readOnly", "type": "boolean", "required": false, "default": null, "description": "Shows the value without letting people change it." }, { "name": "required", "type": "boolean", "required": false, "default": null, "description": "Marks it as required in a form." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The value sent with the form, and the value in a `CheckboxGroup`." } ], "file": "src/components/checkbox/checkbox.tsx" }, { "name": "Checkbox.Box", "description": "The box alone: 18px, raised and ringed; ink when checked with a check that draws itself in 140ms.", "props": [ { "name": "aria-describedby", "type": "string", "required": false, "default": null, "description": "The ids of the elements that describe it." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "aria-labelledby", "type": "string", "required": false, "default": null, "description": "Names the box by other text, such as the first line of a row whose label holds more." }, { "name": "checked", "type": "boolean", "required": false, "default": null, "description": "Whether it is checked, when you control it." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultChecked", "type": "boolean", "required": false, "default": null, "description": "Whether it starts checked, when the component keeps its own state." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "indeterminate", "type": "boolean", "required": false, "default": null, "description": "Shows a dash: some, but not all, of a group is checked." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The label; the whole row becomes the target." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onCheckedChange", "type": "((checked: boolean) => void)", "required": false, "default": null, "description": "Called with the new state when it is checked or unchecked." }, { "name": "parent", "type": "boolean", "required": false, "default": null, "description": "Checks and unchecks every checkbox of its `CheckboxGroup`." }, { "name": "readOnly", "type": "boolean", "required": false, "default": null, "description": "Shows the value without letting people change it." }, { "name": "required", "type": "boolean", "required": false, "default": null, "description": "Marks it as required in a form." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The value sent with the form, and the value in a `CheckboxGroup`." } ], "file": "src/components/checkbox/checkbox.tsx" }, { "name": "CheckboxGroup", "description": "Checkboxes that share one value, a list of the checked values.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The checkboxes." }, { "name": "allValues", "type": "string[]", "required": false, "default": null, "description": "Every value, so a parent checkbox can select all." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "aria-labelledby", "type": "string", "required": false, "default": null, "description": "The id of the element that names it, when its label is elsewhere on the page." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultValue", "type": "string[]", "required": false, "default": null, "description": "The checked values on first render." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns off every checkbox in the group." }, { "name": "onValueChange", "type": "((value: string[]) => void)", "required": false, "default": null, "description": "Called with the checked values whenever one changes." }, { "name": "value", "type": "string[]", "required": false, "default": null, "description": "The checked values, when you control them." } ], "file": "src/components/checkbox/checkbox.tsx" } ], "variants": { "CHECKBOX_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "CHECKBOX": { "axes": { "size": { "md": "18px, radius 5 (default)" } }, "defaults": {} } } }, { "entry": "code", "kind": "components", "import": "@logicplanes/kaeso-ui/code", "components": [ { "name": "Code", "description": "Inline code: Geist Mono 13 on fill-1.", "props": [ { "name": "shape", "type": "\"auto\" | \"pill\" | \"rounded\"", "required": false, "default": "auto", "description": "A pill on one line, rounded corners when it wraps, or `auto` to choose by length." } ], "file": "src/components/code/code.tsx" } ], "variants": { "CODE_DEFAULT": { "axes": { "shape": {} }, "defaults": {} }, "CODE": { "axes": { "shape": { "auto": "Pill for a single word, radius 6 for anything longer (default)", "pill": "Always a pill", "rounded": "Always radius 6" } }, "defaults": {} } } }, { "entry": "code-block", "kind": "components", "import": "@logicplanes/kaeso-ui/code-block", "components": [ { "name": "CodeBlock", "description": "Highlighted code on a well: Kaeso's monochrome theme, copy on hover, tabs, line numbers, collapse.", "props": [ { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "code", "type": "string", "required": false, "default": "", "description": "The code to show." }, { "name": "collapseAfter", "type": "number", "required": false, "default": "24", "description": "Collapse beyond this many lines (24 by default; 0 never collapses)." }, { "name": "copy", "type": "boolean", "required": false, "default": "true", "description": "Hide the copy circle." }, { "name": "highlightLines", "type": "number[]", "required": false, "default": "[]", "description": "1-based line numbers to highlight." }, { "name": "lang", "type": "CodeLang", "required": false, "default": "ts", "description": "The language of the code, for highlighting." }, { "name": "lineNumbers", "type": "boolean", "required": false, "default": null, "description": "Shows line numbers." }, { "name": "surface", "type": "\"well\" | \"plain\"", "required": false, "default": "well", "description": "On a filled well (`well`) or on the panel itself (`plain`)." }, { "name": "tabs", "type": "CodeTab[]", "required": false, "default": null, "description": "Several versions: \"Python · Node · curl\", shown as pill tabs." }, { "name": "title", "type": "ReactNode", "required": false, "default": null, "description": "A file name in the title bar." }, { "name": "wrap", "type": "boolean", "required": false, "default": "false", "description": "Long lines wrap instead of scrolling sideways: code in a narrow column (a model's response)." } ], "file": "src/components/code-block/code-block.tsx" }, { "name": "CodeHighlighted", "description": "The same component as `CodeBlock`, under another name.", "props": [ { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "code", "type": "string", "required": false, "default": "", "description": "The code to show." }, { "name": "collapseAfter", "type": "number", "required": false, "default": "24", "description": "Collapse beyond this many lines (24 by default; 0 never collapses)." }, { "name": "copy", "type": "boolean", "required": false, "default": "true", "description": "Hide the copy circle." }, { "name": "highlightLines", "type": "number[]", "required": false, "default": "[]", "description": "1-based line numbers to highlight." }, { "name": "lang", "type": "CodeLang", "required": false, "default": "ts", "description": "The language of the code, for highlighting." }, { "name": "lineNumbers", "type": "boolean", "required": false, "default": null, "description": "Shows line numbers." }, { "name": "surface", "type": "\"well\" | \"plain\"", "required": false, "default": "well", "description": "On a filled well (`well`) or on the panel itself (`plain`)." }, { "name": "tabs", "type": "CodeTab[]", "required": false, "default": null, "description": "Several versions: \"Python · Node · curl\", shown as pill tabs." }, { "name": "title", "type": "ReactNode", "required": false, "default": null, "description": "A file name in the title bar." }, { "name": "wrap", "type": "boolean", "required": false, "default": "false", "description": "Long lines wrap instead of scrolling sideways: code in a narrow column (a model's response)." } ], "file": "src/components/code-block/code-block.tsx" }, { "name": "JsonView", "description": "A folding JSON tree: copy any path, highlight a search. For request and response bodies.", "props": [ { "name": "value", "type": "unknown", "required": true, "default": null, "description": "The data to show as formatted JSON." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultDepth", "type": "number", "required": false, "default": "2", "description": "Levels open at first (2 by default)." }, { "name": "query", "type": "string", "required": false, "default": null, "description": "Highlights keys and values that contain this text." }, { "name": "surface", "type": "\"well\" | \"plain\"", "required": false, "default": "well", "description": "On a filled well (`well`) or on the panel itself (`plain`)." } ], "file": "src/components/code-block/json-view.tsx" } ], "variants": { "CODE_BLOCK_DEFAULT": { "axes": { "surface": {} }, "defaults": {} }, "CODE_BLOCK": { "axes": { "surface": { "well": "A well: radius 14, fill, no ring (default)", "plain": "No surface, inside another well" } }, "defaults": {} }, "JSON_VIEW_DEFAULT": { "axes": { "surface": {} }, "defaults": {} }, "JSON_VIEW": { "axes": { "surface": { "well": "On a well (default)", "plain": "No surface" } }, "defaults": {} } } }, { "entry": "collapsible", "kind": "components", "import": "@logicplanes/kaeso-ui/collapsible", "components": [ { "name": "Accordion", "description": "Collapsible rows separated by hairlines.", "props": [ { "name": "items", "type": "AccordionItem[]", "required": true, "default": null, "description": "The sections, each with a title and its content." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultValue", "type": "string[]", "required": false, "default": null, "description": "The sections open on first render." }, { "name": "multiple", "type": "boolean", "required": false, "default": "false", "description": "Several open at once." } ], "file": "src/components/collapsible/collapsible.tsx" }, { "name": "Collapsible", "description": "A disclosure row: a chevron that rotates in 180ms, a measured height animation.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The content that shows when it is open." }, { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "The heading that opens and closes it." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "hint", "type": "ReactNode", "required": false, "default": null, "description": "Secondary text at the end of the row." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." } ], "file": "src/components/collapsible/collapsible.tsx" } ], "variants": { "COLLAPSIBLE_DEFAULT": { "axes": { "state": {} }, "defaults": {} }, "COLLAPSIBLE": { "axes": { "state": { "closed": "Closed: the chevron points to the row (default)", "open": "Open: the chevron turns down and the content shows" } }, "defaults": {} } } }, { "entry": "combobox", "kind": "components", "import": "@logicplanes/kaeso-ui/combobox", "components": [ { "name": "Autocomplete", "description": "Free text with suggestions.", "props": [ { "name": "suggestions", "type": "string[]", "required": true, "default": null, "description": "Suggestions; the value is free text." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string", "required": false, "default": null, "description": "The text in the input on first render." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "leadingIcon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon at the start of the input." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the text whenever it changes." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "placeholder", "type": "string", "required": false, "default": null, "description": "Text shown while there is no value." }, { "name": "required", "type": "boolean", "required": false, "default": null, "description": "Marks it as required in a form." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": null, "description": "The height of the input." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The text in the input, when you control it." } ], "file": "src/components/combobox/combobox.tsx" }, { "name": "Combobox", "description": "A pill input with a filtered list: matched characters highlighted, async, chips for many, create.", "props": [ { "name": "options", "type": "ComboboxOption[]", "required": true, "default": null, "description": "The options to choose from." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string | string[] | null", "required": false, "default": null, "description": "The value on first render, when the component keeps its own value." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "emptyText", "type": "ReactNode", "required": false, "default": null, "description": "What the empty list says: \"No models match\". Defaults to \"No results\" in the provider's language." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "Shows a quiet progress line at the top of the list (async results)." }, { "name": "multiple", "type": "boolean", "required": false, "default": null, "description": "Allows choosing more than one option; `value` is then a list." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onCreate", "type": "((label: string) => void)", "required": false, "default": null, "description": "Offers \"Create “…”\" when nothing matches exactly." }, { "name": "onInputValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the text typed into the input." }, { "name": "onValueChange", "type": "((value: string | null) => void) | ((value: string[]) => void)", "required": false, "default": null, "description": "Called with the chosen value, or the list of values with `multiple`." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "placeholder", "type": "string", "required": false, "default": null, "description": "Text shown while there is no value." }, { "name": "required", "type": "boolean", "required": false, "default": null, "description": "Marks it as required in a form." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": null, "description": "The height of the input." }, { "name": "value", "type": "string | string[] | null", "required": false, "default": null, "description": "The chosen value, or a list of values with `multiple`, when you control it." } ], "file": "src/components/combobox/combobox.tsx" }, { "name": "Highlight", "description": "Splits a label around the query: matched characters in text, the rest secondary (7.4).", "props": [ { "name": "query", "type": "string", "required": true, "default": null, "description": "The part of the text to highlight, ignoring case." }, { "name": "text", "type": "string", "required": true, "default": null, "description": "The text to show." } ], "file": "src/components/combobox/combobox.tsx" } ], "variants": { "COMBOBOX_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "COMBOBOX": { "axes": { "size": { "sm": "32px", "md": "36px (default)", "lg": "40px", "xl": "48px" } }, "defaults": {} } } }, { "entry": "command-palette", "kind": "components", "import": "@logicplanes/kaeso-ui/command-palette", "components": [ { "name": "CommandPalette", "description": "⌘K: search every page and action; nested pages; async groups with a quiet progress line.", "props": [ { "name": "groups", "type": "CommandGroup[]", "required": true, "default": null, "description": "The commands, in groups with a heading each." }, { "name": "defaultQuery", "type": "string", "required": false, "default": null, "description": "Start with this query (documentation)." }, { "name": "emptyText", "type": "ReactNode", "required": false, "default": null, "description": "Defaults to \"No results\" in the provider's language." }, { "name": "hotkey", "type": "boolean", "required": false, "default": null, "description": "Open with ⌘K / Ctrl+K anywhere (default true)." }, { "name": "inline", "type": "boolean", "required": false, "default": null, "description": "Render without a portal, for documentation and state matrices." }, { "name": "keyHints", "type": "boolean", "required": false, "default": null, "description": "A footer with the keys (↑ ↓ to navigate, ↵ to open, esc to close). Off by default: key hints only where asked for." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "onQueryChange", "type": "((query: string) => void)", "required": false, "default": null, "description": "Called as the query changes, for async groups." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "placeholder", "type": "string", "required": false, "default": null, "description": "Defaults to \"Search or run a command\" in the provider's language." } ], "file": "src/components/command-palette/command-palette.tsx" } ], "variants": { "COMMAND_PALETTE_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "COMMAND_PALETTE": { "axes": { "size": { "md": "640px, 20vh from the top (default)" } }, "defaults": {} } } }, { "entry": "copy-button", "kind": "components", "import": "@logicplanes/kaeso-ui/copy-button", "components": [ { "name": "ClipboardText", "description": "A read-only pill field: the value in mono and a copy circle inside.", "props": [ { "name": "value", "type": "string", "required": true, "default": null, "description": "The text to show and copy." }, { "name": "display", "type": "ReactNode", "required": false, "default": null, "description": "Shown instead of the value (for example a redacted form); the value is still what is copied." }, { "name": "label", "type": "string", "required": false, "default": null, "description": "The tooltip and accessible name. Defaults to \"Copy\" in the provider's language." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": "md", "description": "The height of the field." } ], "file": "src/components/copy-button/copy-button.tsx" }, { "name": "CopyButton", "description": "A circle that copies a value: a check and \"Copied\" for 1.2s.", "props": [ { "name": "value", "type": "string", "required": true, "default": null, "description": "The text that is copied." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "label", "type": "string", "required": false, "default": null, "description": "What is being copied, for the accessible name: \"Copy key\". Defaults to \"Copy\" in the provider's language." }, { "name": "onCopy", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the copied text." }, { "name": "size", "type": "\"md\" | \"xs\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": "md", "description": "The button's height." }, { "name": "variant", "type": "\"secondary\" | \"ghost\"", "required": false, "default": "ghost", "description": "A filled button (`secondary`) or a quiet one (`ghost`)." } ], "file": "src/components/copy-button/copy-button.tsx" }, { "name": "InlineCopyText", "description": "Inline mono text that copies itself on click, with a hover affordance. Never wider than its container: a long value (a user agent, an id) ends in an ellipsis, and its tooltip shows the whole of it until it is copied.", "props": [ { "name": "value", "type": "string", "required": true, "default": null, "description": "The text that is copied." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "What is shown, when it differs from the copied text." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "label", "type": "string", "required": false, "default": null, "description": "The tooltip and accessible name. Defaults to \"Copy\" in the provider's language." }, { "name": "onCopy", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the copied text." } ], "file": "src/components/copy-button/copy-button.tsx" } ], "variants": { "CLIPBOARD_TEXT_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "CLIPBOARD_TEXT": { "axes": { "size": { "sm": "32px", "md": "36px (default)", "lg": "40px" } }, "defaults": {} }, "COPY_BUTTON_DEFAULT": { "axes": { "variant": {}, "size": {} }, "defaults": {} }, "COPY_BUTTON": { "axes": { "variant": { "ghost": "Inside fields and wells (default)", "secondary": "On its own" }, "size": { "xs": "24px circle: inside rows and chips", "sm": "32px circle: toolbars and headers (default)", "md": "36px circle: beside md controls", "lg": "40px circle", "xl": "48px circle" } }, "defaults": {} } } }, { "entry": "data-table", "kind": "components", "import": "@logicplanes/kaeso-ui/data-table", "components": [ { "name": "DataTable", "description": "A table for many rows: sorting, selection, loading and empty states, more rows on demand, and virtual scrolling for long lists.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The table's accessible name." }, { "name": "columns", "type": "ColumnDef[]", "required": true, "default": null, "description": "The columns, as TanStack Table column definitions." }, { "name": "data", "type": "T[]", "required": true, "default": null, "description": "The rows." }, { "name": "activeRowId", "type": "string", "required": false, "default": null, "description": "The id of a row to show as active (open in a sheet)." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "density", "type": "\"default\" | \"compact\" | \"comfortable\"", "required": false, "default": null, "description": "How much room each row gets." }, { "name": "empty", "type": "ReactNode", "required": false, "default": null, "description": "What to show when there are no rows, usually an `Empty`." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "The rows failed to load: the table says so where its rows would be and offers Try again (`onRetry`). Errors are toasts, so the value isn't shown; toast the message where the request fails." }, { "name": "freshRowIds", "type": "ReadonlySet", "required": false, "default": null, "description": "Rows that just arrived (a live list): each shows a fill that fades out over a second." }, { "name": "getRowId", "type": "((row: T) => string)", "required": false, "default": null, "description": "Returns a row's stable id, for selection and keys." }, { "name": "hasMore", "type": "boolean", "required": false, "default": null, "description": "Whether more rows can be loaded." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "Shows skeleton rows while the first page loads." }, { "name": "loadingMore", "type": "boolean", "required": false, "default": null, "description": "Shows that more rows are loading." }, { "name": "manualSorting", "type": "boolean", "required": false, "default": null, "description": "Sorting happens on the server: the data arrives sorted." }, { "name": "onLoadMore", "type": "(() => void)", "required": false, "default": null, "description": "Called to load the next rows." }, { "name": "onRetry", "type": "(() => void)", "required": false, "default": null, "description": "Shows a Retry button when loading failed." }, { "name": "onRowClick", "type": "((row: T) => void)", "required": false, "default": null, "description": "Called when a row is clicked; rows then show that they can be opened." }, { "name": "onSelectionChange", "type": "((selection: RowSelectionState) => void)", "required": false, "default": null, "description": "Called with the selected rows." }, { "name": "onSortingChange", "type": "((sorting: SortingState) => void)", "required": false, "default": null, "description": "Called with the new sort order." }, { "name": "ref", "type": "Ref", "required": false, "default": null, "description": "A ref to the outer element." }, { "name": "rowMenu", "type": "((row: T) => ReactNode)", "required": false, "default": null, "description": "Items for a row's context menu (right-click)." }, { "name": "selectable", "type": "boolean", "required": false, "default": null, "description": "Adds a checkbox to every row." }, { "name": "selection", "type": "RowSelectionState", "required": false, "default": null, "description": "The selected rows, when you control them." }, { "name": "sorting", "type": "SortingState", "required": false, "default": null, "description": "The sort order, when you control it." }, { "name": "stickyFirstColumn", "type": "boolean", "required": false, "default": null, "description": "Keeps the first column in view while scrolling sideways." }, { "name": "virtualizeAbove", "type": "number", "required": false, "default": null, "description": "Above this many rows, only the visible rows are rendered." } ], "file": "src/components/data-table/data-table.tsx" } ], "variants": { "DATA_TABLE_DEFAULT": { "axes": { "density": {} }, "defaults": {} }, "DATA_TABLE": { "axes": { "density": { "compact": "36px rows", "default": "40px rows (default)", "comfortable": "48px rows" } }, "defaults": {} } } }, { "entry": "date-picker", "kind": "components", "import": "@logicplanes/kaeso-ui/date-picker", "components": [ { "name": "DatePicker", "description": "A pill showing the date; a popover with the calendar and a typed ISO field.", "props": [ { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "Names the trigger when there is no `label`: \"Expires\". What it shows (the date, or the placeholder) becomes its description." }, { "name": "aria-labelledby", "type": "string", "required": false, "default": null, "description": "Names the trigger by the elements with these ids, as `aria-label` does." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "Date | null", "required": false, "default": null, "description": "The chosen day on first render." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "disabledDays", "type": "((date: Date) => boolean)", "required": false, "default": null, "description": "Returns `true` for days that can't be chosen." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "onValueChange", "type": "((value: Date | null) => void)", "required": false, "default": null, "description": "Called with the chosen day, or `null` when it is cleared." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "placeholder", "type": "string", "required": false, "default": null, "description": "Shown without a date. Defaults to \"Pick a date\" (\"Pick a range\" for a range) in the provider's language." }, { "name": "required", "type": "boolean", "required": false, "default": null, "description": "Marks it as required in a form." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": null, "description": "The height of the field." }, { "name": "value", "type": "Date | null", "required": false, "default": null, "description": "The chosen day, when you control it." }, { "name": "weekStartsOn", "type": "0 | 4 | 1 | 2 | 3 | 5 | 6", "required": false, "default": null, "description": "The first day of the week, from 0 (Sunday) to 6 (Saturday); the language decides by default." } ], "file": "src/components/date-picker/date-picker.tsx" }, { "name": "DateRangePicker", "description": "A pill showing the range (\"Oct 1 – Oct 12\") or its preset (\"Last 30 days\"); presets first, then the months and typed ISO fields. A preset applies at once; days chosen in the popover apply with Apply.", "props": [ { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "Names the trigger when there is no `label`: \"Expires\". What it shows (the date, or the placeholder) becomes its description." }, { "name": "aria-labelledby", "type": "string", "required": false, "default": null, "description": "Names the trigger by the elements with these ids, as `aria-label` does." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "DateRange | null", "required": false, "default": null, "description": "The chosen range on first render." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "disabledDays", "type": "((date: Date) => boolean)", "required": false, "default": null, "description": "Returns `true` for days that can't be chosen." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "onValueChange", "type": "((value: DateRange | null, details: { preset: string | null; }) => void)", "required": false, "default": null, "description": "A preset's range, or the days chosen with Apply; `preset` is the preset's id (\"Last 7 days\"), `null` for chosen days." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "placeholder", "type": "string", "required": false, "default": null, "description": "Shown without a date. Defaults to \"Pick a date\" (\"Pick a range\" for a range) in the provider's language." }, { "name": "preset", "type": "string | null", "required": false, "default": null, "description": "The preset the value is, by its id (or label): the trigger shows its name (\"Last 6 months\", \"All time\") and the popover marks it. Set it from where the period lives (the address), with `null` for chosen days. Without it, the trigger names a preset picked here while the range is still that preset's." }, { "name": "presets", "type": "DateRangePreset[]", "required": false, "default": null, "description": "Defaults to the last 24 hours, 7 and 30 days, this month and last month, named in the provider's language." }, { "name": "required", "type": "boolean", "required": false, "default": null, "description": "Marks it as required in a form." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": null, "description": "The height of the field." }, { "name": "value", "type": "DateRange | null", "required": false, "default": null, "description": "The chosen range, when you control it." }, { "name": "weekStartsOn", "type": "0 | 4 | 1 | 2 | 3 | 5 | 6", "required": false, "default": null, "description": "The first day of the week, from 0 (Sunday) to 6 (Saturday); the language decides by default." } ], "file": "src/components/date-picker/date-picker.tsx" }, { "name": "TimeInput", "description": "Hours and minutes as two segments in one pill; arrows step, typing advances.", "props": [ { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "Names the group when there is no `label`. Defaults to \"Time\" in the provider's language." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string", "required": false, "default": null, "description": "The time on first render, as `HH:mm`." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the time as `HH:mm` when a whole time changes: after two digits, on blur, or with the arrows." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "required", "type": "boolean", "required": false, "default": null, "description": "Marks it as required in a form." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": null, "description": "The height of the field." }, { "name": "utc", "type": "boolean", "required": false, "default": null, "description": "Shows \"UTC\" after the time." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "\"HH:MM\" in 24 hours." } ], "file": "src/components/date-picker/time-input.tsx" } ], "variants": { "DATE_PICKER_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "DATE_PICKER": { "axes": { "size": { "sm": "32px", "md": "36px (default)", "lg": "40px" } }, "defaults": {} }, "TIME_INPUT_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "TIME_INPUT": { "axes": { "size": { "sm": "32px: toolbars and compact forms", "md": "36px: the default", "lg": "40px", "xl": "48px: sign-in and setup forms" } }, "defaults": {} } } }, { "entry": "delete-resource", "kind": "blocks", "import": "@logicplanes/kaeso-ui/blocks/delete-resource", "components": [ { "name": "DeleteResource", "description": "Confirms deleting a resource: names the object and the consequence, asks for its name typed, and ends with a danger button.", "props": [ { "name": "consequence", "type": "ReactNode", "required": true, "default": null, "description": "What happens: \"Applications using it will stop authenticating with the gateway.\"" }, { "name": "kind", "type": "string", "required": true, "default": null, "description": "\"project\", \"key\", \"organization\"" }, { "name": "name", "type": "string", "required": true, "default": null, "description": "The resource's name; typed to confirm." }, { "name": "onConfirm", "type": "() => void | Promise", "required": true, "default": null, "description": "Called when the action is confirmed; return a promise to keep the dialog busy until it ends." }, { "name": "confirm", "type": "\"typed\" | \"simple\"", "required": false, "default": "typed", "description": "Asks to type the resource's name (`typed`) or just to confirm (`simple`)." }, { "name": "inline", "type": "boolean", "required": false, "default": null, "description": "Renders in place, without a trigger, for review pages and tests." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "trigger", "type": "ReactElement>", "required": false, "default": null, "description": "The element that opens it." }, { "name": "verb", "type": "string", "required": false, "default": null, "description": "\"Delete\", \"Archive\". Defaults to \"Delete\" in the provider's language." } ], "file": "src/blocks/delete-resource/delete-resource.tsx" } ], "variants": { "DELETE_RESOURCE_DEFAULT": { "axes": { "confirm": {} }, "defaults": {} }, "DELETE_RESOURCE": { "axes": { "confirm": { "typed": "The person types the resource's name (default)", "simple": "A confirm button only, for reversible archives" } }, "defaults": {} } } }, { "entry": "dialog", "kind": "components", "import": "@logicplanes/kaeso-ui/dialog", "components": [ { "name": "AlertDialog", "description": "Confirms an irreversible action: names it, explains the consequence, optionally asks for typed confirmation.", "props": [ { "name": "confirmLabel", "type": "string", "required": true, "default": null, "description": "The confirm label, the verb and object: \"Delete key\"." }, { "name": "description", "type": "ReactNode", "required": true, "default": null, "description": "The practical consequence." }, { "name": "onConfirm", "type": "() => void | Promise", "required": true, "default": null, "description": "Called when the action is confirmed; return a promise to keep the dialog busy until it ends. It closes when the promise resolves and stays open for another try when it rejects, so toast the error there." }, { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "Names the action: \"Delete this key?\"" }, { "name": "cancelLabel", "type": "string", "required": false, "default": null, "description": "Defaults to \"Cancel\" in the provider's language." }, { "name": "confirmText", "type": "string", "required": false, "default": null, "description": "Typed confirmation: the person types this to enable the confirm." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "inline", "type": "boolean", "required": false, "default": null, "description": "Renders in place, without a trigger, for review pages and tests." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "Shows a spinner on the confirm while work runs (also automatic for a promise)." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "tone", "type": "\"warning\" | \"danger\" | \"info\"", "required": false, "default": null, "description": "How serious the confirmation is; `danger` for actions that can't be undone." }, { "name": "trigger", "type": "ReactElement>", "required": false, "default": null, "description": "The element that opens it." } ], "file": "src/components/dialog/dialog.tsx" }, { "name": "Dialog", "description": "A modal dialog: 440 / 560 / 720, radius 20, title, description, body, actions. ⌘Enter submits.", "props": [ { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "The dialog's heading, also its accessible name." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "The dialog's content and actions." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence under the title." }, { "name": "footer", "type": "ReactNode", "required": false, "default": null, "description": "Right-aligned actions: Cancel (secondary) then the primary." }, { "name": "headerStart", "type": "ReactNode", "required": false, "default": null, "description": "A top bar above the title, with this at its start and the close circle at its end (LayerDialog's back button). The title, description and content keep one left edge; `null` keeps the bar with an empty start." }, { "name": "hideClose", "type": "boolean", "required": false, "default": null, "description": "Hide the close circle (rare)." }, { "name": "inline", "type": "boolean", "required": false, "default": null, "description": "Render without a portal and backdrop, for documentation and state matrices." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "onSubmit", "type": "(() => void)", "required": false, "default": null, "description": "⌘Enter calls this (usually the primary action)." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": null, "description": "The dialog's width." }, { "name": "trigger", "type": "ReactElement>", "required": false, "default": null, "description": "The trigger, a single element." } ], "file": "src/components/dialog/dialog.tsx" }, { "name": "LayerDialog", "description": "A stacked dialog: a second layer slides over the first (add model → review values); back returns. The layers below stay as they were. Moving to a layer puts the focus on its first field, or its primary action; Back returns it to the control that opened the layer, scrolled where it was. ⌘/Ctrl+Enter calls onSubmit on every layer.", "props": [ { "name": "layers", "type": "DialogLayer[]", "required": true, "default": null, "description": "The layers, each with its title, content and footer; one shows at a time, and the ones below it stay mounted and hidden." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "hideClose", "type": "boolean", "required": false, "default": null, "description": "Hide the close circle (rare)." }, { "name": "inline", "type": "boolean", "required": false, "default": null, "description": "Render without a portal and backdrop, for documentation and state matrices." }, { "name": "layer", "type": "number", "required": false, "default": null, "description": "The visible layer; layers above the first slide over it." }, { "name": "onLayerChange", "type": "((layer: number) => void)", "required": false, "default": null, "description": "Called with the index of the layer shown." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "onSubmit", "type": "(() => void)", "required": false, "default": null, "description": "⌘/Ctrl+Enter calls this on every layer; pass the action of the layer shown." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": null, "description": "The dialog's width." }, { "name": "trigger", "type": "ReactElement>", "required": false, "default": null, "description": "The trigger, a single element." } ], "file": "src/components/dialog/dialog.tsx" }, { "name": "StepDialog", "description": "A form split into steps, one question at a time, like sign-in: the step's title and fields, Back and Continue, the action on the last step. Enter in a field and ⌘/Ctrl+Enter continue. The dialog takes each step's height: it grows or shrinks 200ms as the step changes, its top stays where it opened, and the new step drifts in from the side it comes from. Within a step it never shrinks, so nothing jumps while a step's content changes; it grows once if the content does. Steps a few pixels apart share one height. Continue and Back move the focus into the step they show (its first field; without one, the primary action, or Back when the last step destroys), and a screen reader hears which step it is.", "props": [ { "name": "onSubmit", "type": "() => void", "required": true, "default": null, "description": "Called when the last step is submitted." }, { "name": "steps", "type": "DialogStep[]", "required": true, "default": null, "description": "The steps, each with its title, content and whether it can be continued." }, { "name": "submitLabel", "type": "string", "required": true, "default": null, "description": "The last step's button: \"Create key\"." }, { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "What the whole dialog does: \"Create key\"." }, { "name": "defaultStep", "type": "number", "required": false, "default": "0", "description": "Start on this step (state matrices)." }, { "name": "inline", "type": "boolean", "required": false, "default": null, "description": "Render without a portal and backdrop, for documentation and state matrices." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": "sm", "description": "The dialog's width." }, { "name": "submitting", "type": "boolean", "required": false, "default": null, "description": "Shows that the submission is underway." }, { "name": "tone", "type": "\"danger\" | \"default\"", "required": false, "default": "default", "description": "`danger` for an action that destroys something: the last step's button turns red." } ], "file": "src/components/dialog/step-dialog.tsx" } ], "variants": { "ALERT_DIALOG_DEFAULT": { "axes": { "tone": {} }, "defaults": {} }, "ALERT_DIALOG": { "axes": { "tone": { "danger": "Destructive (default)", "warning": "Risky but reversible", "info": "Neutral confirmation" } }, "defaults": {} }, "DIALOG_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "DIALOG": { "axes": { "size": { "sm": "440px: confirmations, short forms", "md": "560px: forms (default)", "lg": "720px: two columns, previews" } }, "defaults": {} }, "LAYER_DIALOG_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "LAYER_DIALOG": { "axes": { "size": { "sm": "440px: confirmations, short forms", "md": "560px: forms (default)", "lg": "720px: two columns, previews" } }, "defaults": {} } } }, { "entry": "display-options", "kind": "components", "import": "@logicplanes/kaeso-ui/display-options", "components": [ { "name": "DisplayOptions", "description": "Display options: view, grouping and ordering, toggles, properties.", "props": [ { "name": "footer", "type": "ReactNode", "required": false, "default": null, "description": "Content at the bottom of the options, such as a reset button." }, { "name": "inline", "type": "boolean", "required": false, "default": null, "description": "Render the panel inline (documentation and state matrices)." }, { "name": "properties", "type": "{ options: { value: string; label: string; }[]; value: string[]; onChange: (v: string[]) => void; }", "required": false, "default": null, "description": "The properties shown for each item." }, { "name": "rows", "type": "DisplayOptionsRow[]", "required": false, "default": null, "description": "Rows of choices, such as grouping and ordering." }, { "name": "toggles", "type": "DisplayOptionsToggle[]", "required": false, "default": null, "description": "Switches, such as showing archived items." }, { "name": "trigger", "type": "\"secondary\" | \"ghost\"", "required": false, "default": "secondary", "description": "The look of the button that opens the options." }, { "name": "view", "type": "{ value: string; options: SegmentedOption[]; onChange: (v: string) => void; }", "required": false, "default": null, "description": "A choice between views, such as list and board." } ], "file": "src/components/display-options/display-options.tsx" } ], "variants": { "DISPLAY_OPTIONS_DEFAULT": { "axes": { "trigger": {} }, "defaults": {} }, "DISPLAY_OPTIONS": { "axes": { "trigger": { "secondary": "A raised circle with a ring, like page-header buttons (default)", "ghost": "A ghost circle" } }, "defaults": {} } } }, { "entry": "empty", "kind": "components", "import": "@logicplanes/kaeso-ui/empty", "components": [ { "name": "Empty", "description": "An empty state: a title, one sentence, one or two actions. No icon, no illustration.", "props": [ { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "What is missing, in a few words." }, { "name": "actions", "type": "ReactNode", "required": false, "default": null, "description": "One primary and at most one secondary action." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "One sentence that says what to do, and an action." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence: what is absent and the next step." }, { "name": "size", "type": "\"md\" | \"lg\" | \"compact\"", "required": false, "default": "lg", "description": "How much room it takes: a whole page (`lg`), a section (`md`) or a row (`compact`)." } ], "file": "src/components/empty/empty.tsx" } ], "variants": { "EMPTY_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "EMPTY": { "axes": { "size": { "lg": "Centered in a panel (default)", "md": "Inside a section", "compact": "Inside tables and lists" } }, "defaults": {} } } }, { "entry": "field", "kind": "components", "import": "@logicplanes/kaeso-ui/field", "components": [ { "name": "Field", "description": "The aria wiring a control needs, whether it sits in a or wraps itself in one through its label/description/error props. In the second case the ids are derived here exactly as Field derives them, so the label, help and error name the control.", "props": [ { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "The error message: it marks the field invalid and is read out with the description, but isn't drawn under the field, so show it in a toast too." }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control inside, so the label points to it." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Marks the field invalid without a message." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The field's label." }, { "name": "required", "type": "boolean", "required": false, "default": "false", "description": "Marks the field as required." } ], "file": "src/components/field/field.tsx" }, { "name": "Fieldset", "description": "A group of fields under one legend.", "props": [ { "name": "legend", "type": "ReactNode", "required": true, "default": null, "description": "The heading of the group of fields." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the heading." } ], "file": "src/components/field/field.tsx" } ], "variants": { "FIELD_DEFAULT": { "axes": { "layout": {} }, "defaults": {} }, "FIELD": { "axes": { "layout": { "vertical": "Label above the control (default)", "horizontal": "Label in a 240px column on the left, from 768px" } }, "defaults": {} } } }, { "entry": "filter-chip", "kind": "components", "import": "@logicplanes/kaeso-ui/filter-chip", "components": [ { "name": "FilterChip", "description": "A filter as one pill: \"Status is 2xx ×\", each part opening a menu.", "props": [ { "name": "operator", "type": "string", "required": true, "default": null, "description": "\"is\", \"is not\", \"is any of\"" }, { "name": "property", "type": "ReactNode", "required": true, "default": null, "description": "\"Status\"" }, { "name": "value", "type": "ReactNode", "required": true, "default": null, "description": "The value, as shown: \"2xx\", or \"2 models\"." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValuesOpen", "type": "boolean", "required": false, "default": null, "description": "Open the value menu when the chip appears: a filter just added asks for its value at once." }, { "name": "multiple", "type": "boolean", "required": false, "default": null, "description": "Several values may be chosen." }, { "name": "onOperatorChange", "type": "((operator: string) => void)", "required": false, "default": null, "description": "Called with the chosen comparison." }, { "name": "onRemove", "type": "(() => void)", "required": false, "default": null, "description": "Called when the filter is removed." }, { "name": "onSelectedChange", "type": "((selected: string[]) => void)", "required": false, "default": null, "description": "Called with the chosen values." }, { "name": "operators", "type": "string[]", "required": false, "default": null, "description": "The comparisons people can choose, such as “is” and “is not”." }, { "name": "propertyIcon", "type": "IconSvgElement", "required": false, "default": null, "description": "The icon of the property the filter applies to." }, { "name": "selected", "type": "string[]", "required": false, "default": "[]", "description": "The chosen values." }, { "name": "values", "type": "FilterChipChoice[]", "required": false, "default": null, "description": "Choices for the value menu." } ], "file": "src/components/filter-chip/filter-chip.tsx" } ], "variants": { "FILTER_CHIP_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "FILTER_CHIP": { "axes": { "size": { "sm": "32px: toolbars (default)" } }, "defaults": {} } } }, { "entry": "filter-row", "kind": "components", "import": "@logicplanes/kaeso-ui/filter-row", "components": [ { "name": "FilterRow", "description": "The row between a page's header and its list or table: pill tabs at the start, filters at the end. It grows with its content instead of keeping a toolbar's 48px, and on a narrow screen the filters wrap under the tabs, at the start. The tabs keep their own arrow keys; Left and Right move across the filters only, which form their own toolbar.", "props": [ { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "Filters at the end of the row: a `Select`, a `SearchInput`. At the start when there are no tabs." }, { "name": "filtersLabel", "type": "string", "required": false, "default": null, "description": "The name of the filters' toolbar. Defaults to \"Filters\" in the provider's language." }, { "name": "size", "type": "\"md\" | \"inset\"", "required": false, "default": null, "description": "By default `inset` in a settings column and `md` elsewhere." }, { "name": "tabs", "type": "ReactNode", "required": false, "default": null, "description": "Pill tabs at the start of the row (`PillTabs`). In a settings column their first label lines up with the title." } ], "file": "src/components/filter-row/filter-row.tsx" } ], "variants": { "FILTER_ROW_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "FILTER_ROW": { "axes": { "size": { "md": "Under a page header on an edge-to-edge page: 24px sides, 48px tall on one line like a toolbar", "inset": "In a settings column: 24px under the header (with the column's 8px), 16px above the list or table (chosen automatically)" } }, "defaults": {} } } }, { "entry": "flow", "kind": "components", "import": "@logicplanes/kaeso-ui/flow", "components": [ { "name": "Flow", "description": "A node-and-connector diagram: the route \"app → Kaeso → provider / model\".", "props": [ { "name": "columns", "type": "FlowNode[][]", "required": true, "default": null, "description": "Columns of nodes, left to right." }, { "name": "edges", "type": "[string, string][]", "required": true, "default": null, "description": "Connections as [from, to] node ids." }, { "name": "animated", "type": "boolean", "required": false, "default": "false", "description": "Dots that travel along the connectors. Off by default; never on loaded pages that need calm." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name of the diagram: what it shows, such as \"Route of checkout requests\". Defaults to \"Flow diagram\"; screen readers hear each node and each connection after it." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "node", "type": "\"pill\" | \"box\"", "required": false, "default": "pill", "description": "The shape of each step: a pill or a box." } ], "file": "src/components/flow/flow.tsx" } ], "variants": { "FLOW_DEFAULT": { "axes": { "node": {} }, "defaults": {} }, "FLOW": { "axes": { "node": { "pill": "A raised pill (default)", "box": "A rounded-14 box with a description line" } }, "defaults": {} } } }, { "entry": "heading", "kind": "components", "import": "@logicplanes/kaeso-ui/heading", "components": [ { "name": "Heading", "description": "Heading levels map to the title tokens (4.3).", "props": [ { "name": "balance", "type": "boolean", "required": false, "default": "true", "description": "Balances the lines of a heading that wraps." }, { "name": "level", "type": "4 | 1 | 2 | 3 | 5 | 6", "required": false, "default": null, "description": "The heading level in the document, independent of its size." }, { "name": "size", "type": "\"title\" | \"display\" | \"title-sm\" | \"title-lg\"", "required": false, "default": "title-sm", "description": "The type style, from `title-sm` to `display`." } ], "file": "src/components/heading/heading.tsx" } ], "variants": { "HEADING_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "HEADING": { "axes": { "size": { "title-sm": "17/24: section, dialog and sheet titles", "title": "20/28: empty states, compact page titles", "title-lg": "28/34: settings page titles, auth screens", "display": "40/44: showcase headings, the setup screen" } }, "defaults": {} } } }, { "entry": "icon", "kind": "components", "import": "@logicplanes/kaeso-ui/icon", "components": [ { "name": "Icon", "description": "The one way to draw an icon: Hugeicons Stroke Rounded in currentColor.", "props": [ { "name": "icon", "type": "IconSvgElement", "required": true, "default": null, "description": "A Hugeicons free (Stroke Rounded) icon, from `@hugeicons/core-free-icons` or `icons` in `@logicplanes/kaeso-ui`." }, { "name": "label", "type": "string", "required": false, "default": null, "description": "When set, the icon is announced with this name; otherwise it is decorative and hidden." }, { "name": "size", "type": "\"md\" | \"xs\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": "sm", "description": "The icon's size on the type scale." } ], "file": "src/components/icon/icon.tsx" } ], "variants": { "ICON_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "ICON": { "axes": { "size": { "xs": "14px, 1.75 stroke: chips, xs controls, inline hints", "sm": "16px, 1.5 stroke: the default in controls and menus", "md": "18px, 1.5 stroke: sidebar items, lg controls", "lg": "20px, 1.5 stroke: xl controls, empty states", "xl": "24px, 1.5 stroke: rare, large moments" } }, "defaults": {} } } }, { "entry": "icon-button", "kind": "components", "import": "@logicplanes/kaeso-ui/icon-button", "components": [ { "name": "IconButton", "description": "A circle with an icon, a required name, and a tooltip that says it.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The accessible name, also shown as the tooltip. Required." }, { "name": "icon", "type": "IconSvgElement", "required": true, "default": null, "description": "The icon; give the button an `aria-label`." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "disabledReason", "type": "string", "required": false, "default": null, "description": "Why it is disabled, shown as a tooltip; it stays focusable so people can read it." }, { "name": "href", "type": "string", "required": false, "default": null, "description": "Makes it a link to this address." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "Shows that work is underway and ignores clicks until it ends." }, { "name": "shortcut", "type": "string[] | string[][]", "required": false, "default": null, "description": "A shortcut shown in the tooltip." }, { "name": "size", "type": "\"md\" | \"xs\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": "sm", "description": "The diameter, from `xs` (24px) to `xl` (44px)." }, { "name": "tooltip", "type": "boolean", "required": false, "default": "true", "description": "Turn the tooltip off (rare: when a visible label sits next to it)." }, { "name": "tooltipSide", "type": "\"top\" | \"bottom\" | \"left\" | \"right\"", "required": false, "default": "top", "description": "Where the tooltip with its name appears." }, { "name": "variant", "type": "\"danger\" | \"secondary\" | \"primary\" | \"ghost\" | \"quiet\" | \"soft\" | \"danger-secondary\"", "required": false, "default": "ghost", "description": "The look, as on `Button`." } ], "file": "src/components/icon-button/icon-button.tsx" } ], "variants": { "ICON_BUTTON_DEFAULT": { "axes": { "variant": {}, "size": {} }, "defaults": {} }, "ICON_BUTTON": { "axes": { "variant": { "ghost": "Toolbar and row actions (default)", "quiet": "Secondary text that darkens on hover: inside fields", "secondary": "Raised circles with a ring: page-header buttons", "soft": "A filled circle", "primary": "The view's one primary action, as an icon", "danger": "Destructive", "danger-secondary": "Destructive, quieter" }, "size": { "xs": "24px circle: inside rows and chips", "sm": "32px circle: toolbars and headers (default)", "md": "36px circle: beside md controls", "lg": "40px circle", "xl": "48px circle" } }, "defaults": {} } } }, { "entry": "input", "kind": "components", "import": "@logicplanes/kaeso-ui/input", "components": [ { "name": "Input", "description": "A pill text field with the secondary material and the field focus. Takes label, description and error.", "props": [ { "name": "align", "type": "\"start\" | \"end\"", "required": false, "default": null, "description": "Text alignment of the value; numbers align to the end with tabular digits." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "leadingIcon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon before the text." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "prefix", "type": "ReactNode", "required": false, "default": null, "description": "Text before the value: \"https://\"." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": "sm", "description": "The height of the input." }, { "name": "suffix", "type": "ReactNode", "required": false, "default": null, "description": "Text after the value: \"USD\", \"/ min\"." }, { "name": "trailing", "type": "ReactNode", "required": false, "default": null, "description": "Any trailing element (a button, a Kbd)." } ], "file": "src/components/input/input.tsx" }, { "name": "InputGroup", "description": "Joins an input with buttons or text before or after it into one pill.", "props": [ { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns off every control in the group." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows the whole group as invalid." }, { "name": "leadingIcon", "type": "boolean", "required": false, "default": null, "description": "Leading content is an icon: the left padding drops by 2px (optical)." }, { "name": "readOnly", "type": "boolean", "required": false, "default": null, "description": "Shows the value without letting people change it." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": "md", "description": "The height of the group." }, { "name": "trailingButton", "type": "boolean", "required": false, "default": null, "description": "Trailing content is a button: the right padding drops so the circle sits concentric in the pill." } ], "file": "src/components/input/input-group.tsx" }, { "name": "NumberInput", "description": "Numbers that stay exact: right-aligned tabular digits, a unit, stepper circles on hover, thousands separators on blur, and a decimal string value.", "props": [ { "name": "align", "type": "\"start\" | \"end\"", "required": false, "default": "end", "description": "Text alignment of the value; numbers align to the end with tabular digits." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string", "required": false, "default": "", "description": "The number on first render, as text." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "hideStepper", "type": "boolean", "required": false, "default": null, "description": "Hide the stepper circles." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "leadingIcon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon before the text." }, { "name": "max", "type": "string", "required": false, "default": null, "description": "The highest number allowed." }, { "name": "min", "type": "string", "required": false, "default": null, "description": "The lowest number allowed." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the number as text, as typed." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "prefix", "type": "ReactNode", "required": false, "default": null, "description": "Text before the value: \"https://\"." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": null, "description": "The height of the input." }, { "name": "step", "type": "string", "required": false, "default": "1", "description": "Step for the stepper and arrow keys, as a decimal string." }, { "name": "suffix", "type": "ReactNode", "required": false, "default": null, "description": "Text after the value: \"USD\", \"/ min\"." }, { "name": "trailing", "type": "ReactNode", "required": false, "default": null, "description": "Any trailing element (a button, a Kbd)." }, { "name": "unit", "type": "string", "required": false, "default": null, "description": "Unit after the value: \"USD\", \"tokens\", \"/ min\"." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The exact value as a decimal string (\"12.50\"). Never a float." } ], "file": "src/components/input/number-input.tsx" }, { "name": "OTPInput", "description": "Six rounded-14 cells for TOTP codes, over one accessible input: paste fills every cell, Backspace moves back, the browser can offer the code.", "props": [ { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string", "required": false, "default": "", "description": "The code on first render." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "length", "type": "number", "required": false, "default": "6", "description": "How many characters the code has." }, { "name": "onComplete", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called once every cell is filled." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the code as it is typed." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The size of each character's box." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The code typed so far, when you control it." } ], "file": "src/components/input/otp-input.tsx" }, { "name": "SearchInput", "description": "Search: a leading icon, a clear circle when filled, an optional shortcut hint. Escape clears.", "props": [ { "name": "align", "type": "\"start\" | \"end\"", "required": false, "default": null, "description": "Text alignment of the value; numbers align to the end with tabular digits." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "onClear", "type": "(() => void)", "required": false, "default": null, "description": "Called when the clear button is pressed." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "placeholder", "type": "string", "required": false, "default": null, "description": "Defaults to \"Search\" in the provider's language." }, { "name": "shortcut", "type": "string[]", "required": false, "default": null, "description": "A shortcut hint shown while empty: `[\"mod\", \"k\"]` or `[\"/\"]`." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": "sm", "description": "The height of the input." }, { "name": "trailing", "type": "ReactNode", "required": false, "default": null, "description": "Any trailing element (a button, a Kbd)." } ], "file": "src/components/input/input.tsx" }, { "name": "SensitiveInput", "description": "Masked by default with an eye circle to reveal. Monospace when revealed, never autocompleted (secrets), paste-friendly, Caps Lock hint for passwords.", "props": [ { "name": "align", "type": "\"start\" | \"end\"", "required": false, "default": null, "description": "Text alignment of the value; numbers align to the end with tabular digits." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultRevealed", "type": "boolean", "required": false, "default": "false", "description": "Start revealed." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "kind", "type": "\"password\" | \"secret\"", "required": false, "default": "secret", "description": "A password (never revealed once saved) or a secret such as an API key." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "leadingIcon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon before the text." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "prefix", "type": "ReactNode", "required": false, "default": null, "description": "Text before the value: \"https://\"." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": null, "description": "The height of the input." }, { "name": "suffix", "type": "ReactNode", "required": false, "default": null, "description": "Text after the value: \"USD\", \"/ min\"." } ], "file": "src/components/input/sensitive-input.tsx" }, { "name": "TagInput", "description": "Removable tags in a field: Enter, comma and paste split; Backspace removes the last tag.", "props": [ { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string[]", "required": false, "default": null, "description": "The tags on first render." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onValueChange", "type": "((value: string[]) => void)", "required": false, "default": null, "description": "Called with the tags whenever one is added or removed." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "placeholder", "type": "string", "required": false, "default": null, "description": "Text shown while there is no value." }, { "name": "required", "type": "boolean", "required": false, "default": null, "description": "Marks it as required in a form." }, { "name": "separators", "type": "string[]", "required": false, "default": null, "description": "Characters that end a tag, besides Enter." }, { "name": "validate", "type": "((tag: string) => string | true)", "required": false, "default": null, "description": "Return true for a valid tag, or a message saying what is wrong. Invalid tags stay, marked with a danger ring, and show the message as their tooltip (and to a screen reader); errors are never drawn under the field, so toast it too when someone submits." }, { "name": "value", "type": "string[]", "required": false, "default": null, "description": "The tags, when you control them." } ], "file": "src/components/input/tag-input.tsx" }, { "name": "Textarea", "description": "A multi-line field: radius 14 (multi-line text cannot be a pill), the same material and states as Input.", "props": [ { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "maxRows", "type": "number", "required": false, "default": null, "description": "Lines before it scrolls." }, { "name": "mono", "type": "boolean", "required": false, "default": null, "description": "Uses the monospace font, for code and JSON." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "resize", "type": "\"auto\" | \"vertical\"", "required": false, "default": null, "description": "Grows with its content (`auto`) or can be resized by hand (`vertical`)." } ], "file": "src/components/input/textarea.tsx" } ], "variants": { "INPUT_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "INPUT_GROUP_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "INPUT_GROUP": { "axes": { "size": { "sm": "32px: toolbars and compact forms", "md": "36px: the default", "lg": "40px", "xl": "48px: sign-in and setup forms" } }, "defaults": {} }, "INPUT": { "axes": { "size": { "sm": "32px: toolbars and compact forms", "md": "36px: the default", "lg": "40px", "xl": "48px: sign-in and setup forms" } }, "defaults": {} }, "NUMBER_INPUT_DEFAULT": { "axes": { "align": {} }, "defaults": {} }, "NUMBER_INPUT": { "axes": { "align": { "end": "Right-aligned tabular digits (default)", "start": "Left-aligned" } }, "defaults": {} }, "OTP_INPUT_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "OTP_INPUT": { "axes": { "size": { "md": "48px cells (default)", "sm": "40px cells" } }, "defaults": {} }, "SENSITIVE_INPUT_DEFAULT": { "axes": { "kind": {} }, "defaults": {} }, "SENSITIVE_INPUT": { "axes": { "kind": { "secret": "Provider keys and tokens: never autocompleted (default)", "password": "Passwords: browser password managers allowed, Caps Lock hint" } }, "defaults": {} }, "TAG_INPUT_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "TAG_INPUT": { "axes": { "size": { "md": "36px at one row; grows as tags wrap (default)" } }, "defaults": {} }, "TEXTAREA_DEFAULT": { "axes": { "resize": {} }, "defaults": {} }, "TEXTAREA": { "axes": { "resize": { "auto": "Grows with its content to 8 lines, then scrolls (default)", "vertical": "People can drag it taller" } }, "defaults": {} } } }, { "entry": "kaeso", "kind": "components", "import": "@logicplanes/kaeso-ui/kaeso", "components": [ { "name": "ConversationView", "description": "A model conversation from a request log: role captions, prose, tool calls and results, reasoning, images, refusals.", "props": [ { "name": "messages", "type": "ConversationMessage[]", "required": true, "default": null, "description": "The conversation, message by message." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "density", "type": "\"default\" | \"compact\"", "required": false, "default": "default", "description": "How much room each message gets." }, { "name": "footer", "type": "ReactNode", "required": false, "default": null, "description": "Content after the last message, such as a composer." }, { "name": "markdown", "type": "boolean", "required": false, "default": "false", "description": "Draws text, reasoning and prose tool results as Markdown (safe: raw HTML stays text). The renderer loads the first time it is needed." } ], "file": "src/components/kaeso/conversation.tsx" }, { "name": "EffectiveAccess", "description": "What someone can do, at a glance: a row per group with the granted rights in words (\"Every right\", \"None\", or their names) and how many of the group's rights that is, under the roles it comes from. The detail, with a source per right, is RightsMatrix in read-only mode.", "props": [ { "name": "groups", "type": "RightsGroup[]", "required": true, "default": null, "description": "The same groups as RightsMatrix; only `granted`, `label` and `code` are read." }, { "name": "action", "type": "ReactNode", "required": false, "default": null, "description": "An action after the rows, such as a button that opens every right." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name of the list." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "sources", "type": "RightSource[]", "required": false, "default": null, "description": "What the access comes from, as chips above the rows: the member's roles." } ], "file": "src/components/kaeso/effective-access.tsx" }, { "name": "EnvironmentSnippet", "description": "The gateway's base URL and a key placeholder to copy, with snippets per SDK.", "props": [ { "name": "baseUrl", "type": "string", "required": true, "default": null, "description": "The gateway's address." }, { "name": "apiKey", "type": "string", "required": false, "default": "$KAESO_API_KEY", "description": "What stands in for the key: the real key right after creation, a placeholder elsewhere." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "model", "type": "string", "required": false, "default": null, "description": "A model id for the snippet." } ], "file": "src/components/kaeso/moments.tsx" }, { "name": "KeyDisplay", "description": "A redacted key: mono 13 with its state dot, copy of the redacted form, and its access.", "props": [ { "name": "redacted", "type": "string", "required": true, "default": null, "description": "The redacted key as the API returns it: sk-kso-AbC123…wxyz" }, { "name": "access", "type": "\"both\" | \"inference\" | \"platform\"", "required": false, "default": null, "description": "\"Inference\", \"Platform\", or both." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "copy", "type": "boolean", "required": false, "default": "true", "description": "Hide the copy circle." }, { "name": "state", "type": "KeyState", "required": false, "default": "active", "description": "The key's state; disabled, expired and archived keys are shown dimmed." } ], "file": "src/components/kaeso/identity.tsx" }, { "name": "LimitMeter", "description": "A limit: its kind, scope and window, hard or soft, the meter with alert ticks, and when it resets.", "props": [ { "name": "kind", "type": "LimitKind", "required": true, "default": null, "description": "What is limited: requests, tokens or spend, and over which period." }, { "name": "limit", "type": "number", "required": true, "default": null, "description": "The limit." }, { "name": "scope", "type": "ReactNode", "required": true, "default": null, "description": "\"Project\", \"Key ci-runner\", \"Member Ada\"." }, { "name": "used", "type": "number", "required": true, "default": null, "description": "How much is used." }, { "name": "valueLabel", "type": "ReactNode", "required": true, "default": null, "description": "Formatted values: \"$32.10 of $50.00\"." }, { "name": "window", "type": "ReactNode", "required": true, "default": null, "description": "\"Per minute\", \"Per month\"." }, { "name": "alerts", "type": "number[]", "required": false, "default": "[0.8]", "description": "Alert thresholds as ratios." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "hard", "type": "boolean", "required": false, "default": "true", "description": "Whether requests are refused at the limit (`true`) or only alerted (`false`)." }, { "name": "resets", "type": "ReactNode", "required": false, "default": null, "description": "\"Resets in 12 days\"." } ], "file": "src/components/kaeso/usage.tsx" }, { "name": "ModelLabel", "description": "A model: provider mark, display name, then its id in mono, capability icons with tooltips. Recognition over recall. Never wider than its container: the id gives way first, ending in an ellipsis, and goes when fewer than a few of its characters would show (a short id shows whole or not at all); the name ends in an ellipsis last. On a phone the capability icons give way (the model's sheet lists them), where they were clipped at the row's edge.", "props": [ { "name": "model", "type": "string", "required": true, "default": null, "description": "The model id, in mono: after the name, quieter, or alone when there's no name." }, { "name": "provider", "type": "string", "required": true, "default": null, "description": "The provider id, such as `openai` or `anthropic`." }, { "name": "capabilities", "type": "Capability[]", "required": false, "default": "[]", "description": "What the model can do, shown as small marks after its name." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The display name, first." } ], "file": "src/components/kaeso/identity.tsx" }, { "name": "ProviderBadge", "description": "A provider's mark on a quiet tile, in the text color so it follows the theme; a letter for providers without one.", "props": [ { "name": "provider", "type": "string", "required": true, "default": null, "description": "The provider id, such as `openai` or `anthropic`." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": "md", "description": "The badge's size." }, { "name": "withName", "type": "boolean", "required": false, "default": null, "description": "Writes the provider's name next to its mark." } ], "file": "src/components/kaeso/identity.tsx" }, { "name": "ProviderCard", "description": "A provider and how this place reaches it: its mark, name and connection, the key in use, and the actions to connect, replace or remove one.", "props": [ { "name": "connected", "type": "boolean", "required": true, "default": null, "description": "Whether requests can reach the provider." }, { "name": "provider", "type": "string", "required": true, "default": null, "description": "The provider id, such as `openai` or `anthropic`." }, { "name": "status", "type": "ReactNode", "required": true, "default": null, "description": "Where the key comes from, or what's missing: \"The organization's key\", \"No key yet\"." }, { "name": "actions", "type": "ReactNode", "required": false, "default": null, "description": "Buttons: one primary at most." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "detail", "type": "ReactNode", "required": false, "default": null, "description": "A line under the provider's name, such as how many keys it has." }, { "name": "keyLabel", "type": "ReactNode", "required": false, "default": null, "description": "The key: its name and last four characters, and when it was last used." } ], "file": "src/components/kaeso/identity.tsx" }, { "name": "RequestTimeline", "description": "A bar of time to first byte against the total: 240px (default), 160px in a cell, or the width of its container (`full`) in an inspector. Under it each time sits over its label, so the line of times never wraps and a label that runs long in a language wraps under its own time: never cut, and the same height whatever the times are.", "props": [ { "name": "totalMs", "type": "number", "required": true, "default": null, "description": "The total time, in milliseconds." }, { "name": "ttfbMs", "type": "number", "required": true, "default": null, "description": "The time to the first byte, in milliseconds." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "width", "type": "\"full\" | 240 | 160", "required": false, "default": "240", "description": "The width of the bar in pixels, or the full width." } ], "file": "src/components/kaeso/identity.tsx" }, { "name": "RightsMatrix", "description": "Rights by group, for a role, a member or a key. Edit mode: a checkbox per right and per group (mixed when some are granted), requirements kept (granting \"edit\" grants \"view\"; withdrawing \"view\" withdraws \"edit\"), each right's needs said under it, and arrow keys moving between checkboxes. Read-only mode: a mark per right and the roles that grant it. Rows keep their size whatever their state. Fits a sheet and a phone.", "props": [ { "name": "groups", "type": "RightsGroup[]", "required": true, "default": null, "description": "The rights, by category, with who holds each." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name of the matrix." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "onChange", "type": "((code: string, granted: boolean) => void)", "required": false, "default": null, "description": "The right the person toggled. With requirements, prefer `onRightsChange`, which has every change at once." }, { "name": "onRightsChange", "type": "((changes: RightChange[]) => void)", "required": false, "default": null, "description": "Every change one toggle makes, the toggled right first, then what it required or what required it." }, { "name": "originLabels", "type": "Partial>", "required": false, "default": null, "description": "What the origin column says: `{ preset: \"From Developer\" }`. Defaults to \"From role\", \"Added\" and \"Removed\" in the provider's language." }, { "name": "readOnly", "type": "boolean", "required": false, "default": null, "description": "No checkboxes: a mark per right and the roles that grant it." }, { "name": "searchable", "type": "boolean", "required": false, "default": null, "description": "A search field above the groups that filters rights by name, code, description or group." } ], "file": "src/components/kaeso/rights.tsx" }, { "name": "RolePicker", "description": "Choosing a role: built-in roles first, then custom ones under their own caption, each with its one-sentence description. A role the person can't give stays in the list, disabled, with the reason under it and in its tooltip, so nobody wonders where it went.", "props": [ { "name": "roles", "type": "RoleOption[]", "required": true, "default": null, "description": "The roles to choose from." }, { "name": "appearance", "type": "\"list\" | \"select\"", "required": false, "default": "list", "description": "A list with each role's description, or a compact select." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "fullWidth", "type": "boolean", "required": false, "default": null, "description": "Select only: fill the container." }, { "name": "label", "type": "string", "required": false, "default": null, "description": "The select's visible label; a list is named by `aria-label` or the step around it." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the chosen role's id." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The height of the control." }, { "name": "value", "type": "string | null", "required": false, "default": null, "description": "The chosen role's id, when you control it." } ], "file": "src/components/kaeso/role-picker.tsx" }, { "name": "SecretReveal", "description": "The one-time secret: calm, centered, certain. The secret on a well (selected on click), a large \"Copy key\" that becomes \"Copied\" without changing size, a plain warning, and snippets that use it.", "props": [ { "name": "baseUrl", "type": "string", "required": true, "default": null, "description": "The gateway's address, for the code snippet that uses the key." }, { "name": "secret", "type": "string", "required": true, "default": null, "description": "The full secret, shown once." }, { "name": "apiKey", "type": "string", "required": false, "default": "$KAESO_API_KEY", "description": "What stands in for the key: the real key right after creation, a placeholder elsewhere." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "model", "type": "string", "required": false, "default": null, "description": "A model id for the code snippet." }, { "name": "name", "type": "ReactNode", "required": false, "default": null, "description": "The key's name, for the heading." }, { "name": "onCopied", "type": "(() => void)", "required": false, "default": null, "description": "Called when the secret was copied." }, { "name": "snippets", "type": "false | CodeTab[]", "required": false, "default": null, "description": "What follows the secret: the SDK snippets for calling models (default), other snippets (a key for the Platform API), or none (`false`)." } ], "file": "src/components/kaeso/moments.tsx" }, { "name": "StatusCode", "description": "An HTTP status: the code in mono, in its class color (with its phrase in a tooltip).", "props": [ { "name": "code", "type": "number", "required": true, "default": null, "description": "The HTTP status code." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "showText", "type": "boolean", "required": false, "default": null, "description": "Writes the status's name next to its code." } ], "file": "src/components/kaeso/identity.tsx" }, { "name": "UsageBreakdown", "description": "A stacked bar of token kinds with the numbers under it, in the fixed series mapping.", "props": [ { "name": "tokens", "type": "Partial>", "required": true, "default": null, "description": "Tokens by kind: input, output, cache reads and writes, reasoning." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." } ], "file": "src/components/kaeso/usage.tsx" } ], "variants": { "CONVERSATION_DEFAULT": { "axes": { "density": {} }, "defaults": {} }, "CONVERSATION": { "axes": { "density": { "default": "24px between turns (default)", "compact": "16px, inside sheets" } }, "defaults": {} }, "EFFECTIVE_ACCESS_DEFAULT": { "axes": { "layout": {} }, "defaults": {} }, "EFFECTIVE_ACCESS": { "axes": { "layout": { "rows": "A row per group: its name, what is granted in words, and how many (default)" } }, "defaults": {} }, "IDENTITY_DEFAULT": { "axes": { "provider": {} }, "defaults": {} }, "IDENTITY": { "axes": { "provider": { "sm": "16px, inside table cells", "md": "20px (default)", "lg": "28px", "xl": "40px: a provider's own page or card" } }, "defaults": {} }, "MOMENTS_DEFAULT": { "axes": { "secret": {} }, "defaults": {} }, "MOMENTS": { "axes": { "secret": { "md": "The one-time secret on a well" } }, "defaults": {} }, "RIGHTS_MATRIX_DEFAULT": { "axes": { "origin": {}, "mode": {} }, "defaults": {} }, "RIGHTS_MATRIX": { "axes": { "origin": { "preset": "Comes from the role", "added": "Added on top of the role", "removed": "Removed from the role", "none": "Not granted" }, "mode": { "edit": "Checkboxes, group toggles and requirement hints (default)", "readOnly": "A mark per right and, under it, the roles that grant it" } }, "defaults": {} }, "ROLE_PICKER_DEFAULT": { "axes": { "appearance": {} }, "defaults": {} }, "ROLE_PICKER": { "axes": { "appearance": { "list": "Every role as a row with its description, built-in then custom (default): invites and role changes", "select": "A pill that opens the roles: filters, table rows and tight forms" } }, "defaults": {} }, "USAGE_DEFAULT": { "axes": { "limit": {} }, "defaults": {} }, "USAGE": { "axes": { "limit": { "hard": "Requests over the limit are refused", "soft": "Over the limit only alerts" } }, "defaults": {} } } }, { "entry": "kbd", "kind": "components", "import": "@logicplanes/kaeso-ui/kbd", "components": [ { "name": "Kbd", "description": "One key cap: 20px tall, 11/500 Inter, radius 6, fill and ring.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "A key name (`mod`, `shift`, `k`, `enter`) or any text." }, { "name": "tone", "type": "\"default\" | \"onInk\"", "required": false, "default": "default", "description": "On the panel (`default`) or on an ink surface such as a tooltip (`onInk`)." } ], "file": "src/components/kbd/kbd.tsx" }, { "name": "KbdSequence", "description": "A shortcut: `⌘ K`, or a sequence like `G then L`.", "props": [ { "name": "keys", "type": "string[] | string[][]", "required": true, "default": null, "description": "Chords are arrays pressed together; the outer list is pressed in order: `[[\"g\"], [\"l\"]]` → G then L." }, { "name": "tone", "type": "\"default\" | \"onInk\"", "required": false, "default": "default", "description": "On the panel (`default`) or on an ink surface such as a tooltip (`onInk`)." } ], "file": "src/components/kbd/kbd.tsx" } ], "variants": { "KBD_DEFAULT": { "axes": { "tone": {} }, "defaults": {} }, "KBD": { "axes": { "tone": { "default": "On panels and raised surfaces", "onInk": "Inside ink surfaces (toasts, the selection bar)" } }, "defaults": {} } } }, { "entry": "key-value", "kind": "components", "import": "@logicplanes/kaeso-ui/key-value", "components": [ { "name": "KeyValue", "description": "Label and value pairs (13 secondary label, 14 value), copyable values. Side by side for sheets; label above value in columns (`grid`) where a sheet is wide enough for two or more to a row. A text value that doesn't fit ends in an ellipsis and shows whole in a tooltip.", "props": [ { "name": "items", "type": "KeyValueItem[]", "required": true, "default": null, "description": "The pairs to show." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "columns", "type": "4 | 2 | 3", "required": false, "default": "2", "description": "The grid layout's items to a row, from 480px of its container's width." }, { "name": "layout", "type": "\"grid\" | \"stacked\" | \"columns\"", "required": false, "default": "columns", "description": "Keys beside values in columns, in a grid, or stacked above them." } ], "file": "src/components/key-value/key-value.tsx" } ], "variants": { "KEY_VALUE_DEFAULT": { "axes": { "layout": {}, "columns": {} }, "defaults": {} }, "KEY_VALUE": { "axes": { "layout": { "columns": "Label and value side by side (default)", "stacked": "Label above value, for narrow sheets", "grid": "Label above value, in columns: a wide sheet's details, two or more to a row" }, "columns": { "2": "Two to a row from 480px; one below (default)", "3": "Three to a row from 480px; two below", "4": "Four to a row from 480px, for short values (counts, sizes); two below" } }, "defaults": {} } } }, { "entry": "label", "kind": "components", "import": "@logicplanes/kaeso-ui/label", "components": [ { "name": "Label", "description": "The label of a form control.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The label's text." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds a quiet \"Optional\" after the label." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The label's text size." } ], "file": "src/components/label/label.tsx" } ], "variants": { "LABEL_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "LABEL": { "axes": { "size": { "md": "14/500: field labels", "sm": "13/500: compact forms" } }, "defaults": {} } } }, { "entry": "layout", "kind": "components", "import": "@logicplanes/kaeso-ui/layout", "components": [ { "name": "Grid", "description": "A responsive grid.", "props": [ { "name": "align", "type": "\"start\" | \"end\" | \"baseline\" | \"stretch\" | \"center\"", "required": false, "default": "center", "description": "How items line up within their cells." }, { "name": "as", "type": "ElementType", "required": false, "default": null, "description": "The element or component to render as, such as `section` or `ul`." }, { "name": "columns", "type": "4 | 1 | 2 | 3 | 6", "required": false, "default": "2", "description": "The number of columns." }, { "name": "gap", "type": "0 | 24 | 20 | 32 | 40 | 4 | 2 | 6 | 8 | 12 | 16 | 48 | 64", "required": false, "default": "16", "description": "The space between items, in pixels on the spacing scale." } ], "file": "src/components/layout/layout.tsx" }, { "name": "Inline", "description": "A horizontal row that wraps.", "props": [ { "name": "align", "type": "\"start\" | \"end\" | \"baseline\" | \"stretch\" | \"center\"", "required": false, "default": "center", "description": "How items line up across the row." }, { "name": "as", "type": "ElementType", "required": false, "default": null, "description": "The element or component to render as, such as `section` or `ul`." }, { "name": "gap", "type": "0 | 24 | 20 | 32 | 40 | 4 | 2 | 6 | 8 | 12 | 16 | 48 | 64", "required": false, "default": "16", "description": "The space between items, in pixels on the spacing scale." }, { "name": "justify", "type": "\"start\" | \"end\" | \"center\" | \"between\"", "required": false, "default": null, "description": "How items are spread along the main axis." }, { "name": "wrap", "type": "boolean", "required": false, "default": "true", "description": "Lets items wrap onto the next line." } ], "file": "src/components/layout/layout.tsx" }, { "name": "Stack", "description": "A vertical stack.", "props": [ { "name": "align", "type": "\"start\" | \"end\" | \"baseline\" | \"stretch\" | \"center\"", "required": false, "default": "center", "description": "How items line up across the column." }, { "name": "as", "type": "ElementType", "required": false, "default": null, "description": "The element or component to render as, such as `section` or `ul`." }, { "name": "gap", "type": "0 | 24 | 20 | 32 | 40 | 4 | 2 | 6 | 8 | 12 | 16 | 48 | 64", "required": false, "default": "16", "description": "The space between items, in pixels on the spacing scale." }, { "name": "justify", "type": "\"start\" | \"end\" | \"center\" | \"between\"", "required": false, "default": null, "description": "How items are spread along the main axis." } ], "file": "src/components/layout/layout.tsx" } ], "variants": { "LAYOUT_DEFAULT": { "axes": { "align": {}, "justify": {}, "columns": {} }, "defaults": {} }, "LAYOUT": { "axes": { "align": { "start": "Align to the start", "center": "Center on the cross axis", "end": "Align to the end", "baseline": "Align text baselines", "stretch": "Stretch" }, "justify": { "start": "Pack to the start", "center": "Center", "end": "Pack to the end", "between": "Space between" }, "columns": { "1": "One column", "2": "Two columns from 768px", "3": "Three columns from 768px", "4": "Two, then four from 1024px", "6": "Three, then six from 1024px" } }, "defaults": {} } } }, { "entry": "link", "kind": "components", "import": "@logicplanes/kaeso-ui/link", "components": [ { "name": "Link", "description": "A link. Router links come from `LinkProvider`.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The link's text." }, { "name": "href", "type": "string", "required": true, "default": null, "description": "The address the link goes to." }, { "name": "external", "type": "boolean", "required": false, "default": null, "description": "Opens in a new tab, adds rel and a 14px ↗. Detected from the href when not set." }, { "name": "variant", "type": "\"inline\" | \"quiet\" | \"standalone\"", "required": false, "default": "inline", "description": "Underlined in text (`inline`), quiet in lists (`quiet`) or on its own line with an arrow (`standalone`)." } ], "file": "src/components/link/link.tsx" } ], "variants": { "LINK_DEFAULT": { "axes": { "variant": {} }, "defaults": {} }, "LINK": { "axes": { "variant": { "inline": "Inside prose: text color with a quiet underline that turns solid on hover", "quiet": "Navigation-style links in footers and metadata; no underline until hover", "standalone": "A link on its own line (“Team overview ›”)" } }, "defaults": {} } } }, { "entry": "list", "kind": "components", "import": "@logicplanes/kaeso-ui/list", "components": [ { "name": "GroupHeader", "description": "A quiet caption row above its group: title, count and a disclosure chevron, set in from the edges like the rows. No band: space separates the groups, and the + circle appears with hover or focus.", "props": [ { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "The group's name." }, { "name": "active", "type": "boolean", "required": false, "default": null, "description": "Holds the list's one tab stop: Tab reaches this header's toggle and no other row. Set by `List`." }, { "name": "addLabel", "type": "string", "required": false, "default": null, "description": "The + circle's name. Defaults to \"Add\" in the provider's language." }, { "name": "collapsed", "type": "boolean", "required": false, "default": null, "description": "Whether the group is collapsed." }, { "name": "count", "type": "number", "required": false, "default": null, "description": "How many items the group has." }, { "name": "first", "type": "boolean", "required": false, "default": null, "description": "The list's first row (no hairline above it in a card)." }, { "name": "glyph", "type": "ReactNode", "required": false, "default": null, "description": "A mark before the name, such as a status dot." }, { "name": "indent", "type": "boolean", "required": false, "default": null, "description": "In a selectable list, line the title up with the row titles after the checkbox column." }, { "name": "index", "type": "number", "required": false, "default": null, "description": "The header's position in the list, for keyboard navigation." }, { "name": "onAdd", "type": "(() => void)", "required": false, "default": null, "description": "Shows an Add button and is called when it is pressed." }, { "name": "onFocus", "type": "(() => void)", "required": false, "default": null, "description": "Called when the header's toggle or its add button gets focus." }, { "name": "onToggle", "type": "(() => void)", "required": false, "default": null, "description": "Called when the group is collapsed or expanded." } ], "file": "src/components/list/list.tsx" }, { "name": "List", "description": "The console list: 44px rows on the panel, no lines, metadata on the right, keyboard-first. An ARIA grid of one-cell rows with one tab stop: arrows move between rows, Space selects, Enter opens, and the right arrow reaches a row's actions.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The list's accessible name." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force-row", "type": "string", "required": false, "default": null, "description": "Force a state on the first row for state matrices: hover, focus, selected." }, { "name": "density", "type": "\"default\" | \"compact\"", "required": false, "default": "default", "description": "How much room each row gets." }, { "name": "empty", "type": "ReactNode", "required": false, "default": null, "description": "Shown when there are no rows and the list isn't loading: usually an `Empty` (`size=\"md\"` in a settings column, where it sits inside the list's card; `size=\"compact\"` on an edge-to-edge page)." }, { "name": "groups", "type": "ListGroup[]", "required": false, "default": null, "description": "…rows under group headers." }, { "name": "idWidth", "type": "48 | 64 | 80 | 96 | 120", "required": false, "default": null, "description": "A fixed width for the id column when ids differ in length, so titles align. By default the id takes its own width." }, { "name": "items", "type": "ListItemData[]", "required": false, "default": null, "description": "Rows without groups, or…" }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "Loading rows shaped like items, while the rows aren't known yet." }, { "name": "onOpen", "type": "((item: ListItemData) => void)", "required": false, "default": null, "description": "Called when a row is opened with a click or Enter. Enter with ⌘ or Ctrl is left to the surrounding form." }, { "name": "onSelectedChange", "type": "((selected: Set) => void)", "required": false, "default": null, "description": "Called with the selected rows; rows then get checkboxes." }, { "name": "selectable", "type": "boolean", "required": false, "default": null, "description": "Selection: checkboxes appear on hover, and on every row once something is selected." }, { "name": "selected", "type": "Set", "required": false, "default": null, "description": "The ids of the selected rows." }, { "name": "selectionActions", "type": "ReactNode", "required": false, "default": null, "description": "Actions in the floating selection bar." }, { "name": "selectionBar", "type": "boolean", "required": false, "default": "true", "description": "The floating selection bar; off where the host shows the count itself, as in a dialog." }, { "name": "virtualizeAbove", "type": "number", "required": false, "default": "100", "description": "Virtualize above this many rows (100)." } ], "file": "src/components/list/list.tsx" }, { "name": "ListRow", "description": "One row: checkbox, glyph, id, title, subtitle, metadata, date, avatar, hover actions.", "props": [ { "name": "item", "type": "ListItemData", "required": true, "default": null, "description": "The row's data." }, { "name": "active", "type": "boolean", "required": false, "default": null, "description": "Holds the list's one tab stop: Tab reaches this row and no other. Set by `List`." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "density", "type": "\"default\" | \"compact\"", "required": false, "default": "default", "description": "How much room the row gets." }, { "name": "depth", "type": "0 | 1", "required": false, "default": "0", "description": "Indents a child row under its parent." }, { "name": "idWidth", "type": "48 | 64 | 80 | 96 | 120", "required": false, "default": null, "description": "The width of the id column in pixels, so ids line up." }, { "name": "index", "type": "number", "required": false, "default": null, "description": "The row's position, for keyboard navigation." }, { "name": "lastChild", "type": "boolean", "required": false, "default": null, "description": "Marks the last child of a parent, for the connecting line." }, { "name": "narrow", "type": "boolean", "required": false, "default": "false", "description": "The list is narrow (a phone): the title, the subtitle and the metadata with the date are lines of their own." }, { "name": "onFocus", "type": "(() => void)", "required": false, "default": null, "description": "Called when the row gets focus." }, { "name": "onOpen", "type": "(() => void)", "required": false, "default": null, "description": "Called when the row is opened." }, { "name": "onSelect", "type": "(() => void)", "required": false, "default": null, "description": "Called when the row is selected or unselected." }, { "name": "selectable", "type": "boolean", "required": false, "default": null, "description": "Shows the row's checkbox." }, { "name": "selected", "type": "boolean", "required": false, "default": null, "description": "Marks the row as selected." }, { "name": "selecting", "type": "boolean", "required": false, "default": null, "description": "Shows checkboxes on every row while some are selected." } ], "file": "src/components/list/list.tsx" }, { "name": "SelectionAction", "description": "An action pill for the selection bar, drawn like the toast's action. `danger` colors the label for destructive actions.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The action's label." }, { "name": "danger", "type": "boolean", "required": false, "default": null, "description": "Marks a destructive action." }, { "name": "icon", "type": "IconSvgElement", "required": false, "default": null, "description": "The action's icon." }, { "name": "onClick", "type": "(() => void)", "required": false, "default": null, "description": "Called when the action is chosen." } ], "file": "src/components/list/list.tsx" }, { "name": "SelectionBar", "description": "The floating capsule with the selection count and its actions: the toast's material (an ink capsule on white, graphite on black), so the two bottom bars of the console read as one family.", "props": [ { "name": "count", "type": "number", "required": true, "default": null, "description": "How many items are selected." }, { "name": "onClear", "type": "() => void", "required": true, "default": null, "description": "Called when the selection is cleared." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "The actions for the selected items." } ], "file": "src/components/list/list.tsx" } ], "variants": { "LIST_DEFAULT": { "axes": { "density": {} }, "defaults": {} }, "LIST": { "axes": { "density": { "default": "44px rows (default)", "compact": "36px rows" } }, "defaults": {} } } }, { "entry": "loader", "kind": "components", "import": "@logicplanes/kaeso-ui/loader", "components": [ { "name": "Loader", "description": "A status region with the spinner and a label: \"Saving provider…\", or a page or region that is loading. Its place is kept while it waits out `delay`, so nothing moves when it shows.", "props": [ { "name": "delay", "type": "number | boolean", "required": false, "default": null, "description": "Waits before the spinner and its label show, so quick work shows nothing: `true` for the library's 300ms (`useDelayedLoading`), or milliseconds. None by default." }, { "name": "hideLabel", "type": "boolean", "required": false, "default": null, "description": "Keeps `label` for assistive technology only, where the page around it already says what is happening." }, { "name": "label", "type": "string", "required": false, "default": null, "description": "Shown beside the spinner (\"Saving provider…\"); without one, \"Loading\" is announced in the provider's language." }, { "name": "loading", "type": "boolean", "required": false, "default": "true", "description": "Whether the work is underway; true by default. With `delay` and `minDuration`, it times the spinner." }, { "name": "minDuration", "type": "number", "required": false, "default": null, "description": "Once shown, they stay at least this many milliseconds: 400 with a delay, 0 without." }, { "name": "size", "type": "\"md\" | \"xs\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": "sm", "description": "The loader's size on the type scale." }, { "name": "tone", "type": "\"secondary\" | \"tertiary\" | \"current\"", "required": false, "default": null, "description": "The spinner's and the label's color: `secondary` by default." } ], "file": "src/components/loader/status.tsx" }, { "name": "Spinner", "description": "Kaeso's spinner: three routes on a ring, the lead in full color and the two behind it fading, advancing a third of a turn per 800ms beat on the pulse easing. Only the svg turns (a composited transform). With reduced motion it holds still and the light passes from route to route instead. The routes are one 84° arc, turned 120° and 240°, with 36° between them, so the gaps stay open at 12px. The turns, the fill and a 1.5px stroke that keeps its width at every size come from kaeso.css. It takes the current color: in a button, the button's.", "props": [ { "name": "label", "type": "string", "required": false, "default": null, "description": "Announced to assistive technology; omit when the surrounding control already says it is busy." }, { "name": "size", "type": "\"md\" | \"xs\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": "sm", "description": "The spinner's size on the type scale." } ], "file": "src/components/loader/loader.tsx" } ], "variants": { "LOADER_DEFAULT": { "axes": { "size": {}, "tone": {} }, "defaults": {} }, "LOADER": { "axes": { "size": { "xs": "14px: xs controls", "sm": "16px: buttons, toasts, labels (default)", "md": "20px: xl buttons", "lg": "24px: a region loading", "xl": "32px: a page loading" }, "tone": { "secondary": "Secondary text (default)", "tertiary": "Tertiary text, the quietest: a page loading", "current": "The text color around it" } }, "defaults": {} }, "SPINNER_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "SPINNER": { "axes": { "size": { "xs": "14px: xs controls", "sm": "16px: buttons, toasts, labels (default)", "md": "20px: xl buttons", "lg": "24px: a region loading", "xl": "32px: a page loading" } }, "defaults": {} } } }, { "entry": "logo", "kind": "components", "import": "@logicplanes/kaeso-ui/logo", "components": [ { "name": "Logo", "description": "`` is the lockup; the parts are `Logo.Mark`, `Logo.Icon`, `Logo.Lockup`, `Logo.Wordmark`.", "props": [ { "name": "decorative", "type": "boolean", "required": false, "default": null, "description": "Hides it from assistive technology when the same information is already written next to it." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": "sm", "description": "The logo's height." }, { "name": "title", "type": "string", "required": false, "default": "Kaeso", "description": "The accessible name. Pass `decorative` when the name is visible next to it." } ], "file": "src/components/logo/logo.tsx" } ], "variants": { "LOGO_DEFAULT": { "axes": { "markSize": {}, "lockupSize": {} }, "defaults": {} }, "LOGO": { "axes": { "markSize": { "sm": "20px high: the minimum in interfaces", "md": "24px: compact navigation", "lg": "32px", "xl": "48px: empty and setup screens" }, "lockupSize": { "sm": "28px high (112px wide): the minimum", "md": "32px: headers", "lg": "40px: auth and setup screens" } }, "defaults": {} } } }, { "entry": "markdown", "kind": "components", "import": "@logicplanes/kaeso-ui/markdown", "components": [ { "name": "Markdown", "description": "Markdown, safely: headings, paragraphs, lists, tasks, code fences (CodeBlock), inline code, emphasis, links, quotes, rules and tables. Raw HTML stays text, links open only for http, https and mailto in a new tab, images are links. Long texts show their start until \"Show all\".", "props": [ { "name": "text", "type": "string", "required": true, "default": null, "description": "The Markdown source. Raw HTML in it stays text." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "collapseAfter", "type": "number", "required": false, "default": "24000", "description": "Texts longer than this many characters show their start and \"Show all\" (24,000 by default; 0 never collapses)." }, { "name": "headingLevel", "type": "4 | 1 | 2 | 3 | 5 | 6", "required": false, "default": "3", "description": "The heading level `#` becomes (3 by default: below a page's and a section's own headings)." }, { "name": "size", "type": "\"lg\" | \"body\" | \"small\"", "required": false, "default": "body", "description": "The text size: `small`, `body` or `lg`." }, { "name": "streaming", "type": "boolean", "required": false, "default": "false", "description": "The text is still arriving: nothing collapses, and the tokens aren't cached." }, { "name": "tone", "type": "\"secondary\" | \"default\"", "required": false, "default": "default", "description": "Primary text (`default`) or secondary text (`secondary`)." }, { "name": "trailing", "type": "ReactNode", "required": false, "default": null, "description": "Drawn inline after the last word of a paragraph, heading or list item (never on a line of its own)." }, { "name": "wrapCode", "type": "boolean", "required": false, "default": "false", "description": "Long code lines wrap instead of scrolling sideways (narrow columns)." } ], "file": "src/components/markdown/markdown.tsx" } ], "variants": { "MARKDOWN_DEFAULT": { "axes": { "size": {}, "tone": {} }, "defaults": {} }, "MARKDOWN": { "axes": { "size": { "lg": "15/22 text, 16px between blocks: a model's response, for reading", "body": "14/20 text, 12px between blocks: responses and prompts (default)", "small": "13/18 text, 8px between blocks: reasoning, tool results, side notes" }, "tone": { "default": "Primary text (default)", "secondary": "Quieter text: reasoning summaries and quotes" } }, "defaults": {} } } }, { "entry": "menu", "kind": "components", "import": "@logicplanes/kaeso-ui/menu", "components": [ { "name": "ContextMenu", "description": "A dropdown menu: 16px radius, 34px rows, typeahead, Home/End, loops.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The area that opens the menu on a right click or long press." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "modal", "type": "boolean", "required": false, "default": null, "description": "Blocks the rest of the page while the menu is open." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." } ], "file": "src/components/menu/menu.tsx" }, { "name": "Menubar", "description": "A row of menus, as in a desktop app's title bar.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The menus." }, { "name": "onOpenChange", "type": "((o: boolean) => void)", "required": false, "default": null, "description": "Called when a menu opens or closes." } ], "file": "src/components/menu/menu.tsx" } ], "variants": { "MENU_DEFAULT": { "axes": { "item": {}, "width": {}, "description": {} }, "defaults": {} }, "MENU": { "axes": { "item": { "default": "An action", "danger": "A destructive action: red text, a red tint on highlight" }, "width": { "auto": "220–360px, from its content (default)", "trigger": "As wide as its trigger" }, "description": { "secondary": "The second line of a rich item (default)", "danger": "A second line that warns: an organization scheduled for deletion" } }, "defaults": {} } } }, { "entry": "meter", "kind": "components", "import": "@logicplanes/kaeso-ui/meter", "components": [ { "name": "Meter", "description": "A limit or quota: label and value, a 6px pill track, threshold ticks, a caption.", "props": [ { "name": "value", "type": "number", "required": true, "default": null, "description": "0–1 (or more when over the limit)." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "caption", "type": "ReactNode", "required": false, "default": null, "description": "\"Resets in 12 days\"" }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The label above the bar." }, { "name": "leading", "type": "ReactNode", "required": false, "default": null, "description": "Leading content in the label row (an icon)." }, { "name": "thresholds", "type": "number[]", "required": false, "default": "[]", "description": "Alert thresholds as ratios, drawn as ticks: [0.5, 0.8]." }, { "name": "tone", "type": "\"neutral\" | \"auto\"", "required": false, "default": "auto", "description": "Colors the bar by how full it is (`auto`) or keeps it neutral." }, { "name": "trailing", "type": "ReactNode", "required": false, "default": null, "description": "Content at the end of the label row, such as the value." }, { "name": "valueLabel", "type": "ReactNode", "required": false, "default": null, "description": "\"$32.10 of $50.00\"" } ], "file": "src/components/meter/meter.tsx" }, { "name": "Progress", "description": "Progress for work over a second: a determinate pill, or an indeterminate 2px line.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The progress bar's accessible name." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "value", "type": "number", "required": false, "default": null, "description": "0–1; omit for indeterminate." } ], "file": "src/components/meter/meter.tsx" } ], "variants": { "METER_DEFAULT": { "axes": { "tone": {} }, "defaults": {} }, "METER": { "axes": { "tone": { "auto": "Series 1 until the first alert threshold, warning after, danger at 100% (default)", "neutral": "A plain share" } }, "defaults": {} }, "PROGRESS_DEFAULT": { "axes": { "kind": {} }, "defaults": {} }, "PROGRESS": { "axes": { "kind": { "determinate": "A pill bar with a known amount", "indeterminate": "A 2px line at the top of a container" } }, "defaults": {} } } }, { "entry": "page-header", "kind": "components", "import": "@logicplanes/kaeso-ui/page-header", "components": [ { "name": "PageHeader", "description": "The 52px header of a page: its title, pill tabs, actions. On a phone the tabs move to a row of their own under the title and actions, so the title isn't cut to a few letters and the tabs aren't squeezed beside a button.", "props": [ { "name": "actions", "type": "ReactNode", "required": false, "default": null, "description": "At most one ink button; the rest ghost or raised circles with tooltips." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "icon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon before the title." }, { "name": "start", "type": "ReactNode", "required": false, "default": null, "description": "Before everything: AppFrame.MenuButton, which shows while a wide screen's sidebar is collapsed (on a phone the frame's phone bar opens the navigation)." }, { "name": "tabs", "type": "ReactNode", "required": false, "default": null, "description": "Pill tabs after the title." }, { "name": "title", "type": "ReactNode", "required": false, "default": null, "description": "The page's title (15/600)." } ], "file": "src/components/page-header/page-header.tsx" } ], "variants": { "PAGE_HEADER_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "PAGE_HEADER": { "axes": { "size": { "md": "52px, no bottom line (default); on a phone the tabs take a second row" } }, "defaults": {} } } }, { "entry": "pages", "kind": "blocks", "import": "@logicplanes/kaeso-ui/blocks/pages", "components": [ { "name": "AuthPage", "description": "Sign-in and setup pages: no chrome.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The form." }, { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "The page's heading." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence under the heading." }, { "name": "footer", "type": "ReactNode", "required": false, "default": null, "description": "Content under the form, such as a link to sign up." } ], "file": "src/blocks/pages/pages.tsx" }, { "name": "EmptyPage", "description": "Empty, centered in the panel.", "props": [ { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "What is missing, in a few words." }, { "name": "actions", "type": "ReactNode", "required": false, "default": null, "description": "One primary and at most one secondary action." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "One sentence that says what to do, and an action." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence: what is absent and the next step." }, { "name": "header", "type": "PageHeaderProps", "required": false, "default": null, "description": "The page header's title, description and actions." }, { "name": "size", "type": "\"md\" | \"lg\" | \"compact\"", "required": false, "default": null, "description": "How much room the empty state takes." } ], "file": "src/blocks/pages/pages.tsx" }, { "name": "ListPage", "description": "Header, toolbar, then the list or table edge to edge; the panel scrolls.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The list." }, { "name": "header", "type": "PageHeaderProps", "required": true, "default": null, "description": "The page header's title, description and actions." }, { "name": "sheet", "type": "ReactNode", "required": false, "default": null, "description": "A detail Sheet that keeps the list visible." }, { "name": "toolbar", "type": "ReactNode", "required": false, "default": null, "description": "The filters and display options above the list." } ], "file": "src/blocks/pages/pages.tsx" }, { "name": "OverviewPage", "description": "Big numbers, period controls, a chart on the panel, a breakdown, an optional right column.", "props": [ { "name": "header", "type": "PageHeaderProps", "required": true, "default": null, "description": "The page header's title, description and actions." }, { "name": "metrics", "type": "ReactNode", "required": true, "default": null, "description": "The key numbers at the top." }, { "name": "aside", "type": "ReactNode", "required": false, "default": null, "description": "A side column, under the content on phones." }, { "name": "chart", "type": "ReactNode", "required": false, "default": null, "description": "The main chart." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "Content under the chart." }, { "name": "controls", "type": "ReactNode", "required": false, "default": null, "description": "Controls for the period and grouping." } ], "file": "src/blocks/pages/pages.tsx" } ], "variants": { "PAGES_DEFAULT": { "axes": { "page": {} }, "defaults": {} }, "PAGES": { "axes": { "page": { "list": "Header, toolbar, a full-bleed List", "table": "Header, toolbar, a DataTable edge to edge", "overview": "A metric row, a chart, a breakdown and an optional aside", "empty": "Empty centered in the panel", "auth": "No chrome; a centered 400px column" } }, "defaults": {} } } }, { "entry": "pagination", "kind": "components", "import": "@logicplanes/kaeso-ui/pagination", "components": [ { "name": "Pagination", "description": "Moves through long lists by pages, by cursor, or with a Load more button.", "props": [ { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "hasMore", "type": "boolean", "required": false, "default": null, "description": "Whether there is a next page." }, { "name": "hasPrevious", "type": "boolean", "required": false, "default": null, "description": "Whether there is a previous page." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "Shows that a page is loading." }, { "name": "onLoadMore", "type": "(() => void)", "required": false, "default": null, "description": "Called by the Load more button." }, { "name": "onNext", "type": "(() => void)", "required": false, "default": null, "description": "Called to go to the next page." }, { "name": "onPageChange", "type": "((page: number) => void)", "required": false, "default": null, "description": "Called with the chosen page number." }, { "name": "onPrevious", "type": "(() => void)", "required": false, "default": null, "description": "Called to go to the previous page." }, { "name": "page", "type": "number", "required": false, "default": "1", "description": "pages:" }, { "name": "pageCount", "type": "number", "required": false, "default": "1", "description": "The number of pages, for numbered pages." }, { "name": "variant", "type": "\"cursor\" | \"load-more\" | \"pages\"", "required": false, "default": "load-more", "description": "Numbered pages, previous and next by cursor, or a Load more button." } ], "file": "src/components/pagination/pagination.tsx" } ], "variants": { "PAGINATION_DEFAULT": { "axes": { "variant": {} }, "defaults": {} }, "PAGINATION": { "axes": { "variant": { "load-more": "A “Load more” pill while more rows exist, nothing once all are shown (cursor APIs, default)", "cursor": "Previous and next circles, without a count", "pages": "Page numbers, for lists with a known number of pages" } }, "defaults": {} } } }, { "entry": "playground", "kind": "components", "import": "@logicplanes/kaeso-ui/playground", "components": [ { "name": "CompareGrid", "description": "Columns side by side to compare models: equal widths, a header, a body that scrolls on its own and a footer each.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The grid's accessible name (\"Models\")." }, { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "`CompareGrid.Column` elements, one to four." }, { "name": "active", "type": "number", "required": false, "default": null, "description": "The column on screen on a phone, or scrolled to when the columns don't fit." }, { "name": "addLabel", "type": "string", "required": false, "default": null, "description": "The add circle's name. Defaults to \"Add model\" in the provider's language." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "divider", "type": "\"none\" | \"hairline\"", "required": false, "default": "hairline", "description": "A hairline between columns, or none." }, { "name": "max", "type": "number", "required": false, "default": "4", "description": "Columns at most (4 by default): the add circle is disabled there, with the reason in its tooltip." }, { "name": "onActiveChange", "type": "((index: number) => void)", "required": false, "default": null, "description": "Called with the index of the column in focus." }, { "name": "onAdd", "type": "(() => void)", "required": false, "default": null, "description": "Adds a column: a circle at the end of the last column's header (and in the phone's switcher)." } ], "file": "src/components/playground/compare-grid.tsx" }, { "name": "Composer", "description": "The prompt box: a text box that grows with what is written up to `maxRows`, then scrolls; Send, which becomes Stop while a response streams. Enter sends and Shift Enter adds a line (`submitOn`); ⌘ Enter or Ctrl Enter also sends. On a touch screen Enter adds a line and the button sends.", "props": [ { "name": "actions", "type": "ReactNode", "required": false, "default": null, "description": "Controls at the start of the button row: parameters, clear." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The text box's accessible name (\"Prompt\" by default)." }, { "name": "autoFocus", "type": "boolean", "required": false, "default": null, "description": "Focuses the composer when it appears." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "clearOnSubmit", "type": "boolean", "required": false, "default": "true", "description": "Clears an uncontrolled composer after Send (true by default)." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string", "required": false, "default": "", "description": "The message on first render." }, { "name": "disabled", "type": "boolean", "required": false, "default": "false", "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "loading", "type": "boolean", "required": false, "default": "false", "description": "The prompt is being sent: Send shows a spinner." }, { "name": "maxRows", "type": "number", "required": false, "default": "10", "description": "Lines before the text box scrolls (10 by default)." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onStop", "type": "(() => void)", "required": false, "default": null, "description": "Stop: the button while `streaming`." }, { "name": "onSubmit", "type": "((value: string) => void)", "required": false, "default": null, "description": "Send: the Send button, Enter in the text box (see `submitOn`), or ⌘ Enter (Ctrl Enter). Not called for a prompt that is empty or only spaces, while disabled, sending or streaming, or while an input method is composing." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the message as it is typed." }, { "name": "placeholder", "type": "string", "required": false, "default": null, "description": "Text shown while there is no value." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The composer's height." }, { "name": "stopLabel", "type": "string", "required": false, "default": null, "description": "The stop button's accessible name, shown while a reply streams." }, { "name": "streaming", "type": "boolean", "required": false, "default": "false", "description": "A response is arriving: Send becomes Stop. The text box stays editable for the next prompt." }, { "name": "submitLabel", "type": "string", "required": false, "default": null, "description": "The send button's accessible name." }, { "name": "submitOn", "type": "\"enter\" | \"mod-enter\"", "required": false, "default": "enter", "description": "The key that sends from the text box. `\"enter\"` (default): Enter sends and Shift Enter adds a line; on a touch screen Enter adds a line and the Send button sends. `\"mod-enter\"`: Enter adds a line and only ⌘ Enter (Ctrl Enter) sends. ⌘ Enter and Ctrl Enter send with either." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The message being written, when you control it." } ], "file": "src/components/playground/composer.tsx" }, { "name": "ModelPicker", "description": "A model, picked from the project's catalogue: the provider mark, name and id (ModelLabel), grouped by provider.", "props": [ { "name": "options", "type": "ModelPickerOption[]", "required": true, "default": null, "description": "The models to choose from." }, { "name": "appearance", "type": "\"ghost\" | \"default\"", "required": false, "default": "ghost", "description": "A quiet button (`ghost`) or a filled one (`default`)." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The picker's accessible name (\"Model\" by default)." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string | null", "required": false, "default": null, "description": "The chosen model on first render." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "groupByProvider", "type": "boolean", "required": false, "default": null, "description": "Groups the list by provider (true by default when there are several)." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the chosen model." }, { "name": "placeholder", "type": "string", "required": false, "default": null, "description": "Text shown while there is no value." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "sm", "description": "The button's height." }, { "name": "value", "type": "string | null", "required": false, "default": null, "description": "The chosen model, when you control it." } ], "file": "src/components/playground/model-picker.tsx" }, { "name": "ParameterPanel", "description": "A request's parameters: system instructions, temperature, top P, most output tokens, and, for a model that reasons, reasoning effort and summary. Unset values are the model's defaults; Reset returns to them (instructions stay).", "props": [ { "name": "onValueChange", "type": "(next: PlaygroundParameters) => void", "required": true, "default": null, "description": "Called with the changed parameters." }, { "name": "value", "type": "PlaygroundParameters", "required": true, "default": null, "description": "The parameters, such as temperature and effort." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaults", "type": "Pick", "required": false, "default": null, "description": "What unset shows (temperature 1 and top P 1 unless given): the model's defaults." }, { "name": "disabled", "type": "boolean", "required": false, "default": "false", "description": "Turns off every parameter." }, { "name": "instructions", "type": "boolean", "required": false, "default": "true", "description": "Shows the system instructions field (true by default)." }, { "name": "layout", "type": "\"popover\" | \"panel\"", "required": false, "default": "popover", "description": "Compact inside a popover, or roomier in a side panel." }, { "name": "maxOutputTokensLimit", "type": "number", "required": false, "default": null, "description": "The model's most output tokens: the field's maximum." }, { "name": "reasoning", "type": "boolean | ReasoningEffort[]", "required": false, "default": "false", "description": "The reasoning efforts the model takes, or false (the default) when it doesn't reason: no effort and no summary." }, { "name": "sampling", "type": "boolean", "required": false, "default": "true", "description": "Shows temperature and top P; models that reason often take neither (true by default)." } ], "file": "src/components/playground/parameter-panel.tsx" }, { "name": "ParameterPopover", "description": "ParameterPanel in a 320px popover from a sliders circle (or any trigger).", "props": [ { "name": "onValueChange", "type": "(next: PlaygroundParameters) => void", "required": true, "default": null, "description": "Called with the changed parameters." }, { "name": "value", "type": "PlaygroundParameters", "required": true, "default": null, "description": "The parameters, such as temperature and effort." }, { "name": "align", "type": "\"start\" | \"end\" | \"center\"", "required": false, "default": "end", "description": "How it lines up with what it belongs to." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "defaults", "type": "Pick", "required": false, "default": null, "description": "What unset shows (temperature 1 and top P 1 unless given): the model's defaults." }, { "name": "disabled", "type": "boolean", "required": false, "default": "false", "description": "Turns off the button that opens the parameters." }, { "name": "instructions", "type": "boolean", "required": false, "default": "true", "description": "Shows the system instructions field (true by default)." }, { "name": "maxOutputTokensLimit", "type": "number", "required": false, "default": null, "description": "The model's most output tokens: the field's maximum." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "reasoning", "type": "boolean | ReasoningEffort[]", "required": false, "default": "false", "description": "The reasoning efforts the model takes, or false (the default) when it doesn't reason: no effort and no summary." }, { "name": "sampling", "type": "boolean", "required": false, "default": "true", "description": "Shows temperature and top P; models that reason often take neither (true by default)." }, { "name": "side", "type": "\"top\" | \"bottom\" | \"left\" | \"right\"", "required": false, "default": "bottom", "description": "The side it opens on." }, { "name": "title", "type": "string", "required": false, "default": null, "description": "The popover's title, also its name. Defaults to \"Parameters\" in the provider's language." }, { "name": "trigger", "type": "ReactElement>", "required": false, "default": null, "description": "The button that opens it: a sliders circle named \"Parameters\" by default." } ], "file": "src/components/playground/parameter-panel.tsx" }, { "name": "PromptSuggestions", "description": "Example prompts before a thread starts: up to three lines of plain secondary text that take a quiet fill on hover. No outlines, no icons; leave them out once a prompt is sent.", "props": [ { "name": "onSelect", "type": "(prompt: string) => void", "required": true, "default": null, "description": "Puts the prompt in the composer (or sends it)." }, { "name": "suggestions", "type": "string[]", "required": true, "default": null, "description": "Up to three short prompts; more are left out." }, { "name": "align", "type": "\"start\" | \"center\"", "required": false, "default": "start", "description": "Aligns the suggestions at the start or in the center." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The list's accessible name. Defaults to \"Example prompts\" in the provider's language." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." } ], "file": "src/components/playground/prompt-suggestions.tsx" }, { "name": "ResponseMetrics", "description": "A response's numbers on one line: time to first token, total time, tokens in → out (and reasoning), cost. Tabular figures, labels in tertiary text. While `live`, values not known yet show \"—\" in the room they will take; before any response the line is empty, its height kept.", "props": [ { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "cost", "type": "string | null", "required": false, "default": null, "description": "USD as a decimal string: \"0.004213\"." }, { "name": "duration", "type": "number | null", "required": false, "default": null, "description": "Milliseconds from sending to the last token." }, { "name": "inputTokens", "type": "number | null", "required": false, "default": null, "description": "The tokens sent, once known." }, { "name": "live", "type": "boolean", "required": false, "default": "false", "description": "A response is arriving: values not known yet show a quiet \"—\" in the room they will take." }, { "name": "outputTokens", "type": "number | null", "required": false, "default": null, "description": "The tokens received, once known." }, { "name": "reasoning", "type": "boolean", "required": false, "default": null, "description": "The model reasons: while `live`, the reasoning item waits with a placeholder." }, { "name": "reasoningTokens", "type": "number | null", "required": false, "default": null, "description": "Of the output tokens, those spent reasoning. Shown when given, or when `reasoning` is set." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "sm", "description": "The text size." }, { "name": "startedAt", "type": "number", "required": false, "default": null, "description": "When the request was sent (Date.now()): while live, Total counts up quietly until `duration` arrives." }, { "name": "timeToFirstToken", "type": "number | null", "required": false, "default": null, "description": "Milliseconds from sending to the first token." } ], "file": "src/components/playground/response-metrics.tsx" }, { "name": "ResponseView", "description": "A model's response as it arrives: Markdown text for reading (15/22), the reasoning summary in a \"Thinking\" disclosure (closed by default, live while it streams), and calm states for a stop or a failure. Errors themselves are toasts; the response says only that there is none.", "props": [ { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The response's accessible name (\"GPT-5 response\" in a comparison). Defaults to \"Response\" in the provider's language." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultReasoningOpen", "type": "boolean", "required": false, "default": null, "description": "Whether the reasoning starts expanded." }, { "name": "footer", "type": "ReactNode", "required": false, "default": null, "description": "Under the response: its metrics, actions." }, { "name": "onReasoningOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when the reasoning is expanded or collapsed." }, { "name": "onRetry", "type": "(() => void)", "required": false, "default": null, "description": "Sends the turn again; shown with an error or a stop." }, { "name": "reasoning", "type": "string", "required": false, "default": null, "description": "The reasoning summary so far, as Markdown. A \"Thinking\" disclosure shows it, closed by default." }, { "name": "reasoningDuration", "type": "number", "required": false, "default": null, "description": "How long the model reasoned, in milliseconds: \"Thought for 4.2 s\"." }, { "name": "reasoningOpen", "type": "boolean", "required": false, "default": null, "description": "Whether the reasoning is expanded, when you control it." }, { "name": "status", "type": "\"done\" | \"error\" | \"streaming\" | \"pending\" | \"stopped\"", "required": false, "default": "done", "description": "Where the reply stands: waiting, streaming, done, stopped or failed." }, { "name": "text", "type": "string", "required": false, "default": "", "description": "The output text so far, as Markdown." } ], "file": "src/components/playground/response-view.tsx" }, { "name": "Thread", "description": "A conversation's turns, 32px apart: spacing, not lines or boxes, separates them.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "`UserMessage` and `ResponseView` turns, oldest first." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." } ], "file": "src/components/playground/response-view.tsx" }, { "name": "UserMessage", "description": "A person's turn: their prompt as quiet text that opens the turn, no bubble. A long prompt shows its first lines until \"Show all\".", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The prompt as it was written: plain text, line breaks kept." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The message's accessible name. Defaults to \"Prompt\" in the provider's language." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "maxLines", "type": "0 | 4 | 2 | 3 | 6", "required": false, "default": "4", "description": "Lines shown before \"Show all\" (4 by default; 0 shows everything)." } ], "file": "src/components/playground/response-view.tsx" } ], "variants": { "COMPARE_GRID_DEFAULT": { "axes": { "divider": {} }, "defaults": {} }, "COMPARE_GRID": { "axes": { "divider": { "hairline": "Columns separated by a hairline, edge to edge (default)", "none": "No line between columns: columns that sit in panels of their own" } }, "defaults": {} }, "COMPOSER_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "COMPOSER": { "axes": { "size": { "md": "Text 14/20, 8px around the buttons; the outline concentric with them (16 + 8) (default)", "sm": "The same box starting one line tall: a follow-up field under a thread" } }, "defaults": {} }, "MODEL_PICKER_DEFAULT": { "axes": { "appearance": {} }, "defaults": {} }, "MODEL_PICKER": { "axes": { "appearance": { "ghost": "Transparent until hovered: a column header (default)", "default": "A raised pill with a ring: a form or toolbar" } }, "defaults": {} }, "PARAMETER_PANEL_DEFAULT": { "axes": { "layout": {} }, "defaults": {} }, "PARAMETER_PANEL": { "axes": { "layout": { "popover": "Inside a 320px popover (ParameterPopover) (default)", "panel": "A side panel or sheet: a little more room between groups" } }, "defaults": {} }, "PROMPT_SUGGESTIONS_DEFAULT": { "axes": { "align": {} }, "defaults": {} }, "PROMPT_SUGGESTIONS": { "axes": { "align": { "start": "Rows the composer's width, their text on its text (default)", "center": "Centered under an empty thread's title" } }, "defaults": {} }, "RESPONSE_METRICS_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "RESPONSE_METRICS": { "axes": { "size": { "sm": "12/16: a column footer or under a turn (default)", "md": "13/18: a response on its own" } }, "defaults": {} }, "RESPONSE_VIEW_DEFAULT": { "axes": { "status": {} }, "defaults": {} }, "RESPONSE_VIEW": { "axes": { "status": { "pending": "Sent, nothing back yet: an empty line where the text will start, nothing drawn", "streaming": "Arriving: the text grows, earlier lines never re-wrap; Thinking is live", "done": "Complete (default)", "stopped": "Stopped by the person: the text so far and “Stopped”", "error": "Failed: “No response” and Retry. The error itself is a toast" } }, "defaults": {} } } }, { "entry": "popover", "kind": "components", "import": "@logicplanes/kaeso-ui/popover", "components": [ { "name": "HoverCard", "description": "A preview that opens while the pointer rests on its trigger or the trigger has focus; never the only way to reach what it shows.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The trigger and the card's content." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." } ], "file": "src/components/popover/hover-card.tsx" }, { "name": "Popover", "description": "A floating panel next to its trigger: radius 16, raised; collision-aware.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The trigger and the panel's content." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "trapFocus", "type": "boolean", "required": false, "default": null, "description": "Trap focus only when the popover holds a form." } ], "file": "src/components/popover/popover.tsx" } ], "variants": { "POPOVER_DEFAULT": { "axes": { "padding": {} }, "defaults": {} }, "POPOVER": { "axes": { "padding": { "form": "12px: forms and free content (default)", "list": "6px: lists of rows, concentric with 10px items", "none": "No padding: calendars and custom layouts" } }, "defaults": {} } } }, { "entry": "portal", "kind": "components", "import": "@logicplanes/kaeso-ui/portal", "components": [ { "name": "Portal", "description": "Renders children into document.body after mount. Overlays use Base UI's own portals.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The content to render in the nearest portal container." }, { "name": "container", "type": "HTMLElement | null", "required": false, "default": null, "description": "Defaults to document.body." } ], "file": "src/components/portal/portal.tsx" } ], "variants": { "PORTAL_DEFAULT": { "axes": {}, "defaults": {} }, "PORTAL": { "axes": {}, "defaults": {} } } }, { "entry": "qr-code", "kind": "components", "import": "@logicplanes/kaeso-ui/qr-code", "components": [ { "name": "QRCode", "description": "A QR code drawn as one SVG path: dark modules on white in both themes, with a quiet zone, so cameras read it whatever the console's theme.", "props": [ { "name": "label", "type": "string", "required": true, "default": null, "description": "What it is for, read by screen readers: \"QR code to add Kaeso to an authenticator app\"." }, { "name": "value", "type": "string", "required": true, "default": null, "description": "What the code holds, e.g. an `otpauth://` URI." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "size", "type": "\"md\" | \"lg\"", "required": false, "default": "md", "description": "The code's size." } ], "file": "src/components/qr-code/qr-code.tsx" } ], "variants": { "QR_CODE_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "QR_CODE": { "axes": { "size": { "md": "160px: setup dialogs (default)", "lg": "200px: a page of its own" } }, "defaults": {} } } }, { "entry": "radio", "kind": "components", "import": "@logicplanes/kaeso-ui/radio", "components": [ { "name": "Radio", "description": "A radio button with its label and description, inside a `RadioGroup`.", "props": [ { "name": "value", "type": "string", "required": true, "default": null, "description": "The value this option stands for." }, { "name": "aria-describedby", "type": "string", "required": false, "default": null, "description": "The ids of the elements that describe it." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "aria-labelledby", "type": "string", "required": false, "default": null, "description": "Names the circle by other text, such as the first line of a row whose label holds more." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." } ], "file": "src/components/radio/radio.tsx" }, { "name": "Radio.Circle", "description": "The circle alone: 18px; selected is an ink donut around a panel center.", "props": [ { "name": "value", "type": "string", "required": true, "default": null, "description": "The value this option stands for." }, { "name": "aria-describedby", "type": "string", "required": false, "default": null, "description": "The ids of the elements that describe it." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "aria-labelledby", "type": "string", "required": false, "default": null, "description": "Names the circle by other text, such as the first line of a row whose label holds more." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." } ], "file": "src/components/radio/radio.tsx" }, { "name": "RadioCards", "description": "Choices with descriptions as rows in a settings group.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The cards, one per option." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "aria-labelledby", "type": "string", "required": false, "default": null, "description": "The id of the element that names it, when its label is elsewhere on the page." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultValue", "type": "string", "required": false, "default": null, "description": "The chosen option on first render." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns off every card." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the chosen option." }, { "name": "orientation", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": "vertical", "description": "Lays the items out in a row (`horizontal`) or a column (`vertical`)." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The chosen option, when you control it." } ], "file": "src/components/radio/radio.tsx" } ], "variants": { "RADIO_DEFAULT": { "axes": { "variant": {} }, "defaults": {} }, "RADIO": { "axes": { "variant": { "default": "A list of radios with labels (default)", "cards": "Rows inside a settings group with the radio at the end, for choices with descriptions" } }, "defaults": {} } } }, { "entry": "resource-list", "kind": "blocks", "import": "@logicplanes/kaeso-ui/blocks/resource-list", "components": [ { "name": "ResourceList", "description": "A console list of resources: search, group headers, row actions and a selection bar.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The list's accessible name." }, { "name": "groups", "type": "ListGroup[]", "required": true, "default": null, "description": "The groups of items." }, { "name": "bulkActions", "type": "{ label: string; icon?: IconSvgElement; onClick: (ids: string[]) => void; }[]", "required": false, "default": "[]", "description": "Actions for selected rows: [{label, icon, onClick(ids)}]." }, { "name": "emptyAction", "type": "ReactNode", "required": false, "default": null, "description": "The action shown when there are no items." }, { "name": "emptyDescription", "type": "string", "required": false, "default": null, "description": "The sentence shown when there are no items." }, { "name": "emptyTitle", "type": "string", "required": false, "default": null, "description": "Defaults to \"Nothing here yet\" in the provider's language." }, { "name": "onOpen", "type": "((item: ListItemData) => void)", "required": false, "default": null, "description": "Called when an item is opened." }, { "name": "toolbar", "type": "ReactNode", "required": false, "default": null, "description": "The filters and display options above the list." } ], "file": "src/blocks/resource-list/resource-list.tsx" } ], "variants": { "RESOURCE_LIST_DEFAULT": { "axes": { "grouping": {} }, "defaults": {} }, "RESOURCE_LIST": { "axes": { "grouping": { "grouped": "Rows under group headers (default)", "flat": "One list" } }, "defaults": {} } } }, { "entry": "scroll-area", "kind": "components", "import": "@logicplanes/kaeso-ui/scroll-area", "components": [ { "name": "ScrollArea", "description": "A scroll container with thin scrollbars in the strong line color that show on hover (5.1), its content fading at an edge with more to scroll to.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The content that scrolls." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "Accessible name when the region is focusable." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "orientation", "type": "\"both\" | \"horizontal\" | \"vertical\"", "required": false, "default": "vertical", "description": "The directions it scrolls in." }, { "name": "viewportClassName", "type": "string", "required": false, "default": null, "description": "Classes for the scrolling element, for layout only." } ], "file": "src/components/scroll-area/scroll-area.tsx" } ], "variants": { "SCROLL_AREA_DEFAULT": { "axes": { "orientation": {} }, "defaults": {} }, "SCROLL_AREA": { "axes": { "orientation": { "vertical": "Scrolls up and down; the content fades at an edge with more to scroll to (default)", "horizontal": "Scrolls sideways", "both": "Both directions" } }, "defaults": {} } } }, { "entry": "section", "kind": "components", "import": "@logicplanes/kaeso-ui/section", "components": [ { "name": "AuthLayout", "description": "Sign-in and setup: no chrome, a centered 400px column on the panel with the title and description centered above the form. The wordmark sits top left exactly where the sidebar header puts it in every other layout: as far in as it is down (28px; centered in a 52px row 8px from the top).", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The form." }, { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "The page's heading." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence under the heading." }, { "name": "footer", "type": "ReactNode", "required": false, "default": null, "description": "Content under the form, such as a link to sign up." } ], "file": "src/components/section/section.tsx" }, { "name": "Section", "description": "A section of a page: a title-sm heading with optional description and actions, no frame.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The section's content." }, { "name": "actions", "type": "ReactNode", "required": false, "default": null, "description": "Actions at the end of the heading row." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence under the heading." }, { "name": "spacing", "type": "\"none\" | \"default\"", "required": false, "default": "default", "description": "The space above the section: the default, or none." }, { "name": "title", "type": "ReactNode", "required": false, "default": null, "description": "The section's heading." } ], "file": "src/components/section/section.tsx" }, { "name": "SplitView", "description": "Main content and a 320px aside, separated by space and a subtle vertical line. On wide screens the aside stays in view while the main content scrolls.", "props": [ { "name": "aside", "type": "ReactNode", "required": true, "default": null, "description": "The side column; it moves under the content on phones." }, { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The main content." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." } ], "file": "src/components/section/section.tsx" } ], "variants": { "SECTION_DEFAULT": { "axes": { "spacing": {} }, "defaults": {} }, "SECTION": { "axes": { "spacing": { "default": "48px between sections (default)", "none": "No outer spacing" } }, "defaults": {} } } }, { "entry": "segmented", "kind": "components", "import": "@logicplanes/kaeso-ui/segmented", "components": [ { "name": "Segmented", "description": "Two to five mutually exclusive options: 24h/7d/30d, List/Board, providers.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "The control's accessible name." }, { "name": "options", "type": "SegmentedOption[]", "required": true, "default": null, "description": "The options, as segments." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string", "required": false, "default": null, "description": "The chosen option on first render." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns off every segment." }, { "name": "fullWidth", "type": "boolean", "required": false, "default": null, "description": "Fills the width of its container." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the chosen option." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The control's height." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The chosen option, when you control it." } ], "file": "src/components/segmented/segmented.tsx" } ], "variants": { "SEGMENTED_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "SEGMENTED": { "axes": { "size": { "sm": "32px track, 28px items: toolbars and popovers", "md": "36px track, 32px items (default)" } }, "defaults": {} } } }, { "entry": "select", "kind": "components", "import": "@logicplanes/kaeso-ui/select", "components": [ { "name": "Select", "description": "A pill that opens a list on the menu surface: check on the selected item, groups, typeahead.", "props": [ { "name": "options", "type": "SelectOption[]", "required": true, "default": null, "description": "The options to choose from." }, { "name": "appearance", "type": "\"ghost\" | \"default\" | \"header\"", "required": false, "default": null, "description": "A filled field (`default`), a quiet one for toolbars (`ghost`), or a quiet one in full text colour for column headers (`header`)." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "string | string[] | null", "required": false, "default": null, "description": "The value on first render, when the component keeps its own value." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "error", "type": "ReactNode", "required": false, "default": null, "description": "Errors are toasts, never text under a field: `error` marks the control invalid and stays its description for screen readers, but isn't drawn. Pass `invalid` and toast the message.", "deprecated": true }, { "name": "fullWidth", "type": "boolean", "required": false, "default": null, "description": "Width of the trigger follows its content (default) or fills the container." }, { "name": "icon", "type": "IconSvgElement", "required": false, "default": null, "description": "Leading icon in the trigger." }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Shows it as invalid; pair it with a message that says what to fix." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The visible label." }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": null, "description": "The label above the control (`vertical`) or beside it (`horizontal`)." }, { "name": "multiple", "type": "boolean", "required": false, "default": null, "description": "Allows choosing more than one option; `value` is then a list." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when the list opens or closes." }, { "name": "onValueChange", "type": "((value: string) => void) | ((value: string[]) => void)", "required": false, "default": null, "description": "Called with the chosen value, or the list of values with `multiple`." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether the list is open, when you control it." }, { "name": "optional", "type": "boolean", "required": false, "default": null, "description": "Adds “Optional” to the label, for forms where most fields are required." }, { "name": "placeholder", "type": "ReactNode", "required": false, "default": null, "description": "Defaults to \"Select\" in the provider's language." }, { "name": "required", "type": "boolean", "required": false, "default": null, "description": "Marks it as required in a form." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\" | \"xl\"", "required": false, "default": null, "description": "The height of the field." }, { "name": "value", "type": "string | string[] | null", "required": false, "default": null, "description": "The chosen value, or a list of values with `multiple`, when you control it." } ], "file": "src/components/select/select.tsx" } ], "variants": { "SELECT_DEFAULT": { "axes": { "appearance": {}, "size": {} }, "defaults": {} }, "SELECT": { "axes": { "appearance": { "default": "A raised pill with a ring (default)", "ghost": "Inline in settings rows: “GPT-5 mini (default) ⌄”", "header": "Transparent until hovered, in full text colour: a column header's model" }, "size": { "sm": "32px: settings rows and toolbars", "md": "36px (default)", "lg": "40px", "xl": "48px: sign-in and setup forms" } }, "defaults": {} } } }, { "entry": "separator", "kind": "components", "import": "@logicplanes/kaeso-ui/separator", "components": [ { "name": "Separator", "description": "A 1px line. Use space and tone first; a line only where they cannot separate.", "props": [ { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "A caption in the middle of a horizontal line (\"or\")." }, { "name": "orientation", "type": "\"horizontal\" | \"vertical\"", "required": false, "default": "horizontal", "description": "A horizontal or vertical line." }, { "name": "tone", "type": "\"default\" | \"subtle\"", "required": false, "default": "subtle", "description": "A subtle or a clearer line." } ], "file": "src/components/separator/separator.tsx" } ], "variants": { "SEPARATOR_DEFAULT": { "axes": { "orientation": {}, "tone": {} }, "defaults": {} }, "SEPARATOR": { "axes": { "orientation": { "horizontal": "A 1px line across", "vertical": "A 1px line down" }, "tone": { "subtle": "Inside groups and tables (default)", "default": "Between regions that tone and space cannot separate" } }, "defaults": {} } } }, { "entry": "settings", "kind": "components", "import": "@logicplanes/kaeso-ui/settings", "components": [ { "name": "SettingsGroup", "description": "A group of settings rows: radius 14, raised, ring and a whisper of shadow; hairlines inset to the text.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The rows of the group." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The group's accessible name." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." } ], "file": "src/components/settings/settings.tsx" }, { "name": "SettingsRow", "description": "One setting: title 15/500 and description 13 on the left, the control on the right. When the row is too narrow to keep 140px of text beside the control (a phone, a sheet), the control moves under the text.", "props": [ { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "The setting's name." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "control", "type": "ReactNode", "required": false, "default": null, "description": "The control on the right: Select sm, Switch, a ghost button, a link with ↗." }, { "name": "danger", "type": "boolean", "required": false, "default": null, "description": "Marks a destructive setting." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence about the setting." }, { "name": "href", "type": "string", "required": false, "default": null, "description": "Makes the row a link to this address." }, { "name": "icon", "type": "IconSvgElement", "required": false, "default": null, "description": "An 18px icon at the left, in secondary: no tile behind it." }, { "name": "id", "type": "string", "required": false, "default": null, "description": "For the label of the control." }, { "name": "onClick", "type": "((e: MouseEvent) => void)", "required": false, "default": null, "description": "Makes the row a button and is called when it is pressed." }, { "name": "value", "type": "ReactNode", "required": false, "default": null, "description": "A value in secondary before a chevron: makes the row a navigation row." } ], "file": "src/components/settings/settings.tsx" }, { "name": "SettingsSection", "description": "A settings section: a title-sm heading 48px above, 12px below; usually one SettingsGroup.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The section's groups of rows." }, { "name": "actions", "type": "ReactNode", "required": false, "default": null, "description": "Right of the title." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence under the heading." }, { "name": "title", "type": "ReactNode", "required": false, "default": null, "description": "The section's heading." } ], "file": "src/components/settings/settings.tsx" } ], "variants": { "SETTINGS_DEFAULT": { "axes": { "row": {} }, "defaults": {} }, "SETTINGS": { "axes": { "row": { "default": "Title and description: at least 64px", "single": "One line: 56px" } }, "defaults": {} } } }, { "entry": "sheet", "kind": "components", "import": "@logicplanes/kaeso-ui/sheet", "components": [ { "name": "Sheet", "description": "A panel that slides in from the edge of the screen, for details and longer forms.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The sheet's content." }, { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "The sheet's heading, also its accessible name." }, { "name": "actions", "type": "ReactNode", "required": false, "default": null, "description": "Header actions before the close circle." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "footer", "type": "ReactNode", "required": false, "default": null, "description": "Content at the bottom, usually actions." }, { "name": "inline", "type": "boolean", "required": false, "default": null, "description": "Render without a portal, for documentation and state matrices." }, { "name": "modal", "type": "boolean", "required": false, "default": null, "description": "Keep the page behind interactive (non-modal)." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "side", "type": "\"bottom\" | \"left\" | \"right\"", "required": false, "default": null, "description": "The edge it slides in from." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": null, "description": "The sheet's width, or its height from the bottom." }, { "name": "subtitle", "type": "ReactNode", "required": false, "default": null, "description": "A mono subtitle for ids: `req_01J…`." }, { "name": "trigger", "type": "ReactElement>", "required": false, "default": null, "description": "The element that opens it." } ], "file": "src/components/sheet/sheet.tsx" } ], "variants": { "SHEET_DEFAULT": { "axes": { "size": {}, "side": {} }, "defaults": {} }, "SHEET": { "axes": { "size": { "sm": "480px (default)", "md": "640px: the request inspector", "lg": "800px" }, "side": { "right": "From the right (default)", "left": "From the left: the mobile sidebar", "bottom": "From the bottom: mobile menus" } }, "defaults": {} } } }, { "entry": "sidebar", "kind": "components", "import": "@logicplanes/kaeso-ui/sidebar", "components": [ { "name": "BrandWordmark", "description": "The wordmark as `Sidebar.Brand` and AppFrame's phone bar draw it: a link to the app's home when there is one (its focus ring 4px around the glyphs), the plain wordmark otherwise.", "props": [ { "name": "href", "type": "string", "required": false, "default": null, "description": "Where the wordmark links to." }, { "name": "label", "type": "string", "required": false, "default": "Kaeso", "description": "The wordmark's accessible name." } ], "file": "src/components/sidebar/sidebar.tsx" }, { "name": "Sidebar", "description": "The app's navigation: the wordmark, groups of links, an account menu at the foot, collapsible and resizable.", "props": [ { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "Defines a string value that labels the current element." }, { "name": "resizable", "type": "boolean", "required": false, "default": "true", "description": "Draggable right edge (232–280px), remembered." } ], "file": "src/components/sidebar/sidebar.tsx" }, { "name": "Sidebar.Provider", "description": "Provided by NavSheet: how the sidebar's own toggle closes the sheet it floats in.", "props": [], "file": "src/components/sidebar/sidebar.tsx" } ], "variants": { "SIDEBAR_DEFAULT": { "axes": { "mode": {}, "item": {}, "caption": {} }, "defaults": {} }, "SIDEBAR": { "axes": { "mode": { "expanded": "248px by default, resizable between 232 and 280", "rail": "60px: icons only, labels in tooltips" }, "item": { "default": "A navigation item", "active": "The current page" }, "caption": { "secondary": "A quiet second line under the switcher's label (default)", "danger": "A second line that warns: the organization is scheduled for deletion" } }, "defaults": {} } } }, { "entry": "skeleton", "kind": "components", "import": "@logicplanes/kaeso-ui/skeleton", "components": [ { "name": "Skeleton", "description": "A placeholder in the shape of the content that is loading.", "props": [ { "name": "shape", "type": "\"circle\" | \"line\" | \"control\" | \"block\"", "required": false, "default": "block", "description": "The shape it stands in for: a line of text, a control, a circle or a block." } ], "file": "src/components/skeleton/skeleton.tsx" }, { "name": "SkeletonLine", "description": "Lines of text: the last one shorter.", "props": [ { "name": "lines", "type": "number", "required": false, "default": "1", "description": "How many lines of text it stands in for." } ], "file": "src/components/skeleton/skeleton.tsx" } ], "variants": { "SKELETON_DEFAULT": { "axes": { "shape": {} }, "defaults": {} }, "SKELETON": { "axes": { "shape": { "block": "Rounded blocks for charts and wells (default)", "line": "A pill line for text", "circle": "Avatars and icons", "control": "The shape of a 36px control" } }, "defaults": {} } } }, { "entry": "slider", "kind": "components", "import": "@logicplanes/kaeso-ui/slider", "components": [ { "name": "Slider", "description": "A 4px pill track, an ink range and a 16px ink thumb; a value bubble while dragging; ticks for steps; ranges.", "props": [ { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultValue", "type": "number | number[]", "required": false, "default": null, "description": "The value, or two values for a range, on first render." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "formatValue", "type": "((value: number) => string)", "required": false, "default": null, "description": "Formats the value in the bubble shown while dragging. Defaults to the number in the provider's language." }, { "name": "getAriaLabel", "type": "((index: number) => string)", "required": false, "default": null, "description": "Returns the accessible name of each thumb of a range." }, { "name": "max", "type": "number", "required": false, "default": "100", "description": "The highest value allowed." }, { "name": "min", "type": "number", "required": false, "default": "0", "description": "The lowest value allowed." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onValueChange", "type": "((value: number | number[]) => void)", "required": false, "default": null, "description": "Called with the value while it is dragged." }, { "name": "onValueCommitted", "type": "((value: number | number[]) => void)", "required": false, "default": null, "description": "Called with the value when dragging ends." }, { "name": "step", "type": "number", "required": false, "default": "1", "description": "The steps the value moves in." }, { "name": "ticks", "type": "boolean | number[]", "required": false, "default": null, "description": "Marks under the track at every step (or at these values)." }, { "name": "value", "type": "number | number[]", "required": false, "default": null, "description": "The value, or two values for a range, when you control it." } ], "file": "src/components/slider/slider.tsx" } ], "variants": { "SLIDER_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "SLIDER": { "axes": { "size": { "md": "A 4px track in a 20px hit area (default)" } }, "defaults": {} } } }, { "entry": "stat", "kind": "components", "import": "@logicplanes/kaeso-ui/stat", "components": [ { "name": "MetricRow", "description": "Three to five stats in a row with generous space between them.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The stats, side by side." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." } ], "file": "src/components/stat/stat.tsx" }, { "name": "Stat", "description": "A big number followed by its word, no box, as on a usage page.", "props": [ { "name": "value", "type": "ReactNode", "required": true, "default": null, "description": "The number, already formatted: \"$12.40\", \"1.2M\"." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "delta", "type": "{ label: string; tone?: \"neutral\" | \"success\" | \"danger\"; }", "required": false, "default": null, "description": "A delta badge: \"+12%\"." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The size of the number." }, { "name": "unit", "type": "ReactNode", "required": false, "default": null, "description": "The word after it, on the same baseline: \"total spend\", \"sessions\"." } ], "file": "src/components/stat/stat.tsx" }, { "name": "StatGrid", "description": "`StatTile`s in one raised group, divided by hairlines: two to a row, then as many as there are tiles (up to four) from 1024px. The last tile of a short row widens to fill it (the third of three spans both columns below 1024px), so the group never shows an empty cell. Where a number doesn't fit its tile (a phone, a long amount), every tile's number steps down a size, and the tiles take a row each when even the smallest doesn't fit: a value is never cut short.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The stats, in a grid." }, { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The grid's accessible name." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." } ], "file": "src/components/stat/stat.tsx" }, { "name": "StatTile", "description": "One metric of a dashboard row: its label, the number, the change against the previous period and the trend.", "props": [ { "name": "label", "type": "ReactNode", "required": true, "default": null, "description": "What the number is: \"Requests\", \"Cost\"." }, { "name": "value", "type": "ReactNode", "required": true, "default": null, "description": "The number, already formatted." }, { "name": "change", "type": "{ value: number; better?: \"up\" | \"down\"; }", "required": false, "default": null, "description": "The change against the previous period, as a fraction (0.12 is +12%). `better` says which direction is good: errors are better down." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "detail", "type": "ReactNode", "required": false, "default": null, "description": "A quiet line under the number: \"vs. the previous 30 days\", \"0.4% of requests\"." }, { "name": "trend", "type": "number[]", "required": false, "default": null, "description": "One value per day (or step), drawn as a sparkline across the tile. A tile without it has no room for one; pass `[]` while a trend loads to keep it." }, { "name": "trendColor", "type": "string", "required": false, "default": null, "description": "The trend's color; the first series color by default." } ], "file": "src/components/stat/stat.tsx" } ], "variants": { "STAT_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "STAT": { "axes": { "size": { "md": "28/32 metric (default)", "sm": "20/28 for dense rows" } }, "defaults": {} } } }, { "entry": "status-dot", "kind": "components", "import": "@logicplanes/kaeso-ui/status-dot", "components": [ { "name": "Status", "description": "The same component under its plain name.", "props": [ { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "The word that carries the meaning." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The text size." }, { "name": "tone", "type": "\"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\"", "required": false, "default": "neutral", "description": "The status it marks." } ], "file": "src/components/status-dot/status-dot.tsx" }, { "name": "StatusDot", "description": "A status word: \"Active\", \"Expiring\", \"Down\".", "props": [ { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "The word that carries the meaning." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The dot's size." }, { "name": "tone", "type": "\"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\"", "required": false, "default": "neutral", "description": "The status the dot marks; keep it next to words that say the same." } ], "file": "src/components/status-dot/status-dot.tsx" } ], "variants": { "STATUS_DOT_DEFAULT": { "axes": { "tone": {} }, "defaults": {} }, "STATUS_DOT": { "axes": { "tone": { "success": "Healthy, active, succeeded", "warning": "Degraded, expiring", "danger": "Failed, disabled, down", "info": "Informational", "neutral": "Inactive, archived (default)" } }, "defaults": {} } } }, { "entry": "surface", "kind": "components", "import": "@logicplanes/kaeso-ui/surface", "components": [ { "name": "Surface", "description": "One of the library's surfaces, for content that needs the look of a panel, popover, dialog or well.", "props": [ { "name": "kind", "type": "\"popover\" | \"dialog\" | \"group\" | \"menu\" | \"tooltip\" | \"well\" | \"panel\" | \"sheet\"", "required": true, "default": null, "description": "Which surface it looks like: panel, well, popover, menu, tooltip, dialog, sheet or group." } ], "file": "src/components/surface/surface.tsx" } ], "variants": { "SURFACE_DEFAULT": { "axes": { "kind": {} }, "defaults": {} }, "SURFACE": { "axes": { "kind": { "panel": "The content panel: radius 12, hairline ring", "menu": "Menus, select and combobox lists: radius 16", "popover": "Popovers and hover cards: radius 16", "dialog": "Dialogs and the command palette: radius 20", "sheet": "Sheets: radius 16 on exposed corners", "group": "Settings groups: radius 14, ring and a whisper of shadow", "well": "Code, the key reveal, the JSON inspector: fill, no ring", "tooltip": "Chart tooltips and rich tooltips: radius 12" } }, "defaults": {} } } }, { "entry": "swap-text", "kind": "components", "import": "@logicplanes/kaeso-ui/swap-text", "components": [ { "name": "SwapText", "description": "Text that changes with state without changing size: all alternatives sit in one grid cell, only the current one is visible.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "What is shown now." }, { "name": "reserve", "type": "ReactNode[]", "required": true, "default": null, "description": "Every text this place can show (\"Copy page\", \"Copied\"). The width fits the widest, so a state change never resizes the control." }, { "name": "align", "type": "\"start\" | \"center\"", "required": false, "default": "center", "description": "Aligns the shorter labels at the start or in the center of the reserved width." } ], "file": "src/components/swap-text/swap-text.tsx" } ], "variants": { "SWAP_TEXT_DEFAULT": { "axes": { "align": {} }, "defaults": {} }, "SWAP_TEXT": { "axes": { "align": { "center": "Centered in the reserved width (default)", "start": "Aligned to the start" } }, "defaults": {} } } }, { "entry": "switch", "kind": "components", "import": "@logicplanes/kaeso-ui/switch", "components": [ { "name": "Switch", "description": "A pill track and a round thumb that travels in 180ms.", "props": [ { "name": "aria-label", "type": "string", "required": false, "default": null, "description": "The accessible name, for when there is no visible label." }, { "name": "aria-labelledby", "type": "string", "required": false, "default": null, "description": "The id of the element that names it, when its label is elsewhere on the page." }, { "name": "checked", "type": "boolean", "required": false, "default": null, "description": "Whether it is checked, when you control it." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "defaultChecked", "type": "boolean", "required": false, "default": null, "description": "Whether it starts checked, when the component keeps its own state." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One sentence of help under the label." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Turns it off: it can't be used, and it looks dimmed." }, { "name": "disabledReason", "type": "string", "required": false, "default": null, "description": "Why it is disabled, shown as a tooltip; it stays focusable so people can read it." }, { "name": "id", "type": "string", "required": false, "default": null, "description": "The id of the control, so a label elsewhere can point to it." }, { "name": "label", "type": "ReactNode", "required": false, "default": null, "description": "The switch's label." }, { "name": "loading", "type": "boolean", "required": false, "default": null, "description": "Shows that the change is being saved and ignores clicks until it is." }, { "name": "name", "type": "string", "required": false, "default": null, "description": "The field name the value is sent under in a form." }, { "name": "onCheckedChange", "type": "((checked: boolean) => void)", "required": false, "default": null, "description": "Called with the new state when it is checked or unchecked." }, { "name": "readOnly", "type": "boolean", "required": false, "default": null, "description": "Shows the value without letting people change it." }, { "name": "size", "type": "\"md\" | \"sm\" | \"lg\"", "required": false, "default": "md", "description": "The switch's size." } ], "file": "src/components/switch/switch.tsx" } ], "variants": { "SWITCH_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "SWITCH": { "axes": { "size": { "sm": "28×16, 12px thumb", "md": "36×20, 16px thumb (default)", "lg": "44×24, 20px thumb" } }, "defaults": {} } } }, { "entry": "table", "kind": "components", "import": "@logicplanes/kaeso-ui/table", "components": [ { "name": "Table", "description": "A plain table for small amounts of data; use `DataTable` for sorting, selection and many rows.", "props": [], "file": "src/components/table/table.tsx" } ], "variants": { "TABLE_DEFAULT": { "axes": { "align": {} }, "defaults": {} }, "TABLE": { "axes": { "align": { "start": "Text (default)", "end": "Numbers" } }, "defaults": {} } } }, { "entry": "tabs", "kind": "components", "import": "@logicplanes/kaeso-ui/tabs", "components": [ { "name": "PillTabs", "description": "Pill tabs for page headers (\"All · Errors · Streamed\").", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The tab list and the panels." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultValue", "type": "string", "required": false, "default": null, "description": "The selected tab on first render." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the selected tab." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The selected tab, when you control it." }, { "name": "variant", "type": "\"pill\" | \"underline\"", "required": false, "default": null, "description": "Pills, or underlined tabs." } ], "file": "src/components/tabs/tabs.tsx" }, { "name": "Tabs", "description": "Underline tabs for detail pages.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The tab list and the panels." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "defaultValue", "type": "string", "required": false, "default": null, "description": "The selected tab on first render." }, { "name": "onValueChange", "type": "((value: string) => void)", "required": false, "default": null, "description": "Called with the selected tab." }, { "name": "value", "type": "string", "required": false, "default": null, "description": "The selected tab, when you control it." }, { "name": "variant", "type": "\"pill\" | \"underline\"", "required": false, "default": null, "description": "Underlined tabs for pages, or pills for small groups." } ], "file": "src/components/tabs/tabs.tsx" } ], "variants": { "TABS_DEFAULT": { "axes": { "variant": {} }, "defaults": {} }, "TABS": { "axes": { "variant": { "underline": "Underline tabs for detail pages: 40px, a 2px ink indicator that slides", "pill": "Header tabs: separate 32px pills, the active one filled" } }, "defaults": {} } } }, { "entry": "tag", "kind": "components", "import": "@logicplanes/kaeso-ui/tag", "components": [ { "name": "Pill", "description": "Another name for Tag.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The pill's text." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "icon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon before the text." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Marks a value that isn't accepted." }, { "name": "onClick", "type": "((e: MouseEvent) => void)", "required": false, "default": null, "description": "Renders a button with a hover fill." }, { "name": "onRemove", "type": "((e: MouseEvent) => void)", "required": false, "default": null, "description": "Shows a remove circle; called with the click." }, { "name": "pressed", "type": "boolean", "required": false, "default": null, "description": "For toggle pills (DisplayOptions)." }, { "name": "removeLabel", "type": "string", "required": false, "default": null, "description": "The remove circle's accessible name. Defaults to \"Remove\" and the label in the provider's language." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The pill's height." }, { "name": "variant", "type": "\"outline\" | \"soft\" | \"raised\"", "required": false, "default": "raised", "description": "Raised on the panel, soft fill, or outlined." } ], "file": "src/components/tag/tag.tsx" }, { "name": "Tag", "description": "A metadata pill: 28px, 13/500, an optional icon, an optional remove circle. A label longer than its room (a long key or model name) ends in an ellipsis and shows in full in a tooltip; give a short status label the room it needs instead (a column at least as wide as the pill).", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The tag's text." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "icon", "type": "IconSvgElement", "required": false, "default": null, "description": "An icon before the text." }, { "name": "invalid", "type": "boolean", "required": false, "default": null, "description": "Marks a value that isn't accepted." }, { "name": "onClick", "type": "((e: MouseEvent) => void)", "required": false, "default": null, "description": "Renders a button with a hover fill." }, { "name": "onRemove", "type": "((e: MouseEvent) => void)", "required": false, "default": null, "description": "Shows a remove circle; called with the click." }, { "name": "pressed", "type": "boolean", "required": false, "default": null, "description": "For toggle pills (DisplayOptions)." }, { "name": "removeLabel", "type": "string", "required": false, "default": null, "description": "The remove circle's accessible name. Defaults to \"Remove\" and the label in the provider's language." }, { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "The tag's height." }, { "name": "variant", "type": "\"outline\" | \"soft\" | \"raised\"", "required": false, "default": "raised", "description": "Raised on the panel, soft fill, or outlined." } ], "file": "src/components/tag/tag.tsx" } ], "variants": { "TAG_DEFAULT": { "axes": { "size": {}, "variant": {} }, "defaults": {} }, "TAG": { "axes": { "size": { "md": "28px: metadata pills in lists and toolbars (default)", "sm": "24px: inside table rows" }, "variant": { "raised": "Raised with a ring: metadata pills (default)", "outline": "Ring only: unselected toggle pills", "soft": "Filled: selected toggle pills" } }, "defaults": {} } } }, { "entry": "text", "kind": "components", "import": "@logicplanes/kaeso-ui/text", "components": [ { "name": "Text", "description": "Text in the type scale.", "props": [ { "name": "as", "type": "ElementType", "required": false, "default": null, "description": "The element or component to render as, such as `section` or `ul`." }, { "name": "children", "type": "ReactNode", "required": false, "default": null, "description": "The text." }, { "name": "mono", "type": "boolean", "required": false, "default": null, "description": "Geist Mono, for keys, ids, model ids and code." }, { "name": "tabular", "type": "boolean", "required": false, "default": null, "description": "Tabular numerals. On by default for `metric`." }, { "name": "tone", "type": "\"success\" | \"warning\" | \"danger\" | \"info\" | \"inherit\" | \"secondary\" | \"default\" | \"tertiary\"", "required": false, "default": "default", "description": "The text color role; status tones go next to words that say the same." }, { "name": "truncate", "type": "boolean", "required": false, "default": null, "description": "One line with an ellipsis; the full text appears in a tooltip when it is cut." }, { "name": "variant", "type": "\"title\" | \"display\" | \"title-sm\" | \"title-lg\" | \"body\" | \"caption\" | \"small\" | \"micro\" | \"body-lg\" | \"metric\"", "required": false, "default": "body", "description": "The type style, from `micro` to `display`." }, { "name": "weight", "type": "\"medium\" | \"regular\" | \"semibold\"", "required": false, "default": null, "description": "The weight, when it differs from the type style's." } ], "file": "src/components/text/text.tsx" } ], "variants": { "TEXT_DEFAULT": { "axes": { "variant": {}, "tone": {} }, "defaults": {} }, "TEXT": { "axes": { "variant": { "micro": "11/14 500: keyboard keys and chart ticks only", "caption": "12/16 500: group labels, badges, table headers", "small": "13/18: descriptions, secondary cells, hints", "body": "14/20: the default", "body-lg": "15/22 500: settings row titles, dialog body", "title-sm": "17/24 600: section and dialog titles", "title": "20/28 600: empty-state and compact page titles", "title-lg": "28/34 600: settings page titles, auth screens", "display": "40/44 600: showcase headings, the setup screen", "metric": "28/32 600 tabular: big numbers" }, "tone": { "default": "Primary text", "secondary": "Descriptions and metadata", "tertiary": "Placeholders and redundant hints; never the only carrier of meaning", "danger": "Errors, next to an icon or a word", "success": "Confirmation, next to an icon or a word", "warning": "Warnings, next to an icon or a word", "info": "Information in progress (syncing, queued), next to an icon or a word", "inherit": "Inherit from the parent" }, "weight": { "regular": "400", "medium": "500 (480 in dark mode)", "semibold": "600 (580 in dark mode)" } }, "defaults": {} } } }, { "entry": "theme-menu", "kind": "components", "import": "@logicplanes/kaeso-ui/theme-menu", "components": [ { "name": "ThemeMenu", "description": "System, light or dark, stored as `kaeso:theme`.", "props": [ { "name": "size", "type": "\"md\" | \"sm\"", "required": false, "default": "sm", "description": "The button's height." }, { "name": "variant", "type": "\"secondary\" | \"ghost\"", "required": false, "default": "ghost", "description": "A filled button (`secondary`) or a quiet one (`ghost`)." } ], "file": "src/components/theme-menu/theme-menu.tsx" } ], "variants": { "THEME_MENU_DEFAULT": { "axes": { "variant": {} }, "defaults": {} }, "THEME_MENU": { "axes": { "variant": { "ghost": "A ghost circle (default)", "secondary": "A raised circle" } }, "defaults": {} } } }, { "entry": "timeline", "kind": "components", "import": "@logicplanes/kaeso-ui/timeline", "components": [ { "name": "Timeline", "description": "Events down a 1px line (the audit log): each event marks the line with a short 3px bar in its tone, no dots; titles, and times on the right.", "props": [ { "name": "events", "type": "TimelineEvent[]", "required": true, "default": null, "description": "The events, oldest first." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." } ], "file": "src/components/timeline/timeline.tsx" } ], "variants": { "TIMELINE_DEFAULT": { "axes": { "tone": {} }, "defaults": {} }, "TIMELINE": { "axes": { "tone": { "neutral": "Ordinary events (default)", "success": "Something completed", "warning": "Something changed that needs attention", "danger": "Something failed or was removed", "info": "Informational" } }, "defaults": {} } } }, { "entry": "toast", "kind": "components", "import": "@logicplanes/kaeso-ui/toast", "components": [ { "name": "Toast", "description": "`` mounts the toaster like `Toaster`, and `Toast.add()` shows a toast like `toast()`.", "props": [ { "name": "limit", "type": "number", "required": false, "default": null, "description": "How many toasts show at once." }, { "name": "timeout", "type": "number", "required": false, "default": null, "description": "How long a toast stays, in milliseconds." } ], "file": "src/components/toast/toast.tsx" }, { "name": "ToastCapsule", "description": "The capsule alone, for documentation and state matrices.", "props": [ { "name": "title", "type": "ReactNode", "required": true, "default": null, "description": "The message." }, { "name": "action", "type": "string", "required": false, "default": null, "description": "The label of the toast's action button." }, { "name": "closable", "type": "boolean", "required": false, "default": null, "description": "Shows a close button." }, { "name": "data-force", "type": "string", "required": false, "default": null, "description": "Forces an interaction state for state matrices: `hover`, `pressed`, `focus`, `open`." }, { "name": "description", "type": "ReactNode", "required": false, "default": null, "description": "One more sentence, when the message needs it." }, { "name": "tone", "type": "\"neutral\" | \"success\" | \"warning\" | \"info\" | \"loading\" | \"error\"", "required": false, "default": "neutral", "description": "The kind of message; `loading` shows a spinner." } ], "file": "src/components/toast/toast.tsx" }, { "name": "Toaster", "description": "Mount once near the root. Three visible at most; 5s, paused on hover and focus; swipe or Escape to dismiss. With a client router that replaces on navigation (Astro's ClientRouter), mount it in a persisted element inside a `PortalContainer`, so the toasts are not swapped away with the page.", "props": [ { "name": "limit", "type": "number", "required": false, "default": "3", "description": "How many toasts show at once." }, { "name": "timeout", "type": "number", "required": false, "default": "5000", "description": "How long a toast stays, in milliseconds." } ], "file": "src/components/toast/toast.tsx" } ], "variants": { "TOAST_DEFAULT": { "axes": { "tone": {} }, "defaults": {} }, "TOAST": { "axes": { "tone": { "neutral": "A plain message (default)", "success": "Success: a green check before the words", "error": "Errors: a red mark; announced as an alert", "warning": "Warnings", "info": "Information", "loading": "Work underway: a spinner" } }, "defaults": {} } } }, { "entry": "toc", "kind": "components", "import": "@logicplanes/kaeso-ui/toc", "components": [ { "name": "TableOfContents", "description": "\"On this page\": the heading in view in text color with a 2px ink bar.", "props": [ { "name": "items", "type": "TocItem[]", "required": true, "default": null, "description": "The headings to list, with their depth." }, { "name": "active", "type": "string", "required": false, "default": null, "description": "Controlled active id; otherwise it follows the scroll position." }, { "name": "className", "type": "string", "required": false, "default": null, "description": "Classes for the layout of the outer element: margin, width and placement, never its look." }, { "name": "title", "type": "string", "required": false, "default": null, "description": "Defaults to \"On this page\" in the provider's language." } ], "file": "src/components/toc/toc.tsx" } ], "variants": { "TABLE_OF_CONTENTS_DEFAULT": { "axes": { "state": {} }, "defaults": {} }, "TABLE_OF_CONTENTS": { "axes": { "state": { "default": "A heading", "active": "The heading in view, with a 2px ink bar" } }, "defaults": {} } } }, { "entry": "toolbar", "kind": "components", "import": "@logicplanes/kaeso-ui/toolbar", "components": [ { "name": "Toolbar", "description": "A row of controls above a list or a chart.", "props": [ { "name": "aria-label", "type": "string", "required": true, "default": null, "description": "Defines a string value that labels the current element." }, { "name": "size", "type": "\"md\" | \"inset\"", "required": false, "default": null, "description": "The bar's height: the default, or inset in a panel." } ], "file": "src/components/toolbar/toolbar.tsx" } ], "variants": { "TOOLBAR_DEFAULT": { "axes": { "size": {} }, "defaults": {} }, "TOOLBAR": { "axes": { "size": { "md": "48px, 24px side padding, under the page header (default)", "inset": "48px without side padding, inside padded content" } }, "defaults": {} } } }, { "entry": "tooltip", "kind": "components", "import": "@logicplanes/kaeso-ui/tooltip", "components": [ { "name": "Tooltip", "description": "A short label for a control, shown on hover and focus. Never on disabled elements without a reason.", "props": [ { "name": "children", "type": "ReactElement>", "required": true, "default": null, "description": "The trigger: a single element that accepts a ref." }, { "name": "content", "type": "ReactNode", "required": true, "default": null, "description": "What the tooltip says. Keep it to the control's name or one short sentence." }, { "name": "defaultOpen", "type": "boolean", "required": false, "default": null, "description": "Whether it starts open, when the component keeps its own state." }, { "name": "delay", "type": "number", "required": false, "default": null, "description": "How long the pointer has to rest before it opens, in milliseconds." }, { "name": "disabled", "type": "boolean", "required": false, "default": null, "description": "Never shows the tooltip." }, { "name": "onOpenChange", "type": "((open: boolean) => void)", "required": false, "default": null, "description": "Called when it opens or closes." }, { "name": "open", "type": "boolean", "required": false, "default": null, "description": "Whether it is open, when you control it." }, { "name": "shape", "type": "\"pill\" | \"multiline\"", "required": false, "default": null, "description": "A pill for a short label, or a box for several lines." }, { "name": "shortcut", "type": "string[] | string[][]", "required": false, "default": null, "description": "A shortcut shown after the text: `[\"mod\", \"k\"]` or `[[\"g\"], [\"m\"]]`." }, { "name": "side", "type": "\"top\" | \"bottom\" | \"left\" | \"right\"", "required": false, "default": null, "description": "The side it opens on." }, { "name": "sideOffset", "type": "number", "required": false, "default": null, "description": "Distance from the trigger in px." } ], "file": "src/components/tooltip/tooltip.tsx" }, { "name": "TooltipProvider", "description": "Tooltips open after 500ms, and instantly when moving between tooltipped siblings.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The app, so every tooltip shares one delay." }, { "name": "delay", "type": "number", "required": false, "default": "500", "description": "How long the pointer has to rest before the first tooltip opens, in milliseconds." } ], "file": "src/components/tooltip/tooltip-provider.tsx" }, { "name": "TooltipSurface", "description": "A static tooltip surface for documentation and state matrices.", "props": [ { "name": "children", "type": "ReactNode", "required": true, "default": null, "description": "The tooltip's text." }, { "name": "shape", "type": "\"pill\" | \"multiline\"", "required": false, "default": "pill", "description": "A pill for a short label, or a box for several lines." }, { "name": "shortcut", "type": "string[] | string[][]", "required": false, "default": null, "description": "The keyboard shortcut shown after the text." } ], "file": "src/components/tooltip/tooltip.tsx" } ], "variants": { "TOOLTIP_DEFAULT": { "axes": { "side": {}, "shape": {} }, "defaults": {} }, "TOOLTIP": { "axes": { "side": { "top": "Above the trigger (default)", "bottom": "Below the trigger", "left": "Left of the trigger", "right": "Right of the trigger" }, "shape": { "pill": "Single line: a pill (default)", "multiline": "Several lines: radius 12, max 280px" } }, "defaults": {} } } }, { "entry": "visually-hidden", "kind": "components", "import": "@logicplanes/kaeso-ui/visually-hidden", "components": [ { "name": "VisuallyHidden", "description": "Text for assistive technology only.", "props": [], "file": "src/components/visually-hidden/visually-hidden.tsx" } ], "variants": { "VISUALLY_HIDDEN_DEFAULT": { "axes": {}, "defaults": {} }, "VISUALLY_HIDDEN": { "axes": {}, "defaults": {} } } } ] }