@bitrise/bitkit-v2 0.3.407 → 0.3.409-beta.2640

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/AGENTS.md CHANGED
@@ -99,7 +99,7 @@ Bitkit components use consistent prop names across the library:
99
99
  - **Slot props for content, not boolean flags** — pass an icon/badge/etc. directly as a prop. Element presence is the toggle:
100
100
  ```tsx
101
101
  <BitkitButton icon={IconCheck}>Save</BitkitButton>
102
- <BitkitAccordion.ItemTrigger suffix={<Badge>3</Badge>}>Files</BitkitAccordion.ItemTrigger>
102
+ <BitkitAccordion.ItemTrigger suffixBadge={<BitkitBadge>3</BitkitBadge>}>Files</BitkitAccordion.ItemTrigger>
103
103
  ```
104
104
  - **Buttons can render as links** — `BitkitButton`, `BitkitIconButton`, `BitkitControlButton`, and `BitkitColorButton` render an `<a>` when `href` is passed. Don't pass `as="a"` — they pick the element from `href` themselves. The button-recipe styles apply to the anchor. Pass `isExternal` to auto-add `target="_blank" rel="noreferrer noopener"`. For routing libraries (Next.js, React Router), use `asChild` with your own anchor element:
105
105
  ```tsx
@@ -1,13 +1,26 @@
1
1
  import { Accordion, AccordionItemBodyProps, AccordionItemProps, AccordionItemTriggerProps, AccordionRootProps } from '@chakra-ui/react/accordion';
2
- import { ReactNode } from 'react';
2
+ import { ReactElement, ReactNode } from 'react';
3
3
  import { BitkitIconComponent } from '../../icons';
4
+ import { BitkitBadgeProps } from '../BitkitBadge/BitkitBadge';
4
5
  export type BitkitAccordionProps = AccordionRootProps;
5
6
  export type BitkitAccordionItemProps = AccordionItemProps;
6
- export interface BitkitAccordionItemTriggerProps extends AccordionItemTriggerProps {
7
+ /** The suffix slot holds one thing: trailing text, or a badge. */
8
+ type SuffixProps = {
9
+ /** Trailing text in the suffix slot. */
10
+ suffix?: ReactNode;
11
+ suffixBadge?: never;
12
+ } | {
13
+ suffix?: never;
14
+ /**
15
+ * A `BitkitBadge` in the suffix slot. On a disabled item it is forced to
16
+ * `colorVariant="neutral"`, so a coloured badge doesn't stay loud next to greyed-out text.
17
+ */
18
+ suffixBadge?: ReactElement<BitkitBadgeProps>;
19
+ };
20
+ export type BitkitAccordionItemTriggerProps = AccordionItemTriggerProps & {
7
21
  icon?: BitkitIconComponent;
8
22
  secondaryText?: ReactNode;
9
- suffix?: ReactNode;
10
- }
23
+ } & SuffixProps;
11
24
  export type BitkitAccordionItemBodyProps = AccordionItemBodyProps;
12
25
  declare const _default: import('react').ForwardRefExoticComponent<Accordion.RootProps & import('react').RefAttributes<HTMLDivElement>> & {
13
26
  Item: import('react').ForwardRefExoticComponent<Accordion.ItemProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -3,7 +3,7 @@ import { withSubComponents } from "../../utilities/withSubComponents.js";
3
3
  import { Accordion, useAccordionItemContext } from "@chakra-ui/react/accordion";
4
4
  import { Box } from "@chakra-ui/react/box";
5
5
  import { useSlotRecipe } from "@chakra-ui/react/styled-system";
6
- import { forwardRef } from "react";
6
+ import { cloneElement, forwardRef } from "react";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
8
8
  //#region lib/components/BitkitAccordion/BitkitAccordion.tsx
9
9
  var BitkitAccordion = forwardRef((props, ref) => {
@@ -19,8 +19,9 @@ var Item = forwardRef((props, ref) => {
19
19
  ...props
20
20
  });
21
21
  });
22
- var ItemTrigger = forwardRef(({ children, icon: Icon, secondaryText, suffix, ...props }, ref) => {
22
+ var ItemTrigger = forwardRef(({ children, icon: Icon, secondaryText, suffix, suffixBadge, ...props }, ref) => {
23
23
  const styles = useSlotRecipe({ key: "accordion" })();
24
+ const { disabled } = useAccordionItemContext();
24
25
  return /* @__PURE__ */ jsxs(Accordion.ItemTrigger, {
25
26
  ref,
26
27
  ...props,
@@ -31,7 +32,7 @@ var ItemTrigger = forwardRef(({ children, icon: Icon, secondaryText, suffix, ...
31
32
  children: [Icon && /* @__PURE__ */ jsx(Box, {
32
33
  css: styles.icon,
33
34
  asChild: true,
34
- children: /* @__PURE__ */ jsx(Icon, { size: "16" })
35
+ children: /* @__PURE__ */ jsx(Icon, {})
35
36
  }), /* @__PURE__ */ jsxs(Box, {
36
37
  display: "flex",
37
38
  alignItems: "flex-start",
@@ -45,14 +46,22 @@ var ItemTrigger = forwardRef(({ children, icon: Icon, secondaryText, suffix, ...
45
46
  }), /* @__PURE__ */ jsxs(Box, {
46
47
  display: "flex",
47
48
  alignItems: "center",
48
- children: [suffix && /* @__PURE__ */ jsx(Box, {
49
- as: "span",
50
- css: styles.suffix,
51
- children: suffix
52
- }), /* @__PURE__ */ jsx(Accordion.ItemIndicator, {
53
- asChild: true,
54
- children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
55
- })]
49
+ children: [
50
+ suffix && /* @__PURE__ */ jsx(Box, {
51
+ as: "span",
52
+ css: styles.suffix,
53
+ children: suffix
54
+ }),
55
+ suffixBadge && /* @__PURE__ */ jsx(Box, {
56
+ as: "span",
57
+ css: styles.suffixBadge,
58
+ children: disabled ? cloneElement(suffixBadge, { colorVariant: "neutral" }) : suffixBadge
59
+ }),
60
+ /* @__PURE__ */ jsx(Accordion.ItemIndicator, {
61
+ asChild: true,
62
+ children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
63
+ })
64
+ ]
56
65
  })]
57
66
  });
58
67
  });
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitAccordion.js","names":[],"sources":["../../../lib/components/BitkitAccordion/BitkitAccordion.tsx"],"sourcesContent":["import {\n Accordion,\n type AccordionItemBodyProps,\n type AccordionItemProps,\n type AccordionItemTriggerProps,\n type AccordionRootProps,\n useAccordionItemContext,\n} from '@chakra-ui/react/accordion';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\nexport type BitkitAccordionProps = AccordionRootProps;\nexport type BitkitAccordionItemProps = AccordionItemProps;\nexport interface BitkitAccordionItemTriggerProps extends AccordionItemTriggerProps {\n icon?: BitkitIconComponent;\n secondaryText?: ReactNode;\n suffix?: ReactNode;\n}\nexport type BitkitAccordionItemBodyProps = AccordionItemBodyProps;\n\nconst BitkitAccordion = forwardRef<HTMLDivElement, BitkitAccordionProps>((props, ref) => {\n return <Accordion.Root ref={ref} multiple {...props} />;\n});\nconst Item = forwardRef<HTMLDivElement, BitkitAccordionItemProps>((props, ref) => {\n return <Accordion.Item ref={ref} {...props}></Accordion.Item>;\n});\nconst ItemTrigger = forwardRef<HTMLButtonElement, BitkitAccordionItemTriggerProps>(\n ({ children, icon: Icon, secondaryText, suffix, ...props }, ref) => {\n const recipe = useSlotRecipe({ key: 'accordion' });\n const styles = recipe();\n return (\n <Accordion.ItemTrigger ref={ref} {...props}>\n <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n {Icon && (\n <Box css={styles.icon} asChild>\n <Icon size=\"16\" />\n </Box>\n )}\n <Box display=\"flex\" alignItems=\"flex-start\" flexDirection=\"column\">\n {children}\n {secondaryText && (\n <Box as=\"span\" css={styles.secdText}>\n {secondaryText}\n </Box>\n )}\n </Box>\n </Box>\n <Box display=\"flex\" alignItems=\"center\">\n {suffix && (\n <Box as=\"span\" css={styles.suffix}>\n {suffix}\n </Box>\n )}\n <Accordion.ItemIndicator asChild>\n <AssetSelectChevron />\n </Accordion.ItemIndicator>\n </Box>\n </Accordion.ItemTrigger>\n );\n },\n);\nconst ItemBody = forwardRef<HTMLDivElement, BitkitAccordionItemBodyProps>(({ ...props }, ref) => {\n const itemProps = useAccordionItemContext();\n return (\n <Accordion.ItemContent>\n <Accordion.ItemBody ref={ref} aria-disabled={itemProps.disabled} {...props} />\n </Accordion.ItemContent>\n );\n});\n\nBitkitAccordion.displayName = 'BitkitAccordion';\nItemBody.displayName = 'BitkitAccordion.ItemBody';\nItem.displayName = 'BitkitAccordion.Item';\nItemTrigger.displayName = 'BitkitAccordion.ItemTrigger';\n\nexport default withSubComponents(BitkitAccordion, { Item, ItemBody, ItemTrigger });\n"],"mappings":";;;;;;;;AAyBA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,OAAO,oBAAC,UAAU,MAAX;EAAqB;EAAK,UAAA;EAAS,GAAI;CAAQ,CAAA;AACxD,CAAC;AACD,IAAM,OAAO,YAAsD,OAAO,QAAQ;CAChF,OAAO,oBAAC,UAAU,MAAX;EAAqB;EAAK,GAAI;CAAuB,CAAA;AAC9D,CAAC;AACD,IAAM,cAAc,YACjB,EAAE,UAAU,MAAM,MAAM,eAAe,QAAQ,GAAG,SAAS,QAAQ;CAElE,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO;CACtB,OACE,qBAAC,UAAU,aAAX;EAA4B;EAAK,GAAI;EAArC,UAAA,CACE,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;GAA5C,UAAA,CACG,QACC,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAM,SAAA;IACrB,UAAA,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GACd,CAAA,GAEP,qBAAC,KAAD;IAAK,SAAQ;IAAO,YAAW;IAAa,eAAc;IAA1D,UAAA,CACG,UACA,iBACC,oBAAC,KAAD;KAAK,IAAG;KAAO,KAAK,OAAO;KACxB,UAAA;IACE,CAAA,CAEJ;GACF,CAAA,CAAA;EACL,CAAA,GAAA,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAA/B,UAAA,CACG,UACC,oBAAC,KAAD;IAAK,IAAG;IAAO,KAAK,OAAO;IACxB,UAAA;GACE,CAAA,GAEP,oBAAC,UAAU,eAAX;IAAyB,SAAA;IACvB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;GACE,CAAA,CACtB;EACgB,CAAA,CAAA;;AAE3B,CACF;AACA,IAAM,WAAW,YAA0D,EAAE,GAAG,SAAS,QAAQ;CAC/F,MAAM,YAAY,wBAAwB;CAC1C,OACE,oBAAC,UAAU,aAAX,EAAA,UACE,oBAAC,UAAU,UAAX;EAAyB;EAAK,iBAAe,UAAU;EAAU,GAAI;CAAQ,CAAA,EACxD,CAAA;AAE3B,CAAC;AAED,gBAAgB,cAAc;AAC9B,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,YAAY,cAAc;AAE1B,IAAA,0BAAe,kBAAkB,iBAAiB;CAAE;CAAM;CAAU;AAAY,CAAC"}
1
+ {"version":3,"file":"BitkitAccordion.js","names":[],"sources":["../../../lib/components/BitkitAccordion/BitkitAccordion.tsx"],"sourcesContent":["import {\n Accordion,\n type AccordionItemBodyProps,\n type AccordionItemProps,\n type AccordionItemTriggerProps,\n type AccordionRootProps,\n useAccordionItemContext,\n} from '@chakra-ui/react/accordion';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitBadgeProps } from '../BitkitBadge/BitkitBadge';\n\nexport type BitkitAccordionProps = AccordionRootProps;\nexport type BitkitAccordionItemProps = AccordionItemProps;\n/** The suffix slot holds one thing: trailing text, or a badge. */\ntype SuffixProps =\n | {\n /** Trailing text in the suffix slot. */\n suffix?: ReactNode;\n suffixBadge?: never;\n }\n | {\n suffix?: never;\n /**\n * A `BitkitBadge` in the suffix slot. On a disabled item it is forced to\n * `colorVariant=\"neutral\"`, so a coloured badge doesn't stay loud next to greyed-out text.\n */\n suffixBadge?: ReactElement<BitkitBadgeProps>;\n };\n\nexport type BitkitAccordionItemTriggerProps = AccordionItemTriggerProps & {\n icon?: BitkitIconComponent;\n secondaryText?: ReactNode;\n} & SuffixProps;\nexport type BitkitAccordionItemBodyProps = AccordionItemBodyProps;\n\nconst BitkitAccordion = forwardRef<HTMLDivElement, BitkitAccordionProps>((props, ref) => {\n return <Accordion.Root ref={ref} multiple {...props} />;\n});\nconst Item = forwardRef<HTMLDivElement, BitkitAccordionItemProps>((props, ref) => {\n return <Accordion.Item ref={ref} {...props}></Accordion.Item>;\n});\nconst ItemTrigger = forwardRef<HTMLButtonElement, BitkitAccordionItemTriggerProps>(\n ({ children, icon: Icon, secondaryText, suffix, suffixBadge, ...props }, ref) => {\n const recipe = useSlotRecipe({ key: 'accordion' });\n const styles = recipe();\n const { disabled } = useAccordionItemContext();\n return (\n <Accordion.ItemTrigger ref={ref} {...props}>\n <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n {Icon && (\n <Box css={styles.icon} asChild>\n <Icon />\n </Box>\n )}\n <Box display=\"flex\" alignItems=\"flex-start\" flexDirection=\"column\">\n {children}\n {secondaryText && (\n <Box as=\"span\" css={styles.secdText}>\n {secondaryText}\n </Box>\n )}\n </Box>\n </Box>\n <Box display=\"flex\" alignItems=\"center\">\n {suffix && (\n <Box as=\"span\" css={styles.suffix}>\n {suffix}\n </Box>\n )}\n {suffixBadge && (\n <Box as=\"span\" css={styles.suffixBadge}>\n {disabled ? cloneElement(suffixBadge, { colorVariant: 'neutral' }) : suffixBadge}\n </Box>\n )}\n <Accordion.ItemIndicator asChild>\n <AssetSelectChevron />\n </Accordion.ItemIndicator>\n </Box>\n </Accordion.ItemTrigger>\n );\n },\n);\nconst ItemBody = forwardRef<HTMLDivElement, BitkitAccordionItemBodyProps>(({ ...props }, ref) => {\n const itemProps = useAccordionItemContext();\n return (\n <Accordion.ItemContent>\n <Accordion.ItemBody ref={ref} aria-disabled={itemProps.disabled} {...props} />\n </Accordion.ItemContent>\n );\n});\n\nBitkitAccordion.displayName = 'BitkitAccordion';\nItemBody.displayName = 'BitkitAccordion.ItemBody';\nItem.displayName = 'BitkitAccordion.Item';\nItemTrigger.displayName = 'BitkitAccordion.ItemTrigger';\n\nexport default withSubComponents(BitkitAccordion, { Item, ItemBody, ItemTrigger });\n"],"mappings":";;;;;;;;AAyCA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,OAAO,oBAAC,UAAU,MAAX;EAAqB;EAAK,UAAA;EAAS,GAAI;CAAQ,CAAA;AACxD,CAAC;AACD,IAAM,OAAO,YAAsD,OAAO,QAAQ;CAChF,OAAO,oBAAC,UAAU,MAAX;EAAqB;EAAK,GAAI;CAAuB,CAAA;AAC9D,CAAC;AACD,IAAM,cAAc,YACjB,EAAE,UAAU,MAAM,MAAM,eAAe,QAAQ,aAAa,GAAG,SAAS,QAAQ;CAE/E,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO;CACtB,MAAM,EAAE,aAAa,wBAAwB;CAC7C,OACE,qBAAC,UAAU,aAAX;EAA4B;EAAK,GAAI;EAArC,UAAA,CACE,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;GAA5C,UAAA,CACG,QACC,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAM,SAAA;IACrB,UAAA,oBAAC,MAAD,CAAO,CAAA;GACJ,CAAA,GAEP,qBAAC,KAAD;IAAK,SAAQ;IAAO,YAAW;IAAa,eAAc;IAA1D,UAAA,CACG,UACA,iBACC,oBAAC,KAAD;KAAK,IAAG;KAAO,KAAK,OAAO;KACxB,UAAA;IACE,CAAA,CAEJ;GACF,CAAA,CAAA;EACL,CAAA,GAAA,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAA/B,UAAA;IACG,UACC,oBAAC,KAAD;KAAK,IAAG;KAAO,KAAK,OAAO;KACxB,UAAA;IACE,CAAA;IAEN,eACC,oBAAC,KAAD;KAAK,IAAG;KAAO,KAAK,OAAO;KACxB,UAAA,WAAW,aAAa,aAAa,EAAE,cAAc,UAAU,CAAC,IAAI;IAClE,CAAA;IAEP,oBAAC,UAAU,eAAX;KAAyB,SAAA;KACvB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;IACE,CAAA;GACtB;EACgB,CAAA,CAAA;;AAE3B,CACF;AACA,IAAM,WAAW,YAA0D,EAAE,GAAG,SAAS,QAAQ;CAC/F,MAAM,YAAY,wBAAwB;CAC1C,OACE,oBAAC,UAAU,aAAX,EAAA,UACE,oBAAC,UAAU,UAAX;EAAyB;EAAK,iBAAe,UAAU;EAAU,GAAI;CAAQ,CAAA,EACxD,CAAA;AAE3B,CAAC;AAED,gBAAgB,cAAc;AAC9B,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,YAAY,cAAc;AAE1B,IAAA,0BAAe,kBAAkB,iBAAiB;CAAE;CAAM;CAAU;AAAY,CAAC"}
@@ -50,10 +50,19 @@ 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
+ const content = /* @__PURE__ */ jsxs(Box, {
54
+ flex: "1",
55
+ minWidth: "0",
56
+ children: [children, helperText && /* @__PURE__ */ jsx(Text, {
57
+ color: "text/secondary",
58
+ textStyle: "body/md/regular",
59
+ children: helperText
60
+ })]
61
+ });
53
62
  if (variant === "unstyled") return /* @__PURE__ */ jsx(List.Item, {
54
63
  ref,
55
64
  color: textColor === "secondary" ? "text/secondary" : "text/body",
56
- children
65
+ children: content
57
66
  });
58
67
  if (variant === "inline") return /* @__PURE__ */ jsx(List.Item, {
59
68
  ref,
@@ -64,19 +73,8 @@ var BitkitListItem = forwardRef((props, ref) => {
64
73
  color: "text/tertiary",
65
74
  marginInline: "8"
66
75
  } },
67
- children
76
+ children: content
68
77
  });
69
- const content = helperText ? /* @__PURE__ */ jsxs(Box, {
70
- display: "flex",
71
- flex: "1",
72
- flexDirection: "column",
73
- minWidth: "0",
74
- children: [children, /* @__PURE__ */ jsx(Text, {
75
- color: "text/secondary",
76
- textStyle: "body/md/regular",
77
- children: helperText
78
- })]
79
- }) : children;
80
78
  if (variant === "ordered") return /* @__PURE__ */ jsxs(List.Item, {
81
79
  ref,
82
80
  counterIncrement: "bitkit-list",
@@ -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' | '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\ninterface BaseProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n textColor?: BitkitListTextColor;\n}\n\n// `sm` is only drawn for the inline run; the block variants start at `md`, so the size set is\n// narrowed per variant rather than shared.\ninterface InlineProps extends BaseProps {\n size?: BitkitListSize;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n size?: 'lg' | 'md';\n variant?: 'explainer' | 'ordered' | 'unordered' | 'unstyled';\n}\n\nexport type BitkitListProps = BlockProps | InlineProps;\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 // The 20px circle keeps the marker's 24px vertical slot through a block-end margin\n // alone: centering it in that slot would put it half a line below the first line of\n // text, whose line box is 20px.\n marginBlockEnd={helperText ? undefined : '4'}\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\ninterface BaseProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n textColor?: BitkitListTextColor;\n}\n\n// `sm` is only drawn for the inline run; the block variants start at `md`, so the size set is\n// narrowed per variant rather than shared.\ninterface InlineProps extends BaseProps {\n size?: BitkitListSize;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n size?: 'lg' | 'md';\n variant?: 'explainer' | 'ordered' | 'unordered' | 'unstyled';\n}\n\nexport type BitkitListProps = BlockProps | InlineProps;\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 const content = (\n <Box flex=\"1\" minWidth=\"0\">\n {children}\n {helperText && (\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n {helperText}\n </Text>\n )}\n </Box>\n );\n\n if (variant === 'unstyled') {\n return (\n <List.Item ref={ref} color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}>\n {content}\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 {content}\n </List.Item>\n );\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 // The 20px circle keeps the marker's 24px vertical slot through a block-end margin\n // alone: centering it in that slot would put it half a line below the first line of\n // text, whose line box is 20px.\n marginBlockEnd={helperText ? undefined : '4'}\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,2 +1,2 @@
1
- declare const SAMPLE_MARKDOWN = "Body text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n# Heading level 1\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n## Heading level 2\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n### Heading level 3\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n#### Heading level 4\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n##### Heading level 5\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n###### Heading level 6\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n---\n\n- List item A\n- List item B\n- List item C\n\n1. List item A\n2. List item B\n3. List item C\n\n```\nconst greet = (name: string): string => {\n return `Hello, ${name}!`;\n};\n```\n\nHere is some `inline code` in a sentence.\n\n> Block quote\n\nHere is a [link example](https://bitrise.io) for demonstration purposes.\n";
1
+ declare const SAMPLE_MARKDOWN = "Body text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n# Heading level 1\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n## Heading level 2\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n### Heading level 3\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n#### Heading level 4\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n##### Heading level 5\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n###### Heading level 6\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n---\n\n- List item A\n- List item B\n- List item C\n\n1. List item A, with `inline code` and a [link](https://bitrise.io) mid-sentence\n2. List item B\n3. List item C\n\n```\nconst greet = (name: string): string => {\n return `Hello, ${name}!`;\n};\n```\n\nHere is some `inline code` in a sentence.\n\n> Block quote\n\nHere is a [link example](https://bitrise.io) for demonstration purposes.\n";
2
2
  export default SAMPLE_MARKDOWN;
@@ -1,2 +1,2 @@
1
- declare const accordionSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "suffix" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText", import('@chakra-ui/react').SlotRecipeVariantRecord<"icon" | "suffix" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText">>;
1
+ declare const accordionSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText" | "suffix" | "suffixBadge", import('@chakra-ui/react').SlotRecipeVariantRecord<"icon" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText" | "suffix" | "suffixBadge">>;
2
2
  export default accordionSlotRecipe;
@@ -7,23 +7,30 @@ var accordionSlotRecipe = defineSlotRecipe({
7
7
  ...accordionAnatomy.keys(),
8
8
  "icon",
9
9
  "secdText",
10
- "suffix"
10
+ "suffix",
11
+ "suffixBadge"
11
12
  ],
12
13
  base: {
13
14
  item: {
14
15
  borderTop: "1px solid",
15
16
  borderTopColor: "border/regular"
16
17
  },
17
- icon: { color: "icon/secondary" },
18
+ icon: {
19
+ color: "icon/secondary",
20
+ "[data-part=\"item-trigger\"]:disabled &": { color: "icon/disabled" }
21
+ },
18
22
  secdText: {
19
23
  color: "text/secondary",
20
- textStyle: "body/lg/regular"
24
+ textStyle: "body/lg/regular",
25
+ "[data-part=\"item-trigger\"]:disabled &": { color: "text/disabled" }
21
26
  },
22
27
  suffix: {
23
28
  color: "text/secondary",
24
- mx: "16",
25
- textStyle: "body/md/regular"
29
+ marginInline: "16",
30
+ textStyle: "body/md/regular",
31
+ "[data-part=\"item-trigger\"]:disabled &": { color: "text/disabled" }
26
32
  },
33
+ suffixBadge: { marginInline: "16" },
27
34
  itemContent: {
28
35
  _open: {
29
36
  animationName: "expand-height, fade-in",
@@ -33,6 +40,7 @@ var accordionSlotRecipe = defineSlotRecipe({
33
40
  animationName: "collapse-height, fade-out",
34
41
  animationDuration: "moderate"
35
42
  },
43
+ _motionReduce: { animationName: "none" },
36
44
  overflow: "hidden"
37
45
  },
38
46
  itemBody: {
@@ -54,10 +62,17 @@ var accordionSlotRecipe = defineSlotRecipe({
54
62
  flexDirection: "row",
55
63
  padding: "16",
56
64
  gap: "16",
65
+ cursor: "pointer",
57
66
  _open: { textStyle: "body/lg/semibold" },
67
+ _hover: {
68
+ background: "background/hover",
69
+ _active: { background: "background/active" }
70
+ },
58
71
  _active: { background: "background/active" },
59
- _hover: { background: "background/hover" },
60
- _disabled: { color: "text/disabled" }
72
+ _disabled: {
73
+ color: "text/disabled",
74
+ cursor: "not-allowed"
75
+ }
61
76
  },
62
77
  root: {
63
78
  borderBottom: "1px solid",
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Accordion.recipe.ts"],"sourcesContent":["import { accordionAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst accordionSlotRecipe = defineSlotRecipe({\n className: 'accordion',\n slots: [...accordionAnatomy.keys(), 'icon', 'secdText', 'suffix'],\n base: {\n item: {\n borderTop: '1px solid',\n borderTopColor: 'border/regular',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\n color: 'text/secondary',\n textStyle: 'body/lg/regular',\n },\n suffix: {\n color: 'text/secondary',\n mx: '16',\n textStyle: 'body/md/regular',\n },\n itemContent: {\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n overflow: 'hidden',\n },\n itemBody: {\n paddingX: '16',\n paddingTop: '8',\n paddingBottom: '24',\n _disabled: {\n color: 'text/disabled',\n },\n },\n itemIndicator: {\n display: 'flex',\n color: 'icon/secondary',\n _disabled: {\n color: 'icon/disabled',\n },\n },\n itemTrigger: {\n textAlign: 'start',\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n flexDirection: 'row',\n padding: '16',\n gap: '16',\n _open: {\n textStyle: 'body/lg/semibold',\n },\n _active: {\n background: 'background/active',\n },\n _hover: {\n background: 'background/hover',\n },\n _disabled: {\n color: 'text/disabled',\n },\n },\n root: {\n borderBottom: '1px solid',\n borderBottomColor: 'border/regular',\n },\n },\n});\n\nexport default accordionSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,sBAAsB,iBAAiB;CAC3C,WAAW;CACX,OAAO;EAAC,GAAG,iBAAiB,KAAK;EAAG;EAAQ;EAAY;CAAQ;CAChE,MAAM;EACJ,MAAM;GACJ,WAAW;GACX,gBAAgB;EAClB;EACA,MAAM,EACJ,OAAO,iBACT;EACA,UAAU;GACR,OAAO;GACP,WAAW;EACb;EACA,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;EACb;EACA,aAAa;GACX,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;GACA,UAAU;EACZ;EACA,UAAU;GACR,UAAU;GACV,YAAY;GACZ,eAAe;GACf,WAAW,EACT,OAAO,gBACT;EACF;EACA,eAAe;GACb,SAAS;GACT,OAAO;GACP,WAAW,EACT,OAAO,gBACT;EACF;EACA,aAAa;GACX,WAAW;GACX,SAAS;GACT,gBAAgB;GAChB,OAAO;GACP,eAAe;GACf,SAAS;GACT,KAAK;GACL,OAAO,EACL,WAAW,mBACb;GACA,SAAS,EACP,YAAY,oBACd;GACA,QAAQ,EACN,YAAY,mBACd;GACA,WAAW,EACT,OAAO,gBACT;EACF;EACA,MAAM;GACJ,cAAc;GACd,mBAAmB;EACrB;CACF;AACF,CAAC"}
1
+ {"version":3,"file":"Accordion.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Accordion.recipe.ts"],"sourcesContent":["import { accordionAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst accordionSlotRecipe = defineSlotRecipe({\n className: 'accordion',\n slots: [...accordionAnatomy.keys(), 'icon', 'secdText', 'suffix', 'suffixBadge'],\n base: {\n item: {\n borderTop: '1px solid',\n borderTopColor: 'border/regular',\n },\n // Zag marks its own parts with data-disabled, but these three are our slots inside the\n // trigger, so nothing lands on them and _disabled would match nothing. They read the state off\n // the ancestor instead — the trigger is a native disabled <button>.\n icon: {\n color: 'icon/secondary',\n '[data-part=\"item-trigger\"]:disabled &': { color: 'icon/disabled' },\n },\n secdText: {\n color: 'text/secondary',\n textStyle: 'body/lg/regular',\n '[data-part=\"item-trigger\"]:disabled &': { color: 'text/disabled' },\n },\n suffix: {\n color: 'text/secondary',\n marginInline: '16',\n textStyle: 'body/md/regular',\n '[data-part=\"item-trigger\"]:disabled &': { color: 'text/disabled' },\n },\n // Spacing only — the badge brings its own colours.\n suffixBadge: {\n marginInline: '16',\n },\n itemContent: {\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n _motionReduce: {\n animationName: 'none',\n },\n overflow: 'hidden',\n },\n itemBody: {\n paddingX: '16',\n paddingTop: '8',\n paddingBottom: '24',\n _disabled: {\n color: 'text/disabled',\n },\n },\n itemIndicator: {\n display: 'flex',\n color: 'icon/secondary',\n _disabled: {\n color: 'icon/disabled',\n },\n },\n itemTrigger: {\n textAlign: 'start',\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n flexDirection: 'row',\n padding: '16',\n gap: '16',\n cursor: 'pointer',\n _open: {\n textStyle: 'body/lg/semibold',\n },\n // The pressed background also has to be nested inside _hover. `_hover` compiles to a\n // `@media (hover: hover)` block, which Chakra emits after the plain-selector rules, so a\n // top-level `_active` of equal specificity always loses to it — and a pointer press is a\n // hover too, which made the pressed state unreachable with a mouse.\n _hover: {\n background: 'background/hover',\n _active: {\n background: 'background/active',\n },\n },\n _active: {\n background: 'background/active',\n },\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n },\n },\n root: {\n borderBottom: '1px solid',\n borderBottomColor: 'border/regular',\n },\n },\n});\n\nexport default accordionSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,sBAAsB,iBAAiB;CAC3C,WAAW;CACX,OAAO;EAAC,GAAG,iBAAiB,KAAK;EAAG;EAAQ;EAAY;EAAU;CAAa;CAC/E,MAAM;EACJ,MAAM;GACJ,WAAW;GACX,gBAAgB;EAClB;EAIA,MAAM;GACJ,OAAO;GACP,2CAAyC,EAAE,OAAO,gBAAgB;EACpE;EACA,UAAU;GACR,OAAO;GACP,WAAW;GACX,2CAAyC,EAAE,OAAO,gBAAgB;EACpE;EACA,QAAQ;GACN,OAAO;GACP,cAAc;GACd,WAAW;GACX,2CAAyC,EAAE,OAAO,gBAAgB;EACpE;EAEA,aAAa,EACX,cAAc,KAChB;EACA,aAAa;GACX,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;GACA,eAAe,EACb,eAAe,OACjB;GACA,UAAU;EACZ;EACA,UAAU;GACR,UAAU;GACV,YAAY;GACZ,eAAe;GACf,WAAW,EACT,OAAO,gBACT;EACF;EACA,eAAe;GACb,SAAS;GACT,OAAO;GACP,WAAW,EACT,OAAO,gBACT;EACF;EACA,aAAa;GACX,WAAW;GACX,SAAS;GACT,gBAAgB;GAChB,OAAO;GACP,eAAe;GACf,SAAS;GACT,KAAK;GACL,QAAQ;GACR,OAAO,EACL,WAAW,mBACb;GAKA,QAAQ;IACN,YAAY;IACZ,SAAS,EACP,YAAY,oBACd;GACF;GACA,SAAS,EACP,YAAY,oBACd;GACA,WAAW;IACT,OAAO;IACP,QAAQ;GACV;EACF;EACA,MAAM;GACJ,cAAc;GACd,mBAAmB;EACrB;CACF;AACF,CAAC"}
@@ -1,4 +1,4 @@
1
- declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
1
+ declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "collapsible" | "root" | "suffix" | "description" | "subtitle", {
2
2
  size: {
3
3
  md: {
4
4
  header: {
@@ -1,4 +1,4 @@
1
- declare const labeledDataSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "value" | "root" | "limit" | "helpText", {
1
+ declare const labeledDataSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "value" | "limit" | "helpText", {
2
2
  size: {
3
3
  lg: {
4
4
  label: {
@@ -1,4 +1,4 @@
1
- declare const statSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "value" | "root" | "helpText", {
1
+ declare const statSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "value" | "helpText", {
2
2
  size: {
3
3
  lg: {
4
4
  label: {
@@ -1,4 +1,4 @@
1
- declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "secondaryText" | "root" | "item" | "itemIndicator" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
1
+ declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
2
2
  variant: {
3
3
  files: {
4
4
  branchControl: {
@@ -1,5 +1,5 @@
1
1
  declare const slotRecipes: {
2
- accordion: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "suffix" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText", import('@chakra-ui/react').SlotRecipeVariantRecord<"icon" | "suffix" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText">>;
2
+ accordion: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText" | "suffix" | "suffixBadge", import('@chakra-ui/react').SlotRecipeVariantRecord<"icon" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText" | "suffix" | "suffixBadge">>;
3
3
  actionBar: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "positioner" | "selectionTrigger" | "closeTrigger", {
4
4
  size: {
5
5
  md: {
@@ -941,7 +941,7 @@ declare const slotRecipes: {
941
941
  };
942
942
  };
943
943
  }>;
944
- expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
944
+ expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "collapsible" | "root" | "suffix" | "description" | "subtitle", {
945
945
  size: {
946
946
  md: {
947
947
  header: {
@@ -1695,7 +1695,7 @@ declare const slotRecipes: {
1695
1695
  };
1696
1696
  }>;
1697
1697
  sectionHeading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "icon" | "root" | "titleBlock" | "helperText" | "contentBlock" | "helperBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "icon" | "root" | "titleBlock" | "helperText" | "contentBlock" | "helperBlock">>;
1698
- labeledData: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "value" | "root" | "limit" | "helpText", {
1698
+ labeledData: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "value" | "limit" | "helpText", {
1699
1699
  size: {
1700
1700
  lg: {
1701
1701
  label: {
@@ -1978,7 +1978,7 @@ declare const slotRecipes: {
1978
1978
  };
1979
1979
  };
1980
1980
  }>;
1981
- stat: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "value" | "root" | "helpText", {
1981
+ stat: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "value" | "helpText", {
1982
1982
  size: {
1983
1983
  lg: {
1984
1984
  label: {
@@ -2764,7 +2764,7 @@ declare const slotRecipes: {
2764
2764
  };
2765
2765
  }>;
2766
2766
  tour: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow">>;
2767
- treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "secondaryText" | "root" | "item" | "itemIndicator" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
2767
+ treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
2768
2768
  variant: {
2769
2769
  files: {
2770
2770
  branchControl: {
@@ -6,6 +6,7 @@ var AssetSelectChevron = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, {
6
6
  asChild: true,
7
7
  ref,
8
8
  transition: "0.2s ease",
9
+ _motionReduce: { transition: "none" },
9
10
  _open: { transform: "rotate(180deg)" },
10
11
  _disabled: {
11
12
  cursor: "not-allowed",
@@ -1 +1 @@
1
- {"version":3,"file":"AssetSelectChevron.js","names":[],"sources":["../../lib/utilities/AssetSelectChevron.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { forwardRef, type Ref } from 'react';\n\nconst AssetSelectChevron = forwardRef((props: IconProps, ref: Ref<SVGSVGElement>) => (\n <Icon\n asChild\n ref={ref}\n transition=\"0.2s ease\"\n _open={{\n transform: 'rotate(180deg)',\n }}\n _disabled={{\n cursor: 'not-allowed',\n color: 'icon/disabled',\n }}\n color=\"icon/secondary\"\n _groupFocusWithin={{\n color: 'icon/primary',\n }}\n _groupHover={{\n color: 'icon/primary',\n }}\n {...props}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6.29285 10.2071L7.70706 8.79289L12 13.0858L16.2928 8.79289L17.7071 10.2071L12 15.9142L6.29285 10.2071Z\"\n fill=\"currentColor\"\n />\n </svg>\n </Icon>\n));\n\nAssetSelectChevron.displayName = 'AssetSelectChevron';\n\nexport default AssetSelectChevron;\n"],"mappings":";;;;AAGA,IAAM,qBAAqB,YAAY,OAAkB,QACvD,oBAAC,MAAD;CACE,SAAA;CACK;CACL,YAAW;CACX,OAAO,EACL,WAAW,iBACb;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,OAAM;CACN,mBAAmB,EACjB,OAAO,eACT;CACA,aAAa,EACX,OAAO,eACT;CACA,GAAI;CAEJ,UAAA,oBAAC,OAAD;EAAK,OAAM;EAA6B,SAAQ;EAAY,OAAM;EAAK,QAAO;EAC5E,UAAA,oBAAC,QAAD;GACE,UAAS;GACT,UAAS;GACT,GAAE;GACF,MAAK;EACN,CAAA;CACE,CAAA;AACD,CAAA,CACP;AAED,mBAAmB,cAAc"}
1
+ {"version":3,"file":"AssetSelectChevron.js","names":[],"sources":["../../lib/utilities/AssetSelectChevron.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { forwardRef, type Ref } from 'react';\n\nconst AssetSelectChevron = forwardRef((props: IconProps, ref: Ref<SVGSVGElement>) => (\n <Icon\n asChild\n ref={ref}\n transition=\"0.2s ease\"\n // The rotation is the whole animation here, so reduced motion means snapping to it.\n _motionReduce={{\n transition: 'none',\n }}\n _open={{\n transform: 'rotate(180deg)',\n }}\n _disabled={{\n cursor: 'not-allowed',\n color: 'icon/disabled',\n }}\n color=\"icon/secondary\"\n _groupFocusWithin={{\n color: 'icon/primary',\n }}\n _groupHover={{\n color: 'icon/primary',\n }}\n {...props}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6.29285 10.2071L7.70706 8.79289L12 13.0858L16.2928 8.79289L17.7071 10.2071L12 15.9142L6.29285 10.2071Z\"\n fill=\"currentColor\"\n />\n </svg>\n </Icon>\n));\n\nAssetSelectChevron.displayName = 'AssetSelectChevron';\n\nexport default AssetSelectChevron;\n"],"mappings":";;;;AAGA,IAAM,qBAAqB,YAAY,OAAkB,QACvD,oBAAC,MAAD;CACE,SAAA;CACK;CACL,YAAW;CAEX,eAAe,EACb,YAAY,OACd;CACA,OAAO,EACL,WAAW,iBACb;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,OAAM;CACN,mBAAmB,EACjB,OAAO,eACT;CACA,aAAa,EACX,OAAO,eACT;CACA,GAAI;CAEJ,UAAA,oBAAC,OAAD;EAAK,OAAM;EAA6B,SAAQ;EAAY,OAAM;EAAK,QAAO;EAC5E,UAAA,oBAAC,QAAD;GACE,UAAS;GACT,UAAS;GACT,GAAE;GACF,MAAK;EACN,CAAA;CACE,CAAA;AACD,CAAA,CACP;AAED,mBAAmB,cAAc"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.407",
4
+ "version": "0.3.409-beta.2640",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",