@bitrise/bitkit-v2 0.3.297 → 0.3.299
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/BitkitList/BitkitList.d.ts +1 -1
- package/dist/components/BitkitList/BitkitList.js +5 -0
- package/dist/components/BitkitList/BitkitList.js.map +1 -1
- package/dist/components/BitkitStat/BitkitStat.d.ts +1 -0
- package/dist/components/BitkitStat/BitkitStat.js +18 -11
- package/dist/components/BitkitStat/BitkitStat.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ListRootProps } from '@chakra-ui/react/list';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { BitkitIconComponent } from '../../icons';
|
|
4
|
-
type BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'inline';
|
|
4
|
+
type BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';
|
|
5
5
|
type BitkitListSize = 'lg' | 'md' | 'sm';
|
|
6
6
|
type BitkitListTextColor = 'body' | 'secondary';
|
|
7
7
|
export interface BitkitListProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {
|
|
@@ -50,6 +50,11 @@ var UNORDERED_ICON_SIZE = {
|
|
|
50
50
|
var BitkitListItem = forwardRef((props, ref) => {
|
|
51
51
|
const { children, helperText, icon: Icon, iconColor } = props;
|
|
52
52
|
const { colorVariant, size, textColor, variant } = useBitkitListContext();
|
|
53
|
+
if (variant === "unstyled") return /* @__PURE__ */ jsx(List.Item, {
|
|
54
|
+
ref,
|
|
55
|
+
color: textColor === "secondary" ? "text/secondary" : "text/body",
|
|
56
|
+
children
|
|
57
|
+
});
|
|
53
58
|
if (variant === "inline") return /* @__PURE__ */ jsx(List.Item, {
|
|
54
59
|
ref,
|
|
55
60
|
alignItems: "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\nexport interface BitkitListProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n size?: BitkitListSize;\n textColor?: BitkitListTextColor;\n variant?: BitkitListVariant;\n}\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n if (variant === 'inline') {\n return (\n <List.Item\n ref={ref}\n alignItems=\"center\"\n color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n _notFirst={{\n _before: {\n content: '\"\\\\2022\"',\n color: 'text/tertiary',\n marginInline: '8',\n },\n }}\n >\n {children}\n </List.Item>\n );\n }\n\n const content = helperText ? (\n <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" minWidth=\"0\">\n {children}\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n {helperText}\n </Text>\n </Box>\n ) : (\n children\n );\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n return (\n <List.Item\n ref={ref}\n counterIncrement=\"bitkit-list\"\n gap={helperText ? '12' : '6'}\n marginBlockEnd={helperText ? '8' : undefined}\n >\n {Icon ? (\n <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background={`color/${colorVariant}/subtle`}\n borderRadius=\"50%\"\n color={`color/${colorVariant}/strong`}\n height={helperText ? '24' : '20'}\n // Give the smaller 20px circle 2px of block margin on each side so the marker\n // always occupies a 24px vertical slot and its center aligns with the first\n // text line — matches the Figma frame with the 20px circle centered in a 24px\n // marker box.\n marginBlock={helperText ? undefined : '2'}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n width={helperText ? '24' : '20'}\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\nexport interface BitkitListProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n size?: BitkitListSize;\n textColor?: BitkitListTextColor;\n variant?: BitkitListVariant;\n}\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n if (variant === 'unstyled') {\n return (\n <List.Item ref={ref} color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}>\n {children}\n </List.Item>\n );\n }\n\n if (variant === 'inline') {\n return (\n <List.Item\n ref={ref}\n alignItems=\"center\"\n color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n _notFirst={{\n _before: {\n content: '\"\\\\2022\"',\n color: 'text/tertiary',\n marginInline: '8',\n },\n }}\n >\n {children}\n </List.Item>\n );\n }\n\n const content = helperText ? (\n <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" minWidth=\"0\">\n {children}\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n {helperText}\n </Text>\n </Box>\n ) : (\n children\n );\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n return (\n <List.Item\n ref={ref}\n counterIncrement=\"bitkit-list\"\n gap={helperText ? '12' : '6'}\n marginBlockEnd={helperText ? '8' : undefined}\n >\n {Icon ? (\n <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background={`color/${colorVariant}/subtle`}\n borderRadius=\"50%\"\n color={`color/${colorVariant}/strong`}\n height={helperText ? '24' : '20'}\n // Give the smaller 20px circle 2px of block margin on each side so the marker\n // always occupies a 24px vertical slot and its center aligns with the first\n // text line — matches the Figma frame with the 20px circle centered in a 24px\n // marker box.\n marginBlock={helperText ? undefined : '2'}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n width={helperText ? '24' : '20'}\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ export type TrendDirection = 'up' | 'down';
|
|
|
4
4
|
export type TrendTextPlacement = 'below' | 'inline';
|
|
5
5
|
export interface BitkitStatProps extends Omit<BoxProps, 'colorPalette'> {
|
|
6
6
|
label: string;
|
|
7
|
+
placeholder?: string;
|
|
7
8
|
size?: 'lg' | '2xl' | '3xl';
|
|
8
9
|
state?: 'default' | 'skeleton';
|
|
9
10
|
subtext?: string;
|
|
@@ -4,7 +4,7 @@ import IconInfoCircle from "../../icons/IconInfoCircle.js";
|
|
|
4
4
|
import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
|
|
5
5
|
import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
9
9
|
//#region lib/components/BitkitStat/BitkitStat.tsx
|
|
10
10
|
var TREND_COLORS = {
|
|
@@ -54,7 +54,7 @@ var SKELETON_VALUE_HEIGHTS = {
|
|
|
54
54
|
"3xl": "40"
|
|
55
55
|
};
|
|
56
56
|
var BitkitStat = forwardRef((props, ref) => {
|
|
57
|
-
const { label, size = "lg", state = "default", subtext, tooltip, trendColor, trendDirection, trendText, trendTextPlacement = "below", value, variant = "default", ...rest } = props;
|
|
57
|
+
const { label, placeholder = "N/A", size = "lg", state = "default", subtext, tooltip, trendColor, trendDirection, trendText, trendTextPlacement = "below", value, variant = "default", ...rest } = props;
|
|
58
58
|
const styles = useSlotRecipe({ key: "stat" })({
|
|
59
59
|
size,
|
|
60
60
|
variant
|
|
@@ -78,13 +78,16 @@ var BitkitStat = forwardRef((props, ref) => {
|
|
|
78
78
|
css: styles.root,
|
|
79
79
|
ref,
|
|
80
80
|
...rest,
|
|
81
|
-
children: [/* @__PURE__ */
|
|
81
|
+
children: [/* @__PURE__ */ jsx(chakra.span, {
|
|
82
82
|
css: styles.value,
|
|
83
|
-
children:
|
|
83
|
+
children: !value ? /* @__PURE__ */ jsx(chakra.span, {
|
|
84
|
+
color: "text/tertiary",
|
|
85
|
+
children: placeholder
|
|
86
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!!TrendIcon && /* @__PURE__ */ jsx(TrendIcon, {
|
|
84
87
|
size: "16",
|
|
85
88
|
color: trend.iconColor
|
|
86
|
-
}), value]
|
|
87
|
-
}), !!trendText && /* @__PURE__ */ jsx(chakra.span, {
|
|
89
|
+
}), value] })
|
|
90
|
+
}), !!value && !!trendText && /* @__PURE__ */ jsx(chakra.span, {
|
|
88
91
|
css: styles.helpText,
|
|
89
92
|
color: trend.textColor,
|
|
90
93
|
children: trendText
|
|
@@ -118,17 +121,21 @@ var BitkitStat = forwardRef((props, ref) => {
|
|
|
118
121
|
]
|
|
119
122
|
});
|
|
120
123
|
const isInline = trendTextPlacement === "inline";
|
|
121
|
-
const
|
|
124
|
+
const showTrendText = !!value && !isInline && !!trendText;
|
|
125
|
+
const showHelpText = showTrendText || !!subtext;
|
|
122
126
|
return /* @__PURE__ */ jsxs(chakra.dl, {
|
|
123
127
|
css: styles.root,
|
|
124
128
|
ref,
|
|
125
129
|
...rest,
|
|
126
130
|
children: [
|
|
127
131
|
labelContent,
|
|
128
|
-
/* @__PURE__ */
|
|
132
|
+
/* @__PURE__ */ jsx(chakra.dd, {
|
|
129
133
|
css: styles.value,
|
|
130
134
|
alignItems: isInline && size === "3xl" ? "flex-end" : void 0,
|
|
131
|
-
children:
|
|
135
|
+
children: !value ? /* @__PURE__ */ jsx(chakra.span, {
|
|
136
|
+
color: "text/tertiary",
|
|
137
|
+
children: placeholder
|
|
138
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [value, isInline ? /* @__PURE__ */ jsxs(chakra.span, {
|
|
132
139
|
display: "inline-flex",
|
|
133
140
|
gap: "4",
|
|
134
141
|
alignItems: "center",
|
|
@@ -144,11 +151,11 @@ var BitkitStat = forwardRef((props, ref) => {
|
|
|
144
151
|
}) : !!TrendIcon && /* @__PURE__ */ jsx(TrendIcon, {
|
|
145
152
|
size: BELOW_ICON_SIZES[size],
|
|
146
153
|
color: trend.iconColor
|
|
147
|
-
})]
|
|
154
|
+
})] })
|
|
148
155
|
}),
|
|
149
156
|
showHelpText && /* @__PURE__ */ jsxs(chakra.dd, {
|
|
150
157
|
css: styles.helpText,
|
|
151
|
-
children: [
|
|
158
|
+
children: [showTrendText && /* @__PURE__ */ jsx(chakra.span, {
|
|
152
159
|
color: trend.textColor,
|
|
153
160
|
children: trendText
|
|
154
161
|
}), !!subtext && /* @__PURE__ */ jsx(chakra.span, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitStat.js","names":[],"sources":["../../../lib/components/BitkitStat/BitkitStat.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconArrowDown, IconArrowUp, IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport type TrendColor = 'positive' | 'negative' | 'neutral';\nexport type TrendDirection = 'up' | 'down';\nexport type TrendTextPlacement = 'below' | 'inline';\n\nconst TREND_COLORS = {\n positive: { text: 'text/positive', icon: 'icon/positive' },\n negative: { text: 'text/negative', icon: 'icon/negative' },\n neutral: { text: 'text/secondary', icon: 'icon/tertiary' },\n} as const;\n\nconst TREND_ICONS = { up: IconArrowUp, down: IconArrowDown } as const;\nconst DEFAULT_COLORS: Record<TrendDirection, TrendColor> = { up: 'positive', down: 'negative' };\n\nconst resolveTrend = (trendColor?: TrendColor, trendDirection?: TrendDirection) => {\n const color = trendColor ?? (trendDirection ? DEFAULT_COLORS[trendDirection] : undefined);\n const colors = color ? TREND_COLORS[color] : undefined;\n return {\n textColor: colors?.text ?? 'text/secondary',\n iconColor: colors?.icon ?? 'icon/tertiary',\n Icon: trendDirection ? TREND_ICONS[trendDirection] : undefined,\n };\n};\n\nconst BELOW_ICON_SIZES = { lg: '16', '2xl': '24', '3xl': '24' } as const;\nconst INLINE_TREND_STYLES = {\n lg: { paddingBlockStart: '2' },\n '2xl': { paddingBlockStart: '6' },\n '3xl': { paddingBlockEnd: '4' },\n} as const;\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\nexport interface BitkitStatProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n size?: 'lg' | '2xl' | '3xl';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n trendColor?: TrendColor;\n trendDirection?: TrendDirection;\n trendText?: string;\n trendTextPlacement?: TrendTextPlacement;\n value?: string;\n variant?: 'default' | 'compact';\n}\n\n// --- Component ---\n\nconst BitkitStat = forwardRef<HTMLElement, BitkitStatProps>((props, ref) => {\n const {\n label,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n trendColor,\n trendDirection,\n trendText,\n trendTextPlacement = 'below',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'stat' })({ size, variant });\n const trend = resolveTrend(trendColor, trendDirection);\n const { Icon: TrendIcon } = trend;\n const isCompact = variant === 'compact';\n\n // --- Compact ---\n if (isCompact) {\n if (state === 'skeleton') {\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <Skeleton height=\"20\" width=\"64\" />\n <Skeleton height=\"16\" width=\"48\" />\n </chakra.div>\n );\n }\n\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <chakra.span css={styles.value}>\n {!!TrendIcon && <TrendIcon size=\"16\" color={trend.iconColor} />}\n
|
|
1
|
+
{"version":3,"file":"BitkitStat.js","names":[],"sources":["../../../lib/components/BitkitStat/BitkitStat.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconArrowDown, IconArrowUp, IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport type TrendColor = 'positive' | 'negative' | 'neutral';\nexport type TrendDirection = 'up' | 'down';\nexport type TrendTextPlacement = 'below' | 'inline';\n\nconst TREND_COLORS = {\n positive: { text: 'text/positive', icon: 'icon/positive' },\n negative: { text: 'text/negative', icon: 'icon/negative' },\n neutral: { text: 'text/secondary', icon: 'icon/tertiary' },\n} as const;\n\nconst TREND_ICONS = { up: IconArrowUp, down: IconArrowDown } as const;\nconst DEFAULT_COLORS: Record<TrendDirection, TrendColor> = { up: 'positive', down: 'negative' };\n\nconst resolveTrend = (trendColor?: TrendColor, trendDirection?: TrendDirection) => {\n const color = trendColor ?? (trendDirection ? DEFAULT_COLORS[trendDirection] : undefined);\n const colors = color ? TREND_COLORS[color] : undefined;\n return {\n textColor: colors?.text ?? 'text/secondary',\n iconColor: colors?.icon ?? 'icon/tertiary',\n Icon: trendDirection ? TREND_ICONS[trendDirection] : undefined,\n };\n};\n\nconst BELOW_ICON_SIZES = { lg: '16', '2xl': '24', '3xl': '24' } as const;\nconst INLINE_TREND_STYLES = {\n lg: { paddingBlockStart: '2' },\n '2xl': { paddingBlockStart: '6' },\n '3xl': { paddingBlockEnd: '4' },\n} as const;\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\nexport interface BitkitStatProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n placeholder?: string;\n size?: 'lg' | '2xl' | '3xl';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n trendColor?: TrendColor;\n trendDirection?: TrendDirection;\n trendText?: string;\n trendTextPlacement?: TrendTextPlacement;\n value?: string;\n variant?: 'default' | 'compact';\n}\n\n// --- Component ---\n\nconst BitkitStat = forwardRef<HTMLElement, BitkitStatProps>((props, ref) => {\n const {\n label,\n placeholder = 'N/A',\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n trendColor,\n trendDirection,\n trendText,\n trendTextPlacement = 'below',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'stat' })({ size, variant });\n const trend = resolveTrend(trendColor, trendDirection);\n const { Icon: TrendIcon } = trend;\n const isCompact = variant === 'compact';\n\n // --- Compact ---\n if (isCompact) {\n if (state === 'skeleton') {\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <Skeleton height=\"20\" width=\"64\" />\n <Skeleton height=\"16\" width=\"48\" />\n </chakra.div>\n );\n }\n\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <chakra.span css={styles.value}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {!!TrendIcon && <TrendIcon size=\"16\" color={trend.iconColor} />}\n {value}\n </>\n )}\n </chakra.span>\n {!!value && !!trendText && (\n <chakra.span css={styles.helpText} color={trend.textColor}>\n {trendText}\n </chakra.span>\n )}\n </chakra.div>\n );\n }\n\n // --- Default ---\n\n const labelContent = (\n <chakra.dt css={styles.label}>\n {label}\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n </chakra.dt>\n );\n\n if (state === 'skeleton') {\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <Skeleton height={SKELETON_VALUE_HEIGHTS[size]} width=\"128\" />\n <Skeleton height=\"20\" width=\"128\" />\n </chakra.dl>\n );\n }\n\n const isInline = trendTextPlacement === 'inline';\n const showTrendText = !!value && !isInline && !!trendText;\n const showHelpText = showTrendText || !!subtext;\n\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n\n <chakra.dd css={styles.value} alignItems={isInline && size === '3xl' ? 'flex-end' : undefined}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {value}\n {isInline ? (\n <chakra.span display=\"inline-flex\" gap=\"4\" alignItems=\"center\" css={INLINE_TREND_STYLES[size]}>\n {!!TrendIcon && <TrendIcon size=\"16\" color={trend.iconColor} />}\n {!!trendText && (\n <chakra.span color={trend.textColor} textStyle=\"body/md/regular\">\n {trendText}\n </chakra.span>\n )}\n </chakra.span>\n ) : (\n !!TrendIcon && <TrendIcon size={BELOW_ICON_SIZES[size]} color={trend.iconColor} />\n )}\n </>\n )}\n </chakra.dd>\n\n {showHelpText && (\n <chakra.dd css={styles.helpText}>\n {showTrendText && <chakra.span color={trend.textColor}>{trendText}</chakra.span>}\n {!!subtext && <chakra.span color=\"text/tertiary\">{subtext}</chakra.span>}\n </chakra.dd>\n )}\n </chakra.dl>\n );\n});\n\nBitkitStat.displayName = 'BitkitStat';\n\nexport default BitkitStat;\n"],"mappings":"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"}
|