@cronocode/react-box 3.1.3 → 3.1.7

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 (34) hide show
  1. package/BOX_AI_CONTEXT.md +576 -0
  2. package/components/dataGrid/components/dataGridColumnFilter.d.ts +11 -0
  3. package/components/dataGrid/components/dataGridEmptyColumns.d.ts +1 -0
  4. package/components/dataGrid/components/dataGridFilterCell.d.ts +8 -0
  5. package/components/dataGrid/components/dataGridFilterRow.d.ts +6 -0
  6. package/components/dataGrid/components/dataGridGlobalFilter.d.ts +6 -0
  7. package/components/dataGrid/contracts/dataGridContract.d.ts +68 -0
  8. package/components/dataGrid/models/columnModel.d.ts +11 -0
  9. package/components/dataGrid/models/gridModel.d.ts +59 -2
  10. package/components/dataGrid.cjs +1 -1
  11. package/components/dataGrid.mjs +891 -314
  12. package/components/dropdown.cjs +1 -1
  13. package/components/dropdown.d.ts +4 -1
  14. package/components/dropdown.mjs +156 -147
  15. package/components/form.mjs +1 -1
  16. package/components/semantics.d.ts +25 -25
  17. package/components/semantics.mjs +5 -5
  18. package/components/textbox.cjs +1 -1
  19. package/components/textbox.d.ts +2 -2
  20. package/components/textbox.mjs +5 -4
  21. package/components/tooltip.cjs +1 -1
  22. package/components/tooltip.d.ts +4 -0
  23. package/components/tooltip.mjs +45 -41
  24. package/core/boxStyles.d.ts +65 -31
  25. package/core/extends/boxComponents.d.ts +660 -159
  26. package/core/variables.d.ts +25 -1
  27. package/core.cjs +3 -7
  28. package/core.mjs +1399 -693
  29. package/hooks/useVirtualization.d.ts +43 -0
  30. package/package.json +8 -5
  31. package/ssg.cjs +1 -1
  32. package/ssg.mjs +28 -20
  33. package/types.d.ts +5 -4
  34. package/utils/string/fuzzySearch.d.ts +27 -0
package/components/semantics.d.ts CHANGED
@@ -3,29 +3,29 @@ import { BoxProps } from '../box';
3
3
  import { ExtractElementFromTag } from '../core/coreTypes';
4
4
  import { ComponentsAndVariants } from '../types';
5
5
  type SemanticComponentType<TTag extends keyof React.JSX.IntrinsicElements, TKey extends keyof ComponentsAndVariants = never> = (props: Omit<BoxProps<TTag, TKey>, 'tag'> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
6
- export declare const Label: SemanticComponentType<"label", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
7
- export declare const Span: SemanticComponentType<"span", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
8
- export declare const Article: SemanticComponentType<"article", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
9
- export declare const Aside: SemanticComponentType<"aside", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
10
- export declare const Details: SemanticComponentType<"details", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
11
- export declare const Figcaption: SemanticComponentType<"figcaption", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
12
- export declare const Figure: SemanticComponentType<"figure", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
13
- export declare const Footer: SemanticComponentType<"footer", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
14
- export declare const Header: SemanticComponentType<"header", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
15
- export declare const Main: SemanticComponentType<"main", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
16
- export declare const Mark: SemanticComponentType<"mark", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
17
- export declare const Nav: SemanticComponentType<"nav", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
18
- export declare const Menu: SemanticComponentType<"menu", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
19
- export declare const Section: SemanticComponentType<"section", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
20
- export declare const Summary: SemanticComponentType<"summary", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
21
- export declare const Time: SemanticComponentType<"time", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
22
- export declare const P: SemanticComponentType<"p", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
23
- export declare const H1: SemanticComponentType<"h1", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
24
- export declare const H2: SemanticComponentType<"h2", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
25
- export declare const H3: SemanticComponentType<"h3", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
26
- export declare const H4: SemanticComponentType<"h4", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
27
- export declare const H5: SemanticComponentType<"h5", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
28
- export declare const H6: SemanticComponentType<"h6", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
29
- export declare const Link: SemanticComponentType<"a", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
30
- export declare const Img: SemanticComponentType<"img", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.contextMenu" | "datagrid.topBar.contextMenu.tooltip" | "datagrid.topBar.contextMenu.tooltip.item" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
6
+ export declare const Label: SemanticComponentType<"label", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
7
+ export declare const Span: SemanticComponentType<"span", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
8
+ export declare const Article: SemanticComponentType<"article", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
9
+ export declare const Aside: SemanticComponentType<"aside", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
10
+ export declare const Details: SemanticComponentType<"details", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
11
+ export declare const Figcaption: SemanticComponentType<"figcaption", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
12
+ export declare const Figure: SemanticComponentType<"figure", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
13
+ export declare const Footer: SemanticComponentType<"footer", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
14
+ export declare const Header: SemanticComponentType<"header", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
15
+ export declare const Main: SemanticComponentType<"main", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
16
+ export declare const Mark: SemanticComponentType<"mark", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
17
+ export declare const Nav: SemanticComponentType<"nav", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
18
+ export declare const Menu: SemanticComponentType<"menu", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
19
+ export declare const Section: SemanticComponentType<"section", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
20
+ export declare const Summary: SemanticComponentType<"summary", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
21
+ export declare const Time: SemanticComponentType<"time", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
22
+ export declare const P: SemanticComponentType<"p", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
23
+ export declare const H1: SemanticComponentType<"h1", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
24
+ export declare const H2: SemanticComponentType<"h2", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
25
+ export declare const H3: SemanticComponentType<"h3", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
26
+ export declare const H4: SemanticComponentType<"h4", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
27
+ export declare const H5: SemanticComponentType<"h5", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
28
+ export declare const H6: SemanticComponentType<"h6", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
29
+ export declare const Link: SemanticComponentType<"a", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
30
+ export declare const Img: SemanticComponentType<"img", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.row" | "datagrid.body" | "datagrid.body.cell" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.header.cell.resizer" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.bottomBar" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "dropdown.icon">;
31
31
  export {};
package/components/semantics.mjs CHANGED
@@ -1,16 +1,16 @@
1
1
  import { jsx as i } from "react/jsx-runtime";
2
2
  import { forwardRef as e } from "react";
3
3
  import r from "../box.mjs";
4
- import { e as a } from "../core.mjs";
4
+ import { g as a } from "../core.mjs";
5
5
  function o(t) {
6
6
  const n = e((s, c) => /* @__PURE__ */ i(r, { tag: t, ref: c, component: t, ...s }));
7
7
  return n.displayName = a.capitalize(t), n;
8
8
  }
9
- const u = o("label"), d = o("span"), h = o("article"), H = o("aside"), g = o("details"), S = o("figcaption"), k = o("figure"), x = o("footer"), y = o("header"), F = o("main"), M = o("mark"), b = o("nav"), v = o("menu"), A = o("section"), L = o("summary"), j = o("time"), w = o("p"), z = o("h1"), B = o("h2"), D = o("h3"), I = o("h4"), P = o("h5"), R = o("h6"), T = o("a"), U = o("img");
9
+ const u = o("label"), d = o("span"), g = o("article"), h = o("aside"), H = o("details"), S = o("figcaption"), k = o("figure"), x = o("footer"), y = o("header"), F = o("main"), M = o("mark"), b = o("nav"), v = o("menu"), A = o("section"), L = o("summary"), j = o("time"), w = o("p"), z = o("h1"), B = o("h2"), D = o("h3"), I = o("h4"), P = o("h5"), R = o("h6"), T = o("a"), U = o("img");
10
10
  export {
11
- h as Article,
12
- H as Aside,
13
- g as Details,
11
+ g as Article,
12
+ h as Aside,
13
+ H as Details,
14
14
  S as Figcaption,
15
15
  k as Figure,
16
16
  x as Footer,
package/components/textbox.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),u=require("react"),a=require("../box.cjs"),s=require("../core.cjs"),l=["name","onInput","onChange","type","placeholder","defaultValue","autoFocus","readOnly","required","value","pattern"];function c(t,o){const r=s.ObjectUtils.buildProps(t,l);return n.jsx(a.default,{ref:o,tag:"input",component:"textbox",...r})}const e=u.forwardRef(c);e.displayName="Textbox";exports.default=e;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),u=require("react"),a=require("../box.cjs"),s=require("../core.cjs"),l=["name","onInput","onChange","type","step","placeholder","defaultValue","autoFocus","readOnly","required","value","pattern"];function c(t,o){const r=s.ObjectUtils.buildProps(t,l);return n.jsx(a.default,{ref:o,tag:"input",component:"textbox",...r})}const e=u.forwardRef(c);e.displayName="Textbox";exports.default=e;
package/components/textbox.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { RefAttributes } from 'react';
2
2
  import { BoxProps, BoxTagProps } from '../box';
3
3
  import { ComponentsAndVariants } from '../types';
4
- declare const tagProps: readonly ["name", "onInput", "onChange", "type", "placeholder", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
4
+ declare const tagProps: readonly ["name", "onInput", "onChange", "type", "step", "placeholder", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
5
5
  type TagPropsType = (typeof tagProps)[number];
6
6
  type TextareaProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props'>;
7
- type TextboxTagProps = Omit<BoxTagProps<'input'>, TagPropsType | 'type'>;
7
+ type TextboxTagProps = Omit<BoxTagProps<'input'>, TagPropsType>;
8
8
  type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
9
9
  interface Props<TKey extends keyof ComponentsAndVariants> extends TextareaProps<TKey> {
10
10
  name?: string;
package/components/textbox.mjs CHANGED
@@ -2,11 +2,12 @@ import { jsx as r } from "react/jsx-runtime";
2
2
  import { forwardRef as a } from "react";
3
3
  import n from "../box.mjs";
4
4
  import { O as p } from "../core.mjs";
5
- const m = [
5
+ const s = [
6
6
  "name",
7
7
  "onInput",
8
8
  "onChange",
9
9
  "type",
10
+ "step",
10
11
  "placeholder",
11
12
  "defaultValue",
12
13
  "autoFocus",
@@ -15,11 +16,11 @@ const m = [
15
16
  "value",
16
17
  "pattern"
17
18
  ];
18
- function s(o, t) {
19
- const e = p.buildProps(o, m);
19
+ function m(o, t) {
20
+ const e = p.buildProps(o, s);
20
21
  return /* @__PURE__ */ r(n, { ref: t, tag: "input", component: "textbox", ...e });
21
22
  }
22
- const u = a(s);
23
+ const u = a(m);
23
24
  u.displayName = "Textbox";
24
25
  export {
25
26
  u as default
package/components/tooltip.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),s=require("react"),v=require("react-dom"),u=require("../box.cjs"),R=require("../core.cjs"),c=2;function j(f,w){const{onPositionChange:b,...g}=f,i=s.useRef(null),[t,h]=s.useState(),C=R.usePortalContainer(),m=s.useCallback((n,e)=>{const r=d=>{d.target.contains(n)&&e(n)},o=new AbortController;return document.addEventListener("scroll",r,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),x=s.useCallback((n,e)=>{const r=d=>{e(n)},o=new AbortController;return window.addEventListener("resize",r,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),a=s.useCallback(n=>{const e=n.getBoundingClientRect(),r=Math.round((e.top+window.scrollY)*c)/c,o=Math.round((e.left+window.scrollX)*c)/c;(t?.top!==r||t?.left!==o)&&(b?.({top:r,left:o}),h({top:r,left:o,width:e.width>0?e.width:void 0}))},[t]);return s.useLayoutEffect(()=>{if(i.current){a(i.current);const n=m(i.current,a),e=x(i.current,a);return()=>{n(),e()}}},[t]),l.jsxs(l.Fragment,{children:[l.jsx(u.default,{ref:i}),t&&v.createPortal(l.jsx(u.default,{ref:w,position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${t.left}px,${t.top}px)`,width:t.width},children:l.jsx(u.default,{...g})}),C)]})}const p=s.forwardRef(j);p.displayName="Tooltip";exports.default=p;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),s=require("react"),R=require("react-dom"),w=require("../box.cjs"),P=require("../core.cjs"),a=2;function T(f,b){const{onPositionChange:g,adjustTranslateX:h="0px",adjustTranslateY:C="0px",...m}=f,i=s.useRef(null),[t,x]=s.useState(),j=P.usePortalContainer(),S=s.useCallback((n,o)=>{const r=l=>{l.target.contains(n)&&o(n)},e=new AbortController;return document.addEventListener("scroll",r,{signal:e.signal,capture:!0}),()=>e.abort()},[t]),v=s.useCallback((n,o)=>{const r=l=>{o(n)},e=new AbortController;return window.addEventListener("resize",r,{signal:e.signal,capture:!0}),()=>e.abort()},[t]),u=s.useCallback(n=>{const o=n.getBoundingClientRect(),r=Math.round((o.top+window.scrollY)*a)/a,e=Math.round((o.left+window.scrollX)*a)/a,l=window.scrollX,d=window.scrollY;(t?.top!==r||t?.left!==e||t?.windowScrollX!==l||t?.windowScrollY!==d)&&(g?.({top:r,left:e,windowScrollX:l,windowScrollY:d}),x({top:r,left:e,width:o.width>0?o.width:void 0,windowScrollX:l,windowScrollY:d}))},[t]);return s.useLayoutEffect(()=>{if(i.current){u(i.current);const n=S(i.current,u),o=v(i.current,u);return()=>{n(),o()}}},[t]),c.jsxs(c.Fragment,{children:[c.jsx(w.default,{ref:i}),t&&R.createPortal(c.jsx(w.default,{ref:b,position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate3d(calc(${t.left}px + ${h}),calc(${t.top}px + ${C}), 0)`,willChange:"transform",width:t.width},children:c.jsx(w.default,{...m})}),j)]})}const p=s.forwardRef(T);p.displayName="Tooltip";exports.default=p;
package/components/tooltip.d.ts CHANGED
@@ -6,7 +6,11 @@ interface TooltipProps {
6
6
  onPositionChange?(position: {
7
7
  top: number;
8
8
  left: number;
9
+ windowScrollX: number;
10
+ windowScrollY: number;
9
11
  }): void;
12
+ adjustTranslateX?: string;
13
+ adjustTranslateY?: string;
10
14
  }
11
15
  declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>> & TooltipProps) => React.ReactNode;
12
16
  export default _default;
package/components/tooltip.mjs CHANGED
@@ -1,62 +1,66 @@
1
- import { jsxs as x, Fragment as v, jsx as a } from "react/jsx-runtime";
2
- import { forwardRef as P, useRef as R, useState as y, useCallback as c, useLayoutEffect as z } from "react";
3
- import { createPortal as A } from "react-dom";
4
- import p from "../box.mjs";
5
- import { f as D } from "../core.mjs";
1
+ import { jsxs as P, Fragment as R, jsx as d } from "react/jsx-runtime";
2
+ import { forwardRef as T, useRef as X, useState as Y, useCallback as p, useLayoutEffect as j } from "react";
3
+ import { createPortal as $ } from "react-dom";
4
+ import u from "../box.mjs";
5
+ import { h as y } from "../core.mjs";
6
6
  const i = 2;
7
- function E(d, f) {
8
- const { onPositionChange: m, ...w } = d, s = R(null), [t, g] = y(), h = D(), b = c(
9
- (e, o) => {
10
- const n = (u) => {
11
- u.target.contains(e) && o(e);
12
- }, r = new AbortController();
13
- return document.addEventListener("scroll", n, { signal: r.signal, capture: !0 }), () => r.abort();
7
+ function z(w, f) {
8
+ const { onPositionChange: m, adjustTranslateX: h = "0px", adjustTranslateY: g = "0px", ...C } = w, l = X(null), [o, b] = Y(), x = y(), S = p(
9
+ (r, t) => {
10
+ const e = (s) => {
11
+ s.target.contains(r) && t(r);
12
+ }, n = new AbortController();
13
+ return document.addEventListener("scroll", e, { signal: n.signal, capture: !0 }), () => n.abort();
14
14
  },
15
- [t]
16
- ), C = c(
17
- (e, o) => {
18
- const n = (u) => {
19
- o(e);
20
- }, r = new AbortController();
21
- return window.addEventListener("resize", n, { signal: r.signal, capture: !0 }), () => r.abort();
15
+ [o]
16
+ ), v = p(
17
+ (r, t) => {
18
+ const e = (s) => {
19
+ t(r);
20
+ }, n = new AbortController();
21
+ return window.addEventListener("resize", e, { signal: n.signal, capture: !0 }), () => n.abort();
22
22
  },
23
- [t]
24
- ), l = c(
25
- (e) => {
26
- const o = e.getBoundingClientRect(), n = Math.round((o.top + window.scrollY) * i) / i, r = Math.round((o.left + window.scrollX) * i) / i;
27
- (t?.top !== n || t?.left !== r) && (m?.({ top: n, left: r }), g({ top: n, left: r, width: o.width > 0 ? o.width : void 0 }));
23
+ [o]
24
+ ), c = p(
25
+ (r) => {
26
+ const t = r.getBoundingClientRect(), e = Math.round((t.top + window.scrollY) * i) / i, n = Math.round((t.left + window.scrollX) * i) / i, s = window.scrollX, a = window.scrollY;
27
+ (o?.top !== e || o?.left !== n || o?.windowScrollX !== s || o?.windowScrollY !== a) && (m?.({ top: e, left: n, windowScrollX: s, windowScrollY: a }), b({ top: e, left: n, width: t.width > 0 ? t.width : void 0, windowScrollX: s, windowScrollY: a }));
28
28
  },
29
- [t]
29
+ [o]
30
30
  );
31
- return z(() => {
32
- if (s.current) {
33
- l(s.current);
34
- const e = b(s.current, l), o = C(s.current, l);
31
+ return j(() => {
32
+ if (l.current) {
33
+ c(l.current);
34
+ const r = S(l.current, c), t = v(l.current, c);
35
35
  return () => {
36
- e(), o();
36
+ r(), t();
37
37
  };
38
38
  }
39
- }, [t]), /* @__PURE__ */ x(v, { children: [
40
- /* @__PURE__ */ a(p, { ref: s }),
41
- t && A(
42
- /* @__PURE__ */ a(
43
- p,
39
+ }, [o]), /* @__PURE__ */ P(R, { children: [
40
+ /* @__PURE__ */ d(u, { ref: l }),
41
+ o && $(
42
+ /* @__PURE__ */ d(
43
+ u,
44
44
  {
45
45
  ref: f,
46
46
  position: "absolute",
47
47
  top: 0,
48
48
  left: 0,
49
49
  transition: "none",
50
- style: { transform: `translate(${t.left}px,${t.top}px)`, width: t.width },
51
- children: /* @__PURE__ */ a(p, { ...w })
50
+ style: {
51
+ transform: `translate3d(calc(${o.left}px + ${h}),calc(${o.top}px + ${g}), 0)`,
52
+ willChange: "transform",
53
+ width: o.width
54
+ },
55
+ children: /* @__PURE__ */ d(u, { ...C })
52
56
  }
53
57
  ),
54
- h
58
+ x
55
59
  )
56
60
  ] });
57
61
  }
58
- const H = P(E);
59
- H.displayName = "Tooltip";
62
+ const A = T(z);
63
+ A.displayName = "Tooltip";
60
64
  export {
61
- H as default
65
+ A as default
62
66
  };