@cronocode/react-box 3.1.1 → 3.1.3

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 (21) hide show
  1. package/components/dataGrid/components/dataGridCell.d.ts +1 -1
  2. package/components/dataGrid/components/dataGridCellRowSelection.d.ts +6 -0
  3. package/components/dataGrid/components/dataGridCellText.d.ts +6 -0
  4. package/components/dataGrid/contracts/dataGridContract.d.ts +9 -1
  5. package/components/dataGrid/models/cellModel.d.ts +1 -1
  6. package/components/dataGrid/models/columnModel.d.ts +6 -3
  7. package/components/dataGrid/models/gridModel.d.ts +4 -3
  8. package/components/dataGrid/models/groupRowModel.d.ts +3 -1
  9. package/components/dataGrid/models/rowModel.d.ts +1 -1
  10. package/components/dataGrid.cjs +1 -1
  11. package/components/dataGrid.mjs +391 -348
  12. package/components/dropdown.cjs +1 -1
  13. package/components/dropdown.mjs +10 -10
  14. package/components/semantics.d.ts +25 -25
  15. package/core/boxStyles.d.ts +1 -0
  16. package/core/extends/boxComponents.d.ts +41 -32
  17. package/core/extends/useComponents.d.ts +1 -1
  18. package/core.cjs +4 -4
  19. package/core.mjs +162 -155
  20. package/package.json +3 -1
  21. package/types.d.ts +1 -1
package/components/dropdown.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),t=require("react"),f=require("../box.cjs"),G=require("./baseSvg.cjs"),Q=require("./button.cjs"),X=require("./flex.cjs"),L=require("./textbox.cjs"),Z=require("./tooltip.cjs"),ee=require("../core.cjs");function te(p,s){const{name:M,defaultValue:h,value:x,multiple:c,isSearchable:y,searchPlaceholder:B,children:j,hideIcon:H,onChange:S,props:K,...Y}=p,[J,w]=t.useState(Array.isArray(h)?h:h?[h]:[]),i="value"in p?Array.isArray(x)?x:x?[x]:[]:J,[b,_]=t.useState(""),[a,T,I]=ee.useVisibility(),k=t.useRef(null),U=t.useRef(null),[O,F]=t.useState(0),D=t.useMemo(()=>O>window.innerHeight/2,[O]),W=t.useMemo(()=>D?I.current?.getBoundingClientRect().height??0:0,[D,I]),l=t.useMemo(()=>(Array.isArray(j)?j:[j]).flatMap(e=>e),[j]),V=t.useMemo(()=>l.filter(e=>e.type?.displayName==="DropdownItem"),[l]),d=t.useMemo(()=>V.filter(e=>y&&b?R(e).toLowerCase().includes(b.toLowerCase()):!0),[y,b,l]),g=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownUnselect"),[l]),q=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownSelectAll"),[l]),N=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownEmptyItem"),[l]),A=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownDisplay"),[l]),$=t.useMemo(()=>{if(A)return typeof A.props.children=="function"?A.props.children(i,a):A.props.children;const e=d.filter(n=>i.includes(n.props.value));if(c&&e.length>1)return e.map(n=>R(n)).join(", ");const r=e.at(0);return r?.props.children??r?.props.value??(c?null:g?.props.children)},[c,d,i,g,a]),P=t.useCallback((e,...r)=>{if(r.length===0)w([]),S?.(void 0,[]);else if(c&&r.length>1){const n=r.map(u=>u.props.value);w(n),S?.(void 0,n)}else if(r.length===1){const n=r[0];if(c){const u=i.filter(C=>C!==n.props.value);u.length===i.length&&u.push(n.props.value),w(u),S?.(n.props.value,u)}else w([n.props.value]),S?.(n.props.value,[n.props.value])}c?(e.stopPropagation(),setTimeout(()=>k.current?.focus(),0)):(T(!1),setTimeout(()=>I.current?.focus(),0))},[c,i,w]);t.useEffect(()=>{a?setTimeout(()=>{k.current?.focus(),U.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({block:"nearest"})},0):_("")},[a]);const E=q&&c&&d.length>i.length,z=g&&d.length>0&&!E;return o.jsxs(f.default,{width:"fit-content",children:[i.map(e=>o.jsx(L.default,{ref:s,name:M,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),o.jsxs(Q.default,{ref:I,type:"button",component:"dropdown",onClick:()=>T(e=>!e),props:{tabIndex:0,...K},...Y,children:[y&&o.jsx(L.default,{display:a&&y?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:B,value:b,onChange:e=>_(e.target.value),ref:k,props:{onClick:e=>{a&&y&&e.stopPropagation()}}}),o.jsx(X.default,{component:"dropdown.display",display:a&&y?"none":"flex",children:$??o.jsx(o.Fragment,{children:" "})}),!H&&o.jsx(f.default,{children:o.jsx(G.default,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:o.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),a&&o.jsx(Z.default,{ref:U,position:"absolute",width:"fit",top:D?void 0:0,bottom:D?2:void 0,style:{transform:`translateY(-${W}px)`},onPositionChange:e=>F(e.top-window.scrollY),children:(d.length>0||N)&&o.jsxs(f.default,{component:"dropdown.items",children:[z&&o.jsx(f.default,{component:"dropdown.unselect",selected:i.length===0,...g.props,props:{...g.props.props,onClick:e=>P(e)}}),E&&o.jsx(f.default,{component:"dropdown.selectAll",...q.props,props:{...q.props.props,onClick:e=>P(e,...V)}}),d.map(e=>{const{value:r,onClick:n,...u}=e.props;return o.jsx(f.default,{component:"dropdown.item",variant:c?"multiple":void 0,selected:i.includes(r),...u,props:{...u.props,onClick:C=>{n?.(C),P(C,e)}}},r)}),d.length===0&&N&&o.jsx(f.default,{component:"dropdown.emptyItem",...N.props})]})})]})}function v(p){const s=M=>null;return s.displayName=p,s}const m=t.forwardRef(te);m.Item=v("DropdownItem");m.Unselect=v("DropdownUnselect");m.SelectAll=v("DropdownSelectAll");m.EmptyItem=v("DropdownEmptyItem");m.Display=v("DropdownDisplay");m.displayName="Dropdown";function R(p){if(p==null)return"";if(typeof p=="object"){const s=p.props?.children;return s==null?"":typeof s=="object"?(Array.isArray(s)?s:[s]).map(h=>R(h)).join(""):s.toString()}return p.toString()}exports.default=m;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),t=require("react"),f=require("../box.cjs"),G=require("../core.cjs"),Q=require("./baseSvg.cjs"),X=require("./button.cjs"),Z=require("./flex.cjs"),L=require("./textbox.cjs"),ee=require("./tooltip.cjs");function te(p,s){const{name:M,defaultValue:h,value:x,multiple:c,isSearchable:y,searchPlaceholder:B,children:j,hideIcon:H,onChange:S,props:K,...Y}=p,[J,w]=t.useState(Array.isArray(h)?h:h?[h]:[]),i="value"in p?Array.isArray(x)?x:x?[x]:[]:J,[b,_]=t.useState(""),[a,T,I]=G.useVisibility(),k=t.useRef(null),U=t.useRef(null),[O,F]=t.useState(0),D=t.useMemo(()=>O>window.innerHeight/2,[O]),W=t.useMemo(()=>D?I.current?.getBoundingClientRect().height??0:0,[D,I]),l=t.useMemo(()=>(Array.isArray(j)?j:[j]).flatMap(e=>e),[j]),V=t.useMemo(()=>l.filter(e=>e.type?.displayName==="DropdownItem"),[l]),d=t.useMemo(()=>V.filter(e=>y&&b?R(e).toLowerCase().includes(b.toLowerCase()):!0),[y,b,l]),g=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownUnselect"),[l]),q=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownSelectAll"),[l]),N=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownEmptyItem"),[l]),A=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownDisplay"),[l]),$=t.useMemo(()=>{if(A)return typeof A.props.children=="function"?A.props.children(i,a):A.props.children;const e=d.filter(n=>i.includes(n.props.value));if(c&&e.length>1)return e.map(n=>R(n)).join(", ");const r=e.at(0);return r?.props.children??r?.props.value??(c?null:g?.props.children)},[c,d,i,g,a]),P=t.useCallback((e,...r)=>{if(r.length===0)w([]),S?.(void 0,[]);else if(c&&r.length>1){const n=r.map(u=>u.props.value);w(n),S?.(void 0,n)}else if(r.length===1){const n=r[0];if(c){const u=i.filter(C=>C!==n.props.value);u.length===i.length&&u.push(n.props.value),w(u),S?.(n.props.value,u)}else w([n.props.value]),S?.(n.props.value,[n.props.value])}c?(e.stopPropagation(),setTimeout(()=>k.current?.focus(),0)):(T(!1),setTimeout(()=>I.current?.focus(),0))},[c,i,w]);t.useEffect(()=>{a?setTimeout(()=>{k.current?.focus(),U.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({block:"nearest"})},0):_("")},[a]);const E=q&&c&&d.length>i.length,z=g&&d.length>0&&!E;return o.jsxs(f.default,{width:"fit-content",children:[i.map(e=>o.jsx(L.default,{ref:s,name:M,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),o.jsxs(X.default,{ref:I,type:"button",component:"dropdown",onClick:()=>T(e=>!e),props:{tabIndex:0,...K},...Y,children:[y&&o.jsx(L.default,{display:a&&y?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:B,value:b,onChange:e=>_(e.target.value),ref:k,props:{onClick:e=>{a&&y&&e.stopPropagation()}}}),o.jsx(Z.default,{component:"dropdown.display",display:a&&y?"none":"flex",children:$??o.jsx(o.Fragment,{children:" "})}),!H&&o.jsx(f.default,{children:o.jsx(Q.default,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:o.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),a&&o.jsx(ee.default,{ref:U,position:"absolute",width:"fit",top:D?void 0:0,bottom:D?2:void 0,style:{transform:`translateY(-${W}px)`},onPositionChange:e=>F(e.top-window.scrollY),children:(d.length>0||N)&&o.jsxs(f.default,{component:"dropdown.items",children:[z&&o.jsx(f.default,{component:"dropdown.unselect",selected:i.length===0,...g.props,props:{...g.props.props,onClick:e=>P(e)}}),E&&o.jsx(f.default,{component:"dropdown.selectAll",...q.props,props:{...q.props.props,onClick:e=>P(e,...V)}}),d.map(e=>{const{value:r,onClick:n,...u}=e.props;return o.jsx(f.default,{component:"dropdown.item",variant:c?"multiple":void 0,selected:i.includes(r),...u,props:{...u.props,onClick:C=>{n?.(C),P(C,e)}}},r)}),d.length===0&&N&&o.jsx(f.default,{component:"dropdown.emptyItem",...N.props})]})})]})}function v(p){const s=M=>null;return s.displayName=p,s}const m=t.forwardRef(te);m.Item=v("DropdownItem");m.Unselect=v("DropdownUnselect");m.SelectAll=v("DropdownSelectAll");m.EmptyItem=v("DropdownEmptyItem");m.Display=v("DropdownDisplay");m.displayName="Dropdown";function R(p){if(p==null)return"";if(typeof p=="object"){const s=p.props?.children;return s==null?"":typeof s=="object"?(Array.isArray(s)?s:[s]).map(h=>R(h)).join(""):s.toString()}return p.toString()}exports.default=m;
package/components/dropdown.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsxs as B, jsx as r, Fragment as Z } from "react/jsx-runtime";
2
2
  import { forwardRef as ee, useState as V, useRef as F, useMemo as i, useCallback as oe, useEffect as te } from "react";
3
3
  import m from "../box.mjs";
4
- import ne from "./baseSvg.mjs";
5
- import re from "./button.mjs";
6
- import se from "./flex.mjs";
4
+ import { b as ne } from "../core.mjs";
5
+ import re from "./baseSvg.mjs";
6
+ import se from "./button.mjs";
7
+ import le from "./flex.mjs";
7
8
  import J from "./textbox.mjs";
8
- import le from "./tooltip.mjs";
9
- import { b as pe } from "../core.mjs";
9
+ import pe from "./tooltip.mjs";
10
10
  function ie(l, t) {
11
11
  const {
12
12
  name: N,
@@ -20,7 +20,7 @@ function ie(l, t) {
20
20
  onChange: x,
21
21
  props: W,
22
22
  ..._
23
- } = l, [$, w] = V(Array.isArray(f) ? f : f ? [f] : []), p = "value" in l ? Array.isArray(I) ? I : I ? [I] : [] : $, [S, R] = V(""), [a, E, A] = pe(), P = F(null), L = F(null), [H, z] = V(0), C = i(() => H > window.innerHeight / 2, [H]), G = i(() => C ? A.current?.getBoundingClientRect().height ?? 0 : 0, [C, A]), s = i(
23
+ } = l, [$, w] = V(Array.isArray(f) ? f : f ? [f] : []), p = "value" in l ? Array.isArray(I) ? I : I ? [I] : [] : $, [S, R] = V(""), [a, E, A] = ne(), P = F(null), L = F(null), [H, z] = V(0), C = i(() => H > window.innerHeight / 2, [H]), G = i(() => C ? A.current?.getBoundingClientRect().height ?? 0 : 0, [C, A]), s = i(
24
24
  () => (Array.isArray(D) ? D : [D]).flatMap((e) => e),
25
25
  [D]
26
26
  ), K = i(() => s.filter((e) => e.type?.displayName === "DropdownItem"), [s]), u = i(() => K.filter((e) => h && S ? O(e).toLowerCase().includes(S.toLowerCase()) : !0), [h, S, s]), g = i(() => s.find((e) => e.type?.displayName === "DropdownUnselect"), [s]), T = i(() => s.find((e) => e.type?.displayName === "DropdownSelectAll"), [s]), j = i(() => s.find((e) => e.type?.displayName === "DropdownEmptyItem"), [s]), b = i(() => s.find((e) => e.type?.displayName === "DropdownDisplay"), [s]), Q = i(() => {
@@ -59,7 +59,7 @@ function ie(l, t) {
59
59
  return /* @__PURE__ */ B(m, { width: "fit-content", children: [
60
60
  p.map((e) => /* @__PURE__ */ r(J, { ref: t, name: N, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
61
61
  /* @__PURE__ */ B(
62
- re,
62
+ se,
63
63
  {
64
64
  ref: A,
65
65
  type: "button",
@@ -87,13 +87,13 @@ function ie(l, t) {
87
87
  }
88
88
  }
89
89
  ),
90
- /* @__PURE__ */ r(se, { component: "dropdown.display", display: a && h ? "none" : "flex", children: Q ?? /* @__PURE__ */ r(Z, { children: " " }) }),
91
- !q && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(ne, { viewBox: "0 0 10 6", width: "0.6rem", rotate: a ? 180 : 0, children: /* @__PURE__ */ r("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
90
+ /* @__PURE__ */ r(le, { component: "dropdown.display", display: a && h ? "none" : "flex", children: Q ?? /* @__PURE__ */ r(Z, { children: " " }) }),
91
+ !q && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(re, { viewBox: "0 0 10 6", width: "0.6rem", rotate: a ? 180 : 0, children: /* @__PURE__ */ r("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
92
92
  ]
93
93
  }
94
94
  ),
95
95
  a && /* @__PURE__ */ r(
96
- le,
96
+ pe,
97
97
  {
98
98
  ref: L,
99
99
  position: "absolute",
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.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">;
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">;
31
31
  export {};
package/core/boxStyles.d.ts CHANGED
@@ -876,6 +876,7 @@ export declare const pseudoGroupClasses: {
876
876
  focusGroup: "focus";
877
877
  activeGroup: "active";
878
878
  disabledGroup: "disabled";
879
+ selectedGroup: "selected";
879
880
  theme: "theme";
880
881
  };
881
882
  export declare const breakpoints: {
package/core/extends/boxComponents.d.ts CHANGED
@@ -358,6 +358,7 @@ declare const boxComponents: {
358
358
  datagrid: {
359
359
  styles: {
360
360
  b: number;
361
+ bgColor: "white";
361
362
  borderColor: "gray-400";
362
363
  overflow: "hidden";
363
364
  borderRadius: number;
@@ -483,8 +484,6 @@ declare const boxComponents: {
483
484
  transition: "none";
484
485
  };
485
486
  variants: {
486
- isRowNumber: {};
487
- isRowSelection: {};
488
487
  isPinned: {
489
488
  position: "sticky";
490
489
  zIndex: 2;
@@ -501,6 +500,11 @@ declare const boxComponents: {
501
500
  isSortable: {
502
501
  cursor: "pointer";
503
502
  };
503
+ isRowSelected: {};
504
+ isRowSelection: {};
505
+ isRowNumber: {
506
+ jc: "center";
507
+ };
504
508
  };
505
509
  children: {
506
510
  contextMenu: {
@@ -516,7 +520,6 @@ declare const boxComponents: {
516
520
  jc: "center";
517
521
  ai: "center";
518
522
  transition: "none";
519
- bgColor: "gray-200";
520
523
  hover: {
521
524
  bgColor: "gray-300";
522
525
  };
@@ -586,38 +589,44 @@ declare const boxComponents: {
586
589
  };
587
590
  };
588
591
  };
589
- cell: {
590
- styles: {
591
- bb: number;
592
- borderColor: "gray-400";
593
- transition: "none";
594
- ai: "center";
595
- overflow: "hidden";
596
- hoverGroup: {
597
- 'grid-row': {
598
- bgColor: "gray-200";
592
+ body: {
593
+ styles: {};
594
+ children: {
595
+ cell: {
596
+ styles: {
597
+ bb: number;
598
+ borderColor: "gray-400";
599
+ transition: "none";
600
+ ai: "center";
601
+ hoverGroup: {
602
+ 'grid-row': {
603
+ bgColor: "gray-200";
604
+ };
605
+ };
606
+ };
607
+ variants: {
608
+ isPinned: {
609
+ position: "sticky";
610
+ bgColor: "gray-100";
611
+ zIndex: 1;
612
+ };
613
+ isFirstLeftPinned: {};
614
+ isLastLeftPinned: {
615
+ br: number;
616
+ };
617
+ isFirstRightPinned: {
618
+ bl: number;
619
+ };
620
+ isLastRightPinned: {};
621
+ isRowNumber: {
622
+ bgColor: "gray-200";
623
+ jc: "right";
624
+ };
625
+ isRowSelection: {};
626
+ isRowSelected: {};
599
627
  };
600
628
  };
601
629
  };
602
- variants: {
603
- isRowNumber: {
604
- bgColor: "gray-200";
605
- };
606
- isRowSelection: {};
607
- isPinned: {
608
- position: "sticky";
609
- bgColor: "gray-100";
610
- zIndex: 1;
611
- };
612
- isFirstLeftPinned: {};
613
- isLastLeftPinned: {
614
- br: number;
615
- };
616
- isFirstRightPinned: {
617
- bl: number;
618
- };
619
- isLastRightPinned: {};
620
- };
621
630
  };
622
631
  bottomBar: {
623
632
  styles: {
package/core/extends/useComponents.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { BoxStyleProps, BoxComponentStyles, ComponentsAndVariants } from '../../types';
1
+ import { BoxComponentStyles, BoxStyleProps, ComponentsAndVariants } from '../../types';
2
2
  export default function useComponents<TKey extends keyof ComponentsAndVariants = never>(props: BoxStyleProps<TKey>): BoxComponentStyles | undefined;