@mittwald/flow-react-components 0.2.0-alpha.247 → 0.2.0-alpha.248

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/CHANGELOG.md CHANGED
@@ -3,6 +3,13 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.2.0-alpha.248](https://github.com/mittwald/flow/compare/0.2.0-alpha.247...0.2.0-alpha.248) (2025-06-10)
7
+
8
+ ### Bug Fixes
9
+
10
+ * **MenuItem:** fix switch ([#1578](https://github.com/mittwald/flow/issues/1578)) ([203b83d](https://github.com/mittwald/flow/commit/203b83db89259ef931bc8e6ccd2a395ac925b267))
11
+ * **ProgressBar:** fix value higher than max value ([#1579](https://github.com/mittwald/flow/issues/1579)) ([43c53b2](https://github.com/mittwald/flow/commit/43c53b26a58fb5d2423f0f62c0750ac06295de01))
12
+
6
13
  # [0.2.0-alpha.247](https://github.com/mittwald/flow/compare/0.2.0-alpha.246...0.2.0-alpha.247) (2025-06-06)
7
14
 
8
15
  **Note:** Version bump only for package @mittwald/flow-react-components
@@ -31758,7 +31758,7 @@
31758
31758
  ],
31759
31759
  "required": false,
31760
31760
  "type": {
31761
- "name": "{ value: number; title: string; color?: \"sea-green\" | \"palatinate-blue\" | \"tangerine\" | \"magenta\" | \"tropical-indigo\" | \"malachite\" | \"azure\" | \"violet\" | \"yellow\" | \"alloy-orange\" | \"green\" | \"lime\"; }[]"
31761
+ "name": "{ value: number; title: string; color?: \"sea-green\" | \"palatinate-blue\" | \"tangerine\" | \"magenta\" | \"tropical-indigo\" | \"malachite\" | \"azure\" | \"violet\" | \"yellow\" | \"alloy-orange\" | \"green\" | \"lime\"; valueText?: string; }[] | undefined"
31762
31762
  }
31763
31763
  },
31764
31764
  "showLegend": {
@@ -197589,10 +197589,10 @@
197589
197589
  "displayName": "ProgressBarValue",
197590
197590
  "methods": [],
197591
197591
  "props": {
197592
- "valueText": {
197592
+ "value": {
197593
197593
  "defaultValue": null,
197594
197594
  "description": "",
197595
- "name": "valueText",
197595
+ "name": "value",
197596
197596
  "parent": {
197597
197597
  "fileName": "components/src/components/ProgressBar/components/ProgressBarValue.tsx",
197598
197598
  "name": "Props"
@@ -197605,7 +197605,26 @@
197605
197605
  ],
197606
197606
  "required": false,
197607
197607
  "type": {
197608
- "name": "string"
197608
+ "name": "number"
197609
+ }
197610
+ },
197611
+ "valueLabel": {
197612
+ "defaultValue": null,
197613
+ "description": "",
197614
+ "name": "valueLabel",
197615
+ "parent": {
197616
+ "fileName": "components/src/components/ProgressBar/components/ProgressBarValue.tsx",
197617
+ "name": "Props"
197618
+ },
197619
+ "declarations": [
197620
+ {
197621
+ "fileName": "components/src/components/ProgressBar/components/ProgressBarValue.tsx",
197622
+ "name": "Props"
197623
+ }
197624
+ ],
197625
+ "required": false,
197626
+ "type": {
197627
+ "name": "ReactNode"
197609
197628
  }
197610
197629
  },
197611
197630
  "maxValue": {
@@ -197715,7 +197734,7 @@
197715
197734
  ],
197716
197735
  "required": false,
197717
197736
  "type": {
197718
- "name": "{ value: number; title: string; color?: \"sea-green\" | \"palatinate-blue\" | \"tangerine\" | \"magenta\" | \"tropical-indigo\" | \"malachite\" | \"azure\" | \"violet\" | \"yellow\" | \"alloy-orange\" | \"green\" | \"lime\"; }[]"
197737
+ "name": "{ value: number; title: string; color?: \"sea-green\" | \"palatinate-blue\" | \"tangerine\" | \"magenta\" | \"tropical-indigo\" | \"malachite\" | \"azure\" | \"violet\" | \"yellow\" | \"alloy-orange\" | \"green\" | \"lime\"; valueText?: string; }[] | undefined"
197719
197738
  }
197720
197739
  },
197721
197740
  "showLegend": {
@@ -197802,7 +197821,7 @@
197802
197821
  ],
197803
197822
  "required": false,
197804
197823
  "type": {
197805
- "name": "{ value: number; title: string; color?: \"sea-green\" | \"palatinate-blue\" | \"tangerine\" | \"magenta\" | \"tropical-indigo\" | \"malachite\" | \"azure\" | \"violet\" | \"yellow\" | \"alloy-orange\" | \"green\" | \"lime\"; }[]"
197824
+ "name": "{ value: number; title: string; color?: \"sea-green\" | \"palatinate-blue\" | \"tangerine\" | \"magenta\" | \"tropical-indigo\" | \"malachite\" | \"azure\" | \"violet\" | \"yellow\" | \"alloy-orange\" | \"green\" | \"lime\"; valueText?: string; }[] | undefined"
197806
197825
  }
197807
197826
  }
197808
197827
  }
@@ -26,9 +26,6 @@ const MenuItemContent = (props) => {
26
26
  Icon: {
27
27
  className: styles.icon
28
28
  },
29
- Text: {
30
- className: styles.text
31
- },
32
29
  Avatar: {
33
30
  className: styles.avatar
34
31
  }
@@ -41,7 +38,7 @@ const MenuItemContent = (props) => {
41
38
  className: clsx(styles.controlIcon, styles.switch)
42
39
  }
43
40
  };
44
- const selectionIcon = selectionMode === "none" || selectionVariant === "navigation" ? null : selectionVariant === "switch" && isSelected ? /* @__PURE__ */ jsx(Switch, { isReadOnly: true, isSelected: true }) : selectionVariant === "switch" && !isSelected ? /* @__PURE__ */ jsx(Switch, { isReadOnly: true }) : selectionMode === "single" && isSelected ? /* @__PURE__ */ jsx(IconRadioOn, {}) : selectionMode === "single" && !isSelected ? /* @__PURE__ */ jsx(IconRadioOff, {}) : selectionMode === "multiple" && isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, {}) : /* @__PURE__ */ jsx(IconCheckboxEmpty, {});
41
+ const selectionIcon = selectionMode === "none" || selectionVariant === "navigation" ? null : selectionVariant === "switch" ? /* @__PURE__ */ jsx(Switch, { isReadOnly: true, isSelected }) : selectionMode === "single" && isSelected ? /* @__PURE__ */ jsx(IconRadioOn, {}) : selectionMode === "single" && !isSelected ? /* @__PURE__ */ jsx(IconRadioOff, {}) : selectionMode === "multiple" && isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, {}) : /* @__PURE__ */ jsx(IconCheckboxEmpty, {});
45
42
  return /* @__PURE__ */ jsxs(Fragment, { children: [
46
43
  /* @__PURE__ */ jsx(PropsContextProvider, { props: controlIconPropsContext, children: selectionIcon }),
47
44
  /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItemContent.mjs","sources":["../../../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"../../MenuItem.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n IconCheckboxChecked,\n IconCheckboxEmpty,\n IconRadioOff,\n IconRadioOn,\n} from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { Switch } from \"@/components/Switch\";\n\ninterface Props extends Aria.MenuItemRenderProps, PropsWithChildren {\n selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n}\n\nexport const MenuItemContent: FC<Props> = (props) => {\n const {\n selectionMode,\n isSelected,\n selectionVariant = \"control\",\n children,\n } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n },\n Text: {\n className: styles.text,\n },\n Avatar: {\n className: styles.avatar,\n },\n };\n\n const controlIconPropsContext: PropsContext = {\n Icon: {\n className: clsx(styles.controlIcon, styles.icon),\n },\n Switch: {\n className: clsx(styles.controlIcon, styles.switch),\n },\n };\n\n const selectionIcon =\n selectionMode === \"none\" ||\n selectionVariant === \"navigation\" ? null : selectionVariant === \"switch\" &&\n isSelected ? (\n <Switch isReadOnly isSelected />\n ) : selectionVariant === \"switch\" && !isSelected ? (\n <Switch isReadOnly />\n ) : selectionMode === \"single\" && isSelected ? (\n <IconRadioOn />\n ) : selectionMode === \"single\" && !isSelected ? (\n <IconRadioOff />\n ) : selectionMode === \"multiple\" && isSelected ? (\n <IconCheckboxChecked />\n ) : (\n <IconCheckboxEmpty />\n );\n\n return (\n <>\n <PropsContextProvider props={controlIconPropsContext}>\n {selectionIcon}\n </PropsContextProvider>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBa,MAAA,eAAA,GAA6B,CAAC,KAAU,KAAA;AACnD,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAmB,GAAA,SAAA;AAAA,IACnB;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,uBAAwC,GAAA;AAAA,IAC5C,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,WAAA,EAAa,OAAO,IAAI;AAAA,KACjD;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,WAAA,EAAa,OAAO,MAAM;AAAA;AACnD,GACF;AAEA,EAAM,MAAA,aAAA,GACJ,kBAAkB,MAClB,IAAA,gBAAA,KAAqB,eAAe,IAAO,GAAA,gBAAA,KAAqB,YAC9D,UACA,mBAAA,GAAA,CAAC,UAAO,UAAU,EAAA,IAAA,EAAC,YAAU,IAAC,EAAA,CAAA,GAC5B,qBAAqB,QAAY,IAAA,CAAC,6BACnC,GAAA,CAAA,MAAA,EAAA,EAAO,YAAU,IAAC,EAAA,CAAA,GACjB,kBAAkB,QAAY,IAAA,UAAA,uBAC/B,WAAY,EAAA,EAAA,CAAA,GACX,kBAAkB,QAAY,IAAA,CAAC,6BAChC,GAAA,CAAA,YAAA,EAAA,EAAa,IACZ,aAAkB,KAAA,UAAA,IAAc,6BACjC,GAAA,CAAA,mBAAA,EAAA,EAAoB,CAErB,mBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,CAAA;AAGvB,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,uBAAA,EAC1B,QACH,EAAA,aAAA,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"MenuItemContent.mjs","sources":["../../../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"../../MenuItem.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n IconCheckboxChecked,\n IconCheckboxEmpty,\n IconRadioOff,\n IconRadioOn,\n} from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { Switch } from \"@/components/Switch\";\n\ninterface Props extends Aria.MenuItemRenderProps, PropsWithChildren {\n selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n}\n\nexport const MenuItemContent: FC<Props> = (props) => {\n const {\n selectionMode,\n isSelected,\n selectionVariant = \"control\",\n children,\n } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n },\n Avatar: {\n className: styles.avatar,\n },\n };\n\n const controlIconPropsContext: PropsContext = {\n Icon: {\n className: clsx(styles.controlIcon, styles.icon),\n },\n Switch: {\n className: clsx(styles.controlIcon, styles.switch),\n },\n };\n\n const selectionIcon =\n selectionMode === \"none\" ||\n selectionVariant === \"navigation\" ? null : selectionVariant === \"switch\" ? (\n <Switch isReadOnly isSelected={isSelected} />\n ) : selectionMode === \"single\" && isSelected ? (\n <IconRadioOn />\n ) : selectionMode === \"single\" && !isSelected ? (\n <IconRadioOff />\n ) : selectionMode === \"multiple\" && isSelected ? (\n <IconCheckboxChecked />\n ) : (\n <IconCheckboxEmpty />\n );\n\n return (\n <>\n <PropsContextProvider props={controlIconPropsContext}>\n {selectionIcon}\n </PropsContextProvider>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBa,MAAA,eAAA,GAA6B,CAAC,KAAU,KAAA;AACnD,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAmB,GAAA,SAAA;AAAA,IACnB;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,uBAAwC,GAAA;AAAA,IAC5C,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,WAAA,EAAa,OAAO,IAAI;AAAA,KACjD;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,WAAA,EAAa,OAAO,MAAM;AAAA;AACnD,GACF;AAEA,EAAA,MAAM,aACJ,GAAA,aAAA,KAAkB,MAClB,IAAA,gBAAA,KAAqB,eAAe,IAAO,GAAA,gBAAA,KAAqB,QAC9D,mBAAA,GAAA,CAAC,UAAO,UAAU,EAAA,IAAA,EAAC,UAAwB,EAAA,CAAA,GACzC,kBAAkB,QAAY,IAAA,UAAA,mBAC/B,GAAA,CAAA,WAAA,EAAA,EAAY,CACX,GAAA,aAAA,KAAkB,QAAY,IAAA,CAAC,6BAChC,GAAA,CAAA,YAAA,EAAA,EAAa,CACZ,GAAA,aAAA,KAAkB,cAAc,UAClC,mBAAA,GAAA,CAAC,mBAAoB,EAAA,EAAA,CAAA,uBAEpB,iBAAkB,EAAA,EAAA,CAAA;AAGvB,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,uBAAA,EAC1B,QACH,EAAA,aAAA,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
@@ -25,6 +25,7 @@ const ProgressBar = flowComponent("ProgressBar", (props) => {
25
25
  formatOptions,
26
26
  showLegend = true,
27
27
  maxValue,
28
+ valueLabel,
28
29
  ...rest
29
30
  } = props;
30
31
  const rootClassName = clsx(
@@ -48,15 +49,16 @@ const ProgressBar = flowComponent("ProgressBar", (props) => {
48
49
  formatOptions,
49
50
  maxValue,
50
51
  ...rest,
51
- children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
52
+ children: ({ percentage }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
52
53
  children,
53
54
  /* @__PURE__ */ jsx(
54
55
  ProgressBarValue,
55
56
  {
56
57
  showMaxValue,
57
58
  maxValue,
58
- valueText,
59
- formatOptions
59
+ formatOptions,
60
+ value: segmentsTotalValue ?? value,
61
+ valueLabel
60
62
  }
61
63
  ),
62
64
  /* @__PURE__ */ jsx(
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.mjs","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalColors } from \"@/lib/tokens/CategoricalColors\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ProgressBarProps\n extends PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n PropsWithStatus,\n FlowComponentProps {\n /** Whether the max value should be displayed. */\n showMaxValue?: boolean;\n /** The size variant of the progress bar. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n /** Divides the fill of the progress bar into segments */\n segments?: { value: number; title: string; color?: CategoricalColors }[];\n /**\n * Whether the legend component is shown when segments are used. @default:\n * true\n */\n showLegend?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n const {\n children,\n className,\n status = \"info\",\n showMaxValue,\n size = \"m\",\n segments,\n value,\n formatOptions,\n showLegend = true,\n maxValue,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n className,\n styles.progressBar,\n styles[`size-${size}`],\n styles[status],\n );\n\n const propsContext: PropsContext = {\n Label: {\n className: styles.label,\n unstyled: true,\n },\n };\n\n const segmentsTotalValue = segments\n ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n : undefined;\n\n return (\n <>\n <Aria.ProgressBar\n className={rootClassName}\n value={segmentsTotalValue ?? value}\n formatOptions={formatOptions}\n maxValue={maxValue}\n {...rest}\n >\n {({ percentage, valueText }) => (\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ProgressBarValue\n showMaxValue={showMaxValue}\n maxValue={maxValue}\n valueText={valueText}\n formatOptions={formatOptions}\n />\n\n <ProgressBarBar\n percentage={percentage}\n segmentsTotalValue={segmentsTotalValue}\n segments={segments}\n />\n\n <ProgressBarLegend\n showLegend={showLegend}\n segments={segments}\n formatOptions={formatOptions}\n />\n </PropsContextProvider>\n )}\n </Aria.ProgressBar>\n </>\n );\n});\n\nexport default ProgressBar;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsCO,MAAM,WAAc,GAAA,aAAA,CAAc,aAAe,EAAA,CAAC,KAAU,KAAA;AACjE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACT,YAAA;AAAA,IACA,IAAO,GAAA,GAAA;AAAA,IACP,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAa,GAAA,IAAA;AAAA,IACb,QAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,SAAA;AAAA,IACA,MAAO,CAAA,WAAA;AAAA,IACP,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,IACrB,OAAO,MAAM;AAAA,GACf;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,MAAO,CAAA,KAAA;AAAA,MAClB,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,MAAM,qBAAqB,QACvB,GAAA,QAAA,CAAS,GAAI,CAAA,CAAC,MAAM,CAAE,CAAA,KAAK,CAAE,CAAA,MAAA,CAAO,CAAC,CAAG,EAAA,CAAA,KAAM,CAAI,GAAA,CAAA,EAAG,CAAC,CACtD,GAAA,MAAA;AAEJ,EAAA,uBAEI,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,WAAA;AAAA,IAAL;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACX,OAAO,kBAAsB,IAAA,KAAA;AAAA,MAC7B,aAAA;AAAA,MACA,QAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,UAAY,EAAA,SAAA,uBACb,IAAA,CAAA,oBAAA,EAAA,EAAqB,OAAO,YAC1B,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBAED,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,YAAA;AAAA,YACA,QAAA;AAAA,YACA,SAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,kBAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA;AACF,OACF,EAAA;AAAA;AAAA,GAGN,EAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"ProgressBar.mjs","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalColors } from \"@/lib/tokens/CategoricalColors\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ProgressBarProps\n extends PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n PropsWithStatus,\n FlowComponentProps {\n /** Whether the max value should be displayed. */\n showMaxValue?: boolean;\n /** The size variant of the progress bar. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n /** Divides the fill of the progress bar into segments */\n segments?: {\n value: number;\n title: string;\n color?: CategoricalColors;\n valueText?: string;\n }[];\n /**\n * Whether the legend component is shown when segments are used. @default:\n * true\n */\n showLegend?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n const {\n children,\n className,\n status = \"info\",\n showMaxValue,\n size = \"m\",\n segments,\n value,\n formatOptions,\n showLegend = true,\n maxValue,\n valueLabel,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n className,\n styles.progressBar,\n styles[`size-${size}`],\n styles[status],\n );\n\n const propsContext: PropsContext = {\n Label: {\n className: styles.label,\n unstyled: true,\n },\n };\n\n const segmentsTotalValue = segments\n ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n : undefined;\n\n return (\n <>\n <Aria.ProgressBar\n className={rootClassName}\n value={segmentsTotalValue ?? value}\n formatOptions={formatOptions}\n maxValue={maxValue}\n {...rest}\n >\n {({ percentage }) => (\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ProgressBarValue\n showMaxValue={showMaxValue}\n maxValue={maxValue}\n formatOptions={formatOptions}\n value={segmentsTotalValue ?? value}\n valueLabel={valueLabel}\n />\n\n <ProgressBarBar\n percentage={percentage}\n segmentsTotalValue={segmentsTotalValue}\n segments={segments}\n />\n\n <ProgressBarLegend\n showLegend={showLegend}\n segments={segments}\n formatOptions={formatOptions}\n />\n </PropsContextProvider>\n )}\n </Aria.ProgressBar>\n </>\n );\n});\n\nexport default ProgressBar;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA2CO,MAAM,WAAc,GAAA,aAAA,CAAc,aAAe,EAAA,CAAC,KAAU,KAAA;AACjE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACT,YAAA;AAAA,IACA,IAAO,GAAA,GAAA;AAAA,IACP,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAa,GAAA,IAAA;AAAA,IACb,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,SAAA;AAAA,IACA,MAAO,CAAA,WAAA;AAAA,IACP,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,IACrB,OAAO,MAAM;AAAA,GACf;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,MAAO,CAAA,KAAA;AAAA,MAClB,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,MAAM,qBAAqB,QACvB,GAAA,QAAA,CAAS,GAAI,CAAA,CAAC,MAAM,CAAE,CAAA,KAAK,CAAE,CAAA,MAAA,CAAO,CAAC,CAAG,EAAA,CAAA,KAAM,CAAI,GAAA,CAAA,EAAG,CAAC,CACtD,GAAA,MAAA;AAEJ,EAAA,uBAEI,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,WAAA;AAAA,IAAL;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACX,OAAO,kBAAsB,IAAA,KAAA;AAAA,MAC7B,aAAA;AAAA,MACA,QAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,WAAC,EAAE,UAAA,uBACD,IAAA,CAAA,oBAAA,EAAA,EAAqB,OAAO,YAC1B,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBAED,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,YAAA;AAAA,YACA,QAAA;AAAA,YACA,aAAA;AAAA,YACA,OAAO,kBAAsB,IAAA,KAAA;AAAA,YAC7B;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,kBAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA;AACF,OACF,EAAA;AAAA;AAAA,GAGN,EAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -18,7 +18,7 @@ const ProgressBarLegend = (props) => {
18
18
  LegendItem,
19
19
  {
20
20
  color: s.color ?? getCategoricalColorByIndex(i),
21
- children: `${s.title} (${formatOptions ? formatter.format(s.value) : `${s.value} %`})`
21
+ children: `${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`
22
22
  }
23
23
  )) });
24
24
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBarLegend.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n ProgressBarProps,\n \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n const { segments, showLegend, formatOptions } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n if (!segments || !showLegend) {\n return null;\n }\n\n return (\n <Legend className={styles.legend}>\n {segments.map((s, i) => (\n <LegendItem\n color={s.color ?? getCategoricalColorByIndex(i)}\n >{`${s.title} (${formatOptions ? formatter.format(s.value) : `${s.value} %`})`}</LegendItem>\n ))}\n </Legend>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAYa,MAAA,iBAAA,GAA+B,CAAC,KAAU,KAAA;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,aAAA,EAAkB,GAAA,KAAA;AAEhD,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,UAAY,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,MAAA,CAAO,QACvB,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAChB,qBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,CAAA,CAAE,KAAS,IAAA,0BAAA,CAA2B,CAAC,CAAA;AAAA,MAC9C,QAAG,EAAA,CAAA,EAAA,CAAA,CAAE,KAAK,CAAA,EAAA,EAAK,aAAgB,GAAA,SAAA,CAAU,MAAO,CAAA,CAAA,CAAE,KAAK,CAAA,GAAI,CAAG,EAAA,CAAA,CAAE,KAAK,CAAI,EAAA,CAAA,CAAA,CAAA;AAAA;AAAA,GAC5E,CACH,EAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"ProgressBarLegend.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n ProgressBarProps,\n \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n const { segments, showLegend, formatOptions } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n if (!segments || !showLegend) {\n return null;\n }\n\n return (\n <Legend className={styles.legend}>\n {segments.map((s, i) => (\n <LegendItem\n color={s.color ?? getCategoricalColorByIndex(i)}\n >{`${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`}</LegendItem>\n ))}\n </Legend>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAYa,MAAA,iBAAA,GAA+B,CAAC,KAAU,KAAA;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,aAAA,EAAkB,GAAA,KAAA;AAEhD,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,UAAY,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,MAAA,CAAO,QACvB,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAChB,qBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,CAAA,CAAE,KAAS,IAAA,0BAAA,CAA2B,CAAC,CAAA;AAAA,MAC9C,QAAG,EAAA,CAAA,EAAA,CAAA,CAAE,KAAK,CAAA,EAAA,EAAK,EAAE,SAAc,KAAA,aAAA,GAAgB,SAAU,CAAA,MAAA,CAAO,EAAE,KAAK,CAAA,GAAI,CAAG,EAAA,CAAA,CAAE,KAAK,CAAK,EAAA,CAAA,CAAA,CAAA,CAAA;AAAA;AAAA,GAC7F,CACH,EAAA,CAAA;AAEJ;;;;"}
@@ -7,11 +7,19 @@ import { useNumberFormatter, useLocalizedStringFormatter } from 'react-aria';
7
7
  import locales from '../../../../../_virtual/_.locale.json@162914df08c90e5e10d2f78b03d9d768.mjs';
8
8
 
9
9
  const ProgressBarValue = (props) => {
10
- const { showMaxValue, maxValue, valueText, formatOptions } = props;
10
+ const {
11
+ showMaxValue,
12
+ maxValue,
13
+ value = 0,
14
+ formatOptions,
15
+ valueLabel
16
+ } = props;
11
17
  const formatter = useNumberFormatter(formatOptions);
12
18
  const stringFormatter = useLocalizedStringFormatter(locales);
13
- const maxValueText = showMaxValue && maxValue ? formatter.format(maxValue) : void 0;
14
- return /* @__PURE__ */ jsx("span", { className: styles.value, children: maxValueText ? `${valueText} ${stringFormatter.format("progressBar.of")} ${maxValueText}` : valueText });
19
+ const maxValueText = !showMaxValue || !maxValue ? void 0 : formatOptions ? formatter.format(maxValue) : `${maxValue} %`;
20
+ const valueText = formatOptions ? formatter.format(value) : `${value} %`;
21
+ const textWithMaxValue = `${value} ${stringFormatter.format("progressBar.of")} ${maxValueText}`;
22
+ return /* @__PURE__ */ jsx("span", { className: styles.value, children: valueLabel ?? (maxValueText ? textWithMaxValue : valueText) });
15
23
  };
16
24
 
17
25
  export { ProgressBarValue };
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBarValue.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props\n extends Pick<\n ProgressBarProps,\n \"showMaxValue\" | \"maxValue\" | \"formatOptions\"\n > {\n valueText?: string;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n const { showMaxValue, maxValue, valueText, formatOptions } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const maxValueText =\n showMaxValue && maxValue ? formatter.format(maxValue) : undefined;\n\n return (\n <span className={styles.value}>\n {maxValueText\n ? `${valueText} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`\n : valueText}\n </span>\n );\n};\n"],"names":[],"mappings":";;;;;;AAca,MAAA,gBAAA,GAA8B,CAAC,KAAU,KAAA;AACpD,EAAA,MAAM,EAAE,YAAA,EAAc,QAAU,EAAA,SAAA,EAAW,eAAkB,GAAA,KAAA;AAE7D,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,eACJ,YAAgB,IAAA,QAAA,GAAW,SAAU,CAAA,MAAA,CAAO,QAAQ,CAAI,GAAA,MAAA;AAE1D,EAAA,2BACG,MAAK,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,KAAA,EACrB,yBACG,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,eAAA,CAAgB,OAAO,gBAAgB,CAAC,CAAI,CAAA,EAAA,YAAY,KACxE,SACN,EAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"ProgressBarValue.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props\n extends Pick<\n ProgressBarProps,\n \"showMaxValue\" | \"maxValue\" | \"formatOptions\"\n > {\n value?: number;\n valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n const {\n showMaxValue,\n maxValue,\n value = 0,\n formatOptions,\n valueLabel,\n } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const maxValueText =\n !showMaxValue || !maxValue\n ? undefined\n : formatOptions\n ? formatter.format(maxValue)\n : `${maxValue} %`;\n\n const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n const textWithMaxValue = `${value} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`;\n\n return (\n <span className={styles.value}>\n {valueLabel ?? (maxValueText ? textWithMaxValue : valueText)}\n </span>\n );\n};\n"],"names":[],"mappings":";;;;;;AAea,MAAA,gBAAA,GAA8B,CAAC,KAAU,KAAA;AACpD,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAQ,GAAA,CAAA;AAAA,IACR,aAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,YACJ,GAAA,CAAC,YAAgB,IAAA,CAAC,QACd,GAAA,MAAA,GACA,aACE,GAAA,SAAA,CAAU,MAAO,CAAA,QAAQ,CACzB,GAAA,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA;AAEnB,EAAA,MAAM,YAAY,aAAgB,GAAA,SAAA,CAAU,OAAO,KAAK,CAAA,GAAI,GAAG,KAAK,CAAA,EAAA,CAAA;AAEpE,EAAM,MAAA,gBAAA,GAAmB,GAAG,KAAK,CAAA,CAAA,EAAI,gBAAgB,MAAO,CAAA,gBAAgB,CAAC,CAAA,CAAA,EAAI,YAAY,CAAA,CAAA;AAE7F,EACE,uBAAA,GAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,OACrB,QAAe,EAAA,UAAA,KAAA,YAAA,GAAe,mBAAmB,SACpD,CAAA,EAAA,CAAA;AAEJ;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItemContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAanD,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,iBAAiB;IACjE,gBAAgB,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,QAAQ,CAAC;CACxD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAwDrC,CAAC"}
1
+ {"version":3,"file":"MenuItemContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAanD,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,iBAAiB;IACjE,gBAAgB,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,QAAQ,CAAC;CACxD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAkDrC,CAAC"}
@@ -13,6 +13,7 @@ export interface ProgressBarProps extends PropsWithChildren<Omit<Aria.ProgressBa
13
13
  value: number;
14
14
  title: string;
15
15
  color?: CategoricalColors;
16
+ valueText?: string;
16
17
  }[];
17
18
  /**
18
19
  * Whether the legend component is shown when segments are used. @default:
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,gBACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,EAChE,eAAe,EACf,kBAAkB;IACpB,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,iBAAiB,CAAA;KAAE,EAAE,CAAC;IACzE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,iFAqEtB,CAAC;AAEH,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,gBACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,EAChE,eAAe,EACf,kBAAkB;IACpB,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,iBAAiB,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,EAAE,CAAC;IACJ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,iFAuEtB,CAAC;AAEH,eAAe,WAAW,CAAC"}
@@ -1,7 +1,8 @@
1
- import { FC } from 'react';
1
+ import { FC, ReactNode } from 'react';
2
2
  import { ProgressBarProps } from '..';
3
3
  interface Props extends Pick<ProgressBarProps, "showMaxValue" | "maxValue" | "formatOptions"> {
4
- valueText?: string;
4
+ value?: number;
5
+ valueLabel?: ReactNode;
5
6
  }
6
7
  export declare const ProgressBarValue: FC<Props>;
7
8
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBarValue.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,UAAU,KACR,SAAQ,IAAI,CACV,gBAAgB,EAChB,cAAc,GAAG,UAAU,GAAG,eAAe,CAC9C;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,KAAK,CAiBtC,CAAC"}
1
+ {"version":3,"file":"ProgressBarValue.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,UAAU,KACR,SAAQ,IAAI,CACV,gBAAgB,EAChB,cAAc,GAAG,UAAU,GAAG,eAAe,CAC9C;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,KAAK,CA6BtC,CAAC"}
@@ -11,4 +11,6 @@ export declare const Small: Story;
11
11
  export declare const WithSegments: Story;
12
12
  export declare const WithSegmentsAndUnit: Story;
13
13
  export declare const WithSegmentsAndWithoutLegend: Story;
14
+ export declare const WithValueHigherThanMaxValue: Story;
15
+ export declare const WithValueLabel: Story;
14
16
  //# sourceMappingURL=Default.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAyBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAiB1C,CAAC"}
1
+ {"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAyBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAiB1C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAazC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "0.2.0-alpha.247",
3
+ "version": "0.2.0-alpha.248",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://mittwald.github.io/flow",
@@ -58,7 +58,7 @@
58
58
  "@chakra-ui/live-region": "^2.1.0",
59
59
  "@internationalized/string-compiler": "^3.2.6",
60
60
  "@mittwald/password-tools-js": "^2.1.4",
61
- "@mittwald/react-tunnel": "0.2.0-alpha.247",
61
+ "@mittwald/react-tunnel": "0.2.0-alpha.248",
62
62
  "@mittwald/react-use-promise": "^3.0.4",
63
63
  "@react-aria/form": "^3.0.16",
64
64
  "@react-aria/utils": "^3.29.0",
@@ -99,7 +99,7 @@
99
99
  "@faker-js/faker": "^9.8.0",
100
100
  "@internationalized/date": "^3.8.1",
101
101
  "@mittwald/flow-core": "",
102
- "@mittwald/flow-design-tokens": "0.2.0-alpha.247",
102
+ "@mittwald/flow-design-tokens": "0.2.0-alpha.248",
103
103
  "@mittwald/react-use-promise": "^3.0.4",
104
104
  "@mittwald/remote-dom-react": "1.2.2-mittwald.3",
105
105
  "@mittwald/typescript-config": "",
@@ -181,5 +181,5 @@
181
181
  "optional": true
182
182
  }
183
183
  },
184
- "gitHead": "4d6eb35d95ea5844701afcfdcadc70cf985efb87"
184
+ "gitHead": "06dcb929ca832b8f38ec84882ce53919377499a5"
185
185
  }