kanto-ds 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +2 -2
  2. package/dist/react/index.js.map +1 -1
  3. package/dist/react/jsx.d.ts +213 -0
  4. package/dist/react/jsx.js +2 -0
  5. package/dist/react/jsx.js.map +1 -0
  6. package/dist/web-types.json +1 -1
  7. package/package.json +11 -5
package/README.md CHANGED
@@ -103,8 +103,8 @@ import 'kanto-ds/components/core/kt-button'; // just this one
103
103
  ## Icons
104
104
 
105
105
  `<kt-icon>` resolves [Lucide](https://lucide.dev) icons by name at render time,
106
- which means the set cannot be tree-shaken. So Kanto ships only the seventeen its
107
- own elements draw. Register what your application uses:
106
+ which means the set cannot be tree-shaken. So Kanto ships only the 22 its own
107
+ elements draw. Register what your application uses:
108
108
 
109
109
  ```js
110
110
  import { Rocket, Wallet } from 'lucide';
package/dist/react/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/react/index.ts"],"sourcesContent":["/**\n * React wrappers for the Kanto elements.\n *\n * React 19 can set custom-element properties and listen for custom events on\n * its own, so these wrappers are not strictly required. They are here for what\n * plain JSX still cannot give you: typed props with autocompletion, typed\n * event handlers as `onKtChange` rather than `useEffect` plus\n * `addEventListener`, and refs typed as the element rather than `HTMLElement`.\n *\n * import { KtButton, KtInput } from 'kanto-ds/react';\n * import 'kanto-ds/styles.css';\n *\n * <KtInput placeholder=\"Search\" onKtChange={(e) => setQuery(e.detail.value)} />\n *\n * React is a peer dependency: the package works without it.\n */\nimport * as React from 'react';\nimport { createComponent, type EventName } from '@lit/react';\n\nimport { KtAvatar as KtAvatarElement } from '../components/core/kt-avatar/kt-avatar.js';\nimport { KtBadge as KtBadgeElement } from '../components/core/kt-badge/kt-badge.js';\nimport { KtButton as KtButtonElement } from '../components/core/kt-button/kt-button.js';\nimport { KtSplitButton as KtSplitButtonElement } from '../components/core/kt-split-button/kt-split-button.js';\nimport { KtCard as KtCardElement } from '../components/core/kt-card/kt-card.js';\nimport { KtCode as KtCodeElement } from '../components/core/kt-code/kt-code.js';\nimport { KtIcon as KtIconElement } from '../components/core/kt-icon/kt-icon.js';\nimport { KtKbd as KtKbdElement } from '../components/core/kt-kbd/kt-kbd.js';\nimport { KtDragDrop as KtDragDropElement } from '../components/forms/kt-drag-drop/kt-drag-drop.js';\nimport { KtForm as KtFormElement } from '../components/forms/kt-form/kt-form.js';\nimport { KtInput as KtInputElement } from '../components/forms/kt-input/kt-input.js';\nimport { KtInputMenu as KtInputMenuElement } from '../components/forms/kt-input-menu/kt-input-menu.js';\nimport { KtLabelInput as KtLabelInputElement } from '../components/forms/kt-label-input/kt-label-input.js';\nimport { KtSelect as KtSelectElement } from '../components/forms/kt-select/kt-select.js';\nimport { KtTextarea as KtTextareaElement } from '../components/forms/kt-textarea/kt-textarea.js';\nimport { KtToggle as KtToggleElement } from '../components/forms/kt-toggle/kt-toggle.js';\nimport { KtBreadcrumb as KtBreadcrumbElement } from '../components/navigation/kt-breadcrumb/kt-breadcrumb.js';\nimport { KtPageHeader as KtPageHeaderElement } from '../components/navigation/kt-page-header/kt-page-header.js';\nimport { KtSegmentedControl as KtSegmentedControlElement } from '../components/navigation/kt-segmented-control/kt-segmented-control.js';\nimport { KtSubMenuNavigation as KtSubMenuNavigationElement } from '../components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js';\nimport { KtTabs as KtTabsElement } from '../components/navigation/kt-tabs/kt-tabs.js';\nimport { KtHeader as KtHeaderElement } from '../components/navigation/kt-header/kt-header.js';\nimport { KtToggleButton as KtToggleButtonElement } from '../components/navigation/kt-toggle-button/kt-toggle-button.js';\nimport { KtToggleButtonGroup as KtToggleButtonGroupElement } from '../components/navigation/kt-toggle-button-group/kt-toggle-button-group.js';\nimport { KtAlert as KtAlertElement } from '../components/feedback/kt-alert/kt-alert.js';\nimport { KtEmptyState as KtEmptyStateElement } from '../components/feedback/kt-empty-state/kt-empty-state.js';\nimport { KtProgressBar as KtProgressBarElement } from '../components/feedback/kt-progress-bar/kt-progress-bar.js';\nimport { KtSkeleton as KtSkeletonElement } from '../components/feedback/kt-skeleton/kt-skeleton.js';\nimport { KtToast as KtToastElement } from '../components/feedback/kt-toast/kt-toast.js';\nimport { KtToastContainer as KtToastContainerElement } from '../components/feedback/kt-toast-container/kt-toast-container.js';\nimport { KtTooltip as KtTooltipElement } from '../components/feedback/kt-tooltip/kt-tooltip.js';\nimport { KtCollapsible as KtCollapsibleElement } from '../components/overlays/kt-collapsible/kt-collapsible.js';\nimport { KtConfirmDialog as KtConfirmDialogElement } from '../components/overlays/kt-confirm-dialog/kt-confirm-dialog.js';\nimport { KtDropdown as KtDropdownElement } from '../components/overlays/kt-dropdown/kt-dropdown.js';\nimport { KtModal as KtModalElement } from '../components/overlays/kt-modal/kt-modal.js';\nimport { KtSidePanel as KtSidePanelElement } from '../components/overlays/kt-side-panel/kt-side-panel.js';\nimport { KtChart as KtChartElement } from '../components/data/kt-chart/kt-chart.js';\nimport { KtMeter as KtMeterElement } from '../components/data/kt-meter/kt-meter.js';\nimport { KtPagination as KtPaginationElement } from '../components/data/kt-pagination/kt-pagination.js';\nimport { KtStat as KtStatElement } from '../components/data/kt-stat/kt-stat.js';\nimport { KtTable as KtTableElement } from '../components/data/kt-table/kt-table.js';\nimport {\n KtTimeline as KtTimelineElement,\n KtTimelineItem as KtTimelineItemElement,\n} from '../components/data/kt-timeline/kt-timeline.js';\n\n/** Narrows an event name to the detail its element actually dispatches. */\ntype Kt<T> = EventName<CustomEvent<T>>;\n\n// === CORE ===\nexport const KtAvatar = createComponent({\n tagName: 'kt-avatar',\n elementClass: KtAvatarElement,\n react: React,\n});\n\nexport const KtBadge = createComponent({\n tagName: 'kt-badge',\n elementClass: KtBadgeElement,\n react: React,\n events: {\n onKtBadgeClick: 'kt-badge-click' as Kt<never>,\n onKtRemove: 'kt-remove' as Kt<never>,\n },\n});\n\nexport const KtButton = createComponent({\n tagName: 'kt-button',\n elementClass: KtButtonElement,\n react: React,\n});\n\nexport const KtSplitButton = createComponent({\n tagName: 'kt-split-button',\n elementClass: KtSplitButtonElement,\n react: React,\n events: {\n onKtSelect: 'kt-select' as Kt<{ value: string | number }>,\n onKtOpen: 'kt-open' as Kt<never>,\n onKtClose: 'kt-close' as Kt<never>,\n },\n});\n\nexport const KtCard = createComponent({\n tagName: 'kt-card',\n elementClass: KtCardElement,\n react: React,\n events: { onKtCardClick: 'kt-card-click' as Kt<never> },\n});\n\nexport const KtCode = createComponent({\n tagName: 'kt-code',\n elementClass: KtCodeElement,\n react: React,\n events: { onKtCopy: 'kt-copy' as Kt<{ code: string }> },\n});\n\nexport const KtIcon = createComponent({\n tagName: 'kt-icon',\n elementClass: KtIconElement,\n react: React,\n});\n\nexport const KtKbd = createComponent({\n tagName: 'kt-kbd',\n elementClass: KtKbdElement,\n react: React,\n});\n\n// === FORMS ===\nexport const KtForm = createComponent({\n tagName: 'kt-form',\n elementClass: KtFormElement,\n react: React,\n});\n\nexport const KtInput = createComponent({\n tagName: 'kt-input',\n elementClass: KtInputElement,\n react: React,\n events: {\n onKtInput: 'kt-input' as Kt<{ value: string }>,\n onKtChange: 'kt-change' as Kt<{ value: string }>,\n onKtClear: 'kt-clear' as Kt<never>,\n onKtCountryChange: 'kt-country-change' as Kt<{ country: string; dialCode: string }>,\n },\n});\n\nexport const KtTextarea = createComponent({\n tagName: 'kt-textarea',\n elementClass: KtTextareaElement,\n react: React,\n events: {\n onKtInput: 'kt-input' as Kt<{ value: string }>,\n onKtChange: 'kt-change' as Kt<{ value: string }>,\n },\n});\n\nexport const KtLabelInput = createComponent({\n tagName: 'kt-label-input',\n elementClass: KtLabelInputElement,\n react: React,\n});\n\nexport const KtToggle = createComponent({\n tagName: 'kt-toggle',\n elementClass: KtToggleElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ checked: boolean }> },\n});\n\nexport const KtSelect = createComponent({\n tagName: 'kt-select',\n elementClass: KtSelectElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ value: string | number | null }> },\n});\n\nexport const KtInputMenu = createComponent({\n tagName: 'kt-input-menu',\n elementClass: KtInputMenuElement,\n react: React,\n events: {\n onKtChange: 'kt-change' as Kt<{ value: string | number | null }>,\n onKtFilter: 'kt-filter' as Kt<{ query: string }>,\n },\n});\n\nexport const KtDragDrop = createComponent({\n tagName: 'kt-drag-drop',\n elementClass: KtDragDropElement,\n react: React,\n events: {\n onKtFilesChange: 'kt-files-change' as Kt<{ files: File[] }>,\n onKtFilesRejected: 'kt-files-rejected' as Kt<{ files: File[]; reason: 'type' | 'size' }>,\n },\n});\n\n// === NAVIGATION ===\nexport const KtBreadcrumb = createComponent({\n tagName: 'kt-breadcrumb',\n elementClass: KtBreadcrumbElement,\n react: React,\n events: { onKtNavigate: 'kt-navigate' as Kt<{ index: number }> },\n});\n\nexport const KtSubMenuNavigation = createComponent({\n tagName: 'kt-sub-menu-navigation',\n elementClass: KtSubMenuNavigationElement,\n react: React,\n events: { onKtNavigate: 'kt-navigate' as Kt<unknown> },\n});\n\nexport const KtPageHeader = createComponent({\n tagName: 'kt-page-header',\n elementClass: KtPageHeaderElement,\n react: React,\n});\n\nexport const KtSegmentedControl = createComponent({\n tagName: 'kt-segmented-control',\n elementClass: KtSegmentedControlElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ value: string | number }> },\n});\n\nexport const KtTabs = createComponent({\n tagName: 'kt-tabs',\n elementClass: KtTabsElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ value: string | number }> },\n});\n\nexport const KtHeader = createComponent({\n tagName: 'kt-header',\n elementClass: KtHeaderElement,\n react: React,\n events: { onKtMenuToggle: 'kt-menu-toggle' as Kt<{ open: boolean }> },\n});\n\nexport const KtToggleButton = createComponent({\n tagName: 'kt-toggle-button',\n elementClass: KtToggleButtonElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ selected: boolean; value: string }> },\n});\n\nexport const KtToggleButtonGroup = createComponent({\n tagName: 'kt-toggle-button-group',\n elementClass: KtToggleButtonGroupElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ value: string | string[] | null }> },\n});\n\n// === FEEDBACK ===\nexport const KtAlert = createComponent({\n tagName: 'kt-alert',\n elementClass: KtAlertElement,\n react: React,\n events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtEmptyState = createComponent({\n tagName: 'kt-empty-state',\n elementClass: KtEmptyStateElement,\n react: React,\n});\n\nexport const KtProgressBar = createComponent({\n tagName: 'kt-progress-bar',\n elementClass: KtProgressBarElement,\n react: React,\n});\n\nexport const KtSkeleton = createComponent({\n tagName: 'kt-skeleton',\n elementClass: KtSkeletonElement,\n react: React,\n});\n\nexport const KtTooltip = createComponent({\n tagName: 'kt-tooltip',\n elementClass: KtTooltipElement,\n react: React,\n});\n\nexport const KtToast = createComponent({\n tagName: 'kt-toast',\n elementClass: KtToastElement,\n react: React,\n events: { onKtToastClose: 'kt-toast-close' as Kt<never> },\n});\n\nexport const KtToastContainer = createComponent({\n tagName: 'kt-toast-container',\n elementClass: KtToastContainerElement,\n react: React,\n});\n\n// === OVERLAYS ===\nexport const KtCollapsible = createComponent({\n tagName: 'kt-collapsible',\n elementClass: KtCollapsibleElement,\n react: React,\n events: { onKtToggle: 'kt-toggle' as Kt<{ open: boolean }> },\n});\n\nexport const KtDropdown = createComponent({\n tagName: 'kt-dropdown',\n elementClass: KtDropdownElement,\n react: React,\n events: {\n onKtSelect: 'kt-select' as Kt<{ value: string | number }>,\n onKtOpen: 'kt-open' as Kt<never>,\n onKtClose: 'kt-close' as Kt<never>,\n },\n});\n\nexport const KtModal = createComponent({\n tagName: 'kt-modal',\n elementClass: KtModalElement,\n react: React,\n events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtSidePanel = createComponent({\n tagName: 'kt-side-panel',\n elementClass: KtSidePanelElement,\n react: React,\n events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtConfirmDialog = createComponent({\n tagName: 'kt-confirm-dialog',\n elementClass: KtConfirmDialogElement,\n react: React,\n events: {\n onKtConfirm: 'kt-confirm' as Kt<never>,\n onKtCancel: 'kt-cancel' as Kt<never>,\n },\n});\n\n// === DATA ===\nexport const KtChart = createComponent({\n tagName: 'kt-chart',\n elementClass: KtChartElement,\n react: React,\n events: {\n onKtPointHover: 'kt-point-hover' as Kt<{ index: number; series: number }>,\n onKtSeriesToggle: 'kt-series-toggle' as Kt<{ series: number; hidden: boolean }>,\n },\n});\n\nexport const KtTable = createComponent({\n tagName: 'kt-table',\n elementClass: KtTableElement,\n react: React,\n events: {\n onKtSortChange: 'kt-sort-change' as Kt<{\n key: string | null;\n direction: 'asc' | 'desc' | null;\n }>,\n onKtSelectionChange: 'kt-selection-change' as Kt<{ selected: unknown[] }>,\n onKtRowClick: 'kt-row-click' as Kt<{ index: number }>,\n onKtPageChange: 'kt-page-change' as Kt<{ page: number }>,\n },\n});\n\nexport const KtMeter = createComponent({\n tagName: 'kt-meter',\n elementClass: KtMeterElement,\n react: React,\n});\n\nexport const KtPagination = createComponent({\n tagName: 'kt-pagination',\n elementClass: KtPaginationElement,\n react: React,\n events: { onKtPageChange: 'kt-page-change' as Kt<{ page: number }> },\n});\n\n// The imperative toaster needs no wrapper.\nexport { toaster } from '../components/feedback/kt-toast-container/toaster.js';\n\nexport const KtStat = createComponent({\n tagName: 'kt-stat',\n elementClass: KtStatElement,\n react: React,\n});\n\nexport const KtTimeline = createComponent({\n tagName: 'kt-timeline',\n elementClass: KtTimelineElement,\n react: React,\n});\n\nexport const KtTimelineItem = createComponent({\n tagName: 'kt-timeline-item',\n elementClass: KtTimelineItemElement,\n react: React,\n});\n"],"names":["KtAvatar","createComponent","KtAvatarElement","React","KtBadge","KtBadgeElement","KtButton","KtButtonElement","KtSplitButton","KtSplitButtonElement","KtCard","KtCardElement","KtCode","KtCodeElement","KtIcon","KtIconElement","KtKbd","KtKbdElement","KtForm","KtFormElement","KtInput","KtInputElement","KtTextarea","KtTextareaElement","KtLabelInput","KtLabelInputElement","KtToggle","KtToggleElement","KtSelect","KtSelectElement","KtInputMenu","KtInputMenuElement","KtDragDrop","KtDragDropElement","KtBreadcrumb","KtBreadcrumbElement","KtSubMenuNavigation","KtSubMenuNavigationElement","KtPageHeader","KtPageHeaderElement","KtSegmentedControl","KtSegmentedControlElement","KtTabs","KtTabsElement","KtHeader","KtHeaderElement","KtToggleButton","KtToggleButtonElement","KtToggleButtonGroup","KtToggleButtonGroupElement","KtAlert","KtAlertElement","KtEmptyState","KtEmptyStateElement","KtProgressBar","KtProgressBarElement","KtSkeleton","KtSkeletonElement","KtTooltip","KtTooltipElement","KtToast","KtToastElement","KtToastContainer","KtToastContainerElement","KtCollapsible","KtCollapsibleElement","KtDropdown","KtDropdownElement","KtModal","KtModalElement","KtSidePanel","KtSidePanelElement","KtConfirmDialog","KtConfirmDialogElement","KtChart","KtChartElement","KtTable","KtTableElement","KtMeter","KtMeterElement","KtPagination","KtPaginationElement","KtStat","KtStatElement","KtTimeline","KtTimelineElement","KtTimelineItem","KtTimelineItemElement"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../src/react/index.ts"],"sourcesContent":["/**\n * React wrappers for the Kanto elements — for React 18.\n *\n * React 18 sets every prop as a string attribute and cannot listen for custom\n * events, so each element is wrapped with `@lit/react`: props become\n * properties, `onKtChange` listens for `kt-change`, refs are typed as the\n * element. `@lit/react` is an optional peer dependency — a React 18 project\n * installs it alongside kanto-ds:\n *\n * npm install kanto-ds @lit/react\n *\n * import { KtButton, KtInput } from 'kanto-ds/react';\n * import 'kanto-ds/styles.css';\n *\n * <KtInput placeholder=\"Search\" onKtChange={(e) => setQuery(e.detail.value)} />\n *\n * React 19 needs none of this: it renders the `kt-*` tags directly, and\n * `kanto-ds/react/jsx` types them.\n */\nimport * as React from 'react';\nimport { createComponent, type EventName } from '@lit/react';\n\nimport { KtAvatar as KtAvatarElement } from '../components/core/kt-avatar/kt-avatar.js';\nimport { KtBadge as KtBadgeElement } from '../components/core/kt-badge/kt-badge.js';\nimport { KtButton as KtButtonElement } from '../components/core/kt-button/kt-button.js';\nimport { KtSplitButton as KtSplitButtonElement } from '../components/core/kt-split-button/kt-split-button.js';\nimport { KtCard as KtCardElement } from '../components/core/kt-card/kt-card.js';\nimport { KtCode as KtCodeElement } from '../components/core/kt-code/kt-code.js';\nimport { KtIcon as KtIconElement } from '../components/core/kt-icon/kt-icon.js';\nimport { KtKbd as KtKbdElement } from '../components/core/kt-kbd/kt-kbd.js';\nimport { KtDragDrop as KtDragDropElement } from '../components/forms/kt-drag-drop/kt-drag-drop.js';\nimport { KtForm as KtFormElement } from '../components/forms/kt-form/kt-form.js';\nimport { KtInput as KtInputElement } from '../components/forms/kt-input/kt-input.js';\nimport { KtInputMenu as KtInputMenuElement } from '../components/forms/kt-input-menu/kt-input-menu.js';\nimport { KtLabelInput as KtLabelInputElement } from '../components/forms/kt-label-input/kt-label-input.js';\nimport { KtSelect as KtSelectElement } from '../components/forms/kt-select/kt-select.js';\nimport { KtTextarea as KtTextareaElement } from '../components/forms/kt-textarea/kt-textarea.js';\nimport { KtToggle as KtToggleElement } from '../components/forms/kt-toggle/kt-toggle.js';\nimport { KtBreadcrumb as KtBreadcrumbElement } from '../components/navigation/kt-breadcrumb/kt-breadcrumb.js';\nimport { KtPageHeader as KtPageHeaderElement } from '../components/navigation/kt-page-header/kt-page-header.js';\nimport { KtSegmentedControl as KtSegmentedControlElement } from '../components/navigation/kt-segmented-control/kt-segmented-control.js';\nimport { KtSubMenuNavigation as KtSubMenuNavigationElement } from '../components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js';\nimport { KtTabs as KtTabsElement } from '../components/navigation/kt-tabs/kt-tabs.js';\nimport { KtHeader as KtHeaderElement } from '../components/navigation/kt-header/kt-header.js';\nimport { KtToggleButton as KtToggleButtonElement } from '../components/navigation/kt-toggle-button/kt-toggle-button.js';\nimport { KtToggleButtonGroup as KtToggleButtonGroupElement } from '../components/navigation/kt-toggle-button-group/kt-toggle-button-group.js';\nimport { KtAlert as KtAlertElement } from '../components/feedback/kt-alert/kt-alert.js';\nimport { KtEmptyState as KtEmptyStateElement } from '../components/feedback/kt-empty-state/kt-empty-state.js';\nimport { KtProgressBar as KtProgressBarElement } from '../components/feedback/kt-progress-bar/kt-progress-bar.js';\nimport { KtSkeleton as KtSkeletonElement } from '../components/feedback/kt-skeleton/kt-skeleton.js';\nimport { KtToast as KtToastElement } from '../components/feedback/kt-toast/kt-toast.js';\nimport { KtToastContainer as KtToastContainerElement } from '../components/feedback/kt-toast-container/kt-toast-container.js';\nimport { KtTooltip as KtTooltipElement } from '../components/feedback/kt-tooltip/kt-tooltip.js';\nimport { KtCollapsible as KtCollapsibleElement } from '../components/overlays/kt-collapsible/kt-collapsible.js';\nimport { KtConfirmDialog as KtConfirmDialogElement } from '../components/overlays/kt-confirm-dialog/kt-confirm-dialog.js';\nimport { KtDropdown as KtDropdownElement } from '../components/overlays/kt-dropdown/kt-dropdown.js';\nimport { KtModal as KtModalElement } from '../components/overlays/kt-modal/kt-modal.js';\nimport { KtSidePanel as KtSidePanelElement } from '../components/overlays/kt-side-panel/kt-side-panel.js';\nimport { KtChart as KtChartElement } from '../components/data/kt-chart/kt-chart.js';\nimport { KtMeter as KtMeterElement } from '../components/data/kt-meter/kt-meter.js';\nimport { KtPagination as KtPaginationElement } from '../components/data/kt-pagination/kt-pagination.js';\nimport { KtStat as KtStatElement } from '../components/data/kt-stat/kt-stat.js';\nimport { KtTable as KtTableElement } from '../components/data/kt-table/kt-table.js';\nimport {\n KtTimeline as KtTimelineElement,\n KtTimelineItem as KtTimelineItemElement,\n} from '../components/data/kt-timeline/kt-timeline.js';\n\n/** Narrows an event name to the detail its element actually dispatches. */\ntype Kt<T> = EventName<CustomEvent<T>>;\n\n// === CORE ===\nexport const KtAvatar = createComponent({\n tagName: 'kt-avatar',\n elementClass: KtAvatarElement,\n react: React,\n});\n\nexport const KtBadge = createComponent({\n tagName: 'kt-badge',\n elementClass: KtBadgeElement,\n react: React,\n events: {\n onKtBadgeClick: 'kt-badge-click' as Kt<never>,\n onKtRemove: 'kt-remove' as Kt<never>,\n },\n});\n\nexport const KtButton = createComponent({\n tagName: 'kt-button',\n elementClass: KtButtonElement,\n react: React,\n});\n\nexport const KtSplitButton = createComponent({\n tagName: 'kt-split-button',\n elementClass: KtSplitButtonElement,\n react: React,\n events: {\n onKtSelect: 'kt-select' as Kt<{ value: string | number }>,\n onKtOpen: 'kt-open' as Kt<never>,\n onKtClose: 'kt-close' as Kt<never>,\n },\n});\n\nexport const KtCard = createComponent({\n tagName: 'kt-card',\n elementClass: KtCardElement,\n react: React,\n events: { onKtCardClick: 'kt-card-click' as Kt<never> },\n});\n\nexport const KtCode = createComponent({\n tagName: 'kt-code',\n elementClass: KtCodeElement,\n react: React,\n events: { onKtCopy: 'kt-copy' as Kt<{ code: string }> },\n});\n\nexport const KtIcon = createComponent({\n tagName: 'kt-icon',\n elementClass: KtIconElement,\n react: React,\n});\n\nexport const KtKbd = createComponent({\n tagName: 'kt-kbd',\n elementClass: KtKbdElement,\n react: React,\n});\n\n// === FORMS ===\nexport const KtForm = createComponent({\n tagName: 'kt-form',\n elementClass: KtFormElement,\n react: React,\n});\n\nexport const KtInput = createComponent({\n tagName: 'kt-input',\n elementClass: KtInputElement,\n react: React,\n events: {\n onKtInput: 'kt-input' as Kt<{ value: string }>,\n onKtChange: 'kt-change' as Kt<{ value: string }>,\n onKtClear: 'kt-clear' as Kt<never>,\n onKtCountryChange: 'kt-country-change' as Kt<{ country: string; dialCode: string }>,\n },\n});\n\nexport const KtTextarea = createComponent({\n tagName: 'kt-textarea',\n elementClass: KtTextareaElement,\n react: React,\n events: {\n onKtInput: 'kt-input' as Kt<{ value: string }>,\n onKtChange: 'kt-change' as Kt<{ value: string }>,\n },\n});\n\nexport const KtLabelInput = createComponent({\n tagName: 'kt-label-input',\n elementClass: KtLabelInputElement,\n react: React,\n});\n\nexport const KtToggle = createComponent({\n tagName: 'kt-toggle',\n elementClass: KtToggleElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ checked: boolean }> },\n});\n\nexport const KtSelect = createComponent({\n tagName: 'kt-select',\n elementClass: KtSelectElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ value: string | number | null }> },\n});\n\nexport const KtInputMenu = createComponent({\n tagName: 'kt-input-menu',\n elementClass: KtInputMenuElement,\n react: React,\n events: {\n onKtChange: 'kt-change' as Kt<{ value: string | number | null }>,\n onKtFilter: 'kt-filter' as Kt<{ query: string }>,\n },\n});\n\nexport const KtDragDrop = createComponent({\n tagName: 'kt-drag-drop',\n elementClass: KtDragDropElement,\n react: React,\n events: {\n onKtFilesChange: 'kt-files-change' as Kt<{ files: File[] }>,\n onKtFilesRejected: 'kt-files-rejected' as Kt<{ files: File[]; reason: 'type' | 'size' }>,\n },\n});\n\n// === NAVIGATION ===\nexport const KtBreadcrumb = createComponent({\n tagName: 'kt-breadcrumb',\n elementClass: KtBreadcrumbElement,\n react: React,\n events: { onKtNavigate: 'kt-navigate' as Kt<{ index: number }> },\n});\n\nexport const KtSubMenuNavigation = createComponent({\n tagName: 'kt-sub-menu-navigation',\n elementClass: KtSubMenuNavigationElement,\n react: React,\n events: { onKtNavigate: 'kt-navigate' as Kt<unknown> },\n});\n\nexport const KtPageHeader = createComponent({\n tagName: 'kt-page-header',\n elementClass: KtPageHeaderElement,\n react: React,\n});\n\nexport const KtSegmentedControl = createComponent({\n tagName: 'kt-segmented-control',\n elementClass: KtSegmentedControlElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ value: string | number }> },\n});\n\nexport const KtTabs = createComponent({\n tagName: 'kt-tabs',\n elementClass: KtTabsElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ value: string | number }> },\n});\n\nexport const KtHeader = createComponent({\n tagName: 'kt-header',\n elementClass: KtHeaderElement,\n react: React,\n events: { onKtMenuToggle: 'kt-menu-toggle' as Kt<{ open: boolean }> },\n});\n\nexport const KtToggleButton = createComponent({\n tagName: 'kt-toggle-button',\n elementClass: KtToggleButtonElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ selected: boolean; value: string }> },\n});\n\nexport const KtToggleButtonGroup = createComponent({\n tagName: 'kt-toggle-button-group',\n elementClass: KtToggleButtonGroupElement,\n react: React,\n events: { onKtChange: 'kt-change' as Kt<{ value: string | string[] | null }> },\n});\n\n// === FEEDBACK ===\nexport const KtAlert = createComponent({\n tagName: 'kt-alert',\n elementClass: KtAlertElement,\n react: React,\n events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtEmptyState = createComponent({\n tagName: 'kt-empty-state',\n elementClass: KtEmptyStateElement,\n react: React,\n});\n\nexport const KtProgressBar = createComponent({\n tagName: 'kt-progress-bar',\n elementClass: KtProgressBarElement,\n react: React,\n});\n\nexport const KtSkeleton = createComponent({\n tagName: 'kt-skeleton',\n elementClass: KtSkeletonElement,\n react: React,\n});\n\nexport const KtTooltip = createComponent({\n tagName: 'kt-tooltip',\n elementClass: KtTooltipElement,\n react: React,\n});\n\nexport const KtToast = createComponent({\n tagName: 'kt-toast',\n elementClass: KtToastElement,\n react: React,\n events: { onKtToastClose: 'kt-toast-close' as Kt<never> },\n});\n\nexport const KtToastContainer = createComponent({\n tagName: 'kt-toast-container',\n elementClass: KtToastContainerElement,\n react: React,\n});\n\n// === OVERLAYS ===\nexport const KtCollapsible = createComponent({\n tagName: 'kt-collapsible',\n elementClass: KtCollapsibleElement,\n react: React,\n events: { onKtToggle: 'kt-toggle' as Kt<{ open: boolean }> },\n});\n\nexport const KtDropdown = createComponent({\n tagName: 'kt-dropdown',\n elementClass: KtDropdownElement,\n react: React,\n events: {\n onKtSelect: 'kt-select' as Kt<{ value: string | number }>,\n onKtOpen: 'kt-open' as Kt<never>,\n onKtClose: 'kt-close' as Kt<never>,\n },\n});\n\nexport const KtModal = createComponent({\n tagName: 'kt-modal',\n elementClass: KtModalElement,\n react: React,\n events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtSidePanel = createComponent({\n tagName: 'kt-side-panel',\n elementClass: KtSidePanelElement,\n react: React,\n events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtConfirmDialog = createComponent({\n tagName: 'kt-confirm-dialog',\n elementClass: KtConfirmDialogElement,\n react: React,\n events: {\n onKtConfirm: 'kt-confirm' as Kt<never>,\n onKtCancel: 'kt-cancel' as Kt<never>,\n },\n});\n\n// === DATA ===\nexport const KtChart = createComponent({\n tagName: 'kt-chart',\n elementClass: KtChartElement,\n react: React,\n events: {\n onKtPointHover: 'kt-point-hover' as Kt<{ index: number; series: number }>,\n onKtSeriesToggle: 'kt-series-toggle' as Kt<{ series: number; hidden: boolean }>,\n },\n});\n\nexport const KtTable = createComponent({\n tagName: 'kt-table',\n elementClass: KtTableElement,\n react: React,\n events: {\n onKtSortChange: 'kt-sort-change' as Kt<{\n key: string | null;\n direction: 'asc' | 'desc' | null;\n }>,\n onKtSelectionChange: 'kt-selection-change' as Kt<{ selected: unknown[] }>,\n onKtRowClick: 'kt-row-click' as Kt<{ index: number }>,\n onKtPageChange: 'kt-page-change' as Kt<{ page: number }>,\n },\n});\n\nexport const KtMeter = createComponent({\n tagName: 'kt-meter',\n elementClass: KtMeterElement,\n react: React,\n});\n\nexport const KtPagination = createComponent({\n tagName: 'kt-pagination',\n elementClass: KtPaginationElement,\n react: React,\n events: { onKtPageChange: 'kt-page-change' as Kt<{ page: number }> },\n});\n\n// The imperative toaster needs no wrapper.\nexport { toaster } from '../components/feedback/kt-toast-container/toaster.js';\n\nexport const KtStat = createComponent({\n tagName: 'kt-stat',\n elementClass: KtStatElement,\n react: React,\n});\n\nexport const KtTimeline = createComponent({\n tagName: 'kt-timeline',\n elementClass: KtTimelineElement,\n react: React,\n});\n\nexport const KtTimelineItem = createComponent({\n tagName: 'kt-timeline-item',\n elementClass: KtTimelineItemElement,\n react: React,\n});\n"],"names":["KtAvatar","createComponent","KtAvatarElement","React","KtBadge","KtBadgeElement","KtButton","KtButtonElement","KtSplitButton","KtSplitButtonElement","KtCard","KtCardElement","KtCode","KtCodeElement","KtIcon","KtIconElement","KtKbd","KtKbdElement","KtForm","KtFormElement","KtInput","KtInputElement","KtTextarea","KtTextareaElement","KtLabelInput","KtLabelInputElement","KtToggle","KtToggleElement","KtSelect","KtSelectElement","KtInputMenu","KtInputMenuElement","KtDragDrop","KtDragDropElement","KtBreadcrumb","KtBreadcrumbElement","KtSubMenuNavigation","KtSubMenuNavigationElement","KtPageHeader","KtPageHeaderElement","KtSegmentedControl","KtSegmentedControlElement","KtTabs","KtTabsElement","KtHeader","KtHeaderElement","KtToggleButton","KtToggleButtonElement","KtToggleButtonGroup","KtToggleButtonGroupElement","KtAlert","KtAlertElement","KtEmptyState","KtEmptyStateElement","KtProgressBar","KtProgressBarElement","KtSkeleton","KtSkeletonElement","KtTooltip","KtTooltipElement","KtToast","KtToastElement","KtToastContainer","KtToastContainerElement","KtCollapsible","KtCollapsibleElement","KtDropdown","KtDropdownElement","KtModal","KtModalElement","KtSidePanel","KtSidePanelElement","KtConfirmDialog","KtConfirmDialogElement","KtChart","KtChartElement","KtTable","KtTableElement","KtMeter","KtMeterElement","KtPagination","KtPaginationElement","KtStat","KtStatElement","KtTimeline","KtTimelineElement","KtTimelineItem","KtTimelineItemElement"],"mappings":"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"}
package/dist/react/jsx.d.ts ADDED
@@ -0,0 +1,213 @@
1
+ /**
2
+ * JSX typings for the Kanto elements, for React 19.
3
+ *
4
+ * React 19 renders custom elements natively: it sets a prop as a property when
5
+ * the element has one — so `options={regions}` reaches `<kt-select>` as an
6
+ * array — and a prop named `on` + an event name listens for that event, so
7
+ * `onkt-change` hears `kt-change`. What it cannot know is which tags exist
8
+ * and what they take; without this module TypeScript rejects every `kt-*`
9
+ * tag. It is types only: importing it loads nothing, and it needs no package
10
+ * beyond React itself.
11
+ *
12
+ * import 'kanto-ds';
13
+ * import 'kanto-ds/styles.css';
14
+ * import type {} from 'kanto-ds/react/jsx';
15
+ *
16
+ * <kt-select options={regions} onkt-change={(e) => setRegion(e.detail.value)} />
17
+ *
18
+ * React 18 cannot do either, which is what the wrappers in `kanto-ds/react`
19
+ * are for.
20
+ */
21
+ import type * as React from 'react';
22
+ import type { KtAvatar, KtBadge, KtButton, KtSplitButton, KtCard, KtCode, KtIcon, KtKbd, KtForm, KtInput, KtTextarea, KtLabelInput, KtToggle, KtSelect, KtInputMenu, KtDragDrop, KtBreadcrumb, KtSubMenuNavigation, KtPageHeader, KtSegmentedControl, KtTabs, KtHeader, KtToggleButton, KtToggleButtonGroup, KtAlert, KtEmptyState, KtProgressBar, KtSkeleton, KtTooltip, KtToast, KtToastContainer, KtCollapsible, KtDropdown, KtModal, KtSidePanel, KtConfirmDialog, KtChart, KtTable, KtMeter, KtPagination, KtStat, KtTimeline, KtTimelineItem } from 'kanto-ds';
23
+ /** The `on<event>` props React 19 turns into listeners, typed by their detail. */
24
+ type Handlers<E> = {
25
+ [K in keyof E & string as `on${K}`]?: (event: CustomEvent<E[K]>) => void;
26
+ };
27
+ /**
28
+ * What a `kt-*` tag accepts in JSX: its own public properties, the usual
29
+ * HTML attributes and a typed ref, plus a handler for each event it fires.
30
+ */
31
+ type KtProps<T extends HTMLElement, E = Record<never, never>> = Partial<Omit<T, keyof HTMLElement>> & React.HTMLAttributes<T> & React.RefAttributes<T> & Handlers<E>;
32
+ declare module 'react' {
33
+ namespace JSX {
34
+ interface IntrinsicElements {
35
+ 'kt-avatar': KtProps<KtAvatar>;
36
+ 'kt-badge': KtProps<KtBadge, {
37
+ 'kt-badge-click': never;
38
+ 'kt-remove': never;
39
+ }>;
40
+ 'kt-button': KtProps<KtButton>;
41
+ 'kt-split-button': KtProps<KtSplitButton, {
42
+ 'kt-select': {
43
+ value: string | number;
44
+ };
45
+ 'kt-open': never;
46
+ 'kt-close': never;
47
+ }>;
48
+ 'kt-card': KtProps<KtCard, {
49
+ 'kt-card-click': never;
50
+ }>;
51
+ 'kt-code': KtProps<KtCode, {
52
+ 'kt-copy': {
53
+ code: string;
54
+ };
55
+ }>;
56
+ 'kt-icon': KtProps<KtIcon>;
57
+ 'kt-kbd': KtProps<KtKbd>;
58
+ 'kt-form': KtProps<KtForm>;
59
+ 'kt-input': KtProps<KtInput, {
60
+ 'kt-input': {
61
+ value: string;
62
+ };
63
+ 'kt-change': {
64
+ value: string;
65
+ };
66
+ 'kt-clear': never;
67
+ 'kt-country-change': {
68
+ country: string;
69
+ dialCode: string;
70
+ };
71
+ }>;
72
+ 'kt-textarea': KtProps<KtTextarea, {
73
+ 'kt-input': {
74
+ value: string;
75
+ };
76
+ 'kt-change': {
77
+ value: string;
78
+ };
79
+ }>;
80
+ 'kt-label-input': KtProps<KtLabelInput>;
81
+ 'kt-toggle': KtProps<KtToggle, {
82
+ 'kt-change': {
83
+ checked: boolean;
84
+ };
85
+ }>;
86
+ 'kt-select': KtProps<KtSelect, {
87
+ 'kt-change': {
88
+ value: string | number | null;
89
+ };
90
+ }>;
91
+ 'kt-input-menu': KtProps<KtInputMenu, {
92
+ 'kt-change': {
93
+ value: string | number | null;
94
+ };
95
+ 'kt-filter': {
96
+ query: string;
97
+ };
98
+ }>;
99
+ 'kt-drag-drop': KtProps<KtDragDrop, {
100
+ 'kt-files-change': {
101
+ files: File[];
102
+ };
103
+ 'kt-files-rejected': {
104
+ files: File[];
105
+ reason: 'type' | 'size';
106
+ };
107
+ }>;
108
+ 'kt-breadcrumb': KtProps<KtBreadcrumb, {
109
+ 'kt-navigate': {
110
+ index: number;
111
+ };
112
+ }>;
113
+ 'kt-sub-menu-navigation': KtProps<KtSubMenuNavigation, {
114
+ 'kt-navigate': unknown;
115
+ }>;
116
+ 'kt-page-header': KtProps<KtPageHeader>;
117
+ 'kt-segmented-control': KtProps<KtSegmentedControl, {
118
+ 'kt-change': {
119
+ value: string | number;
120
+ };
121
+ }>;
122
+ 'kt-tabs': KtProps<KtTabs, {
123
+ 'kt-change': {
124
+ value: string | number;
125
+ };
126
+ }>;
127
+ 'kt-header': KtProps<KtHeader, {
128
+ 'kt-menu-toggle': {
129
+ open: boolean;
130
+ };
131
+ }>;
132
+ 'kt-toggle-button': KtProps<KtToggleButton, {
133
+ 'kt-change': {
134
+ selected: boolean;
135
+ value: string;
136
+ };
137
+ }>;
138
+ 'kt-toggle-button-group': KtProps<KtToggleButtonGroup, {
139
+ 'kt-change': {
140
+ value: string | string[] | null;
141
+ };
142
+ }>;
143
+ 'kt-alert': KtProps<KtAlert, {
144
+ 'kt-close': never;
145
+ }>;
146
+ 'kt-empty-state': KtProps<KtEmptyState>;
147
+ 'kt-progress-bar': KtProps<KtProgressBar>;
148
+ 'kt-skeleton': KtProps<KtSkeleton>;
149
+ 'kt-tooltip': KtProps<KtTooltip>;
150
+ 'kt-toast': KtProps<KtToast, {
151
+ 'kt-toast-close': never;
152
+ }>;
153
+ 'kt-toast-container': KtProps<KtToastContainer>;
154
+ 'kt-collapsible': KtProps<KtCollapsible, {
155
+ 'kt-toggle': {
156
+ open: boolean;
157
+ };
158
+ }>;
159
+ 'kt-dropdown': KtProps<KtDropdown, {
160
+ 'kt-select': {
161
+ value: string | number;
162
+ };
163
+ 'kt-open': never;
164
+ 'kt-close': never;
165
+ }>;
166
+ 'kt-modal': KtProps<KtModal, {
167
+ 'kt-close': never;
168
+ }>;
169
+ 'kt-side-panel': KtProps<KtSidePanel, {
170
+ 'kt-close': never;
171
+ }>;
172
+ 'kt-confirm-dialog': KtProps<KtConfirmDialog, {
173
+ 'kt-confirm': never;
174
+ 'kt-cancel': never;
175
+ }>;
176
+ 'kt-chart': KtProps<KtChart, {
177
+ 'kt-point-hover': {
178
+ index: number;
179
+ series: number;
180
+ };
181
+ 'kt-series-toggle': {
182
+ series: number;
183
+ hidden: boolean;
184
+ };
185
+ }>;
186
+ 'kt-table': KtProps<KtTable, {
187
+ 'kt-sort-change': {
188
+ key: string | null;
189
+ direction: 'asc' | 'desc' | null;
190
+ };
191
+ 'kt-selection-change': {
192
+ selected: unknown[];
193
+ };
194
+ 'kt-row-click': {
195
+ index: number;
196
+ };
197
+ 'kt-page-change': {
198
+ page: number;
199
+ };
200
+ }>;
201
+ 'kt-meter': KtProps<KtMeter>;
202
+ 'kt-pagination': KtProps<KtPagination, {
203
+ 'kt-page-change': {
204
+ page: number;
205
+ };
206
+ }>;
207
+ 'kt-stat': KtProps<KtStat>;
208
+ 'kt-timeline': KtProps<KtTimeline>;
209
+ 'kt-timeline-item': KtProps<KtTimelineItem>;
210
+ }
211
+ }
212
+ }
213
+ export {};
package/dist/react/jsx.js ADDED
@@ -0,0 +1,2 @@
1
+
2
+ //# sourceMappingURL=jsx.js.map
package/dist/react/jsx.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"jsx.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/dist/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "kanto-ds",
4
- "version": "1.1.0",
4
+ "version": "1.2.0",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kanto-ds",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "Framework-agnostic design system for data-dense product interfaces.",
5
5
  "keywords": [
6
6
  "design-system",
@@ -55,6 +55,10 @@
55
55
  "types": "./dist/react/index.d.ts",
56
56
  "default": "./dist/react/index.js"
57
57
  },
58
+ "./react/jsx": {
59
+ "types": "./dist/react/jsx.d.ts",
60
+ "default": "./dist/react/jsx.js"
61
+ },
58
62
  "./vue": {
59
63
  "types": "./dist/vue/index.d.ts",
60
64
  "default": "./dist/vue/index.js"
@@ -266,20 +270,19 @@
266
270
  "prepublishOnly": "npm run verify"
267
271
  },
268
272
  "dependencies": {
269
- "@lit/react": "^1.0.8",
270
273
  "lit": "^3.3.3",
271
274
  "lucide": "^1.43.0"
272
275
  },
273
276
  "peerDependencies": {
277
+ "@lit/react": "^1.0.8",
274
278
  "react": "^18.0.0 || ^19.0.0",
275
- "react-dom": "^18.0.0 || ^19.0.0",
276
279
  "vue": "^3.4.0"
277
280
  },
278
281
  "peerDependenciesMeta": {
279
- "react": {
282
+ "@lit/react": {
280
283
  "optional": true
281
284
  },
282
- "react-dom": {
285
+ "react": {
283
286
  "optional": true
284
287
  },
285
288
  "vue": {
@@ -289,7 +292,9 @@
289
292
  "devDependencies": {
290
293
  "@custom-elements-manifest/analyzer": "^0.11.0",
291
294
  "@eslint/js": "^10.0.1",
295
+ "@lit/react": "^1.0.8",
292
296
  "@types/react": "^19.2.18",
297
+ "@types/react-dom": "^19.3.0",
293
298
  "@vitest/browser-playwright": "^5.0.1",
294
299
  "@vitest/coverage-v8": "^5.0.1",
295
300
  "axe-core": "^4.13.0",
@@ -306,6 +311,7 @@
306
311
  "playwright": "^1.63.0",
307
312
  "prettier": "^3.9.6",
308
313
  "react": "^19.2.8",
314
+ "react-dom": "^19.2.8",
309
315
  "typescript": "^5.9.3",
310
316
  "typescript-eslint": "^8.70.0",
311
317
  "vite": "^7.3.6",