@bitrise/bitkit-v2 0.3.345-beta.2201 → 0.3.346

package/dist/components/BitkitProgressBar/BitkitProgressBar.d.ts

@@ -5,7 +5,7 @@ import { default as semanticColors } from '../../theme/semantic-tokens/semanticC
  * Derived from the semantic token map, so new tokens are picked up automatically.
  */
 export type BitkitProgressBarRangeColor = Extract<keyof typeof semanticColors, `color/${string}`>;
-export interface BitkitProgressBarProps extends Omit<ProgressRootProps, 'aria-label' | 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'trackColor'> {
+export interface BitkitProgressBarProps extends Omit<ProgressRootProps, 'aria-label' | 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'striped' | 'trackColor'> {
     /**
      * Accessible name for the bar — never rendered visually. Without it screen readers
      * announce the percentage alone, with no indication of what is being measured.
@@ -19,6 +19,11 @@ export interface BitkitProgressBarProps extends Omit<ProgressRootProps, 'aria-la
     roundedEdges?: 'both' | 'end' | 'none' | 'start';
     /** Height of the bar, in size tokens. */
     size?: '1' | '2' | '4' | '6' | '8' | '12' | '16';
+    /**
+     * Fills the range with animated diagonal stripes — for work that is running but whose
+     * remaining time is unknown, so the bar keeps moving between value changes.
+     */
+    striped?: boolean;
     /** Background of the unfilled part. */
     trackColor?: 'neutral' | 'transparent';
 }

package/dist/components/BitkitProgressBar/BitkitProgressBar.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { Progress } from "@chakra-ui/react/progress";
 //#region lib/components/BitkitProgressBar/BitkitProgressBar.tsx
 var BitkitProgressBar = forwardRef((props, ref) => {
-	const { label, rangeColor = "color/blue/base", roundedEdges = "both", size = "8", trackColor = "neutral", translations, ...rest } = props;
+	const { label, rangeColor = "color/blue/base", roundedEdges = "both", size = "8", striped = false, trackColor = "neutral", translations, ...rest } = props;
 	const resolvedTranslations = useMemo(() => label ? {
 		...translations,
 		value: () => label
@@ -12,10 +12,11 @@ var BitkitProgressBar = forwardRef((props, ref) => {
 		ref,
 		roundedEdges,
 		size,
+		striped,
 		trackColor,
 		translations: resolvedTranslations,
 		...rest,
-		children: /* @__PURE__ */ jsx(Progress.Track, { children: /* @__PURE__ */ jsx(Progress.Range, { background: rangeColor }) })
+		children: /* @__PURE__ */ jsx(Progress.Track, { children: /* @__PURE__ */ jsx(Progress.Range, { backgroundColor: rangeColor }) })
 	});
 });
 BitkitProgressBar.displayName = "BitkitProgressBar";

package/dist/components/BitkitProgressBar/BitkitProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitProgressBar.js","names":[],"sources":["../../../lib/components/BitkitProgressBar/BitkitProgressBar.tsx"],"sourcesContent":["import { Progress, type ProgressRootProps } from '@chakra-ui/react/progress';\nimport { forwardRef, useMemo } from 'react';\n\nimport type semanticColors from '../../theme/semantic-tokens/semanticColors';\n\n/**\n * Every `color/*` semantic token — the only colors the range is allowed to use.\n * Derived from the semantic token map, so new tokens are picked up automatically.\n */\nexport type BitkitProgressBarRangeColor = Extract<keyof typeof semanticColors, `color/${string}`>;\n\nexport interface BitkitProgressBarProps extends Omit<\n  ProgressRootProps,\n  'aria-label' | 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'trackColor'\n> {\n  /**\n   * Accessible name for the bar — never rendered visually. Without it screen readers\n   * announce the percentage alone, with no indication of what is being measured.\n   * The value itself stays exposed through `aria-valuenow`, so this should name the\n   * thing (\"Monthly build limit\"), not repeat the number.\n   */\n  label?: string;\n  /** Color of the filled part. Any `color/*` semantic token. */\n  rangeColor?: BitkitProgressBarRangeColor;\n  /** Which ends are rounded. Use `start`/`none`/`end` for bars sitting next to each other in a group. */\n  roundedEdges?: 'both' | 'end' | 'none' | 'start';\n  /** Height of the bar, in size tokens. */\n  size?: '1' | '2' | '4' | '6' | '8' | '12' | '16';\n  /** Background of the unfilled part. */\n  trackColor?: 'neutral' | 'transparent';\n}\n\nconst BitkitProgressBar = forwardRef<HTMLDivElement, BitkitProgressBarProps>((props, ref) => {\n  const {\n    label,\n    rangeColor = 'color/blue/base',\n    roundedEdges = 'both',\n    size = '8',\n    trackColor = 'neutral',\n    translations,\n    ...rest\n  } = props;\n\n  // Zag puts role=\"progressbar\" and aria-label on the *track*, not the root, so an\n  // `aria-label` prop would never reach the labelled element — hence `aria-label` is\n  // omitted from the props and the name is routed through the machine's translations.\n  // Merged rather than replaced: `IntlTranslations` has only `value` today, but Zag has\n  // added keys to its internals before and a wholesale replace would drop them silently.\n  const resolvedTranslations = useMemo(\n    () => (label ? { ...translations, value: () => label } : translations),\n    [label, translations],\n  );\n\n  return (\n    <Progress.Root\n      ref={ref}\n      roundedEdges={roundedEdges}\n      size={size}\n      trackColor={trackColor}\n      translations={resolvedTranslations}\n      {...rest}\n    >\n      <Progress.Track>\n        <Progress.Range background={rangeColor} />\n      </Progress.Track>\n    </Progress.Root>\n  );\n});\n\nBitkitProgressBar.displayName = 'BitkitProgressBar';\n\nexport default BitkitProgressBar;\n"],"mappings":";;;;AAgCA,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EACJ,OACA,aAAa,mBACb,eAAe,QACf,OAAO,KACP,aAAa,WACb,cACA,GAAG,SACD;CAOJ,MAAM,uBAAuB,cACpB,QAAQ;EAAE,GAAG;EAAc,aAAa;CAAM,IAAI,cACzD,CAAC,OAAO,YAAY,CACtB;CAEA,OACE,oBAAC,SAAS,MAAV;EACO;EACS;EACR;EACM;EACZ,cAAc;EACd,GAAI;EAEJ,UAAA,oBAAC,SAAS,OAAV,EAAA,UACE,oBAAC,SAAS,OAAV,EAAgB,YAAY,WAAa,CAAA,EAC3B,CAAA;CACH,CAAA;AAEnB,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"BitkitProgressBar.js","names":[],"sources":["../../../lib/components/BitkitProgressBar/BitkitProgressBar.tsx"],"sourcesContent":["import { Progress, type ProgressRootProps } from '@chakra-ui/react/progress';\nimport { forwardRef, useMemo } from 'react';\n\nimport type semanticColors from '../../theme/semantic-tokens/semanticColors';\n\n/**\n * Every `color/*` semantic token — the only colors the range is allowed to use.\n * Derived from the semantic token map, so new tokens are picked up automatically.\n */\nexport type BitkitProgressBarRangeColor = Extract<keyof typeof semanticColors, `color/${string}`>;\n\nexport interface BitkitProgressBarProps extends Omit<\n  ProgressRootProps,\n  'aria-label' | 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'striped' | 'trackColor'\n> {\n  /**\n   * Accessible name for the bar — never rendered visually. Without it screen readers\n   * announce the percentage alone, with no indication of what is being measured.\n   * The value itself stays exposed through `aria-valuenow`, so this should name the\n   * thing (\"Monthly build limit\"), not repeat the number.\n   */\n  label?: string;\n  /** Color of the filled part. Any `color/*` semantic token. */\n  rangeColor?: BitkitProgressBarRangeColor;\n  /** Which ends are rounded. Use `start`/`none`/`end` for bars sitting next to each other in a group. */\n  roundedEdges?: 'both' | 'end' | 'none' | 'start';\n  /** Height of the bar, in size tokens. */\n  size?: '1' | '2' | '4' | '6' | '8' | '12' | '16';\n  /**\n   * Fills the range with animated diagonal stripes — for work that is running but whose\n   * remaining time is unknown, so the bar keeps moving between value changes.\n   */\n  striped?: boolean;\n  /** Background of the unfilled part. */\n  trackColor?: 'neutral' | 'transparent';\n}\n\nconst BitkitProgressBar = forwardRef<HTMLDivElement, BitkitProgressBarProps>((props, ref) => {\n  const {\n    label,\n    rangeColor = 'color/blue/base',\n    roundedEdges = 'both',\n    size = '8',\n    striped = false,\n    trackColor = 'neutral',\n    translations,\n    ...rest\n  } = props;\n\n  // Zag puts role=\"progressbar\" and aria-label on the *track*, not the root, so an\n  // `aria-label` prop would never reach the labelled element — hence `aria-label` is\n  // omitted from the props and the name is routed through the machine's translations.\n  // Merged rather than replaced: `IntlTranslations` has only `value` today, but Zag has\n  // added keys to its internals before and a wholesale replace would drop them silently.\n  const resolvedTranslations = useMemo(\n    () => (label ? { ...translations, value: () => label } : translations),\n    [label, translations],\n  );\n\n  return (\n    <Progress.Root\n      ref={ref}\n      roundedEdges={roundedEdges}\n      size={size}\n      striped={striped}\n      trackColor={trackColor}\n      translations={resolvedTranslations}\n      {...rest}\n    >\n      <Progress.Track>\n        <Progress.Range backgroundColor={rangeColor} />\n      </Progress.Track>\n    </Progress.Root>\n  );\n});\n\nBitkitProgressBar.displayName = 'BitkitProgressBar';\n\nexport default BitkitProgressBar;\n"],"mappings":";;;;AAqCA,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EACJ,OACA,aAAa,mBACb,eAAe,QACf,OAAO,KACP,UAAU,OACV,aAAa,WACb,cACA,GAAG,SACD;CAOJ,MAAM,uBAAuB,cACpB,QAAQ;EAAE,GAAG;EAAc,aAAa;CAAM,IAAI,cACzD,CAAC,OAAO,YAAY,CACtB;CAEA,OACE,oBAAC,SAAS,MAAV;EACO;EACS;EACR;EACG;EACG;EACZ,cAAc;EACd,GAAI;EAEJ,UAAA,oBAAC,SAAS,OAAV,EAAA,UACE,oBAAC,SAAS,OAAV,EAAgB,iBAAiB,WAAa,CAAA,EAChC,CAAA;CACH,CAAA;AAEnB,CAAC;AAED,kBAAkB,cAAc"}

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

@@ -56,6 +56,20 @@ declare const progressSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
             };
         };
     };
+    striped: {
+        false: {};
+        true: {
+            range: {
+                '--animate-from': "45px";
+                animation: "bg-position 1.5s linear infinite";
+                backgroundImage: string;
+                backgroundSize: "45px 45px";
+                '@media (prefers-reduced-motion: reduce)': {
+                    animation: "none";
+                };
+            };
+        };
+    };
     trackColor: {
         neutral: {
             track: {

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

@@ -1,6 +1,9 @@
 import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
 import { progressAnatomy } from "@chakra-ui/react/anatomy";
 //#region lib/theme/slot-recipes/Progress.recipe.ts
+var STRIPE_TILE_PX = 45;
+var STRIPE_COLOR = "var(--colors-color\\/white\\/30)";
+var STRIPE_GRADIENT = `linear-gradient(45deg, ${STRIPE_COLOR} 25%, transparent 25%, transparent 50%, ${STRIPE_COLOR} 50%, ${STRIPE_COLOR} 75%, transparent 75%, transparent)`;
 var progressSlotRecipe = defineSlotRecipe({
 	className: "progress",
 	slots: progressAnatomy.keys(),
@@ -44,6 +47,16 @@ var progressSlotRecipe = defineSlotRecipe({
 			"12": { track: { height: "12" } },
 			"16": { track: { height: "16" } }
 		},
+		striped: {
+			false: {},
+			true: { range: {
+				"--animate-from": `${STRIPE_TILE_PX}px`,
+				animation: "bg-position 1.5s linear infinite",
+				backgroundImage: STRIPE_GRADIENT,
+				backgroundSize: `${STRIPE_TILE_PX}px ${STRIPE_TILE_PX}px`,
+				"@media (prefers-reduced-motion: reduce)": { animation: "none" }
+			} }
+		},
 		trackColor: {
 			neutral: { track: { background: "color/neutral/moderate" } },
 			transparent: { track: { background: "color/transparent" } }
@@ -75,6 +88,7 @@ var progressSlotRecipe = defineSlotRecipe({
 	defaultVariants: {
 		roundedEdges: "both",
 		size: "8",
+		striped: false,
 		trackColor: "neutral"
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Progress.recipe.ts"],"sourcesContent":["import { progressAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst progressSlotRecipe = defineSlotRecipe({\n  className: 'progress',\n  slots: progressAnatomy.keys(),\n  base: {\n    // The radius and the clipping live on the root so a consumer-supplied\n    // `borderRadius` style prop lands on the element that actually rounds.\n    root: {\n      overflow: 'hidden',\n      width: 'full',\n    },\n    track: {\n      position: 'relative',\n      width: 'full',\n    },\n    range: {\n      height: 'full',\n      // Keeps a sliver of the range visible at very low values (Figma: min-width 4px)…\n      minWidth: '4',\n      // …but exactly 0 has to render nothing. A coloured stub at 0% reads as progress\n      // that hasn't happened yet — wrong on a usage meter sitting next to \"0 / 3,000\".\n      '[data-scope=\"progress\"][data-part=\"root\"][data-value=\"0\"] &': {\n        minWidth: 0,\n      },\n      transitionDuration: 'moderate',\n      transitionProperty: 'width',\n      transitionTimingFunction: 'ease-out',\n    },\n  },\n  variants: {\n    roundedEdges: {\n      both: {\n        root: { borderRadius: '2' },\n      },\n      end: {\n        root: { borderEndEndRadius: '2', borderStartEndRadius: '2' },\n      },\n      none: {},\n      start: {\n        root: { borderEndStartRadius: '2', borderStartStartRadius: '2' },\n      },\n    },\n    size: {\n      '1': {\n        track: { height: '1' },\n      },\n      '2': {\n        track: { height: '2' },\n      },\n      '4': {\n        track: { height: '4' },\n      },\n      '6': {\n        track: { height: '6' },\n      },\n      '8': {\n        track: { height: '8' },\n      },\n      '12': {\n        track: { height: '12' },\n      },\n      '16': {\n        track: { height: '16' },\n      },\n    },\n    trackColor: {\n      neutral: {\n        track: { background: 'color/neutral/moderate' },\n      },\n      transparent: {\n        track: { background: 'color/transparent' },\n      },\n    },\n  },\n  // With a neutral track the range's trailing edge stays square — the track behind it\n  // carries the shape, and the root clips the leading edge. With a transparent track\n  // the range *is* the visible bar, so it has to reproduce the root's rounding itself.\n  compoundVariants: [\n    {\n      roundedEdges: 'both',\n      trackColor: 'transparent',\n      css: { range: { borderRadius: '2' } },\n    },\n    {\n      roundedEdges: 'start',\n      trackColor: 'transparent',\n      css: { range: { borderEndStartRadius: '2', borderStartStartRadius: '2' } },\n    },\n    {\n      roundedEdges: 'end',\n      trackColor: 'transparent',\n      css: { range: { borderEndEndRadius: '2', borderStartEndRadius: '2' } },\n    },\n  ],\n  defaultVariants: {\n    roundedEdges: 'both',\n    size: '8',\n    trackColor: 'neutral',\n  },\n});\n\nexport default progressSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,gBAAgB,KAAK;CAC5B,MAAM;EAGJ,MAAM;GACJ,UAAU;GACV,OAAO;EACT;EACA,OAAO;GACL,UAAU;GACV,OAAO;EACT;EACA,OAAO;GACL,QAAQ;GAER,UAAU;GAGV,qEAA+D,EAC7D,UAAU,EACZ;GACA,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;EAC5B;CACF;CACA,UAAU;EACR,cAAc;GACZ,MAAM,EACJ,MAAM,EAAE,cAAc,IAAI,EAC5B;GACA,KAAK,EACH,MAAM;IAAE,oBAAoB;IAAK,sBAAsB;GAAI,EAC7D;GACA,MAAM,CAAC;GACP,OAAO,EACL,MAAM;IAAE,sBAAsB;IAAK,wBAAwB;GAAI,EACjE;EACF;EACA,MAAM;GACJ,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,MAAM,EACJ,OAAO,EAAE,QAAQ,KAAK,EACxB;GACA,MAAM,EACJ,OAAO,EAAE,QAAQ,KAAK,EACxB;EACF;EACA,YAAY;GACV,SAAS,EACP,OAAO,EAAE,YAAY,yBAAyB,EAChD;GACA,aAAa,EACX,OAAO,EAAE,YAAY,oBAAoB,EAC3C;EACF;CACF;CAIA,kBAAkB;EAChB;GACE,cAAc;GACd,YAAY;GACZ,KAAK,EAAE,OAAO,EAAE,cAAc,IAAI,EAAE;EACtC;EACA;GACE,cAAc;GACd,YAAY;GACZ,KAAK,EAAE,OAAO;IAAE,sBAAsB;IAAK,wBAAwB;GAAI,EAAE;EAC3E;EACA;GACE,cAAc;GACd,YAAY;GACZ,KAAK,EAAE,OAAO;IAAE,oBAAoB;IAAK,sBAAsB;GAAI,EAAE;EACvE;CACF;CACA,iBAAiB;EACf,cAAc;EACd,MAAM;EACN,YAAY;CACd;AACF,CAAC"}
+{"version":3,"file":"Progress.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Progress.recipe.ts"],"sourcesContent":["import { progressAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst STRIPE_TILE_PX = 45;\n\n// A raw, slash-escaped CSS variable for `color/white/30`: inside a `{colors.…}` reference\n// Chakra reads the first `/` as its color-mix opacity modifier.\nconst STRIPE_COLOR = 'var(--colors-color\\\\/white\\\\/30)';\n\nconst STRIPE_GRADIENT =\n  `linear-gradient(45deg, ${STRIPE_COLOR} 25%, transparent 25%, transparent 50%, ` +\n  `${STRIPE_COLOR} 50%, ${STRIPE_COLOR} 75%, transparent 75%, transparent)`;\n\nconst progressSlotRecipe = defineSlotRecipe({\n  className: 'progress',\n  slots: progressAnatomy.keys(),\n  base: {\n    // The radius and the clipping live on the root so a consumer-supplied\n    // `borderRadius` style prop lands on the element that actually rounds.\n    root: {\n      overflow: 'hidden',\n      width: 'full',\n    },\n    track: {\n      position: 'relative',\n      width: 'full',\n    },\n    range: {\n      height: 'full',\n      // Keeps a sliver of the range visible at very low values (Figma: min-width 4px)…\n      minWidth: '4',\n      // …but exactly 0 has to render nothing. A coloured stub at 0% reads as progress\n      // that hasn't happened yet — wrong on a usage meter sitting next to \"0 / 3,000\".\n      '[data-scope=\"progress\"][data-part=\"root\"][data-value=\"0\"] &': {\n        minWidth: 0,\n      },\n      transitionDuration: 'moderate',\n      transitionProperty: 'width',\n      transitionTimingFunction: 'ease-out',\n    },\n  },\n  variants: {\n    roundedEdges: {\n      both: {\n        root: { borderRadius: '2' },\n      },\n      end: {\n        root: { borderEndEndRadius: '2', borderStartEndRadius: '2' },\n      },\n      none: {},\n      start: {\n        root: { borderEndStartRadius: '2', borderStartStartRadius: '2' },\n      },\n    },\n    size: {\n      '1': {\n        track: { height: '1' },\n      },\n      '2': {\n        track: { height: '2' },\n      },\n      '4': {\n        track: { height: '4' },\n      },\n      '6': {\n        track: { height: '6' },\n      },\n      '8': {\n        track: { height: '8' },\n      },\n      '12': {\n        track: { height: '12' },\n      },\n      '16': {\n        track: { height: '16' },\n      },\n    },\n    striped: {\n      false: {},\n      true: {\n        range: {\n          '--animate-from': `${STRIPE_TILE_PX}px`,\n          animation: 'bg-position 1.5s linear infinite',\n          backgroundImage: STRIPE_GRADIENT,\n          backgroundSize: `${STRIPE_TILE_PX}px ${STRIPE_TILE_PX}px`,\n          '@media (prefers-reduced-motion: reduce)': {\n            animation: 'none',\n          },\n        },\n      },\n    },\n    trackColor: {\n      neutral: {\n        track: { background: 'color/neutral/moderate' },\n      },\n      transparent: {\n        track: { background: 'color/transparent' },\n      },\n    },\n  },\n  // With a neutral track the range's trailing edge stays square — the track behind it\n  // carries the shape, and the root clips the leading edge. With a transparent track\n  // the range *is* the visible bar, so it has to reproduce the root's rounding itself.\n  compoundVariants: [\n    {\n      roundedEdges: 'both',\n      trackColor: 'transparent',\n      css: { range: { borderRadius: '2' } },\n    },\n    {\n      roundedEdges: 'start',\n      trackColor: 'transparent',\n      css: { range: { borderEndStartRadius: '2', borderStartStartRadius: '2' } },\n    },\n    {\n      roundedEdges: 'end',\n      trackColor: 'transparent',\n      css: { range: { borderEndEndRadius: '2', borderStartEndRadius: '2' } },\n    },\n  ],\n  defaultVariants: {\n    roundedEdges: 'both',\n    size: '8',\n    striped: false,\n    trackColor: 'neutral',\n  },\n});\n\nexport default progressSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,iBAAiB;AAIvB,IAAM,eAAe;AAErB,IAAM,kBACJ,0BAA0B,aAAa,0CACpC,aAAa,QAAQ,aAAa;AAEvC,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,gBAAgB,KAAK;CAC5B,MAAM;EAGJ,MAAM;GACJ,UAAU;GACV,OAAO;EACT;EACA,OAAO;GACL,UAAU;GACV,OAAO;EACT;EACA,OAAO;GACL,QAAQ;GAER,UAAU;GAGV,qEAA+D,EAC7D,UAAU,EACZ;GACA,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;EAC5B;CACF;CACA,UAAU;EACR,cAAc;GACZ,MAAM,EACJ,MAAM,EAAE,cAAc,IAAI,EAC5B;GACA,KAAK,EACH,MAAM;IAAE,oBAAoB;IAAK,sBAAsB;GAAI,EAC7D;GACA,MAAM,CAAC;GACP,OAAO,EACL,MAAM;IAAE,sBAAsB;IAAK,wBAAwB;GAAI,EACjE;EACF;EACA,MAAM;GACJ,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,KAAK,EACH,OAAO,EAAE,QAAQ,IAAI,EACvB;GACA,MAAM,EACJ,OAAO,EAAE,QAAQ,KAAK,EACxB;GACA,MAAM,EACJ,OAAO,EAAE,QAAQ,KAAK,EACxB;EACF;EACA,SAAS;GACP,OAAO,CAAC;GACR,MAAM,EACJ,OAAO;IACL,kBAAkB,GAAG,eAAe;IACpC,WAAW;IACX,iBAAiB;IACjB,gBAAgB,GAAG,eAAe,KAAK,eAAe;IACtD,2CAA2C,EACzC,WAAW,OACb;GACF,EACF;EACF;EACA,YAAY;GACV,SAAS,EACP,OAAO,EAAE,YAAY,yBAAyB,EAChD;GACA,aAAa,EACX,OAAO,EAAE,YAAY,oBAAoB,EAC3C;EACF;CACF;CAIA,kBAAkB;EAChB;GACE,cAAc;GACd,YAAY;GACZ,KAAK,EAAE,OAAO,EAAE,cAAc,IAAI,EAAE;EACtC;EACA;GACE,cAAc;GACd,YAAY;GACZ,KAAK,EAAE,OAAO;IAAE,sBAAsB;IAAK,wBAAwB;GAAI,EAAE;EAC3E;EACA;GACE,cAAc;GACd,YAAY;GACZ,KAAK,EAAE,OAAO;IAAE,oBAAoB;IAAK,sBAAsB;GAAI,EAAE;EACvE;CACF;CACA,iBAAiB;EACf,cAAc;EACd,MAAM;EACN,SAAS;EACT,YAAY;CACd;AACF,CAAC"}

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

@@ -1564,6 +1564,20 @@ declare const slotRecipes: {
                 };
             };
         };
+        striped: {
+            false: {};
+            true: {
+                range: {
+                    '--animate-from': "45px";
+                    animation: "bg-position 1.5s linear infinite";
+                    backgroundImage: string;
+                    backgroundSize: "45px 45px";
+                    '@media (prefers-reduced-motion: reduce)': {
+                        animation: "none";
+                    };
+                };
+            };
+        };
         trackColor: {
             neutral: {
                 track: {

package/package.json

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