@bitrise/bitkit-v2 0.3.252-beta.1703 → 0.3.252-beta.1706
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/BitkitAvatar/BitkitAvatar.d.ts +2 -3
- package/dist/components/BitkitAvatar/BitkitAvatar.js.map +1 -1
- package/dist/theme/slot-recipes/EmptyState.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/EmptyState.recipe.js +2 -2
- package/dist/theme/slot-recipes/EmptyState.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { AvatarRootProps } from '@chakra-ui/react/avatar';
|
|
2
|
-
import { ColorPalette } from '@chakra-ui/react/styled-system';
|
|
3
2
|
import { BitkitIconComponent } from '../../icons';
|
|
4
3
|
export type BitkitAvatarProps = Omit<AvatarRootProps, 'variant' | 'backgroundColor' | 'background' | 'bg' | 'colorPalette'> & ({
|
|
5
4
|
variant: 'image';
|
|
@@ -20,8 +19,8 @@ export type BitkitAvatarProps = Omit<AvatarRootProps, 'variant' | 'backgroundCol
|
|
|
20
19
|
src?: never;
|
|
21
20
|
name?: never;
|
|
22
21
|
icon: BitkitIconComponent;
|
|
23
|
-
iconColor?:
|
|
24
|
-
backgroundColor?:
|
|
22
|
+
iconColor?: AvatarRootProps['color'];
|
|
23
|
+
backgroundColor?: AvatarRootProps['color'];
|
|
25
24
|
} | {
|
|
26
25
|
variant: 'letters';
|
|
27
26
|
src?: never;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitAvatar.js","names":[],"sources":["../../../lib/components/BitkitAvatar/BitkitAvatar.tsx"],"sourcesContent":["import { Avatar, type AvatarRootProps } from '@chakra-ui/react/avatar';\nimport { Box } from '@chakra-ui/react/box';\nimport {
|
|
1
|
+
{"version":3,"file":"BitkitAvatar.js","names":[],"sources":["../../../lib/components/BitkitAvatar/BitkitAvatar.tsx"],"sourcesContent":["import { Avatar, type AvatarRootProps } from '@chakra-ui/react/avatar';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport avatarSlotRecipe from '../../theme/slot-recipes/Avatar.recipe';\n\nexport type BitkitAvatarProps = Omit<\n AvatarRootProps,\n 'variant' | 'backgroundColor' | 'background' | 'bg' | 'colorPalette'\n> &\n (\n | {\n variant: 'image';\n src: string;\n name: string;\n icon?: never;\n iconColor?: never;\n backgroundColor?: never;\n }\n | {\n variant: 'image+icon';\n src: string;\n name: string;\n icon: BitkitIconComponent;\n iconColor?: never;\n backgroundColor?: never;\n }\n | {\n variant: 'icon';\n src?: never;\n name?: never;\n icon: BitkitIconComponent;\n iconColor?: AvatarRootProps['color'];\n backgroundColor?: AvatarRootProps['color'];\n }\n | {\n variant: 'letters';\n src?: never;\n name: string;\n icon?: never;\n iconColor?: never;\n backgroundColor?: never;\n }\n | {\n variant: 'user';\n src: string;\n name: string;\n icon?: never;\n iconColor?: never;\n backgroundColor?: never;\n }\n );\n\ntype AvatarColorVariant =\n | 'neutral'\n | 'purple'\n | 'indigo'\n | 'blue'\n | 'green'\n | 'yellow'\n | 'red'\n | 'orange'\n | 'turquoise';\n\nconst COLORS = Object.keys(avatarSlotRecipe.variants?.colorVariant || {}) as AvatarColorVariant[];\n\nconst pickPalette = (name?: string): AvatarColorVariant => {\n if (!name || name.length === 0) return 'neutral';\n const str = name.trim();\n return COLORS[(str.charCodeAt(0) + str.charCodeAt(str.length - 1)) % COLORS.length];\n};\n\nconst processFallbackName = (name?: string) => {\n const str = name?.trim() || '';\n return str && str.length >= 2 ? `${str[0]} ${str[str.length - 1]}` : str;\n};\n\nconst BitkitAvatar = forwardRef<HTMLDivElement, BitkitAvatarProps>((props, ref) => {\n const {\n size,\n variant,\n src,\n name,\n icon: Icon,\n colorVariant = pickPalette(name),\n iconColor,\n backgroundColor,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'avatar' });\n const styleVariant = variant === 'user' && ['24', '32', '40', '48'].includes(size as string) ? 'circle' : 'rounded';\n const styles = recipe({ size, variant: styleVariant });\n const fallbackName = processFallbackName(name);\n\n return (\n <Avatar.Root\n ref={ref}\n size={size}\n variant={styleVariant}\n colorVariant={colorVariant}\n backgroundColor={backgroundColor}\n {...rest}\n >\n {!!fallbackName && <Avatar.Fallback name={fallbackName} />}\n {!!src && <Avatar.Image src={src} />}\n {!!Icon && variant === 'icon' && <Icon css={styles.icon} color={iconColor} size=\"24\" />}\n {!!Icon && variant === 'image+icon' && (\n <Box css={styles.badgeContainer}>\n <Icon css={styles.badge} size=\"16\" />\n </Box>\n )}\n </Avatar.Root>\n );\n});\n\nBitkitAvatar.displayName = 'BitkitAvatar';\n\nexport default BitkitAvatar;\n"],"mappings":";;;;;;;AAkEA,IAAM,SAAS,OAAO,KAAK,iBAAiB,UAAU,gBAAgB,CAAC,CAAC;AAExE,IAAM,eAAe,SAAsC;CACzD,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,OAAO;CACvC,MAAM,MAAM,KAAK,KAAK;CACtB,OAAO,QAAQ,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW,IAAI,SAAS,CAAC,KAAK,OAAO;AAC9E;AAEA,IAAM,uBAAuB,SAAkB;CAC7C,MAAM,MAAM,MAAM,KAAK,KAAK;CAC5B,OAAO,OAAO,IAAI,UAAU,IAAI,GAAG,IAAI,GAAG,GAAG,IAAI,IAAI,SAAS,OAAO;AACvE;AAEA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EACJ,MACA,SACA,KACA,MACA,MAAM,MACN,eAAe,YAAY,IAAI,GAC/B,WACA,iBACA,GAAG,SACD;CAEJ,MAAM,SAAS,cAAc,EAAE,KAAK,SAAS,CAAC;CAC9C,MAAM,eAAe,YAAY,UAAU;EAAC;EAAM;EAAM;EAAM;CAAI,EAAE,SAAS,IAAc,IAAI,WAAW;CAC1G,MAAM,SAAS,OAAO;EAAE;EAAM,SAAS;CAAa,CAAC;CACrD,MAAM,eAAe,oBAAoB,IAAI;CAE7C,OACE,qBAAC,OAAO,MAAR;EACO;EACC;EACN,SAAS;EACK;EACG;EACjB,GAAI;YANN;GAQG,CAAC,CAAC,gBAAgB,oBAAC,OAAO,UAAR,EAAiB,MAAM,aAAe,CAAA;GACxD,CAAC,CAAC,OAAO,oBAAC,OAAO,OAAR,EAAmB,IAAM,CAAA;GAClC,CAAC,CAAC,QAAQ,YAAY,UAAU,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAM,OAAO;IAAW,MAAK;GAAM,CAAA;GACrF,CAAC,CAAC,QAAQ,YAAY,gBACrB,oBAAC,KAAD;IAAK,KAAK,OAAO;cACf,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAO,MAAK;IAAM,CAAA;GACjC,CAAA;EAEI;;AAEjB,CAAC;AAED,aAAa,cAAc"}
|
|
@@ -34,9 +34,9 @@ var emptyStateSlotRecipe = defineSlotRecipe({
|
|
|
34
34
|
},
|
|
35
35
|
variants: { colorVariant: {
|
|
36
36
|
white: { root: { backgroundColor: "background/primary" } },
|
|
37
|
-
|
|
37
|
+
gray: { root: { backgroundColor: "background/secondary" } }
|
|
38
38
|
} },
|
|
39
|
-
defaultVariants: { colorVariant: "
|
|
39
|
+
defaultVariants: { colorVariant: "gray" }
|
|
40
40
|
});
|
|
41
41
|
//#endregion
|
|
42
42
|
export { emptyStateSlotRecipe as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/EmptyState.recipe.ts"],"sourcesContent":["import { emptyStateAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst emptyStateSlotRecipe = defineSlotRecipe({\n slots: emptyStateAnatomy.keys(),\n className: 'empty-state',\n base: {\n root: {\n border: '1px solid',\n borderColor: 'border/minimal',\n borderRadius: '4',\n padding: ['32', '48'],\n },\n content: {\n maxWidth: rem(480),\n marginInline: 'auto',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n textAlign: 'center',\n },\n indicator: {\n color: 'icon/tertiary',\n },\n title: {\n textStyle: 'heading/h4',\n color: 'text/secondary',\n marginBlock: '8',\n },\n description: {\n textStyle: 'body/md/regular',\n color: 'text/secondary',\n '&:has(+ *)': {\n marginBlockEnd: '24',\n },\n },\n },\n\n variants: {\n colorVariant: {\n white: {\n root: {\n backgroundColor: 'background/primary',\n },\n },\n
|
|
1
|
+
{"version":3,"file":"EmptyState.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/EmptyState.recipe.ts"],"sourcesContent":["import { emptyStateAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst emptyStateSlotRecipe = defineSlotRecipe({\n slots: emptyStateAnatomy.keys(),\n className: 'empty-state',\n base: {\n root: {\n border: '1px solid',\n borderColor: 'border/minimal',\n borderRadius: '4',\n padding: ['32', '48'],\n },\n content: {\n maxWidth: rem(480),\n marginInline: 'auto',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n textAlign: 'center',\n },\n indicator: {\n color: 'icon/tertiary',\n },\n title: {\n textStyle: 'heading/h4',\n color: 'text/secondary',\n marginBlock: '8',\n },\n description: {\n textStyle: 'body/md/regular',\n color: 'text/secondary',\n '&:has(+ *)': {\n marginBlockEnd: '24',\n },\n },\n },\n\n variants: {\n colorVariant: {\n white: {\n root: {\n backgroundColor: 'background/primary',\n },\n },\n gray: {\n root: {\n backgroundColor: 'background/secondary',\n },\n },\n },\n },\n\n defaultVariants: {\n colorVariant: 'gray',\n },\n});\n\nexport default emptyStateSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,uBAAuB,iBAAiB;CAC5C,OAAO,kBAAkB,KAAK;CAC9B,WAAW;CACX,MAAM;EACJ,MAAM;GACJ,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS,CAAC,MAAM,IAAI;EACtB;EACA,SAAS;GACP,UAAU,IAAI,GAAG;GACjB,cAAc;GACd,SAAS;GACT,eAAe;GACf,YAAY;GACZ,WAAW;EACb;EACA,WAAW,EACT,OAAO,gBACT;EACA,OAAO;GACL,WAAW;GACX,OAAO;GACP,aAAa;EACf;EACA,aAAa;GACX,WAAW;GACX,OAAO;GACP,cAAc,EACZ,gBAAgB,KAClB;EACF;CACF;CAEA,UAAU,EACR,cAAc;EACZ,OAAO,EACL,MAAM,EACJ,iBAAiB,qBACnB,EACF;EACA,MAAM,EACJ,MAAM,EACJ,iBAAiB,uBACnB,EACF;CACF,EACF;CAEA,iBAAiB,EACf,cAAc,OAChB;AACF,CAAC"}
|