@mittwald/flow-react-components 0.2.0-alpha.842 → 0.2.0-alpha.843
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 +6 -0
- package/dist/assets/doc-properties.json +12566 -12566
- package/dist/css/all.css +1 -1
- package/dist/js/flr-universal.mjs +1 -1
- package/dist/js/packages/components/src/components/Icon/Icon.mjs +0 -1
- package/dist/js/packages/components/src/components/Icon/Icon.mjs.map +1 -1
- package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs +7 -3
- package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs.map +1 -1
- package/dist/types/components/Icon/Icon.d.ts.map +1 -1
- package/dist/types/components/LoadingSpinner/LoadingSpinner.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -224,7 +224,7 @@ import './packages/components/src/components/List/listContext.mjs';
|
|
|
224
224
|
import 'mobx';
|
|
225
225
|
export { List } from './packages/components/src/components/List/List.mjs';
|
|
226
226
|
export { typedList } from './packages/components/src/components/List/typedList.mjs';
|
|
227
|
-
import '
|
|
227
|
+
import './packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs';
|
|
228
228
|
import 'react-markdown';
|
|
229
229
|
import 'remark-gfm';
|
|
230
230
|
import './packages/components/src/components/MarkdownEditor/MarkdownEditor.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.mjs","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nexport interface IconProps\n extends\n PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n FlowComponentProps,\n PropsWithStatus {\n /** The size of the icon. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n}\n\n/** @flr-generate all */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n const {\n className,\n \"aria-label\": ariaLabel,\n children,\n size = \"m\",\n status,\n
|
|
1
|
+
{"version":3,"file":"Icon.mjs","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nexport interface IconProps\n extends\n PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n FlowComponentProps,\n PropsWithStatus {\n /** The size of the icon. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n}\n\n/** @flr-generate all */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n const {\n className,\n \"aria-label\": ariaLabel,\n children,\n size = \"m\",\n status,\n ...svgAttributes\n } = props;\n\n const iconProps: SvgAttributeProps = {\n ...svgAttributes,\n focusable: \"false\",\n role: \"img\",\n \"aria-hidden\": !ariaLabel,\n \"aria-label\": ariaLabel,\n className: clsx(\n styles.icon,\n className,\n styles[`size-${size}`],\n status && styles[status],\n ),\n };\n\n const iconElement = React.Children.toArray(children)[0];\n\n if (!React.isValidElement(iconElement)) {\n throw new Error(\n `Expected children of Icon component to be a valid React element (got ${String(\n children,\n )})`,\n );\n }\n\n return cloneElement(iconElement, iconProps);\n});\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,QAAA;AAAA,IACA,IAAA,GAAO,GAAA;AAAA,IACP,MAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAA,GAA+B;AAAA,IACnC,GAAG,aAAA;AAAA,IACH,SAAA,EAAW,OAAA;AAAA,IACX,IAAA,EAAM,KAAA;AAAA,IACN,eAAe,CAAC,SAAA;AAAA,IAChB,YAAA,EAAc,SAAA;AAAA,IACd,SAAA,EAAW,IAAA;AAAA,MACT,MAAA,CAAO,IAAA;AAAA,MACP,SAAA;AAAA,MACA,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,MACrB,MAAA,IAAU,OAAO,MAAM;AAAA;AACzB,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,CAAM,QAAA,CAAS,OAAA,CAAQ,QAAQ,EAAE,CAAC,CAAA;AAEtD,EAAA,IAAI,CAAC,KAAA,CAAM,cAAA,CAAe,WAAW,CAAA,EAAG;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,qEAAA,EAAwE,MAAA;AAAA,QACtE;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,EACF;AAEA,EAAA,OAAO,YAAA,CAAa,aAAa,SAAS,CAAA;AAC5C,CAAC;;;;"}
|
|
@@ -13,6 +13,7 @@ import { isAlphaColor } from '../../lib/types/props.mjs';
|
|
|
13
13
|
import { useReducedMotion } from 'framer-motion';
|
|
14
14
|
import { useDesignTokens } from '../../lib/theming/hooks/useDesignTokens.mjs';
|
|
15
15
|
|
|
16
|
+
const globalSpinnerTime = performance.now();
|
|
16
17
|
const LoadingSpinner = (props) => {
|
|
17
18
|
const { className, color = "default", ...rest } = props;
|
|
18
19
|
const preferReducedMotion = useReducedMotion();
|
|
@@ -24,13 +25,16 @@ const LoadingSpinner = (props) => {
|
|
|
24
25
|
isAlphaColor(color) && styles[color],
|
|
25
26
|
className
|
|
26
27
|
);
|
|
27
|
-
const startingRotation = (performance.now() / animationDurationMs * 360 % 360 + 360) % 360;
|
|
28
28
|
return /* @__PURE__ */ jsx(
|
|
29
29
|
IconPending,
|
|
30
30
|
{
|
|
31
31
|
className: rootClassName,
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
ref: (element) => {
|
|
33
|
+
if (element) {
|
|
34
|
+
const elapsedMs = performance.now() - globalSpinnerTime;
|
|
35
|
+
const phaseMs = elapsedMs % animationDurationMs;
|
|
36
|
+
element.style.setProperty("--animation-delay", `${-phaseMs}ms`);
|
|
37
|
+
}
|
|
34
38
|
},
|
|
35
39
|
...rest
|
|
36
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingSpinner.mjs","sources":["../../../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport React from \"react\";\nimport { IconPending } from \"@/components/Icon/components/icons\";\nimport styles from \"./LoadingSpinner.module.scss\";\nimport type { IconProps } from \"@/components/Icon\";\nimport clsx from \"clsx\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface LoadingSpinnerProps extends IconProps {\n /** The color of the loading spinner. @default \"default\" */\n color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {\n const { className, color = \"default\", ...rest } = props;\n\n const preferReducedMotion = useReducedMotion();\n\n const designTokens = useDesignTokens();\n const loadingSpinnerTokens = designTokens[\"loading-spinner\"];\n\n const animationDurationMs = preferReducedMotion\n ? parseInt(loadingSpinnerTokens[\"transition-duration-slow\"].value)\n : parseInt(loadingSpinnerTokens[\"transition-duration\"].value);\n\n const rootClassName = clsx(\n styles.loadingSpinner,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.mjs","sources":["../../../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport React from \"react\";\nimport { IconPending } from \"@/components/Icon/components/icons\";\nimport styles from \"./LoadingSpinner.module.scss\";\nimport type { IconProps } from \"@/components/Icon\";\nimport clsx from \"clsx\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface LoadingSpinnerProps extends IconProps {\n /** The color of the loading spinner. @default \"default\" */\n color?: \"default\" | AlphaColor;\n}\n\nconst globalSpinnerTime = performance.now();\n\n/** @flr-generate all */\nexport const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {\n const { className, color = \"default\", ...rest } = props;\n\n const preferReducedMotion = useReducedMotion();\n\n const designTokens = useDesignTokens();\n const loadingSpinnerTokens = designTokens[\"loading-spinner\"];\n\n const animationDurationMs = preferReducedMotion\n ? parseInt(loadingSpinnerTokens[\"transition-duration-slow\"].value)\n : parseInt(loadingSpinnerTokens[\"transition-duration\"].value);\n\n const rootClassName = clsx(\n styles.loadingSpinner,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n return (\n <IconPending\n className={rootClassName}\n ref={(element) => {\n if (element) {\n const elapsedMs = performance.now() - globalSpinnerTime;\n const phaseMs = elapsedMs % animationDurationMs;\n\n element.style.setProperty(\"--animation-delay\", `${-phaseMs}ms`);\n }\n }}\n {...rest}\n />\n );\n};\n\nexport default LoadingSpinner;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAeA,MAAM,iBAAA,GAAoB,YAAY,GAAA,EAAI;AAGnC,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,GAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAElD,EAAA,MAAM,sBAAsB,gBAAA,EAAiB;AAE7C,EAAA,MAAM,eAAe,eAAA,EAAgB;AACrC,EAAA,MAAM,oBAAA,GAAuB,aAAa,iBAAiB,CAAA;AAE3D,EAAA,MAAM,mBAAA,GAAsB,mBAAA,GACxB,QAAA,CAAS,oBAAA,CAAqB,0BAA0B,CAAA,CAAE,KAAK,CAAA,GAC/D,QAAA,CAAS,oBAAA,CAAqB,qBAAqB,CAAA,CAAE,KAAK,CAAA;AAE9D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACX,GAAA,EAAK,CAAC,OAAA,KAAY;AAChB,QAAA,IAAI,OAAA,EAAS;AACX,UAAA,MAAM,SAAA,GAAY,WAAA,CAAY,GAAA,EAAI,GAAI,iBAAA;AACtC,UAAA,MAAM,UAAU,SAAA,GAAY,mBAAA;AAE5B,UAAA,OAAA,CAAQ,MAAM,WAAA,CAAY,mBAAA,EAAqB,CAAA,EAAG,CAAC,OAAO,CAAA,EAAA,CAAI,CAAA;AAAA,QAChE;AAAA,MACF,CAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,KAAK,iBAAiB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;AAEtD,MAAM,WAAW,SACf,SACE,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,EAClD,kBAAkB,EAClB,eAAe;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAED,wBAAwB;AACxB,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,KAAK,iBAAiB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;AAEtD,MAAM,WAAW,SACf,SACE,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,EAClD,kBAAkB,EAClB,eAAe;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAED,wBAAwB;AACxB,eAAO,MAAM,IAAI,0EAmCf,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,KAAK,UAAU,EAAgB,MAAM,mBAAmB,CAAC;AAIlE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CAChC;
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,KAAK,UAAU,EAAgB,MAAM,mBAAmB,CAAC;AAIlE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CAChC;AAID,wBAAwB;AACxB,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAgClD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.843",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
"@internationalized/string": "^3.2.7",
|
|
64
64
|
"@internationalized/string-compiler": "^3.3.0",
|
|
65
65
|
"@lezer/highlight": "^1.2.3",
|
|
66
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
66
|
+
"@mittwald/flow-icons": "0.2.0-alpha.843",
|
|
67
67
|
"@mittwald/password-tools-js": "3.0.0-alpha.30",
|
|
68
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
68
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.843",
|
|
69
69
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
70
70
|
"@react-aria/form": "^3.1.5",
|
|
71
71
|
"@react-aria/i18n": "^3.12.16",
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
"@lezer/generator": "^1.8.0",
|
|
120
120
|
"@lezer/lr": "^1.4.8",
|
|
121
121
|
"@mittwald/flow-core": "",
|
|
122
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
122
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.843",
|
|
123
123
|
"@mittwald/flow-icons-base": "",
|
|
124
124
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
125
125
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
},
|
|
175
175
|
"peerDependencies": {
|
|
176
176
|
"@internationalized/date": "^3.10.0",
|
|
177
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
177
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.842",
|
|
178
178
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
179
179
|
"next": "^16.2.3",
|
|
180
180
|
"react": "^19.2.0",
|
|
@@ -195,5 +195,5 @@
|
|
|
195
195
|
"optional": true
|
|
196
196
|
}
|
|
197
197
|
},
|
|
198
|
-
"gitHead": "
|
|
198
|
+
"gitHead": "690c93e986ac5a3e59c5810a7d57f35a536406c5"
|
|
199
199
|
}
|