@mittwald/flow-react-components 1.4.2 → 1.4.3
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/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Slider/Slider.mjs +4 -5
- package/dist/js/packages/components/src/components/Slider/Slider.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Slider/Slider.module.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -11,8 +11,7 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
|
|
|
11
11
|
import Slider_module_default from "./Slider.module.mjs";
|
|
12
12
|
import __locale_default from "../../../../../_virtual/_19.locale.mjs";
|
|
13
13
|
import clsx from "clsx";
|
|
14
|
-
import "react";
|
|
15
|
-
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
16
15
|
import { useObjectRef } from "@react-aria/utils";
|
|
17
16
|
import * as Aria from "react-aria-components";
|
|
18
17
|
//#region src/components/Slider/Slider.tsx
|
|
@@ -72,7 +71,7 @@ var Slider = flowComponent("Slider", (props) => {
|
|
|
72
71
|
size: "s"
|
|
73
72
|
} },
|
|
74
73
|
children: [
|
|
75
|
-
!sliderOnly && /* @__PURE__ */ jsxs(Fragment
|
|
74
|
+
!sliderOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
|
|
76
75
|
onPress: () => state.decrementThumb(0, step),
|
|
77
76
|
"aria-label": stringFormatter.format("decrement"),
|
|
78
77
|
className: Slider_module_default.decrement,
|
|
@@ -85,11 +84,11 @@ var Slider = flowComponent("Slider", (props) => {
|
|
|
85
84
|
})] }),
|
|
86
85
|
/* @__PURE__ */ jsx("div", {
|
|
87
86
|
className: Slider_module_default.fill,
|
|
88
|
-
style: {
|
|
87
|
+
style: { "--slider--value": state.getThumbPercent(0) }
|
|
89
88
|
}),
|
|
90
89
|
showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx("div", {
|
|
91
90
|
className: Slider_module_default.initialMarker,
|
|
92
|
-
style: {
|
|
91
|
+
style: { "--slider--initial-value": state.getValuePercent(defaultValue) }
|
|
93
92
|
}),
|
|
94
93
|
/* @__PURE__ */ jsx(Aria.SliderThumb, {
|
|
95
94
|
inputRef: objectRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Slider.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SliderProps\n extends\n FlowComponentProps<HTMLInputElement>,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"name\"> {\n /** Whether the marker for the initial value should be visible */\n showInitialMarker?: boolean;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n /** Whether the component is invalid. */\n isInvalid?: boolean;\n /** Hide Buttons, Label and Value */\n sliderOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n step,\n sliderOnly,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"Slider\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n const objectRef = useObjectRef(ref);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n tunnel: {\n id: \"label\",\n component: \"Slider\",\n },\n ...fieldPropsContext.Label,\n className: styles.label,\n },\n };\n\n return (\n <div {...fieldProps}>\n <Aria.Slider\n {...rest}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n step={step}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n {!sliderOnly && (\n <div className={styles.text}>\n <Aria.SliderOutput className={styles.value} />{\" \"}\n <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n </div>\n )}\n\n <Aria.SliderTrack className={styles.track}>\n {({ state }) => (\n <PropsContextProvider\n props={{\n Button: {\n isPending: false,\n isFailed: false,\n isSucceeded: false,\n isReadOnly: isReadOnly,\n excludeFromTabOrder: true,\n isDisabled,\n variant: \"plain\",\n color: \"secondary\",\n size: \"s\",\n },\n }}\n >\n {!sliderOnly && (\n <>\n <Button\n onPress={() => state.decrementThumb(0, step)}\n aria-label={stringFormatter.format(\"decrement\")}\n className={styles.decrement}\n >\n <IconMinus />\n </Button>\n <Button\n onPress={() => state.incrementThumb(0, step)}\n aria-label={stringFormatter.format(\"increment\")}\n className={styles.increment}\n >\n <IconPlus />\n </Button>\n </>\n )}\n\n <div\n className={styles.fill}\n style={{\n \"--slider--value\": state.getThumbPercent(0),\n }}\n />\n\n {showInitialMarker &&\n defaultValue &&\n typeof defaultValue === \"number\" && (\n <div\n className={styles.initialMarker}\n style={{\n \"--slider--initial-value\":\n state.getValuePercent(defaultValue),\n }}\n />\n )}\n <Aria.SliderThumb\n inputRef={objectRef}\n name={name}\n className={styles.handle}\n isDisabled={isReadOnly}\n />\n </PropsContextProvider>\n )}\n </Aria.SliderTrack>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.Slider>\n </div>\n );\n});\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,MACA,YACA,cACA,mBACA,YACA,KACA,MACA,YACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,sBAAO,QACP,cAAc,sBAAO,UACrB,SACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,kBAAkB,4BAA4B,kBAAS,QAAQ;CAErE,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,GAAG,kBAAkB;GACrB,WAAW,sBAAO;EACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EACP,UAAA,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,WAAW;GACC;GACE;GACR;GAEN,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA;KACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;KAE7D,CAAC,cACA,qBAAC,OAAD;MAAK,WAAW,sBAAO;MAAvB,UAAA;OACE,oBAAC,KAAK,cAAN,EAAmB,WAAW,sBAAO,MAAQ,CAAA;OAAE;OAC/C,oBAAC,uBAAD;QAAuB,IAAG;QAAQ,WAAU;OAAU,CAAA;MACnD;;KAGP,oBAAC,KAAK,aAAN;MAAkB,WAAW,sBAAO;MAChC,WAAA,EAAE,YACF,qBAAC,sBAAD;OACE,OAAO,EACL,QAAQ;QACN,WAAW;QACX,UAAU;QACV,aAAa;QACD;QACZ,qBAAqB;QACrB;QACA,SAAS;QACT,OAAO;QACP,MAAM;OACR,EACF;OAbF,UAAA;QAeG,CAAC,cACA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAW,sBAAO;SAElB,UAAA,oBAAC,WAAD,CAAY,CAAA;QACN,CAAA,GACR,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAW,sBAAO;SAElB,UAAA,oBAAC,UAAD,CAAW,CAAA;QACL,CAAA,CACR,EAAA,CAAA;QAGJ,oBAAC,OAAD;SACE,WAAW,sBAAO;SAClB,OAAO,EACL,mBAAmB,MAAM,gBAAgB,CAAC,EAC5C;QACD,CAAA;QAEA,qBACC,gBACA,OAAO,iBAAiB,YACtB,oBAAC,OAAD;SACE,WAAW,sBAAO;SAClB,OAAO,EACL,2BACE,MAAM,gBAAgB,YAAY,EACtC;QACD,CAAA;QAEL,oBAAC,KAAK,aAAN;SACE,UAAU;SACJ;SACN,WAAW,sBAAO;SAClB,YAAY;QACb,CAAA;OACmB;;KAER,CAAA;KAClB,oBAAC,gBAAD,CAAiB,CAAA;IACG;;EACX,CAAA;CACV,CAAA;AAET,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n display: flex;\n flex-direction: column;\n width: 100%;\n row-gap: var(--slider--spacing-y);\n\n --button-size: calc(\n var(--button--line-height-s) + var(--button--padding-s-y) * 2\n );\n\n .text {\n text-align: center;\n align-items: end;\n padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n padding-top: calc(var(--slider--spacing-y) / 2);\n\n .value {\n font-size: var(--font-size-text--s);\n font-weight: var(--slider--value-font-weight);\n }\n\n .label {\n margin: 0;\n display: inline-flex;\n column-gap: var(--label--spacing);\n }\n }\n\n .track {\n grid-area: track;\n position: relative;\n height: var(--slider--track-height);\n background-color: var(--slider--track-color--default);\n width: 100%;\n border-radius: var(--slider--corner-radius);\n border: var(--slider--track-border-width) var(--slider--track-border-style)\n var(--slider--track-border-color--default);\n }\n\n .fill {\n position: absolute;\n height: var(--slider--track-height);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--track-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .initialMarker {\n position: absolute;\n height: var(--slider--initial-marker-height);\n width: var(--slider--initial-marker-border-width);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--initial-marker-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .handle {\n width: var(--slider--handle-size);\n height: var(--slider--handle-size);\n border-radius: var(--slider--handle-corner-radius);\n background-color: var(--slider--handle-fill-color);\n border: var(--slider--handle-border-width) var(--slider--track-border-style)\n var(--slider--color--default);\n forced-color-adjust: none;\n top: 50%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &[data-dragging],\n &[data-focus-visible] {\n background-color: var(--slider--color--default);\n }\n\n &[data-focus-visible] {\n @include focus.focus;\n\n & {\n outline-offset: var(--size-px--xs);\n }\n }\n }\n\n .increment,\n .decrement {\n position: absolute;\n top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n }\n\n .increment {\n inset-inline-end: 0;\n }\n\n .decrement {\n inset-inline-start: 0;\n }\n\n &.disabled {\n .track {\n background-color: var(--slider--track-color--disabled);\n border-color: var(--slider--track-border-color--disabled);\n }\n\n .fill {\n background-color: var(--slider--color--disabled);\n }\n\n .handle {\n border-color: var(--slider--color--disabled);\n }\n\n .text {\n color: var(--text--color--disabled);\n }\n }\n}\n\n/*\n.slider {\n\n\n\n\n\n\n\n\n\n}\n*/\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n display: flex;\n flex-direction: column;\n width: 100%;\n row-gap: var(--slider--spacing-y);\n\n --button-size: calc(\n var(--button--line-height-s) + var(--button--padding-s-y) * 2\n );\n\n .text {\n text-align: center;\n align-items: end;\n padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n padding-top: calc(var(--slider--spacing-y) / 2);\n\n .value {\n font-size: var(--font-size-text--s);\n font-weight: var(--slider--value-font-weight);\n }\n\n .label {\n margin: 0;\n display: inline-flex;\n column-gap: var(--label--spacing);\n }\n }\n\n .track {\n grid-area: track;\n position: relative;\n height: var(--slider--track-height);\n background-color: var(--slider--track-color--default);\n width: 100%;\n border-radius: var(--slider--corner-radius);\n border: var(--slider--track-border-width) var(--slider--track-border-style)\n var(--slider--track-border-color--default);\n }\n\n .fill {\n position: absolute;\n width: calc(var(--slider--value) * 100%);\n height: var(--slider--track-height);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--track-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .initialMarker {\n position: absolute;\n inset-inline-start: calc(var(--slider--initial-value) * 100% - 2px);\n height: var(--slider--initial-marker-height);\n width: var(--slider--initial-marker-border-width);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--initial-marker-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .handle {\n width: var(--slider--handle-size);\n height: var(--slider--handle-size);\n border-radius: var(--slider--handle-corner-radius);\n background-color: var(--slider--handle-fill-color);\n border: var(--slider--handle-border-width) var(--slider--track-border-style)\n var(--slider--color--default);\n forced-color-adjust: none;\n top: 50%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &[data-dragging],\n &[data-focus-visible] {\n background-color: var(--slider--color--default);\n }\n\n &[data-focus-visible] {\n @include focus.focus;\n\n & {\n outline-offset: var(--size-px--xs);\n }\n }\n }\n\n .increment,\n .decrement {\n position: absolute;\n top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n }\n\n .increment {\n inset-inline-end: 0;\n }\n\n .decrement {\n inset-inline-start: 0;\n }\n\n &.disabled {\n .track {\n background-color: var(--slider--track-color--disabled);\n border-color: var(--slider--track-border-color--disabled);\n }\n\n .fill {\n background-color: var(--slider--color--disabled);\n }\n\n .handle {\n border-color: var(--slider--color--disabled);\n }\n\n .text {\n color: var(--text--color--disabled);\n }\n }\n}\n\n/*\n.slider {\n\n\n\n\n\n\n\n\n\n}\n*/\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"@internationalized/string-compiler": "^3.4.1",
|
|
84
84
|
"@lezer/common": "^1.5.2",
|
|
85
85
|
"@lezer/highlight": "^1.2.3",
|
|
86
|
-
"@mittwald/flow-icons": "^1.4.
|
|
86
|
+
"@mittwald/flow-icons": "^1.4.3",
|
|
87
87
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
88
|
-
"@mittwald/react-tunnel": "^1.4.
|
|
88
|
+
"@mittwald/react-tunnel": "^1.4.3",
|
|
89
89
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
90
90
|
"@react-aria/form": "^3.2.1",
|
|
91
91
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -138,12 +138,12 @@
|
|
|
138
138
|
"@internationalized/date": "^3.12.3",
|
|
139
139
|
"@lezer/generator": "^1.8.0",
|
|
140
140
|
"@lezer/lr": "^1.4.10",
|
|
141
|
-
"@mittwald/flow-core": "1.4.
|
|
142
|
-
"@mittwald/flow-design-tokens": "1.4.
|
|
143
|
-
"@mittwald/flow-icons-base": "1.4.
|
|
141
|
+
"@mittwald/flow-core": "1.4.3",
|
|
142
|
+
"@mittwald/flow-design-tokens": "1.4.3",
|
|
143
|
+
"@mittwald/flow-icons-base": "1.4.3",
|
|
144
144
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
145
145
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
146
|
-
"@mittwald/typescript-config": "1.4.
|
|
146
|
+
"@mittwald/typescript-config": "1.4.3",
|
|
147
147
|
"@nx/storybook": "^22.7.6",
|
|
148
148
|
"@storybook/addon-a11y": "^10.5.10",
|
|
149
149
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
},
|
|
196
196
|
"peerDependencies": {
|
|
197
197
|
"@internationalized/date": "^3.12.2",
|
|
198
|
-
"@mittwald/flow-icons-pro": "1.4.
|
|
198
|
+
"@mittwald/flow-icons-pro": "1.4.3",
|
|
199
199
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
200
200
|
"next": "^16.2.3",
|
|
201
201
|
"react": "^19.2.0",
|
|
@@ -219,5 +219,5 @@
|
|
|
219
219
|
"browserslist": [
|
|
220
220
|
"baseline widely available"
|
|
221
221
|
],
|
|
222
|
-
"gitHead": "
|
|
222
|
+
"gitHead": "ac0391bfb522499e4af439ade2e3f68faaac42c1"
|
|
223
223
|
}
|