@bitrise/bitkit-v2 0.3.468 → 0.3.469
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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"}
|
|
@@ -2457,60 +2457,46 @@ declare const slotRecipes: {
|
|
|
2457
2457
|
orientation: {
|
|
2458
2458
|
horizontal: {
|
|
2459
2459
|
list: {
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
item: {
|
|
2464
|
-
alignItems: "center";
|
|
2465
|
-
borderTopWidth: "2";
|
|
2466
|
-
paddingBlock: "16";
|
|
2467
|
-
paddingInlineEnd: "24";
|
|
2468
|
-
"&[data-step-status=inProgress]": {
|
|
2469
|
-
_before: {
|
|
2470
|
-
content: "\"\"";
|
|
2471
|
-
position: "absolute";
|
|
2472
|
-
insetBlockStart: "-2px";
|
|
2473
|
-
insetInlineStart: number;
|
|
2474
|
-
width: "50%";
|
|
2475
|
-
height: "2";
|
|
2476
|
-
bg: "border/selected";
|
|
2477
|
-
};
|
|
2460
|
+
tablet: {
|
|
2461
|
+
alignItems: "center";
|
|
2462
|
+
flexDirection: "row";
|
|
2478
2463
|
};
|
|
2479
2464
|
};
|
|
2480
|
-
};
|
|
2481
|
-
vertical: {
|
|
2482
|
-
list: {
|
|
2483
|
-
flexDirection: "column";
|
|
2484
|
-
alignItems: "stretch";
|
|
2485
|
-
};
|
|
2486
2465
|
item: {
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
bg: "border/selected";
|
|
2466
|
+
tablet: {
|
|
2467
|
+
alignItems: "center";
|
|
2468
|
+
borderBlockStartWidth: "2";
|
|
2469
|
+
borderInlineStartWidth: number;
|
|
2470
|
+
paddingBlock: "16";
|
|
2471
|
+
paddingInlineStart: number;
|
|
2472
|
+
'&:last-of-type': {
|
|
2473
|
+
paddingBlockEnd: "16";
|
|
2474
|
+
};
|
|
2475
|
+
"&[data-step-status=inProgress]": {
|
|
2476
|
+
_before: {
|
|
2477
|
+
height: "2";
|
|
2478
|
+
insetBlockStart: "-2px";
|
|
2479
|
+
insetInlineStart: number;
|
|
2480
|
+
width: "50%";
|
|
2481
|
+
};
|
|
2504
2482
|
};
|
|
2505
2483
|
};
|
|
2506
2484
|
};
|
|
2507
2485
|
trigger: {
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2486
|
+
tablet: {
|
|
2487
|
+
alignItems: "center";
|
|
2488
|
+
flexDirection: "row";
|
|
2489
|
+
gap: "8";
|
|
2490
|
+
paddingBlockStart: number;
|
|
2491
|
+
};
|
|
2492
|
+
};
|
|
2493
|
+
description: {
|
|
2494
|
+
tablet: {
|
|
2495
|
+
display: "none";
|
|
2496
|
+
};
|
|
2512
2497
|
};
|
|
2513
2498
|
};
|
|
2499
|
+
vertical: {};
|
|
2514
2500
|
};
|
|
2515
2501
|
}>;
|
|
2516
2502
|
switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
|