@bitrise/bitkit-v2 0.3.465 → 0.3.467

package/dist/components/BitkitPopover/BitkitPopover.d.ts

@@ -12,6 +12,11 @@ export interface BitkitPopoverProps {
      * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.
      */
     trigger?: ReactNode;
+    /**
+     * Move focus into the panel when it opens (default `true`). Turn it off for a panel that opens
+     * while the user is typing elsewhere, such as hints beside a focused input.
+     */
+    autoFocus?: PopoverRootProps['autoFocus'];
     open?: PopoverRootProps['open'];
     defaultOpen?: PopoverRootProps['defaultOpen'];
     onOpenChange?: (open: boolean) => void;
@@ -25,7 +30,7 @@ export interface BitkitPopoverProps {
  * `positioning.getAnchorElement`.
  */
 declare const BitkitPopover: {
-    ({ children, title, footer, trigger, open, defaultOpen, onOpenChange, positioning, persistentElements, }: BitkitPopoverProps): import('react').JSX.Element;
+    ({ children, title, footer, trigger, autoFocus, open, defaultOpen, onOpenChange, positioning, persistentElements, }: BitkitPopoverProps): import('react').JSX.Element;
     displayName: string;
 };
 export default BitkitPopover;

package/dist/components/BitkitPopover/BitkitPopover.js

@@ -64,7 +64,8 @@ var ScrollablePopoverBody = ({ children }) => {
 * `trigger`, or — when the trigger can't be wrapped — control `open` and pass
 * `positioning.getAnchorElement`.
 */
-var BitkitPopover = ({ children, title, footer, trigger, open, defaultOpen, onOpenChange, positioning, persistentElements }) => /* @__PURE__ */ jsxs(Popover.Root, {
+var BitkitPopover = ({ children, title, footer, trigger, autoFocus, open, defaultOpen, onOpenChange, positioning, persistentElements }) => /* @__PURE__ */ jsxs(Popover.Root, {
+	autoFocus,
 	open,
 	defaultOpen,
 	onOpenChange: onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : void 0,

package/dist/components/BitkitPopover/BitkitPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitPopover.js","names":[],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitPopoverProps {\n  /** Body content of the panel. Scrolls within the panel when it overflows. */\n  children: ReactNode;\n  /** Header title, shown next to the close button. */\n  title: ReactNode;\n  /** Optional footer content (e.g. actions). Laid out with space between for a secondary/primary pair. */\n  footer?: ReactNode;\n  /**\n   * Element that toggles and anchors the popover. Omit when anchoring via\n   * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.\n   */\n  trigger?: ReactNode;\n  open?: PopoverRootProps['open'];\n  defaultOpen?: PopoverRootProps['defaultOpen'];\n  onOpenChange?: (open: boolean) => void;\n  positioning?: PopoverRootProps['positioning'];\n  persistentElements?: PopoverRootProps['persistentElements'];\n}\n\n/**\n * Scrolls the body and shows a scroll-to-bottom button with a fade gradient while the content\n * isn't scrolled to the bottom — mirrors the BitkitDialog scrollable-body behaviour.\n */\nconst ScrollablePopoverBody = ({ children }: { children: ReactNode }) => {\n  const styles = usePopoverStyles();\n  const { open } = usePopoverContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n  const updateScrollButtonVisibility = useCallback(() => {\n    const content = contentRef.current;\n    if (!content) {\n      setIsScrollButtonVisible(false);\n      return;\n    }\n    const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n    setIsScrollButtonVisible(!didScrollToBottom);\n  }, []);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!open || !content) return undefined;\n\n    content.addEventListener('scroll', updateScrollButtonVisibility);\n    const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n    resizeObserver.observe(content);\n\n    return () => {\n      content.removeEventListener('scroll', updateScrollButtonVisibility);\n      resizeObserver.disconnect();\n    };\n  }, [open, updateScrollButtonVisibility]);\n\n  return (\n    <Box css={styles.scrollBody}>\n      <Popover.Body ref={contentRef}>{children}</Popover.Body>\n      {isScrollButtonVisible && (\n        <>\n          <Box css={styles.scrollGradient} />\n          <chakra.button\n            aria-label=\"Scroll to bottom\"\n            css={styles.scrollButton}\n            type=\"button\"\n            onClick={() => {\n              contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n            }}\n          >\n            <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n          </chakra.button>\n        </>\n      )}\n    </Box>\n  );\n};\n\n/**\n * An anchored, non-modal floating panel built on Chakra Popover, styled as a compact dialog:\n * a header (title + close button), a scrollable body, and an optional footer. Anchor it with a\n * `trigger`, or — when the trigger can't be wrapped — control `open` and pass\n * `positioning.getAnchorElement`.\n */\nconst BitkitPopover = ({\n  children,\n  title,\n  footer,\n  trigger,\n  open,\n  defaultOpen,\n  onOpenChange,\n  positioning,\n  persistentElements,\n}: BitkitPopoverProps) => (\n  <Popover.Root\n    open={open}\n    defaultOpen={defaultOpen}\n    onOpenChange={onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : undefined}\n    positioning={{ placement: 'bottom-start', gutter: 4, ...positioning }}\n    persistentElements={persistentElements}\n  >\n    {trigger ? <Popover.Trigger asChild>{trigger}</Popover.Trigger> : null}\n    <Portal>\n      {/* z-index belongs on Content, not Positioner: Zag derives the positioner's inline z-index\n          from Content's computed z-index, so a value set on Positioner is ignored. */}\n      <Popover.Positioner>\n        <Popover.Content>\n          <Popover.Header>\n            <Popover.Title>{title}</Popover.Title>\n            <Popover.CloseTrigger asChild>\n              <BitkitCloseButton aria-label=\"Close\" />\n            </Popover.CloseTrigger>\n          </Popover.Header>\n          <ScrollablePopoverBody>{children}</ScrollablePopoverBody>\n          {footer ? <Popover.Footer>{footer}</Popover.Footer> : null}\n        </Popover.Content>\n      </Popover.Positioner>\n    </Portal>\n  </Popover.Root>\n);\n\nBitkitPopover.displayName = 'BitkitPopover';\n\nexport default BitkitPopover;\n"],"mappings":";;;;;;;;;;;;;AAgCA,IAAM,yBAAyB,EAAE,eAAwC;CACvE,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EACA,MAAM,oBAAoB,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe;EAC7F,yBAAyB,CAAC,iBAAiB;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,OAAO,KAAA;EAE9B,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,QAAQ,MAAT;GAAc,KAAK;GAAa;EAAuB,CAAA,GACtD,yBACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GAClC,oBAAC,OAAO,QAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,MAAK;GACL,eAAe;IACb,WAAW,SAAS,SAAS;KAAE,KAAK,WAAW,QAAQ;KAAc,UAAU;IAAS,CAAC;GAC3F;GAEA,UAAA,oBAAC,eAAD;IAAe,OAAM;IAAgB,MAAK;GAAM,CAAA;EACnC,CAAA,CACf,EAAA,CAAA,CAED;;AAET;;;;;;;AAQA,IAAM,iBAAiB,EACrB,UACA,OACA,QACA,SACA,MACA,aACA,cACA,aACA,yBAEA,qBAAC,QAAQ,MAAT;CACQ;CACO;CACb,cAAc,gBAAgB,EAAE,MAAM,aAAa,aAAa,MAAM,IAAI,KAAA;CAC1E,aAAa;EAAE,WAAW;EAAgB,QAAQ;EAAG,GAAG;CAAY;CAChD;CALtB,UAAA,CAOG,UAAU,oBAAC,QAAQ,SAAT;EAAiB,SAAA;EAAS,UAAA;CAAyB,CAAA,IAAI,MAClE,oBAAC,QAAD,EAAA,UAGE,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT,EAAA,UAAA;EACE,qBAAC,QAAQ,QAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UAAgB,MAAqB,CAAA,GACrC,oBAAC,QAAQ,cAAT;GAAsB,SAAA;GACpB,UAAA,oBAAC,mBAAD,EAAmB,cAAW,QAAS,CAAA;EACnB,CAAA,CACR,EAAA,CAAA;EAChB,oBAAC,uBAAD,EAAwB,SAAgC,CAAA;EACvD,SAAS,oBAAC,QAAQ,QAAT,EAAA,UAAiB,OAAuB,CAAA,IAAI;CACvC,EAAA,CAAA,EACC,CAAA,EACd,CAAA,CACI;;AAGhB,cAAc,cAAc"}
+{"version":3,"file":"BitkitPopover.js","names":[],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitPopoverProps {\n  /** Body content of the panel. Scrolls within the panel when it overflows. */\n  children: ReactNode;\n  /** Header title, shown next to the close button. */\n  title: ReactNode;\n  /** Optional footer content (e.g. actions). Laid out with space between for a secondary/primary pair. */\n  footer?: ReactNode;\n  /**\n   * Element that toggles and anchors the popover. Omit when anchoring via\n   * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.\n   */\n  trigger?: ReactNode;\n  /**\n   * Move focus into the panel when it opens (default `true`). Turn it off for a panel that opens\n   * while the user is typing elsewhere, such as hints beside a focused input.\n   */\n  autoFocus?: PopoverRootProps['autoFocus'];\n  open?: PopoverRootProps['open'];\n  defaultOpen?: PopoverRootProps['defaultOpen'];\n  onOpenChange?: (open: boolean) => void;\n  positioning?: PopoverRootProps['positioning'];\n  persistentElements?: PopoverRootProps['persistentElements'];\n}\n\n/**\n * Scrolls the body and shows a scroll-to-bottom button with a fade gradient while the content\n * isn't scrolled to the bottom — mirrors the BitkitDialog scrollable-body behaviour.\n */\nconst ScrollablePopoverBody = ({ children }: { children: ReactNode }) => {\n  const styles = usePopoverStyles();\n  const { open } = usePopoverContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n  const updateScrollButtonVisibility = useCallback(() => {\n    const content = contentRef.current;\n    if (!content) {\n      setIsScrollButtonVisible(false);\n      return;\n    }\n    const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n    setIsScrollButtonVisible(!didScrollToBottom);\n  }, []);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!open || !content) return undefined;\n\n    content.addEventListener('scroll', updateScrollButtonVisibility);\n    const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n    resizeObserver.observe(content);\n\n    return () => {\n      content.removeEventListener('scroll', updateScrollButtonVisibility);\n      resizeObserver.disconnect();\n    };\n  }, [open, updateScrollButtonVisibility]);\n\n  return (\n    <Box css={styles.scrollBody}>\n      <Popover.Body ref={contentRef}>{children}</Popover.Body>\n      {isScrollButtonVisible && (\n        <>\n          <Box css={styles.scrollGradient} />\n          <chakra.button\n            aria-label=\"Scroll to bottom\"\n            css={styles.scrollButton}\n            type=\"button\"\n            onClick={() => {\n              contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n            }}\n          >\n            <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n          </chakra.button>\n        </>\n      )}\n    </Box>\n  );\n};\n\n/**\n * An anchored, non-modal floating panel built on Chakra Popover, styled as a compact dialog:\n * a header (title + close button), a scrollable body, and an optional footer. Anchor it with a\n * `trigger`, or — when the trigger can't be wrapped — control `open` and pass\n * `positioning.getAnchorElement`.\n */\nconst BitkitPopover = ({\n  children,\n  title,\n  footer,\n  trigger,\n  autoFocus,\n  open,\n  defaultOpen,\n  onOpenChange,\n  positioning,\n  persistentElements,\n}: BitkitPopoverProps) => (\n  <Popover.Root\n    autoFocus={autoFocus}\n    open={open}\n    defaultOpen={defaultOpen}\n    onOpenChange={onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : undefined}\n    positioning={{ placement: 'bottom-start', gutter: 4, ...positioning }}\n    persistentElements={persistentElements}\n  >\n    {trigger ? <Popover.Trigger asChild>{trigger}</Popover.Trigger> : null}\n    <Portal>\n      {/* z-index belongs on Content, not Positioner: Zag derives the positioner's inline z-index\n          from Content's computed z-index, so a value set on Positioner is ignored. */}\n      <Popover.Positioner>\n        <Popover.Content>\n          <Popover.Header>\n            <Popover.Title>{title}</Popover.Title>\n            <Popover.CloseTrigger asChild>\n              <BitkitCloseButton aria-label=\"Close\" />\n            </Popover.CloseTrigger>\n          </Popover.Header>\n          <ScrollablePopoverBody>{children}</ScrollablePopoverBody>\n          {footer ? <Popover.Footer>{footer}</Popover.Footer> : null}\n        </Popover.Content>\n      </Popover.Positioner>\n    </Portal>\n  </Popover.Root>\n);\n\nBitkitPopover.displayName = 'BitkitPopover';\n\nexport default BitkitPopover;\n"],"mappings":";;;;;;;;;;;;;AAqCA,IAAM,yBAAyB,EAAE,eAAwC;CACvE,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EACA,MAAM,oBAAoB,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe;EAC7F,yBAAyB,CAAC,iBAAiB;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,OAAO,KAAA;EAE9B,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,QAAQ,MAAT;GAAc,KAAK;GAAa;EAAuB,CAAA,GACtD,yBACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GAClC,oBAAC,OAAO,QAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,MAAK;GACL,eAAe;IACb,WAAW,SAAS,SAAS;KAAE,KAAK,WAAW,QAAQ;KAAc,UAAU;IAAS,CAAC;GAC3F;GAEA,UAAA,oBAAC,eAAD;IAAe,OAAM;IAAgB,MAAK;GAAM,CAAA;EACnC,CAAA,CACf,EAAA,CAAA,CAED;;AAET;;;;;;;AAQA,IAAM,iBAAiB,EACrB,UACA,OACA,QACA,SACA,WACA,MACA,aACA,cACA,aACA,yBAEA,qBAAC,QAAQ,MAAT;CACa;CACL;CACO;CACb,cAAc,gBAAgB,EAAE,MAAM,aAAa,aAAa,MAAM,IAAI,KAAA;CAC1E,aAAa;EAAE,WAAW;EAAgB,QAAQ;EAAG,GAAG;CAAY;CAChD;CANtB,UAAA,CAQG,UAAU,oBAAC,QAAQ,SAAT;EAAiB,SAAA;EAAS,UAAA;CAAyB,CAAA,IAAI,MAClE,oBAAC,QAAD,EAAA,UAGE,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT,EAAA,UAAA;EACE,qBAAC,QAAQ,QAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UAAgB,MAAqB,CAAA,GACrC,oBAAC,QAAQ,cAAT;GAAsB,SAAA;GACpB,UAAA,oBAAC,mBAAD,EAAmB,cAAW,QAAS,CAAA;EACnB,CAAA,CACR,EAAA,CAAA;EAChB,oBAAC,uBAAD,EAAwB,SAAgC,CAAA;EACvD,SAAS,oBAAC,QAAQ,QAAT,EAAA,UAAiB,OAAuB,CAAA,IAAI;CACvC,EAAA,CAAA,EACC,CAAA,EACd,CAAA,CACI;;AAGhB,cAAc,cAAc"}

package/dist/theme/slot-recipes/Drawer.recipe.d.ts

@@ -1,6 +1,12 @@
 declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "backdrop", {
     variant: {
         docked: {
+            body: {
+                padding: {
+                    base: "16";
+                    tablet: "24";
+                };
+            };
             closeTrigger: {
                 insetEnd: `${number}rem`;
                 top: "12";
@@ -11,14 +17,38 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
                     tablet: `${number}rem`;
                 };
             };
+            footer: {
+                paddingInline: {
+                    base: "16";
+                    tablet: "24";
+                };
+            };
+            header: {
+                paddingInline: {
+                    base: "16";
+                    tablet: "24";
+                };
+                '& :has(> [role=tablist])': {
+                    marginInline: {
+                        base: "-8";
+                        tablet: "-16";
+                    };
+                };
+            };
         };
         floating: {
             body: {
+                paddingBlockStart: "8";
                 paddingInline: "24";
+                '.chakra-drawer__header:has([role=tablist]) ~ &': {
+                    paddingBlockStart: "24";
+                };
             };
             closeTrigger: {
-                insetEnd: "24";
-                top: "24";
+                height: "32";
+                insetEnd: "20";
+                top: "20";
+                width: "32";
             };
             positioner: {
                 padding: "32";
@@ -27,11 +57,15 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
                 borderRadius: "12";
                 boxShadow: "elevation/lg";
                 maxWidth: `${number}rem`;
+                minWidth: `min(100%, ${number}rem)`;
             };
             header: {
                 paddingBlockEnd: "16";
                 paddingBlockStart: "24";
                 paddingInline: "24";
+                '& :has(> [role=tablist])': {
+                    marginInline: "-16";
+                };
             };
             footer: {
                 borderBlockStartColor: "transparent";
@@ -42,9 +76,16 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
             };
             title: {
                 color: "text/primary";
-                textStyle: "heading/h2";
+                textStyle: "heading/h3";
             };
         };
     };
+    size: {
+        xxs: {};
+        xs: {};
+        sm: {};
+        md: {};
+        lg: {};
+    };
 }>;
 export default drawerSlotRecipe;

package/dist/theme/slot-recipes/Drawer.recipe.js

@@ -56,7 +56,8 @@ var drawerSlotRecipe = defineSlotRecipe({
 		header: {
 			paddingBlockEnd: "8",
 			paddingBlockStart: "24",
-			paddingInline: "24"
+			paddingInline: "24",
+			"&:has([role=tablist])": { paddingBlockEnd: 0 }
 		},
 		body: {
 			flex: "1",
@@ -70,6 +71,7 @@ var drawerSlotRecipe = defineSlotRecipe({
 		title: {
 			color: "text/tertiary",
 			flex: "1",
+			paddingInlineEnd: "48",
 			textStyle: "heading/h6"
 		},
 		description: {},
@@ -87,47 +89,109 @@ var drawerSlotRecipe = defineSlotRecipe({
 			_active: { backgroundColor: "color/neutral/moderate" }
 		}
 	},
-	variants: { variant: {
-		docked: {
-			closeTrigger: {
-				insetEnd: rem(18),
-				top: "12"
-			},
-			content: { width: {
-				base: "100vw",
-				tablet: rem(320)
-			} }
-		},
-		floating: {
-			body: { paddingInline: "24" },
-			closeTrigger: {
-				insetEnd: "24",
-				top: "24"
-			},
-			positioner: { padding: "32" },
-			content: {
-				borderRadius: "12",
-				boxShadow: "elevation/lg",
-				maxWidth: rem(700)
-			},
-			header: {
-				paddingBlockEnd: "16",
-				paddingBlockStart: "24",
-				paddingInline: "24"
-			},
-			footer: {
-				borderBlockStartColor: "transparent",
-				borderBlockStartWidth: 0,
-				paddingBlockEnd: "24",
-				paddingBlockStart: "32",
-				paddingInline: "24"
+	variants: {
+		variant: {
+			docked: {
+				body: { padding: {
+					base: "16",
+					tablet: "24"
+				} },
+				closeTrigger: {
+					insetEnd: rem(18),
+					top: "12"
+				},
+				content: { width: {
+					base: "100vw",
+					tablet: rem(320)
+				} },
+				footer: { paddingInline: {
+					base: "16",
+					tablet: "24"
+				} },
+				header: {
+					paddingInline: {
+						base: "16",
+						tablet: "24"
+					},
+					"& :has(> [role=tablist])": { marginInline: {
+						base: "-8",
+						tablet: "-16"
+					} }
+				}
 			},
-			title: {
-				color: "text/primary",
-				textStyle: "heading/h2"
+			floating: {
+				body: {
+					paddingBlockStart: "8",
+					paddingInline: "24",
+					".chakra-drawer__header:has([role=tablist]) ~ &": { paddingBlockStart: "24" }
+				},
+				closeTrigger: {
+					height: "32",
+					insetEnd: "20",
+					top: "20",
+					width: "32"
+				},
+				positioner: { padding: "32" },
+				content: {
+					borderRadius: "12",
+					boxShadow: "elevation/lg",
+					maxWidth: rem(700),
+					minWidth: `min(100%, ${rem(480)})`
+				},
+				header: {
+					paddingBlockEnd: "16",
+					paddingBlockStart: "24",
+					paddingInline: "24",
+					"& :has(> [role=tablist])": { marginInline: "-16" }
+				},
+				footer: {
+					borderBlockStartColor: "transparent",
+					borderBlockStartWidth: 0,
+					paddingBlockEnd: "24",
+					paddingBlockStart: "32",
+					paddingInline: "24"
+				},
+				title: {
+					color: "text/primary",
+					textStyle: "heading/h3"
+				}
 			}
+		},
+		size: {
+			xxs: {},
+			xs: {},
+			sm: {},
+			md: {},
+			lg: {}
 		}
-	} },
+	},
+	compoundVariants: [...[
+		["xxs", 320],
+		["xs", 360],
+		["sm", 480],
+		["md", 640],
+		["lg", 800]
+	].map(([size, width]) => ({
+		css: { content: { width: {
+			base: "100vw",
+			tablet: rem(width)
+		} } },
+		size,
+		variant: "docked"
+	})), ...[
+		["xxs", 480],
+		["xs", 480],
+		["sm", 480],
+		["md", 640],
+		["lg", 800]
+	].map(([size, width]) => ({
+		css: { content: {
+			maxWidth: "100%",
+			width: rem(width)
+		} },
+		size,
+		variant: "floating"
+	}))],
 	defaultVariants: { variant: "docked" }
 });
 //#endregion

package/dist/theme/slot-recipes/Drawer.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n  className: 'drawer',\n  slots: drawerAnatomy.keys(),\n  base: {\n    backdrop: {\n      background: 'utilities/overlay-light',\n      inset: 0,\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n      _open: {\n        animationName: 'fade-in',\n        animationDuration: 'slow',\n      },\n      _closed: {\n        animationName: 'fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    positioner: {\n      alignItems: 'stretch',\n      display: 'flex',\n      inset: 0,\n      justifyContent: 'flex-end',\n      overscrollBehaviorY: 'none',\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n    },\n    content: {\n      background: 'background/primary',\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: '100dvh',\n      outline: 'none',\n      position: 'relative',\n      _open: {\n        animationDuration: 'slowest',\n        animationName: {\n          base: 'slide-from-right-full, fade-in',\n          _rtl: 'slide-from-left-full, fade-in',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n      _closed: {\n        animationDuration: 'slower',\n        animationName: {\n          base: 'slide-to-right-full, fade-out',\n          _rtl: 'slide-to-left-full, fade-out',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n    },\n    header: {\n      paddingBlockEnd: '8',\n      paddingBlockStart: '24',\n      paddingInline: '24',\n    },\n    body: {\n      flex: '1',\n      overflow: 'auto',\n    },\n    footer: {\n      borderBlockStartColor: 'border/regular',\n      borderBlockStartWidth: '1',\n      paddingBlock: '12',\n    },\n    title: {\n      color: 'text/tertiary',\n      flex: '1',\n      textStyle: 'heading/h6',\n    },\n    description: {},\n    closeTrigger: {\n      alignItems: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      display: 'inline-flex',\n      height: '40',\n      justifyContent: 'center',\n      position: 'absolute',\n      width: '40',\n      _hover: {\n        backgroundColor: 'color/neutral/subtle',\n      },\n      _active: {\n        backgroundColor: 'color/neutral/moderate',\n      },\n    },\n  },\n  variants: {\n    variant: {\n      docked: {\n        closeTrigger: {\n          insetEnd: rem(18),\n          top: '12',\n        },\n        content: {\n          width: { base: '100vw', tablet: rem(320) },\n        },\n      },\n      floating: {\n        body: {\n          paddingInline: '24',\n        },\n        closeTrigger: {\n          insetEnd: '24',\n          top: '24',\n        },\n        positioner: {\n          padding: '32',\n        },\n        content: {\n          borderRadius: '12',\n          boxShadow: 'elevation/lg',\n          maxWidth: rem(700),\n        },\n        header: {\n          paddingBlockEnd: '16',\n          paddingBlockStart: '24',\n          paddingInline: '24',\n        },\n        footer: {\n          borderBlockStartColor: 'transparent',\n          borderBlockStartWidth: 0,\n          paddingBlockEnd: '24',\n          paddingBlockStart: '32',\n          paddingInline: '24',\n        },\n        title: {\n          color: 'text/primary',\n          textStyle: 'heading/h2',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'docked',\n  },\n});\n\nexport default drawerSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,UAAU;GACV,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GACT,UAAU;GACV,OAAO;IACL,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;GACA,SAAS;IACP,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;EACF;EACA,QAAQ;GACN,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;EACjB;EACA,MAAM;GACJ,MAAM;GACN,UAAU;EACZ;EACA,QAAQ;GACN,uBAAuB;GACvB,uBAAuB;GACvB,cAAc;EAChB;EACA,OAAO;GACL,OAAO;GACP,MAAM;GACN,WAAW;EACb;EACA,aAAa,CAAC;EACd,cAAc;GACZ,YAAY;GACZ,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,UAAU;GACV,OAAO;GACP,QAAQ,EACN,iBAAiB,uBACnB;GACA,SAAS,EACP,iBAAiB,yBACnB;EACF;CACF;CACA,UAAU,EACR,SAAS;EACP,QAAQ;GACN,cAAc;IACZ,UAAU,IAAI,EAAE;IAChB,KAAK;GACP;GACA,SAAS,EACP,OAAO;IAAE,MAAM;IAAS,QAAQ,IAAI,GAAG;GAAE,EAC3C;EACF;EACA,UAAU;GACR,MAAM,EACJ,eAAe,KACjB;GACA,cAAc;IACZ,UAAU;IACV,KAAK;GACP;GACA,YAAY,EACV,SAAS,KACX;GACA,SAAS;IACP,cAAc;IACd,WAAW;IACX,UAAU,IAAI,GAAG;GACnB;GACA,QAAQ;IACN,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;GACjB;GACA,QAAQ;IACN,uBAAuB;IACvB,uBAAuB;IACvB,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;GACjB;GACA,OAAO;IACL,OAAO;IACP,WAAW;GACb;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CAAC"}
+{"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n  className: 'drawer',\n  slots: drawerAnatomy.keys(),\n  base: {\n    backdrop: {\n      background: 'utilities/overlay-light',\n      inset: 0,\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n      _open: {\n        animationName: 'fade-in',\n        animationDuration: 'slow',\n      },\n      _closed: {\n        animationName: 'fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    positioner: {\n      alignItems: 'stretch',\n      display: 'flex',\n      inset: 0,\n      justifyContent: 'flex-end',\n      overscrollBehaviorY: 'none',\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n    },\n    content: {\n      background: 'background/primary',\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: '100dvh',\n      outline: 'none',\n      position: 'relative',\n      _open: {\n        animationDuration: 'slowest',\n        animationName: {\n          base: 'slide-from-right-full, fade-in',\n          _rtl: 'slide-from-left-full, fade-in',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n      _closed: {\n        animationDuration: 'slower',\n        animationName: {\n          base: 'slide-to-right-full, fade-out',\n          _rtl: 'slide-to-left-full, fade-out',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n    },\n    header: {\n      paddingBlockEnd: '8',\n      paddingBlockStart: '24',\n      paddingInline: '24',\n      // A tab list in the header closes it off with its own baseline.\n      '&:has([role=tablist])': {\n        paddingBlockEnd: 0,\n      },\n    },\n    body: {\n      flex: '1',\n      overflow: 'auto',\n    },\n    footer: {\n      borderBlockStartColor: 'border/regular',\n      borderBlockStartWidth: '1',\n      paddingBlock: '12',\n    },\n    title: {\n      color: 'text/tertiary',\n      flex: '1',\n      // The close button is absolutely positioned, so the title keeps clear of it.\n      paddingInlineEnd: '48',\n      textStyle: 'heading/h6',\n    },\n    description: {},\n    closeTrigger: {\n      alignItems: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      display: 'inline-flex',\n      height: '40',\n      justifyContent: 'center',\n      position: 'absolute',\n      width: '40',\n      _hover: {\n        backgroundColor: 'color/neutral/subtle',\n      },\n      _active: {\n        backgroundColor: 'color/neutral/moderate',\n      },\n    },\n  },\n  variants: {\n    variant: {\n      // One inline padding for header, body and footer, so their content lines up: 16 on mobile, 24 from tablet.\n      docked: {\n        body: {\n          padding: { base: '16', tablet: '24' },\n        },\n        closeTrigger: {\n          insetEnd: rem(18),\n          top: '12',\n        },\n        content: {\n          width: { base: '100vw', tablet: rem(320) },\n        },\n        footer: {\n          paddingInline: { base: '16', tablet: '24' },\n        },\n        header: {\n          paddingInline: { base: '16', tablet: '24' },\n          // Tabs sit 8px from the edge, so their baseline runs nearly full width.\n          '& :has(> [role=tablist])': {\n            marginInline: { base: '-8', tablet: '-16' },\n          },\n        },\n      },\n      floating: {\n        body: {\n          paddingBlockStart: '8',\n          paddingInline: '24',\n          '.chakra-drawer__header:has([role=tablist]) ~ &': {\n            paddingBlockStart: '24',\n          },\n        },\n        closeTrigger: {\n          height: '32',\n          insetEnd: '20',\n          top: '20',\n          width: '32',\n        },\n        positioner: {\n          padding: '32',\n        },\n        content: {\n          borderRadius: '12',\n          boxShadow: 'elevation/lg',\n          maxWidth: rem(700),\n          // 480 is the floating drawer's smallest step; on narrow screens it gives way to the viewport.\n          minWidth: `min(100%, ${rem(480)})`,\n        },\n        header: {\n          paddingBlockEnd: '16',\n          paddingBlockStart: '24',\n          paddingInline: '24',\n          '& :has(> [role=tablist])': {\n            marginInline: '-16',\n          },\n        },\n        footer: {\n          borderBlockStartColor: 'transparent',\n          borderBlockStartWidth: 0,\n          paddingBlockEnd: '24',\n          paddingBlockStart: '32',\n          paddingInline: '24',\n        },\n        title: {\n          color: 'text/primary',\n          textStyle: 'heading/h3',\n        },\n      },\n    },\n    // Fixed widths from tablet up; below that the docked drawer is full width. The floating drawer starts at sm\n    // (480) and, without a size, sizes to its content between 480 and 700.\n    size: {\n      xxs: {},\n      xs: {},\n      sm: {},\n      md: {},\n      lg: {},\n    },\n  },\n  compoundVariants: [\n    ...(\n      [\n        ['xxs', 320],\n        ['xs', 360],\n        ['sm', 480],\n        ['md', 640],\n        ['lg', 800],\n      ] as const\n    ).map(([size, width]) => ({\n      css: { content: { width: { base: '100vw', tablet: rem(width) } } },\n      size,\n      variant: 'docked' as const,\n    })),\n    // The floating drawer's scale starts at 480, so the docked-only xxs and xs steps map to it there.\n    ...(\n      [\n        ['xxs', 480],\n        ['xs', 480],\n        ['sm', 480],\n        ['md', 640],\n        ['lg', 800],\n      ] as const\n    ).map(([size, width]) => ({\n      css: { content: { maxWidth: '100%', width: rem(width) } },\n      size,\n      variant: 'floating' as const,\n    })),\n  ],\n  defaultVariants: {\n    variant: 'docked',\n  },\n});\n\nexport default drawerSlotRecipe;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/index.d.ts

@@ -892,6 +892,12 @@ declare const slotRecipes: {
     drawer: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "backdrop", {
         variant: {
             docked: {
+                body: {
+                    padding: {
+                        base: "16";
+                        tablet: "24";
+                    };
+                };
                 closeTrigger: {
                     insetEnd: `${number}rem`;
                     top: "12";
@@ -902,14 +908,38 @@ declare const slotRecipes: {
                         tablet: `${number}rem`;
                     };
                 };
+                footer: {
+                    paddingInline: {
+                        base: "16";
+                        tablet: "24";
+                    };
+                };
+                header: {
+                    paddingInline: {
+                        base: "16";
+                        tablet: "24";
+                    };
+                    '& :has(> [role=tablist])': {
+                        marginInline: {
+                            base: "-8";
+                            tablet: "-16";
+                        };
+                    };
+                };
             };
             floating: {
                 body: {
+                    paddingBlockStart: "8";
                     paddingInline: "24";
+                    '.chakra-drawer__header:has([role=tablist]) ~ &': {
+                        paddingBlockStart: "24";
+                    };
                 };
                 closeTrigger: {
-                    insetEnd: "24";
-                    top: "24";
+                    height: "32";
+                    insetEnd: "20";
+                    top: "20";
+                    width: "32";
                 };
                 positioner: {
                     padding: "32";
@@ -918,11 +948,15 @@ declare const slotRecipes: {
                     borderRadius: "12";
                     boxShadow: "elevation/lg";
                     maxWidth: `${number}rem`;
+                    minWidth: `min(100%, ${number}rem)`;
                 };
                 header: {
                     paddingBlockEnd: "16";
                     paddingBlockStart: "24";
                     paddingInline: "24";
+                    '& :has(> [role=tablist])': {
+                        marginInline: "-16";
+                    };
                 };
                 footer: {
                     borderBlockStartColor: "transparent";
@@ -933,10 +967,17 @@ declare const slotRecipes: {
                 };
                 title: {
                     color: "text/primary";
-                    textStyle: "heading/h2";
+                    textStyle: "heading/h3";
                 };
             };
         };
+        size: {
+            xxs: {};
+            xs: {};
+            sm: {};
+            md: {};
+            lg: {};
+        };
     }>;
     emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "indicator" | "description", {
         colorVariant: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.465",
+  "version": "0.3.467",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",