@bitrise/bitkit-v2 0.3.352 → 0.3.354
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitCheckbox/BitkitCheckbox.js +2 -1
- package/dist/components/BitkitCheckbox/BitkitCheckbox.js.map +1 -1
- package/dist/components/BitkitCloseButton/BitkitCloseButton.d.ts +5 -0
- package/dist/components/BitkitCloseButton/BitkitCloseButton.js +2 -2
- package/dist/components/BitkitCloseButton/BitkitCloseButton.js.map +1 -1
- package/dist/components/BitkitRadio/BitkitRadio.js +2 -1
- package/dist/components/BitkitRadio/BitkitRadio.js.map +1 -1
- package/dist/components/BitkitToast/BitkitToaster.js +6 -2
- package/dist/components/BitkitToast/BitkitToaster.js.map +1 -1
- package/dist/theme/slot-recipes/Checkbox.recipe.js +6 -6
- package/dist/theme/slot-recipes/Checkbox.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/RadioGroup.recipe.js +4 -4
- package/dist/theme/slot-recipes/RadioGroup.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Toast.recipe.js +3 -3
- package/dist/theme/slot-recipes/Toast.recipe.js.map +1 -1
- package/dist/theme/tokens/index.d.ts +3 -0
- package/dist/theme/tokens/zIndex.d.ts +3 -0
- package/dist/theme/tokens/zIndex.js +1 -0
- package/dist/theme/tokens/zIndex.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,7 +12,8 @@ var BitkitCheckbox = forwardRef((props, ref) => {
|
|
|
12
12
|
const hasHelperText = !isEmptyNode(helperText);
|
|
13
13
|
const hasLabel = !isEmptyNode(labelText) || hasHelperText;
|
|
14
14
|
return /* @__PURE__ */ jsxs(Checkbox.Root, {
|
|
15
|
-
|
|
15
|
+
cursor: state === "skeleton" ? "default" : void 0,
|
|
16
|
+
disabled: state === "disabled" || state === "skeleton",
|
|
16
17
|
readOnly: state === "readOnly",
|
|
17
18
|
...rest,
|
|
18
19
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCheckbox.js","names":[],"sources":["../../../lib/components/BitkitCheckbox/BitkitCheckbox.tsx"],"sourcesContent":["import { Checkbox } from '@chakra-ui/react/checkbox';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type DataAttr } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport { IconCheck, IconMinus } from '../../icons';\n\ntype BitkitCheckboxBaseProps = {\n /** Props forwarded to the underlying `<input>` (e.g. `data-testid`). */\n inputProps?: InputHTMLAttributes<HTMLInputElement> & DataAttr;\n state?: 'disabled' | 'readOnly' | 'skeleton';\n} & Omit<Checkbox.RootProps, 'disabled' | 'readOnly'>;\n\n/**\n * A checkbox has to end up with an accessible name, and it takes that name from its label. So either\n * pass a visible `labelText`, or — for a checkbox in a layout with no room for one, like a table\n * select-all header — an `aria-label`, which is applied to the hidden input instead of being\n * rendered.\n */\nexport type BitkitCheckboxProps = BitkitCheckboxBaseProps &\n (\n | {\n helperText?: ReactNode;\n labelText: NonNullable<ReactNode>;\n }\n | { 'aria-label': string; helperText?: never; labelText?: null }\n );\n\nconst isEmptyNode = (node: ReactNode) => node == null || node === '' || typeof node === 'boolean';\n\nconst BitkitCheckbox = forwardRef<HTMLInputElement, BitkitCheckboxProps>((props, ref) => {\n const { 'aria-label': ariaLabel, helperText, inputProps, labelText, state, ...rest } = props;\n const hasHelperText = !isEmptyNode(helperText);\n const hasLabel = !isEmptyNode(labelText) || hasHelperText;\n\n return (\n <Checkbox.Root disabled={state === 'disabled'}
|
|
1
|
+
{"version":3,"file":"BitkitCheckbox.js","names":[],"sources":["../../../lib/components/BitkitCheckbox/BitkitCheckbox.tsx"],"sourcesContent":["import { Checkbox } from '@chakra-ui/react/checkbox';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type DataAttr } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport { IconCheck, IconMinus } from '../../icons';\n\ntype BitkitCheckboxBaseProps = {\n /** Props forwarded to the underlying `<input>` (e.g. `data-testid`). */\n inputProps?: InputHTMLAttributes<HTMLInputElement> & DataAttr;\n state?: 'disabled' | 'readOnly' | 'skeleton';\n} & Omit<Checkbox.RootProps, 'disabled' | 'readOnly'>;\n\n/**\n * A checkbox has to end up with an accessible name, and it takes that name from its label. So either\n * pass a visible `labelText`, or — for a checkbox in a layout with no room for one, like a table\n * select-all header — an `aria-label`, which is applied to the hidden input instead of being\n * rendered.\n */\nexport type BitkitCheckboxProps = BitkitCheckboxBaseProps &\n (\n | {\n helperText?: ReactNode;\n labelText: NonNullable<ReactNode>;\n }\n | { 'aria-label': string; helperText?: never; labelText?: null }\n );\n\nconst isEmptyNode = (node: ReactNode) => node == null || node === '' || typeof node === 'boolean';\n\nconst BitkitCheckbox = forwardRef<HTMLInputElement, BitkitCheckboxProps>((props, ref) => {\n const { 'aria-label': ariaLabel, helperText, inputProps, labelText, state, ...rest } = props;\n const hasHelperText = !isEmptyNode(helperText);\n const hasLabel = !isEmptyNode(labelText) || hasHelperText;\n\n // Skeleton has to set disabled to be inert: the Skeleton wrapper's own pointer-events: none never\n // stopped a click, it only moved the target to the <label>, which activates the control. The cursor\n // style prop then keeps the arrow plain — style props land outside @layer recipes, where the\n // recipe's _disabled: { cursor: 'not-allowed' } sits.\n return (\n <Checkbox.Root\n cursor={state === 'skeleton' ? 'default' : undefined}\n disabled={state === 'disabled' || state === 'skeleton'}\n readOnly={state === 'readOnly'}\n {...rest}\n >\n <Checkbox.HiddenInput aria-label={ariaLabel} ref={ref} {...inputProps} />\n <Skeleton loading={state === 'skeleton'}>\n <Checkbox.Control>{rest.checked === 'indeterminate' ? <IconMinus /> : <IconCheck />}</Checkbox.Control>\n </Skeleton>\n {hasLabel && (\n <Skeleton loading={state === 'skeleton'}>\n <Checkbox.Label as=\"div\">\n {labelText}\n {hasHelperText && (\n <Text color=\"text/helper\" textStyle=\"comp/input/helperText\">\n {helperText}\n </Text>\n )}\n </Checkbox.Label>\n </Skeleton>\n )}\n </Checkbox.Root>\n );\n});\n\nBitkitCheckbox.displayName = 'BitkitCheckbox';\n\nexport default BitkitCheckbox;\n"],"mappings":";;;;;;;;AA6BA,IAAM,eAAe,SAAoB,QAAQ,QAAQ,SAAS,MAAM,OAAO,SAAS;AAExF,IAAM,iBAAiB,YAAmD,OAAO,QAAQ;CACvF,MAAM,EAAE,cAAc,WAAW,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CACvF,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,WAAW,CAAC,YAAY,SAAS,KAAK;CAM5C,OACE,qBAAC,SAAS,MAAV;EACE,QAAQ,UAAU,aAAa,YAAY,KAAA;EAC3C,UAAU,UAAU,cAAc,UAAU;EAC5C,UAAU,UAAU;EACpB,GAAI;EAJN,UAAA;GAME,oBAAC,SAAS,aAAV;IAAsB,cAAY;IAAgB;IAAK,GAAI;GAAa,CAAA;GACxE,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,oBAAC,SAAS,SAAV,EAAA,UAAmB,KAAK,YAAY,kBAAkB,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA,EAAoB,CAAA;GAC9F,CAAA;GACT,YACC,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,qBAAC,SAAS,OAAV;KAAgB,IAAG;KAAnB,UAAA,CACG,WACA,iBACC,oBAAC,MAAD;MAAM,OAAM;MAAc,WAAU;MACjC,UAAA;KACG,CAAA,CAEM;;GACR,CAAA;EAEC;;AAEnB,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
|
|
2
2
|
export interface BitkitCloseButtonProps extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {
|
|
3
|
+
/**
|
|
4
|
+
* Hover label for the button. Defaults to `aria-label` — set it when the accessible name is
|
|
5
|
+
* too long to read well as a tooltip.
|
|
6
|
+
*/
|
|
7
|
+
tooltipText?: string;
|
|
3
8
|
}
|
|
4
9
|
declare const BitkitCloseButton: import('react').ForwardRefExoticComponent<BitkitCloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
5
10
|
export default BitkitCloseButton;
|
|
@@ -5,11 +5,11 @@ import { forwardRef } from "react";
|
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
//#region lib/components/BitkitCloseButton/BitkitCloseButton.tsx
|
|
7
7
|
var BitkitCloseButton = forwardRef((props, ref) => {
|
|
8
|
-
const { "aria-label": ariaLabel = "Close", size, colorVariant, css, ...rest } = props;
|
|
8
|
+
const { "aria-label": ariaLabel = "Close", size, colorVariant, css, tooltipText, ...rest } = props;
|
|
9
9
|
const style = useRecipe({ key: "closeButton" });
|
|
10
10
|
return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
11
11
|
disabled: rest.disabled,
|
|
12
|
-
text: ariaLabel,
|
|
12
|
+
text: tooltipText ?? ariaLabel,
|
|
13
13
|
children: /* @__PURE__ */ jsx(chakra.button, {
|
|
14
14
|
ref,
|
|
15
15
|
"aria-label": ariaLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n const { 'aria-label': ariaLabel = 'Close', size, colorVariant, css, ...rest } = props;\n\n const style = useRecipe({ key: 'closeButton' });\n\n return (\n <BitkitLabelTooltip disabled={rest.disabled} text={ariaLabel}>\n <chakra.button\n ref={ref}\n aria-label={ariaLabel}\n {...rest}\n css={[style({ size, colorVariant }), css]}\n color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n >\n <IconCross size={size === 'xs' ? '16' : '24'} />\n </chakra.button>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {\n /**\n * Hover label for the button. Defaults to `aria-label` — set it when the accessible name is\n * too long to read well as a tooltip.\n */\n tooltipText?: string;\n}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n const { 'aria-label': ariaLabel = 'Close', size, colorVariant, css, tooltipText, ...rest } = props;\n\n const style = useRecipe({ key: 'closeButton' });\n\n return (\n <BitkitLabelTooltip disabled={rest.disabled} text={tooltipText ?? ariaLabel}>\n <chakra.button\n ref={ref}\n aria-label={ariaLabel}\n {...rest}\n css={[style({ size, colorVariant }), css]}\n color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n >\n <IconCross size={size === 'xs' ? '16' : '24'} />\n </chakra.button>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AAeA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,MAAM,cAAc,KAAK,aAAa,GAAG,SAAS;CAE7F,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM,eAAe;EAChE,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,CAAC,MAAM;IAAE;IAAM;GAAa,CAAC,GAAG,GAAG;GACxC,OAAO,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;GAEvE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}
|
|
@@ -9,7 +9,8 @@ var BitkitRadio = forwardRef((props, ref) => {
|
|
|
9
9
|
const { badge, helperText, inputProps, labelText, state, ...rest } = props;
|
|
10
10
|
const styles = useRadioGroupStyles();
|
|
11
11
|
return /* @__PURE__ */ jsxs(RadioGroup.Item, {
|
|
12
|
-
|
|
12
|
+
cursor: state === "skeleton" ? "default" : void 0,
|
|
13
|
+
disabled: state === "disabled" || state === "skeleton",
|
|
13
14
|
...rest,
|
|
14
15
|
children: [
|
|
15
16
|
/* @__PURE__ */ jsx(RadioGroup.ItemHiddenInput, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitRadio.js","names":[],"sources":["../../../lib/components/BitkitRadio/BitkitRadio.tsx"],"sourcesContent":["import { RadioGroup, useRadioGroupStyles } from '@chakra-ui/react/radio-group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type DataAttr } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport BitkitBadge from '../BitkitBadge/BitkitBadge';\n\n/**\n * Passthrough attributes for the radio `<input>`. The RadioGroup machine owns the behavioral / state\n * attributes (`checked`, `value`, `name`, `type`, `disabled`, `onChange`, …), so they're excluded —\n * setting them here would let the input drift out of sync with its `RadioGroup.Item`. Keep it to\n * things like `data-testid`.\n */\ntype RadioInputProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'name' | 'onChange' | 'type' | 'value'\n> &\n DataAttr;\n\nexport type BitkitRadioProps = {\n badge?: 'off' | 'on';\n helperText?: ReactNode;\n inputProps?: RadioInputProps;\n labelText: ReactNode;\n state?: 'disabled' | 'skeleton';\n} & Omit<RadioGroup.ItemProps, 'disabled'>;\n\nconst BitkitRadio = forwardRef<HTMLInputElement, BitkitRadioProps>((props, ref) => {\n const { badge, helperText, inputProps, labelText, state, ...rest } = props;\n const styles = useRadioGroupStyles();\n\n return (\n <RadioGroup.Item disabled={state === 'disabled'}
|
|
1
|
+
{"version":3,"file":"BitkitRadio.js","names":[],"sources":["../../../lib/components/BitkitRadio/BitkitRadio.tsx"],"sourcesContent":["import { RadioGroup, useRadioGroupStyles } from '@chakra-ui/react/radio-group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type DataAttr } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport BitkitBadge from '../BitkitBadge/BitkitBadge';\n\n/**\n * Passthrough attributes for the radio `<input>`. The RadioGroup machine owns the behavioral / state\n * attributes (`checked`, `value`, `name`, `type`, `disabled`, `onChange`, …), so they're excluded —\n * setting them here would let the input drift out of sync with its `RadioGroup.Item`. Keep it to\n * things like `data-testid`.\n */\ntype RadioInputProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'name' | 'onChange' | 'type' | 'value'\n> &\n DataAttr;\n\nexport type BitkitRadioProps = {\n badge?: 'off' | 'on';\n helperText?: ReactNode;\n inputProps?: RadioInputProps;\n labelText: ReactNode;\n state?: 'disabled' | 'skeleton';\n} & Omit<RadioGroup.ItemProps, 'disabled'>;\n\nconst BitkitRadio = forwardRef<HTMLInputElement, BitkitRadioProps>((props, ref) => {\n const { badge, helperText, inputProps, labelText, state, ...rest } = props;\n const styles = useRadioGroupStyles();\n\n // Skeleton has to set disabled to be inert: the Skeleton wrapper's own pointer-events: none never\n // stopped a click, it only moved the target to the <label>, which activates the control. The cursor\n // style prop then keeps the arrow plain — style props land outside @layer recipes, where the\n // recipe's _disabled: { cursor: 'not-allowed' } sits.\n return (\n <RadioGroup.Item\n cursor={state === 'skeleton' ? 'default' : undefined}\n disabled={state === 'disabled' || state === 'skeleton'}\n {...rest}\n >\n <RadioGroup.ItemHiddenInput ref={ref} {...inputProps} />\n <Skeleton borderRadius=\"50%\" loading={state === 'skeleton'}>\n <RadioGroup.ItemIndicator />\n </Skeleton>\n {!!badge && (\n <Skeleton loading={state === 'skeleton'}>\n <BitkitBadge colorVariant={badge === 'on' ? 'green' : 'neutral'} css={styles.badge}>\n {badge}\n </BitkitBadge>\n </Skeleton>\n )}\n <Skeleton loading={state === 'skeleton'}>\n <RadioGroup.ItemText as=\"div\">\n {labelText}\n {!!helperText && (\n <Text color={state === 'disabled' ? 'text/disabled' : 'text/helper'} textStyle=\"comp/input/helperText\">\n {helperText}\n </Text>\n )}\n </RadioGroup.ItemText>\n </Skeleton>\n </RadioGroup.Item>\n );\n});\n\nBitkitRadio.displayName = 'BitkitRadio';\n\nexport default BitkitRadio;\n"],"mappings":";;;;;;;AA4BA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,OAAO,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CACrE,MAAM,SAAS,oBAAoB;CAMnC,OACE,qBAAC,WAAW,MAAZ;EACE,QAAQ,UAAU,aAAa,YAAY,KAAA;EAC3C,UAAU,UAAU,cAAc,UAAU;EAC5C,GAAI;EAHN,UAAA;GAKE,oBAAC,WAAW,iBAAZ;IAAiC;IAAK,GAAI;GAAa,CAAA;GACvD,oBAAC,UAAD;IAAU,cAAa;IAAM,SAAS,UAAU;IAC9C,UAAA,oBAAC,WAAW,eAAZ,CAA2B,CAAA;GACnB,CAAA;GACT,CAAC,CAAC,SACD,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,oBAAC,aAAD;KAAa,cAAc,UAAU,OAAO,UAAU;KAAW,KAAK,OAAO;KAC1E,UAAA;IACU,CAAA;GACL,CAAA;GAEZ,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,qBAAC,WAAW,UAAZ;KAAqB,IAAG;KAAxB,UAAA,CACG,WACA,CAAC,CAAC,cACD,oBAAC,MAAD;MAAM,OAAO,UAAU,aAAa,kBAAkB;MAAe,WAAU;MAC5E,UAAA;KACG,CAAA,CAEW;;GACb,CAAA;EACK;;AAErB,CAAC;AAED,YAAY,cAAc"}
|
|
@@ -3,15 +3,17 @@ import BitkitColorButton from "../BitkitColorButton/BitkitColorButton.js";
|
|
|
3
3
|
import { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
|
|
4
4
|
import { toaster } from "./BitkitToast.js";
|
|
5
5
|
import { Box } from "@chakra-ui/react/box";
|
|
6
|
-
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
|
+
import { useSlotRecipe, useToken } from "@chakra-ui/react/styled-system";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { Text } from "@chakra-ui/react/text";
|
|
9
9
|
import { Toast, Toaster } from "@chakra-ui/react/toast";
|
|
10
10
|
//#region lib/components/BitkitToast/BitkitToaster.tsx
|
|
11
11
|
var BitkitToaster = () => {
|
|
12
12
|
const toastRecipe = useSlotRecipe({ key: "toast" });
|
|
13
|
+
const [zIndex] = useToken("zIndex", "toast");
|
|
13
14
|
return /* @__PURE__ */ jsx(Toaster, {
|
|
14
15
|
toaster,
|
|
16
|
+
style: { zIndex },
|
|
15
17
|
children: (toast) => {
|
|
16
18
|
const variant = toast.type;
|
|
17
19
|
const styles = toastRecipe({ variant });
|
|
@@ -51,8 +53,10 @@ var BitkitToaster = () => {
|
|
|
51
53
|
toast.closable && /* @__PURE__ */ jsx(Toast.CloseTrigger, {
|
|
52
54
|
asChild: true,
|
|
53
55
|
children: /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
56
|
+
"aria-label": "Dismiss notification",
|
|
54
57
|
colorVariant: BUTTON_COLORS_MAP[variant],
|
|
55
|
-
size: "sm"
|
|
58
|
+
size: "sm",
|
|
59
|
+
tooltipText: "Dismiss"
|
|
56
60
|
})
|
|
57
61
|
})
|
|
58
62
|
]
|
|
@@ -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} {...toast.meta?.dataAttributes}>\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]}
|
|
1
|
+
{"version":3,"file":"BitkitToaster.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToaster.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe, useToken } 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 const [zIndex] = useToken('zIndex', 'toast');\n\n return (\n <Toaster toaster={toaster} style={{ zIndex }}>\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} {...toast.meta?.dataAttributes}>\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\n aria-label=\"Dismiss notification\"\n colorVariant={BUTTON_COLORS_MAP[variant]}\n size=\"sm\"\n tooltipText=\"Dismiss\"\n />\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;CAClD,MAAM,CAAC,UAAU,SAAS,UAAU,OAAO;CAE3C,OACE,oBAAC,SAAD;EAAkB;EAAS,OAAO,EAAE,OAAO;EACvC,WAAA,UAAU;GACV,MAAM,UAAU,MAAM;GACtB,MAAM,SAAS,YAAY,EAAE,QAAQ,CAAC;GACtC,MAAM,gBAAgB,oBAAoB;GAC1C,OACE,qBAAC,MAAM,MAAP;IAAqB;IAAS,GAAI,MAAM,MAAM;IAA9C,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;OACE,cAAW;OACX,cAAc,kBAAkB;OAChC,MAAK;OACL,aAAY;MACb,CAAA;KACiB,CAAA;IAEZ;;EAEhB;CACO,CAAA;AAEb"}
|
|
@@ -9,7 +9,10 @@ var checkboxSlotRecipe = defineSlotRecipe({
|
|
|
9
9
|
display: "inline-flex",
|
|
10
10
|
alignItems: "flex-start",
|
|
11
11
|
gap: "8",
|
|
12
|
-
width: "fit-content"
|
|
12
|
+
width: "fit-content",
|
|
13
|
+
cursor: "pointer",
|
|
14
|
+
_disabled: { cursor: "not-allowed" },
|
|
15
|
+
_readOnly: { cursor: "default" }
|
|
13
16
|
},
|
|
14
17
|
control: {
|
|
15
18
|
position: "relative",
|
|
@@ -18,7 +21,6 @@ var checkboxSlotRecipe = defineSlotRecipe({
|
|
|
18
21
|
border: "1px solid",
|
|
19
22
|
borderColor: "border/regular",
|
|
20
23
|
boxShadow: "inset/field",
|
|
21
|
-
cursor: "pointer",
|
|
22
24
|
focusVisibleRing: "outside",
|
|
23
25
|
"& > svg": {
|
|
24
26
|
position: "absolute",
|
|
@@ -59,14 +61,12 @@ var checkboxSlotRecipe = defineSlotRecipe({
|
|
|
59
61
|
_disabled: {
|
|
60
62
|
backgroundColor: "background/disabled",
|
|
61
63
|
borderColor: "border/disabled",
|
|
62
|
-
boxShadow: "none"
|
|
63
|
-
cursor: "not-allowed"
|
|
64
|
+
boxShadow: "none"
|
|
64
65
|
},
|
|
65
66
|
_readOnly: {
|
|
66
67
|
backgroundColor: "background/disabled",
|
|
67
68
|
borderColor: "border/regular !important",
|
|
68
|
-
boxShadow: "none"
|
|
69
|
-
cursor: "default"
|
|
69
|
+
boxShadow: "none"
|
|
70
70
|
}
|
|
71
71
|
},
|
|
72
72
|
label: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Checkbox.recipe.ts"],"sourcesContent":["import { checkboxAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst checkboxSlotRecipe = defineSlotRecipe({\n className: 'checkbox',\n slots: checkboxAnatomy.keys(),\n base: {\n root: {\n display: 'inline-flex',\n alignItems: 'flex-start',\n gap: '8',\n width: 'fit-content',\n },\n control: {\n position: 'relative',\n borderRadius: '4',\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderColor: 'border/regular',\n boxShadow: 'inset/field',\n
|
|
1
|
+
{"version":3,"file":"Checkbox.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Checkbox.recipe.ts"],"sourcesContent":["import { checkboxAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst checkboxSlotRecipe = defineSlotRecipe({\n className: 'checkbox',\n slots: checkboxAnatomy.keys(),\n base: {\n root: {\n display: 'inline-flex',\n alignItems: 'flex-start',\n gap: '8',\n width: 'fit-content',\n cursor: 'pointer',\n _disabled: {\n cursor: 'not-allowed',\n },\n _readOnly: {\n cursor: 'default',\n },\n },\n control: {\n position: 'relative',\n borderRadius: '4',\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderColor: 'border/regular',\n boxShadow: 'inset/field',\n focusVisibleRing: 'outside',\n '& > svg': {\n position: 'absolute',\n left: '-1px',\n visibility: 'hidden',\n },\n _checked: {\n backgroundColor: 'input/checkbox/selection',\n borderColor: 'input/checkbox/selection !important',\n boxShadow: 'none',\n '& > svg': {\n top: 0,\n color: 'icon/on-color',\n visibility: 'visible',\n },\n _disabled: {\n backgroundColor: 'input/checkbox/selection-disabled',\n borderColor: 'input/checkbox/selection-disabled !important',\n },\n _readOnly: {\n '& > svg': {\n color: 'icon/on-disabled',\n },\n },\n },\n _hover: {\n borderColor: 'border/hover',\n },\n _indeterminate: {\n backgroundColor: 'input/checkbox/selection',\n borderColor: 'input/checkbox/selection !important',\n boxShadow: 'none',\n '& > svg': {\n top: '-1px',\n color: 'icon/on-color',\n visibility: 'visible',\n },\n _disabled: {\n backgroundColor: 'input/checkbox/selection-disabled',\n borderColor: 'input/checkbox/selection-disabled !important',\n },\n _readOnly: {\n '& > svg': {\n color: 'icon/on-disabled',\n },\n },\n },\n _disabled: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/disabled',\n boxShadow: 'none',\n },\n _readOnly: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/regular !important',\n boxShadow: 'none',\n },\n },\n label: {\n userSelect: 'none',\n color: 'input/text/inputValue',\n _disabled: {\n color: 'text/disabled',\n },\n },\n },\n variants: {\n size: {\n md: {\n control: {\n width: '20',\n height: '20',\n '& > svg': {\n width: '20',\n height: '20',\n },\n },\n label: {\n textStyle: 'body/md/regular',\n },\n },\n lg: {\n control: {\n width: '24',\n height: '24',\n '& > svg': {\n width: '24',\n height: '24',\n },\n },\n label: {\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default checkboxSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,gBAAgB,KAAK;CAC5B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,WAAW,EACT,QAAQ,cACV;GACA,WAAW,EACT,QAAQ,UACV;EACF;EACA,SAAS;GACP,UAAU;GACV,cAAc;GACd,iBAAiB;GACjB,QAAQ;GACR,aAAa;GACb,WAAW;GACX,kBAAkB;GAClB,WAAW;IACT,UAAU;IACV,MAAM;IACN,YAAY;GACd;GACA,UAAU;IACR,iBAAiB;IACjB,aAAa;IACb,WAAW;IACX,WAAW;KACT,KAAK;KACL,OAAO;KACP,YAAY;IACd;IACA,WAAW;KACT,iBAAiB;KACjB,aAAa;IACf;IACA,WAAW,EACT,WAAW,EACT,OAAO,mBACT,EACF;GACF;GACA,QAAQ,EACN,aAAa,eACf;GACA,gBAAgB;IACd,iBAAiB;IACjB,aAAa;IACb,WAAW;IACX,WAAW;KACT,KAAK;KACL,OAAO;KACP,YAAY;IACd;IACA,WAAW;KACT,iBAAiB;KACjB,aAAa;IACf;IACA,WAAW,EACT,WAAW,EACT,OAAO,mBACT,EACF;GACF;GACA,WAAW;IACT,iBAAiB;IACjB,aAAa;IACb,WAAW;GACb;GACA,WAAW;IACT,iBAAiB;IACjB,aAAa;IACb,WAAW;GACb;EACF;EACA,OAAO;GACL,YAAY;GACZ,OAAO;GACP,WAAW,EACT,OAAO,gBACT;EACF;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,SAAS;IACP,OAAO;IACP,QAAQ;IACR,WAAW;KACT,OAAO;KACP,QAAQ;IACV;GACF;GACA,OAAO,EACL,WAAW,kBACb;EACF;EACA,IAAI;GACF,SAAS;IACP,OAAO;IACP,QAAQ;IACR,WAAW;KACT,OAAO;KACP,QAAQ;IACV;GACF;GACA,OAAO,EACL,WAAW,kBACb;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|
|
@@ -11,7 +11,10 @@ var radioGroupSlotRecipe = defineSlotRecipe({
|
|
|
11
11
|
display: "inline-flex",
|
|
12
12
|
gap: "8",
|
|
13
13
|
alignItems: "flex-start",
|
|
14
|
-
justifyContent: "center"
|
|
14
|
+
justifyContent: "center",
|
|
15
|
+
cursor: "pointer",
|
|
16
|
+
_disabled: { cursor: "not-allowed" },
|
|
17
|
+
_readOnly: { cursor: "default" }
|
|
15
18
|
},
|
|
16
19
|
itemControl: {
|
|
17
20
|
border: "1px solid",
|
|
@@ -19,7 +22,6 @@ var radioGroupSlotRecipe = defineSlotRecipe({
|
|
|
19
22
|
backgroundColor: "background/primary",
|
|
20
23
|
borderRadius: "50%",
|
|
21
24
|
boxShadow: "inset/field",
|
|
22
|
-
cursor: "pointer",
|
|
23
25
|
display: "flex",
|
|
24
26
|
alignItems: "center",
|
|
25
27
|
justifyContent: "center",
|
|
@@ -39,14 +41,12 @@ var radioGroupSlotRecipe = defineSlotRecipe({
|
|
|
39
41
|
backgroundColor: "background/disabled",
|
|
40
42
|
borderColor: "border/disabled",
|
|
41
43
|
boxShadow: "none",
|
|
42
|
-
cursor: "not-allowed",
|
|
43
44
|
"& > .dot": { backgroundColor: "icon/disabled" }
|
|
44
45
|
},
|
|
45
46
|
_readOnly: {
|
|
46
47
|
backgroundColor: "background/disabled",
|
|
47
48
|
borderColor: "border/disabled",
|
|
48
49
|
boxShadow: "none",
|
|
49
|
-
cursor: "default",
|
|
50
50
|
"& > .dot": { backgroundColor: "icon/on-disabled" }
|
|
51
51
|
}
|
|
52
52
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/RadioGroup.recipe.ts"],"sourcesContent":["import { radioGroupAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst radioGroupSlotRecipe = defineSlotRecipe({\n className: 'radio-group',\n slots: [...radioGroupAnatomy.keys(), 'badge'],\n base: {\n root: {\n display: 'flex',\n },\n item: {\n display: 'inline-flex',\n gap: '8',\n alignItems: 'flex-start',\n justifyContent: 'center',\n },\n itemControl: {\n border: '1px solid',\n borderColor: 'border/regular',\n backgroundColor: 'background/primary',\n borderRadius: '50%',\n boxShadow: 'inset/field',\n
|
|
1
|
+
{"version":3,"file":"RadioGroup.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/RadioGroup.recipe.ts"],"sourcesContent":["import { radioGroupAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst radioGroupSlotRecipe = defineSlotRecipe({\n className: 'radio-group',\n slots: [...radioGroupAnatomy.keys(), 'badge'],\n base: {\n root: {\n display: 'flex',\n },\n item: {\n display: 'inline-flex',\n gap: '8',\n alignItems: 'flex-start',\n justifyContent: 'center',\n cursor: 'pointer',\n _disabled: {\n cursor: 'not-allowed',\n },\n _readOnly: {\n cursor: 'default',\n },\n },\n itemControl: {\n border: '1px solid',\n borderColor: 'border/regular',\n backgroundColor: 'background/primary',\n borderRadius: '50%',\n boxShadow: 'inset/field',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n focusVisibleRing: 'outside',\n '& > .dot': {\n width: '12',\n height: '12',\n borderRadius: '50%',\n backgroundColor: 'icon/interactive',\n },\n _hover: {\n borderColor: 'border/hover',\n _disabled: {\n borderColor: 'border/disabled',\n },\n _readOnly: {\n borderColor: 'border/disabled',\n },\n },\n _disabled: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/disabled',\n boxShadow: 'none',\n '& > .dot': {\n backgroundColor: 'icon/disabled',\n },\n },\n _readOnly: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/disabled',\n boxShadow: 'none',\n '& > .dot': {\n backgroundColor: 'icon/on-disabled',\n },\n },\n },\n itemText: {\n color: 'input/text/inputValue',\n _disabled: {\n color: 'text/disabled',\n },\n },\n },\n variants: {\n orientation: {\n horizontal: {\n root: {\n flexDirection: 'row',\n gap: '24',\n },\n },\n vertical: {\n root: {\n alignItems: 'flex-start',\n flexDirection: 'column',\n gap: '12',\n },\n },\n },\n size: {\n md: {\n badge: {\n paddingBlock: '2',\n width: rem(36),\n },\n itemControl: {\n width: '20',\n height: '20',\n },\n itemText: {\n textStyle: 'body/md/regular',\n },\n },\n lg: {\n badge: {\n paddingBlock: '4',\n width: '40',\n },\n itemControl: {\n width: '24',\n height: '24',\n },\n itemText: {\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n size: 'lg',\n },\n});\n\nexport default radioGroupSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,uBAAuB,iBAAiB;CAC5C,WAAW;CACX,OAAO,CAAC,GAAG,kBAAkB,KAAK,GAAG,OAAO;CAC5C,MAAM;EACJ,MAAM,EACJ,SAAS,OACX;EACA,MAAM;GACJ,SAAS;GACT,KAAK;GACL,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,WAAW,EACT,QAAQ,cACV;GACA,WAAW,EACT,QAAQ,UACV;EACF;EACA,aAAa;GACX,QAAQ;GACR,aAAa;GACb,iBAAiB;GACjB,cAAc;GACd,WAAW;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,kBAAkB;GAClB,YAAY;IACV,OAAO;IACP,QAAQ;IACR,cAAc;IACd,iBAAiB;GACnB;GACA,QAAQ;IACN,aAAa;IACb,WAAW,EACT,aAAa,kBACf;IACA,WAAW,EACT,aAAa,kBACf;GACF;GACA,WAAW;IACT,iBAAiB;IACjB,aAAa;IACb,WAAW;IACX,YAAY,EACV,iBAAiB,gBACnB;GACF;GACA,WAAW;IACT,iBAAiB;IACjB,aAAa;IACb,WAAW;IACX,YAAY,EACV,iBAAiB,mBACnB;GACF;EACF;EACA,UAAU;GACR,OAAO;GACP,WAAW,EACT,OAAO,gBACT;EACF;CACF;CACA,UAAU;EACR,aAAa;GACX,YAAY,EACV,MAAM;IACJ,eAAe;IACf,KAAK;GACP,EACF;GACA,UAAU,EACR,MAAM;IACJ,YAAY;IACZ,eAAe;IACf,KAAK;GACP,EACF;EACF;EACA,MAAM;GACJ,IAAI;IACF,OAAO;KACL,cAAc;KACd,OAAO,IAAI,EAAE;IACf;IACA,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;GACA,IAAI;IACF,OAAO;KACL,cAAc;KACd,OAAO;IACT;IACA,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;AACF,CAAC"}
|
|
@@ -18,8 +18,8 @@ var toastSlotRecipe = defineSlotRecipe({
|
|
|
18
18
|
minWidth: 0
|
|
19
19
|
},
|
|
20
20
|
description: {
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
paddingBlockStart: "2",
|
|
22
|
+
textStyle: "comp/notification/message"
|
|
23
23
|
},
|
|
24
24
|
icon: {
|
|
25
25
|
alignSelf: "flex-start",
|
|
@@ -34,7 +34,7 @@ var toastSlotRecipe = defineSlotRecipe({
|
|
|
34
34
|
boxShadow: "elevation/lg",
|
|
35
35
|
display: "flex",
|
|
36
36
|
gap: "8",
|
|
37
|
-
paddingBlock:
|
|
37
|
+
paddingBlock: rem(15),
|
|
38
38
|
paddingInline: "12",
|
|
39
39
|
position: "relative",
|
|
40
40
|
translate: "var(--x) var(--y)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Toast.recipe.ts"],"sourcesContent":["import { toastAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst toastSlotRecipe = defineSlotRecipe({\n className: 'toast',\n slots: [...toastAnatomy.keys(), 'content', 'icon', 'timestamp'],\n base: {\n actionTrigger: {\n marginBlockStart: '16',\n },\n content: {\n flex: 1,\n minWidth: 0,\n },\n description: {\n
|
|
1
|
+
{"version":3,"file":"Toast.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Toast.recipe.ts"],"sourcesContent":["import { toastAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst toastSlotRecipe = defineSlotRecipe({\n className: 'toast',\n slots: [...toastAnatomy.keys(), 'content', 'icon', 'timestamp'],\n base: {\n actionTrigger: {\n marginBlockStart: '16',\n },\n content: {\n flex: 1,\n minWidth: 0,\n },\n description: {\n paddingBlockStart: '2',\n textStyle: 'comp/notification/message',\n },\n icon: {\n alignSelf: 'flex-start',\n flexShrink: 0,\n height: '24',\n width: '24',\n },\n root: {\n alignItems: 'flex-start',\n border: '1px solid',\n borderRadius: '8',\n boxShadow: 'elevation/lg',\n display: 'flex',\n gap: '8',\n // `rem(15)` block padding (not 16) lands the toast on the designed heights once the 1px\n // border is added — Figma measures its 16px padding from the frame edge, stroke included:\n // 56px message-only, 102px message + action, 116px title + message + timestamp, 128px\n // title + message + action. Same compensation as BitkitAlert's `rem(11)`.\n paddingBlock: rem(15),\n paddingInline: '12',\n position: 'relative',\n translate: 'var(--x) var(--y)',\n width: rem(480),\n willChange: 'translate, opacity, scale',\n transition: 'translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms',\n transitionTimingFunction: 'cubic-bezier(0.21, 1.02, 0.73, 1)',\n _closed: {\n transition: 'translate 400ms, scale 400ms, opacity 200ms',\n transitionTimingFunction: 'cubic-bezier(0.06, 0.71, 0.55, 1)',\n },\n },\n timestamp: {\n marginBlockStart: '16',\n textStyle: 'comp/notification/message',\n },\n title: {\n marginBlockEnd: '2',\n textStyle: 'comp/notification/title',\n },\n closeTrigger: {\n insetBlockStart: '12',\n insetInlineEnd: '12',\n position: 'absolute',\n },\n },\n variants: {\n variant: Object.fromEntries(\n NOTIFICATION_VARIANTS.map((v) => [\n v,\n {\n icon: { color: ICONS_MAP[v] },\n root: { ...ROOT_MAP[v], color: TEXT_MAP[v] },\n },\n ]),\n ),\n },\n defaultVariants: {\n variant: 'info',\n },\n});\n\nexport default toastSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,kBAAkB,iBAAiB;CACvC,WAAW;CACX,OAAO;EAAC,GAAG,aAAa,KAAK;EAAG;EAAW;EAAQ;CAAW;CAC9D,MAAM;EACJ,eAAe,EACb,kBAAkB,KACpB;EACA,SAAS;GACP,MAAM;GACN,UAAU;EACZ;EACA,aAAa;GACX,mBAAmB;GACnB,WAAW;EACb;EACA,MAAM;GACJ,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,OAAO;EACT;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,WAAW;GACX,SAAS;GACT,KAAK;GAKL,cAAc,IAAI,EAAE;GACpB,eAAe;GACf,UAAU;GACV,WAAW;GACX,OAAO,IAAI,GAAG;GACd,YAAY;GACZ,YAAY;GACZ,0BAA0B;GAC1B,SAAS;IACP,YAAY;IACZ,0BAA0B;GAC5B;EACF;EACA,WAAW;GACT,kBAAkB;GAClB,WAAW;EACb;EACA,OAAO;GACL,gBAAgB;GAChB,WAAW;EACb;EACA,cAAc;GACZ,iBAAiB;GACjB,gBAAgB;GAChB,UAAU;EACZ;CACF;CACA,UAAU,EACR,SAAS,OAAO,YACd,sBAAsB,KAAK,MAAM,CAC/B,GACA;EACE,MAAM,EAAE,OAAO,UAAU,GAAG;EAC5B,MAAM;GAAE,GAAG,SAAS;GAAI,OAAO,SAAS;EAAG;CAC7C,CACF,CAAC,CACH,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zIndex.js","names":[],"sources":["../../../lib/theme/tokens/zIndex.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nconst zIndex = defineTokens.zIndex({\n base: {\n value: 0,\n },\n dialog: {\n value: 1300,\n },\n dialogOverlay: {\n value: 1299,\n },\n fullDialog: {\n value: 1200,\n },\n fullDialogOverlay: {\n value: 1199,\n },\n header: {\n value: 1100,\n },\n hide: {\n value: -1,\n },\n popover: {\n value: 1400,\n },\n select: {\n value: 1500,\n },\n tooltip: {\n value: 1600,\n },\n});\n\nexport default zIndex;\n"],"mappings":";;AAEA,IAAM,SAAS,aAAa,OAAO;CACjC,MAAM,EACJ,OAAO,EACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,eAAe,EACb,OAAO,KACT;CACA,YAAY,EACV,OAAO,KACT;CACA,mBAAmB,EACjB,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,MAAM,EACJ,OAAO,GACT;CACA,SAAS,EACP,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,SAAS,EACP,OAAO,KACT;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"zIndex.js","names":[],"sources":["../../../lib/theme/tokens/zIndex.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nconst zIndex = defineTokens.zIndex({\n base: {\n value: 0,\n },\n dialog: {\n value: 1300,\n },\n dialogOverlay: {\n value: 1299,\n },\n fullDialog: {\n value: 1200,\n },\n fullDialogOverlay: {\n value: 1199,\n },\n header: {\n value: 1100,\n },\n hide: {\n value: -1,\n },\n popover: {\n value: 1400,\n },\n select: {\n value: 1500,\n },\n toast: {\n value: 1550,\n },\n tooltip: {\n value: 1600,\n },\n});\n\nexport default zIndex;\n"],"mappings":";;AAEA,IAAM,SAAS,aAAa,OAAO;CACjC,MAAM,EACJ,OAAO,EACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,eAAe,EACb,OAAO,KACT;CACA,YAAY,EACV,OAAO,KACT;CACA,mBAAmB,EACjB,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,MAAM,EACJ,OAAO,GACT;CACA,SAAS,EACP,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,OAAO,EACL,OAAO,KACT;CACA,SAAS,EACP,OAAO,KACT;AACF,CAAC"}
|