{ "generatedAt": "2026-07-07T12:17:11.091Z", "version": "4.4.0", "totals": { "components": 43, "patterns": 20, "tokens": 918 }, "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "fileName": "Kanso-Protocol-Design-System", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System", "pages": { "components": { "id": "0:1", "name": "🧩 Components" }, "patterns": { "id": "3612:2", "name": "πŸ“ Patterns" }, "foundations": { "id": "6:4", "name": "🎨 Foundations" }, "examples": { "id": "3753:2", "name": "πŸ–ΌοΈ Example Pages" }, "assets": { "id": "17:2", "name": "βš™οΈ Assets" }, "manifest": { "id": "6:3", "name": "πŸ“‹ Manifest" }, "cover": { "id": "6:2", "name": "πŸ“– Cover" } }, "iconLibrary": { "$comment": "Tabler icons used in this library are now detached (inlined into the Kanso file) so community duplicators don't need an external library subscription. To add NEW icons inside Figma, use the official Tabler Icons plugin and drag glyphs in directly. The previous external file ref (0bgkes9nJYbk0vonduKaVZ) has been removed β€” every icon node now lives locally." }, "foundations": { "typography": "3043:2", "colors": "3051:2", "spacing": "3055:2", "sizing": "3056:2", "radius": "3057:2", "elevation": "3881:2", "overlays": "3881:30", "foreground-on-dark": "3881:73", "motion": "3881:93" } }, "components": [ { "name": "accordion", "className": "KpAccordionComponent", "selector": "kp-accordion", "subSelectors": [ "kp-accordion-item" ], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/accordion", "description": "Kanso Protocol β€” Accordion\n\nContainer for `` children. Coordinates the\nexpand/collapse behavior via `[mode]`:\n - `single` β€” only one item can be open; expanding a new one collapses the previous.\n - `multi` β€” any number of items can be open simultaneously.\n\nCascades `size` to every projected item so callers set it once on\nthe container. Set `[showOuterBorder]=\"true\"` to wrap the group in\na 1px border with rounded corners (for standalone accordions on\nflat surfaces). Otherwise only the per-item bottom borders show.", "examples": [], "inputs": [ { "name": "size", "type": "KpAccordionItemSize", "default": "'md'", "description": "" }, { "name": "mode", "type": "KpAccordionMode", "default": "'single'", "description": "" }, { "name": "showOuterBorder", "type": "boolean", "default": "false", "description": "" } ], "outputs": [], "ariaRole": null, "sizeRamp": [ "sm", "md", "lg" ], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-accordion--docs", "sourcePath": "packages/ui/accordion/src/accordion.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11103", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11103" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpAccordionComponent", "selector": "kp-accordion", "import": "import { KpAccordionComponent } from '@kanso-protocol/ui/accordion';", "docs": "docs/components/accordion.md", "storybook": "components-accordion--docs" } }, { "name": "alert", "className": "KpAlertComponent", "selector": "kp-alert", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/alert", "description": "Kanso Protocol β€” Alert\n\nIn-page banner for statuses, errors, warnings, and short messages. 3 sizes Γ—\n4 appearances (subtle / solid / outline / left-accent) Γ— 6 color roles, plus\nan optional leading icon, an action slot (inline right or stacked below),\nand a close button.", "examples": [ "\n \n\n\n\n \n" ], "inputs": [ { "name": "size", "type": "KpAlertSize", "default": "'md'", "description": "" }, { "name": "appearance", "type": "KpAlertAppearance", "default": "'subtle'", "description": "" }, { "name": "color", "type": "KpAlertColor", "default": "'primary'", "description": "" }, { "name": "title", "type": "string", "default": "''", "description": "" }, { "name": "description", "type": "string", "default": "''", "description": "" }, { "name": "actionPlacement", "type": "KpAlertActionPlacement", "default": "'inline'", "description": "" }, { "name": "closable", "type": "boolean", "default": "false", "description": "" } ], "outputs": [ { "name": "close", "payload": "MouseEvent" } ], "ariaRole": "alert", "sizeRamp": [ "sm", "md", "lg" ], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-alert--docs", "sourcePath": "packages/ui/alert/src/alert.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11044", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11044" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpAlertComponent", "selector": "kp-alert", "import": "import { KpAlertComponent } from '@kanso-protocol/ui/alert';", "docs": "docs/components/alert.md", "storybook": "components-alert--docs" } }, { "name": "avatar", "className": "KpAvatarComponent", "selector": "kp-avatar", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/avatar", "description": "Kanso Protocol β€” Avatar\n\nUser-facing identity surface: image / initials / icon. Six sizes\nΓ— two shapes, seven color appearances, optional presence status\ndot and ring (for stacks).\n\nContent precedence: `src` β†’ image, else `initials` β†’ initials,\nelse projected `` / default user glyph.", "examples": [ "\n\n\n \n" ], "inputs": [ { "name": "size", "type": "KpAvatarSize", "default": "'md'", "description": "" }, { "name": "shape", "type": "KpAvatarShape", "default": "'circle'", "description": "" }, { "name": "appearance", "type": "KpAvatarAppearance", "default": "'default'", "description": "" }, { "name": "initials", "type": "string | null", "default": "null", "description": "" }, { "name": "src", "type": "string | null", "default": "null", "description": "" }, { "name": "alt", "type": "string | null", "default": "null", "description": "" }, { "name": "showStatus", "type": "boolean", "default": "false", "description": "" }, { "name": "status", "type": "KpAvatarStatus", "default": "'online'", "description": "" }, { "name": "showRing", "type": "boolean", "default": "false", "description": "Adds a contrasting outer ring β€” used by AvatarGroup for overlapping stacks" }, { "name": "ariaLabelOverride", "type": "string | null", "default": "null", "description": "Override the auto-computed aria-label (defaults to initials/alt)" } ], "outputs": [], "ariaRole": null, "sizeRamp": [ "xs", "sm", "md", "lg", "xl", "2xl" ], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-avatar--docs", "sourcePath": "packages/ui/avatar/src/avatar.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11139", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11139" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpAvatarComponent", "selector": "kp-avatar", "import": "import { KpAvatarComponent } from '@kanso-protocol/ui/avatar';", "docs": "docs/components/avatar.md", "storybook": "components-avatar--docs" } }, { "name": "avatar-group", "className": "KpAvatarGroupComponent", "selector": "kp-avatar-group", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/avatar-group", "description": "Kanso Protocol β€” AvatarGroup\n\nOverlapping stack of Avatars with an optional \"+N\" count chip.\nItems after `max` collapse into the count; `total` drives the\ndisplayed number (\"+N\" = `total - visible.length`).\n\nEach avatar is rendered with `showRing=true` so the overlap\nreads cleanly against any background.", "examples": [ "" ], "inputs": [ { "name": "size", "type": "Exclude", "default": "'md'", "description": "" }, { "name": "overlap", "type": "KpAvatarGroupOverlap", "default": "'normal'", "description": "" }, { "name": "showCount", "type": "boolean", "default": "true", "description": "" } ], "outputs": [], "ariaRole": null, "sizeRamp": [ "2xl" ], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-avatargroup--docs", "sourcePath": "packages/ui/avatar-group/src/avatar-group.component.ts", "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpAvatarGroupComponent", "selector": "kp-avatar-group", "import": "import { KpAvatarGroupComponent } from '@kanso-protocol/ui/avatar-group';", "docs": "docs/components/avatar-group.md", "storybook": "components-avatargroup--docs" } }, { "name": "badge", "className": "KpBadgeComponent", "selector": "kp-badge", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/badge", "description": "Kanso Protocol β€” Badge\n\nCompact label for statuses, tags, and counters. 3 sizes Γ— 4 appearances\nΓ— 6 color roles. A leading dot and a leading icon are independent\noptional slots; the dot appearance drops the background and border so\nthe dot becomes the only colour cue.", "examples": [ "Active\nAway\nDesign\n12" ], "inputs": [ { "name": "size", "type": "KpBadgeSize", "default": "'md'", "description": "" }, { "name": "appearance", "type": "KpBadgeAppearance", "default": "'filled'", "description": "" }, { "name": "color", "type": "KpBadgeColor", "default": "'primary'", "description": "" }, { "name": "pill", "type": "boolean", "default": "false", "description": "" }, { "name": "count", "type": "boolean", "default": "false", "description": "Counter shape: a tight circle for short numeric content (notification badges, \"1\", \"12\", \"99+\"). Use `pill` for word-bearing chips." }, { "name": "counter", "type": "number | string | null", "default": "null", "description": "Numeric counter rendered as a small chip after the label (same idea as the\ncount chip in Tabs). Fully additive: it shows only when set and never\nchanges the label, icon, dot, or shape. Set a number (or \"99+\") to show it;\nleave null/'' to hide. This is the \"just a number\" counter β€” distinct from\n`count`, which reshapes the whole badge into a circle." }, { "name": "showLeadingDot", "type": "boolean", "default": "false", "description": "Render a small colored dot before the label (independent of `appearance='dot'`; auto-shown for that appearance)" }, { "name": "closable", "type": "boolean", "default": "false", "description": "Render a βœ• affordance after the label and emit `close` when clicked" } ], "outputs": [ { "name": "close", "payload": "MouseEvent" } ], "ariaRole": null, "sizeRamp": [ "xs", "sm", "md" ], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-badge--docs", "sourcePath": "packages/ui/badge/src/badge.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11040", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11040" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpBadgeComponent", "selector": "kp-badge", "import": "import { KpBadgeComponent } from '@kanso-protocol/ui/badge';", "docs": "docs/components/badge.md", "storybook": "components-badge--docs" } }, { "name": "breadcrumbs", "className": "KpBreadcrumbsComponent", "selector": "kp-breadcrumbs", "subSelectors": [ "kp-breadcrumb-item", "kp-breadcrumb-separator", "kp-breadcrumbs-auto" ], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/breadcrumbs", "description": "Kanso Protocol β€” Breadcrumbs (container)\n\nSemantic `` so it escapes any\noverflow / transform on ancestors.\n\nShares Input's size ramp and visual state vocabulary.", "examples": [], "inputs": [ { "name": "size", "type": "KpSize", "default": "'md'", "description": "" }, { "name": "mode", "type": "KpDatePickerMode", "default": "'single'", "description": "" }, { "name": "placeholder", "type": "string", "default": "'Select date'", "description": "" }, { "name": "min", "type": "Date | null", "default": "null", "description": "" }, { "name": "max", "type": "Date | null", "default": "null", "description": "" }, { "name": "showClear", "type": "boolean", "default": "true", "description": "" }, { "name": "showPresets", "type": "boolean", "default": "false", "description": "" }, { "name": "presets", "type": "KpDatePickerPreset[] | null", "default": "null", "description": "" }, { "name": "firstDayOfWeek", "type": "0 | 1", "default": "1", "description": "0 = Sunday first, 1 = Monday first. Defaults to Monday." }, { "name": "dateFormatter", "type": "((d: Date) => string) | null", "default": "null", "description": "Custom formatter for the trigger's displayed text." }, { "name": "rangeSeparator", "type": "string", "default": "' – '", "description": "" }, { "name": "disabled", "type": "boolean", "default": "false", "description": "" }, { "name": "forceState", "type": "KpState | null", "default": "null", "description": "" } ], "outputs": [ { "name": "valueChange", "payload": "KpDatePickerValue" }, { "name": "openChange", "payload": "boolean" } ], "ariaRole": null, "sizeRamp": [ "xs", "sm", "md", "lg", "xl" ], "keyboardPatterns": [ "ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown", "Enter", "Escape", "Space" ], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-datepicker--docs", "sourcePath": "packages/ui/datepicker/src/datepicker.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11119", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11119" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpDatePickerComponent", "selector": "kp-datepicker", "import": "import { KpDatePickerComponent } from '@kanso-protocol/ui/datepicker';", "docs": "docs/components/datepicker.md", "storybook": "components-datepicker--docs" } }, { "name": "dialog", "className": "KpDialogComponent", "selector": "kp-dialog", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/dialog", "description": "Kanso Protocol β€” Dialog\n\nWraps a real native `` element. Focus trap, top-layer\nstacking, ESC-to-close, body-scroll inertness, and `::backdrop`\nstyling are all browser-native. Composition is slot-driven:\n`[kpDialogHeroIcon]` / `[kpDialogBody]` / `[kpDialogFooter]`.\n\nFooter layouts (`footerLayout`):\n- `end` (default): actions packed to the right.\n- `start`: actions packed to the LEFT. To separate a Cancel /\n secondary action and push it to the far right while the primary\n actions stay left, mark that element with the `[kpDialogFooterEnd]`\n attribute β€” the component applies `margin-inline-start: auto` to it.\n- `between`: first child left, the rest right (`space-between`).\n- `stacked`: full-width column, for narrow surfaces.", "examples": [ "" ], "inputs": [ { "name": "size", "type": "KpDialogSize", "default": "'md'", "description": "" }, { "name": "title", "type": "string", "default": "''", "description": "" }, { "name": "description", "type": "string", "default": "''", "description": "" }, { "name": "showHeroIcon", "type": "boolean", "default": "false", "description": "" }, { "name": "showDescription", "type": "boolean", "default": "false", "description": "" }, { "name": "showFooter", "type": "boolean", "default": "true", "description": "" }, { "name": "showHeaderDivider", "type": "boolean", "default": "false", "description": "" }, { "name": "showFooterDivider", "type": "boolean", "default": "false", "description": "" }, { "name": "footerLayout", "type": "KpDialogFooterLayout", "default": "'end'", "description": "" }, { "name": "ariaLabel", "type": "string", "default": "''", "description": "" }, { "name": "closeOnBackdrop", "type": "boolean", "default": "true", "description": "Clicking the backdrop closes the dialog. Disable for intrusive confirmations." }, { "name": "closeOnEsc", "type": "boolean", "default": "true", "description": "Esc closes the dialog. Disable for intrusive confirmations." }, { "name": "open", "type": "boolean", "default": "false", "description": "" } ], "outputs": [ { "name": "openChange", "payload": "boolean" }, { "name": "closed", "payload": "void" } ], "ariaRole": null, "sizeRamp": [ "xs", "sm", "md", "lg", "xl" ], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-dialog--docs", "sourcePath": "packages/ui/dialog/src/dialog.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11083", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11083" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpDialogComponent", "selector": "kp-dialog", "import": "import { KpDialogComponent } from '@kanso-protocol/ui/dialog';", "docs": "docs/components/dialog.md", "storybook": "components-dialog--docs" } }, { "name": "divider", "className": "KpDividerComponent", "selector": "kp-divider", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/divider", "description": "Kanso Protocol β€” Divider\n\nThin line separator. Horizontal by default; set `orientation=\"vertical\"`\nfor an inline vertical rule. Horizontal dividers can carry an optional\nlabel via `[label]` (or projected default content) with configurable\nposition β€” center / start / end.\n\nVertical dividers are label-less by design (visually awkward).", "examples": [], "inputs": [ { "name": "orientation", "type": "KpDividerOrientation", "default": "'horizontal'", "description": "" }, { "name": "label", "type": "string", "default": "''", "description": "" }, { "name": "labelPosition", "type": "KpDividerLabelPosition", "default": "'center'", "description": "" }, { "name": "hasProjected", "type": "boolean", "default": "false", "description": "Set this to `true` when projecting custom label content instead of using `[label]`." } ], "outputs": [], "ariaRole": "separator", "sizeRamp": [], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-divider--docs", "sourcePath": "packages/ui/divider/src/divider.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11087", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11087" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpDividerComponent", "selector": "kp-divider", "import": "import { KpDividerComponent } from '@kanso-protocol/ui/divider';", "docs": "docs/components/divider.md", "storybook": "components-divider--docs" } }, { "name": "drawer", "className": "KpDrawerComponent", "selector": "kp-drawer", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/drawer", "description": "Kanso Protocol β€” Drawer\n\nSide panel that slides in from any of four edges. Same composition\nmodel as Dialog (header / body / footer slots, controlled\n`[(open)]` state, focus trap on open, Esc + backdrop close), but\nanchored to a screen edge instead of centered.\n\nUse it for: settings panels, filter sidebars, mobile bottom sheets,\ntop notification trays. Body content scrolls when it overflows the\npanel; the panel itself stays fixed-size per `size` Γ— `side`.", "examples": [], "inputs": [ { "name": "size", "type": "KpDrawerSize", "default": "'md'", "description": "" }, { "name": "side", "type": "KpDrawerSide", "default": "'right'", "description": "" }, { "name": "modal", "type": "boolean", "default": "true", "description": "Modal drawer renders a backdrop and locks page scroll (default).\n Set `false` for a non-modal drawer: no backdrop, no scroll lock, and the\n page behind stays interactive." }, { "name": "variant", "type": "KpDrawerVariant", "default": "'flush'", "description": "`flush` (default) sits edge-attached and full-height. `floating` insets\n the panel from the viewport with equal margins and rounds all corners." }, { "name": "elevated", "type": "boolean", "default": "false", "description": "Adds an overlay shadow to the panel β€” useful in light theme and when\n there is no backdrop (floating / non-modal)." }, { "name": "title", "type": "string", "default": "''", "description": "" }, { "name": "description", "type": "string", "default": "''", "description": "" }, { "name": "showHeader", "type": "boolean", "default": "true", "description": "" }, { "name": "showDescription", "type": "boolean", "default": "false", "description": "" }, { "name": "showClose", "type": "boolean", "default": "true", "description": "" }, { "name": "showFooter", "type": "boolean", "default": "false", "description": "" }, { "name": "showHeaderDivider", "type": "boolean", "default": "false", "description": "" }, { "name": "showFooterDivider", "type": "boolean", "default": "false", "description": "" }, { "name": "showResizeHandle", "type": "boolean", "default": "true", "description": "" }, { "name": "ariaLabel", "type": "string", "default": "''", "description": "" }, { "name": "closeOnBackdrop", "type": "boolean", "default": "true", "description": "" }, { "name": "closeOnEsc", "type": "boolean", "default": "true", "description": "" }, { "name": "open", "type": "boolean", "default": "false", "description": "" } ], "outputs": [ { "name": "openChange", "payload": "boolean" }, { "name": "closed", "payload": "void" } ], "ariaRole": null, "sizeRamp": [ "sm", "md", "lg", "xl" ], "keyboardPatterns": [ "Escape" ], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-drawer--docs", "sourcePath": "packages/ui/drawer/src/drawer.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11099", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11099" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpDrawerComponent", "selector": "kp-drawer", "import": "import { KpDrawerComponent } from '@kanso-protocol/ui/drawer';", "docs": "docs/components/drawer.md", "storybook": "components-drawer--docs" } }, { "name": "empty-state", "className": "KpEmptyStateComponent", "selector": "kp-empty-state", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/empty-state", "description": "Kanso Protocol β€” EmptyState\n\nCentered placeholder for empty lists, missing data, or zero-result\nscreens. Composes a circular illustration container, title,\ndescription, and an actions row. Project the illustration via\n`[kpEmptyStateIcon]` and footer buttons via `[kpEmptyStateActions]`.", "examples": [], "inputs": [ { "name": "size", "type": "KpEmptyStateSize", "default": "'md'", "description": "" }, { "name": "title", "type": "string", "default": "''", "description": "" }, { "name": "description", "type": "string", "default": "''", "description": "" }, { "name": "showIllustration", "type": "boolean", "default": "true", "description": "" }, { "name": "showDescription", "type": "boolean", "default": "true", "description": "" } ], "outputs": [], "ariaRole": null, "sizeRamp": [ "sm", "md", "lg" ], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-emptystate--docs", "sourcePath": "packages/ui/empty-state/src/empty-state.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11095", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11095" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpEmptyStateComponent", "selector": "kp-empty-state", "import": "import { KpEmptyStateComponent } from '@kanso-protocol/ui/empty-state';", "docs": "docs/components/empty-state.md", "storybook": "components-emptystate--docs" } }, { "name": "file-upload", "className": "KpFileUploadComponent", "selector": "kp-file-upload", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/file-upload", "description": "Kanso Protocol β€” FileUpload (dropzone)\n\nClick-to-browse + drag-and-drop. Constraints:\n`[accept]` MIME / extension list, `[maxSize]` bytes per file,\n`[maxFiles]` total count, `[multiple]` toggle.\n\nEmits `(filesAdded)` for accepted files (the consumer owns the upload\nloop and reports back via `setProgress` / `setStatus`) and\n`(filesRejected)` for the rest. Selected files are tracked in `files`\nso the UI can show a status list with progress + remove.", "examples": [ "" ], "inputs": [ { "name": "size", "type": "KpFileUploadSize", "default": "'md'", "description": "" }, { "name": "appearance", "type": "KpFileUploadAppearance", "default": "'default'", "description": "" }, { "name": "multiple", "type": "boolean", "default": "false", "description": "" }, { "name": "accept", "type": "string | null", "default": "null", "description": "" }, { "name": "maxSize", "type": "number | null", "default": "null", "description": "Max bytes per file. `null` = no limit." }, { "name": "maxFiles", "type": "number | null", "default": "null", "description": "Max total file count. `null` = no limit." }, { "name": "disabled", "type": "boolean", "default": "false", "description": "" }, { "name": "required", "type": "boolean", "default": "false", "description": "" }, { "name": "name", "type": "string | null", "default": "null", "description": "" }, { "name": "title", "type": "string | null", "default": "null", "description": "" }, { "name": "hint", "type": "string | null", "default": "null", "description": "" }, { "name": "ariaLabel", "type": "string | null", "default": "null", "description": "" } ], "outputs": [ { "name": "filesAdded", "payload": "KpUploadFile[]" }, { "name": "filesRejected", "payload": "KpFileRejection[]" }, { "name": "fileRemoved", "payload": "KpUploadFile" } ], "ariaRole": null, "sizeRamp": [ "sm", "md", "lg" ], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-fileupload--docs", "sourcePath": "packages/ui/file-upload/src/file-upload.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "4110:11270", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=4110-11270" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpFileUploadComponent", "selector": "kp-file-upload", "import": "import { KpFileUploadComponent } from '@kanso-protocol/ui/file-upload';", "docs": "docs/components/file-upload.md", "storybook": "components-fileupload--docs" } }, { "name": "form-field", "className": "KpFormFieldComponent", "selector": "kp-form-field", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/form-field", "description": "Kanso Protocol β€” FormField\n\nWraps any form control with a label, optional/required marker, and a\nfooter that renders either a helper text (rest state) or a validation\nerror message (when the projected control is invalid and was touched\nor dirty).\n\n**Auto-error mode.** Project any Angular form control β€” `[formControl]`,\n`[formControlName]`, `ngModel`, or a custom directive that implements\n`ControlValueAccessor`. FormField finds the `NgControl` via content\nprojection, subscribes to its status/value changes, and surfaces the\nerror from `control.errors` using a lookup against the validation\nmessage registry (see `KP_VALIDATION_MESSAGES`). Per-field messages\noverride the registry via the `[errors]` input.\n\n**Manual mode.** Pass `[error]=\"true\"` + a custom `[helper]` text if\nyou want full control over the error display (e.g. when the validation\nstate lives outside Angular Forms).", "examples": [ "Auto-error from a reactive FormControl:\n\n\n", "Per-field custom message:\n `Π”ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ β‰₯ ${min}` }\">\n\n" ], "inputs": [ { "name": "label", "type": "string", "default": "''", "description": "" }, { "name": "helper", "type": "string", "default": "''", "description": "" }, { "name": "required", "type": "KpRequiredMode", "default": "'none'", "description": "" }, { "name": "showHelper", "type": "boolean", "default": "true", "description": "" }, { "name": "error", "type": "boolean", "default": "false", "description": "Manual error flag β€” treated as an override. When `true`, the field\nrenders in error state regardless of the projected control's status.\nLeave undefined to let the auto-error logic drive the state." }, { "name": "disabled", "type": "boolean", "default": "false", "description": "" }, { "name": "errors", "type": "KpValidationMessages | null", "default": "null", "description": "Per-field validation message overrides. Merged on top of the\n`KP_VALIDATION_MESSAGES` registry; the key must match the validator\nname in `AbstractControl.errors`." } ], "outputs": [], "ariaRole": null, "sizeRamp": [], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-formfield--docs", "sourcePath": "packages/ui/form-field/src/form-field.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:11016", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-11016" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpFormFieldComponent", "selector": "kp-form-field", "import": "import { KpFormFieldComponent } from '@kanso-protocol/ui/form-field';", "docs": "docs/components/form-field.md", "storybook": "components-formfield--docs" } }, { "name": "icon", "className": "KpIconComponent", "selector": "kp-icon", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/icon", "description": "Kanso Protocol β€” Icon Component\n\nRenders Tabler Icons SVGs inline with stroke-width auto-tuned per size.\nThe same `name` strings work in code and Figma (the `tabler/{name}` master\ncomponents on the Foundations Β» Tabler Icons page mirror this set).", "examples": [ "\n\n\n\nNeed an icon outside the default set? Register at startup:\n\n KP_ICON_REGISTRY.register('my-logo', '…');" ], "inputs": [], "outputs": [], "ariaRole": null, "sizeRamp": [], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-icon--docs", "sourcePath": "packages/ui/icon/src/icon.component.ts", "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpIconComponent", "selector": "kp-icon", "import": "import { KpIconComponent } from '@kanso-protocol/ui/icon';", "docs": "docs/components/icon.md", "storybook": "components-icon--docs" } }, { "name": "input", "className": "KpInputComponent", "selector": "kp-input", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/input", "description": "Kanso Protocol β€” Input Component\n\nAnatomy: Container β†’ Content β†’ Elements (icon-left, input, icon-right)\nSupports: 5 sizes Γ— 7 states (rest/hover/active/focus/disabled/loading/error)\nFloating Label: available for lg and xl sizes", "examples": [ "\n" ], "inputs": [ { "name": "size", "type": "KpSize", "default": "'md'", "description": "" }, { "name": "type", "type": "string", "default": "'text'", "description": "" }, { "name": "placeholder", "type": "string", "default": "''", "description": "" }, { "name": "label", "type": "string", "default": "''", "description": "" }, { "name": "ariaLabel", "type": "string | null", "default": "null", "description": "Accessible name forwarded to the inner input. Falls back to `label`,\n then `placeholder`, then a generic \"Input\" so the element is never\n anonymous for screen readers / axe." }, { "name": "floatingLabel", "type": "boolean", "default": "false", "description": "" }, { "name": "showClear", "type": "boolean", "default": "true", "description": "" }, { "name": "disabled", "type": "boolean", "default": "false", "description": "" }, { "name": "forceState", "type": "KpState | null", "default": "null", "description": "Force a visual state for showcase/documentation purposes" }, { "name": "value", "type": "string | null", "default": "null", "description": "" } ], "outputs": [], "ariaRole": null, "sizeRamp": [ "xs", "sm", "md", "lg", "xl" ], "keyboardPatterns": [], "docsUrl": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-input--docs", "sourcePath": "packages/ui/input/src/input.component.ts", "figma": { "fileKey": "lhWTPOMJMCNhnwM9nNMCuH", "nodeId": "3805:10997", "url": "https://www.figma.com/design/lhWTPOMJMCNhnwM9nNMCuH/Kanso-Protocol-Design-System?node-id=3805-10997" }, "codeConnect": { "npm": "@kanso-protocol/ui", "primaryClass": "KpInputComponent", "selector": "kp-input", "import": "import { KpInputComponent } from '@kanso-protocol/ui/input';", "docs": "docs/components/input.md", "storybook": "components-input--docs" } }, { "name": "markdown-viewer", "className": "KpMarkdownViewerComponent", "selector": "kp-markdown-viewer", "subSelectors": [], "stability": "stable", "layer": "components", "package": "@kanso-protocol/ui", "import": "@kanso-protocol/ui/markdown-viewer", "description": "Kanso Protocol β€” MarkdownViewer\n\nRead-only markdown renderer. Pairs with `` (which\nis HTML-only) for repos / docs / READMEs / changelog viewers.\n\nDefault parser is `marked` (already a dev-dep transitive in many Angular\nsetups; declared here as a runtime dep so the component is self-contained).\nPass `[parser]` to swap in `markdown-it`, `remark`, or a custom parser\nwhen you need plugin support beyond CommonMark + GFM.\n\nOutput is sanitized via `DomSanitizer.bypassSecurityTrustHtml` only when\n`[trusted]=true`. With `trusted=false` (default) the inner HTML goes\nthrough Angular's automatic sanitization, which strips `