@bitrise/bitkit-v2 0.3.331 → 0.3.332
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 +1 -1
- package/dist/components/BitkitColorButton/BitkitColorButton.d.ts +23 -3
- package/dist/components/BitkitColorButton/BitkitColorButton.js +68 -1
- package/dist/components/BitkitColorButton/BitkitColorButton.js.map +1 -1
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js +2 -0
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js.map +1 -1
- package/dist/components/BitkitRibbon/BitkitRibbon.js +9 -7
- package/dist/components/BitkitRibbon/BitkitRibbon.js.map +1 -1
- package/dist/components/BitkitToast/BitkitToaster.js +12 -7
- package/dist/components/BitkitToast/BitkitToaster.js.map +1 -1
- package/dist/components/common/NotificationContent.js +13 -7
- package/dist/components/common/NotificationContent.js.map +1 -1
- package/dist/components/common/notificationMaps.d.ts +12 -0
- package/dist/components/common/notificationMaps.js.map +1 -1
- package/dist/theme/recipes/ColorButton.recipe.js +7 -1
- package/dist/theme/recipes/ColorButton.recipe.js.map +1 -1
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -97,7 +97,7 @@ Bitkit components use consistent prop names across the library:
|
|
|
97
97
|
<BitkitButton icon={IconCheck}>Save</BitkitButton>
|
|
98
98
|
<BitkitAccordion.ItemTrigger suffix={<Badge>3</Badge>}>Files</BitkitAccordion.ItemTrigger>
|
|
99
99
|
```
|
|
100
|
-
- **Buttons can render as links** — `BitkitButton`, `BitkitIconButton`, and `
|
|
100
|
+
- **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:
|
|
101
101
|
```tsx
|
|
102
102
|
<BitkitButton href="/internal">Internal link</BitkitButton>
|
|
103
103
|
<BitkitButton href="https://example.com" isExternal>External</BitkitButton>
|
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
type ColorButtonOmitted = 'as' | 'colorPalette' | 'size' | 'type';
|
|
3
|
+
interface BitkitColorButtonCommonProps extends RecipeProps<'colorButton'> {
|
|
4
|
+
/**
|
|
5
|
+
* Disabled or loading state of the control. Both are honoured in anchor mode too.
|
|
6
|
+
*
|
|
7
|
+
* Note that `'loading'` behaves differently here than on `BitkitButton`, which delegates to
|
|
8
|
+
* Chakra's `Button loading` and therefore also *disables* and dims the control. This one stays
|
|
9
|
+
* focusable and undimmed: the label keeps its width, a spinner is overlaid on top of it, and
|
|
10
|
+
* activation is blocked by a click guard — so a keyboard or screen reader user doesn't lose the
|
|
11
|
+
* element they were on the moment they press it.
|
|
12
|
+
*/
|
|
13
|
+
state?: 'disabled' | 'loading';
|
|
14
|
+
}
|
|
15
|
+
export interface BitkitColorButtonAsButtonProps extends BitkitColorButtonCommonProps, Omit<HTMLChakraProps<'button'>, ColorButtonOmitted | 'disabled'> {
|
|
16
|
+
href?: undefined;
|
|
17
|
+
isExternal?: undefined;
|
|
18
|
+
}
|
|
19
|
+
export interface BitkitColorButtonAsAnchorProps extends BitkitColorButtonCommonProps, Omit<HTMLChakraProps<'a'>, ColorButtonOmitted> {
|
|
20
|
+
href: string;
|
|
21
|
+
isExternal?: boolean;
|
|
22
|
+
}
|
|
23
|
+
export type BitkitColorButtonProps = BitkitColorButtonAsButtonProps | BitkitColorButtonAsAnchorProps;
|
|
24
|
+
declare const BitkitColorButton: import('react').ForwardRefExoticComponent<BitkitColorButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
5
25
|
export default BitkitColorButton;
|
|
@@ -1,8 +1,75 @@
|
|
|
1
1
|
import colorButtonRecipe from "../../theme/recipes/ColorButton.recipe.js";
|
|
2
2
|
import { createRecipeContext } from "@chakra-ui/react/styled-system";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { Text } from "@chakra-ui/react/text";
|
|
6
|
+
import { Spinner } from "@chakra-ui/react/spinner";
|
|
3
7
|
//#region lib/components/BitkitColorButton/BitkitColorButton.tsx
|
|
4
8
|
var { withContext } = createRecipeContext({ recipe: colorButtonRecipe });
|
|
5
|
-
var
|
|
9
|
+
var StyledButton = withContext("button");
|
|
10
|
+
var StyledAnchor = withContext("a");
|
|
11
|
+
var BitkitColorButton = forwardRef((props, ref) => {
|
|
12
|
+
const { children, size, state } = props;
|
|
13
|
+
const isDisabled = state === "disabled";
|
|
14
|
+
const isLoading = state === "loading";
|
|
15
|
+
const isInactive = isDisabled || isLoading;
|
|
16
|
+
const spinnerSize = size === "lg" ? "20" : "16";
|
|
17
|
+
const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [isLoading ? /* @__PURE__ */ jsx(Text, {
|
|
18
|
+
as: "span",
|
|
19
|
+
opacity: "0",
|
|
20
|
+
userSelect: "none",
|
|
21
|
+
children
|
|
22
|
+
}) : children, isLoading && /* @__PURE__ */ jsx(Spinner, {
|
|
23
|
+
position: "absolute",
|
|
24
|
+
insetBlock: "0",
|
|
25
|
+
insetInline: "0",
|
|
26
|
+
margin: "auto",
|
|
27
|
+
height: spinnerSize,
|
|
28
|
+
width: spinnerSize
|
|
29
|
+
})] });
|
|
30
|
+
if (props.href !== void 0) {
|
|
31
|
+
const { children: _children, href, isExternal, onClick, onKeyDown, rel, state: _state, target, ...anchorRest } = props;
|
|
32
|
+
const effectiveTarget = isExternal ? "_blank" : target;
|
|
33
|
+
const effectiveRel = isExternal ? rel ? `${rel} noreferrer noopener` : "noreferrer noopener" : rel;
|
|
34
|
+
const handleClick = isInactive ? (e) => {
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
e.stopPropagation();
|
|
37
|
+
} : onClick;
|
|
38
|
+
const handleKeyDown = isInactive ? (e) => {
|
|
39
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
40
|
+
e.preventDefault();
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
}
|
|
43
|
+
} : onKeyDown;
|
|
44
|
+
return /* @__PURE__ */ jsx(StyledAnchor, {
|
|
45
|
+
ref,
|
|
46
|
+
...anchorRest,
|
|
47
|
+
"aria-disabled": isDisabled || void 0,
|
|
48
|
+
"data-disabled": isDisabled || void 0,
|
|
49
|
+
"data-loading": isLoading || void 0,
|
|
50
|
+
href: isDisabled ? void 0 : href,
|
|
51
|
+
onClick: handleClick,
|
|
52
|
+
onKeyDown: handleKeyDown,
|
|
53
|
+
rel: effectiveRel,
|
|
54
|
+
target: effectiveTarget,
|
|
55
|
+
children: content
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
const { children: _children, onClick, state: _state, ...buttonRest } = props;
|
|
59
|
+
const handleClick = isInactive ? (e) => {
|
|
60
|
+
e.preventDefault();
|
|
61
|
+
e.stopPropagation();
|
|
62
|
+
} : onClick;
|
|
63
|
+
return /* @__PURE__ */ jsx(StyledButton, {
|
|
64
|
+
ref,
|
|
65
|
+
...buttonRest,
|
|
66
|
+
"data-loading": isLoading || void 0,
|
|
67
|
+
disabled: isDisabled,
|
|
68
|
+
onClick: handleClick,
|
|
69
|
+
type: "button",
|
|
70
|
+
children: content
|
|
71
|
+
});
|
|
72
|
+
});
|
|
6
73
|
BitkitColorButton.displayName = "BitkitColorButton";
|
|
7
74
|
//#endregion
|
|
8
75
|
export { BitkitColorButton as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitColorButton.js","names":[],"sources":["../../../lib/components/BitkitColorButton/BitkitColorButton.tsx"],"sourcesContent":["import { createRecipeContext, type HTMLChakraProps, type RecipeProps } from '@chakra-ui/react/styled-system';\n\nimport colorButtonRecipe from '../../theme/recipes/ColorButton.recipe';\n\
|
|
1
|
+
{"version":3,"file":"BitkitColorButton.js","names":[],"sources":["../../../lib/components/BitkitColorButton/BitkitColorButton.tsx"],"sourcesContent":["import { Spinner } from '@chakra-ui/react/spinner';\nimport { createRecipeContext, type HTMLChakraProps, type RecipeProps } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type Ref } from 'react';\n\nimport colorButtonRecipe from '../../theme/recipes/ColorButton.recipe';\n\ntype ColorButtonOmitted = 'as' | 'colorPalette' | 'size' | 'type';\n\ntype StyledButtonProps = Omit<HTMLChakraProps<'button'>, 'colorPalette' | 'size'> & RecipeProps<'colorButton'>;\ntype StyledAnchorProps = Omit<HTMLChakraProps<'a'>, 'colorPalette' | 'size'> & RecipeProps<'colorButton'>;\n\ninterface BitkitColorButtonCommonProps extends RecipeProps<'colorButton'> {\n /**\n * Disabled or loading state of the control. Both are honoured in anchor mode too.\n *\n * Note that `'loading'` behaves differently here than on `BitkitButton`, which delegates to\n * Chakra's `Button loading` and therefore also *disables* and dims the control. This one stays\n * focusable and undimmed: the label keeps its width, a spinner is overlaid on top of it, and\n * activation is blocked by a click guard — so a keyboard or screen reader user doesn't lose the\n * element they were on the moment they press it.\n */\n state?: 'disabled' | 'loading';\n}\n\nexport interface BitkitColorButtonAsButtonProps\n extends BitkitColorButtonCommonProps, Omit<HTMLChakraProps<'button'>, ColorButtonOmitted | 'disabled'> {\n href?: undefined;\n isExternal?: undefined;\n}\n\nexport interface BitkitColorButtonAsAnchorProps\n extends BitkitColorButtonCommonProps, Omit<HTMLChakraProps<'a'>, ColorButtonOmitted> {\n href: string;\n isExternal?: boolean;\n}\n\nexport type BitkitColorButtonProps = BitkitColorButtonAsButtonProps | BitkitColorButtonAsAnchorProps;\n\nconst { withContext } = createRecipeContext({ recipe: colorButtonRecipe });\n\nconst StyledButton = withContext<HTMLButtonElement, StyledButtonProps>('button');\n\nconst StyledAnchor = withContext<HTMLAnchorElement, StyledAnchorProps>('a');\n\nconst BitkitColorButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitColorButtonProps>((props, ref) => {\n const { children, size, state } = props;\n const isDisabled = state === 'disabled';\n const isLoading = state === 'loading';\n const isInactive = isDisabled || isLoading;\n const spinnerSize = size === 'lg' ? '20' : '16';\n\n const content = (\n <>\n {isLoading ? (\n // `opacity: 0` rather than `visibility: hidden`: both reserve the label's width so the\n // button doesn't collapse, but `visibility: hidden` also drops it from the accessibility\n // tree — leaving a focusable control with no accessible name.\n <Text as=\"span\" opacity=\"0\" userSelect=\"none\">\n {children}\n </Text>\n ) : (\n children\n )}\n {isLoading && (\n <Spinner\n position=\"absolute\"\n insetBlock=\"0\"\n insetInline=\"0\"\n margin=\"auto\"\n height={spinnerSize}\n width={spinnerSize}\n />\n )}\n </>\n );\n\n // --- Anchor mode (href) ---\n if (props.href !== undefined) {\n const {\n children: _children,\n href,\n isExternal,\n onClick,\n onKeyDown,\n rel,\n state: _state,\n target,\n ...anchorRest\n } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n const handleClick = isInactive\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n // What actually blocks keyboard activation in both states is `handleClick`: neither state\n // removes the anchor from the tab order (`loading` never sets `disabled`, and a disabled anchor\n // is only `aria-disabled`), and Enter/Space dispatch a click, which the guard above swallows.\n // The keydown guard is the extra layer an anchor needs, since it never gets the native\n // `disabled` treatment a button does.\n const handleKeyDown = isInactive\n ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n : onKeyDown;\n\n return (\n <StyledAnchor\n ref={ref as Ref<HTMLAnchorElement>}\n {...anchorRest}\n aria-disabled={isDisabled || undefined}\n data-disabled={isDisabled || undefined}\n // `data-loading` (not `aria-busy`) — it's the styling hook the recipe's `_loading` condition\n // reads, without claiming ARIA semantics that aren't announced anyway. Announcing the state\n // change to assistive tech needs a live region inside the component; that's its own change.\n data-loading={isLoading || undefined}\n // The `href` is kept while loading — so the link stays focusable and keeps its accessible\n // name, with activation still blocked by the guards above — and dropped only when disabled,\n // to take the anchor out of the tab order and make it fully inert.\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n rel={effectiveRel}\n target={effectiveTarget}\n >\n {content}\n </StyledAnchor>\n );\n }\n\n // --- Button mode (default) ---\n const { children: _children, onClick, state: _state, ...buttonRest } = props;\n const handleClick = isInactive\n ? (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n\n return (\n <StyledButton\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n data-loading={isLoading || undefined}\n disabled={isDisabled}\n onClick={handleClick}\n type=\"button\"\n >\n {content}\n </StyledButton>\n );\n});\n\nBitkitColorButton.displayName = 'BitkitColorButton';\n\nexport default BitkitColorButton;\n"],"mappings":";;;;;;;AAuCA,IAAM,EAAE,gBAAgB,oBAAoB,EAAE,QAAQ,kBAAkB,CAAC;AAEzE,IAAM,eAAe,YAAkD,QAAQ;AAE/E,IAAM,eAAe,YAAkD,GAAG;AAE1E,IAAM,oBAAoB,YAA2E,OAAO,QAAQ;CAClH,MAAM,EAAE,UAAU,MAAM,UAAU;CAClC,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU;CAC5B,MAAM,aAAa,cAAc;CACjC,MAAM,cAAc,SAAS,OAAO,OAAO;CAE3C,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACG,YAIC,oBAAC,MAAD;EAAM,IAAG;EAAO,SAAQ;EAAI,YAAW;EACpC;CACG,CAAA,IAEN,UAED,aACC,oBAAC,SAAD;EACE,UAAS;EACT,YAAW;EACX,aAAY;EACZ,QAAO;EACP,QAAQ;EACR,OAAO;CACR,CAAA,CAEH,EAAA,CAAA;CAIJ,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,UAAU,WACV,MACA,YACA,SACA,WACA,KACA,OAAO,QACP,QACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,cACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EAMJ,MAAM,gBAAgB,cACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EAEJ,OACE,oBAAC,cAAD;GACO;GACL,GAAI;GACJ,iBAAe,cAAc,KAAA;GAC7B,iBAAe,cAAc,KAAA;GAI7B,gBAAc,aAAa,KAAA;GAI3B,MAAM,aAAa,KAAA,IAAY;GAC/B,SAAS;GACT,WAAW;GACX,KAAK;GACL,QAAQ;GAEP,UAAA;EACW,CAAA;CAElB;CAGA,MAAM,EAAE,UAAU,WAAW,SAAS,OAAO,QAAQ,GAAG,eAAe;CACvE,MAAM,cAAc,cACf,MAAqC;EACpC,EAAE,eAAe;EACjB,EAAE,gBAAgB;CACpB,IACA;CAEJ,OACE,oBAAC,cAAD;EACO;EACL,GAAI;EACJ,gBAAc,aAAa,KAAA;EAC3B,UAAU;EACV,SAAS;EACT,MAAK;EAEJ,UAAA;CACW,CAAA;AAElB,CAAC;AAED,kBAAkB,cAAc"}
|
|
@@ -49,6 +49,7 @@ var BitkitNoteCard = forwardRef((props, ref) => {
|
|
|
49
49
|
onClick: action.onClick,
|
|
50
50
|
rel: action.target === "_blank" ? "noopener noreferrer" : void 0,
|
|
51
51
|
size: "md",
|
|
52
|
+
state: action.state === "loading" ? void 0 : action.state,
|
|
52
53
|
target: action.target,
|
|
53
54
|
variant: "tertiary",
|
|
54
55
|
children: action.label
|
|
@@ -56,6 +57,7 @@ var BitkitNoteCard = forwardRef((props, ref) => {
|
|
|
56
57
|
css: [styles.actionArea, hasList && styles.actionAreaList],
|
|
57
58
|
onClick: action.onClick,
|
|
58
59
|
size: "md",
|
|
60
|
+
state: action.state,
|
|
59
61
|
variant: "tertiary",
|
|
60
62
|
marginBlock: "4",
|
|
61
63
|
children: action.label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n message?: ReactNode;\n messageList?: string[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const { action, message, messageList, status = 'info', title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = messageList ?? [];\n const hasList = listItems.length > 0;\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <Box css={styles.iconBar}>\n <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n </Box>\n <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n {title && <Text css={styles.title}>{title}</Text>}\n {message && <Text css={styles.message}>{message}</Text>}\n {hasList && (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item) => (\n <BitkitList.Item key={item}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n )}\n </Box>\n {action &&\n (action.href !== undefined ? (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n href={action.href}\n onClick={action.onClick}\n rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n size=\"md\"\n target={action.target}\n variant=\"tertiary\"\n >\n {action.label}\n </BitkitButton>\n ) : (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n onClick={action.onClick}\n size=\"md\"\n variant=\"tertiary\"\n marginBlock=\"4\"\n >\n {action.label}\n </BitkitButton>\n ))}\n </Box>\n </Box>\n );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAG1E,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,YAAY,eAAe,CAAC;CAClC,MAAM,UAAU,UAAU,SAAS;CAEnC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;GAAhE,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;IAApE,UAAA;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAQ,UAAA;KAAY,CAAA;KAC/C,WAAW,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAU,UAAA;KAAc,CAAA;KACrD,WACC,oBAAC,oBAAD;MAAY,KAAK,OAAO;MAAa,MAAK;MACvC,UAAA,UAAU,KAAK,SACd,oBAAC,mBAAW,MAAZ,EAAA,UAA6B,KAAsB,GAA7B,IAA6B,CACpD;KACS,CAAA;IAEX;GACJ,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;IAC1D,MAAK;
|
|
1
|
+
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n message?: ReactNode;\n messageList?: string[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const { action, message, messageList, status = 'info', title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = messageList ?? [];\n const hasList = listItems.length > 0;\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <Box css={styles.iconBar}>\n <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n </Box>\n <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n {title && <Text css={styles.title}>{title}</Text>}\n {message && <Text css={styles.message}>{message}</Text>}\n {hasList && (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item) => (\n <BitkitList.Item key={item}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n )}\n </Box>\n {action &&\n (action.href !== undefined ? (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n href={action.href}\n onClick={action.onClick}\n rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n size=\"md\"\n // See the known gap documented on `NotificationAction.state`: BitkitButton's anchor\n // variant has no loading state, so only `disabled` carries over here.\n state={action.state === 'loading' ? undefined : action.state}\n target={action.target}\n variant=\"tertiary\"\n >\n {action.label}\n </BitkitButton>\n ) : (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n onClick={action.onClick}\n size=\"md\"\n state={action.state}\n variant=\"tertiary\"\n marginBlock=\"4\"\n >\n {action.label}\n </BitkitButton>\n ))}\n </Box>\n </Box>\n );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAG1E,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,YAAY,eAAe,CAAC;CAClC,MAAM,UAAU,UAAU,SAAS;CAEnC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;GAAhE,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;IAApE,UAAA;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAQ,UAAA;KAAY,CAAA;KAC/C,WAAW,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAU,UAAA;KAAc,CAAA;KACrD,WACC,oBAAC,oBAAD;MAAY,KAAK,OAAO;MAAa,MAAK;MACvC,UAAA,UAAU,KAAK,SACd,oBAAC,mBAAW,MAAZ,EAAA,UAA6B,KAAsB,GAA7B,IAA6B,CACpD;KACS,CAAA;IAEX;GACJ,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;IAC1D,MAAK;IAGL,OAAO,OAAO,UAAU,YAAY,KAAA,IAAY,OAAO;IACvD,QAAQ,OAAO;IACf,SAAQ;IAEP,UAAA,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,OAAO,OAAO;IACd,SAAQ;IACR,aAAY;IAEX,UAAA,OAAO;GACI,CAAA,EAEf;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -27,16 +27,18 @@ var BitkitRibbon = forwardRef((props, ref) => {
|
|
|
27
27
|
children: link.label
|
|
28
28
|
})
|
|
29
29
|
]
|
|
30
|
-
}), action && /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
31
|
-
as: action.href ? "a" : "button",
|
|
30
|
+
}), action && (action.href !== void 0 ? /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
32
31
|
colorVariant,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
target: action.target
|
|
36
|
-
},
|
|
32
|
+
href: action.href,
|
|
33
|
+
isExternal: action.target === "_blank",
|
|
37
34
|
onClick: action.onClick,
|
|
35
|
+
target: action.target,
|
|
38
36
|
children: action.label
|
|
39
|
-
})
|
|
37
|
+
}) : /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
38
|
+
colorVariant,
|
|
39
|
+
onClick: action.onClick,
|
|
40
|
+
children: action.label
|
|
41
|
+
}))]
|
|
40
42
|
}), onDismiss && /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
41
43
|
colorVariant,
|
|
42
44
|
flexShrink: "0",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.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 BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\n\nexport type RibbonActionProps = {\n href?: string;\n label: string;\n onClick?: () => void;\n target?: HTMLAnchorElement['target'];\n};\n\nexport type RibbonLinkProps = {\n href?: string;\n label: string;\n target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n action?: RibbonActionProps;\n colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n link?: RibbonLinkProps;\n onDismiss?: () => void;\n title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n const { action, children, colorVariant = 'blue', link, onDismiss, title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'ribbon' });\n const styles = recipe({ colorVariant });\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.content}>\n <chakra.div css={styles.textBlock}>\n {title && <chakra.strong>{title}</chakra.strong>}\n <chakra.span>{children}</chakra.span>\n {link && (\n <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n {link.label}\n </BitkitLink>\n )}\n </chakra.div>\n {action
|
|
1
|
+
{"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.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 BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\n\nexport type RibbonActionProps = {\n href?: string;\n label: string;\n onClick?: () => void;\n target?: HTMLAnchorElement['target'];\n};\n\nexport type RibbonLinkProps = {\n href?: string;\n label: string;\n target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n action?: RibbonActionProps;\n colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n link?: RibbonLinkProps;\n onDismiss?: () => void;\n title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n const { action, children, colorVariant = 'blue', link, onDismiss, title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'ribbon' });\n const styles = recipe({ colorVariant });\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.content}>\n <chakra.div css={styles.textBlock}>\n {title && <chakra.strong>{title}</chakra.strong>}\n <chakra.span>{children}</chakra.span>\n {link && (\n <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n {link.label}\n </BitkitLink>\n )}\n </chakra.div>\n {action &&\n (action.href !== undefined ? (\n <BitkitColorButton\n colorVariant={colorVariant}\n href={action.href}\n isExternal={action.target === '_blank'}\n onClick={action.onClick}\n target={action.target}\n >\n {action.label}\n </BitkitColorButton>\n ) : (\n <BitkitColorButton colorVariant={colorVariant} onClick={action.onClick}>\n {action.label}\n </BitkitColorButton>\n ))}\n </chakra.div>\n {onDismiss && <BitkitCloseButton colorVariant={colorVariant} flexShrink=\"0\" size=\"sm\" onClick={onDismiss} />}\n </Box>\n );\n});\n\nBitkitRibbon.displayName = 'BitkitRibbon';\n\nexport default BitkitRibbon;\n"],"mappings":";;;;;;;;AA6BA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EAAE,QAAQ,UAAU,eAAe,QAAQ,MAAM,WAAW,OAAO,GAAG,SAAS;CAGrF,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,aAAa,CAAC;CAEtC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA;KACG,SAAS,oBAAC,OAAO,QAAR,EAAA,UAAgB,MAAqB,CAAA;KAC/C,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;KACnC,QACC,oBAAC,YAAD;MAAY,MAAM,KAAK;MAAM,QAAQ,KAAK;MAAQ,gBAAe;MAC9D,UAAA,KAAK;KACI,CAAA;IAEJ;GACX,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,mBAAD;IACgB;IACd,MAAM,OAAO;IACb,YAAY,OAAO,WAAW;IAC9B,SAAS,OAAO;IAChB,QAAQ,OAAO;IAEd,UAAA,OAAO;GACS,CAAA,IAEnB,oBAAC,mBAAD;IAAiC;IAAc,SAAS,OAAO;IAC5D,UAAA,OAAO;GACS,CAAA,EAEb;EACX,CAAA,GAAA,aAAa,oBAAC,mBAAD;GAAiC;GAAc,YAAW;GAAI,MAAK;GAAK,SAAS;EAAY,CAAA,CACxG;;AAET,CAAC;AAED,aAAa,cAAc"}
|
|
@@ -25,17 +25,22 @@ var BitkitToaster = () => {
|
|
|
25
25
|
children: [
|
|
26
26
|
!!toast.title && /* @__PURE__ */ jsx(Toast.Title, { children: toast.title }),
|
|
27
27
|
/* @__PURE__ */ jsx(Toast.Description, { children: toast.description }),
|
|
28
|
-
!!toast.meta?.action && /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
29
|
-
as: toast.meta.action.href ? "a" : "button",
|
|
28
|
+
!!toast.meta?.action && (toast.meta.action.href !== void 0 ? /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
30
29
|
colorVariant: BUTTON_COLORS_MAP[variant],
|
|
31
30
|
css: styles.actionTrigger,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
target: toast.meta.action.target
|
|
35
|
-
},
|
|
31
|
+
href: toast.meta.action.href,
|
|
32
|
+
isExternal: toast.meta.action.target === "_blank",
|
|
36
33
|
onClick: toast.meta.action.onClick,
|
|
34
|
+
state: toast.meta.action.state,
|
|
35
|
+
target: toast.meta.action.target,
|
|
37
36
|
children: toast.meta.action.label
|
|
38
|
-
}),
|
|
37
|
+
}) : /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
38
|
+
colorVariant: BUTTON_COLORS_MAP[variant],
|
|
39
|
+
css: styles.actionTrigger,
|
|
40
|
+
onClick: toast.meta.action.onClick,
|
|
41
|
+
state: toast.meta.action.state,
|
|
42
|
+
children: toast.meta.action.label
|
|
43
|
+
})),
|
|
39
44
|
!!toast.meta?.timestamp && /* @__PURE__ */ jsx(Text, {
|
|
40
45
|
css: styles.timestamp,
|
|
41
46
|
children: toast.meta.timestamp
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitToaster.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToaster.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Toast, Toaster } from '@chakra-ui/react/toast';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from '../common/notificationMaps';\nimport { type BitkitToastVariant, toaster } from './BitkitToast';\n\nconst BitkitToaster = () => {\n const toastRecipe = useSlotRecipe({ key: 'toast' });\n\n return (\n <Toaster toaster={toaster}>\n {(toast) => {\n const variant = toast.type as BitkitToastVariant;\n const styles = toastRecipe({ variant });\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n return (\n <Toast.Root variant={variant}>\n <IconComponent css={styles.icon} />\n <Box css={styles.content}>\n {!!toast.title && <Toast.Title>{toast.title}</Toast.Title>}\n <Toast.Description>{toast.description}</Toast.Description>\n {!!toast.meta?.action
|
|
1
|
+
{"version":3,"file":"BitkitToaster.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToaster.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Toast, Toaster } from '@chakra-ui/react/toast';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from '../common/notificationMaps';\nimport { type BitkitToastVariant, toaster } from './BitkitToast';\n\nconst BitkitToaster = () => {\n const toastRecipe = useSlotRecipe({ key: 'toast' });\n\n return (\n <Toaster toaster={toaster}>\n {(toast) => {\n const variant = toast.type as BitkitToastVariant;\n const styles = toastRecipe({ variant });\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n return (\n <Toast.Root variant={variant}>\n <IconComponent css={styles.icon} />\n <Box css={styles.content}>\n {!!toast.title && <Toast.Title>{toast.title}</Toast.Title>}\n <Toast.Description>{toast.description}</Toast.Description>\n {!!toast.meta?.action &&\n (toast.meta.action.href !== undefined ? (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n href={toast.meta.action.href}\n isExternal={toast.meta.action.target === '_blank'}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n target={toast.meta.action.target}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ) : (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ))}\n {!!toast.meta?.timestamp && <Text css={styles.timestamp}>{toast.meta.timestamp}</Text>}\n </Box>\n {toast.closable && (\n <Toast.CloseTrigger asChild>\n <BitkitCloseButton colorVariant={BUTTON_COLORS_MAP[variant]} size=\"sm\" />\n </Toast.CloseTrigger>\n )}\n </Toast.Root>\n );\n }}\n </Toaster>\n );\n};\n\nexport default BitkitToaster;\n"],"mappings":";;;;;;;;;;AAUA,IAAM,sBAAsB;CAC1B,MAAM,cAAc,cAAc,EAAE,KAAK,QAAQ,CAAC;CAElD,OACE,oBAAC,SAAD;EAAkB;EACd,WAAA,UAAU;GACV,MAAM,UAAU,MAAM;GACtB,MAAM,SAAS,YAAY,EAAE,QAAQ,CAAC;GACtC,MAAM,gBAAgB,oBAAoB;GAC1C,OACE,qBAAC,MAAM,MAAP;IAAqB;IAArB,UAAA;KACE,oBAAC,eAAD,EAAe,KAAK,OAAO,KAAO,CAAA;KAClC,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA;OACG,CAAC,CAAC,MAAM,SAAS,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAM,MAAmB,CAAA;OACzD,oBAAC,MAAM,aAAP,EAAA,UAAoB,MAAM,YAA+B,CAAA;OACxD,CAAC,CAAC,MAAM,MAAM,WACZ,MAAM,KAAK,OAAO,SAAS,KAAA,IAC1B,oBAAC,mBAAD;QACE,cAAc,kBAAkB;QAChC,KAAK,OAAO;QACZ,MAAM,MAAM,KAAK,OAAO;QACxB,YAAY,MAAM,KAAK,OAAO,WAAW;QACzC,SAAS,MAAM,KAAK,OAAO;QAC3B,OAAO,MAAM,KAAK,OAAO;QACzB,QAAQ,MAAM,KAAK,OAAO;QAEzB,UAAA,MAAM,KAAK,OAAO;OACF,CAAA,IAEnB,oBAAC,mBAAD;QACE,cAAc,kBAAkB;QAChC,KAAK,OAAO;QACZ,SAAS,MAAM,KAAK,OAAO;QAC3B,OAAO,MAAM,KAAK,OAAO;QAExB,UAAA,MAAM,KAAK,OAAO;OACF,CAAA;OAEtB,CAAC,CAAC,MAAM,MAAM,aAAa,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA,MAAM,KAAK;OAAgB,CAAA;MAClF;;KACJ,MAAM,YACL,oBAAC,MAAM,cAAP;MAAoB,SAAA;MAClB,UAAA,oBAAC,mBAAD;OAAmB,cAAc,kBAAkB;OAAU,MAAK;MAAM,CAAA;KACtD,CAAA;IAEZ;;EAEhB;CACO,CAAA;AAEb"}
|
|
@@ -5,15 +5,21 @@ import { Box } from "@chakra-ui/react/box";
|
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { Alert } from "@chakra-ui/react/alert";
|
|
7
7
|
//#region lib/components/common/NotificationContent.tsx
|
|
8
|
-
var ActionButton = ({ action, colorVariant }) => /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
9
|
-
as: action.href ? "a" : "button",
|
|
8
|
+
var ActionButton = ({ action, colorVariant }) => action.href !== void 0 ? /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
10
9
|
colorVariant,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
target: action.target,
|
|
14
|
-
rel: action.target === "_blank" ? "noopener noreferrer" : void 0
|
|
15
|
-
},
|
|
10
|
+
href: action.href,
|
|
11
|
+
isExternal: action.target === "_blank",
|
|
16
12
|
onClick: action.onClick,
|
|
13
|
+
state: action.state,
|
|
14
|
+
target: action.target,
|
|
15
|
+
marginBlock: rem(-4),
|
|
16
|
+
marginInlineEnd: "12",
|
|
17
|
+
whiteSpace: "nowrap",
|
|
18
|
+
children: action.label
|
|
19
|
+
}) : /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
20
|
+
colorVariant,
|
|
21
|
+
onClick: action.onClick,
|
|
22
|
+
state: action.state,
|
|
17
23
|
marginBlock: rem(-4),
|
|
18
24
|
marginInlineEnd: "12",
|
|
19
25
|
whiteSpace: "nowrap",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationContent.js","names":[],"sources":["../../../lib/components/common/NotificationContent.tsx"],"sourcesContent":["/* Shared inner structure for notification-like components (Alert, PromoBanner):\n the content + action row and the trailing close button, plus the two buttons themselves.\n Alert.Root is the flex container, so this fragment's row and close button land as flex\n siblings next to the leading visual (indicator / illustration).\n The constants here are load-bearing and must not drift across the two components:\n `rem(11)` rowGap + the button `rem(-4)` bleed keep a single-line notification on 48px,\n and `flex: 1 1 rem(240)` on the content lets the action wrap below the text on narrow widths.\n\n `stackable` (opt-in, currently only PromoBanner) makes the elements this fragment owns\n responsive: below `tablet` the content/action row stacks vertically and the close button\n floats to the top-right corner. It positions the button absolutely, so the consuming\n component must give Alert.Root `position=\"relative\"`. Because the button floats over the\n top-right corner (32px at `inset 8` ⇒ a 40px band), the content row reserves a matching\n inline-end gutter below `tablet` so title/message text never runs under it — independent of\n how tall the leading visual is. The leading visual and the Root's own flex direction / gap /\n padding stay with the consumer — they differ per component. */\n\nimport { Alert } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton, { type BitkitCloseButtonProps } from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\nimport { type BUTTON_COLORS_MAP, type NotificationAction } from './notificationMaps';\n\ntype NotificationColorVariant = (typeof BUTTON_COLORS_MAP)[keyof typeof BUTTON_COLORS_MAP];\n\nconst ActionButton = ({\n action,\n colorVariant,\n}: {\n action: NotificationAction;\n colorVariant: BitkitColorButtonProps['colorVariant'];\n})
|
|
1
|
+
{"version":3,"file":"NotificationContent.js","names":[],"sources":["../../../lib/components/common/NotificationContent.tsx"],"sourcesContent":["/* Shared inner structure for notification-like components (Alert, PromoBanner):\n the content + action row and the trailing close button, plus the two buttons themselves.\n Alert.Root is the flex container, so this fragment's row and close button land as flex\n siblings next to the leading visual (indicator / illustration).\n The constants here are load-bearing and must not drift across the two components:\n `rem(11)` rowGap + the button `rem(-4)` bleed keep a single-line notification on 48px,\n and `flex: 1 1 rem(240)` on the content lets the action wrap below the text on narrow widths.\n\n `stackable` (opt-in, currently only PromoBanner) makes the elements this fragment owns\n responsive: below `tablet` the content/action row stacks vertically and the close button\n floats to the top-right corner. It positions the button absolutely, so the consuming\n component must give Alert.Root `position=\"relative\"`. Because the button floats over the\n top-right corner (32px at `inset 8` ⇒ a 40px band), the content row reserves a matching\n inline-end gutter below `tablet` so title/message text never runs under it — independent of\n how tall the leading visual is. The leading visual and the Root's own flex direction / gap /\n padding stay with the consumer — they differ per component. */\n\nimport { Alert } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton, { type BitkitCloseButtonProps } from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\nimport { type BUTTON_COLORS_MAP, type NotificationAction } from './notificationMaps';\n\ntype NotificationColorVariant = (typeof BUTTON_COLORS_MAP)[keyof typeof BUTTON_COLORS_MAP];\n\nconst ActionButton = ({\n action,\n colorVariant,\n}: {\n action: NotificationAction;\n colorVariant: BitkitColorButtonProps['colorVariant'];\n}) =>\n action.href !== undefined ? (\n <BitkitColorButton\n colorVariant={colorVariant}\n href={action.href}\n isExternal={action.target === '_blank'}\n onClick={action.onClick}\n state={action.state}\n target={action.target}\n marginBlock={rem(-4)}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n ) : (\n <BitkitColorButton\n colorVariant={colorVariant}\n onClick={action.onClick}\n state={action.state}\n marginBlock={rem(-4)}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n );\n\nconst CloseButton = ({\n colorVariant,\n onClose,\n stackable,\n}: {\n colorVariant: BitkitCloseButtonProps['colorVariant'];\n onClose?: () => void;\n stackable?: boolean;\n}) => (\n <BitkitCloseButton\n alignSelf=\"flex-start\"\n size=\"sm\"\n onClick={onClose}\n colorVariant={colorVariant}\n // Below tablet (stackable only) it floats to the top-right corner (needs Root\n // position=\"relative\"); otherwise inline with the -4 bleed that keeps a single line on 48px.\n position={stackable ? { base: 'absolute', tablet: 'static' } : undefined}\n insetBlockStart={stackable ? '8' : undefined}\n insetInlineEnd={stackable ? '8' : undefined}\n marginBlock={{ base: stackable ? '0' : rem(-4), tablet: rem(-4) }}\n />\n);\n\nexport interface NotificationContentProps {\n action?: NotificationAction;\n colorVariant: NotificationColorVariant;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n /** Opt in to responsive stacking below `tablet`. Requires Root `position=\"relative\"`. */\n stackable?: boolean;\n titleText?: ReactNode;\n}\n\nexport const NotificationContent = ({\n action,\n colorVariant,\n dismissible,\n messageText,\n onClose,\n stackable,\n titleText,\n}: NotificationContentProps) => (\n <>\n {/* content + action share a wrapping row so the action drops below the text on narrow widths;\n when stacking, the row switches to a column below tablet */}\n <Box\n display=\"flex\"\n flexDirection={stackable ? { base: 'column', tablet: 'row' } : undefined}\n flex={stackable ? { base: '0 1 0%', tablet: '1' } : '1'}\n minWidth=\"0\"\n flexWrap=\"wrap\"\n alignItems={stackable ? { base: 'flex-start', tablet: 'center' } : 'center'}\n columnGap=\"16\"\n rowGap={stackable ? { base: '20', tablet: rem(11) } : rem(11)}\n paddingInlineEnd={stackable && dismissible ? { base: '40', tablet: '0' } : undefined}\n >\n <Alert.Content minWidth=\"0\" flex={stackable ? { base: 'none', tablet: `1 1 ${rem(240)}` } : `1 1 ${rem(240)}`}>\n {titleText && <Alert.Title>{titleText}</Alert.Title>}\n <Alert.Description>{messageText}</Alert.Description>\n </Alert.Content>\n {!!action && <ActionButton action={action} colorVariant={colorVariant} />}\n </Box>\n {!!dismissible && <CloseButton colorVariant={colorVariant} onClose={onClose} stackable={stackable} />}\n </>\n);\n"],"mappings":";;;;;;;AA4BA,IAAM,gBAAgB,EACpB,QACA,mBAKA,OAAO,SAAS,KAAA,IACd,oBAAC,mBAAD;CACgB;CACd,MAAM,OAAO;CACb,YAAY,OAAO,WAAW;CAC9B,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,QAAQ,OAAO;CACf,aAAa,IAAI,EAAE;CACnB,iBAAgB;CAChB,YAAW;CAEV,UAAA,OAAO;AACS,CAAA,IAEnB,oBAAC,mBAAD;CACgB;CACd,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,aAAa,IAAI,EAAE;CACnB,iBAAgB;CAChB,YAAW;CAEV,UAAA,OAAO;AACS,CAAA;AAGvB,IAAM,eAAe,EACnB,cACA,SACA,gBAMA,oBAAC,mBAAD;CACE,WAAU;CACV,MAAK;CACL,SAAS;CACK;CAGd,UAAU,YAAY;EAAE,MAAM;EAAY,QAAQ;CAAS,IAAI,KAAA;CAC/D,iBAAiB,YAAY,MAAM,KAAA;CACnC,gBAAgB,YAAY,MAAM,KAAA;CAClC,aAAa;EAAE,MAAM,YAAY,MAAM,IAAI,EAAE;EAAG,QAAQ,IAAI,EAAE;CAAE;AACjE,CAAA;AAcH,IAAa,uBAAuB,EAClC,QACA,cACA,aACA,aACA,SACA,WACA,gBAEA,qBAAA,UAAA,EAAA,UAAA,CAGE,qBAAC,KAAD;CACE,SAAQ;CACR,eAAe,YAAY;EAAE,MAAM;EAAU,QAAQ;CAAM,IAAI,KAAA;CAC/D,MAAM,YAAY;EAAE,MAAM;EAAU,QAAQ;CAAI,IAAI;CACpD,UAAS;CACT,UAAS;CACT,YAAY,YAAY;EAAE,MAAM;EAAc,QAAQ;CAAS,IAAI;CACnE,WAAU;CACV,QAAQ,YAAY;EAAE,MAAM;EAAM,QAAQ,IAAI,EAAE;CAAE,IAAI,IAAI,EAAE;CAC5D,kBAAkB,aAAa,cAAc;EAAE,MAAM;EAAM,QAAQ;CAAI,IAAI,KAAA;CAT7E,UAAA,CAWE,qBAAC,MAAM,SAAP;EAAe,UAAS;EAAI,MAAM,YAAY;GAAE,MAAM;GAAQ,QAAQ,OAAO,IAAI,GAAG;EAAI,IAAI,OAAO,IAAI,GAAG;EAA1G,UAAA,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC;CACd,CAAA,GAAA,CAAC,CAAC,UAAU,oBAAC,cAAD;EAAsB;EAAsB;CAAe,CAAA,CACrE;AACJ,CAAA,GAAA,CAAC,CAAC,eAAe,oBAAC,aAAD;CAA2B;CAAuB;CAAoB;AAAY,CAAA,CACpG,EAAA,CAAA"}
|
|
@@ -4,6 +4,18 @@ export type NotificationAction = {
|
|
|
4
4
|
href?: string;
|
|
5
5
|
label: string;
|
|
6
6
|
onClick?: () => void;
|
|
7
|
+
/**
|
|
8
|
+
* Disabled or loading state of the action button.
|
|
9
|
+
*
|
|
10
|
+
* Known gap: not every consumer can honour the full range. Alert, Toast and PromoBanner actions
|
|
11
|
+
* render via `BitkitColorButton` and support both. `BitkitNoteCard`'s **link** actions (`href`
|
|
12
|
+
* set) render via `BitkitButton`, whose anchor variant excludes `loading` at the type level — so
|
|
13
|
+
* `'loading'` degrades to no state there. That's an implementation limit of `BitkitButton`'s
|
|
14
|
+
* anchor branch, not a rule about links: loading anchors work fine on `BitkitColorButton` (`href`
|
|
15
|
+
* kept, pointer events off, activation guarded). Closing it means teaching `BitkitButton` the
|
|
16
|
+
* same trick — its own change.
|
|
17
|
+
*/
|
|
18
|
+
state?: 'disabled' | 'loading';
|
|
7
19
|
target?: HTMLAnchorElement['target'];
|
|
8
20
|
};
|
|
9
21
|
export declare const BUTTON_COLORS_MAP: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notificationMaps.js","names":[],"sources":["../../../lib/components/common/notificationMaps.tsx"],"sourcesContent":["/* Shared component-level maps for notification-like components (Alert, Toast). */\n\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type ElementType } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport IconSparkleFilled from '../../icons/IconSparkleFilled';\nimport IconWarning from '../../icons/IconWarning';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\n\nexport type NotificationAction = {\n href?: string;\n label: string;\n onClick?: () => void;\n target?: HTMLAnchorElement['target'];\n};\n\nexport const BUTTON_COLORS_MAP = {\n ai: 'indigo',\n critical: 'red',\n info: 'blue',\n progress: 'purple',\n success: 'green',\n warning: 'yellow',\n} as const satisfies Record<NotificationVariant, string>;\n\nexport const ICON_COMPONENTS_MAP: Record<NotificationVariant, ElementType> = {\n ai: IconSparkleFilled,\n critical: IconErrorCircleFilled,\n info: IconInfoCircle,\n progress: Spinner,\n success: IconCheck,\n warning: IconWarning,\n};\n"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"notificationMaps.js","names":[],"sources":["../../../lib/components/common/notificationMaps.tsx"],"sourcesContent":["/* Shared component-level maps for notification-like components (Alert, Toast). */\n\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type ElementType } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport IconSparkleFilled from '../../icons/IconSparkleFilled';\nimport IconWarning from '../../icons/IconWarning';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\n\nexport type NotificationAction = {\n href?: string;\n label: string;\n onClick?: () => void;\n /**\n * Disabled or loading state of the action button.\n *\n * Known gap: not every consumer can honour the full range. Alert, Toast and PromoBanner actions\n * render via `BitkitColorButton` and support both. `BitkitNoteCard`'s **link** actions (`href`\n * set) render via `BitkitButton`, whose anchor variant excludes `loading` at the type level — so\n * `'loading'` degrades to no state there. That's an implementation limit of `BitkitButton`'s\n * anchor branch, not a rule about links: loading anchors work fine on `BitkitColorButton` (`href`\n * kept, pointer events off, activation guarded). Closing it means teaching `BitkitButton` the\n * same trick — its own change.\n */\n state?: 'disabled' | 'loading';\n target?: HTMLAnchorElement['target'];\n};\n\nexport const BUTTON_COLORS_MAP = {\n ai: 'indigo',\n critical: 'red',\n info: 'blue',\n progress: 'purple',\n success: 'green',\n warning: 'yellow',\n} as const satisfies Record<NotificationVariant, string>;\n\nexport const ICON_COMPONENTS_MAP: Record<NotificationVariant, ElementType> = {\n ai: IconSparkleFilled,\n critical: IconErrorCircleFilled,\n info: IconInfoCircle,\n progress: Spinner,\n success: IconCheck,\n warning: IconWarning,\n};\n"],"mappings":";;;;;;;AA+BA,IAAa,oBAAoB;CAC/B,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAa,sBAAgE;CAC3E,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX"}
|
|
@@ -3,12 +3,18 @@ import { defineRecipe } from "@chakra-ui/react/styled-system";
|
|
|
3
3
|
var colorButtonRecipe = defineRecipe({
|
|
4
4
|
className: "color-button",
|
|
5
5
|
base: {
|
|
6
|
+
position: "relative",
|
|
6
7
|
display: "inline-flex",
|
|
7
8
|
alignItems: "center",
|
|
8
9
|
justifyContent: "center",
|
|
9
10
|
border: "1px solid",
|
|
10
11
|
borderRadius: "4",
|
|
11
|
-
cursor: "pointer"
|
|
12
|
+
cursor: "pointer",
|
|
13
|
+
_disabled: {
|
|
14
|
+
opacity: .4,
|
|
15
|
+
pointerEvents: "none"
|
|
16
|
+
},
|
|
17
|
+
_loading: { pointerEvents: "none" }
|
|
12
18
|
},
|
|
13
19
|
variants: {
|
|
14
20
|
size: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ColorButton.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst colorButtonRecipe = defineRecipe({\n className: 'color-button',\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n border: '1px solid',\n borderRadius: '4',\n cursor: 'pointer',\n },\n variants: {\n size: {\n sm: { height: '32', paddingInline: '12', textStyle: 'comp/button/sm' },\n md: { height: '40', paddingInline: '12', textStyle: 'comp/button/md' },\n lg: { height: '48', paddingInline: '16', textStyle: 'comp/button/lg' },\n },\n colorVariant: {\n neutral: {\n color: 'color/neutral/strong',\n '&:hover': { backgroundColor: 'color/neutral/subtle' },\n '&:active': { backgroundColor: 'color/neutral/moderate' },\n },\n blue: {\n color: 'color/blue/strong',\n '&:hover': { backgroundColor: 'color/blue/subtle' },\n '&:active': { backgroundColor: 'color/blue/moderate' },\n },\n green: {\n color: 'color/green/strong',\n '&:hover': { backgroundColor: 'color/green/subtle' },\n '&:active': { backgroundColor: 'color/green/moderate' },\n },\n red: {\n color: 'color/red/strong',\n '&:hover': { backgroundColor: 'color/red/subtle' },\n '&:active': { backgroundColor: 'color/red/moderate' },\n },\n yellow: {\n color: 'color/yellow/strong',\n '&:hover': { backgroundColor: 'color/yellow/subtle' },\n '&:active': { backgroundColor: 'color/yellow/moderate' },\n },\n purple: {\n color: 'color/purple/strong',\n '&:hover': { backgroundColor: 'color/purple/subtle' },\n '&:active': { backgroundColor: 'color/purple/moderate' },\n },\n orange: {\n color: 'color/orange/strong',\n '&:hover': { backgroundColor: 'color/orange/subtle' },\n '&:active': { backgroundColor: 'color/orange/moderate' },\n },\n turquoise: {\n color: 'color/turquoise/strong',\n '&:hover': { backgroundColor: 'color/turquoise/subtle' },\n '&:active': { backgroundColor: 'color/turquoise/moderate' },\n },\n indigo: {\n color: 'color/indigo/strong',\n '&:hover': { backgroundColor: 'color/indigo/subtle' },\n '&:active': { backgroundColor: 'color/indigo/moderate' },\n },\n white: {\n color: 'text/on-color',\n borderColor: 'border/inverse',\n '&:hover': { backgroundColor: 'color/white/15' },\n '&:active': { backgroundColor: 'color/white/30' },\n },\n },\n },\n defaultVariants: {\n colorVariant: 'neutral',\n size: 'sm',\n },\n});\n\nexport default colorButtonRecipe;\n"],"mappings":";;AAEA,IAAM,oBAAoB,aAAa;CACrC,WAAW;CACX,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACR,cAAc;EACd,QAAQ;
|
|
1
|
+
{"version":3,"file":"ColorButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ColorButton.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst colorButtonRecipe = defineRecipe({\n className: 'color-button',\n base: {\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n border: '1px solid',\n borderRadius: '4',\n cursor: 'pointer',\n _disabled: {\n opacity: 0.4,\n pointerEvents: 'none',\n },\n // Loading keeps the control focusable and undimmed — only pointer activation is blocked.\n _loading: {\n pointerEvents: 'none',\n },\n },\n variants: {\n size: {\n sm: { height: '32', paddingInline: '12', textStyle: 'comp/button/sm' },\n md: { height: '40', paddingInline: '12', textStyle: 'comp/button/md' },\n lg: { height: '48', paddingInline: '16', textStyle: 'comp/button/lg' },\n },\n colorVariant: {\n neutral: {\n color: 'color/neutral/strong',\n '&:hover': { backgroundColor: 'color/neutral/subtle' },\n '&:active': { backgroundColor: 'color/neutral/moderate' },\n },\n blue: {\n color: 'color/blue/strong',\n '&:hover': { backgroundColor: 'color/blue/subtle' },\n '&:active': { backgroundColor: 'color/blue/moderate' },\n },\n green: {\n color: 'color/green/strong',\n '&:hover': { backgroundColor: 'color/green/subtle' },\n '&:active': { backgroundColor: 'color/green/moderate' },\n },\n red: {\n color: 'color/red/strong',\n '&:hover': { backgroundColor: 'color/red/subtle' },\n '&:active': { backgroundColor: 'color/red/moderate' },\n },\n yellow: {\n color: 'color/yellow/strong',\n '&:hover': { backgroundColor: 'color/yellow/subtle' },\n '&:active': { backgroundColor: 'color/yellow/moderate' },\n },\n purple: {\n color: 'color/purple/strong',\n '&:hover': { backgroundColor: 'color/purple/subtle' },\n '&:active': { backgroundColor: 'color/purple/moderate' },\n },\n orange: {\n color: 'color/orange/strong',\n '&:hover': { backgroundColor: 'color/orange/subtle' },\n '&:active': { backgroundColor: 'color/orange/moderate' },\n },\n turquoise: {\n color: 'color/turquoise/strong',\n '&:hover': { backgroundColor: 'color/turquoise/subtle' },\n '&:active': { backgroundColor: 'color/turquoise/moderate' },\n },\n indigo: {\n color: 'color/indigo/strong',\n '&:hover': { backgroundColor: 'color/indigo/subtle' },\n '&:active': { backgroundColor: 'color/indigo/moderate' },\n },\n white: {\n color: 'text/on-color',\n borderColor: 'border/inverse',\n '&:hover': { backgroundColor: 'color/white/15' },\n '&:active': { backgroundColor: 'color/white/30' },\n },\n },\n },\n defaultVariants: {\n colorVariant: 'neutral',\n size: 'sm',\n },\n});\n\nexport default colorButtonRecipe;\n"],"mappings":";;AAEA,IAAM,oBAAoB,aAAa;CACrC,WAAW;CACX,MAAM;EACJ,UAAU;EACV,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACR,cAAc;EACd,QAAQ;EACR,WAAW;GACT,SAAS;GACT,eAAe;EACjB;EAEA,UAAU,EACR,eAAe,OACjB;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAE,QAAQ;IAAM,eAAe;IAAM,WAAW;GAAiB;GACrE,IAAI;IAAE,QAAQ;IAAM,eAAe;IAAM,WAAW;GAAiB;GACrE,IAAI;IAAE,QAAQ;IAAM,eAAe;IAAM,WAAW;GAAiB;EACvE;EACA,cAAc;GACZ,SAAS;IACP,OAAO;IACP,WAAW,EAAE,iBAAiB,uBAAuB;IACrD,YAAY,EAAE,iBAAiB,yBAAyB;GAC1D;GACA,MAAM;IACJ,OAAO;IACP,WAAW,EAAE,iBAAiB,oBAAoB;IAClD,YAAY,EAAE,iBAAiB,sBAAsB;GACvD;GACA,OAAO;IACL,OAAO;IACP,WAAW,EAAE,iBAAiB,qBAAqB;IACnD,YAAY,EAAE,iBAAiB,uBAAuB;GACxD;GACA,KAAK;IACH,OAAO;IACP,WAAW,EAAE,iBAAiB,mBAAmB;IACjD,YAAY,EAAE,iBAAiB,qBAAqB;GACtD;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,WAAW;IACT,OAAO;IACP,WAAW,EAAE,iBAAiB,yBAAyB;IACvD,YAAY,EAAE,iBAAiB,2BAA2B;GAC5D;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,OAAO;IACL,OAAO;IACP,aAAa;IACb,WAAW,EAAE,iBAAiB,iBAAiB;IAC/C,YAAY,EAAE,iBAAiB,iBAAiB;GAClD;EACF;CACF;CACA,iBAAiB;EACf,cAAc;EACd,MAAM;CACR;AACF,CAAC"}
|