@bitrise/bitkit-v2 0.3.268 → 0.3.270
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/BitkitAlert/BitkitAlert.js +2 -1
- package/dist/components/BitkitAlert/BitkitAlert.js.map +1 -1
- package/dist/theme/slot-recipes/Alert.recipe.js +2 -2
- package/dist/theme/slot-recipes/Alert.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Tabs.recipe.d.ts +6 -4
- package/dist/theme/slot-recipes/Tabs.recipe.js +6 -4
- package/dist/theme/slot-recipes/Tabs.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +6 -4
- package/package.json +1 -1
|
@@ -38,6 +38,7 @@ var BitkitAlert = (props) => {
|
|
|
38
38
|
rel: action.target === "_blank" ? "noopener noreferrer" : void 0
|
|
39
39
|
},
|
|
40
40
|
onClick: action.onClick,
|
|
41
|
+
marginBlock: rem(-4),
|
|
41
42
|
marginInlineEnd: "12",
|
|
42
43
|
whiteSpace: "nowrap",
|
|
43
44
|
children: action.label
|
|
@@ -45,7 +46,7 @@ var BitkitAlert = (props) => {
|
|
|
45
46
|
}),
|
|
46
47
|
!!dismissible && /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
47
48
|
alignSelf: "flex-start",
|
|
48
|
-
|
|
49
|
+
marginBlock: rem(-4),
|
|
49
50
|
size: "sm",
|
|
50
51
|
onClick: onClose,
|
|
51
52
|
colorVariant: BUTTON_COLORS_MAP[variant]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n action?: ActionProps;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n titleText?: ReactNode;\n variant: AlertVariants;\n}\n\nconst BitkitAlert = (props: BitkitAlertProps) => {\n const { action, dismissible, messageText, onClose, titleText, variant, ...rest } = props;\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n\n return (\n <Alert.Root variant={variant} {...rest}>\n <Alert.Indicator asChild={variant !== 'progress'}>\n <IconComponent />\n </Alert.Indicator>\n <Box display=\"flex\" flex=\"1\" minWidth=\"0\" flexWrap=\"wrap\" alignItems=\"center\" columnGap=\"16\" rowGap={rem(11)}>\n <Alert.Content minWidth=\"0\" flex={`1 1 ${rem(240)}`}>\n {titleText && <Alert.Title>{titleText}</Alert.Title>}\n <Alert.Description>{messageText}</Alert.Description>\n </Alert.Content>\n {!!action && (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={BUTTON_COLORS_MAP[variant]}\n {...(action.href && {\n href: action.href,\n target: action.target,\n rel: action.target === '_blank' ? 'noopener noreferrer' : undefined,\n })}\n onClick={action.onClick}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n )}\n </Box>\n {!!dismissible && (\n <BitkitCloseButton\n
|
|
1
|
+
{"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n action?: ActionProps;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n titleText?: ReactNode;\n variant: AlertVariants;\n}\n\nconst BitkitAlert = (props: BitkitAlertProps) => {\n const { action, dismissible, messageText, onClose, titleText, variant, ...rest } = props;\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n\n return (\n <Alert.Root variant={variant} {...rest}>\n <Alert.Indicator asChild={variant !== 'progress'}>\n <IconComponent />\n </Alert.Indicator>\n {/* content + action share a wrapping row so the action drops below the text on narrow widths */}\n <Box display=\"flex\" flex=\"1\" minWidth=\"0\" flexWrap=\"wrap\" alignItems=\"center\" columnGap=\"16\" rowGap={rem(11)}>\n <Alert.Content minWidth=\"0\" flex={`1 1 ${rem(240)}`}>\n {titleText && <Alert.Title>{titleText}</Alert.Title>}\n <Alert.Description>{messageText}</Alert.Description>\n </Alert.Content>\n {!!action && (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={BUTTON_COLORS_MAP[variant]}\n {...(action.href && {\n href: action.href,\n target: action.target,\n rel: action.target === '_blank' ? 'noopener noreferrer' : undefined,\n })}\n onClick={action.onClick}\n // 32px button rides the ~24px text line without growing the row, so `align-items:\n // center` lines it up with the icon/text on a single line and centers it on multi-line.\n marginBlock={rem(-4)}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n )}\n </Box>\n {!!dismissible && (\n <BitkitCloseButton\n // same trick as the action button: negative block margin keeps the 32px button from\n // inflating a single-line row, while `flex-start` pins it to the first line.\n alignSelf=\"flex-start\"\n marginBlock={rem(-4)}\n size=\"sm\"\n onClick={onClose}\n colorVariant={BUTTON_COLORS_MAP[variant]}\n />\n )}\n </Alert.Root>\n );\n};\n\nexport default BitkitAlert;\n"],"mappings":";;;;;;;;AAsBA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,QAAQ,aAAa,aAAa,SAAS,WAAW,SAAS,GAAG,SAAS;CACnF,MAAM,gBAAgB,oBAAoB;CAE1C,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAS,GAAI;YAAlC;GACE,oBAAC,MAAM,WAAP;IAAiB,SAAS,YAAY;cACpC,oBAAC,eAAD,CAAgB,CAAA;GACD,CAAA;GAEjB,qBAAC,KAAD;IAAK,SAAQ;IAAO,MAAK;IAAI,UAAS;IAAI,UAAS;IAAO,YAAW;IAAS,WAAU;IAAK,QAAQ,IAAI,EAAE;cAA3G,CACE,qBAAC,MAAM,SAAP;KAAe,UAAS;KAAI,MAAM,OAAO,IAAI,GAAG;eAAhD,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC;QACd,CAAC,CAAC,UACD,oBAAC,mBAAD;KACE,IAAI,OAAO,OAAO,MAAM;KACxB,cAAc,kBAAkB;KAChC,GAAK,OAAO,QAAQ;MAClB,MAAM,OAAO;MACb,QAAQ,OAAO;MACf,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;KAC5D;KACA,SAAS,OAAO;KAGhB,aAAa,IAAI,EAAE;KACnB,iBAAgB;KAChB,YAAW;eAEV,OAAO;IACS,CAAA,CAElB;;GACJ,CAAC,CAAC,eACD,oBAAC,mBAAD;IAGE,WAAU;IACV,aAAa,IAAI,EAAE;IACnB,MAAK;IACL,SAAS;IACT,cAAc,kBAAkB;GACjC,CAAA;EAEO;;AAEhB"}
|
|
@@ -13,8 +13,8 @@ var alertSlotRecipe = defineSlotRecipe({
|
|
|
13
13
|
border: "1px solid",
|
|
14
14
|
borderRadius: "8",
|
|
15
15
|
paddingBlock: rem(11),
|
|
16
|
-
paddingInlineStart:
|
|
17
|
-
paddingInlineEnd:
|
|
16
|
+
paddingInlineStart: "12",
|
|
17
|
+
paddingInlineEnd: "8",
|
|
18
18
|
width: "100%"
|
|
19
19
|
},
|
|
20
20
|
indicator: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Alert.recipe.ts"],"sourcesContent":["import { alertAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst alertSlotRecipe = defineSlotRecipe({\n className: 'alert',\n slots: alertAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n alignItems: 'center',\n border: '1px solid',\n borderRadius: '8',\n paddingBlock: rem(11),\n paddingInlineStart:
|
|
1
|
+
{"version":3,"file":"Alert.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Alert.recipe.ts"],"sourcesContent":["import { alertAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst alertSlotRecipe = defineSlotRecipe({\n className: 'alert',\n slots: alertAnatomy.keys(),\n base: {\n // Everything is vertically centered. The icon hugs the top (`flex-start` below) so it lines\n // up with the first text line on multi-line alerts; the 32px action/close buttons ride the\n // text line via a negative block margin (see BitkitAlert.tsx) so they don't grow the row.\n // `rem(11)` block padding (not 12) lands the single-line alert on exactly 48px once the 1px\n // border is added.\n root: {\n display: 'flex',\n alignItems: 'center',\n border: '1px solid',\n borderRadius: '8',\n paddingBlock: rem(11),\n paddingInlineStart: '12',\n paddingInlineEnd: '8',\n width: '100%',\n },\n indicator: {\n alignSelf: 'flex-start',\n marginInlineEnd: '8',\n width: '24',\n height: '24',\n },\n content: {\n flex: '1',\n },\n title: {\n textStyle: 'comp/notification/title',\n '& + *': {\n marginBlockStart: '4',\n },\n },\n description: {\n textStyle: 'comp/notification/message',\n '&:first-of-type': {\n marginBlockStart: '2',\n },\n },\n },\n variants: {\n variant: Object.fromEntries(\n NOTIFICATION_VARIANTS.map((v) => [\n v,\n {\n indicator: { color: ICONS_MAP[v] },\n root: { ...ROOT_MAP[v], color: TEXT_MAP[v] },\n },\n ]),\n ),\n },\n defaultVariants: {\n variant: 'info',\n },\n});\n\nexport default alertSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,kBAAkB,iBAAiB;CACvC,WAAW;CACX,OAAO,aAAa,KAAK;CACzB,MAAM;EAMJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,cAAc,IAAI,EAAE;GACpB,oBAAoB;GACpB,kBAAkB;GAClB,OAAO;EACT;EACA,WAAW;GACT,WAAW;GACX,iBAAiB;GACjB,OAAO;GACP,QAAQ;EACV;EACA,SAAS,EACP,MAAM,IACR;EACA,OAAO;GACL,WAAW;GACX,SAAS,EACP,kBAAkB,IACpB;EACF;EACA,aAAa;GACX,WAAW;GACX,mBAAmB,EACjB,kBAAkB,IACpB;EACF;CACF;CACA,UAAU,EACR,SAAS,OAAO,YACd,sBAAsB,KAAK,MAAM,CAC/B,GACA;EACE,WAAW,EAAE,OAAO,UAAU,GAAG;EACjC,MAAM;GAAE,GAAG,SAAS;GAAI,OAAO,SAAS;EAAG;CAC7C,CACF,CAAC,CACH,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
|
|
@@ -63,12 +63,10 @@ declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"c
|
|
|
63
63
|
};
|
|
64
64
|
};
|
|
65
65
|
moreTrigger: {
|
|
66
|
-
textStyle: "body/lg/
|
|
66
|
+
textStyle: "body/lg/regular";
|
|
67
67
|
paddingInline: "16";
|
|
68
|
-
|
|
69
|
-
paddingBlockEnd: "12";
|
|
68
|
+
paddingBlock: "12";
|
|
70
69
|
backgroundColor: "background/tertiary";
|
|
71
|
-
borderBlockStart: "2px solid transparent";
|
|
72
70
|
_hover: {
|
|
73
71
|
backgroundColor: "background/active";
|
|
74
72
|
color: "text/primary";
|
|
@@ -98,6 +96,10 @@ declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"c
|
|
|
98
96
|
bottom: "-1px";
|
|
99
97
|
borderInlineEnd: "1px solid";
|
|
100
98
|
borderColor: "border/regular";
|
|
99
|
+
'&:first-of-type': {
|
|
100
|
+
borderInlineStartWidth: "1";
|
|
101
|
+
borderInlineStartStyle: "solid";
|
|
102
|
+
};
|
|
101
103
|
_hover: {
|
|
102
104
|
backgroundColor: "background/primary";
|
|
103
105
|
color: "text/primary";
|
|
@@ -94,12 +94,10 @@ var tabsSlotRecipe = defineSlotRecipe({
|
|
|
94
94
|
}
|
|
95
95
|
},
|
|
96
96
|
moreTrigger: {
|
|
97
|
-
textStyle: "body/lg/
|
|
97
|
+
textStyle: "body/lg/regular",
|
|
98
98
|
paddingInline: "16",
|
|
99
|
-
|
|
100
|
-
paddingBlockEnd: "12",
|
|
99
|
+
paddingBlock: "12",
|
|
101
100
|
backgroundColor: "background/tertiary",
|
|
102
|
-
borderBlockStart: "2px solid transparent",
|
|
103
101
|
_hover: {
|
|
104
102
|
backgroundColor: "background/active",
|
|
105
103
|
color: "text/primary"
|
|
@@ -129,6 +127,10 @@ var tabsSlotRecipe = defineSlotRecipe({
|
|
|
129
127
|
bottom: "-1px",
|
|
130
128
|
borderInlineEnd: "1px solid",
|
|
131
129
|
borderColor: "border/regular",
|
|
130
|
+
"&:first-of-type": {
|
|
131
|
+
borderInlineStartWidth: "1",
|
|
132
|
+
borderInlineStartStyle: "solid"
|
|
133
|
+
},
|
|
132
134
|
_hover: {
|
|
133
135
|
backgroundColor: "background/primary",
|
|
134
136
|
color: "text/primary"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tabs.recipe.ts"],"sourcesContent":["import { tabsAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tabsSlotRecipe = defineSlotRecipe({\n // `moreTrigger` is a custom slot (not in the Chakra anatomy) for the overflow \"N more…\" button.\n slots: [...tabsAnatomy.keys(), 'moreTrigger'],\n className: 'chakra-tabs',\n base: {\n list: {\n display: 'flex',\n },\n trigger: {\n '--focus-ring-width': rem(2),\n color: 'text/secondary',\n cursor: 'pointer',\n textStyle: 'body/lg/semibold',\n paddingInline: '16',\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n zIndex: 0,\n _disabled: {\n cursor: 'not-allowed',\n },\n _selected: {\n zIndex: 1,\n borderColor: 'border/selected',\n _hover: {\n borderColor: 'border/selected',\n },\n '& > svg': {\n color: 'icon/interactive',\n },\n },\n },\n content: {\n outline: 'none',\n },\n contentGroup: {\n backgroundColor: 'background/primary',\n },\n // Overflow \"N more…\" button — variant-specific look is layered on per variant below.\n moreTrigger: {\n '--focus-ring-width': rem(2),\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n color: 'text/secondary',\n },\n },\n\n variants: {\n variant: {\n line: {\n list: {\n borderBlockEnd: '1px solid',\n borderColor: 'border/regular',\n },\n trigger: {\n bottom: '-1px',\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n paddingBlockStart: '12',\n paddingBlockEnd: rem(9),\n borderBlockEnd: '2px solid transparent',\n _selected: {\n color: 'text/primary',\n },\n _hover: {\n borderColor: 'border/hover',\n color: 'text/primary',\n },\n _disabled: {\n color: 'text/disabled',\n },\n },\n moreTrigger: {\n bottom: '-1px',\n textStyle: 'body/lg/semibold',\n paddingInline: '16',\n paddingBlockStart: '12',\n paddingBlockEnd: rem(9),\n borderBlockEnd: '2px solid transparent',\n _hover: { backgroundColor: 'background/hover', color: 'text/primary' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n },\n },\n contained: {\n trigger: {\n paddingBlockStart: rem(10),\n paddingBlockEnd: '12',\n backgroundColor: 'background/tertiary',\n borderBlockStart: '2px solid transparent',\n _hover: {\n backgroundColor: 'background/active',\n },\n _disabled: {\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n },\n _selected: {\n backgroundColor: 'background/primary',\n color: 'text/selected',\n _hover: {\n backgroundColor: 'background/primary',\n },\n },\n },\n moreTrigger: {\n textStyle: 'body/lg/
|
|
1
|
+
{"version":3,"file":"Tabs.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tabs.recipe.ts"],"sourcesContent":["import { tabsAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tabsSlotRecipe = defineSlotRecipe({\n // `moreTrigger` is a custom slot (not in the Chakra anatomy) for the overflow \"N more…\" button.\n slots: [...tabsAnatomy.keys(), 'moreTrigger'],\n className: 'chakra-tabs',\n base: {\n list: {\n display: 'flex',\n },\n trigger: {\n '--focus-ring-width': rem(2),\n color: 'text/secondary',\n cursor: 'pointer',\n textStyle: 'body/lg/semibold',\n paddingInline: '16',\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n zIndex: 0,\n _disabled: {\n cursor: 'not-allowed',\n },\n _selected: {\n zIndex: 1,\n borderColor: 'border/selected',\n _hover: {\n borderColor: 'border/selected',\n },\n '& > svg': {\n color: 'icon/interactive',\n },\n },\n },\n content: {\n outline: 'none',\n },\n contentGroup: {\n backgroundColor: 'background/primary',\n },\n // Overflow \"N more…\" button — variant-specific look is layered on per variant below.\n moreTrigger: {\n '--focus-ring-width': rem(2),\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n color: 'text/secondary',\n },\n },\n\n variants: {\n variant: {\n line: {\n list: {\n borderBlockEnd: '1px solid',\n borderColor: 'border/regular',\n },\n trigger: {\n bottom: '-1px',\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n paddingBlockStart: '12',\n paddingBlockEnd: rem(9),\n borderBlockEnd: '2px solid transparent',\n _selected: {\n color: 'text/primary',\n },\n _hover: {\n borderColor: 'border/hover',\n color: 'text/primary',\n },\n _disabled: {\n color: 'text/disabled',\n },\n },\n moreTrigger: {\n bottom: '-1px',\n textStyle: 'body/lg/semibold',\n paddingInline: '16',\n paddingBlockStart: '12',\n paddingBlockEnd: rem(9),\n borderBlockEnd: '2px solid transparent',\n _hover: { backgroundColor: 'background/hover', color: 'text/primary' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n },\n },\n contained: {\n trigger: {\n paddingBlockStart: rem(10),\n paddingBlockEnd: '12',\n backgroundColor: 'background/tertiary',\n borderBlockStart: '2px solid transparent',\n _hover: {\n backgroundColor: 'background/active',\n },\n _disabled: {\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n },\n _selected: {\n backgroundColor: 'background/primary',\n color: 'text/selected',\n _hover: {\n backgroundColor: 'background/primary',\n },\n },\n },\n moreTrigger: {\n // Regular weight (not the semibold tabs use) and no top marker — per the contained \"more\" design.\n textStyle: 'body/lg/regular',\n paddingInline: '16',\n paddingBlock: '12',\n backgroundColor: 'background/tertiary',\n _hover: { backgroundColor: 'background/active', color: 'text/primary' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n },\n },\n // IDE-style canvas tabs: fixed-height, edge-to-edge segments separated by vertical\n // dividers, with the selection marker on top. Closable + status-dot live only here.\n canvas: {\n list: {\n // Small leading gap before the first tab.\n paddingInlineStart: '12',\n borderBlockEnd: '1px solid',\n borderColor: 'border/regular',\n },\n trigger: {\n height: '40',\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n textStyle: 'body/md/regular',\n backgroundColor: 'background/secondary',\n paddingInline: '12',\n paddingBlock: '8',\n // Bottom divider; shifted down 1px so it sits exactly on the list's bottom border (no\n // double line). The selected tab paints this white to merge with the content panel below.\n borderBlockEnd: '1px solid',\n bottom: '-1px',\n // Vertical divider between segments.\n borderInlineEnd: '1px solid',\n borderColor: 'border/regular',\n // The first tab also needs a leading divider (the others get theirs from the previous tab's\n // end). Set width/style only so the color comes from `borderColor` (border/regular), not the\n // shorthand's currentColor.\n '&:first-of-type': {\n borderInlineStartWidth: '1',\n borderInlineStartStyle: 'solid',\n },\n // The leading icon inherits the trigger's text color (secondary → primary by state); no\n // explicit svg rule, so the close-button icon keeps its own color.\n _hover: {\n backgroundColor: 'background/primary',\n color: 'text/primary',\n },\n _selected: {\n zIndex: 1,\n backgroundColor: 'background/primary',\n color: 'text/primary',\n // Keep neutral side dividers; the selected tab keeps a subtle bottom border because the\n // panel below it is secondary grey (not white), so it shouldn't fully merge.\n borderColor: 'border/regular',\n borderBlockEndColor: 'border/minimal',\n // Selection marker: an overlay bar on top of the selected tab only — non-selected\n // tabs have no top border, and it adds no layout height so nothing shifts.\n _after: {\n content: '\"\"',\n position: 'absolute',\n insetBlockStart: 0,\n insetInline: 0,\n height: '2',\n backgroundColor: 'border/selected',\n },\n _hover: {\n backgroundColor: 'background/primary',\n borderColor: 'border/regular',\n borderBlockEndColor: 'border/minimal',\n },\n },\n _disabled: {\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n _hover: {\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n },\n },\n },\n moreTrigger: {\n height: '40',\n textStyle: 'body/md/regular',\n paddingInline: '12',\n bottom: '-1px',\n borderBlockEnd: '1px solid',\n borderInlineEnd: '1px solid',\n borderColor: 'border/regular',\n _hover: { backgroundColor: 'background/hover', color: 'text/primary' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n _focusVisible: { outline: 'none', boxShadow: 'inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)' },\n },\n },\n },\n },\n\n defaultVariants: {\n variant: 'line',\n },\n});\n\nexport default tabsSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -2156,12 +2156,10 @@ declare const slotRecipes: {
|
|
|
2156
2156
|
};
|
|
2157
2157
|
};
|
|
2158
2158
|
moreTrigger: {
|
|
2159
|
-
textStyle: "body/lg/
|
|
2159
|
+
textStyle: "body/lg/regular";
|
|
2160
2160
|
paddingInline: "16";
|
|
2161
|
-
|
|
2162
|
-
paddingBlockEnd: "12";
|
|
2161
|
+
paddingBlock: "12";
|
|
2163
2162
|
backgroundColor: "background/tertiary";
|
|
2164
|
-
borderBlockStart: "2px solid transparent";
|
|
2165
2163
|
_hover: {
|
|
2166
2164
|
backgroundColor: "background/active";
|
|
2167
2165
|
color: "text/primary";
|
|
@@ -2191,6 +2189,10 @@ declare const slotRecipes: {
|
|
|
2191
2189
|
bottom: "-1px";
|
|
2192
2190
|
borderInlineEnd: "1px solid";
|
|
2193
2191
|
borderColor: "border/regular";
|
|
2192
|
+
'&:first-of-type': {
|
|
2193
|
+
borderInlineStartWidth: "1";
|
|
2194
|
+
borderInlineStartStyle: "solid";
|
|
2195
|
+
};
|
|
2194
2196
|
_hover: {
|
|
2195
2197
|
backgroundColor: "background/primary";
|
|
2196
2198
|
color: "text/primary";
|