@bitrise/bitkit-v2 0.3.232 → 0.3.234
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/BitkitCard/BitkitCard.d.ts +6 -2
- package/dist/components/BitkitCard/BitkitCard.js +4 -5
- package/dist/components/BitkitCard/BitkitCard.js.map +1 -1
- package/dist/components/BitkitDialog/BitkitDialog.d.ts +1 -0
- package/dist/components/BitkitDialog/BitkitDialog.js +1 -0
- package/dist/components/BitkitDialog/BitkitDialog.js.map +1 -1
- package/dist/components/BitkitDialog/BitkitDialogContent.d.ts +2 -1
- package/dist/components/BitkitDialog/BitkitDialogContent.js +2 -1
- package/dist/components/BitkitDialog/BitkitDialogContent.js.map +1 -1
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.d.ts +1 -0
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js +7 -4
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js.map +1 -1
- package/dist/theme/slot-recipes/Card.recipe.d.ts +12 -0
- package/dist/theme/slot-recipes/Card.recipe.js +25 -9
- package/dist/theme/slot-recipes/Card.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Dialog.recipe.js +0 -4
- package/dist/theme/slot-recipes/Dialog.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js +7 -0
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +12 -0
- package/package.json +1 -1
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { CardRootProps } from '@chakra-ui/react/card';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export interface BitkitCardProps extends CardRootProps {
|
|
4
|
+
footer?: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
declare const BitkitCard: import('react').ForwardRefExoticComponent<BitkitCardProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
3
7
|
export default BitkitCard;
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { forwardRef } from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Card } from "@chakra-ui/react/card";
|
|
4
4
|
//#region lib/components/BitkitCard/BitkitCard.tsx
|
|
5
5
|
var BitkitCard = forwardRef((props, ref) => {
|
|
6
|
-
const { children, ...rest } = props;
|
|
7
|
-
return /* @__PURE__ */
|
|
8
|
-
asChild: true,
|
|
6
|
+
const { children, footer, ...rest } = props;
|
|
7
|
+
return /* @__PURE__ */ jsxs(Card.Root, {
|
|
9
8
|
ref,
|
|
10
9
|
...rest,
|
|
11
|
-
children: /* @__PURE__ */ jsx(Card.Body, { children })
|
|
10
|
+
children: [/* @__PURE__ */ jsx(Card.Body, { children }), !!footer && /* @__PURE__ */ jsx(Card.Footer, { children: footer })]
|
|
12
11
|
});
|
|
13
12
|
});
|
|
14
13
|
BitkitCard.displayName = "BitkitCard";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCard.js","names":[],"sources":["../../../lib/components/BitkitCard/BitkitCard.tsx"],"sourcesContent":["import { Card, type CardRootProps } from '@chakra-ui/react/card';\nimport { forwardRef } from 'react';\n\nconst BitkitCard = forwardRef<HTMLDivElement,
|
|
1
|
+
{"version":3,"file":"BitkitCard.js","names":[],"sources":["../../../lib/components/BitkitCard/BitkitCard.tsx"],"sourcesContent":["import { Card, type CardRootProps } from '@chakra-ui/react/card';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport interface BitkitCardProps extends CardRootProps {\n footer?: ReactNode;\n}\n\nconst BitkitCard = forwardRef<HTMLDivElement, BitkitCardProps>((props, ref) => {\n const { children, footer, ...rest } = props;\n\n return (\n <Card.Root ref={ref} {...rest}>\n <Card.Body>{children}</Card.Body>\n {!!footer && <Card.Footer>{footer}</Card.Footer>}\n </Card.Root>\n );\n});\n\nBitkitCard.displayName = 'BitkitCard';\n\nexport default BitkitCard;\n"],"mappings":";;;;AAOA,IAAM,aAAa,YAA6C,OAAO,QAAQ;CAC7E,MAAM,EAAE,UAAU,QAAQ,GAAG,SAAS;CAEtC,OACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,GAAI;YAAzB,CACE,oBAAC,KAAK,MAAN,EAAY,SAAoB,CAAA,GAC/B,CAAC,CAAC,UAAU,oBAAC,KAAK,QAAN,EAAA,UAAc,OAAoB,CAAA,CACtC;;AAEf,CAAC;AAED,WAAW,cAAc"}
|
|
@@ -27,6 +27,7 @@ declare const _default: {
|
|
|
27
27
|
ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
28
28
|
Body: ({ children, ...rest }: import('./BitkitDialogBody').BitkitDialogBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
29
|
Buttons: import('react').ForwardRefExoticComponent<import('@chakra-ui/react').BoxProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
30
|
+
Content: ({ asChild, children, closable, headerLabel, maxHeight, scrollBehavior: scrollBehaviorProp, showScrollGradient, step, stepHeader, title, variant, }: import('./BitkitDialogContent').BitkitDialogContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
31
|
Footer: import('react').ForwardRefExoticComponent<Dialog.FooterProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
31
32
|
Header: {
|
|
32
33
|
({ children }: BitkitDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -47,6 +47,7 @@ var BitkitDialog_default = withSubComponents(BitkitDialog, {
|
|
|
47
47
|
ActionTrigger: Dialog.ActionTrigger,
|
|
48
48
|
Body: BitkitDialogBody,
|
|
49
49
|
Buttons: BitkitDialogButtons,
|
|
50
|
+
Content: BitkitDialogContent,
|
|
50
51
|
Footer: Dialog.Footer,
|
|
51
52
|
Header: BitkitDialogHeader,
|
|
52
53
|
Step: BitkitDialogStep
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Children, isValidElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitDialogBody from './BitkitDialogBody';\nimport BitkitDialogButtons from './BitkitDialogButtons';\nimport BitkitDialogContent from './BitkitDialogContent';\nimport BitkitDialogHeader, { type BitkitDialogHeaderProps } from './BitkitDialogHeader';\nimport BitkitDialogRoot from './BitkitDialogRoot';\nimport BitkitDialogStep from './BitkitDialogStep';\n\nexport interface BitkitDialogProps {\n children?: ReactNode;\n closable?: boolean;\n headerLabel?: string;\n maxHeight?: string;\n onExitComplete?: () => void;\n onOpenChange?: (details: { open: boolean }) => void;\n open?: boolean;\n preventScroll?: boolean;\n scrollBehavior?: 'inside' | 'outside';\n showScrollGradient?: boolean;\n size?: 'sm' | 'md' | 'lg' | 'full';\n step?: number;\n title: ReactNode;\n trigger?: ReactNode;\n variant?: 'overflowContent';\n}\n\nconst BitkitDialog = ({\n children,\n closable = true,\n headerLabel,\n maxHeight,\n onExitComplete,\n onOpenChange,\n open,\n preventScroll,\n scrollBehavior: scrollBehaviorProp,\n showScrollGradient,\n size,\n step = 0,\n title,\n trigger,\n variant,\n}: BitkitDialogProps) => {\n const scrollBehavior = variant === 'overflowContent' ? 'inside' : scrollBehaviorProp;\n\n const childrenArray = Children.toArray(children);\n const headerChild = childrenArray.find((child) => isValidElement(child) && child.type === BitkitDialogHeader);\n const bodyChildren = childrenArray.filter((child) => !(isValidElement(child) && child.type === BitkitDialogHeader));\n const stepHeader = isValidElement(headerChild) ? (headerChild.props as BitkitDialogHeaderProps).children : undefined;\n\n return (\n <BitkitDialogRoot\n closeOnEscape={closable}\n onExitComplete={onExitComplete}\n onOpenChange={onOpenChange}\n open={open}\n preventScroll={preventScroll}\n scrollBehavior={scrollBehavior}\n size={size}\n variant={variant}\n >\n {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}\n <Portal>\n <Dialog.Backdrop />\n <Dialog.Positioner>\n <BitkitDialogContent\n closable={closable}\n headerLabel={headerLabel}\n maxHeight={maxHeight}\n scrollBehavior={scrollBehavior}\n showScrollGradient={showScrollGradient}\n step={step}\n stepHeader={stepHeader}\n title={title}\n variant={variant}\n >\n {bodyChildren}\n </BitkitDialogContent>\n </Dialog.Positioner>\n </Portal>\n </BitkitDialogRoot>\n );\n};\n\nBitkitDialog.displayName = 'BitkitDialog';\n\nexport default withSubComponents(BitkitDialog, {\n ActionTrigger: Dialog.ActionTrigger,\n Body: BitkitDialogBody,\n Buttons: BitkitDialogButtons,\n Footer: Dialog.Footer,\n Header: BitkitDialogHeader,\n Step: BitkitDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;AA8BA,IAAM,gBAAgB,EACpB,UACA,WAAW,MACX,aACA,WACA,gBACA,cACA,MACA,eACA,gBAAgB,oBAChB,oBACA,MACA,OAAO,GACP,OACA,SACA,cACuB;CACvB,MAAM,iBAAiB,YAAY,oBAAoB,WAAW;CAElE,MAAM,gBAAgB,SAAS,QAAQ,QAAQ;CAC/C,MAAM,cAAc,cAAc,MAAM,UAAU,eAAe,KAAK,KAAK,MAAM,SAAS,kBAAkB;CAC5G,MAAM,eAAe,cAAc,QAAQ,UAAU,EAAE,eAAe,KAAK,KAAK,MAAM,SAAS,mBAAmB;CAClH,MAAM,aAAa,eAAe,WAAW,IAAK,YAAY,MAAkC,WAAW,KAAA;CAE3G,OACE,qBAAC,kBAAD;EACE,eAAe;EACC;EACF;EACR;EACS;EACC;EACV;EACG;YARX,CAUG,WAAW,oBAAC,OAAO,SAAR;GAAgB,SAAA;aAAS;EAAwB,CAAA,GAC7D,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,CAAkB,CAAA,GAClB,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,qBAAD;GACY;GACG;GACF;GACK;GACI;GACd;GACM;GACL;GACE;aAER;EACkB,CAAA,EACJ,CAAA,CACb,EAAA,CAAA,CACQ;;AAEtB;AAEA,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc;CAC7C,eAAe,OAAO;CACtB,MAAM;CACN,SAAS;CACT,QAAQ,OAAO;CACf,QAAQ;CACR,MAAM;AACR,CAAC"}
|
|
1
|
+
{"version":3,"file":"BitkitDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Children, isValidElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitDialogBody from './BitkitDialogBody';\nimport BitkitDialogButtons from './BitkitDialogButtons';\nimport BitkitDialogContent from './BitkitDialogContent';\nimport BitkitDialogHeader, { type BitkitDialogHeaderProps } from './BitkitDialogHeader';\nimport BitkitDialogRoot from './BitkitDialogRoot';\nimport BitkitDialogStep from './BitkitDialogStep';\n\nexport interface BitkitDialogProps {\n children?: ReactNode;\n closable?: boolean;\n headerLabel?: string;\n maxHeight?: string;\n onExitComplete?: () => void;\n onOpenChange?: (details: { open: boolean }) => void;\n open?: boolean;\n preventScroll?: boolean;\n scrollBehavior?: 'inside' | 'outside';\n showScrollGradient?: boolean;\n size?: 'sm' | 'md' | 'lg' | 'full';\n step?: number;\n title: ReactNode;\n trigger?: ReactNode;\n variant?: 'overflowContent';\n}\n\nconst BitkitDialog = ({\n children,\n closable = true,\n headerLabel,\n maxHeight,\n onExitComplete,\n onOpenChange,\n open,\n preventScroll,\n scrollBehavior: scrollBehaviorProp,\n showScrollGradient,\n size,\n step = 0,\n title,\n trigger,\n variant,\n}: BitkitDialogProps) => {\n const scrollBehavior = variant === 'overflowContent' ? 'inside' : scrollBehaviorProp;\n\n const childrenArray = Children.toArray(children);\n const headerChild = childrenArray.find((child) => isValidElement(child) && child.type === BitkitDialogHeader);\n const bodyChildren = childrenArray.filter((child) => !(isValidElement(child) && child.type === BitkitDialogHeader));\n const stepHeader = isValidElement(headerChild) ? (headerChild.props as BitkitDialogHeaderProps).children : undefined;\n\n return (\n <BitkitDialogRoot\n closeOnEscape={closable}\n onExitComplete={onExitComplete}\n onOpenChange={onOpenChange}\n open={open}\n preventScroll={preventScroll}\n scrollBehavior={scrollBehavior}\n size={size}\n variant={variant}\n >\n {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}\n <Portal>\n <Dialog.Backdrop />\n <Dialog.Positioner>\n <BitkitDialogContent\n closable={closable}\n headerLabel={headerLabel}\n maxHeight={maxHeight}\n scrollBehavior={scrollBehavior}\n showScrollGradient={showScrollGradient}\n step={step}\n stepHeader={stepHeader}\n title={title}\n variant={variant}\n >\n {bodyChildren}\n </BitkitDialogContent>\n </Dialog.Positioner>\n </Portal>\n </BitkitDialogRoot>\n );\n};\n\nBitkitDialog.displayName = 'BitkitDialog';\n\nexport default withSubComponents(BitkitDialog, {\n ActionTrigger: Dialog.ActionTrigger,\n Body: BitkitDialogBody,\n Buttons: BitkitDialogButtons,\n Content: BitkitDialogContent,\n Footer: Dialog.Footer,\n Header: BitkitDialogHeader,\n Step: BitkitDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;AA8BA,IAAM,gBAAgB,EACpB,UACA,WAAW,MACX,aACA,WACA,gBACA,cACA,MACA,eACA,gBAAgB,oBAChB,oBACA,MACA,OAAO,GACP,OACA,SACA,cACuB;CACvB,MAAM,iBAAiB,YAAY,oBAAoB,WAAW;CAElE,MAAM,gBAAgB,SAAS,QAAQ,QAAQ;CAC/C,MAAM,cAAc,cAAc,MAAM,UAAU,eAAe,KAAK,KAAK,MAAM,SAAS,kBAAkB;CAC5G,MAAM,eAAe,cAAc,QAAQ,UAAU,EAAE,eAAe,KAAK,KAAK,MAAM,SAAS,mBAAmB;CAClH,MAAM,aAAa,eAAe,WAAW,IAAK,YAAY,MAAkC,WAAW,KAAA;CAE3G,OACE,qBAAC,kBAAD;EACE,eAAe;EACC;EACF;EACR;EACS;EACC;EACV;EACG;YARX,CAUG,WAAW,oBAAC,OAAO,SAAR;GAAgB,SAAA;aAAS;EAAwB,CAAA,GAC7D,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,CAAkB,CAAA,GAClB,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,qBAAD;GACY;GACG;GACF;GACK;GACI;GACd;GACM;GACL;GACE;aAER;EACkB,CAAA,EACJ,CAAA,CACb,EAAA,CAAA,CACQ;;AAEtB;AAEA,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc;CAC7C,eAAe,OAAO;CACtB,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ,OAAO;CACf,QAAQ;CACR,MAAM;AACR,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
export interface BitkitDialogContentProps {
|
|
3
|
+
asChild?: boolean;
|
|
3
4
|
children?: ReactNode;
|
|
4
5
|
closable?: boolean;
|
|
5
6
|
headerLabel?: string;
|
|
@@ -11,5 +12,5 @@ export interface BitkitDialogContentProps {
|
|
|
11
12
|
title: ReactNode;
|
|
12
13
|
variant?: 'overflowContent';
|
|
13
14
|
}
|
|
14
|
-
declare const BitkitDialogContent: ({ children, closable, headerLabel, maxHeight, scrollBehavior: scrollBehaviorProp, showScrollGradient, step, stepHeader, title, variant, }: BitkitDialogContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare const BitkitDialogContent: ({ asChild, children, closable, headerLabel, maxHeight, scrollBehavior: scrollBehaviorProp, showScrollGradient, step, stepHeader, title, variant, }: BitkitDialogContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
export default BitkitDialogContent;
|
|
@@ -6,10 +6,11 @@ import { chakra } from "@chakra-ui/react/styled-system";
|
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { Dialog, useDialogStyles } from "@chakra-ui/react/dialog";
|
|
8
8
|
//#region lib/components/BitkitDialog/BitkitDialogContent.tsx
|
|
9
|
-
var BitkitDialogContent = ({ children, closable = true, headerLabel, maxHeight, scrollBehavior: scrollBehaviorProp = "outside", showScrollGradient = true, step = 0, stepHeader, title, variant }) => {
|
|
9
|
+
var BitkitDialogContent = ({ asChild, children, closable = true, headerLabel, maxHeight, scrollBehavior: scrollBehaviorProp = "outside", showScrollGradient = true, step = 0, stepHeader, title, variant }) => {
|
|
10
10
|
const scrollBehavior = variant === "overflowContent" ? "inside" : scrollBehaviorProp;
|
|
11
11
|
const styles = useDialogStyles();
|
|
12
12
|
return /* @__PURE__ */ jsx(Dialog.Content, {
|
|
13
|
+
asChild,
|
|
13
14
|
maxHeight,
|
|
14
15
|
children: /* @__PURE__ */ jsx(BitkitDialogStepProvider, {
|
|
15
16
|
value: { step },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitDialogContent.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogContent.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport { DialogBodyContext } from './BitkitDialogBody';\nimport { BitkitDialogStepProvider } from './BitkitDialogStepContext';\n\nexport interface BitkitDialogContentProps {\n children?: ReactNode;\n closable?: boolean;\n headerLabel?: string;\n maxHeight?: string;\n scrollBehavior?: 'inside' | 'outside';\n showScrollGradient?: boolean;\n step?: number;\n stepHeader?: ReactNode;\n title: ReactNode;\n variant?: 'overflowContent';\n}\n\nconst BitkitDialogContent = ({\n children,\n closable = true,\n headerLabel,\n maxHeight,\n scrollBehavior: scrollBehaviorProp = 'outside',\n showScrollGradient = true,\n step = 0,\n stepHeader,\n title,\n variant,\n}: BitkitDialogContentProps) => {\n const scrollBehavior = variant === 'overflowContent' ? 'inside' : scrollBehaviorProp;\n const styles = useDialogStyles();\n\n return (\n <Dialog.Content maxHeight={maxHeight}>\n <BitkitDialogStepProvider value={{ step }}>\n <DialogBodyContext.Provider value={{ scrollBehavior, showScrollGradient }}>\n <Dialog.Header>\n <Box display=\"flex\" flexDirection=\"column\" gap=\"4\">\n {headerLabel && <chakra.p css={styles.label}>{headerLabel}</chakra.p>}\n <Dialog.Title>{title}</Dialog.Title>\n </Box>\n {!!stepHeader && <Box css={styles.stepHeader}>{stepHeader}</Box>}\n <Dialog.CloseTrigger asChild>\n <BitkitCloseButton disabled={!closable} size={variant === 'overflowContent' ? 'xs' : 'md'} />\n </Dialog.CloseTrigger>\n </Dialog.Header>\n {children}\n </DialogBodyContext.Provider>\n </BitkitDialogStepProvider>\n </Dialog.Content>\n );\n};\n\nexport default BitkitDialogContent;\n"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"BitkitDialogContent.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitDialogContent.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport { DialogBodyContext } from './BitkitDialogBody';\nimport { BitkitDialogStepProvider } from './BitkitDialogStepContext';\n\nexport interface BitkitDialogContentProps {\n asChild?: boolean;\n children?: ReactNode;\n closable?: boolean;\n headerLabel?: string;\n maxHeight?: string;\n scrollBehavior?: 'inside' | 'outside';\n showScrollGradient?: boolean;\n step?: number;\n stepHeader?: ReactNode;\n title: ReactNode;\n variant?: 'overflowContent';\n}\n\nconst BitkitDialogContent = ({\n asChild,\n children,\n closable = true,\n headerLabel,\n maxHeight,\n scrollBehavior: scrollBehaviorProp = 'outside',\n showScrollGradient = true,\n step = 0,\n stepHeader,\n title,\n variant,\n}: BitkitDialogContentProps) => {\n const scrollBehavior = variant === 'overflowContent' ? 'inside' : scrollBehaviorProp;\n const styles = useDialogStyles();\n\n return (\n <Dialog.Content asChild={asChild} maxHeight={maxHeight}>\n <BitkitDialogStepProvider value={{ step }}>\n <DialogBodyContext.Provider value={{ scrollBehavior, showScrollGradient }}>\n <Dialog.Header>\n <Box display=\"flex\" flexDirection=\"column\" gap=\"4\">\n {headerLabel && <chakra.p css={styles.label}>{headerLabel}</chakra.p>}\n <Dialog.Title>{title}</Dialog.Title>\n </Box>\n {!!stepHeader && <Box css={styles.stepHeader}>{stepHeader}</Box>}\n <Dialog.CloseTrigger asChild>\n <BitkitCloseButton disabled={!closable} size={variant === 'overflowContent' ? 'xs' : 'md'} />\n </Dialog.CloseTrigger>\n </Dialog.Header>\n {children}\n </DialogBodyContext.Provider>\n </BitkitDialogStepProvider>\n </Dialog.Content>\n );\n};\n\nexport default BitkitDialogContent;\n"],"mappings":";;;;;;;;AAuBA,IAAM,uBAAuB,EAC3B,SACA,UACA,WAAW,MACX,aACA,WACA,gBAAgB,qBAAqB,WACrC,qBAAqB,MACrB,OAAO,GACP,YACA,OACA,cAC8B;CAC9B,MAAM,iBAAiB,YAAY,oBAAoB,WAAW;CAClE,MAAM,SAAS,gBAAgB;CAE/B,OACE,oBAAC,OAAO,SAAR;EAAyB;EAAoB;YAC3C,oBAAC,0BAAD;GAA0B,OAAO,EAAE,KAAK;aACtC,qBAAC,kBAAkB,UAAnB;IAA4B,OAAO;KAAE;KAAgB;IAAmB;cAAxE,CACE,qBAAC,OAAO,QAAR,EAAA,UAAA;KACE,qBAAC,KAAD;MAAK,SAAQ;MAAO,eAAc;MAAS,KAAI;gBAA/C,CACG,eAAe,oBAAC,OAAO,GAAR;OAAU,KAAK,OAAO;iBAAQ;MAAsB,CAAA,GACpE,oBAAC,OAAO,OAAR,EAAA,UAAe,MAAoB,CAAA,CAChC;;KACJ,CAAC,CAAC,cAAc,oBAAC,KAAD;MAAK,KAAK,OAAO;gBAAa;KAAgB,CAAA;KAC/D,oBAAC,OAAO,cAAR;MAAqB,SAAA;gBACnB,oBAAC,mBAAD;OAAmB,UAAU,CAAC;OAAU,MAAM,YAAY,oBAAoB,OAAO;MAAO,CAAA;KACzE,CAAA;IACR,EAAA,CAAA,GACd,QACyB;;EACJ,CAAA;CACZ,CAAA;AAEpB"}
|
|
@@ -14,6 +14,7 @@ type ControlledProps = {
|
|
|
14
14
|
};
|
|
15
15
|
export type BitkitExpandableCardProps = Omit<CollapsibleRootProps, 'defaultOpen' | 'onOpenChange' | 'open'> & {
|
|
16
16
|
children: ReactNode;
|
|
17
|
+
footer?: ReactNode;
|
|
17
18
|
icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;
|
|
18
19
|
secdText?: ReactNode;
|
|
19
20
|
size: 'md' | 'lg';
|
|
@@ -8,7 +8,7 @@ import { Card } from "@chakra-ui/react/card";
|
|
|
8
8
|
import { Collapsible } from "@chakra-ui/react/collapsible";
|
|
9
9
|
//#region lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx
|
|
10
10
|
var BitkitExpandableCard = (props) => {
|
|
11
|
-
const { children, defaultExpanded, expanded, icon, onChange, secdText, size = "lg", suffix, title, ...rest } = props;
|
|
11
|
+
const { children, defaultExpanded, expanded, footer, icon, onChange, secdText, size = "lg", suffix, title, ...rest } = props;
|
|
12
12
|
const styles = useSlotRecipe({ key: "expandableCard" })({ size });
|
|
13
13
|
const handleOpenChange = onChange ? (details) => onChange(details.open) : void 0;
|
|
14
14
|
let renderedIcon = null;
|
|
@@ -50,12 +50,15 @@ var BitkitExpandableCard = (props) => {
|
|
|
50
50
|
children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
|
|
51
51
|
})]
|
|
52
52
|
})]
|
|
53
|
-
}), /* @__PURE__ */
|
|
53
|
+
}), /* @__PURE__ */ jsxs(Collapsible.Content, {
|
|
54
54
|
css: styles.collapsible,
|
|
55
|
-
children: /* @__PURE__ */ jsx(Box, {
|
|
55
|
+
children: [/* @__PURE__ */ jsx(Box, {
|
|
56
56
|
css: styles.body,
|
|
57
57
|
children
|
|
58
|
-
})
|
|
58
|
+
}), !!footer && /* @__PURE__ */ jsx(Box, {
|
|
59
|
+
css: styles.footer,
|
|
60
|
+
children: footer
|
|
61
|
+
})]
|
|
59
62
|
})]
|
|
60
63
|
})
|
|
61
64
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitExpandableCard.js","names":[],"sources":["../../../lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { type BitkitAvatarProps } from '../BitkitAvatar/BitkitAvatar';\n\ntype UncontrolledProps = {\n defaultExpanded?: boolean;\n expanded?: never;\n onChange?: never;\n};\n\ntype ControlledProps = {\n defaultExpanded?: never;\n expanded: boolean;\n onChange: (expanded: boolean) => void;\n};\n\nexport type BitkitExpandableCardProps = Omit<CollapsibleRootProps, 'defaultOpen' | 'onOpenChange' | 'open'> & {\n children: ReactNode;\n icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n secdText?: ReactNode;\n size: 'md' | 'lg';\n suffix?: ReactNode;\n title: ReactNode;\n} & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = (props: BitkitExpandableCardProps) => {\n const {
|
|
1
|
+
{"version":3,"file":"BitkitExpandableCard.js","names":[],"sources":["../../../lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { type BitkitAvatarProps } from '../BitkitAvatar/BitkitAvatar';\n\ntype UncontrolledProps = {\n defaultExpanded?: boolean;\n expanded?: never;\n onChange?: never;\n};\n\ntype ControlledProps = {\n defaultExpanded?: never;\n expanded: boolean;\n onChange: (expanded: boolean) => void;\n};\n\nexport type BitkitExpandableCardProps = Omit<CollapsibleRootProps, 'defaultOpen' | 'onOpenChange' | 'open'> & {\n children: ReactNode;\n footer?: ReactNode;\n icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n secdText?: ReactNode;\n size: 'md' | 'lg';\n suffix?: ReactNode;\n title: ReactNode;\n} & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = (props: BitkitExpandableCardProps) => {\n const {\n children,\n defaultExpanded,\n expanded,\n footer,\n icon,\n onChange,\n secdText,\n size = 'lg',\n suffix,\n title,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'expandableCard' });\n const styles = recipe({ size });\n\n const handleOpenChange = onChange ? (details: { open: boolean }) => onChange(details.open) : undefined;\n\n let renderedIcon: ReactNode = null;\n if (isValidElement<BitkitAvatarProps>(icon)) {\n renderedIcon = cloneElement(icon, { size: '24' });\n } else if (icon) {\n const Icon = icon;\n renderedIcon = <Icon size=\"24\" />;\n }\n\n return (\n <Card.Root css={styles.root}>\n <Collapsible.Root defaultOpen={defaultExpanded} open={expanded} onOpenChange={handleOpenChange} {...rest}>\n <Collapsible.Trigger css={styles.header}>\n <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n {!!renderedIcon && <Box css={styles.icon}>{renderedIcon}</Box>}\n <Box display=\"flex\" alignItems=\"flex-start\" flexDirection=\"column\">\n {title}\n {!!secdText && <Text css={styles.secdText}>{secdText}</Text>}\n </Box>\n </Box>\n <Box display=\"flex\" alignItems=\"center\">\n {!!suffix && <Text css={styles.suffix}>{suffix}</Text>}\n <Collapsible.Indicator asChild>\n <AssetSelectChevron />\n </Collapsible.Indicator>\n </Box>\n </Collapsible.Trigger>\n <Collapsible.Content css={styles.collapsible}>\n <Box css={styles.body}>{children}</Box>\n {!!footer && <Box css={styles.footer}>{footer}</Box>}\n </Collapsible.Content>\n </Collapsible.Root>\n </Card.Root>\n );\n};\n\nBitkitExpandableCard.displayName = 'BitkitExpandableCard';\n\nexport default BitkitExpandableCard;\n"],"mappings":";;;;;;;;;AAiCA,IAAM,wBAAwB,UAAqC;CACjE,MAAM,EACJ,UACA,iBACA,UACA,QACA,MACA,UACA,UACA,OAAO,MACP,QACA,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,EAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,mBAAmB,YAAY,YAA+B,SAAS,QAAQ,IAAI,IAAI,KAAA;CAE7F,IAAI,eAA0B;CAC9B,IAAI,eAAkC,IAAI,GACxC,eAAe,aAAa,MAAM,EAAE,MAAM,KAAK,CAAC;MAC3C,IAAI,MAET,eAAe,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;CAGlC,OACE,oBAAC,KAAK,MAAN;EAAW,KAAK,OAAO;YACrB,qBAAC,YAAY,MAAb;GAAkB,aAAa;GAAiB,MAAM;GAAU,cAAc;GAAkB,GAAI;aAApG,CACE,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;cAAjC,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;eAA5C,CACG,CAAC,CAAC,gBAAgB,oBAAC,KAAD;MAAK,KAAK,OAAO;gBAAO;KAAkB,CAAA,GAC7D,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAa,eAAc;gBAA1D,CACG,OACA,CAAC,CAAC,YAAY,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAW;MAAe,CAAA,CACxD;OACF;QACL,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;eAA/B,CACG,CAAC,CAAC,UAAU,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAS;KAAa,CAAA,GACrD,oBAAC,YAAY,WAAb;MAAuB,SAAA;gBACrB,oBAAC,oBAAD,CAAqB,CAAA;KACA,CAAA,CACpB;MACc;OACrB,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;cAAjC,CACE,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAO;IAAc,CAAA,GACrC,CAAC,CAAC,UAAU,oBAAC,KAAD;KAAK,KAAK,OAAO;eAAS;IAAY,CAAA,CAChC;KACL;;CACT,CAAA;AAEf;AAEA,qBAAqB,cAAc"}
|
|
@@ -17,17 +17,29 @@ declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"b
|
|
|
17
17
|
body: {
|
|
18
18
|
padding: "16";
|
|
19
19
|
};
|
|
20
|
+
footer: {
|
|
21
|
+
paddingBlock: "8";
|
|
22
|
+
paddingInline: "16";
|
|
23
|
+
};
|
|
20
24
|
};
|
|
21
25
|
md: {
|
|
22
26
|
body: {
|
|
23
27
|
paddingInline: "24";
|
|
24
28
|
paddingBlock: "16";
|
|
25
29
|
};
|
|
30
|
+
footer: {
|
|
31
|
+
paddingBlock: "8";
|
|
32
|
+
paddingInline: "24";
|
|
33
|
+
};
|
|
26
34
|
};
|
|
27
35
|
lg: {
|
|
28
36
|
body: {
|
|
29
37
|
padding: "24";
|
|
30
38
|
};
|
|
39
|
+
footer: {
|
|
40
|
+
paddingBlock: "12";
|
|
41
|
+
paddingInline: "24";
|
|
42
|
+
};
|
|
31
43
|
};
|
|
32
44
|
};
|
|
33
45
|
}>;
|
|
@@ -12,9 +12,7 @@ var cardSlotRecipe = defineSlotRecipe({
|
|
|
12
12
|
},
|
|
13
13
|
footer: {
|
|
14
14
|
borderBlockStart: "1px solid",
|
|
15
|
-
borderColor: "border/minimal"
|
|
16
|
-
paddingBlock: "8",
|
|
17
|
-
paddingInline: "24"
|
|
15
|
+
borderColor: "border/minimal"
|
|
18
16
|
}
|
|
19
17
|
},
|
|
20
18
|
variants: {
|
|
@@ -26,12 +24,30 @@ var cardSlotRecipe = defineSlotRecipe({
|
|
|
26
24
|
false: { root: { borderColor: "border/regular" } }
|
|
27
25
|
},
|
|
28
26
|
paddingSize: {
|
|
29
|
-
sm: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
sm: {
|
|
28
|
+
body: { padding: "16" },
|
|
29
|
+
footer: {
|
|
30
|
+
paddingBlock: "8",
|
|
31
|
+
paddingInline: "16"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
md: {
|
|
35
|
+
body: {
|
|
36
|
+
paddingInline: "24",
|
|
37
|
+
paddingBlock: "16"
|
|
38
|
+
},
|
|
39
|
+
footer: {
|
|
40
|
+
paddingBlock: "8",
|
|
41
|
+
paddingInline: "24"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
lg: {
|
|
45
|
+
body: { padding: "24" },
|
|
46
|
+
footer: {
|
|
47
|
+
paddingBlock: "12",
|
|
48
|
+
paddingInline: "24"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
35
51
|
}
|
|
36
52
|
},
|
|
37
53
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Card.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst cardSlotRecipe = defineSlotRecipe({\n className: 'card',\n slots: cardAnatomy.keys(),\n base: {\n root: {\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderRadius: '8',\n },\n footer: {\n borderBlockStart: '1px solid',\n borderColor: 'border/minimal',\n
|
|
1
|
+
{"version":3,"file":"Card.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Card.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst cardSlotRecipe = defineSlotRecipe({\n className: 'card',\n slots: cardAnatomy.keys(),\n base: {\n root: {\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderRadius: '8',\n },\n footer: {\n borderBlockStart: '1px solid',\n borderColor: 'border/minimal',\n },\n },\n variants: {\n elevation: {\n true: {\n root: {\n borderColor: 'border/minimal',\n boxShadow: 'elevation/sm',\n },\n },\n false: {\n root: {\n borderColor: 'border/regular',\n },\n },\n },\n paddingSize: {\n sm: {\n body: {\n padding: '16',\n },\n footer: {\n paddingBlock: '8',\n paddingInline: '16',\n },\n },\n md: {\n body: {\n paddingInline: '24',\n paddingBlock: '16',\n },\n footer: {\n paddingBlock: '8',\n paddingInline: '24',\n },\n },\n lg: {\n body: {\n padding: '24',\n },\n footer: {\n paddingBlock: '12',\n paddingInline: '24',\n },\n },\n },\n },\n defaultVariants: {\n elevation: true,\n paddingSize: 'lg',\n },\n});\n\nexport default cardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,YAAY,KAAK;CACxB,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,QAAQ;GACR,cAAc;EAChB;EACA,QAAQ;GACN,kBAAkB;GAClB,aAAa;EACf;CACF;CACA,UAAU;EACR,WAAW;GACT,MAAM,EACJ,MAAM;IACJ,aAAa;IACb,WAAW;GACb,EACF;GACA,OAAO,EACL,MAAM,EACJ,aAAa,iBACf,EACF;EACF;EACA,aAAa;GACX,IAAI;IACF,MAAM,EACJ,SAAS,KACX;IACA,QAAQ;KACN,cAAc;KACd,eAAe;IACjB;GACF;GACA,IAAI;IACF,MAAM;KACJ,eAAe;KACf,cAAc;IAChB;IACA,QAAQ;KACN,cAAc;KACd,eAAe;IACjB;GACF;GACA,IAAI;IACF,MAAM,EACJ,SAAS,KACX;IACA,QAAQ;KACN,cAAc;KACd,eAAe;IACjB;GACF;EACF;CACF;CACA,iBAAiB;EACf,WAAW;EACX,aAAa;CACf;AACF,CAAC"}
|
|
@@ -101,10 +101,6 @@ var dialogSlotRecipe = defineSlotRecipe({
|
|
|
101
101
|
_last: { paddingBlockEnd: "48" }
|
|
102
102
|
},
|
|
103
103
|
footer: {
|
|
104
|
-
alignItems: "center",
|
|
105
|
-
display: "flex",
|
|
106
|
-
gap: "16",
|
|
107
|
-
justifyContent: "flex-end",
|
|
108
104
|
paddingBlockEnd: "32",
|
|
109
105
|
paddingBlockStart: "24",
|
|
110
106
|
paddingInline: "32"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Dialog.recipe.ts"],"sourcesContent":["import { dialogAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst dialogSlotRecipe = defineSlotRecipe({\n className: 'dialog',\n slots: [\n ...dialogAnatomy.keys(),\n 'label',\n 'scrollBody',\n 'scrollButton',\n 'scrollGradient',\n 'stepDescription',\n 'stepHeader',\n 'stepTitle',\n 'stepTitleGroup',\n ] as const,\n base: {\n backdrop: {\n background: 'utilities/overlay',\n position: 'fixed',\n inset: 0,\n zIndex: 'dialogOverlay',\n _open: {\n animationStyle: 'fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: { base: 'flex-start', tablet: 'center' },\n display: 'flex',\n height: '100dvh',\n justifyContent: 'center',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100dvw',\n zIndex: 'dialog',\n },\n content: {\n background: 'background/primary',\n borderRadius: { base: 0, tablet: '8' },\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n outline: 'none',\n position: 'relative',\n _open: {\n animationStyle: 'scale-fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'scale-fade-out',\n animationDuration: 'faster',\n },\n },\n header: {\n display: 'flex',\n flexDirection: 'column',\n gap: '48',\n paddingBlock: '24',\n paddingInline: '32',\n position: 'relative',\n },\n title: {\n color: 'text/primary',\n paddingInlineEnd: '48',\n textStyle: 'comp/dialog/title',\n },\n description: {\n color: 'text/body',\n textStyle: 'body/lg/regular',\n },\n label: {\n color: 'text/secondary',\n textStyle: 'comp/dialog/label',\n },\n body: {\n display: 'flex',\n flex: '1',\n flexDirection: 'column',\n gap: '24',\n paddingInline: '32',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n scrollBody: {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n position: 'relative',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n footer: {\n
|
|
1
|
+
{"version":3,"file":"Dialog.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Dialog.recipe.ts"],"sourcesContent":["import { dialogAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst dialogSlotRecipe = defineSlotRecipe({\n className: 'dialog',\n slots: [\n ...dialogAnatomy.keys(),\n 'label',\n 'scrollBody',\n 'scrollButton',\n 'scrollGradient',\n 'stepDescription',\n 'stepHeader',\n 'stepTitle',\n 'stepTitleGroup',\n ] as const,\n base: {\n backdrop: {\n background: 'utilities/overlay',\n position: 'fixed',\n inset: 0,\n zIndex: 'dialogOverlay',\n _open: {\n animationStyle: 'fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: { base: 'flex-start', tablet: 'center' },\n display: 'flex',\n height: '100dvh',\n justifyContent: 'center',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100dvw',\n zIndex: 'dialog',\n },\n content: {\n background: 'background/primary',\n borderRadius: { base: 0, tablet: '8' },\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n outline: 'none',\n position: 'relative',\n _open: {\n animationStyle: 'scale-fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'scale-fade-out',\n animationDuration: 'faster',\n },\n },\n header: {\n display: 'flex',\n flexDirection: 'column',\n gap: '48',\n paddingBlock: '24',\n paddingInline: '32',\n position: 'relative',\n },\n title: {\n color: 'text/primary',\n paddingInlineEnd: '48',\n textStyle: 'comp/dialog/title',\n },\n description: {\n color: 'text/body',\n textStyle: 'body/lg/regular',\n },\n label: {\n color: 'text/secondary',\n textStyle: 'comp/dialog/label',\n },\n body: {\n display: 'flex',\n flex: '1',\n flexDirection: 'column',\n gap: '24',\n paddingInline: '32',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n scrollBody: {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n position: 'relative',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n footer: {\n paddingBlockEnd: '32',\n paddingBlockStart: '24',\n paddingInline: '32',\n },\n closeTrigger: {\n insetEnd: '24',\n position: 'absolute',\n top: '24',\n },\n scrollButton: {\n alignItems: 'center',\n alignSelf: 'center',\n background: 'background/primary',\n borderColor: 'border/minimal',\n borderRadius: '100%',\n borderWidth: '1px',\n bottom: '16',\n boxShadow: 'elevation/lg',\n cursor: 'pointer',\n display: 'flex',\n height: '32',\n justifyContent: 'center',\n position: 'absolute',\n width: '32',\n },\n stepDescription: {\n color: 'text/secondary',\n textStyle: 'body/md/regular',\n },\n stepHeader: {\n overflowY: 'auto',\n },\n stepTitle: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n stepTitleGroup: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n scrollGradient: {\n background: 'linear-gradient(0deg, {colors.background.primary} 0%, transparent 100%)',\n bottom: 48,\n height: '32',\n pointerEvents: 'none',\n position: 'absolute',\n width: '100%',\n },\n },\n variants: {\n scrollBehavior: {\n inside: {\n body: {\n overflowY: 'auto',\n _last: {\n paddingBlockEnd: 0, // override base _last: scrollBody slot handles padding instead\n },\n },\n content: {\n maxHeight: 'calc(100dvh - 96px)',\n overflow: 'hidden',\n },\n },\n outside: {},\n },\n size: {\n full: {\n body: {\n minHeight: 0,\n overflowY: 'auto',\n },\n content: {\n borderRadius: '8',\n height: '100%',\n maxHeight: '100%',\n maxWidth: '100%',\n overflow: 'hidden',\n width: '100%',\n },\n positioner: {\n padding: '32',\n },\n },\n lg: {\n content: {\n width: { base: '100%', tablet: rem(800) },\n },\n },\n md: {\n content: {\n width: { base: '100%', tablet: rem(640) },\n },\n },\n sm: {\n content: {\n width: { base: '100%', tablet: rem(480) },\n },\n },\n },\n variant: {\n overflowContent: {\n content: {\n maxHeight: 'calc(100dvh - 48px)',\n overflow: 'hidden',\n },\n header: {\n gap: '8',\n paddingBlockEnd: '8',\n paddingBlockStart: '16',\n paddingInline: '16',\n },\n title: {\n paddingInlineEnd: '32',\n textStyle: 'heading/h4',\n },\n body: {\n overflowY: 'auto',\n paddingBlockEnd: '8',\n paddingInline: '16',\n _last: {\n paddingBlockEnd: 0,\n },\n },\n scrollBody: {\n _last: {\n paddingBlockEnd: '16',\n },\n },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: 0,\n paddingInline: '16',\n },\n closeTrigger: {\n insetEnd: '12',\n top: '12',\n },\n scrollGradient: {\n bottom: '16',\n },\n scrollButton: {\n bottom: '8',\n },\n },\n },\n },\n defaultVariants: {\n scrollBehavior: 'outside',\n size: 'md',\n },\n});\n\nexport default dialogSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ var expandableCardSlotRecipe = defineSlotRecipe({
|
|
|
6
6
|
slots: [
|
|
7
7
|
...cardAnatomy.keys(),
|
|
8
8
|
"collapsible",
|
|
9
|
+
"footer",
|
|
9
10
|
"icon",
|
|
10
11
|
"secdText",
|
|
11
12
|
"suffix"
|
|
@@ -43,6 +44,12 @@ var expandableCardSlotRecipe = defineSlotRecipe({
|
|
|
43
44
|
borderColor: "border/minimal",
|
|
44
45
|
padding: "16"
|
|
45
46
|
},
|
|
47
|
+
footer: {
|
|
48
|
+
borderTop: "1px solid",
|
|
49
|
+
borderColor: "border/minimal",
|
|
50
|
+
paddingY: "8",
|
|
51
|
+
paddingX: "16"
|
|
52
|
+
},
|
|
46
53
|
icon: { color: "icon/secondary" },
|
|
47
54
|
secdText: { color: "text/secondary" },
|
|
48
55
|
suffix: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n className: 'expandable-card',\n slots: [...cardAnatomy.keys(), 'collapsible', 'icon', 'secdText', 'suffix'],\n base: {\n root: {\n backgroundColor: 'background/primary',\n overflow: 'hidden',\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n cursor: 'pointer',\n width: '100%',\n color: 'text/primary',\n '&:active': {\n backgroundColor: 'background/active',\n },\n '&:hover:not(:active)': {\n backgroundColor: 'background/hover',\n },\n _hover: {\n color: 'text/primary',\n },\n _open: {\n backgroundColor: 'background/secondary',\n },\n },\n collapsible: {\n overflow: 'hidden',\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n },\n body: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n padding: '16',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\n color: 'text/secondary',\n },\n suffix: {\n color: 'text/secondary',\n mx: '16',\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n size: {\n md: {\n header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n secdText: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n secdText: { textStyle: 'body/md/regular' },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK;EAAG;EAAe;EAAQ;EAAY;CAAQ;
|
|
1
|
+
{"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n className: 'expandable-card',\n slots: [...cardAnatomy.keys(), 'collapsible', 'footer', 'icon', 'secdText', 'suffix'],\n base: {\n root: {\n backgroundColor: 'background/primary',\n overflow: 'hidden',\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n cursor: 'pointer',\n width: '100%',\n color: 'text/primary',\n '&:active': {\n backgroundColor: 'background/active',\n },\n '&:hover:not(:active)': {\n backgroundColor: 'background/hover',\n },\n _hover: {\n color: 'text/primary',\n },\n _open: {\n backgroundColor: 'background/secondary',\n },\n },\n collapsible: {\n overflow: 'hidden',\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n },\n body: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n padding: '16',\n },\n footer: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n paddingY: '8',\n paddingX: '16',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\n color: 'text/secondary',\n },\n suffix: {\n color: 'text/secondary',\n mx: '16',\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n size: {\n md: {\n header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n secdText: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n secdText: { textStyle: 'body/md/regular' },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK;EAAG;EAAe;EAAU;EAAQ;EAAY;CAAQ;CACpF,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,OAAO;GACP,YAAY,EACV,iBAAiB,oBACnB;GACA,wBAAwB,EACtB,iBAAiB,mBACnB;GACA,QAAQ,EACN,OAAO,eACT;GACA,OAAO,EACL,iBAAiB,uBACnB;EACF;EACA,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,MAAM;GACJ,WAAW;GACX,aAAa;GACb,SAAS;EACX;EACA,QAAQ;GACN,WAAW;GACX,aAAa;GACb,UAAU;GACV,UAAU;EACZ;EACA,MAAM,EACJ,OAAO,iBACT;EACA,UAAU,EACR,OAAO,iBACT;EACA,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;GAAK;GACvE,UAAU,EAAE,WAAW,kBAAkB;EAC3C;EACA,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;GAAK;GACtD,UAAU,EAAE,WAAW,kBAAkB;EAC3C;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|
|
@@ -239,17 +239,29 @@ declare const slotRecipes: {
|
|
|
239
239
|
body: {
|
|
240
240
|
padding: "16";
|
|
241
241
|
};
|
|
242
|
+
footer: {
|
|
243
|
+
paddingBlock: "8";
|
|
244
|
+
paddingInline: "16";
|
|
245
|
+
};
|
|
242
246
|
};
|
|
243
247
|
md: {
|
|
244
248
|
body: {
|
|
245
249
|
paddingInline: "24";
|
|
246
250
|
paddingBlock: "16";
|
|
247
251
|
};
|
|
252
|
+
footer: {
|
|
253
|
+
paddingBlock: "8";
|
|
254
|
+
paddingInline: "24";
|
|
255
|
+
};
|
|
248
256
|
};
|
|
249
257
|
lg: {
|
|
250
258
|
body: {
|
|
251
259
|
padding: "24";
|
|
252
260
|
};
|
|
261
|
+
footer: {
|
|
262
|
+
paddingBlock: "12";
|
|
263
|
+
paddingInline: "24";
|
|
264
|
+
};
|
|
253
265
|
};
|
|
254
266
|
};
|
|
255
267
|
}>;
|