@bitrise/bitkit-v2 0.3.469-beta.2976 → 0.3.470-beta.2980
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/BitkitSteps/BitkitSteps.d.ts +11 -0
- package/dist/components/BitkitSteps/BitkitSteps.js +3 -6
- package/dist/components/BitkitSteps/BitkitSteps.js.map +1 -1
- package/dist/theme/slot-recipes/StepCard.recipe.js +12 -3
- package/dist/theme/slot-recipes/StepCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Steps.recipe.d.ts +31 -45
- package/dist/theme/slot-recipes/Steps.recipe.js +48 -48
- package/dist/theme/slot-recipes/Steps.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +31 -45
- package/package.json +1 -1
|
@@ -3,6 +3,13 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
export type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';
|
|
4
4
|
export interface BitkitStepsProps extends Omit<StepsRootProps, 'children' | 'count' | 'linear' | 'orientation' | 'step'> {
|
|
5
5
|
children: ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* `horizontal` is a row of steps from `tablet` (848px) up and stacks into the `vertical` layout
|
|
8
|
+
* below it, where a row has no room — the `StepsCard - mobile` frame's header is this collapsed
|
|
9
|
+
* state. `vertical` stays vertical at every width.
|
|
10
|
+
*
|
|
11
|
+
* The collapse is a CSS media query, so narrowing a wrapper does not trigger it.
|
|
12
|
+
*/
|
|
6
13
|
orientation?: 'horizontal' | 'vertical';
|
|
7
14
|
step?: number;
|
|
8
15
|
}
|
|
@@ -12,6 +19,10 @@ export interface BitkitStepsItemProps {
|
|
|
12
19
|
isExternal?: boolean;
|
|
13
20
|
onClick?: () => void;
|
|
14
21
|
};
|
|
22
|
+
/**
|
|
23
|
+
* A second line under the label. It belongs to the stacked layout: a `vertical` list shows it at
|
|
24
|
+
* every width, a `horizontal` one only below `tablet`, where it has collapsed into that layout.
|
|
25
|
+
*/
|
|
15
26
|
helperText?: ReactNode;
|
|
16
27
|
label: string;
|
|
17
28
|
state?: BitkitStepsItemState;
|
|
@@ -53,17 +53,14 @@ var BitkitSteps = forwardRef((props, ref) => {
|
|
|
53
53
|
orientation,
|
|
54
54
|
step,
|
|
55
55
|
children: /* @__PURE__ */ jsx(Steps.List, { children: Children.map(children, (child, index) => {
|
|
56
|
-
if (isValidElement(child)) return cloneElement(child, {
|
|
57
|
-
_index: index,
|
|
58
|
-
_orientation: orientation
|
|
59
|
-
});
|
|
56
|
+
if (isValidElement(child)) return cloneElement(child, { _index: index });
|
|
60
57
|
return child;
|
|
61
58
|
}) })
|
|
62
59
|
});
|
|
63
60
|
});
|
|
64
61
|
BitkitSteps.displayName = "BitkitSteps";
|
|
65
62
|
var BitkitStepsItem = forwardRef((props, ref) => {
|
|
66
|
-
const { _index = 0,
|
|
63
|
+
const { _index = 0, action, helperText, label, state } = props;
|
|
67
64
|
const styles = useStepsStyles();
|
|
68
65
|
const status = getEffectiveStatus(state, _index, useStepsContext().value);
|
|
69
66
|
const resolvedAction = status === "completed" ? action : void 0;
|
|
@@ -82,7 +79,7 @@ var BitkitStepsItem = forwardRef((props, ref) => {
|
|
|
82
79
|
children: [/* @__PURE__ */ jsx(Steps.Title, {
|
|
83
80
|
...statusAttr,
|
|
84
81
|
children: renderLabel(label, resolvedAction)
|
|
85
|
-
}),
|
|
82
|
+
}), helperText && /* @__PURE__ */ jsx(Steps.Description, {
|
|
86
83
|
...statusAttr,
|
|
87
84
|
children: helperText
|
|
88
85
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, type StepsRootProps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n itemState: BitkitStepsItemState | undefined,\n index: number,\n step: number,\n): EffectiveStatus => {\n if (itemState === 'disabled') return 'disabled';\n if (itemState === 'invalid') return 'invalid';\n if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n if (index < step) return 'completed';\n if (index === step) return 'inProgress';\n return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n if (status === 'completed') return <IconCheck size=\"16\" />;\n if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n if (status === 'invalid') return '!';\n return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n if (!action) return label;\n\n // Links don't look like links at rest — only the underline + purple color on hover reveals\n // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n // already adds the underline on hover; we only need to swap the color.\n if (action.href) {\n return (\n <Link\n _hover={{ color: 'text/link' }}\n href={action.href}\n onClick={action.onClick}\n rel={action.isExternal ? 'noopener noreferrer' : undefined}\n target={action.isExternal ? '_blank' : undefined}\n >\n {label}\n </Link>\n );\n }\n\n return (\n <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n {label}\n </Link>\n );\n};\n\nexport interface BitkitStepsProps extends Omit<\n StepsRootProps,\n 'children' | 'count' | 'linear' | 'orientation' | 'step'\n> {\n children: ReactNode;\n orientation?: 'horizontal' | 'vertical';\n step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n const { children, orientation = 'horizontal', step: stepProp, ...rest } = props;\n const stepCardCtx = useStepCardContext();\n const step = stepProp ?? stepCardCtx?.step ?? 0;\n const count = Children.count(children);\n\n return (\n <Steps.Root ref={ref} {...rest} count={count} linear={false} orientation={orientation} step={step}>\n <Steps.List>\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, {
|
|
1
|
+
{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, type StepsRootProps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n itemState: BitkitStepsItemState | undefined,\n index: number,\n step: number,\n): EffectiveStatus => {\n if (itemState === 'disabled') return 'disabled';\n if (itemState === 'invalid') return 'invalid';\n if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n if (index < step) return 'completed';\n if (index === step) return 'inProgress';\n return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n if (status === 'completed') return <IconCheck size=\"16\" />;\n if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n if (status === 'invalid') return '!';\n return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n if (!action) return label;\n\n // Links don't look like links at rest — only the underline + purple color on hover reveals\n // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n // already adds the underline on hover; we only need to swap the color.\n if (action.href) {\n return (\n <Link\n _hover={{ color: 'text/link' }}\n href={action.href}\n onClick={action.onClick}\n rel={action.isExternal ? 'noopener noreferrer' : undefined}\n target={action.isExternal ? '_blank' : undefined}\n >\n {label}\n </Link>\n );\n }\n\n return (\n <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n {label}\n </Link>\n );\n};\n\nexport interface BitkitStepsProps extends Omit<\n StepsRootProps,\n 'children' | 'count' | 'linear' | 'orientation' | 'step'\n> {\n children: ReactNode;\n /**\n * `horizontal` is a row of steps from `tablet` (848px) up and stacks into the `vertical` layout\n * below it, where a row has no room — the `StepsCard - mobile` frame's header is this collapsed\n * state. `vertical` stays vertical at every width.\n *\n * The collapse is a CSS media query, so narrowing a wrapper does not trigger it.\n */\n orientation?: 'horizontal' | 'vertical';\n step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n const { children, orientation = 'horizontal', step: stepProp, ...rest } = props;\n const stepCardCtx = useStepCardContext();\n const step = stepProp ?? stepCardCtx?.step ?? 0;\n const count = Children.count(children);\n\n return (\n <Steps.Root ref={ref} {...rest} count={count} linear={false} orientation={orientation} step={step}>\n <Steps.List>\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, { _index: index });\n }\n return child;\n })}\n </Steps.List>\n </Steps.Root>\n );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n action?: {\n href?: string;\n isExternal?: boolean;\n onClick?: () => void;\n };\n /**\n * A second line under the label. It belongs to the stacked layout: a `vertical` list shows it at\n * every width, a `horizontal` one only below `tablet`, where it has collapsed into that layout.\n */\n helperText?: ReactNode;\n label: string;\n state?: BitkitStepsItemState;\n}\n\ninterface BitkitStepsItemInternalProps extends BitkitStepsItemProps {\n _index?: number;\n}\n\nconst BitkitStepsItem = forwardRef<HTMLDivElement, BitkitStepsItemProps>((props, ref) => {\n const { _index = 0, action, helperText, label, state } = props as BitkitStepsItemInternalProps;\n\n const styles = useStepsStyles();\n const stepsCtx = useStepsContext();\n const status = getEffectiveStatus(state, _index, stepsCtx.value);\n const resolvedAction = status === 'completed' ? action : undefined;\n const statusAttr = { 'data-step-status': status };\n\n return (\n <Steps.Item {...statusAttr} index={_index} ref={ref}>\n <Steps.Indicator {...statusAttr}>{renderIndicatorContent(_index, status)}</Steps.Indicator>\n <Box css={styles.trigger}>\n <Steps.Title {...statusAttr}>{renderLabel(label, resolvedAction)}</Steps.Title>\n {helperText && <Steps.Description {...statusAttr}>{helperText}</Steps.Description>}\n </Box>\n <Steps.Separator />\n </Steps.Item>\n );\n});\n\nBitkitStepsItem.displayName = 'BitkitStepsItem';\n\nexport default withSubComponents(BitkitSteps, { Item: BitkitStepsItem });\n"],"mappings":";;;;;;;;;;AAcA,IAAM,sBACJ,WACA,OACA,SACoB;CACpB,IAAI,cAAc,YAAY,OAAO;CACrC,IAAI,cAAc,WAAW,OAAO;CACpC,IAAI,cAAc,aAAa,OAAO,QAAQ,OAAO,YAAY;CACjE,IAAI,QAAQ,MAAM,OAAO;CACzB,IAAI,UAAU,MAAM,OAAO;CAC3B,OAAO;AACT;AAEA,IAAM,0BAA0B,OAAe,WAA4B;CACzE,IAAI,WAAW,aAAa,OAAO,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CACzD,IAAI,WAAW,eAAe,WAAW,WAAW,OAAO,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAChF,IAAI,WAAW,WAAW,OAAO;CACjC,OAAO,QAAQ;AACjB;AAEA,IAAM,eAAe,OAAe,WAA2C;CAC7E,IAAI,CAAC,QAAQ,OAAO;CAKpB,IAAI,OAAO,MACT,OACE,oBAAC,MAAD;EACE,QAAQ,EAAE,OAAO,YAAY;EAC7B,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,KAAK,OAAO,aAAa,wBAAwB,KAAA;EACjD,QAAQ,OAAO,aAAa,WAAW,KAAA;EAEtC,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EAAM,QAAQ,EAAE,OAAO,YAAY;EAAG,IAAG;EAAS,SAAS,OAAO;EAAS,MAAK;EAC7E,UAAA;CACG,CAAA;AAEV;AAkBA,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EAAE,UAAU,cAAc,cAAc,MAAM,UAAU,GAAG,SAAS;CAC1E,MAAM,cAAc,mBAAmB;CACvC,MAAM,OAAO,YAAY,aAAa,QAAQ;CAC9C,MAAM,QAAQ,SAAS,MAAM,QAAQ;CAErC,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,GAAI;EAAa;EAAO,QAAQ;EAAoB;EAAmB;EAC3F,UAAA,oBAAC,MAAM,MAAP,EAAA,UACG,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAqD,EAAE,QAAQ,MAAM,CAAC;GAE5F,OAAO;EACT,CAAC,EACS,CAAA;CACF,CAAA;AAEhB,CAAC;AAED,YAAY,cAAc;AAqB1B,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,SAAS,GAAG,QAAQ,YAAY,OAAO,UAAU;CAEzD,MAAM,SAAS,eAAe;CAE9B,MAAM,SAAS,mBAAmB,OAAO,QADxB,gBACgC,CAAA,CAAS,KAAK;CAC/D,MAAM,iBAAiB,WAAW,cAAc,SAAS,KAAA;CACzD,MAAM,aAAa,EAAE,oBAAoB,OAAO;CAEhD,OACE,qBAAC,MAAM,MAAP;EAAY,GAAI;EAAY,OAAO;EAAa;EAAhD,UAAA;GACE,oBAAC,MAAM,WAAP;IAAiB,GAAI;IAAa,UAAA,uBAAuB,QAAQ,MAAM;GAAmB,CAAA;GAC1F,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,oBAAC,MAAM,OAAP;KAAa,GAAI;KAAa,UAAA,YAAY,OAAO,cAAc;IAAe,CAAA,GAC7E,cAAc,oBAAC,MAAM,aAAP;KAAmB,GAAI;KAAa,UAAA;IAA8B,CAAA,CAC9E;;GACL,oBAAC,MAAM,WAAP,CAAkB,CAAA;EACR;;AAEhB,CAAC;AAED,gBAAgB,cAAc;AAE9B,IAAA,sBAAe,kBAAkB,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -16,7 +16,10 @@ var stepCardSlotRecipe = defineSlotRecipe({
|
|
|
16
16
|
},
|
|
17
17
|
header: {
|
|
18
18
|
paddingBlockStart: "32",
|
|
19
|
-
paddingInline:
|
|
19
|
+
paddingInline: {
|
|
20
|
+
base: "24",
|
|
21
|
+
tablet: "32"
|
|
22
|
+
}
|
|
20
23
|
},
|
|
21
24
|
body: {
|
|
22
25
|
display: "flex",
|
|
@@ -24,7 +27,10 @@ var stepCardSlotRecipe = defineSlotRecipe({
|
|
|
24
27
|
gap: "24",
|
|
25
28
|
paddingBlockEnd: "48",
|
|
26
29
|
paddingBlockStart: "32",
|
|
27
|
-
paddingInline:
|
|
30
|
+
paddingInline: {
|
|
31
|
+
base: "24",
|
|
32
|
+
tablet: "32"
|
|
33
|
+
}
|
|
28
34
|
},
|
|
29
35
|
titleGroup: {
|
|
30
36
|
display: "flex",
|
|
@@ -46,7 +52,10 @@ var stepCardSlotRecipe = defineSlotRecipe({
|
|
|
46
52
|
display: "flex",
|
|
47
53
|
gap: "16",
|
|
48
54
|
justifyContent: "flex-end",
|
|
49
|
-
padding:
|
|
55
|
+
padding: {
|
|
56
|
+
base: "24",
|
|
57
|
+
tablet: "32"
|
|
58
|
+
}
|
|
50
59
|
}
|
|
51
60
|
}
|
|
52
61
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/StepCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst stepsCardAnatomy = cardAnatomy.extendWith('titleGroup');\n\nconst stepCardSlotRecipe = defineSlotRecipe({\n className: 'steps-card',\n slots: stepsCardAnatomy.keys(),\n base: {\n root: {\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderColor: 'border/minimal',\n borderRadius: '8',\n boxShadow: 'elevation/md',\n overflow: 'hidden',\n },\n header: {\n paddingBlockStart: '32',\n paddingInline: '32',\n },\n body: {\n display: 'flex',\n flexDirection: 'column',\n gap: '24',\n paddingBlockEnd: '48',\n paddingBlockStart: '32',\n paddingInline: '32',\n },\n titleGroup: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n title: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n description: {\n color: 'text/secondary',\n textStyle: 'body/md/regular',\n },\n footer: {\n alignItems: 'center',\n borderBlockStart: '1px solid',\n borderColor: 'border/minimal',\n display: 'flex',\n gap: '16',\n justifyContent: 'flex-end',\n padding: '32',\n },\n },\n});\n\nexport default stepCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,mBAAmB,YAAY,WAAW,YAAY;AAE5D,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,QAAQ;GACR,aAAa;GACb,cAAc;GACd,WAAW;GACX,UAAU;EACZ;EACA,QAAQ;GACN,mBAAmB;GACnB,eAAe;
|
|
1
|
+
{"version":3,"file":"StepCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/StepCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst stepsCardAnatomy = cardAnatomy.extendWith('titleGroup');\n\nconst stepCardSlotRecipe = defineSlotRecipe({\n className: 'steps-card',\n slots: stepsCardAnatomy.keys(),\n base: {\n root: {\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderColor: 'border/minimal',\n borderRadius: '8',\n boxShadow: 'elevation/md',\n overflow: 'hidden',\n },\n header: {\n paddingBlockStart: '32',\n paddingInline: { base: '24', tablet: '32' },\n },\n body: {\n display: 'flex',\n flexDirection: 'column',\n gap: '24',\n paddingBlockEnd: '48',\n paddingBlockStart: '32',\n paddingInline: { base: '24', tablet: '32' },\n },\n titleGroup: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n title: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n description: {\n color: 'text/secondary',\n textStyle: 'body/md/regular',\n },\n footer: {\n alignItems: 'center',\n borderBlockStart: '1px solid',\n borderColor: 'border/minimal',\n display: 'flex',\n gap: '16',\n justifyContent: 'flex-end',\n padding: { base: '24', tablet: '32' },\n },\n },\n});\n\nexport default stepCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,mBAAmB,YAAY,WAAW,YAAY;AAE5D,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,QAAQ;GACR,aAAa;GACb,cAAc;GACd,WAAW;GACX,UAAU;EACZ;EACA,QAAQ;GACN,mBAAmB;GACnB,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,YAAY;GACV,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,OAAO;GACL,OAAO;GACP,WAAW;EACb;EACA,aAAa;GACX,OAAO;GACP,WAAW;EACb;EACA,QAAQ;GACN,YAAY;GACZ,kBAAkB;GAClB,aAAa;GACb,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,SAAS;IAAE,MAAM;IAAM,QAAQ;GAAK;EACtC;CACF;AACF,CAAC"}
|
|
@@ -2,60 +2,46 @@ declare const stepsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
2
2
|
orientation: {
|
|
3
3
|
horizontal: {
|
|
4
4
|
list: {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
item: {
|
|
9
|
-
alignItems: "center";
|
|
10
|
-
borderTopWidth: "2";
|
|
11
|
-
paddingBlock: "16";
|
|
12
|
-
paddingInlineEnd: "24";
|
|
13
|
-
"&[data-step-status=inProgress]": {
|
|
14
|
-
_before: {
|
|
15
|
-
content: "\"\"";
|
|
16
|
-
position: "absolute";
|
|
17
|
-
insetBlockStart: "-2px";
|
|
18
|
-
insetInlineStart: number;
|
|
19
|
-
width: "50%";
|
|
20
|
-
height: "2";
|
|
21
|
-
bg: "border/selected";
|
|
22
|
-
};
|
|
5
|
+
tablet: {
|
|
6
|
+
alignItems: "center";
|
|
7
|
+
flexDirection: "row";
|
|
23
8
|
};
|
|
24
9
|
};
|
|
25
|
-
};
|
|
26
|
-
vertical: {
|
|
27
|
-
list: {
|
|
28
|
-
flexDirection: "column";
|
|
29
|
-
alignItems: "stretch";
|
|
30
|
-
};
|
|
31
10
|
item: {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
bg: "border/selected";
|
|
11
|
+
tablet: {
|
|
12
|
+
alignItems: "center";
|
|
13
|
+
borderBlockStartWidth: "2";
|
|
14
|
+
borderInlineStartWidth: number;
|
|
15
|
+
paddingBlock: "16";
|
|
16
|
+
paddingInlineStart: number;
|
|
17
|
+
'&:last-of-type': {
|
|
18
|
+
paddingBlockEnd: "16";
|
|
19
|
+
};
|
|
20
|
+
"&[data-step-status=inProgress]": {
|
|
21
|
+
_before: {
|
|
22
|
+
height: "2";
|
|
23
|
+
insetBlockStart: "-2px";
|
|
24
|
+
insetInlineStart: number;
|
|
25
|
+
width: "50%";
|
|
26
|
+
};
|
|
49
27
|
};
|
|
50
28
|
};
|
|
51
29
|
};
|
|
52
30
|
trigger: {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
31
|
+
tablet: {
|
|
32
|
+
alignItems: "center";
|
|
33
|
+
flexDirection: "row";
|
|
34
|
+
gap: "8";
|
|
35
|
+
paddingBlockStart: number;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
description: {
|
|
39
|
+
tablet: {
|
|
40
|
+
display: "none";
|
|
41
|
+
};
|
|
57
42
|
};
|
|
58
43
|
};
|
|
44
|
+
vertical: {};
|
|
59
45
|
};
|
|
60
46
|
}>;
|
|
61
47
|
export default stepsSlotRecipe;
|
|
@@ -9,6 +9,7 @@ var STATUS_NOT_STARTED = "&[data-step-status=notStarted]";
|
|
|
9
9
|
var STATUS_SKIPPABLE = "&[data-step-status=skippable]";
|
|
10
10
|
var STATUS_SKIPPED = "&[data-step-status=skipped]";
|
|
11
11
|
var truncate = {
|
|
12
|
+
maxWidth: "100%",
|
|
12
13
|
overflow: "hidden",
|
|
13
14
|
textOverflow: "ellipsis",
|
|
14
15
|
whiteSpace: "nowrap"
|
|
@@ -23,17 +24,36 @@ var stepsSlotRecipe = defineSlotRecipe({
|
|
|
23
24
|
width: "100%"
|
|
24
25
|
},
|
|
25
26
|
list: {
|
|
27
|
+
alignItems: "stretch",
|
|
26
28
|
display: "flex",
|
|
29
|
+
flexDirection: "column",
|
|
27
30
|
gap: 0
|
|
28
31
|
},
|
|
29
32
|
item: {
|
|
33
|
+
alignItems: "flex-start",
|
|
34
|
+
borderColor: "border/disabled",
|
|
35
|
+
borderInlineStartWidth: "2",
|
|
36
|
+
borderStyle: "solid",
|
|
30
37
|
display: "flex",
|
|
31
38
|
flex: "1 0 0",
|
|
32
39
|
gap: "8",
|
|
33
|
-
|
|
34
|
-
|
|
40
|
+
paddingBlockEnd: "24",
|
|
41
|
+
paddingInlineEnd: "24",
|
|
42
|
+
paddingInlineStart: "12",
|
|
43
|
+
"&:last-of-type": { paddingBlockEnd: 0 },
|
|
35
44
|
[`${STATUS_COMPLETED}, ${STATUS_SKIPPED}`]: { borderColor: "border/selected" },
|
|
36
|
-
[STATUS_IN_PROGRESS]: {
|
|
45
|
+
[STATUS_IN_PROGRESS]: {
|
|
46
|
+
position: "relative",
|
|
47
|
+
_before: {
|
|
48
|
+
background: "border/selected",
|
|
49
|
+
content: "\"\"",
|
|
50
|
+
height: "50%",
|
|
51
|
+
insetBlockStart: 0,
|
|
52
|
+
insetInlineStart: "-2px",
|
|
53
|
+
position: "absolute",
|
|
54
|
+
width: "2"
|
|
55
|
+
}
|
|
56
|
+
}
|
|
37
57
|
},
|
|
38
58
|
indicator: {
|
|
39
59
|
display: "flex",
|
|
@@ -76,11 +96,13 @@ var stepsSlotRecipe = defineSlotRecipe({
|
|
|
76
96
|
}
|
|
77
97
|
},
|
|
78
98
|
trigger: {
|
|
99
|
+
alignItems: "flex-start",
|
|
79
100
|
display: "flex",
|
|
80
|
-
alignItems: "center",
|
|
81
|
-
gap: "8",
|
|
82
101
|
flex: "1 0 0",
|
|
83
|
-
|
|
102
|
+
flexDirection: "column",
|
|
103
|
+
gap: "2",
|
|
104
|
+
minWidth: "1",
|
|
105
|
+
paddingBlockStart: "4"
|
|
84
106
|
},
|
|
85
107
|
title: {
|
|
86
108
|
...truncate,
|
|
@@ -108,55 +130,33 @@ var stepsSlotRecipe = defineSlotRecipe({
|
|
|
108
130
|
},
|
|
109
131
|
variants: { orientation: {
|
|
110
132
|
horizontal: {
|
|
111
|
-
list: {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
},
|
|
115
|
-
item: {
|
|
133
|
+
list: { tablet: {
|
|
134
|
+
alignItems: "center",
|
|
135
|
+
flexDirection: "row"
|
|
136
|
+
} },
|
|
137
|
+
item: { tablet: {
|
|
116
138
|
alignItems: "center",
|
|
117
|
-
|
|
139
|
+
borderBlockStartWidth: "2",
|
|
140
|
+
borderInlineStartWidth: 0,
|
|
118
141
|
paddingBlock: "16",
|
|
119
|
-
|
|
142
|
+
paddingInlineStart: 0,
|
|
143
|
+
"&:last-of-type": { paddingBlockEnd: "16" },
|
|
120
144
|
[STATUS_IN_PROGRESS]: { _before: {
|
|
121
|
-
|
|
122
|
-
position: "absolute",
|
|
145
|
+
height: "2",
|
|
123
146
|
insetBlockStart: "-2px",
|
|
124
147
|
insetInlineStart: 0,
|
|
125
|
-
width: "50%"
|
|
126
|
-
height: "2",
|
|
127
|
-
bg: "border/selected"
|
|
148
|
+
width: "50%"
|
|
128
149
|
} }
|
|
129
|
-
}
|
|
150
|
+
} },
|
|
151
|
+
trigger: { tablet: {
|
|
152
|
+
alignItems: "center",
|
|
153
|
+
flexDirection: "row",
|
|
154
|
+
gap: "8",
|
|
155
|
+
paddingBlockStart: 0
|
|
156
|
+
} },
|
|
157
|
+
description: { tablet: { display: "none" } }
|
|
130
158
|
},
|
|
131
|
-
vertical: {
|
|
132
|
-
list: {
|
|
133
|
-
flexDirection: "column",
|
|
134
|
-
alignItems: "stretch"
|
|
135
|
-
},
|
|
136
|
-
item: {
|
|
137
|
-
alignItems: "flex-start",
|
|
138
|
-
borderInlineStartWidth: "2",
|
|
139
|
-
paddingInlineStart: "12",
|
|
140
|
-
paddingInlineEnd: "24",
|
|
141
|
-
paddingBlockEnd: "24",
|
|
142
|
-
"&:last-of-type": { paddingBlockEnd: 0 },
|
|
143
|
-
[STATUS_IN_PROGRESS]: { _before: {
|
|
144
|
-
content: "\"\"",
|
|
145
|
-
position: "absolute",
|
|
146
|
-
insetBlockStart: 0,
|
|
147
|
-
insetInlineStart: "-2px",
|
|
148
|
-
width: "2",
|
|
149
|
-
height: "50%",
|
|
150
|
-
bg: "border/selected"
|
|
151
|
-
} }
|
|
152
|
-
},
|
|
153
|
-
trigger: {
|
|
154
|
-
flexDirection: "column",
|
|
155
|
-
alignItems: "flex-start",
|
|
156
|
-
gap: "2",
|
|
157
|
-
paddingBlockStart: "4"
|
|
158
|
-
}
|
|
159
|
-
}
|
|
159
|
+
vertical: {}
|
|
160
160
|
} },
|
|
161
161
|
defaultVariants: { orientation: "horizontal" }
|
|
162
162
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Steps.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Steps.recipe.ts"],"sourcesContent":["import { stepsAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst STATUS_COMPLETED = '&[data-step-status=completed]';\nconst STATUS_DISABLED = '&[data-step-status=disabled]';\nconst STATUS_IN_PROGRESS = '&[data-step-status=inProgress]';\nconst STATUS_INVALID = '&[data-step-status=invalid]';\nconst STATUS_NOT_STARTED = '&[data-step-status=notStarted]';\nconst STATUS_SKIPPABLE = '&[data-step-status=skippable]';\nconst STATUS_SKIPPED = '&[data-step-status=skipped]';\n\nconst truncate = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } as const;\n\nconst stepsSlotRecipe = defineSlotRecipe({\n className: 'steps',\n slots: stepsAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n },\n list: {\n display: 'flex',\n gap: 0,\n },\n item: {\n display: 'flex',\n flex: '1 0 0',\n gap: '8',\n
|
|
1
|
+
{"version":3,"file":"Steps.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Steps.recipe.ts"],"sourcesContent":["import { stepsAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst STATUS_COMPLETED = '&[data-step-status=completed]';\nconst STATUS_DISABLED = '&[data-step-status=disabled]';\nconst STATUS_IN_PROGRESS = '&[data-step-status=inProgress]';\nconst STATUS_INVALID = '&[data-step-status=invalid]';\nconst STATUS_NOT_STARTED = '&[data-step-status=notStarted]';\nconst STATUS_SKIPPABLE = '&[data-step-status=skippable]';\nconst STATUS_SKIPPED = '&[data-step-status=skipped]';\n\nconst truncate = { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } as const;\n\nconst stepsSlotRecipe = defineSlotRecipe({\n className: 'steps',\n slots: stepsAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n },\n list: {\n alignItems: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n gap: 0,\n },\n item: {\n alignItems: 'flex-start',\n borderColor: 'border/disabled',\n borderInlineStartWidth: '2',\n borderStyle: 'solid',\n display: 'flex',\n flex: '1 0 0',\n gap: '8',\n paddingBlockEnd: '24',\n paddingInlineEnd: '24',\n paddingInlineStart: '12',\n\n '&:last-of-type': {\n paddingBlockEnd: 0,\n },\n\n [`${STATUS_COMPLETED}, ${STATUS_SKIPPED}`]: { borderColor: 'border/selected' },\n [STATUS_IN_PROGRESS]: {\n position: 'relative',\n\n _before: {\n background: 'border/selected',\n content: '\"\"',\n height: '50%',\n insetBlockStart: 0,\n insetInlineStart: '-2px',\n position: 'absolute',\n width: '2',\n },\n },\n },\n indicator: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexShrink: '0',\n borderRadius: '9999px',\n borderWidth: '2',\n borderStyle: 'solid',\n width: '24',\n height: '24',\n overflow: 'clip',\n textStyle: 'body/md/semibold',\n lineHeight: 'initial',\n\n [STATUS_NOT_STARTED]: {\n bg: 'background/primary',\n borderColor: 'border/strong',\n color: 'text/secondary',\n },\n [STATUS_IN_PROGRESS]: { bg: 'interactive/subtle', borderColor: 'border/selected', color: 'text/selected' },\n [STATUS_COMPLETED]: { bg: 'interactive/base', borderColor: 'border/selected', color: 'icon/on-color' },\n [STATUS_INVALID]: {\n bg: 'status/critical/bg',\n borderColor: 'border/error',\n color: 'text/negative',\n textStyle: 'heading/h4',\n },\n [`${STATUS_SKIPPABLE}, ${STATUS_SKIPPED}, ${STATUS_DISABLED}`]: {\n bg: 'background/primary',\n borderColor: 'border/disabled',\n color: 'text/disabled',\n },\n },\n trigger: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '1 0 0',\n flexDirection: 'column',\n gap: '2',\n minWidth: '1',\n paddingBlockStart: '4',\n },\n title: {\n ...truncate,\n textStyle: 'body/md/regular',\n color: 'text/secondary',\n lineHeight: 'initial!',\n\n [STATUS_IN_PROGRESS]: { textStyle: 'body/md/semibold', color: 'text/primary' },\n [`${STATUS_SKIPPABLE}, ${STATUS_SKIPPED}, ${STATUS_DISABLED}`]: { color: 'text/disabled' },\n },\n description: {\n ...truncate,\n textStyle: 'body/sm/regular',\n color: 'text/secondary',\n\n [`${STATUS_SKIPPABLE}, ${STATUS_SKIPPED}`]: { color: 'text/tertiary' },\n [STATUS_DISABLED]: { color: 'text/disabled' },\n },\n // Required by stepsAnatomy but unused in this component\n content: {},\n nextTrigger: {},\n prevTrigger: {},\n progress: {},\n separator: {},\n },\n variants: {\n orientation: {\n horizontal: {\n list: {\n tablet: {\n alignItems: 'center',\n flexDirection: 'row',\n },\n },\n item: {\n tablet: {\n alignItems: 'center',\n borderBlockStartWidth: '2',\n borderInlineStartWidth: 0,\n paddingBlock: '16',\n paddingInlineStart: 0,\n\n '&:last-of-type': {\n paddingBlockEnd: '16',\n },\n\n [STATUS_IN_PROGRESS]: {\n _before: {\n height: '2',\n insetBlockStart: '-2px',\n insetInlineStart: 0,\n width: '50%',\n },\n },\n },\n },\n trigger: {\n tablet: {\n alignItems: 'center',\n flexDirection: 'row',\n gap: '8',\n paddingBlockStart: 0,\n },\n },\n description: {\n tablet: { display: 'none' },\n },\n },\n vertical: {},\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n});\n\nexport default stepsSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -2487,60 +2487,46 @@ declare const slotRecipes: {
|
|
|
2487
2487
|
orientation: {
|
|
2488
2488
|
horizontal: {
|
|
2489
2489
|
list: {
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
item: {
|
|
2494
|
-
alignItems: "center";
|
|
2495
|
-
borderTopWidth: "2";
|
|
2496
|
-
paddingBlock: "16";
|
|
2497
|
-
paddingInlineEnd: "24";
|
|
2498
|
-
"&[data-step-status=inProgress]": {
|
|
2499
|
-
_before: {
|
|
2500
|
-
content: "\"\"";
|
|
2501
|
-
position: "absolute";
|
|
2502
|
-
insetBlockStart: "-2px";
|
|
2503
|
-
insetInlineStart: number;
|
|
2504
|
-
width: "50%";
|
|
2505
|
-
height: "2";
|
|
2506
|
-
bg: "border/selected";
|
|
2507
|
-
};
|
|
2490
|
+
tablet: {
|
|
2491
|
+
alignItems: "center";
|
|
2492
|
+
flexDirection: "row";
|
|
2508
2493
|
};
|
|
2509
2494
|
};
|
|
2510
|
-
};
|
|
2511
|
-
vertical: {
|
|
2512
|
-
list: {
|
|
2513
|
-
flexDirection: "column";
|
|
2514
|
-
alignItems: "stretch";
|
|
2515
|
-
};
|
|
2516
2495
|
item: {
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
bg: "border/selected";
|
|
2496
|
+
tablet: {
|
|
2497
|
+
alignItems: "center";
|
|
2498
|
+
borderBlockStartWidth: "2";
|
|
2499
|
+
borderInlineStartWidth: number;
|
|
2500
|
+
paddingBlock: "16";
|
|
2501
|
+
paddingInlineStart: number;
|
|
2502
|
+
'&:last-of-type': {
|
|
2503
|
+
paddingBlockEnd: "16";
|
|
2504
|
+
};
|
|
2505
|
+
"&[data-step-status=inProgress]": {
|
|
2506
|
+
_before: {
|
|
2507
|
+
height: "2";
|
|
2508
|
+
insetBlockStart: "-2px";
|
|
2509
|
+
insetInlineStart: number;
|
|
2510
|
+
width: "50%";
|
|
2511
|
+
};
|
|
2534
2512
|
};
|
|
2535
2513
|
};
|
|
2536
2514
|
};
|
|
2537
2515
|
trigger: {
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2516
|
+
tablet: {
|
|
2517
|
+
alignItems: "center";
|
|
2518
|
+
flexDirection: "row";
|
|
2519
|
+
gap: "8";
|
|
2520
|
+
paddingBlockStart: number;
|
|
2521
|
+
};
|
|
2522
|
+
};
|
|
2523
|
+
description: {
|
|
2524
|
+
tablet: {
|
|
2525
|
+
display: "none";
|
|
2526
|
+
};
|
|
2542
2527
|
};
|
|
2543
2528
|
};
|
|
2529
|
+
vertical: {};
|
|
2544
2530
|
};
|
|
2545
2531
|
}>;
|
|
2546
2532
|
switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
|