@bitrise/bitkit-v2 0.3.316 → 0.3.318
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/BitkitPaginationLoadMore/BitkitPaginationLoadMore.d.ts +1 -0
- package/dist/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js +16 -4
- package/dist/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js.map +1 -1
- package/dist/components/BitkitProgressBar/BitkitProgressBar.d.ts +8 -1
- package/dist/components/BitkitProgressBar/BitkitProgressBar.js +7 -2
- package/dist/components/BitkitProgressBar/BitkitProgressBar.js.map +1 -1
- package/dist/theme/slot-recipes/PaginationLoadMore.recipe.d.ts +10 -1
- package/dist/theme/slot-recipes/PaginationLoadMore.recipe.js +21 -4
- package/dist/theme/slot-recipes/PaginationLoadMore.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +10 -1
- package/package.json +1 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
|
|
1
2
|
import BitkitButton from "../BitkitButton/BitkitButton.js";
|
|
2
3
|
import BitkitInlineLoading from "../BitkitInlineLoading/BitkitInlineLoading.js";
|
|
3
4
|
import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
|
|
@@ -5,16 +6,17 @@ import { Box } from "@chakra-ui/react/box";
|
|
|
5
6
|
import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
7
|
import { forwardRef } from "react";
|
|
7
8
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { Text } from "@chakra-ui/react/text";
|
|
8
10
|
//#region lib/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.tsx
|
|
9
11
|
var BitkitPaginationLoadMore = forwardRef((props, ref) => {
|
|
10
|
-
const { loadingMore = false, onLoadMore, page, pageItemsCount, size = "md", totalCount, ...rest } = props;
|
|
12
|
+
const { loadError = false, loadingMore = false, onLoadMore, page, pageItemsCount, size = "md", totalCount, ...rest } = props;
|
|
11
13
|
const styles = useSlotRecipe({ key: "paginationLoadMore" })({ size });
|
|
12
14
|
const clampedPage = Math.max(1, page);
|
|
13
15
|
const clampedPageItemsCount = Math.max(1, pageItemsCount);
|
|
14
16
|
const shownCount = Math.min(clampedPage * clampedPageItemsCount, totalCount);
|
|
15
17
|
const isComplete = shownCount >= totalCount;
|
|
16
18
|
const loadMoreCount = Math.min(clampedPageItemsCount, totalCount - shownCount);
|
|
17
|
-
const inlineLoadingSize = size === "
|
|
19
|
+
const inlineLoadingSize = size === "xs" ? "sm" : "md";
|
|
18
20
|
return /* @__PURE__ */ jsxs(Box, {
|
|
19
21
|
css: styles.root,
|
|
20
22
|
ref,
|
|
@@ -27,7 +29,7 @@ var BitkitPaginationLoadMore = forwardRef((props, ref) => {
|
|
|
27
29
|
" of ",
|
|
28
30
|
totalCount
|
|
29
31
|
]
|
|
30
|
-
}), !isComplete && /* @__PURE__ */
|
|
32
|
+
}), !isComplete && /* @__PURE__ */ jsxs(Fragment$1, { children: [loadingMore ? /* @__PURE__ */ jsx(BitkitInlineLoading, {
|
|
31
33
|
color: "text/tertiary",
|
|
32
34
|
label: "Loading more...",
|
|
33
35
|
size: inlineLoadingSize
|
|
@@ -40,7 +42,17 @@ var BitkitPaginationLoadMore = forwardRef((props, ref) => {
|
|
|
40
42
|
size: size === "md" ? "md" : "sm",
|
|
41
43
|
variant: "tertiary",
|
|
42
44
|
children: `Load ${loadMoreCount} more`
|
|
43
|
-
})
|
|
45
|
+
}), loadError && !loadingMore && /* @__PURE__ */ jsxs(Box, {
|
|
46
|
+
css: styles.error,
|
|
47
|
+
role: "alert",
|
|
48
|
+
children: [/* @__PURE__ */ jsx(IconErrorCircleFilled, {
|
|
49
|
+
color: "icon/negative",
|
|
50
|
+
size: "16"
|
|
51
|
+
}), /* @__PURE__ */ jsx(Text, {
|
|
52
|
+
as: "span",
|
|
53
|
+
children: "Failed to load items."
|
|
54
|
+
})]
|
|
55
|
+
})] })]
|
|
44
56
|
});
|
|
45
57
|
});
|
|
46
58
|
BitkitPaginationLoadMore.displayName = "BitkitPaginationLoadMore";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPaginationLoadMore.js","names":[],"sources":["../../../lib/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitInlineLoading from '../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitPaginationLoadMoreProps extends Omit<BoxProps, 'page' | 'size'> {\n loadingMore?: boolean;\n onLoadMore: () => void;\n page: number;\n pageItemsCount: number;\n size?: 'md' | 'sm' | 'xs';\n totalCount: number;\n}\n\nconst BitkitPaginationLoadMore = forwardRef<HTMLDivElement, BitkitPaginationLoadMoreProps>((props, ref) => {\n const { loadingMore = false
|
|
1
|
+
{"version":3,"file":"BitkitPaginationLoadMore.js","names":[],"sources":["../../../lib/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitInlineLoading from '../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitPaginationLoadMoreProps extends Omit<BoxProps, 'page' | 'size'> {\n loadError?: boolean;\n loadingMore?: boolean;\n onLoadMore: () => void;\n page: number;\n pageItemsCount: number;\n size?: 'md' | 'sm' | 'xs';\n totalCount: number;\n}\n\nconst BitkitPaginationLoadMore = forwardRef<HTMLDivElement, BitkitPaginationLoadMoreProps>((props, ref) => {\n const {\n loadError = false,\n loadingMore = false,\n onLoadMore,\n page,\n pageItemsCount,\n size = 'md',\n totalCount,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'paginationLoadMore' });\n const styles = recipe({ size });\n\n const clampedPage = Math.max(1, page);\n const clampedPageItemsCount = Math.max(1, pageItemsCount);\n const shownCount = Math.min(clampedPage * clampedPageItemsCount, totalCount);\n const isComplete = shownCount >= totalCount;\n const loadMoreCount = Math.min(clampedPageItemsCount, totalCount - shownCount);\n\n // Follows the counter's textStyle, not the size name: sm uses body/md/regular too.\n const inlineLoadingSize = size === 'xs' ? 'sm' : 'md';\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n <chakra.span css={styles.counter}>\n Showing {shownCount} of {totalCount}\n </chakra.span>\n {!isComplete && (\n <>\n {loadingMore ? (\n <BitkitInlineLoading color=\"text/tertiary\" label=\"Loading more...\" size={inlineLoadingSize} />\n ) : size === 'xs' ? (\n <BitkitLinkButton onClick={onLoadMore} size=\"sm\">\n {`Load ${loadMoreCount} more`}\n </BitkitLinkButton>\n ) : (\n <BitkitButton onClick={onLoadMore} size={size === 'md' ? 'md' : 'sm'} variant=\"tertiary\">\n {`Load ${loadMoreCount} more`}\n </BitkitButton>\n )}\n {/* A retry can report both states at once — the spinner replaces the stale error. */}\n {loadError && !loadingMore && (\n <Box css={styles.error} role=\"alert\">\n <IconErrorCircleFilled color=\"icon/negative\" size=\"16\" />\n <Text as=\"span\">Failed to load items.</Text>\n </Box>\n )}\n </>\n )}\n </Box>\n );\n});\n\nBitkitPaginationLoadMore.displayName = 'BitkitPaginationLoadMore';\n\nexport default BitkitPaginationLoadMore;\n"],"mappings":";;;;;;;;;;AAoBA,IAAM,2BAA2B,YAA2D,OAAO,QAAQ;CACzG,MAAM,EACJ,YAAY,OACZ,cAAc,OACd,YACA,MACA,gBACA,OAAO,MACP,YACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,qBAAqB,CAC1C,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,cAAc,KAAK,IAAI,GAAG,IAAI;CACpC,MAAM,wBAAwB,KAAK,IAAI,GAAG,cAAc;CACxD,MAAM,aAAa,KAAK,IAAI,cAAc,uBAAuB,UAAU;CAC3E,MAAM,aAAa,cAAc;CACjC,MAAM,gBAAgB,KAAK,IAAI,uBAAuB,aAAa,UAAU;CAG7E,MAAM,oBAAoB,SAAS,OAAO,OAAO;CAEjD,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;YAArC,CACE,qBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;aAAzB;IAAkC;IACvB;IAAW;IAAK;GACd;MACZ,CAAC,cACA,qBAAA,YAAA,EAAA,UAAA,CACG,cACC,oBAAC,qBAAD;GAAqB,OAAM;GAAgB,OAAM;GAAkB,MAAM;EAAoB,CAAA,IAC3F,SAAS,OACX,oBAAC,kBAAD;GAAkB,SAAS;GAAY,MAAK;aACzC,QAAQ,cAAc;EACP,CAAA,IAElB,oBAAC,cAAD;GAAc,SAAS;GAAY,MAAM,SAAS,OAAO,OAAO;GAAM,SAAQ;aAC3E,QAAQ,cAAc;EACX,CAAA,GAGf,aAAa,CAAC,eACb,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,MAAK;aAA7B,CACE,oBAAC,uBAAD;IAAuB,OAAM;IAAgB,MAAK;GAAM,CAAA,GACxD,oBAAC,MAAD;IAAM,IAAG;cAAO;GAA2B,CAAA,CACxC;IAEP,EAAA,CAAA,CAED;;AAET,CAAC;AAED,yBAAyB,cAAc"}
|
|
@@ -5,7 +5,14 @@ import { default as semanticColors } from '../../theme/semantic-tokens/semanticC
|
|
|
5
5
|
* Derived from the semantic token map, so new tokens are picked up automatically.
|
|
6
6
|
*/
|
|
7
7
|
export type BitkitProgressBarRangeColor = Extract<keyof typeof semanticColors, `color/${string}`>;
|
|
8
|
-
export interface BitkitProgressBarProps extends Omit<ProgressRootProps, 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'trackColor'> {
|
|
8
|
+
export interface BitkitProgressBarProps extends Omit<ProgressRootProps, 'aria-label' | 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'trackColor'> {
|
|
9
|
+
/**
|
|
10
|
+
* Accessible name for the bar — never rendered visually. Without it screen readers
|
|
11
|
+
* announce the percentage alone, with no indication of what is being measured.
|
|
12
|
+
* The value itself stays exposed through `aria-valuenow`, so this should name the
|
|
13
|
+
* thing ("Monthly build limit"), not repeat the number.
|
|
14
|
+
*/
|
|
15
|
+
label?: string;
|
|
9
16
|
/** Color of the filled part. Any `color/*` semantic token. */
|
|
10
17
|
rangeColor?: BitkitProgressBarRangeColor;
|
|
11
18
|
/** Which ends are rounded. Use `start`/`none`/`end` for bars sitting next to each other in a group. */
|
|
@@ -1,14 +1,19 @@
|
|
|
1
|
-
import { forwardRef } from "react";
|
|
1
|
+
import { forwardRef, useMemo } from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Progress } from "@chakra-ui/react/progress";
|
|
4
4
|
//#region lib/components/BitkitProgressBar/BitkitProgressBar.tsx
|
|
5
5
|
var BitkitProgressBar = forwardRef((props, ref) => {
|
|
6
|
-
const { rangeColor = "color/blue/base", roundedEdges = "both", size = "8", trackColor = "neutral", ...rest } = props;
|
|
6
|
+
const { label, rangeColor = "color/blue/base", roundedEdges = "both", size = "8", trackColor = "neutral", translations, ...rest } = props;
|
|
7
|
+
const resolvedTranslations = useMemo(() => label ? {
|
|
8
|
+
...translations,
|
|
9
|
+
value: () => label
|
|
10
|
+
} : translations, [label, translations]);
|
|
7
11
|
return /* @__PURE__ */ jsx(Progress.Root, {
|
|
8
12
|
ref,
|
|
9
13
|
roundedEdges,
|
|
10
14
|
size,
|
|
11
15
|
trackColor,
|
|
16
|
+
translations: resolvedTranslations,
|
|
12
17
|
...rest,
|
|
13
18
|
children: /* @__PURE__ */ jsx(Progress.Track, { children: /* @__PURE__ */ jsx(Progress.Range, { background: rangeColor }) })
|
|
14
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitProgressBar.js","names":[],"sources":["../../../lib/components/BitkitProgressBar/BitkitProgressBar.tsx"],"sourcesContent":["import { Progress, type ProgressRootProps } from '@chakra-ui/react/progress';\nimport { forwardRef } from 'react';\n\nimport type semanticColors from '../../theme/semantic-tokens/semanticColors';\n\n/**\n * Every `color/*` semantic token — the only colors the range is allowed to use.\n * Derived from the semantic token map, so new tokens are picked up automatically.\n */\nexport type BitkitProgressBarRangeColor = Extract<keyof typeof semanticColors, `color/${string}`>;\n\nexport interface BitkitProgressBarProps extends Omit<\n ProgressRootProps,\n 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'trackColor'\n> {\n /** Color of the filled part. Any `color/*` semantic token. */\n rangeColor?: BitkitProgressBarRangeColor;\n /** Which ends are rounded. Use `start`/`none`/`end` for bars sitting next to each other in a group. */\n roundedEdges?: 'both' | 'end' | 'none' | 'start';\n /** Height of the bar, in size tokens. */\n size?: '1' | '2' | '4' | '6' | '8' | '12' | '16';\n /** Background of the unfilled part. */\n trackColor?: 'neutral' | 'transparent';\n}\n\nconst BitkitProgressBar = forwardRef<HTMLDivElement, BitkitProgressBarProps>((props, ref) => {\n const {
|
|
1
|
+
{"version":3,"file":"BitkitProgressBar.js","names":[],"sources":["../../../lib/components/BitkitProgressBar/BitkitProgressBar.tsx"],"sourcesContent":["import { Progress, type ProgressRootProps } from '@chakra-ui/react/progress';\nimport { forwardRef, useMemo } from 'react';\n\nimport type semanticColors from '../../theme/semantic-tokens/semanticColors';\n\n/**\n * Every `color/*` semantic token — the only colors the range is allowed to use.\n * Derived from the semantic token map, so new tokens are picked up automatically.\n */\nexport type BitkitProgressBarRangeColor = Extract<keyof typeof semanticColors, `color/${string}`>;\n\nexport interface BitkitProgressBarProps extends Omit<\n ProgressRootProps,\n 'aria-label' | 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'trackColor'\n> {\n /**\n * Accessible name for the bar — never rendered visually. Without it screen readers\n * announce the percentage alone, with no indication of what is being measured.\n * The value itself stays exposed through `aria-valuenow`, so this should name the\n * thing (\"Monthly build limit\"), not repeat the number.\n */\n label?: string;\n /** Color of the filled part. Any `color/*` semantic token. */\n rangeColor?: BitkitProgressBarRangeColor;\n /** Which ends are rounded. Use `start`/`none`/`end` for bars sitting next to each other in a group. */\n roundedEdges?: 'both' | 'end' | 'none' | 'start';\n /** Height of the bar, in size tokens. */\n size?: '1' | '2' | '4' | '6' | '8' | '12' | '16';\n /** Background of the unfilled part. */\n trackColor?: 'neutral' | 'transparent';\n}\n\nconst BitkitProgressBar = forwardRef<HTMLDivElement, BitkitProgressBarProps>((props, ref) => {\n const {\n label,\n rangeColor = 'color/blue/base',\n roundedEdges = 'both',\n size = '8',\n trackColor = 'neutral',\n translations,\n ...rest\n } = props;\n\n // Zag puts role=\"progressbar\" and aria-label on the *track*, not the root, so an\n // `aria-label` prop would never reach the labelled element — hence `aria-label` is\n // omitted from the props and the name is routed through the machine's translations.\n // Merged rather than replaced: `IntlTranslations` has only `value` today, but Zag has\n // added keys to its internals before and a wholesale replace would drop them silently.\n const resolvedTranslations = useMemo(\n () => (label ? { ...translations, value: () => label } : translations),\n [label, translations],\n );\n\n return (\n <Progress.Root\n ref={ref}\n roundedEdges={roundedEdges}\n size={size}\n trackColor={trackColor}\n translations={resolvedTranslations}\n {...rest}\n >\n <Progress.Track>\n <Progress.Range background={rangeColor} />\n </Progress.Track>\n </Progress.Root>\n );\n});\n\nBitkitProgressBar.displayName = 'BitkitProgressBar';\n\nexport default BitkitProgressBar;\n"],"mappings":";;;;AAgCA,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EACJ,OACA,aAAa,mBACb,eAAe,QACf,OAAO,KACP,aAAa,WACb,cACA,GAAG,SACD;CAOJ,MAAM,uBAAuB,cACpB,QAAQ;EAAE,GAAG;EAAc,aAAa;CAAM,IAAI,cACzD,CAAC,OAAO,YAAY,CACtB;CAEA,OACE,oBAAC,SAAS,MAAV;EACO;EACS;EACR;EACM;EACZ,cAAc;EACd,GAAI;YAEJ,oBAAC,SAAS,OAAV,EAAA,UACE,oBAAC,SAAS,OAAV,EAAgB,YAAY,WAAa,CAAA,EAC3B,CAAA;CACH,CAAA;AAEnB,CAAC;AAED,kBAAkB,cAAc"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const paginationLoadMoreRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "counter", {
|
|
1
|
+
declare const paginationLoadMoreRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "error" | "counter", {
|
|
2
2
|
size: {
|
|
3
3
|
md: {
|
|
4
4
|
root: {
|
|
@@ -11,6 +11,9 @@ declare const paginationLoadMoreRecipe: import('@chakra-ui/react').SlotRecipeDef
|
|
|
11
11
|
paddingInlineEnd: "24";
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
|
+
error: {
|
|
15
|
+
textStyle: "body/md/regular";
|
|
16
|
+
};
|
|
14
17
|
};
|
|
15
18
|
sm: {
|
|
16
19
|
root: {
|
|
@@ -23,6 +26,9 @@ declare const paginationLoadMoreRecipe: import('@chakra-ui/react').SlotRecipeDef
|
|
|
23
26
|
paddingInlineEnd: "16";
|
|
24
27
|
};
|
|
25
28
|
};
|
|
29
|
+
error: {
|
|
30
|
+
textStyle: "body/md/regular";
|
|
31
|
+
};
|
|
26
32
|
};
|
|
27
33
|
xs: {
|
|
28
34
|
root: {
|
|
@@ -35,6 +41,9 @@ declare const paginationLoadMoreRecipe: import('@chakra-ui/react').SlotRecipeDef
|
|
|
35
41
|
paddingInlineEnd: "12";
|
|
36
42
|
};
|
|
37
43
|
};
|
|
44
|
+
error: {
|
|
45
|
+
textStyle: "body/sm/regular";
|
|
46
|
+
};
|
|
38
47
|
};
|
|
39
48
|
};
|
|
40
49
|
}>;
|
|
@@ -3,7 +3,11 @@ import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
|
3
3
|
//#region lib/theme/slot-recipes/PaginationLoadMore.recipe.ts
|
|
4
4
|
var paginationLoadMoreRecipe = defineSlotRecipe({
|
|
5
5
|
className: "pagination-load-more",
|
|
6
|
-
slots: [
|
|
6
|
+
slots: [
|
|
7
|
+
"root",
|
|
8
|
+
"counter",
|
|
9
|
+
"error"
|
|
10
|
+
],
|
|
7
11
|
base: {
|
|
8
12
|
root: {
|
|
9
13
|
alignItems: "center",
|
|
@@ -19,6 +23,16 @@ var paginationLoadMoreRecipe = defineSlotRecipe({
|
|
|
19
23
|
borderInlineEndStyle: "solid",
|
|
20
24
|
borderInlineEndWidth: "1"
|
|
21
25
|
}
|
|
26
|
+
},
|
|
27
|
+
error: {
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
color: "text/negative",
|
|
30
|
+
display: "flex",
|
|
31
|
+
flex: "1",
|
|
32
|
+
gap: "4",
|
|
33
|
+
justifyContent: "flex-end",
|
|
34
|
+
minWidth: 0,
|
|
35
|
+
paddingBlock: "2"
|
|
22
36
|
}
|
|
23
37
|
},
|
|
24
38
|
variants: { size: {
|
|
@@ -30,7 +44,8 @@ var paginationLoadMoreRecipe = defineSlotRecipe({
|
|
|
30
44
|
counter: {
|
|
31
45
|
textStyle: "body/md/regular",
|
|
32
46
|
"&:has(+ *)": { paddingInlineEnd: "24" }
|
|
33
|
-
}
|
|
47
|
+
},
|
|
48
|
+
error: { textStyle: "body/md/regular" }
|
|
34
49
|
},
|
|
35
50
|
sm: {
|
|
36
51
|
root: {
|
|
@@ -40,7 +55,8 @@ var paginationLoadMoreRecipe = defineSlotRecipe({
|
|
|
40
55
|
counter: {
|
|
41
56
|
textStyle: "body/md/regular",
|
|
42
57
|
"&:has(+ *)": { paddingInlineEnd: "16" }
|
|
43
|
-
}
|
|
58
|
+
},
|
|
59
|
+
error: { textStyle: "body/md/regular" }
|
|
44
60
|
},
|
|
45
61
|
xs: {
|
|
46
62
|
root: {
|
|
@@ -50,7 +66,8 @@ var paginationLoadMoreRecipe = defineSlotRecipe({
|
|
|
50
66
|
counter: {
|
|
51
67
|
textStyle: "body/sm/regular",
|
|
52
68
|
"&:has(+ *)": { paddingInlineEnd: "12" }
|
|
53
|
-
}
|
|
69
|
+
},
|
|
70
|
+
error: { textStyle: "body/sm/regular" }
|
|
54
71
|
}
|
|
55
72
|
} },
|
|
56
73
|
defaultVariants: { size: "md" }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationLoadMore.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PaginationLoadMore.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst paginationLoadMoreRecipe = defineSlotRecipe({\n className: 'pagination-load-more',\n slots: ['root', 'counter'],\n base: {\n root: {\n alignItems: 'center',\n display: 'flex',\n paddingBlock: '8',\n paddingInline: '16',\n },\n counter: {\n color: 'text/secondary',\n fontVariantNumeric: 'tabular-nums',\n '&:has(+ *)': {\n borderInlineEndColor: 'border/regular',\n borderInlineEndStyle: 'solid',\n borderInlineEndWidth: '1',\n },\n },\n },\n variants: {\n size: {\n md: {\n root: {\n gap: '24',\n minHeight: rem(56),\n },\n counter: {\n textStyle: 'body/md/regular',\n '&:has(+ *)': {\n paddingInlineEnd: '24',\n },\n },\n },\n sm: {\n root: {\n gap: '16',\n minHeight: '48',\n },\n counter: {\n textStyle: 'body/md/regular',\n '&:has(+ *)': {\n paddingInlineEnd: '16',\n },\n },\n },\n xs: {\n root: {\n gap: '12',\n minHeight: '32',\n },\n counter: {\n textStyle: 'body/sm/regular',\n '&:has(+ *)': {\n paddingInlineEnd: '12',\n },\n },\n },\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport default paginationLoadMoreRecipe;\n"],"mappings":";;;AAIA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO
|
|
1
|
+
{"version":3,"file":"PaginationLoadMore.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PaginationLoadMore.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst paginationLoadMoreRecipe = defineSlotRecipe({\n className: 'pagination-load-more',\n slots: ['root', 'counter', 'error'],\n base: {\n root: {\n alignItems: 'center',\n display: 'flex',\n paddingBlock: '8',\n paddingInline: '16',\n },\n counter: {\n color: 'text/secondary',\n fontVariantNumeric: 'tabular-nums',\n '&:has(+ *)': {\n borderInlineEndColor: 'border/regular',\n borderInlineEndStyle: 'solid',\n borderInlineEndWidth: '1',\n },\n },\n error: {\n alignItems: 'center',\n color: 'text/negative',\n display: 'flex',\n flex: '1',\n gap: '4',\n justifyContent: 'flex-end',\n minWidth: 0,\n paddingBlock: '2',\n },\n },\n variants: {\n // md/sm keep a wider gap than the Figma spec (24/16 instead of 12/8). Figma expects the\n // tertiary button's own inline padding to make up the rest, but that puts its hover\n // background within 12/8px of the divider. Trading exact spec for hover breathing room.\n size: {\n md: {\n root: {\n gap: '24',\n minHeight: rem(56),\n },\n counter: {\n textStyle: 'body/md/regular',\n '&:has(+ *)': {\n paddingInlineEnd: '24',\n },\n },\n error: {\n textStyle: 'body/md/regular',\n },\n },\n sm: {\n root: {\n gap: '16',\n minHeight: '48',\n },\n counter: {\n textStyle: 'body/md/regular',\n '&:has(+ *)': {\n paddingInlineEnd: '16',\n },\n },\n error: {\n textStyle: 'body/md/regular',\n },\n },\n xs: {\n root: {\n gap: '12',\n minHeight: '32',\n },\n counter: {\n textStyle: 'body/sm/regular',\n '&:has(+ *)': {\n paddingInlineEnd: '12',\n },\n },\n error: {\n textStyle: 'body/sm/regular',\n },\n },\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport default paginationLoadMoreRecipe;\n"],"mappings":";;;AAIA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC;EAAQ;EAAW;CAAO;CAClC,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,cAAc;GACd,eAAe;EACjB;EACA,SAAS;GACP,OAAO;GACP,oBAAoB;GACpB,cAAc;IACZ,sBAAsB;IACtB,sBAAsB;IACtB,sBAAsB;GACxB;EACF;EACA,OAAO;GACL,YAAY;GACZ,OAAO;GACP,SAAS;GACT,MAAM;GACN,KAAK;GACL,gBAAgB;GAChB,UAAU;GACV,cAAc;EAChB;CACF;CACA,UAAU,EAIR,MAAM;EACJ,IAAI;GACF,MAAM;IACJ,KAAK;IACL,WAAW,IAAI,EAAE;GACnB;GACA,SAAS;IACP,WAAW;IACX,cAAc,EACZ,kBAAkB,KACpB;GACF;GACA,OAAO,EACL,WAAW,kBACb;EACF;EACA,IAAI;GACF,MAAM;IACJ,KAAK;IACL,WAAW;GACb;GACA,SAAS;IACP,WAAW;IACX,cAAc,EACZ,kBAAkB,KACpB;GACF;GACA,OAAO,EACL,WAAW,kBACb;EACF;EACA,IAAI;GACF,MAAM;IACJ,KAAK;IACL,WAAW;GACb;GACA,SAAS;IACP,WAAW;IACX,cAAc,EACZ,kBAAkB,KACpB;GACF;GACA,OAAO,EACL,WAAW,kBACb;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|
|
@@ -1448,7 +1448,7 @@ declare const slotRecipes: {
|
|
|
1448
1448
|
};
|
|
1449
1449
|
};
|
|
1450
1450
|
}>;
|
|
1451
|
-
paginationLoadMore: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "counter", {
|
|
1451
|
+
paginationLoadMore: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "error" | "counter", {
|
|
1452
1452
|
size: {
|
|
1453
1453
|
md: {
|
|
1454
1454
|
root: {
|
|
@@ -1461,6 +1461,9 @@ declare const slotRecipes: {
|
|
|
1461
1461
|
paddingInlineEnd: "24";
|
|
1462
1462
|
};
|
|
1463
1463
|
};
|
|
1464
|
+
error: {
|
|
1465
|
+
textStyle: "body/md/regular";
|
|
1466
|
+
};
|
|
1464
1467
|
};
|
|
1465
1468
|
sm: {
|
|
1466
1469
|
root: {
|
|
@@ -1473,6 +1476,9 @@ declare const slotRecipes: {
|
|
|
1473
1476
|
paddingInlineEnd: "16";
|
|
1474
1477
|
};
|
|
1475
1478
|
};
|
|
1479
|
+
error: {
|
|
1480
|
+
textStyle: "body/md/regular";
|
|
1481
|
+
};
|
|
1476
1482
|
};
|
|
1477
1483
|
xs: {
|
|
1478
1484
|
root: {
|
|
@@ -1485,6 +1491,9 @@ declare const slotRecipes: {
|
|
|
1485
1491
|
paddingInlineEnd: "12";
|
|
1486
1492
|
};
|
|
1487
1493
|
};
|
|
1494
|
+
error: {
|
|
1495
|
+
textStyle: "body/sm/regular";
|
|
1496
|
+
};
|
|
1488
1497
|
};
|
|
1489
1498
|
};
|
|
1490
1499
|
}>;
|