@bitrise/bitkit-v2 0.3.397-beta.2557 → 0.3.397
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/BitkitDialog/BitkitStepsDialog.d.ts +1 -0
- package/dist/components/BitkitDialog/BitkitStepsDialog.js +1 -0
- package/dist/components/BitkitDialog/BitkitStepsDialog.js.map +1 -1
- package/dist/components/BitkitRibbon/BitkitRibbon.d.ts +6 -2
- package/dist/components/BitkitRibbon/BitkitRibbon.js +1 -3
- package/dist/components/BitkitRibbon/BitkitRibbon.js.map +1 -1
- package/dist/components/common/notificationMaps.d.ts +2 -2
- package/dist/components/common/notificationMaps.js.map +1 -1
- package/dist/theme/slot-recipes/Ribbon.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/Ribbon.recipe.js +7 -47
- package/dist/theme/slot-recipes/Ribbon.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +1 -1
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -138,7 +138,7 @@ Bitkit components use consistent prop names across the library:
|
|
|
138
138
|
- **Three dialog components, one shell** — pick by intent, never reach for low-level dialog primitives (there are none exported):
|
|
139
139
|
- `BitkitDialog` — header (title + close) + body (`children`) + footer. The body is the dialog's `children`. The footer is two slot props: `footerButtons` (action buttons, auto-wrapped in the standard right-aligned row — no manual wrapper) and `footerContent` (arbitrary content rendered raw, e.g. an inline `BitkitAlert`). Both can be combined (content first, then buttons); omit both for a passive dialog with no footer.
|
|
140
140
|
- `BitkitFormDialog` — same API as `BitkitDialog`, but the whole content is a `<form>`, so a `type="submit"` button in `footerButtons` submits natively. On top of the shared dialog props it takes `onSubmit` (correctly typed as `FormEvent<HTMLFormElement>`) and `noValidate`, and nothing else off the native `<form>`.
|
|
141
|
-
- `BitkitStepsDialog` — a multi-step dialog. Pass `BitkitStepsDialog.Step` children (each with `label` for the steps header, `title`/`description` for the step body). It owns the step state and auto-renders the steps header; build the step navigation with the `useStepsDialog()` hook (`{ step, setStep, next, prev, goTo, isFirst, isLast, totalSteps }`) and pass it as `footerButtons`, which the dialog lays out with the leading action opposite the step navigation. `footerContent` still renders raw above it. Controlled via `step`/`onStepChange`, or uncontrolled via `defaultStep`.
|
|
141
|
+
- `BitkitStepsDialog` — a multi-step dialog. Pass `BitkitStepsDialog.Step` children (each with `label` for the steps header, `title`/`description` for the step body). It owns the step state and auto-renders the steps header; build the step navigation with the `useStepsDialog()` hook (`{ step, setStep, next, prev, goTo, isFirst, isLast, totalSteps }`) and pass it as `footerButtons`, which the dialog lays out with the leading action opposite the step navigation. A wizard with no leading action just passes the one navigation group and it stays on the right, so never add `marginInlineStart`, `width` or a `justifyContent` at the call site. `footerContent` still renders raw above it. Controlled via `step`/`onStepChange`, or uncontrolled via `defaultStep`.
|
|
142
142
|
- All three expose `.ActionTrigger` (a thin re-export of Chakra's `Dialog.ActionTrigger`): wrap a footer button in it to close the dialog on click — the default way to dismiss a trigger-based (uncontrolled) dialog without wiring `open` state.
|
|
143
143
|
```tsx
|
|
144
144
|
<BitkitDialog footerButtons={<><Button variant="secondary">Cancel</Button><Button variant="primary">Save</Button></>} open={open} onOpenChange={…} title="Title">Body</BitkitDialog>
|
|
@@ -16,6 +16,7 @@ export type BitkitStepsDialogProps = {
|
|
|
16
16
|
/**
|
|
17
17
|
* The step navigation, built with `useStepsDialog()`. Pass the buttons themselves: the dialog lays
|
|
18
18
|
* them out the way the design asks for, leading action on the left, the step navigation opposite.
|
|
19
|
+
* A footer with no leading action passes a single group, which stays on the right.
|
|
19
20
|
*/
|
|
20
21
|
footerButtons?: ReactNode;
|
|
21
22
|
/** Arbitrary content rendered raw inside the footer, above `footerButtons` (e.g. a `BitkitAlert`). */
|
|
@@ -50,6 +50,7 @@ var BitkitStepsDialog = ({ children, defaultStep = 0, dismissible = true, initia
|
|
|
50
50
|
onOpenChange?.(details);
|
|
51
51
|
};
|
|
52
52
|
const footerNav = footerButtons && /* @__PURE__ */ jsx(Box, {
|
|
53
|
+
css: { "& > :only-child": { marginInlineStart: "auto" } },
|
|
53
54
|
display: "flex",
|
|
54
55
|
justifyContent: "space-between",
|
|
55
56
|
width: "100%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitStepsDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepsDialog.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { type BitkitDataAttributes } from '../../utilities/dataAttributes';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepsDialogStep, { type BitkitStepsDialogStepProps } from './BitkitStepsDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\nimport { StepsDialogProvider } from './StepsDialogContext';\n\nexport { useStepsDialog } from './StepsDialogContext';\n\nexport type BitkitStepsDialogProps = {\n /** `BitkitStepsDialog.Step` children, one per step. */\n children: ReactNode;\n /** Initial step when uncontrolled. Resets to this when the dialog closes. */\n defaultStep?: number;\n /** Set to `false` to remove every dismiss route that skips a decision: no close button, no ESC. */\n dismissible?: boolean;\n /** Element to focus when the dialog opens, instead of the first focusable one. */\n initialFocusEl?: DialogShellProps['initialFocusEl'];\n /**\n * The step navigation, built with `useStepsDialog()`. Pass the buttons themselves: the dialog lays\n * them out the way the design asks for, leading action on the left, the step navigation opposite.\n */\n footerButtons?: ReactNode;\n /** Arbitrary content rendered raw inside the footer, above `footerButtons` (e.g. a `BitkitAlert`). */\n footerContent?: ReactNode;\n headerLabel?: string;\n maxHeight?: string;\n onExitComplete?: () => void;\n onOpenChange?: (details: { open: boolean }) => void;\n /** Called whenever the active step changes (controlled or uncontrolled). */\n onStepChange?: (step: number) => void;\n open?: boolean;\n preventScroll?: boolean;\n scrollBehavior?: 'inside' | 'outside';\n showScrollGradient?: boolean;\n size?: 'sm' | 'md' | 'lg' | 'full';\n /**\n * `loading` locks the dialog while a background action runs: the close button stays in place but\n * disabled, and ESC is blocked. Use it alongside the footer button's own `state=\"loading\"`.\n */\n state?: 'loading';\n /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */\n step?: number;\n title: ReactNode;\n trigger?: ReactNode;\n variant?: 'overflowContent';\n // Data attributes are forwarded to the element carrying `role=\"dialog\"`, and nothing else is —\n // style props, `className` and `id` don't pass through.\n} & BitkitDataAttributes;\n\n/**\n * A dialog that walks through a sequence of `BitkitStepsDialog.Step` children. It owns the step\n * state, auto-renders the steps header, and shows only the active step's body. The consumer builds\n * the step navigation with the `useStepsDialog()` hook and passes it in as `footerButtons`.\n */\nconst BitkitStepsDialog = ({\n children,\n defaultStep = 0,\n dismissible = true,\n initialFocusEl,\n footerButtons,\n footerContent,\n headerLabel,\n maxHeight,\n onExitComplete,\n onOpenChange,\n onStepChange,\n open,\n preventScroll,\n scrollBehavior,\n showScrollGradient,\n size,\n state,\n step: stepProp,\n title,\n trigger,\n variant,\n ...dataAttributes\n}: BitkitStepsDialogProps) => {\n const [internalStep, setInternalStep] = useState(defaultStep);\n const isControlled = stepProp !== undefined;\n const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n const steps = flattenChildren(children).filter(\n (child): child is ReactElement<BitkitStepsDialogStepProps> => child.type === BitkitStepsDialogStep,\n );\n const totalSteps = steps.length;\n const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));\n\n const setStep = useCallback(\n (next: number) => {\n const clamped = Math.max(0, Math.min(next, totalSteps - 1));\n if (!isControlled) setInternalStep(clamped);\n onStepChange?.(clamped);\n },\n [isControlled, onStepChange, totalSteps],\n );\n\n const ctx = useMemo(\n () => ({\n goTo: setStep,\n isFirst: step === 0,\n isLast: step === totalSteps - 1,\n next: () => setStep(step + 1),\n prev: () => setStep(step - 1),\n setStep,\n step,\n totalSteps,\n }),\n [setStep, step, totalSteps],\n );\n\n const handleOpenChange = (details: { open: boolean }) => {\n if (!details.open && !isControlled) setInternalStep(defaultStep);\n onOpenChange?.(details);\n };\n\n // The design splits this row: the leading action sits opposite the step navigation. Laying it out\n // here rather than in `DialogInner` keeps the shared action block right-aligned for every other\n // dialog, and keeps the split off every call site.\n const footerNav = footerButtons && (\n <Box display=\"flex\"
|
|
1
|
+
{"version":3,"file":"BitkitStepsDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepsDialog.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { type BitkitDataAttributes } from '../../utilities/dataAttributes';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepsDialogStep, { type BitkitStepsDialogStepProps } from './BitkitStepsDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\nimport { StepsDialogProvider } from './StepsDialogContext';\n\nexport { useStepsDialog } from './StepsDialogContext';\n\nexport type BitkitStepsDialogProps = {\n /** `BitkitStepsDialog.Step` children, one per step. */\n children: ReactNode;\n /** Initial step when uncontrolled. Resets to this when the dialog closes. */\n defaultStep?: number;\n /** Set to `false` to remove every dismiss route that skips a decision: no close button, no ESC. */\n dismissible?: boolean;\n /** Element to focus when the dialog opens, instead of the first focusable one. */\n initialFocusEl?: DialogShellProps['initialFocusEl'];\n /**\n * The step navigation, built with `useStepsDialog()`. Pass the buttons themselves: the dialog lays\n * them out the way the design asks for, leading action on the left, the step navigation opposite.\n * A footer with no leading action passes a single group, which stays on the right.\n */\n footerButtons?: ReactNode;\n /** Arbitrary content rendered raw inside the footer, above `footerButtons` (e.g. a `BitkitAlert`). */\n footerContent?: ReactNode;\n headerLabel?: string;\n maxHeight?: string;\n onExitComplete?: () => void;\n onOpenChange?: (details: { open: boolean }) => void;\n /** Called whenever the active step changes (controlled or uncontrolled). */\n onStepChange?: (step: number) => void;\n open?: boolean;\n preventScroll?: boolean;\n scrollBehavior?: 'inside' | 'outside';\n showScrollGradient?: boolean;\n size?: 'sm' | 'md' | 'lg' | 'full';\n /**\n * `loading` locks the dialog while a background action runs: the close button stays in place but\n * disabled, and ESC is blocked. Use it alongside the footer button's own `state=\"loading\"`.\n */\n state?: 'loading';\n /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */\n step?: number;\n title: ReactNode;\n trigger?: ReactNode;\n variant?: 'overflowContent';\n // Data attributes are forwarded to the element carrying `role=\"dialog\"`, and nothing else is —\n // style props, `className` and `id` don't pass through.\n} & BitkitDataAttributes;\n\n/**\n * A dialog that walks through a sequence of `BitkitStepsDialog.Step` children. It owns the step\n * state, auto-renders the steps header, and shows only the active step's body. The consumer builds\n * the step navigation with the `useStepsDialog()` hook and passes it in as `footerButtons`.\n */\nconst BitkitStepsDialog = ({\n children,\n defaultStep = 0,\n dismissible = true,\n initialFocusEl,\n footerButtons,\n footerContent,\n headerLabel,\n maxHeight,\n onExitComplete,\n onOpenChange,\n onStepChange,\n open,\n preventScroll,\n scrollBehavior,\n showScrollGradient,\n size,\n state,\n step: stepProp,\n title,\n trigger,\n variant,\n ...dataAttributes\n}: BitkitStepsDialogProps) => {\n const [internalStep, setInternalStep] = useState(defaultStep);\n const isControlled = stepProp !== undefined;\n const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n const steps = flattenChildren(children).filter(\n (child): child is ReactElement<BitkitStepsDialogStepProps> => child.type === BitkitStepsDialogStep,\n );\n const totalSteps = steps.length;\n const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));\n\n const setStep = useCallback(\n (next: number) => {\n const clamped = Math.max(0, Math.min(next, totalSteps - 1));\n if (!isControlled) setInternalStep(clamped);\n onStepChange?.(clamped);\n },\n [isControlled, onStepChange, totalSteps],\n );\n\n const ctx = useMemo(\n () => ({\n goTo: setStep,\n isFirst: step === 0,\n isLast: step === totalSteps - 1,\n next: () => setStep(step + 1),\n prev: () => setStep(step - 1),\n setStep,\n step,\n totalSteps,\n }),\n [setStep, step, totalSteps],\n );\n\n const handleOpenChange = (details: { open: boolean }) => {\n if (!details.open && !isControlled) setInternalStep(defaultStep);\n onOpenChange?.(details);\n };\n\n // The design splits this row: the leading action sits opposite the step navigation. Laying it out\n // here rather than in `DialogInner` keeps the shared action block right-aligned for every other\n // dialog, and keeps the split off every call site. A footer with no leading action passes a single\n // group, which `space-between` would park at the start, so that case is pushed back to the end. It\n // has to be a selector rather than a prop: `footerButtons` is one element rendering a fragment, so\n // the component cannot count what it will produce.\n const footerNav = footerButtons && (\n <Box\n css={{ '& > :only-child': { marginInlineStart: 'auto' } }}\n display=\"flex\"\n justifyContent=\"space-between\"\n width=\"100%\"\n >\n {footerButtons}\n </Box>\n );\n\n const stepsHeader = (\n <BitkitSteps step={step}>\n {steps.map((child, index) => (\n <BitkitSteps.Item key={index} label={child.props.label} />\n ))}\n </BitkitSteps>\n );\n\n return (\n <StepsDialogProvider value={ctx}>\n <DialogShell\n dismissible={dismissible}\n initialFocusEl={initialFocusEl}\n onExitComplete={onExitComplete}\n onOpenChange={handleOpenChange}\n open={open}\n preventScroll={preventScroll}\n scrollBehavior={scrollBehavior}\n size={size}\n state={state}\n trigger={trigger}\n variant={variant}\n >\n <Dialog.Content aria-busy={state === 'loading' || undefined} maxHeight={maxHeight} {...dataAttributes}>\n <DialogInner\n dismissible={dismissible}\n footerButtons={footerNav}\n footerContent={footerContent}\n headerExtra={stepsHeader}\n headerLabel={headerLabel}\n scrollBehavior={scrollBehavior}\n showScrollGradient={showScrollGradient}\n state={state}\n title={title}\n variant={variant}\n >\n {steps[step]}\n </DialogInner>\n </Dialog.Content>\n </DialogShell>\n </StepsDialogProvider>\n );\n};\n\nBitkitStepsDialog.displayName = 'BitkitStepsDialog';\n\nexport default withSubComponents(BitkitStepsDialog, {\n ActionTrigger: Dialog.ActionTrigger,\n Step: BitkitStepsDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AA8DA,IAAM,qBAAqB,EACzB,UACA,cAAc,GACd,cAAc,MACd,gBACA,eACA,eACA,aACA,WACA,gBACA,cACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,MAAM,UACN,OACA,SACA,SACA,GAAG,qBACyB;CAC5B,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,WAAW,eAAe,WAAW,iBAAiB;CAC5D,MAAM,QAAQ,gBAAgB,QAAQ,CAAC,CAAC,QACrC,UAA6D,MAAM,SAAS,qBAC/E;CACA,MAAM,aAAa,MAAM;CACzB,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;CAEvE,MAAM,UAAU,aACb,SAAiB;EAChB,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,aAAa,CAAC,CAAC;EAC1D,IAAI,CAAC,cAAc,gBAAgB,OAAO;EAC1C,eAAe,OAAO;CACxB,GACA;EAAC;EAAc;EAAc;CAAU,CACzC;CAEA,MAAM,MAAM,eACH;EACL,MAAM;EACN,SAAS,SAAS;EAClB,QAAQ,SAAS,aAAa;EAC9B,YAAY,QAAQ,OAAO,CAAC;EAC5B,YAAY,QAAQ,OAAO,CAAC;EAC5B;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAM;CAAU,CAC5B;CAEA,MAAM,oBAAoB,YAA+B;EACvD,IAAI,CAAC,QAAQ,QAAQ,CAAC,cAAc,gBAAgB,WAAW;EAC/D,eAAe,OAAO;CACxB;CAQA,MAAM,YAAY,iBAChB,oBAAC,KAAD;EACE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,OAAO,EAAE;EACxD,SAAQ;EACR,gBAAe;EACf,OAAM;EAEL,UAAA;CACE,CAAA;CAGP,MAAM,cACJ,oBAAC,qBAAD;EAAmB;EAChB,UAAA,MAAM,KAAK,OAAO,UACjB,oBAAC,oBAAY,MAAb,EAA8B,OAAO,MAAM,MAAM,MAAQ,GAAlC,KAAkC,CAC1D;CACU,CAAA;CAGf,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAAC,aAAD;GACe;GACG;GACA;GAChB,cAAc;GACR;GACS;GACC;GACV;GACC;GACE;GACA;GAET,UAAA,oBAAC,OAAO,SAAR;IAAgB,aAAW,UAAU,aAAa,KAAA;IAAsB;IAAW,GAAI;IACrF,UAAA,oBAAC,aAAD;KACe;KACb,eAAe;KACA;KACf,aAAa;KACA;KACG;KACI;KACb;KACA;KACE;KAER,UAAA,MAAM;IACI,CAAA;GACC,CAAA;EACL,CAAA;CACM,CAAA;AAEzB;AAEA,kBAAkB,cAAc;AAEhC,IAAA,4BAAe,kBAAkB,mBAAmB;CAClD,eAAe,OAAO;CACtB,MAAM;AACR,CAAC"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { BoxProps } from '@chakra-ui/react/box';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
export type RibbonActionProps = {
|
|
3
|
+
href?: string;
|
|
4
|
+
label: string;
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
target?: HTMLAnchorElement['target'];
|
|
7
|
+
};
|
|
4
8
|
export type RibbonLinkProps = {
|
|
5
9
|
href?: string;
|
|
6
10
|
label: string;
|
|
@@ -32,18 +32,16 @@ var BitkitRibbon = forwardRef((props, ref) => {
|
|
|
32
32
|
href: action.href,
|
|
33
33
|
isExternal: action.target === "_blank",
|
|
34
34
|
onClick: action.onClick,
|
|
35
|
-
state: action.state,
|
|
36
35
|
target: action.target,
|
|
37
36
|
children: action.label
|
|
38
37
|
}) : /* @__PURE__ */ jsx(BitkitColorButton, {
|
|
39
38
|
colorVariant,
|
|
40
39
|
onClick: action.onClick,
|
|
41
|
-
state: action.state,
|
|
42
40
|
children: action.label
|
|
43
41
|
}))]
|
|
44
42
|
}), onDismiss && /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
45
43
|
colorVariant,
|
|
46
|
-
|
|
44
|
+
flexShrink: "0",
|
|
47
45
|
size: "sm",
|
|
48
46
|
onClick: onDismiss
|
|
49
47
|
})]
|
|
@@ -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';\
|
|
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"}
|
|
@@ -7,8 +7,8 @@ export type NotificationAction = {
|
|
|
7
7
|
/**
|
|
8
8
|
* Disabled or loading state of the action button.
|
|
9
9
|
*
|
|
10
|
-
* Known gap: not every consumer can honour the full range. Alert, Toast
|
|
11
|
-
*
|
|
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
12
|
* set) render via `BitkitButton`, whose anchor variant excludes `loading` at the type level — so
|
|
13
13
|
* `'loading'` degrades to no state there. That's an implementation limit of `BitkitButton`'s
|
|
14
14
|
* anchor branch, not a rule about links: loading anchors work fine on `BitkitColorButton` (`href`
|
|
@@ -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 /**\n * Disabled or loading state of the action button.\n *\n * Known gap: not every consumer can honour the full range. Alert, Toast
|
|
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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const ribbonSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "
|
|
1
|
+
declare const ribbonSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "textBlock", {
|
|
2
2
|
colorVariant: {
|
|
3
3
|
blue: {
|
|
4
4
|
root: {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { rem } from "../themeUtils.js";
|
|
2
1
|
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
2
|
//#region lib/theme/slot-recipes/Ribbon.recipe.ts
|
|
4
3
|
var ribbonSlotRecipe = defineSlotRecipe({
|
|
@@ -6,72 +5,33 @@ var ribbonSlotRecipe = defineSlotRecipe({
|
|
|
6
5
|
slots: [
|
|
7
6
|
"root",
|
|
8
7
|
"content",
|
|
9
|
-
"textBlock"
|
|
10
|
-
"closeButton"
|
|
8
|
+
"textBlock"
|
|
11
9
|
],
|
|
12
10
|
base: {
|
|
13
11
|
root: {
|
|
14
|
-
alignItems:
|
|
15
|
-
base: "flex-start",
|
|
16
|
-
tablet: "center"
|
|
17
|
-
},
|
|
12
|
+
alignItems: "center",
|
|
18
13
|
borderBlockStyle: "solid",
|
|
19
14
|
borderBlockWidth: "1",
|
|
20
15
|
display: "flex",
|
|
21
|
-
gap: {
|
|
22
|
-
base: "12",
|
|
23
|
-
tablet: 0
|
|
24
|
-
},
|
|
25
16
|
paddingBlock: "12",
|
|
26
|
-
paddingInline:
|
|
27
|
-
base: "16",
|
|
28
|
-
tablet: "24"
|
|
29
|
-
},
|
|
17
|
+
paddingInline: "24",
|
|
30
18
|
width: "full"
|
|
31
19
|
},
|
|
32
20
|
content: {
|
|
33
|
-
alignItems:
|
|
34
|
-
base: "flex-start",
|
|
35
|
-
tablet: "center"
|
|
36
|
-
},
|
|
21
|
+
alignItems: "center",
|
|
37
22
|
display: "flex",
|
|
38
23
|
flex: "1 0 0",
|
|
39
|
-
|
|
40
|
-
base: "column",
|
|
41
|
-
tablet: "row"
|
|
42
|
-
},
|
|
43
|
-
gap: {
|
|
44
|
-
base: "12",
|
|
45
|
-
tablet: "16"
|
|
46
|
-
},
|
|
24
|
+
gap: "16",
|
|
47
25
|
justifyContent: "center",
|
|
48
26
|
minHeight: "32",
|
|
49
27
|
minWidth: 0
|
|
50
28
|
},
|
|
51
29
|
textBlock: {
|
|
52
|
-
alignItems:
|
|
53
|
-
base: "flex-start",
|
|
54
|
-
tablet: "baseline"
|
|
55
|
-
},
|
|
30
|
+
alignItems: "baseline",
|
|
56
31
|
display: "flex",
|
|
57
|
-
flexDirection: {
|
|
58
|
-
base: "column",
|
|
59
|
-
tablet: "row"
|
|
60
|
-
},
|
|
61
32
|
gap: "4",
|
|
62
33
|
minWidth: 0,
|
|
63
|
-
textStyle: "body/md/regular"
|
|
64
|
-
width: {
|
|
65
|
-
base: "full",
|
|
66
|
-
tablet: "auto"
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
closeButton: {
|
|
70
|
-
flexShrink: 0,
|
|
71
|
-
marginInlineEnd: {
|
|
72
|
-
base: rem(-4),
|
|
73
|
-
tablet: 0
|
|
74
|
-
}
|
|
34
|
+
textStyle: "body/md/regular"
|
|
75
35
|
}
|
|
76
36
|
},
|
|
77
37
|
variants: { colorVariant: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ribbon.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Ribbon.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\
|
|
1
|
+
{"version":3,"file":"Ribbon.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Ribbon.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst ribbonSlotRecipe = defineSlotRecipe({\n className: 'ribbon',\n slots: ['root', 'content', 'textBlock'],\n base: {\n root: {\n alignItems: 'center',\n borderBlockStyle: 'solid',\n borderBlockWidth: '1',\n display: 'flex',\n paddingBlock: '12',\n paddingInline: '24',\n width: 'full',\n },\n content: {\n alignItems: 'center',\n display: 'flex',\n flex: '1 0 0',\n gap: '16',\n justifyContent: 'center',\n minHeight: '32',\n minWidth: 0,\n },\n textBlock: {\n alignItems: 'baseline',\n display: 'flex',\n gap: '4',\n minWidth: 0,\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n colorVariant: {\n blue: { root: { background: 'color/blue/subtle', borderColor: 'color/blue/muted', color: 'color/blue/strong' } },\n green: {\n root: { background: 'color/green/subtle', borderColor: 'color/green/muted', color: 'color/green/strong' },\n },\n yellow: {\n root: { background: 'color/yellow/minimal', borderColor: 'color/yellow/muted', color: 'color/yellow/strong' },\n },\n red: { root: { background: 'color/red/subtle', borderColor: 'color/red/muted', color: 'color/red/strong' } },\n purple: {\n root: { background: 'color/purple/subtle', borderColor: 'color/purple/muted', color: 'color/purple/strong' },\n },\n },\n },\n defaultVariants: {\n colorVariant: 'blue',\n },\n});\n\nexport default ribbonSlotRecipe;\n"],"mappings":";;AAEA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO;EAAC;EAAQ;EAAW;CAAW;CACtC,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,kBAAkB;GAClB,kBAAkB;GAClB,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;EACT;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,gBAAgB;GAChB,WAAW;GACX,UAAU;EACZ;EACA,WAAW;GACT,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,WAAW;EACb;CACF;CACA,UAAU,EACR,cAAc;EACZ,MAAM,EAAE,MAAM;GAAE,YAAY;GAAqB,aAAa;GAAoB,OAAO;EAAoB,EAAE;EAC/G,OAAO,EACL,MAAM;GAAE,YAAY;GAAsB,aAAa;GAAqB,OAAO;EAAqB,EAC1G;EACA,QAAQ,EACN,MAAM;GAAE,YAAY;GAAwB,aAAa;GAAsB,OAAO;EAAsB,EAC9G;EACA,KAAK,EAAE,MAAM;GAAE,YAAY;GAAoB,aAAa;GAAmB,OAAO;EAAmB,EAAE;EAC3G,QAAQ,EACN,MAAM;GAAE,YAAY;GAAuB,aAAa;GAAsB,OAAO;EAAsB,EAC7G;CACF,EACF;CACA,iBAAiB,EACf,cAAc,OAChB;AACF,CAAC"}
|
|
@@ -1655,7 +1655,7 @@ declare const slotRecipes: {
|
|
|
1655
1655
|
};
|
|
1656
1656
|
};
|
|
1657
1657
|
}>;
|
|
1658
|
-
ribbon: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "
|
|
1658
|
+
ribbon: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "textBlock", {
|
|
1659
1659
|
colorVariant: {
|
|
1660
1660
|
blue: {
|
|
1661
1661
|
root: {
|