@bitrise/bitkit-v2 0.3.303 → 0.3.305
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/BitkitLabeledData/BitkitLabeledData.d.ts +3 -0
- package/dist/components/BitkitLabeledData/BitkitLabeledData.js +5 -1
- package/dist/components/BitkitLabeledData/BitkitLabeledData.js.map +1 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js.map +1 -1
- package/dist/theme/slot-recipes/SplitButton.recipe.d.ts +11 -0
- package/dist/theme/slot-recipes/SplitButton.recipe.js +11 -2
- package/dist/theme/slot-recipes/SplitButton.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +11 -0
- package/package.json +1 -1
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { BoxProps } from '@chakra-ui/react/box';
|
|
2
|
+
import { BitkitTooltipProps } from '../BitkitTooltip/BitkitTooltip';
|
|
2
3
|
export interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {
|
|
3
4
|
label: string;
|
|
4
5
|
labelVariant?: 'primary' | 'secondary';
|
|
6
|
+
learnMoreTarget?: BitkitTooltipProps['learnMoreTarget'];
|
|
7
|
+
learnMoreUrl?: BitkitTooltipProps['learnMoreUrl'];
|
|
5
8
|
limitValue?: string;
|
|
6
9
|
placeholder?: string;
|
|
7
10
|
showWarning?: boolean;
|
|
@@ -13,7 +13,7 @@ var SKELETON_VALUE_HEIGHTS = {
|
|
|
13
13
|
"3xl": "40"
|
|
14
14
|
};
|
|
15
15
|
var BitkitLabeledData = forwardRef((props, ref) => {
|
|
16
|
-
const { label, labelVariant = "primary", limitValue, placeholder = "N/A", showWarning, size = "lg", state = "default", subtext, tooltip, tooltipAnchor = "value", value, variant = "default", ...rest } = props;
|
|
16
|
+
const { label, labelVariant = "primary", learnMoreTarget, learnMoreUrl, limitValue, placeholder = "N/A", showWarning, size = "lg", state = "default", subtext, tooltip, tooltipAnchor = "value", value, variant = "default", ...rest } = props;
|
|
17
17
|
const styles = useSlotRecipe({ key: "labeledData" })({ size: variant === "inline" ? void 0 : size });
|
|
18
18
|
if (variant === "inline") {
|
|
19
19
|
const isSm = size === "sm";
|
|
@@ -41,6 +41,8 @@ var BitkitLabeledData = forwardRef((props, ref) => {
|
|
|
41
41
|
})]
|
|
42
42
|
});
|
|
43
43
|
const wrapWithTooltip = (text, anchor) => tooltip && tooltipAnchor === anchor ? /* @__PURE__ */ jsx(BitkitDefinitionTooltip, {
|
|
44
|
+
learnMoreTarget,
|
|
45
|
+
learnMoreUrl,
|
|
44
46
|
text: tooltip,
|
|
45
47
|
children: text
|
|
46
48
|
}) : text;
|
|
@@ -69,6 +71,8 @@ var BitkitLabeledData = forwardRef((props, ref) => {
|
|
|
69
71
|
const labelContent = /* @__PURE__ */ jsxs(chakra.dt, {
|
|
70
72
|
css: styles.label,
|
|
71
73
|
children: [label, !!tooltip && /* @__PURE__ */ jsx(BitkitTooltip, {
|
|
74
|
+
learnMoreTarget,
|
|
75
|
+
learnMoreUrl,
|
|
72
76
|
text: tooltip,
|
|
73
77
|
children: /* @__PURE__ */ jsx(IconInfoCircle, {
|
|
74
78
|
size: "16",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitLabeledData.js","names":[],"sources":["../../../lib/components/BitkitLabeledData/BitkitLabeledData.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconInfoCircle, IconWarningYellow } from '../../icons';\nimport BitkitDefinitionTooltip from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n labelVariant?: 'primary' | 'secondary';\n limitValue?: string;\n placeholder?: string;\n showWarning?: boolean;\n size?: 'lg' | '2xl' | '3xl' | 'sm' | 'md';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n tooltipAnchor?: 'label' | 'value';\n value?: string;\n variant?: 'default' | 'inline';\n}\n\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\n// --- Component ---\n\nconst BitkitLabeledData = forwardRef<HTMLElement, BitkitLabeledDataProps>((props, ref) => {\n const {\n label,\n labelVariant = 'primary',\n limitValue,\n placeholder = 'N/A',\n showWarning,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n tooltipAnchor = 'value',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'labeledData' })({\n size: variant === 'inline' ? undefined : (size as 'lg' | '2xl' | '3xl'),\n });\n\n // --- Inline variant ---\n if (variant === 'inline') {\n const isSm = size === 'sm';\n const isPrimary = labelVariant === 'primary';\n const labelTextStyle = isPrimary\n ? isSm\n ? 'body/sm/semibold'\n : 'body/md/semibold'\n : isSm\n ? 'body/sm/regular'\n : 'body/md/regular';\n const labelEndsWithColon = label.endsWith(':') || label.endsWith('：');\n const colonSuffix = labelEndsWithColon ? '' : ':';\n\n if (state === 'skeleton') {\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {label}\n {colonSuffix}\n </chakra.span>\n <Skeleton height={isSm ? '16' : '20'} width=\"64\" />\n </chakra.div>\n </chakra.div>\n );\n }\n\n const wrapWithTooltip = (text: string, anchor: 'label' | 'value') =>\n tooltip && tooltipAnchor === anchor ? (\n <BitkitDefinitionTooltip text={tooltip}
|
|
1
|
+
{"version":3,"file":"BitkitLabeledData.js","names":[],"sources":["../../../lib/components/BitkitLabeledData/BitkitLabeledData.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconInfoCircle, IconWarningYellow } from '../../icons';\nimport BitkitDefinitionTooltip from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitTooltip, { type BitkitTooltipProps } from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n labelVariant?: 'primary' | 'secondary';\n learnMoreTarget?: BitkitTooltipProps['learnMoreTarget'];\n learnMoreUrl?: BitkitTooltipProps['learnMoreUrl'];\n limitValue?: string;\n placeholder?: string;\n showWarning?: boolean;\n size?: 'lg' | '2xl' | '3xl' | 'sm' | 'md';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n tooltipAnchor?: 'label' | 'value';\n value?: string;\n variant?: 'default' | 'inline';\n}\n\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\n// --- Component ---\n\nconst BitkitLabeledData = forwardRef<HTMLElement, BitkitLabeledDataProps>((props, ref) => {\n const {\n label,\n labelVariant = 'primary',\n learnMoreTarget,\n learnMoreUrl,\n limitValue,\n placeholder = 'N/A',\n showWarning,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n tooltipAnchor = 'value',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'labeledData' })({\n size: variant === 'inline' ? undefined : (size as 'lg' | '2xl' | '3xl'),\n });\n\n // --- Inline variant ---\n if (variant === 'inline') {\n const isSm = size === 'sm';\n const isPrimary = labelVariant === 'primary';\n const labelTextStyle = isPrimary\n ? isSm\n ? 'body/sm/semibold'\n : 'body/md/semibold'\n : isSm\n ? 'body/sm/regular'\n : 'body/md/regular';\n const labelEndsWithColon = label.endsWith(':') || label.endsWith('：');\n const colonSuffix = labelEndsWithColon ? '' : ':';\n\n if (state === 'skeleton') {\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {label}\n {colonSuffix}\n </chakra.span>\n <Skeleton height={isSm ? '16' : '20'} width=\"64\" />\n </chakra.div>\n </chakra.div>\n );\n }\n\n const wrapWithTooltip = (text: string, anchor: 'label' | 'value') =>\n tooltip && tooltipAnchor === anchor ? (\n <BitkitDefinitionTooltip learnMoreTarget={learnMoreTarget} learnMoreUrl={learnMoreUrl} text={tooltip}>\n {text}\n </BitkitDefinitionTooltip>\n ) : (\n text\n );\n\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {wrapWithTooltip(label, 'label')}\n {colonSuffix}\n </chakra.span>\n <chakra.span\n textStyle={isSm ? 'body/sm/regular' : 'body/md/regular'}\n color={!value ? 'text/tertiary' : 'text/body'}\n >\n {!value ? placeholder : wrapWithTooltip(value, 'value')}\n </chakra.span>\n </chakra.div>\n </chakra.div>\n );\n }\n\n // --- Default variant ---\n\n const labelContent = (\n <chakra.dt css={styles.label}>\n {label}\n {!!tooltip && (\n <BitkitTooltip learnMoreTarget={learnMoreTarget} learnMoreUrl={learnMoreUrl} text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n </chakra.dt>\n );\n\n if (state === 'skeleton') {\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <Skeleton height={SKELETON_VALUE_HEIGHTS[size as keyof typeof SKELETON_VALUE_HEIGHTS]} width=\"128\" />\n <Skeleton height=\"20\" width=\"128\" />\n </chakra.dl>\n );\n }\n\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <chakra.dd css={styles.value}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {value}\n {!!limitValue && <chakra.span css={styles.limit}>/ {limitValue}</chakra.span>}\n </>\n )}\n </chakra.dd>\n {!!subtext && <chakra.dd css={styles.helpText}>{subtext}</chakra.dd>}\n </chakra.dl>\n );\n});\n\nBitkitLabeledData.displayName = 'BitkitLabeledData';\n\nexport default BitkitLabeledData;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSplitButton.js","names":[],"sources":["../../../lib/components/BitkitSplitButton/BitkitSplitButton.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Group, type GroupProps } from '@chakra-ui/react/group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, forwardRef, isValidElement, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitButton, {\n type BitkitButtonAsAnchorProps,\n type BitkitButtonAsButtonProps,\n} from '../BitkitButton/BitkitButton';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\n\ntype Size = 'lg' | 'md' | 'sm';\ntype Variant = 'primary' | 'secondary';\ntype State = 'disabled' | 'loading' | 'skeleton';\n\nconst isValidActionItem = (child: ReactNode): child is ReactElement => {\n return isValidElement(child) && child.type === BitkitSplitButtonAction;\n};\n\nconst isValidMenuItem = (child: ReactNode): child is ReactElement => {\n return (\n isValidElement(child) &&\n (child.type === BitkitActionMenu.Group ||\n child.type === BitkitActionMenu.Item ||\n child.type === BitkitActionMenu.Separator)\n );\n};\n\n// --- Context ---\ninterface SplitButtonContext {\n size: Size;\n variant: Variant;\n state: State | undefined;\n styles: Record<string, SystemStyleObject>;\n}\n\nconst [SplitButtonProvider, useSplitButtonContext] = createContext<SplitButtonContext>({\n name: 'SplitButtonContext',\n hookName: 'useSplitButtonContext',\n providerName: '<BitkitSplitButton />',\n});\n\n// --- Action ---\n// Split-button action can be a button (default) or anchor (when href is set). asChild is intentionally\n// not part of the API — routing-library elements don't fit cleanly into the Group attached layout.\n// The forwarded ref is HTMLElement so it covers both <button> and <a>.\ntype BitkitSplitButtonActionProps = Omit<\n BitkitButtonAsButtonProps | BitkitButtonAsAnchorProps,\n 'size' | 'variant' | 'state'\n>;\n\nconst BitkitSplitButtonAction = forwardRef<HTMLElement, BitkitSplitButtonActionProps>((props, ref) => {\n const { size, state, styles, variant } = useSplitButtonContext();\n\n if (props.href !== undefined) {\n // Anchor branch: BitkitButton's anchor variant doesn't allow state=\"loading\". Coerce to \"disabled\"\n // so a SplitButton-wide loading state still surfaces visually on a link-mode action.\n return (\n <BitkitButton\n {...(props as BitkitButtonAsAnchorProps)}\n css={styles.action}\n ref={ref}\n size={size}\n state={state === 'loading' ? 'disabled' : state}\n variant={variant}\n />\n );\n }\n\n return (\n <BitkitButton\n {...(props as BitkitButtonAsButtonProps)}\n css={styles.action}\n ref={ref}\n size={size}\n state={state}\n variant={variant}\n />\n );\n});\n\nBitkitSplitButtonAction.displayName = 'BitkitSplitButtonAction';\n\n// --- Root ---\nexport type BitkitSplitButtonProps = PropsWithChildren<\n Omit<GroupProps, 'attached' | 'children' | 'display'> & {\n size?: Size;\n variant?: Variant;\n state?: State;\n }\n>;\n\nconst BitkitSplitButton = forwardRef<HTMLDivElement, BitkitSplitButtonProps>((props, ref) => {\n const { children, size = 'lg', state, variant = 'primary', ...rest } = props;\n\n const childArray = Children.toArray(children);\n const actionChild = childArray.find(isValidActionItem);\n const menuItems = childArray.filter(isValidMenuItem);\n\n const menuSize = size === 'lg' ? 'lg' : 'md';\n const recipe = useSlotRecipe({ key: 'splitButton' });\n const styles = recipe({ variant });\n\n return (\n <SplitButtonProvider value={{ size, state, styles, variant }}>\n <Skeleton asChild loading={state === 'skeleton'}>\n <Group ref={ref} {...rest} attached display=\"inline-flex\">\n {actionChild}\n <BitkitActionMenu.Root\n size={menuSize}\n trigger={\n <BitkitIconButton\n css={styles.trigger}\n icon={IconChevronDown}\n label=\"Toggle menu\"\n size={size}\n state={state === 'loading' ? 'disabled' : state}\n tooltipProps={{ disabled: true }}\n variant={variant}\n />\n }\n positioning={{ placement: 'bottom-end' }}\n >\n {menuItems}\n </BitkitActionMenu.Root>\n </Group>\n </Skeleton>\n </SplitButtonProvider>\n );\n});\nBitkitSplitButton.displayName = 'BitkitSplitButton';\n\nexport default withSubComponents(BitkitSplitButton, {\n Action: BitkitSplitButtonAction,\n Group: BitkitActionMenu.Group,\n Item: BitkitActionMenu.Item,\n Separator: BitkitActionMenu.Separator,\n});\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAM,qBAAqB,UAA4C;CACrE,OAAO,eAAe,KAAK,KAAK,MAAM,SAAS;AACjD;AAEA,IAAM,mBAAmB,UAA4C;CACnE,OACE,eAAe,KAAK,MACnB,MAAM,SAAS,iBAAiB,SAC/B,MAAM,SAAS,iBAAiB,QAChC,MAAM,SAAS,iBAAiB;AAEtC;AAUA,IAAM,CAAC,qBAAqB,yBAAyB,gBAAkC;CACrF,MAAM;CACN,UAAU;CACV,cAAc;AAChB,CAAC;AAWD,IAAM,0BAA0B,YAAuD,OAAO,QAAQ;CACpG,MAAM,EAAE,MAAM,OAAO,QAAQ,YAAY,sBAAsB;CAE/D,IAAI,MAAM,SAAS,KAAA,GAGjB,OACE,oBAAC,cAAD;EACE,GAAK;EACL,KAAK,OAAO;EACP;EACC;EACN,OAAO,UAAU,YAAY,aAAa;EACjC;CACV,CAAA;CAIL,OACE,oBAAC,cAAD;EACE,GAAK;EACL,KAAK,OAAO;EACP;EACC;EACC;EACE;CACV,CAAA;AAEL,CAAC;AAED,wBAAwB,cAAc;AAWtC,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EAAE,UAAU,OAAO,MAAM,OAAO,UAAU,WAAW,GAAG,SAAS;CAEvE,MAAM,aAAa,SAAS,QAAQ,QAAQ;CAC5C,MAAM,cAAc,WAAW,KAAK,iBAAiB;CACrD,MAAM,YAAY,WAAW,OAAO,eAAe;CAEnD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,CAAA,CAAO,EAAE,QAAQ,CAAC;CAEjC,OACE,oBAAC,qBAAD;EAAqB,OAAO;GAAE;GAAM;GAAO;GAAQ;EAAQ;YACzD,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAS,UAAU;aACnC,qBAAC,OAAD;IAAY;IAAK,GAAI;IAAM,UAAA;IAAS,SAAQ;cAA5C,CACG,aACD,oBAAC,iBAAiB,MAAlB;KACE,MAAM;KACN,SACE,oBAAC,kBAAD;MACE,KAAK,OAAO;MACZ,MAAM;MACN,OAAM;MACA;MACN,OAAO,UAAU,YAAY,aAAa;
|
|
1
|
+
{"version":3,"file":"BitkitSplitButton.js","names":[],"sources":["../../../lib/components/BitkitSplitButton/BitkitSplitButton.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Group, type GroupProps } from '@chakra-ui/react/group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, forwardRef, isValidElement, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitButton, {\n type BitkitButtonAsAnchorProps,\n type BitkitButtonAsButtonProps,\n} from '../BitkitButton/BitkitButton';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\n\ntype Size = 'lg' | 'md' | 'sm';\ntype Variant = 'primary' | 'secondary';\ntype State = 'disabled' | 'loading' | 'skeleton';\n\nconst isValidActionItem = (child: ReactNode): child is ReactElement => {\n return isValidElement(child) && child.type === BitkitSplitButtonAction;\n};\n\nconst isValidMenuItem = (child: ReactNode): child is ReactElement => {\n return (\n isValidElement(child) &&\n (child.type === BitkitActionMenu.Group ||\n child.type === BitkitActionMenu.Item ||\n child.type === BitkitActionMenu.Separator)\n );\n};\n\n// --- Context ---\ninterface SplitButtonContext {\n size: Size;\n variant: Variant;\n state: State | undefined;\n styles: Record<string, SystemStyleObject>;\n}\n\nconst [SplitButtonProvider, useSplitButtonContext] = createContext<SplitButtonContext>({\n name: 'SplitButtonContext',\n hookName: 'useSplitButtonContext',\n providerName: '<BitkitSplitButton />',\n});\n\n// --- Action ---\n// Split-button action can be a button (default) or anchor (when href is set). asChild is intentionally\n// not part of the API — routing-library elements don't fit cleanly into the Group attached layout.\n// The forwarded ref is HTMLElement so it covers both <button> and <a>.\ntype BitkitSplitButtonActionProps = Omit<\n BitkitButtonAsButtonProps | BitkitButtonAsAnchorProps,\n 'size' | 'variant' | 'state'\n>;\n\nconst BitkitSplitButtonAction = forwardRef<HTMLElement, BitkitSplitButtonActionProps>((props, ref) => {\n const { size, state, styles, variant } = useSplitButtonContext();\n\n if (props.href !== undefined) {\n // Anchor branch: BitkitButton's anchor variant doesn't allow state=\"loading\". Coerce to \"disabled\"\n // so a SplitButton-wide loading state still surfaces visually on a link-mode action.\n return (\n <BitkitButton\n {...(props as BitkitButtonAsAnchorProps)}\n css={styles.action}\n ref={ref}\n size={size}\n state={state === 'loading' ? 'disabled' : state}\n variant={variant}\n />\n );\n }\n\n return (\n <BitkitButton\n {...(props as BitkitButtonAsButtonProps)}\n css={styles.action}\n ref={ref}\n size={size}\n state={state}\n variant={variant}\n />\n );\n});\n\nBitkitSplitButtonAction.displayName = 'BitkitSplitButtonAction';\n\n// --- Root ---\nexport type BitkitSplitButtonProps = PropsWithChildren<\n Omit<GroupProps, 'attached' | 'children' | 'display'> & {\n size?: Size;\n variant?: Variant;\n state?: State;\n }\n>;\n\nconst BitkitSplitButton = forwardRef<HTMLDivElement, BitkitSplitButtonProps>((props, ref) => {\n const { children, size = 'lg', state, variant = 'primary', ...rest } = props;\n\n const childArray = Children.toArray(children);\n const actionChild = childArray.find(isValidActionItem);\n const menuItems = childArray.filter(isValidMenuItem);\n\n const menuSize = size === 'lg' ? 'lg' : 'md';\n const recipe = useSlotRecipe({ key: 'splitButton' });\n const styles = recipe({ variant });\n\n return (\n <SplitButtonProvider value={{ size, state, styles, variant }}>\n <Skeleton asChild loading={state === 'skeleton'}>\n <Group ref={ref} {...rest} attached display=\"inline-flex\">\n {actionChild}\n <BitkitActionMenu.Root\n size={menuSize}\n trigger={\n <BitkitIconButton\n css={styles.trigger}\n icon={IconChevronDown}\n label=\"Toggle menu\"\n size={size}\n state={state === 'loading' ? 'disabled' : state}\n // Design decision: no tooltip on the menu trigger — the label stays as aria-label\n tooltipProps={{ disabled: true }}\n variant={variant}\n />\n }\n positioning={{ placement: 'bottom-end' }}\n >\n {menuItems}\n </BitkitActionMenu.Root>\n </Group>\n </Skeleton>\n </SplitButtonProvider>\n );\n});\nBitkitSplitButton.displayName = 'BitkitSplitButton';\n\nexport default withSubComponents(BitkitSplitButton, {\n Action: BitkitSplitButtonAction,\n Group: BitkitActionMenu.Group,\n Item: BitkitActionMenu.Item,\n Separator: BitkitActionMenu.Separator,\n});\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAM,qBAAqB,UAA4C;CACrE,OAAO,eAAe,KAAK,KAAK,MAAM,SAAS;AACjD;AAEA,IAAM,mBAAmB,UAA4C;CACnE,OACE,eAAe,KAAK,MACnB,MAAM,SAAS,iBAAiB,SAC/B,MAAM,SAAS,iBAAiB,QAChC,MAAM,SAAS,iBAAiB;AAEtC;AAUA,IAAM,CAAC,qBAAqB,yBAAyB,gBAAkC;CACrF,MAAM;CACN,UAAU;CACV,cAAc;AAChB,CAAC;AAWD,IAAM,0BAA0B,YAAuD,OAAO,QAAQ;CACpG,MAAM,EAAE,MAAM,OAAO,QAAQ,YAAY,sBAAsB;CAE/D,IAAI,MAAM,SAAS,KAAA,GAGjB,OACE,oBAAC,cAAD;EACE,GAAK;EACL,KAAK,OAAO;EACP;EACC;EACN,OAAO,UAAU,YAAY,aAAa;EACjC;CACV,CAAA;CAIL,OACE,oBAAC,cAAD;EACE,GAAK;EACL,KAAK,OAAO;EACP;EACC;EACC;EACE;CACV,CAAA;AAEL,CAAC;AAED,wBAAwB,cAAc;AAWtC,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EAAE,UAAU,OAAO,MAAM,OAAO,UAAU,WAAW,GAAG,SAAS;CAEvE,MAAM,aAAa,SAAS,QAAQ,QAAQ;CAC5C,MAAM,cAAc,WAAW,KAAK,iBAAiB;CACrD,MAAM,YAAY,WAAW,OAAO,eAAe;CAEnD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,CAAA,CAAO,EAAE,QAAQ,CAAC;CAEjC,OACE,oBAAC,qBAAD;EAAqB,OAAO;GAAE;GAAM;GAAO;GAAQ;EAAQ;YACzD,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAS,UAAU;aACnC,qBAAC,OAAD;IAAY;IAAK,GAAI;IAAM,UAAA;IAAS,SAAQ;cAA5C,CACG,aACD,oBAAC,iBAAiB,MAAlB;KACE,MAAM;KACN,SACE,oBAAC,kBAAD;MACE,KAAK,OAAO;MACZ,MAAM;MACN,OAAM;MACA;MACN,OAAO,UAAU,YAAY,aAAa;MAE1C,cAAc,EAAE,UAAU,KAAK;MACtB;KACV,CAAA;KAEH,aAAa,EAAE,WAAW,aAAa;eAEtC;IACoB,CAAA,CAClB;;EACC,CAAA;CACS,CAAA;AAEzB,CAAC;AACD,kBAAkB,cAAc;AAEhC,IAAA,4BAAe,kBAAkB,mBAAmB;CAClD,QAAQ;CACR,OAAO,iBAAiB;CACxB,MAAM,iBAAiB;CACvB,WAAW,iBAAiB;AAC9B,CAAC"}
|
|
@@ -19,6 +19,9 @@ declare const splitButtonSlotRecipe: import('@chakra-ui/react').SlotRecipeDefini
|
|
|
19
19
|
};
|
|
20
20
|
_open: {
|
|
21
21
|
backgroundColor: "button/primary/bg-active";
|
|
22
|
+
_disabled: {
|
|
23
|
+
backgroundColor: "button/primary/bg-disabled";
|
|
24
|
+
};
|
|
22
25
|
};
|
|
23
26
|
};
|
|
24
27
|
};
|
|
@@ -31,6 +34,14 @@ declare const splitButtonSlotRecipe: import('@chakra-ui/react').SlotRecipeDefini
|
|
|
31
34
|
_icon: {
|
|
32
35
|
color: "button/secondary/icon-active";
|
|
33
36
|
};
|
|
37
|
+
_disabled: {
|
|
38
|
+
backgroundColor: "button/secondary/bg-disabled";
|
|
39
|
+
borderColor: "button/secondary/border-disabled";
|
|
40
|
+
color: "button/secondary/text-disabled";
|
|
41
|
+
_icon: {
|
|
42
|
+
color: "button/secondary/icon-disabled";
|
|
43
|
+
};
|
|
44
|
+
};
|
|
34
45
|
};
|
|
35
46
|
};
|
|
36
47
|
};
|
|
@@ -28,13 +28,22 @@ var splitButtonSlotRecipe = defineSlotRecipe({
|
|
|
28
28
|
},
|
|
29
29
|
_active: { borderInlineStartColor: "border/on-contrast" },
|
|
30
30
|
_disabled: { borderInlineStartColor: "border/strong" },
|
|
31
|
-
_open: {
|
|
31
|
+
_open: {
|
|
32
|
+
backgroundColor: "button/primary/bg-active",
|
|
33
|
+
_disabled: { backgroundColor: "button/primary/bg-disabled" }
|
|
34
|
+
}
|
|
32
35
|
} },
|
|
33
36
|
secondary: { trigger: { _open: {
|
|
34
37
|
backgroundColor: "button/secondary/bg-active",
|
|
35
38
|
borderColor: "button/secondary/border-active",
|
|
36
39
|
color: "button/secondary/text-active",
|
|
37
|
-
_icon: { color: "button/secondary/icon-active" }
|
|
40
|
+
_icon: { color: "button/secondary/icon-active" },
|
|
41
|
+
_disabled: {
|
|
42
|
+
backgroundColor: "button/secondary/bg-disabled",
|
|
43
|
+
borderColor: "button/secondary/border-disabled",
|
|
44
|
+
color: "button/secondary/text-disabled",
|
|
45
|
+
_icon: { color: "button/secondary/icon-disabled" }
|
|
46
|
+
}
|
|
38
47
|
} } }
|
|
39
48
|
} },
|
|
40
49
|
defaultVariants: { variant: "primary" }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitButton.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/SplitButton.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst splitButtonSlotRecipe = defineSlotRecipe({\n slots: ['root', 'action', 'trigger'],\n className: 'split-button',\n base: {\n action: {\n borderStartEndRadius: 0,\n borderEndEndRadius: 0,\n },\n trigger: {\n borderStartStartRadius: 0,\n borderEndStartRadius: 0,\n },\n },\n variants: {\n variant: {\n primary: {\n trigger: {\n borderWidth: 0,\n borderInlineStartWidth: '1',\n borderInlineStartColor: 'border/on-contrast',\n _hover: {\n borderInlineStartColor: 'border/on-contrast',\n _active: {\n borderInlineStartColor: 'border/on-contrast',\n },\n },\n _active: {\n borderInlineStartColor: 'border/on-contrast',\n },\n // Covers both disabled and loading (Chakra's loading button is also disabled). On the\n // gray bg-disabled background the on-contrast divider would be invisible.\n _disabled: {\n borderInlineStartColor: 'border/strong',\n },\n _open: {\n backgroundColor: 'button/primary/bg-active',\n },\n },\n },\n secondary: {\n trigger: {\n _open: {\n backgroundColor: 'button/secondary/bg-active',\n borderColor: 'button/secondary/border-active',\n color: 'button/secondary/text-active',\n _icon: { color: 'button/secondary/icon-active' },\n },\n },\n },\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n});\n\nexport default splitButtonSlotRecipe;\n"],"mappings":";;AAEA,IAAM,wBAAwB,iBAAiB;CAC7C,OAAO;EAAC;EAAQ;EAAU;CAAS;CACnC,WAAW;CACX,MAAM;EACJ,QAAQ;GACN,sBAAsB;GACtB,oBAAoB;EACtB;EACA,SAAS;GACP,wBAAwB;GACxB,sBAAsB;EACxB;CACF;CACA,UAAU,EACR,SAAS;EACP,SAAS,EACP,SAAS;GACP,aAAa;GACb,wBAAwB;GACxB,wBAAwB;GACxB,QAAQ;IACN,wBAAwB;IACxB,SAAS,EACP,wBAAwB,qBAC1B;GACF;GACA,SAAS,EACP,wBAAwB,qBAC1B;GAGA,WAAW,EACT,wBAAwB,gBAC1B;GACA,OAAO,
|
|
1
|
+
{"version":3,"file":"SplitButton.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/SplitButton.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst splitButtonSlotRecipe = defineSlotRecipe({\n slots: ['root', 'action', 'trigger'],\n className: 'split-button',\n base: {\n action: {\n borderStartEndRadius: 0,\n borderEndEndRadius: 0,\n },\n trigger: {\n borderStartStartRadius: 0,\n borderEndStartRadius: 0,\n },\n },\n variants: {\n variant: {\n primary: {\n trigger: {\n borderWidth: 0,\n borderInlineStartWidth: '1',\n borderInlineStartColor: 'border/on-contrast',\n _hover: {\n borderInlineStartColor: 'border/on-contrast',\n _active: {\n borderInlineStartColor: 'border/on-contrast',\n },\n },\n _active: {\n borderInlineStartColor: 'border/on-contrast',\n },\n // Covers both disabled and loading (Chakra's loading button is also disabled). On the\n // gray bg-disabled background the on-contrast divider would be invisible.\n _disabled: {\n borderInlineStartColor: 'border/strong',\n },\n _open: {\n backgroundColor: 'button/primary/bg-active',\n // _open has no :not(:disabled) guard (unlike _hover/_active) and Zag keeps an already-open\n // menu open when its trigger turns disabled — repeat the disabled colors so they win the tie.\n _disabled: {\n backgroundColor: 'button/primary/bg-disabled',\n },\n },\n },\n },\n secondary: {\n trigger: {\n _open: {\n backgroundColor: 'button/secondary/bg-active',\n borderColor: 'button/secondary/border-active',\n color: 'button/secondary/text-active',\n _icon: { color: 'button/secondary/icon-active' },\n // Same _open vs _disabled tie as the primary variant — disabled colors must win.\n _disabled: {\n backgroundColor: 'button/secondary/bg-disabled',\n borderColor: 'button/secondary/border-disabled',\n color: 'button/secondary/text-disabled',\n _icon: { color: 'button/secondary/icon-disabled' },\n },\n },\n },\n },\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n});\n\nexport default splitButtonSlotRecipe;\n"],"mappings":";;AAEA,IAAM,wBAAwB,iBAAiB;CAC7C,OAAO;EAAC;EAAQ;EAAU;CAAS;CACnC,WAAW;CACX,MAAM;EACJ,QAAQ;GACN,sBAAsB;GACtB,oBAAoB;EACtB;EACA,SAAS;GACP,wBAAwB;GACxB,sBAAsB;EACxB;CACF;CACA,UAAU,EACR,SAAS;EACP,SAAS,EACP,SAAS;GACP,aAAa;GACb,wBAAwB;GACxB,wBAAwB;GACxB,QAAQ;IACN,wBAAwB;IACxB,SAAS,EACP,wBAAwB,qBAC1B;GACF;GACA,SAAS,EACP,wBAAwB,qBAC1B;GAGA,WAAW,EACT,wBAAwB,gBAC1B;GACA,OAAO;IACL,iBAAiB;IAGjB,WAAW,EACT,iBAAiB,6BACnB;GACF;EACF,EACF;EACA,WAAW,EACT,SAAS,EACP,OAAO;GACL,iBAAiB;GACjB,aAAa;GACb,OAAO;GACP,OAAO,EAAE,OAAO,+BAA+B;GAE/C,WAAW;IACT,iBAAiB;IACjB,aAAa;IACb,OAAO;IACP,OAAO,EAAE,OAAO,iCAAiC;GACnD;EACF,EACF,EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC"}
|
|
@@ -1825,6 +1825,9 @@ declare const slotRecipes: {
|
|
|
1825
1825
|
};
|
|
1826
1826
|
_open: {
|
|
1827
1827
|
backgroundColor: "button/primary/bg-active";
|
|
1828
|
+
_disabled: {
|
|
1829
|
+
backgroundColor: "button/primary/bg-disabled";
|
|
1830
|
+
};
|
|
1828
1831
|
};
|
|
1829
1832
|
};
|
|
1830
1833
|
};
|
|
@@ -1837,6 +1840,14 @@ declare const slotRecipes: {
|
|
|
1837
1840
|
_icon: {
|
|
1838
1841
|
color: "button/secondary/icon-active";
|
|
1839
1842
|
};
|
|
1843
|
+
_disabled: {
|
|
1844
|
+
backgroundColor: "button/secondary/bg-disabled";
|
|
1845
|
+
borderColor: "button/secondary/border-disabled";
|
|
1846
|
+
color: "button/secondary/text-disabled";
|
|
1847
|
+
_icon: {
|
|
1848
|
+
color: "button/secondary/icon-disabled";
|
|
1849
|
+
};
|
|
1850
|
+
};
|
|
1840
1851
|
};
|
|
1841
1852
|
};
|
|
1842
1853
|
};
|