@cronocode/react-box 3.0.20 → 3.1.1

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 (53) hide show
  1. package/box.d.ts +7 -2
  2. package/box.mjs +4 -4
  3. package/components/baseSvg.cjs +1 -1
  4. package/components/baseSvg.d.ts +1 -1
  5. package/components/button.cjs +1 -1
  6. package/components/checkbox.cjs +1 -1
  7. package/components/dataGrid/components/dataGridBody.d.ts +7 -0
  8. package/components/dataGrid/components/dataGridBottomBar.d.ts +6 -0
  9. package/components/dataGrid/components/dataGridColumnGroups.d.ts +1 -1
  10. package/components/dataGrid/components/dataGridContent.d.ts +6 -0
  11. package/components/dataGrid/components/dataGridHeader.d.ts +6 -0
  12. package/components/dataGrid/components/dataGridHeaderCellContextMenu.d.ts +6 -0
  13. package/components/dataGrid/components/dataGridHeaderCellResizer.d.ts +6 -0
  14. package/components/dataGrid/components/dataGridPagination.d.ts +1 -1
  15. package/components/dataGrid/components/dataGridTopBar.d.ts +6 -0
  16. package/components/dataGrid/components/dataGridTopBarContextMenu.d.ts +6 -0
  17. package/components/dataGrid/contracts/dataGridContract.d.ts +16 -0
  18. package/components/dataGrid/models/columnModel.d.ts +1 -1
  19. package/components/dataGrid/models/gridModel.d.ts +15 -7
  20. package/components/dataGrid/models/groupRowModel.d.ts +3 -2
  21. package/components/dataGrid/models/rowModel.d.ts +8 -7
  22. package/components/dataGrid.cjs +1 -1
  23. package/components/dataGrid.d.ts +1 -1
  24. package/components/dataGrid.mjs +511 -576
  25. package/components/dropdown.cjs +1 -1
  26. package/components/dropdown.d.ts +1 -1
  27. package/components/dropdown.mjs +111 -135
  28. package/components/flex.cjs +1 -1
  29. package/components/form.cjs +1 -1
  30. package/components/form.mjs +1 -1
  31. package/components/grid.cjs +1 -1
  32. package/components/radioButton.cjs +1 -1
  33. package/components/radioButton.mjs +10 -10
  34. package/components/semantics.d.ts +25 -25
  35. package/components/semantics.mjs +1 -1
  36. package/components/textarea.cjs +1 -1
  37. package/components/textbox.cjs +1 -1
  38. package/components/tooltip.cjs +1 -1
  39. package/components/tooltip.d.ts +6 -3
  40. package/components/tooltip.mjs +34 -34
  41. package/core/boxStyles.d.ts +28 -4
  42. package/core/boxStylesFormatters.d.ts +1 -1
  43. package/core/coreTypes.d.ts +1 -1
  44. package/core/extends/boxComponents.d.ts +194 -18
  45. package/core.cjs +3 -3
  46. package/core.mjs +476 -306
  47. package/icons/expandIcon.d.ts +2 -0
  48. package/icons/sortIcon.d.ts +2 -0
  49. package/package.json +22 -14
  50. package/ssg.cjs +1 -1
  51. package/ssg.mjs +17 -16
  52. package/utils/object/objectUtils.d.ts +2 -2
  53. package/icons/arrowIcon.d.ts +0 -2
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" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
7
- export declare const Span: SemanticComponentType<"span", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
8
- export declare const Article: SemanticComponentType<"article", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
9
- export declare const Aside: SemanticComponentType<"aside", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
10
- export declare const Details: SemanticComponentType<"details", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
11
- export declare const Figcaption: SemanticComponentType<"figcaption", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
12
- export declare const Figure: SemanticComponentType<"figure", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
13
- export declare const Footer: SemanticComponentType<"footer", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
14
- export declare const Header: SemanticComponentType<"header", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
15
- export declare const Main: SemanticComponentType<"main", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
16
- export declare const Mark: SemanticComponentType<"mark", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
17
- export declare const Nav: SemanticComponentType<"nav", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
18
- export declare const Menu: SemanticComponentType<"menu", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
19
- export declare const Section: SemanticComponentType<"section", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
20
- export declare const Summary: SemanticComponentType<"summary", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
21
- export declare const Time: SemanticComponentType<"time", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
22
- export declare const P: SemanticComponentType<"p", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
23
- export declare const H1: SemanticComponentType<"h1", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
24
- export declare const H2: SemanticComponentType<"h2", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
25
- export declare const H3: SemanticComponentType<"h3", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
26
- export declare const H4: SemanticComponentType<"h4", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
27
- export declare const H5: SemanticComponentType<"h5", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
28
- export declare const H6: SemanticComponentType<"h6", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
29
- export declare const Link: SemanticComponentType<"a", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
30
- export declare const Img: SemanticComponentType<"img", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
6
+ export declare const Label: SemanticComponentType<"label", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "textarea" | "checkbox" | "textbox" | "datagrid" | "radioButton" | "dropdown" | "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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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.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.cell" | "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">;
31
31
  export {};
package/components/semantics.mjs CHANGED
@@ -1,7 +1,7 @@
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 { f as a } from "../core.mjs";
4
+ import { e 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;
package/components/textarea.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";const o=require("react/jsx-runtime"),n=require("react"),s=require("../box.cjs"),c=require("../core.cjs"),u=["name","onInput","onChange","placeholder","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly"];function l(t,a){const r=c.ObjectUtils.buildProps(t,u);return o.jsx(s.default,{ref:a,tag:"textarea",component:"textarea",...r})}const e=n.forwardRef(l);e.displayName="Textarea";module.exports=e;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),s=require("../core.cjs"),l=["name","onInput","onChange","placeholder","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly"];function c(t,a){const r=s.ObjectUtils.buildProps(t,l);return o.jsx(u.default,{ref:a,tag:"textarea",component:"textarea",...r})}const e=n.forwardRef(c);e.displayName="Textarea";exports.default=e;
package/components/textbox.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";const n=require("react/jsx-runtime"),s=require("react"),u=require("../box.cjs"),a=require("../core.cjs"),c=["name","onInput","onChange","type","placeholder","defaultValue","autoFocus","readOnly","required","value","pattern"];function i(t,o){const r=a.ObjectUtils.buildProps(t,c);return n.jsx(u.default,{ref:o,tag:"input",component:"textbox",...r})}const e=s.forwardRef(i);e.displayName="Textbox";module.exports=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","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/tooltip.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";const i=require("react/jsx-runtime"),C=require("react-dom"),d=require("../box.cjs"),s=require("react"),R=require("../core.cjs"),c=2;function j(f,b){const{onPositionChange:a}=f,l=s.useRef(null),[t,h]=s.useState(),x=R.usePortalContainer(),g=s.useCallback((r,e)=>{const n=p=>{p.target.contains(r)&&e(r)},o=new AbortController;return document.addEventListener("scroll",n,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),m=s.useCallback((r,e)=>{const n=p=>{e(r)},o=new AbortController;return window.addEventListener("resize",n,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),u=s.useCallback(r=>{const e=r.getBoundingClientRect(),n=Math.round((e.top+window.scrollY)*c)/c,o=Math.round((e.left+window.scrollX)*c)/c;((t==null?void 0:t.top)!==n||(t==null?void 0:t.left)!==o)&&(a==null||a({top:n,left:o}),h({top:n,left:o,width:e.width>0?e.width:void 0}))},[t]);return s.useLayoutEffect(()=>{if(l.current){u(l.current);const r=g(l.current,u),e=m(l.current,u);return()=>{r(),e()}}},[t]),i.jsxs(i.Fragment,{children:[i.jsx(d.default,{ref:l}),t&&C.createPortal(i.jsx(d.default,{ref:b,position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${t.left}px,${t.top}px)`,width:t.width},children:i.jsx(d.default,{position:"absolute",width:"fit",...f})}),x)]})}const w=s.forwardRef(j);w.displayName="Tooltip";module.exports=w;
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;
package/components/tooltip.d.ts CHANGED
@@ -1,9 +1,12 @@
1
+ import { RefAttributes } from 'react';
1
2
  import { BoxProps } from '../box';
2
- interface Props extends BoxProps {
3
+ import { ExtractElementFromTag } from '../core/coreTypes';
4
+ import { ComponentsAndVariants } from '../types';
5
+ interface TooltipProps {
3
6
  onPositionChange?(position: {
4
7
  top: number;
5
8
  left: number;
6
9
  }): void;
7
10
  }
8
- declare const Tooltip: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
9
- export default Tooltip;
11
+ 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
+ export default _default;
package/components/tooltip.mjs CHANGED
@@ -1,61 +1,61 @@
1
- import { jsxs as x, Fragment as C, jsx as a } from "react/jsx-runtime";
2
- import { createPortal as v } from "react-dom";
3
- import u from "../box.mjs";
4
- import { forwardRef as R, useRef as y, useState as z, useCallback as d, useLayoutEffect as A } from "react";
5
- import { g as D } from "../core.mjs";
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";
6
6
  const i = 2;
7
- function E(f, m) {
8
- const { onPositionChange: l } = f, s = y(null), [t, w] = z(), b = D(), g = d(
9
- (r, o) => {
10
- const n = (p) => {
11
- p.target.contains(r) && o(r);
12
- }, e = new AbortController();
13
- return document.addEventListener("scroll", n, { signal: e.signal, capture: !0 }), () => e.abort();
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();
14
14
  },
15
15
  [t]
16
- ), h = d(
17
- (r, o) => {
18
- const n = (p) => {
19
- o(r);
20
- }, e = new AbortController();
21
- return window.addEventListener("resize", n, { signal: e.signal, capture: !0 }), () => e.abort();
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();
22
22
  },
23
23
  [t]
24
- ), c = d(
25
- (r) => {
26
- const o = r.getBoundingClientRect(), n = Math.round((o.top + window.scrollY) * i) / i, e = Math.round((o.left + window.scrollX) * i) / i;
27
- ((t == null ? void 0 : t.top) !== n || (t == null ? void 0 : t.left) !== e) && (l == null || l({ top: n, left: e }), w({ top: n, left: e, width: o.width > 0 ? o.width : void 0 }));
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 }));
28
28
  },
29
29
  [t]
30
30
  );
31
- return A(() => {
31
+ return z(() => {
32
32
  if (s.current) {
33
- c(s.current);
34
- const r = g(s.current, c), o = h(s.current, c);
33
+ l(s.current);
34
+ const e = b(s.current, l), o = C(s.current, l);
35
35
  return () => {
36
- r(), o();
36
+ e(), o();
37
37
  };
38
38
  }
39
- }, [t]), /* @__PURE__ */ x(C, { children: [
40
- /* @__PURE__ */ a(u, { ref: s }),
41
- t && v(
39
+ }, [t]), /* @__PURE__ */ x(v, { children: [
40
+ /* @__PURE__ */ a(p, { ref: s }),
41
+ t && A(
42
42
  /* @__PURE__ */ a(
43
- u,
43
+ p,
44
44
  {
45
- ref: m,
45
+ ref: f,
46
46
  position: "absolute",
47
47
  top: 0,
48
48
  left: 0,
49
49
  transition: "none",
50
50
  style: { transform: `translate(${t.left}px,${t.top}px)`, width: t.width },
51
- children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...f })
51
+ children: /* @__PURE__ */ a(p, { ...w })
52
52
  }
53
53
  ),
54
- b
54
+ h
55
55
  )
56
56
  ] });
57
57
  }
58
- const H = R(E);
58
+ const H = P(E);
59
59
  H.displayName = "Tooltip";
60
60
  export {
61
61
  H as default
package/core/boxStyles.d.ts CHANGED
@@ -404,7 +404,7 @@ export declare const cssStyles: {
404
404
  } | {
405
405
  styleName: string;
406
406
  values: readonly ["font-size"];
407
- valueFormat: (value: string) => string;
407
+ valueFormat: () => string;
408
408
  })[];
409
409
  /** The list-style CSS shorthand property allows you to set all the list style properties at once. */
410
410
  listStyle: {
@@ -674,6 +674,11 @@ export declare const cssStyles: {
674
674
  values: readonly [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000];
675
675
  valueFormat: (value: number) => string;
676
676
  }[];
677
+ /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect. */
678
+ transitionTimingFunction: {
679
+ styleName: string;
680
+ values: readonly ["linear", "ease", "ease-in", "ease-in-out", "ease-out"];
681
+ }[];
677
682
  /** The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes. */
678
683
  userSelect: {
679
684
  styleName: string;
@@ -754,53 +759,68 @@ export declare const cssStyles: {
754
759
  styleName: string;
755
760
  values: number;
756
761
  }[];
762
+ /** The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value. */
757
763
  color: {
758
764
  values: Variables.ColorType[];
759
765
  valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
760
766
  }[];
767
+ /** The background-color CSS property sets the background color of an element. */
761
768
  bgColor: {
762
769
  values: Variables.ColorType[];
763
770
  valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
764
771
  styleName: string;
765
772
  }[];
773
+ /** The border-color shorthand CSS property sets the color of an element's border. */
766
774
  borderColor: {
767
775
  values: Variables.ColorType[];
768
776
  valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
769
777
  styleName: string;
770
778
  }[];
779
+ /** The outline-color CSS property sets the color of an element's outline. */
771
780
  outlineColor: {
772
781
  values: Variables.ColorType[];
773
782
  valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
774
783
  styleName: string;
775
784
  }[];
785
+ /** The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute. */
776
786
  fill: {
777
787
  values: Variables.ColorType[];
778
788
  valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
779
789
  }[];
790
+ /** The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. */
780
791
  stroke: {
781
792
  values: Variables.ColorType[];
782
793
  valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
783
794
  }[];
795
+ /** The background-image CSS property sets one or more background images on an element. */
784
796
  bgImage: {
785
797
  values: readonly ["none", "bg-img-checked", "bg-img-indeterminate", "bg-img-radio"];
786
798
  valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
787
799
  styleName: string;
788
800
  }[];
801
+ /** The box-shadow CSS property adds shadow effects around an element's frame */
789
802
  shadow: {
790
- values: readonly ["small-shadow", "medium-shadow", "large-shadow"];
803
+ values: readonly ["small", "medium", "large"];
791
804
  valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
792
805
  styleName: string;
793
806
  }[];
807
+ /** The translateY() CSS function repositions an element vertically on the 2D plane. */
794
808
  translateX: {
795
809
  values: number;
796
810
  valueFormat: (value: number) => string;
797
811
  styleName: string;
798
812
  }[];
813
+ /** The translateY() CSS function repositions an element vertically on the 2D plane. */
799
814
  translateY: {
800
815
  values: number;
801
816
  valueFormat: (value: number) => string;
802
817
  styleName: string;
803
818
  }[];
819
+ /** The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. */
820
+ content: {
821
+ values: readonly ["empty"];
822
+ valueFormat: () => string;
823
+ }[];
804
824
  };
805
825
  export declare const pseudo1: {
806
826
  hover: string;
@@ -815,6 +835,8 @@ export declare const pseudo1: {
815
835
  hasChecked: string;
816
836
  hasRequired: string;
817
837
  hasDisabled: string;
838
+ before: string;
839
+ after: string;
818
840
  };
819
841
  export declare const pseudo2: {
820
842
  indeterminate: string;
@@ -842,10 +864,12 @@ export declare const pseudoClasses: {
842
864
  hasChecked: string;
843
865
  hasRequired: string;
844
866
  hasDisabled: string;
867
+ before: string;
868
+ after: string;
845
869
  };
846
- export declare const pseudoClassesWeight: Record<"theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled", number>;
870
+ export declare const pseudoClassesWeight: Record<"theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled" | "before" | "after", number>;
847
871
  export declare const pseudoClassesByWeight: {
848
- [key: number]: ("theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled")[];
872
+ [key: number]: ("theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled" | "before" | "after")[];
849
873
  };
850
874
  export declare const pseudoGroupClasses: {
851
875
  hoverGroup: "hover";
package/core/boxStylesFormatters.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare namespace BoxStylesFormatters {
4
4
  function svg(selector: string): string[];
5
5
  }
6
6
  namespace Value {
7
- function rem(value: number, _fn?: Function, divider?: number): string;
7
+ function rem(value: number, _fn?: () => void, divider?: number): string;
8
8
  function px(value: number): string;
9
9
  function fraction(value: string): string;
10
10
  function widthHeight(key: string, value: string): string;
package/core/coreTypes.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type BoxStylesType<T> = T extends ReadonlyArray<infer U> ? T[number] : T;
1
+ export type BoxStylesType<T> = T extends ReadonlyArray<unknown> ? T[number] : T;
2
2
  export type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
3
3
  export type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
4
4
  interface BoxStyleArrayString {