@bitrise/bitkit-v2 0.3.384 → 0.3.386-beta.2464
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.
- package/dist/components/BitkitPagination/BitkitPagination.d.ts +1 -0
- package/dist/components/BitkitPagination/BitkitPagination.js +1 -1
- package/dist/components/BitkitPagination/BitkitPagination.js.map +1 -1
- package/dist/components/BitkitTable/BitkitDefinitionColumnHeader.d.ts +23 -0
- package/dist/components/BitkitTable/BitkitDefinitionColumnHeader.js +53 -0
- package/dist/components/BitkitTable/BitkitDefinitionColumnHeader.js.map +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/main.js +2 -1
- package/dist/theme/slot-recipes/Table.recipe.d.ts +4 -1
- package/dist/theme/slot-recipes/Table.recipe.js +16 -1
- package/dist/theme/slot-recipes/Table.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +4 -1
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@ export interface BitkitPaginationLabels {
|
|
|
9
9
|
export interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {
|
|
10
10
|
labels?: BitkitPaginationLabels;
|
|
11
11
|
onPageChange?: (page: number) => void;
|
|
12
|
+
/** When provided, the items-per-page select is rendered (except in the `card` variant, which never shows it). */
|
|
12
13
|
onPageSizeChange?: (pageSize: number) => void;
|
|
13
14
|
page: number;
|
|
14
15
|
pageSize: number;
|
|
@@ -32,7 +32,7 @@ var BitkitPagination = forwardRef((props, ref) => {
|
|
|
32
32
|
const isFirstPage = safePage <= 1;
|
|
33
33
|
const isLastPage = safePage >= totalPages;
|
|
34
34
|
const isSkeleton = state === "skeleton";
|
|
35
|
-
const showItemsPerPage = variant !== "card";
|
|
35
|
+
const showItemsPerPage = variant !== "card" && Boolean(onPageSizeChange);
|
|
36
36
|
const values = {
|
|
37
37
|
end,
|
|
38
38
|
start,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPagination.js","names":[],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport formatLabel from '../../utilities/formatLabel';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n items?: string;\n itemsPerPage?: string;\n nextPage?: string;\n pages?: string;\n previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n items: '{start}\\u2013{end} of {total} items',\n itemsPerPage: 'Items per page:',\n nextPage: 'Next page',\n pages: 'of {totalPages} pages',\n previousPage: 'Previous page',\n};\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n labels?: BitkitPaginationLabels;\n onPageChange?: (page: number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n page: number;\n pageSize: number;\n pageSizeOptions?: number[];\n state?: 'skeleton';\n totalItems: number;\n variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n const {\n labels: labelsProp,\n onPageChange,\n onPageSizeChange,\n page,\n pageSize,\n pageSizeOptions = [10, 25, 50],\n state,\n totalItems,\n variant = 'table',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'pagination' });\n const styles = recipe({ variant });\n\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const safePage = Math.min(Math.max(1, page), totalPages);\n const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n const end = Math.min(safePage * safePageSize, totalItems);\n const isFirstPage = safePage <= 1;\n const isLastPage = safePage >= totalPages;\n const isSkeleton = state === 'skeleton';\n const showItemsPerPage = variant !== 'card';\n\n const values = { end, start, total: totalItems, totalPages };\n const labels = Object.fromEntries(\n Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n ) as Required<BitkitPaginationLabels>;\n\n const pageSizeItems = useMemo(\n () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n [pageSizeOptions],\n );\n\n const pageItems = useMemo(\n () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n [totalPages],\n );\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.itemsBlock}>\n {showItemsPerPage && (\n <>\n <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n <BitkitNativeSelect\n css={styles.itemsSelect}\n onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePageSize)}\n >\n {pageSizeItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n </>\n )}\n {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n </chakra.div>\n\n <chakra.div css={styles.pageBlock}>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n <BitkitNativeSelect\n css={styles.pageSelect}\n onChange={(e) => onPageChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePage)}\n >\n {pageItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n <BitkitIconButton\n icon={IconChevronLeft}\n label={labels.previousPage}\n marginInlineStart=\"8\"\n onClick={() => onPageChange?.(safePage - 1)}\n size=\"md\"\n state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n <BitkitIconButton\n icon={IconChevronRight}\n label={labels.nextPage}\n onClick={() => onPageChange?.(safePage + 1)}\n size=\"md\"\n state={isLastPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n </chakra.div>\n </Box>\n );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAM,iBAAmD;CACvD,OAAO;CACP,cAAc;CACd,UAAU;CACV,OAAO;CACP,cAAc;AAChB;
|
|
1
|
+
{"version":3,"file":"BitkitPagination.js","names":[],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport formatLabel from '../../utilities/formatLabel';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n items?: string;\n itemsPerPage?: string;\n nextPage?: string;\n pages?: string;\n previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n items: '{start}\\u2013{end} of {total} items',\n itemsPerPage: 'Items per page:',\n nextPage: 'Next page',\n pages: 'of {totalPages} pages',\n previousPage: 'Previous page',\n};\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n labels?: BitkitPaginationLabels;\n onPageChange?: (page: number) => void;\n /** When provided, the items-per-page select is rendered (except in the `card` variant, which never shows it). */\n onPageSizeChange?: (pageSize: number) => void;\n page: number;\n pageSize: number;\n pageSizeOptions?: number[];\n state?: 'skeleton';\n totalItems: number;\n variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n const {\n labels: labelsProp,\n onPageChange,\n onPageSizeChange,\n page,\n pageSize,\n pageSizeOptions = [10, 25, 50],\n state,\n totalItems,\n variant = 'table',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'pagination' });\n const styles = recipe({ variant });\n\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const safePage = Math.min(Math.max(1, page), totalPages);\n const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n const end = Math.min(safePage * safePageSize, totalItems);\n const isFirstPage = safePage <= 1;\n const isLastPage = safePage >= totalPages;\n const isSkeleton = state === 'skeleton';\n const showItemsPerPage = variant !== 'card' && Boolean(onPageSizeChange);\n\n const values = { end, start, total: totalItems, totalPages };\n const labels = Object.fromEntries(\n Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n ) as Required<BitkitPaginationLabels>;\n\n const pageSizeItems = useMemo(\n () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n [pageSizeOptions],\n );\n\n const pageItems = useMemo(\n () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n [totalPages],\n );\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.itemsBlock}>\n {showItemsPerPage && (\n <>\n <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n <BitkitNativeSelect\n css={styles.itemsSelect}\n onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePageSize)}\n >\n {pageSizeItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n </>\n )}\n {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n </chakra.div>\n\n <chakra.div css={styles.pageBlock}>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n <BitkitNativeSelect\n css={styles.pageSelect}\n onChange={(e) => onPageChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePage)}\n >\n {pageItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n <BitkitIconButton\n icon={IconChevronLeft}\n label={labels.previousPage}\n marginInlineStart=\"8\"\n onClick={() => onPageChange?.(safePage - 1)}\n size=\"md\"\n state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n <BitkitIconButton\n icon={IconChevronRight}\n label={labels.nextPage}\n onClick={() => onPageChange?.(safePage + 1)}\n size=\"md\"\n state={isLastPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n </chakra.div>\n </Box>\n );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Table } from '@chakra-ui/react/table';
|
|
2
|
+
import { BitkitDefinitionTooltipProps } from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';
|
|
3
|
+
/**
|
|
4
|
+
* Everything `BitkitDefinitionTooltip` takes — `children` is the column title, `text` the definition
|
|
5
|
+
* — on top of everything a `Table.ColumnHeader` takes. The two the header owns are gone: `textSize`,
|
|
6
|
+
* because the point is to keep the header's own type, and the tooltip's `truncate`, because the title
|
|
7
|
+
* always truncates and `truncate` stays the header cell's own style prop.
|
|
8
|
+
*/
|
|
9
|
+
export interface BitkitDefinitionColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'children'>, Omit<BitkitDefinitionTooltipProps, 'textSize' | 'truncate'> {
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* A column header whose title is a glossary term: underlined, and revealing what the column means on
|
|
13
|
+
* demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the
|
|
14
|
+
* title keeps the header's own type (`heading/h5`) instead of the body type that component pins.
|
|
15
|
+
*
|
|
16
|
+
* That type is also why it composes `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:
|
|
17
|
+
* the latter's recipe always applies a `textSize`, and there is no value for it that means "inherit".
|
|
18
|
+
*
|
|
19
|
+
* Only the title is the trigger, so the rest of the header stays inert. Everything else a
|
|
20
|
+
* `Table.ColumnHeader` takes — `textAlign`, `width`, `colSpan` — still applies.
|
|
21
|
+
*/
|
|
22
|
+
declare const BitkitDefinitionColumnHeader: import('react').ForwardRefExoticComponent<BitkitDefinitionColumnHeaderProps & import('react').RefAttributes<HTMLTableCellElement>>;
|
|
23
|
+
export default BitkitDefinitionColumnHeader;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
|
|
2
|
+
import { chakra } from "@chakra-ui/react/styled-system";
|
|
3
|
+
import { forwardRef, useState } from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { Table, useTableStyles } from "@chakra-ui/react/table";
|
|
6
|
+
//#region lib/components/BitkitTable/BitkitDefinitionColumnHeader.tsx
|
|
7
|
+
/**
|
|
8
|
+
* A column header whose title is a glossary term: underlined, and revealing what the column means on
|
|
9
|
+
* demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the
|
|
10
|
+
* title keeps the header's own type (`heading/h5`) instead of the body type that component pins.
|
|
11
|
+
*
|
|
12
|
+
* That type is also why it composes `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:
|
|
13
|
+
* the latter's recipe always applies a `textSize`, and there is no value for it that means "inherit".
|
|
14
|
+
*
|
|
15
|
+
* Only the title is the trigger, so the rest of the header stays inert. Everything else a
|
|
16
|
+
* `Table.ColumnHeader` takes — `textAlign`, `width`, `colSpan` — still applies.
|
|
17
|
+
*/
|
|
18
|
+
var BitkitDefinitionColumnHeader = forwardRef(({ button, children, disablePortal, learnMoreTarget, learnMoreUrl, method = "click", placement, text, ...rest }, ref) => {
|
|
19
|
+
const styles = useTableStyles();
|
|
20
|
+
const [open, setOpen] = useState(false);
|
|
21
|
+
const isClick = method === "click";
|
|
22
|
+
return /* @__PURE__ */ jsx(Table.ColumnHeader, {
|
|
23
|
+
ref,
|
|
24
|
+
...rest,
|
|
25
|
+
children: /* @__PURE__ */ jsx(BitkitTooltip, {
|
|
26
|
+
button,
|
|
27
|
+
closeOnClick: isClick ? false : void 0,
|
|
28
|
+
disablePortal,
|
|
29
|
+
learnMoreTarget,
|
|
30
|
+
learnMoreUrl,
|
|
31
|
+
onOpenChange: isClick ? ({ open: nextOpen }) => {
|
|
32
|
+
if (!nextOpen) setOpen(false);
|
|
33
|
+
} : void 0,
|
|
34
|
+
open: isClick ? open : void 0,
|
|
35
|
+
openDelay: isClick ? Infinity : void 0,
|
|
36
|
+
placement,
|
|
37
|
+
text,
|
|
38
|
+
children: /* @__PURE__ */ jsx(chakra.button, {
|
|
39
|
+
"aria-expanded": isClick ? open : void 0,
|
|
40
|
+
css: styles.definitionTrigger,
|
|
41
|
+
onClick: isClick ? () => setOpen(!open) : void 0,
|
|
42
|
+
truncate: true,
|
|
43
|
+
type: "button",
|
|
44
|
+
children
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
BitkitDefinitionColumnHeader.displayName = "BitkitDefinitionColumnHeader";
|
|
50
|
+
//#endregion
|
|
51
|
+
export { BitkitDefinitionColumnHeader as default };
|
|
52
|
+
|
|
53
|
+
//# sourceMappingURL=BitkitDefinitionColumnHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BitkitDefinitionColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitDefinitionColumnHeader.tsx"],"sourcesContent":["import { chakra } from '@chakra-ui/react/styled-system';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, useState } from 'react';\n\nimport { type BitkitDefinitionTooltipProps } from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n/**\n * Everything `BitkitDefinitionTooltip` takes — `children` is the column title, `text` the definition\n * — on top of everything a `Table.ColumnHeader` takes. The two the header owns are gone: `textSize`,\n * because the point is to keep the header's own type, and the tooltip's `truncate`, because the title\n * always truncates and `truncate` stays the header cell's own style prop.\n */\nexport interface BitkitDefinitionColumnHeaderProps\n extends Omit<Table.ColumnHeaderProps, 'children'>, Omit<BitkitDefinitionTooltipProps, 'textSize' | 'truncate'> {}\n\n/**\n * A column header whose title is a glossary term: underlined, and revealing what the column means on\n * demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the\n * title keeps the header's own type (`heading/h5`) instead of the body type that component pins.\n *\n * That type is also why it composes `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:\n * the latter's recipe always applies a `textSize`, and there is no value for it that means \"inherit\".\n *\n * Only the title is the trigger, so the rest of the header stays inert. Everything else a\n * `Table.ColumnHeader` takes — `textAlign`, `width`, `colSpan` — still applies.\n */\nconst BitkitDefinitionColumnHeader = forwardRef<HTMLTableCellElement, BitkitDefinitionColumnHeaderProps>(\n (\n { button, children, disablePortal, learnMoreTarget, learnMoreUrl, method = 'click', placement, text, ...rest },\n ref,\n ) => {\n const styles = useTableStyles();\n const [open, setOpen] = useState(false);\n const isClick = method === 'click';\n\n return (\n <Table.ColumnHeader ref={ref} {...rest}>\n <BitkitTooltip\n button={button}\n closeOnClick={isClick ? false : undefined}\n disablePortal={disablePortal}\n learnMoreTarget={learnMoreTarget}\n learnMoreUrl={learnMoreUrl}\n onOpenChange={\n isClick\n ? ({ open: nextOpen }) => {\n if (!nextOpen) setOpen(false);\n }\n : undefined\n }\n open={isClick ? open : undefined}\n openDelay={isClick ? Infinity : undefined}\n placement={placement}\n text={text}\n >\n {/* chakra.button: no named primitive attaches a recipe slot to a bare trigger button */}\n <chakra.button\n aria-expanded={isClick ? open : undefined}\n css={styles.definitionTrigger}\n onClick={isClick ? () => setOpen(!open) : undefined}\n truncate\n type=\"button\"\n >\n {children}\n </chakra.button>\n </BitkitTooltip>\n </Table.ColumnHeader>\n );\n },\n);\n\nBitkitDefinitionColumnHeader.displayName = 'BitkitDefinitionColumnHeader';\n\nexport default BitkitDefinitionColumnHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,IAAM,+BAA+B,YAEjC,EAAE,QAAQ,UAAU,eAAe,iBAAiB,cAAc,SAAS,SAAS,WAAW,MAAM,GAAG,QACxG,QACG;CACH,MAAM,SAAS,eAAe;CAC9B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,UAAU,WAAW;CAE3B,OACE,oBAAC,MAAM,cAAP;EAAyB;EAAK,GAAI;EAChC,UAAA,oBAAC,eAAD;GACU;GACR,cAAc,UAAU,QAAQ,KAAA;GACjB;GACE;GACH;GACd,cACE,WACK,EAAE,MAAM,eAAe;IACtB,IAAI,CAAC,UAAU,QAAQ,KAAK;GAC9B,IACA,KAAA;GAEN,MAAM,UAAU,OAAO,KAAA;GACvB,WAAW,UAAU,WAAW,KAAA;GACrB;GACL;GAGN,UAAA,oBAAC,OAAO,QAAR;IACE,iBAAe,UAAU,OAAO,KAAA;IAChC,KAAK,OAAO;IACZ,SAAS,gBAAgB,QAAQ,CAAC,IAAI,IAAI,KAAA;IAC1C,UAAA;IACA,MAAK;IAEJ;GACY,CAAA;EACF,CAAA;CACG,CAAA;AAExB,CACF;AAEA,6BAA6B,cAAc"}
|
|
@@ -74,6 +74,7 @@ export { default as BitkitSteps, type BitkitStepsItemProps, type BitkitStepsItem
|
|
|
74
74
|
export { default as BitkitStepsCard, type BitkitStepsCardBodyProps, type BitkitStepsCardFooterProps, type BitkitStepsCardHeaderProps, type BitkitStepsCardProps, type BitkitStepsCardStepProps, } from './BitkitStepsCard/BitkitStepsCard';
|
|
75
75
|
export { default as BitkitSwitch, type BitkitSwitchProps } from './BitkitSwitch';
|
|
76
76
|
export { type BitkitBulkActionsItems, type BitkitBulkActionsLabels, default as BitkitBulkActionsRow, type BitkitBulkActionsRowProps, } from './BitkitTable/BitkitBulkActionsRow';
|
|
77
|
+
export { default as BitkitDefinitionColumnHeader, type BitkitDefinitionColumnHeaderProps, } from './BitkitTable/BitkitDefinitionColumnHeader';
|
|
77
78
|
export { default as BitkitExpandableRow, type BitkitExpandableRowProps } from './BitkitTable/BitkitExpandableRow';
|
|
78
79
|
export { default as BitkitFilterRow, type BitkitFilterRowProps } from './BitkitTable/BitkitFilterRow';
|
|
79
80
|
export { default as BitkitLinkedRow, type BitkitLinkedRowLinkCellProps, type BitkitLinkedRowProps, } from './BitkitTable/BitkitLinkedRow';
|
package/dist/main.js
CHANGED
|
@@ -362,6 +362,7 @@ import BitkitStat from "./components/BitkitStat/BitkitStat.js";
|
|
|
362
362
|
import BitkitStepsCard_default from "./components/BitkitStepsCard/BitkitStepsCard.js";
|
|
363
363
|
import BitkitSwitch from "./components/BitkitSwitch/BitkitSwitch.js";
|
|
364
364
|
import BitkitBulkActionsRow from "./components/BitkitTable/BitkitBulkActionsRow.js";
|
|
365
|
+
import BitkitDefinitionColumnHeader from "./components/BitkitTable/BitkitDefinitionColumnHeader.js";
|
|
365
366
|
import BitkitExpandableRow from "./components/BitkitTable/BitkitExpandableRow.js";
|
|
366
367
|
import BitkitFilterRow from "./components/BitkitTable/BitkitFilterRow.js";
|
|
367
368
|
import BitkitLinkedRow_default from "./components/BitkitTable/BitkitLinkedRow.js";
|
|
@@ -378,4 +379,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
|
|
|
378
379
|
import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
|
|
379
380
|
import bitkitTheme from "./theme/index.js";
|
|
380
381
|
import Provider from "./providers/BitkitProvider.js";
|
|
381
|
-
export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitBulkActionsRow, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFilterRow, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitLinkedRow_default as BitkitLinkedRow, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitRowActionsCell, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };
|
|
382
|
+
export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitBulkActionsRow, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionColumnHeader, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFilterRow, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitLinkedRow_default as BitkitLinkedRow, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitRowActionsCell, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
|
|
1
|
+
declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "definitionTrigger" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
|
|
2
2
|
variant: {
|
|
3
3
|
default: {
|
|
4
4
|
root: {
|
|
@@ -114,6 +114,9 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
114
114
|
borderBottomWidth: number;
|
|
115
115
|
borderTopStyle: "solid";
|
|
116
116
|
borderTopWidth: "1";
|
|
117
|
+
height: "auto";
|
|
118
|
+
paddingBlock: number;
|
|
119
|
+
paddingInline: number;
|
|
117
120
|
};
|
|
118
121
|
'& > :where(label):only-child': {
|
|
119
122
|
display: string;
|
|
@@ -11,6 +11,7 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
11
11
|
"actionsGroup",
|
|
12
12
|
"bulkActionsGroup",
|
|
13
13
|
"bulkActionsButtons",
|
|
14
|
+
"definitionTrigger",
|
|
14
15
|
"expandCell",
|
|
15
16
|
"expandTrigger",
|
|
16
17
|
"expandableRow",
|
|
@@ -61,6 +62,17 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
61
62
|
gap: "12",
|
|
62
63
|
marginInlineStart: "auto"
|
|
63
64
|
},
|
|
65
|
+
definitionTrigger: {
|
|
66
|
+
color: "inherit",
|
|
67
|
+
cursor: "pointer",
|
|
68
|
+
font: "inherit",
|
|
69
|
+
letterSpacing: "inherit",
|
|
70
|
+
maxWidth: "full",
|
|
71
|
+
textDecoration: "underline dotted",
|
|
72
|
+
textDecorationColor: "color/neutral/bold",
|
|
73
|
+
textUnderlineOffset: "0.25em",
|
|
74
|
+
_hover: { textDecorationColor: "color/purple/base" }
|
|
75
|
+
},
|
|
64
76
|
expandCell: {
|
|
65
77
|
paddingBlock: 0,
|
|
66
78
|
paddingInline: 0,
|
|
@@ -243,7 +255,10 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
243
255
|
"tfoot &": {
|
|
244
256
|
borderBottomWidth: 0,
|
|
245
257
|
borderTopStyle: "solid",
|
|
246
|
-
borderTopWidth: "1"
|
|
258
|
+
borderTopWidth: "1",
|
|
259
|
+
height: "auto",
|
|
260
|
+
paddingBlock: 0,
|
|
261
|
+
paddingInline: 0
|
|
247
262
|
}
|
|
248
263
|
},
|
|
249
264
|
body: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n// A control like a checkbox renders as an inline-flex <label>, which sits on the line box's\n// baseline — so the text strut's descender space leaves it a pixel or two above the row's centre.\n// Making it block-level takes the line box out of the equation and lets vertical-align: middle\n// centre it exactly.\nconst controlOnlyCell = {\n '& > :where(label):only-child': {\n display: 'flex',\n },\n};\n\nconst tableSlotRecipe = defineSlotRecipe({\n className: 'table',\n slots: [\n ...tableAnatomy.keys(),\n 'actionsCell',\n 'actionsGroup',\n 'bulkActionsGroup',\n 'bulkActionsButtons',\n 'expandCell',\n 'expandTrigger',\n 'expandableRow',\n 'expandedCell',\n 'expandedContent',\n 'expandedRow',\n 'filterControls',\n 'linkedRow',\n 'rowLink',\n 'sortColumnHeader',\n 'sortTrigger',\n 'utilityCell',\n ],\n base: {\n root: {\n fontVariantNumeric: 'lining-nums tabular-nums',\n textAlign: 'start',\n width: 'full',\n },\n caption: {\n captionSide: 'top !important',\n textAlign: 'start',\n '& > * + *': {\n marginBlockStart: '4',\n },\n },\n cell: {\n color: 'text/body',\n textStyle: 'body/md/regular',\n },\n actionsCell: {\n textAlign: 'end',\n whiteSpace: 'nowrap',\n // Shrink-to-fit: a table cell can't go below its content width, so any value under the\n // content's own width collapses the column around the buttons and leaves the rest to\n // the data columns.\n width: '1%',\n },\n actionsGroup: {\n alignItems: 'center',\n display: 'inline-flex',\n gap: '8',\n position: 'relative',\n },\n bulkActionsGroup: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n },\n bulkActionsButtons: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n marginInlineStart: 'auto',\n },\n expandCell: {\n paddingBlock: 0,\n paddingInline: 0,\n verticalAlign: 'middle',\n width: '48',\n },\n // A fixed 32x32 box (per the design), centred in the cell by the cell's own vertical-align.\n // Deriving the size from padding instead leaves it at the mercy of the Collapsible recipe's\n // asymmetric paddingBlockStart, which is what pushed the chevron 2px above the row's centre.\n expandTrigger: {\n alignItems: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'flex',\n height: '32',\n justifyContent: 'center',\n marginInlineStart: '12',\n padding: 0,\n width: '32',\n },\n expandableRow: {\n '& > td': {\n borderBottomWidth: 0,\n },\n },\n expandedCell: {\n height: 0,\n paddingBlock: 0,\n paddingInline: 0,\n },\n expandedContent: {\n borderBlockStartColor: 'border/minimal',\n borderBlockStartStyle: 'solid',\n borderBlockStartWidth: '1',\n marginInlineEnd: '16',\n marginInlineStart: '48',\n paddingBlockEnd: '24',\n paddingBlockStart: '16',\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n expandedRow: {\n _hover: {\n background: 'none',\n },\n },\n filterControls: {\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '16',\n width: 'full',\n },\n linkedRow: {\n position: 'relative',\n _hover: {\n backgroundColor: 'background/secondary',\n },\n '& :where(a:not([data-row-link]), button, input, label, select)': {\n position: 'relative',\n zIndex: '1',\n },\n },\n rowLink: {\n textDecoration: 'none',\n // The row's own background change is the hover affordance; the link recipe's hover\n // underline would fire on every row hover, since the stretched pseudo covers the row.\n _hover: {\n textDecoration: 'none',\n },\n _after: {\n content: '\"\"',\n inset: 0,\n position: 'absolute',\n },\n _focusVisible: {\n outline: 'none',\n _after: {\n outline: 'var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color)',\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n },\n sortColumnHeader: {\n paddingBlock: 0,\n paddingInline: 0,\n },\n sortTrigger: {\n alignItems: 'center',\n appearance: 'none',\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n display: 'flex',\n font: 'inherit',\n gap: '8',\n height: 'full',\n paddingBlock: '12',\n paddingInline: '16',\n userSelect: 'none',\n width: 'full',\n _focusVisible: {\n outlineOffset: '-3px',\n },\n _hover: {\n backgroundColor: 'background/active',\n },\n },\n utilityCell: {\n height: 'auto',\n paddingBlock: '12',\n paddingInline: '16',\n },\n },\n variants: {\n variant: {\n default: {\n root: {\n borderColor: 'border/regular',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n overflow: 'hidden',\n },\n header: {\n '& :where(th)': {\n backgroundColor: 'background/tertiary',\n },\n },\n columnHeader: {\n borderBottomColor: 'border/minimal',\n paddingBlock: '12',\n paddingInline: '16',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '16',\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n borderless: {\n columnHeader: {\n borderBottomColor: 'border/regular',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/regular',\n borderTopColor: 'border/regular',\n paddingInline: '12',\n },\n footer: {\n borderTopColor: 'border/regular',\n },\n },\n card: {\n columnHeader: {\n borderBottomColor: 'border/minimal',\n height: '48',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '12',\n },\n row: {\n 'thead &, tbody &': {\n '& > :where(td, th):first-child': {\n paddingInlineStart: '24',\n },\n '& > :where(td, th):last-child': {\n paddingInlineEnd: '24',\n },\n },\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n },\n size: {\n sm: {\n cell: {\n height: '48',\n },\n },\n md: {\n cell: {\n height: rem(56),\n },\n },\n lg: {\n cell: {\n height: '64',\n },\n },\n },\n // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n // that the row is clickable, so it says nothing about the row being interactive — turn it off\n // for short, static tables where there is no place to lose.\n rowHover: {\n true: {},\n false: {},\n },\n layout: {\n table: {\n root: {\n borderCollapse: 'separate',\n borderSpacing: '0',\n },\n caption: {\n marginBlockEnd: '24',\n },\n columnHeader: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n color: 'text/primary',\n fontWeight: 'bold',\n textAlign: 'start',\n textStyle: 'heading/h5',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n },\n cell: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n // so the body/footer divider has to live on the footer's cells.\n 'tfoot &': {\n borderBottomWidth: 0,\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n },\n },\n body: {\n '& :where(tr)': {\n '&:has(input:checked), &[data-selected]': {\n backgroundColor: 'background/selected',\n _hover: {\n backgroundColor: 'background/selected',\n },\n },\n },\n '& :where(tr:last-child) td': {\n borderBottomWidth: 0,\n },\n },\n },\n stacked: {\n root: {\n display: 'block',\n },\n caption: {\n display: 'block',\n padding: '16',\n backgroundColor: 'background/secondary',\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n },\n header: {\n borderWidth: 0,\n clip: 'rect(0, 0, 0, 0)',\n height: '1',\n margin: '-1px',\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n whiteSpace: 'nowrap',\n width: '1',\n },\n body: {\n display: 'block',\n },\n row: {\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n display: 'block',\n paddingBlock: '12',\n '&:last-child': {\n borderBottomWidth: 0,\n },\n },\n cell: {\n alignItems: 'center',\n display: 'flex',\n minHeight: '48',\n paddingInline: '16',\n _before: {\n alignSelf: 'center',\n color: 'text/primary',\n content: 'attr(data-label)',\n flexShrink: 0,\n fontWeight: 'semibold',\n marginInlineEnd: '16',\n width: '96',\n },\n 'tfoot &': {\n display: 'block',\n paddingInline: 0,\n _before: {\n content: 'none',\n },\n },\n },\n // display: block takes tfoot out of the table model, so a border on it does render here\n footer: {\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n display: 'block',\n },\n },\n },\n },\n compoundVariants: [\n {\n css: {\n row: {\n borderBottomColor: 'border/regular',\n },\n },\n layout: 'stacked',\n variant: 'borderless',\n },\n // The card gutter and the 12px cell padding are for the wide layout. Stacked rows are blocks\n // whose cells run vertically, so an inline indent on only the first and last one reads as a\n // misalignment — everything goes back to the stacked layout's own 16px.\n {\n css: {\n cell: {\n paddingInline: '16',\n },\n row: {\n 'thead &, tbody &': {\n '& > :where(td, th):first-child': {\n paddingInlineStart: '16',\n },\n '& > :where(td, th):last-child': {\n paddingInlineEnd: '16',\n },\n },\n },\n },\n layout: 'stacked',\n variant: 'card',\n },\n // The `size` variant pins a fixed cell height (48/56/64px), and it is merged after `layout`\n // regardless of declaration order — so only a compound variant can release it. Stacked cells\n // are flex containers whose content (label gutter + a multi-line value) routinely needs more\n // room than the fixed height, and the stacked `cell` keeps `minHeight: 48` as the floor.\n {\n css: {\n cell: {\n height: 'auto',\n },\n },\n layout: 'stacked',\n },\n // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n // renders rows as blocks and never tinted them.\n {\n css: {\n body: {\n '& :where(tr)': {\n _hover: {\n backgroundColor: 'background/secondary',\n },\n },\n },\n },\n layout: 'table',\n rowHover: true,\n },\n ],\n defaultVariants: {\n layout: 'table',\n rowHover: true,\n size: 'lg',\n variant: 'default',\n },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n// A control like a checkbox renders as an inline-flex <label>, which sits on the line box's\n// baseline — so the text strut's descender space leaves it a pixel or two above the row's centre.\n// Making it block-level takes the line box out of the equation and lets vertical-align: middle\n// centre it exactly.\nconst controlOnlyCell = {\n '& > :where(label):only-child': {\n display: 'flex',\n },\n};\n\nconst tableSlotRecipe = defineSlotRecipe({\n className: 'table',\n slots: [\n ...tableAnatomy.keys(),\n 'actionsCell',\n 'actionsGroup',\n 'bulkActionsGroup',\n 'bulkActionsButtons',\n 'definitionTrigger',\n 'expandCell',\n 'expandTrigger',\n 'expandableRow',\n 'expandedCell',\n 'expandedContent',\n 'expandedRow',\n 'filterControls',\n 'linkedRow',\n 'rowLink',\n 'sortColumnHeader',\n 'sortTrigger',\n 'utilityCell',\n ],\n base: {\n root: {\n fontVariantNumeric: 'lining-nums tabular-nums',\n textAlign: 'start',\n width: 'full',\n },\n caption: {\n captionSide: 'top !important',\n textAlign: 'start',\n '& > * + *': {\n marginBlockStart: '4',\n },\n },\n cell: {\n color: 'text/body',\n textStyle: 'body/md/regular',\n },\n actionsCell: {\n textAlign: 'end',\n whiteSpace: 'nowrap',\n // Shrink-to-fit: a table cell can't go below its content width, so any value under the\n // content's own width collapses the column around the buttons and leaves the rest to\n // the data columns.\n width: '1%',\n },\n actionsGroup: {\n alignItems: 'center',\n display: 'inline-flex',\n gap: '8',\n position: 'relative',\n },\n bulkActionsGroup: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n },\n bulkActionsButtons: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n marginInlineStart: 'auto',\n },\n // The column header's own `heading/h5` has to survive, so the trigger inherits its type and\n // colour rather than setting them — which is what rules out BitkitDefinitionTooltip in a header,\n // since its recipe always pins a textStyle. The offset is that recipe's own value for 14px type.\n definitionTrigger: {\n color: 'inherit',\n cursor: 'pointer',\n font: 'inherit',\n letterSpacing: 'inherit',\n maxWidth: 'full',\n textDecoration: 'underline dotted',\n textDecorationColor: 'color/neutral/bold',\n textUnderlineOffset: '0.25em',\n _hover: {\n textDecorationColor: 'color/purple/base',\n },\n },\n expandCell: {\n paddingBlock: 0,\n paddingInline: 0,\n verticalAlign: 'middle',\n width: '48',\n },\n // A fixed 32x32 box (per the design), centred in the cell by the cell's own vertical-align.\n // Deriving the size from padding instead leaves it at the mercy of the Collapsible recipe's\n // asymmetric paddingBlockStart, which is what pushed the chevron 2px above the row's centre.\n expandTrigger: {\n alignItems: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'flex',\n height: '32',\n justifyContent: 'center',\n marginInlineStart: '12',\n padding: 0,\n width: '32',\n },\n expandableRow: {\n '& > td': {\n borderBottomWidth: 0,\n },\n },\n expandedCell: {\n height: 0,\n paddingBlock: 0,\n paddingInline: 0,\n },\n expandedContent: {\n borderBlockStartColor: 'border/minimal',\n borderBlockStartStyle: 'solid',\n borderBlockStartWidth: '1',\n marginInlineEnd: '16',\n marginInlineStart: '48',\n paddingBlockEnd: '24',\n paddingBlockStart: '16',\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n expandedRow: {\n _hover: {\n background: 'none',\n },\n },\n filterControls: {\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '16',\n width: 'full',\n },\n linkedRow: {\n position: 'relative',\n _hover: {\n backgroundColor: 'background/secondary',\n },\n '& :where(a:not([data-row-link]), button, input, label, select)': {\n position: 'relative',\n zIndex: '1',\n },\n },\n rowLink: {\n textDecoration: 'none',\n // The row's own background change is the hover affordance; the link recipe's hover\n // underline would fire on every row hover, since the stretched pseudo covers the row.\n _hover: {\n textDecoration: 'none',\n },\n _after: {\n content: '\"\"',\n inset: 0,\n position: 'absolute',\n },\n _focusVisible: {\n outline: 'none',\n _after: {\n outline: 'var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color)',\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n },\n sortColumnHeader: {\n paddingBlock: 0,\n paddingInline: 0,\n },\n sortTrigger: {\n alignItems: 'center',\n appearance: 'none',\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n display: 'flex',\n font: 'inherit',\n gap: '8',\n height: 'full',\n paddingBlock: '12',\n paddingInline: '16',\n userSelect: 'none',\n width: 'full',\n _focusVisible: {\n outlineOffset: '-3px',\n },\n _hover: {\n backgroundColor: 'background/active',\n },\n },\n utilityCell: {\n height: 'auto',\n paddingBlock: '12',\n paddingInline: '16',\n },\n },\n variants: {\n variant: {\n default: {\n root: {\n borderColor: 'border/regular',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n overflow: 'hidden',\n },\n header: {\n '& :where(th)': {\n backgroundColor: 'background/tertiary',\n },\n },\n columnHeader: {\n borderBottomColor: 'border/minimal',\n paddingBlock: '12',\n paddingInline: '16',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '16',\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n borderless: {\n columnHeader: {\n borderBottomColor: 'border/regular',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/regular',\n borderTopColor: 'border/regular',\n paddingInline: '12',\n },\n footer: {\n borderTopColor: 'border/regular',\n },\n },\n card: {\n columnHeader: {\n borderBottomColor: 'border/minimal',\n height: '48',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '12',\n },\n row: {\n 'thead &, tbody &': {\n '& > :where(td, th):first-child': {\n paddingInlineStart: '24',\n },\n '& > :where(td, th):last-child': {\n paddingInlineEnd: '24',\n },\n },\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n },\n size: {\n sm: {\n cell: {\n height: '48',\n },\n },\n md: {\n cell: {\n height: rem(56),\n },\n },\n lg: {\n cell: {\n height: '64',\n },\n },\n },\n // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n // that the row is clickable, so it says nothing about the row being interactive — turn it off\n // for short, static tables where there is no place to lose.\n rowHover: {\n true: {},\n false: {},\n },\n layout: {\n table: {\n root: {\n borderCollapse: 'separate',\n borderSpacing: '0',\n },\n caption: {\n marginBlockEnd: '24',\n },\n columnHeader: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n color: 'text/primary',\n fontWeight: 'bold',\n textAlign: 'start',\n textStyle: 'heading/h5',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n },\n cell: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n // so the body/footer divider has to live on the footer's cells.\n // A footer holds one full-width block (pagination, a \"new item\" action) that brings its\n // own padding and height, so the body cell's 16px inset and fixed row height would\n // double up on it.\n 'tfoot &': {\n borderBottomWidth: 0,\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n height: 'auto',\n paddingBlock: 0,\n paddingInline: 0,\n },\n },\n body: {\n '& :where(tr)': {\n '&:has(input:checked), &[data-selected]': {\n backgroundColor: 'background/selected',\n _hover: {\n backgroundColor: 'background/selected',\n },\n },\n },\n '& :where(tr:last-child) td': {\n borderBottomWidth: 0,\n },\n },\n },\n stacked: {\n root: {\n display: 'block',\n },\n caption: {\n display: 'block',\n padding: '16',\n backgroundColor: 'background/secondary',\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n },\n header: {\n borderWidth: 0,\n clip: 'rect(0, 0, 0, 0)',\n height: '1',\n margin: '-1px',\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n whiteSpace: 'nowrap',\n width: '1',\n },\n body: {\n display: 'block',\n },\n row: {\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n display: 'block',\n paddingBlock: '12',\n '&:last-child': {\n borderBottomWidth: 0,\n },\n },\n cell: {\n alignItems: 'center',\n display: 'flex',\n minHeight: '48',\n paddingInline: '16',\n _before: {\n alignSelf: 'center',\n color: 'text/primary',\n content: 'attr(data-label)',\n flexShrink: 0,\n fontWeight: 'semibold',\n marginInlineEnd: '16',\n width: '96',\n },\n 'tfoot &': {\n display: 'block',\n paddingInline: 0,\n _before: {\n content: 'none',\n },\n },\n },\n // display: block takes tfoot out of the table model, so a border on it does render here\n footer: {\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n display: 'block',\n },\n },\n },\n },\n compoundVariants: [\n {\n css: {\n row: {\n borderBottomColor: 'border/regular',\n },\n },\n layout: 'stacked',\n variant: 'borderless',\n },\n // The card gutter and the 12px cell padding are for the wide layout. Stacked rows are blocks\n // whose cells run vertically, so an inline indent on only the first and last one reads as a\n // misalignment — everything goes back to the stacked layout's own 16px.\n {\n css: {\n cell: {\n paddingInline: '16',\n },\n row: {\n 'thead &, tbody &': {\n '& > :where(td, th):first-child': {\n paddingInlineStart: '16',\n },\n '& > :where(td, th):last-child': {\n paddingInlineEnd: '16',\n },\n },\n },\n },\n layout: 'stacked',\n variant: 'card',\n },\n // The `size` variant pins a fixed cell height (48/56/64px), and it is merged after `layout`\n // regardless of declaration order — so only a compound variant can release it. Stacked cells\n // are flex containers whose content (label gutter + a multi-line value) routinely needs more\n // room than the fixed height, and the stacked `cell` keeps `minHeight: 48` as the floor.\n {\n css: {\n cell: {\n height: 'auto',\n },\n },\n layout: 'stacked',\n },\n // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n // renders rows as blocks and never tinted them.\n {\n css: {\n body: {\n '& :where(tr)': {\n _hover: {\n backgroundColor: 'background/secondary',\n },\n },\n },\n },\n layout: 'table',\n rowHover: true,\n },\n ],\n defaultVariants: {\n layout: 'table',\n rowHover: true,\n size: 'lg',\n variant: 'default',\n },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -2112,7 +2112,7 @@ declare const slotRecipes: {
|
|
|
2112
2112
|
};
|
|
2113
2113
|
};
|
|
2114
2114
|
}>;
|
|
2115
|
-
table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
|
|
2115
|
+
table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "definitionTrigger" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
|
|
2116
2116
|
variant: {
|
|
2117
2117
|
default: {
|
|
2118
2118
|
root: {
|
|
@@ -2228,6 +2228,9 @@ declare const slotRecipes: {
|
|
|
2228
2228
|
borderBottomWidth: number;
|
|
2229
2229
|
borderTopStyle: "solid";
|
|
2230
2230
|
borderTopWidth: "1";
|
|
2231
|
+
height: "auto";
|
|
2232
|
+
paddingBlock: number;
|
|
2233
|
+
paddingInline: number;
|
|
2231
2234
|
};
|
|
2232
2235
|
'& > :where(label):only-child': {
|
|
2233
2236
|
display: string;
|