@bitrise/bitkit-v2 0.3.316 → 0.3.317
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.
|
@@ -5,7 +5,14 @@ import { default as semanticColors } from '../../theme/semantic-tokens/semanticC
|
|
|
5
5
|
* Derived from the semantic token map, so new tokens are picked up automatically.
|
|
6
6
|
*/
|
|
7
7
|
export type BitkitProgressBarRangeColor = Extract<keyof typeof semanticColors, `color/${string}`>;
|
|
8
|
-
export interface BitkitProgressBarProps extends Omit<ProgressRootProps, 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'trackColor'> {
|
|
8
|
+
export interface BitkitProgressBarProps extends Omit<ProgressRootProps, 'aria-label' | 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'trackColor'> {
|
|
9
|
+
/**
|
|
10
|
+
* Accessible name for the bar — never rendered visually. Without it screen readers
|
|
11
|
+
* announce the percentage alone, with no indication of what is being measured.
|
|
12
|
+
* The value itself stays exposed through `aria-valuenow`, so this should name the
|
|
13
|
+
* thing ("Monthly build limit"), not repeat the number.
|
|
14
|
+
*/
|
|
15
|
+
label?: string;
|
|
9
16
|
/** Color of the filled part. Any `color/*` semantic token. */
|
|
10
17
|
rangeColor?: BitkitProgressBarRangeColor;
|
|
11
18
|
/** Which ends are rounded. Use `start`/`none`/`end` for bars sitting next to each other in a group. */
|
|
@@ -1,14 +1,19 @@
|
|
|
1
|
-
import { forwardRef } from "react";
|
|
1
|
+
import { forwardRef, useMemo } from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Progress } from "@chakra-ui/react/progress";
|
|
4
4
|
//#region lib/components/BitkitProgressBar/BitkitProgressBar.tsx
|
|
5
5
|
var BitkitProgressBar = forwardRef((props, ref) => {
|
|
6
|
-
const { rangeColor = "color/blue/base", roundedEdges = "both", size = "8", trackColor = "neutral", ...rest } = props;
|
|
6
|
+
const { label, rangeColor = "color/blue/base", roundedEdges = "both", size = "8", trackColor = "neutral", translations, ...rest } = props;
|
|
7
|
+
const resolvedTranslations = useMemo(() => label ? {
|
|
8
|
+
...translations,
|
|
9
|
+
value: () => label
|
|
10
|
+
} : translations, [label, translations]);
|
|
7
11
|
return /* @__PURE__ */ jsx(Progress.Root, {
|
|
8
12
|
ref,
|
|
9
13
|
roundedEdges,
|
|
10
14
|
size,
|
|
11
15
|
trackColor,
|
|
16
|
+
translations: resolvedTranslations,
|
|
12
17
|
...rest,
|
|
13
18
|
children: /* @__PURE__ */ jsx(Progress.Track, { children: /* @__PURE__ */ jsx(Progress.Range, { background: rangeColor }) })
|
|
14
19
|
});
|
|
@@ -1 +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 } 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 'children' | 'colorPalette' | 'roundedEdges' | 'size' | 'trackColor'\n> {\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 {
|
|
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;YAEJ,oBAAC,SAAS,OAAV,EAAA,UACE,oBAAC,SAAS,OAAV,EAAgB,YAAY,WAAa,CAAA,EAC3B,CAAA;CACH,CAAA;AAEnB,CAAC;AAED,kBAAkB,cAAc"}
|