@bitrise/bitkit-v2 0.3.506 → 0.3.507

package/AGENTS.md

@@ -238,6 +238,7 @@ Bitkit components use consistent prop names across the library:
 - **A surface that stays dark in both color modes** (logs, terminal output) — `background/fixed-contrast` with `text/on-color` (and `color/white/*` for dimmer text). `background/contrast` turns light in dark mode, so the white text on it disappears. Don't reach for a palette color instead.
 - **Always use `textStyle`** — never set `fontFamily` or `fontSize` on `<Text>`. Use `textStyle="body/md/regular"`, `textStyle="code/md"`, etc.
 - **Sizes as strings** — `width="32"`, not `width={32}`. Tokens are strings.
+- **Responsive values as objects** — `padding={{ base: '16', tablet: '32' }}`, never the array form `padding={['16', '32']}`, which hides which breakpoint each value belongs to. The same goes for `columnTemplate` on `BitkitContentWrapper` (`{ tablet: '1fr 25rem' }`; its string form is deprecated).
 - **Use existing size tokens** — closest existing token (1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128) representing pixel values (1=1px, 32=32px). Avoid arbitrary px (`width="100px"`). Above 128: a page's content width is `contentWidth` (`layout/maxWidth/640`, `…/960`, `…/1280`, `…/1616`, `…/full`) on `BitkitContentWrapper` and on the page header, subheader and filter bar above it — see `Docs/Page Layout`; for anything else use Bitkit's `rem()` helper (`import { rem } from '@bitrise/bitkit-v2'`, `maxWidth={rem(800)}`), never a bare-number string — `maxWidth="800"` is not a token, reaches the CSS without a unit, and the browser silently drops it.
 - **Omit default prop values** — `<IconCross />`, not `<IconCross size="24" />` when 24 is the default.
 - **Never pass `color` to a colored icon** — multi/fixed-color icons (`Icon*Color`, `IconWarningYellow`, `Icon*White`, etc.) have their colors baked in. They omit `color` from their props, so passing it is a type error. Only monochrome icons follow `color` (via `currentColor`).

package/dist/components/BitkitContentWrapper/BitkitContentWrapper.d.ts

@@ -1,13 +1,18 @@
 import { BoxProps } from '@chakra-ui/react/box';
+import { default as breakpoints } from '../../theme/breakpoints';
 import { ContentWidth } from '../../theme/common/ContentWidth.common';
 /** A page content width: one of the `layout/maxWidth` tokens, `layout/maxWidth/full` for no cap. */
 export type BitkitContentWidth = ContentWidth;
 export interface BitkitContentWrapperProps extends BoxProps {
     /**
-     * Side-by-side columns from `tablet` up, as a CSS grid template — `'1fr 1fr'` for two equal columns,
-     * `'1fr 25rem'` for one that fills next to a fixed one. Below `tablet` the columns stack.
+     * Side-by-side columns: a CSS grid template per breakpoint, so where they split is visible at the call site —
+     * `{ tablet: '1fr 25rem' }` for one column that fills next to a fixed one from `tablet` up. Below the first
+     * breakpoint given, the columns stack.
+     *
+     * The string form (`'1fr 25rem'`, applied from `tablet`) is deprecated and goes away with the move to responsive
+     * conditions; use the object form in new code.
      */
-    columnTemplate?: string;
+    columnTemplate?: string | Partial<Record<keyof typeof breakpoints, string>>;
     /** The cap on the page's content column, padding included. Pick the same value for the page header above it. */
     contentWidth: BitkitContentWidth;
 }

package/dist/components/BitkitContentWrapper/BitkitContentWrapper.js

@@ -9,7 +9,7 @@ var BitkitContentWrapper = forwardRef((props, ref) => {
 	const recipe = useRecipe({ key: "contentWrapper" });
 	return /* @__PURE__ */ jsx(Box, {
 		css: [recipe(), css],
-		gridTemplateColumns: columnTemplate ? { tablet: columnTemplate } : void 0,
+		gridTemplateColumns: typeof columnTemplate === "string" ? { tablet: columnTemplate } : columnTemplate,
 		maxWidth: contentWidth,
 		ref,
 		...rest

package/dist/components/BitkitContentWrapper/BitkitContentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitContentWrapper.js","names":[],"sources":["../../../lib/components/BitkitContentWrapper/BitkitContentWrapper.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type ContentWidth } from '../../theme/common/ContentWidth.common';\n\n/** A page content width: one of the `layout/maxWidth` tokens, `layout/maxWidth/full` for no cap. */\nexport type BitkitContentWidth = ContentWidth;\n\nexport interface BitkitContentWrapperProps extends BoxProps {\n  /**\n   * Side-by-side columns from `tablet` up, as a CSS grid template — `'1fr 1fr'` for two equal columns,\n   * `'1fr 25rem'` for one that fills next to a fixed one. Below `tablet` the columns stack.\n   */\n  columnTemplate?: string;\n  /** The cap on the page's content column, padding included. Pick the same value for the page header above it. */\n  contentWidth: BitkitContentWidth;\n}\n\n/** The page's content grid: capped at a `layout/maxWidth` token, centred, one column of sections 32 apart unless `columnTemplate` says otherwise. */\nconst BitkitContentWrapper = forwardRef<HTMLDivElement, BitkitContentWrapperProps>((props, ref) => {\n  const { columnTemplate, contentWidth, css, ...rest } = props;\n\n  const recipe = useRecipe({ key: 'contentWrapper' });\n\n  return (\n    <Box\n      css={[recipe(), css]}\n      gridTemplateColumns={columnTemplate ? { tablet: columnTemplate } : undefined}\n      maxWidth={contentWidth}\n      ref={ref}\n      {...rest}\n    />\n  );\n});\n\nBitkitContentWrapper.displayName = 'BitkitContentWrapper';\n\nexport default BitkitContentWrapper;\n"],"mappings":";;;;;;AAoBA,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,gBAAgB,cAAc,KAAK,GAAG,SAAS;CAEvD,MAAM,SAAS,UAAU,EAAE,KAAK,iBAAiB,CAAC;CAElD,OACE,oBAAC,KAAD;EACE,KAAK,CAAC,OAAO,GAAG,GAAG;EACnB,qBAAqB,iBAAiB,EAAE,QAAQ,eAAe,IAAI,KAAA;EACnE,UAAU;EACL;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,qBAAqB,cAAc"}
+{"version":3,"file":"BitkitContentWrapper.js","names":[],"sources":["../../../lib/components/BitkitContentWrapper/BitkitContentWrapper.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport type breakpoints from '../../theme/breakpoints';\nimport { type ContentWidth } from '../../theme/common/ContentWidth.common';\n\n/** A page content width: one of the `layout/maxWidth` tokens, `layout/maxWidth/full` for no cap. */\nexport type BitkitContentWidth = ContentWidth;\n\nexport interface BitkitContentWrapperProps extends BoxProps {\n  /**\n   * Side-by-side columns: a CSS grid template per breakpoint, so where they split is visible at the call site —\n   * `{ tablet: '1fr 25rem' }` for one column that fills next to a fixed one from `tablet` up. Below the first\n   * breakpoint given, the columns stack.\n   *\n   * The string form (`'1fr 25rem'`, applied from `tablet`) is deprecated and goes away with the move to responsive\n   * conditions; use the object form in new code.\n   */\n  columnTemplate?: string | Partial<Record<keyof typeof breakpoints, string>>;\n  /** The cap on the page's content column, padding included. Pick the same value for the page header above it. */\n  contentWidth: BitkitContentWidth;\n}\n\n/** The page's content grid: capped at a `layout/maxWidth` token, centred, one column of sections 32 apart unless `columnTemplate` says otherwise. */\nconst BitkitContentWrapper = forwardRef<HTMLDivElement, BitkitContentWrapperProps>((props, ref) => {\n  const { columnTemplate, contentWidth, css, ...rest } = props;\n\n  const recipe = useRecipe({ key: 'contentWrapper' });\n\n  return (\n    <Box\n      css={[recipe(), css]}\n      gridTemplateColumns={typeof columnTemplate === 'string' ? { tablet: columnTemplate } : columnTemplate}\n      maxWidth={contentWidth}\n      ref={ref}\n      {...rest}\n    />\n  );\n});\n\nBitkitContentWrapper.displayName = 'BitkitContentWrapper';\n\nexport default BitkitContentWrapper;\n"],"mappings":";;;;;;AAyBA,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,gBAAgB,cAAc,KAAK,GAAG,SAAS;CAEvD,MAAM,SAAS,UAAU,EAAE,KAAK,iBAAiB,CAAC;CAElD,OACE,oBAAC,KAAD;EACE,KAAK,CAAC,OAAO,GAAG,GAAG;EACnB,qBAAqB,OAAO,mBAAmB,WAAW,EAAE,QAAQ,eAAe,IAAI;EACvF,UAAU;EACL;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,qBAAqB,cAAc"}

package/package.json

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