@mittwald/flow-react-components 0.2.0-alpha.841 → 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.
Files changed (17) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/doc-properties.json +8152 -8152
  3. package/dist/css/all.css +1 -1
  4. package/dist/js/flr-universal.mjs +1 -0
  5. package/dist/js/flr-universal.mjs.map +1 -1
  6. package/dist/js/packages/components/src/components/Icon/Icon.mjs +0 -1
  7. package/dist/js/packages/components/src/components/Icon/Icon.mjs.map +1 -1
  8. package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs +21 -1
  9. package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs.map +1 -1
  10. package/dist/js/packages/components/src/lib/theming/hooks/useDesignTokens.mjs +2 -2
  11. package/dist/js/packages/components/src/lib/theming/hooks/useDesignTokens.mjs.map +1 -1
  12. package/dist/js/packages/components/src/lib/tokens/CategoricalColors.mjs +2 -2
  13. package/dist/js/packages/components/src/lib/tokens/CategoricalColors.mjs.map +1 -1
  14. package/dist/js/packages/design-tokens/dist/json/all-light.json.mjs +2 -2
  15. package/dist/types/components/Icon/Icon.d.ts.map +1 -1
  16. package/dist/types/components/LoadingSpinner/LoadingSpinner.d.ts.map +1 -1
  17. package/package.json +6 -6
package/dist/js/flr-universal.mjs CHANGED
@@ -224,6 +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 './packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs';
227
228
  import 'react-markdown';
228
229
  import 'remark-gfm';
229
230
  import './packages/components/src/components/MarkdownEditor/MarkdownEditor.mjs';
package/dist/js/flr-universal.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"flr-universal.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"flr-universal.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/js/packages/components/src/components/Icon/Icon.mjs CHANGED
@@ -13,7 +13,6 @@ const Icon = flowComponent("Icon", (props) => {
13
13
  children,
14
14
  size = "m",
15
15
  status,
16
- ref: ignoredRef,
17
16
  ...svgAttributes
18
17
  } = props;
19
18
  const iconProps = {
package/dist/js/packages/components/src/components/Icon/Icon.mjs.map CHANGED
@@ -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 ref: ignoredRef,\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,GAAA,EAAK,UAAA;AAAA,IACL,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;;;;"}
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;;;;"}
package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs CHANGED
@@ -10,15 +10,35 @@ import { IconPending } from '../Icon/components/icons/IconPending.mjs';
10
10
  import styles from './LoadingSpinner.module.scss.mjs';
11
11
  import clsx from 'clsx';
12
12
  import { isAlphaColor } from '../../lib/types/props.mjs';
13
+ import { useReducedMotion } from 'framer-motion';
14
+ import { useDesignTokens } from '../../lib/theming/hooks/useDesignTokens.mjs';
13
15
 
16
+ const globalSpinnerTime = performance.now();
14
17
  const LoadingSpinner = (props) => {
15
18
  const { className, color = "default", ...rest } = props;
19
+ const preferReducedMotion = useReducedMotion();
20
+ const designTokens = useDesignTokens();
21
+ const loadingSpinnerTokens = designTokens["loading-spinner"];
22
+ const animationDurationMs = preferReducedMotion ? parseInt(loadingSpinnerTokens["transition-duration-slow"].value) : parseInt(loadingSpinnerTokens["transition-duration"].value);
16
23
  const rootClassName = clsx(
17
24
  styles.loadingSpinner,
18
25
  isAlphaColor(color) && styles[color],
19
26
  className
20
27
  );
21
- return /* @__PURE__ */ jsx(IconPending, { className: rootClassName, ...rest });
28
+ return /* @__PURE__ */ jsx(
29
+ IconPending,
30
+ {
31
+ className: rootClassName,
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
+ }
38
+ },
39
+ ...rest
40
+ }
41
+ );
22
42
  };
23
43
 
24
44
  export { LoadingSpinner, LoadingSpinner as default };
package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs.map CHANGED
@@ -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\";\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 rootClassName = clsx(\n styles.loadingSpinner,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n return <IconPending className={rootClassName} {...rest} />;\n};\n\nexport default LoadingSpinner;\n"],"names":[],"mappings":";;;;;;;;;;;AAcO,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,GAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAElD,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,uBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,CAAA;AAC1D;;;;"}
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;;;;"}
package/dist/js/packages/components/src/lib/theming/hooks/useDesignTokens.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  "use client"
2
2
  /* */
3
- import lightTokens from '../../../../../design-tokens/dist/json/all-light.json.mjs';
3
+ import tokens from '../../../../../design-tokens/dist/json/all-light.json.mjs';
4
4
  import darkTokens from '../../../../../design-tokens/dist/json/all-dark.json.mjs';
5
5
  import { useResolvedTheme } from './useResolvedTheme.mjs';
6
6
 
7
7
  const useDesignTokens = () => {
8
8
  const theme = useResolvedTheme();
9
- return theme === "light" ? lightTokens : darkTokens;
9
+ return theme === "light" ? tokens : darkTokens;
10
10
  };
11
11
 
12
12
  export { useDesignTokens };
package/dist/js/packages/components/src/lib/theming/hooks/useDesignTokens.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useDesignTokens.mjs","sources":["../../../../../../../../src/lib/theming/hooks/useDesignTokens.ts"],"sourcesContent":["import lightTokens from \"@mittwald/flow-design-tokens/json/all-light.json\";\nimport darkTokens from \"@mittwald/flow-design-tokens/json/all-dark.json\";\nimport { useResolvedTheme } from \"./useResolvedTheme\";\n\nexport const useDesignTokens = () => {\n const theme = useResolvedTheme();\n return theme === \"light\" ? lightTokens : darkTokens;\n};\n"],"names":[],"mappings":";;;;AAIO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,QAAQ,gBAAA,EAAiB;AAC/B,EAAA,OAAO,KAAA,KAAU,UAAU,WAAA,GAAc,UAAA;AAC3C;;;;"}
1
+ {"version":3,"file":"useDesignTokens.mjs","sources":["../../../../../../../../src/lib/theming/hooks/useDesignTokens.ts"],"sourcesContent":["import lightTokens from \"@mittwald/flow-design-tokens/json/all-light.json\";\nimport darkTokens from \"@mittwald/flow-design-tokens/json/all-dark.json\";\nimport { useResolvedTheme } from \"./useResolvedTheme\";\n\nexport const useDesignTokens = () => {\n const theme = useResolvedTheme();\n return theme === \"light\" ? lightTokens : darkTokens;\n};\n"],"names":["lightTokens"],"mappings":";;;;AAIO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,QAAQ,gBAAA,EAAiB;AAC/B,EAAA,OAAO,KAAA,KAAU,UAAUA,MAAA,GAAc,UAAA;AAC3C;;;;"}
package/dist/js/packages/components/src/lib/tokens/CategoricalColors.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  "use client"
2
2
  /* */
3
- import lightTokens from '../../../../design-tokens/dist/json/all-light.json.mjs';
3
+ import tokens from '../../../../design-tokens/dist/json/all-light.json.mjs';
4
4
 
5
5
  const categoricalColors = Object.keys(
6
- lightTokens.color.categorical
6
+ tokens.color.categorical
7
7
  );
8
8
 
9
9
  export { categoricalColors };
package/dist/js/packages/components/src/lib/tokens/CategoricalColors.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CategoricalColors.mjs","sources":["../../../../../../../src/lib/tokens/CategoricalColors.ts"],"sourcesContent":["import tokens from \"@mittwald/flow-design-tokens/json/all-light.json\";\n\nexport const categoricalColors = Object.keys(\n tokens.color.categorical,\n) as (keyof typeof tokens.color.categorical)[];\n\nexport type CategoricalColor = (typeof categoricalColors)[number];\nexport type CategoricalWithCustomColor = CategoricalColor | (string & {});\n"],"names":["tokens"],"mappings":";;AAEO,MAAM,oBAAoB,MAAA,CAAO,IAAA;AAAA,EACtCA,YAAO,KAAA,CAAM;AACf;;;;"}
1
+ {"version":3,"file":"CategoricalColors.mjs","sources":["../../../../../../../src/lib/tokens/CategoricalColors.ts"],"sourcesContent":["import tokens from \"@mittwald/flow-design-tokens/json/all-light.json\";\n\nexport const categoricalColors = Object.keys(\n tokens.color.categorical,\n) as (keyof typeof tokens.color.categorical)[];\n\nexport type CategoricalColor = (typeof categoricalColors)[number];\nexport type CategoricalWithCustomColor = CategoricalColor | (string & {});\n"],"names":[],"mappings":";;AAEO,MAAM,oBAAoB,MAAA,CAAO,IAAA;AAAA,EACtC,OAAO,KAAA,CAAM;AACf;;;;"}
package/dist/js/packages/design-tokens/dist/json/all-light.json.mjs CHANGED
@@ -52,7 +52,7 @@ const list = {"spacing":{"key":"{list.spacing}","value":"8px","filePath":"src/st
52
52
  const section = {"section-to-section-spacing":{"key":"{section.section-to-section-spacing}","value":"2rem","filePath":"src/structure/section.yml","isSource":true,"original":{"value":"{size-rem.xl}","key":"{section.section-to-section-spacing}"},"name":"SectionSectionToSectionSpacing","attributes":{"category":"section","type":"section-to-section-spacing"},"path":["section","section-to-section-spacing"]},"spacing":{"key":"{section.spacing}","value":"1rem","filePath":"src/structure/section.yml","isSource":true,"original":{"value":"{size-rem.m}","key":"{section.spacing}"},"name":"SectionSpacing","attributes":{"category":"section","type":"spacing"},"path":["section","spacing"]},"sub-heading-spacing-m":{"key":"{section.sub-heading-spacing-m}","value":"1.5rem","filePath":"src/structure/section.yml","isSource":true,"original":{"value":"{size-rem.l}","key":"{section.sub-heading-spacing-m}"},"name":"SectionSubHeadingSpacingM","attributes":{"category":"section","type":"sub-heading-spacing-m"},"path":["section","sub-heading-spacing-m"]},"sub-heading-spacing-s":{"key":"{section.sub-heading-spacing-s}","value":"0.5rem","filePath":"src/structure/section.yml","isSource":true,"original":{"value":"{size-rem.s}","key":"{section.sub-heading-spacing-s}"},"name":"SectionSubHeadingSpacingS","attributes":{"category":"section","type":"sub-heading-spacing-s"},"path":["section","sub-heading-spacing-s"]}};
53
53
  const separator = {"color":{"key":"{separator.color}","value":"#B7C9DB","filePath":"src/structure/separator.yml","isSource":true,"original":{"value":"{neutral.color.500}","key":"{separator.color}"},"name":"SeparatorColor","attributes":{"category":"separator","type":"color"},"path":["separator","color"]},"height":{"key":"{separator.height}","value":"1px","filePath":"src/structure/separator.yml","isSource":true,"original":{"value":"{border-width.100}","key":"{separator.height}"},"name":"SeparatorHeight","attributes":{"category":"separator","type":"height"},"path":["separator","height"]},"border-style":{"key":"{separator.border-style}","value":"solid","filePath":"src/structure/separator.yml","isSource":true,"original":{"value":"{border-style.default}","key":"{separator.border-style}"},"name":"SeparatorBorderStyle","attributes":{"category":"separator","type":"border-style"},"path":["separator","border-style"]}};
54
54
  const table = {"corner-radius":{"key":"{table.corner-radius}","value":"8px","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{corner-radius.m}","key":"{table.corner-radius}"},"name":"TableCornerRadius","attributes":{"category":"table","type":"corner-radius"},"path":["table","corner-radius"]},"border-width":{"key":"{table.border-width}","value":"1px","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{border-width.100}","key":"{table.border-width}"},"name":"TableBorderWidth","attributes":{"category":"table","type":"border-width"},"path":["table","border-width"]},"border-style":{"key":"{table.border-style}","value":"solid","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{border-style.default}","key":"{table.border-style}"},"name":"TableBorderStyle","attributes":{"category":"table","type":"border-style"},"path":["table","border-style"]},"border-color":{"key":"{table.border-color}","value":"#5E6C7A","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{neutral-outline-border-color}","key":"{table.border-color}"},"name":"TableBorderColor","attributes":{"category":"table","type":"border-color"},"path":["table","border-color"]},"padding-x":{"key":"{table.padding-x}","value":"16px","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{size-px.m}","key":"{table.padding-x}"},"name":"TablePaddingX","attributes":{"category":"table","type":"padding-x"},"path":["table","padding-x"]},"padding-y":{"key":"{table.padding-y}","value":"8px","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{size-px.s}","key":"{table.padding-y}"},"name":"TablePaddingY","attributes":{"category":"table","type":"padding-y"},"path":["table","padding-y"]},"header-font-weight":{"key":"{table.header-font-weight}","value":"bold","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{font-weight.bold}","key":"{table.header-font-weight}"},"name":"TableHeaderFontWeight","attributes":{"category":"table","type":"header-font-weight"},"path":["table","header-font-weight"]},"header-border-width":{"key":"{table.header-border-width}","value":"2px","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{border-width.200}","key":"{table.header-border-width}"},"name":"TableHeaderBorderWidth","attributes":{"category":"table","type":"header-border-width"},"path":["table","header-border-width"]},"footer-font-weight":{"key":"{table.footer-font-weight}","value":"bold","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{font-weight.bold}","key":"{table.footer-font-weight}"},"name":"TableFooterFontWeight","attributes":{"category":"table","type":"footer-font-weight"},"path":["table","footer-font-weight"]},"footer-border-width":{"key":"{table.footer-border-width}","value":"2px","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{border-width.200}","key":"{table.footer-border-width}"},"name":"TableFooterBorderWidth","attributes":{"category":"table","type":"footer-border-width"},"path":["table","footer-border-width"]},"background-color":{"key":"{table.background-color}","value":"#FFFFFF","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{neutral.color.100}","key":"{table.background-color}"},"name":"TableBackgroundColor","attributes":{"category":"table","type":"background-color"},"path":["table","background-color"]},"background-color-accent":{"key":"{table.background-color-accent}","value":"#F4F8FC","filePath":"src/structure/table.yml","isSource":true,"original":{"value":"{neutral.color.200}","key":"{table.background-color-accent}"},"name":"TableBackgroundColorAccent","attributes":{"category":"table","type":"background-color-accent"},"path":["table","background-color-accent"]}};
55
- const lightTokens = {
55
+ const tokens = {
56
56
  "action-group": {"spacing":{"m":{"key":"{action-group.spacing.m}","value":"16px","filePath":"src/actions/action-group.yml","isSource":true,"original":{"value":"{size-px.m}","key":"{action-group.spacing.m}"},"name":"ActionGroupSpacingM","attributes":{"category":"action-group","type":"spacing","item":"m"},"path":["action-group","spacing","m"]},"s":{"key":"{action-group.spacing.s}","value":"8px","filePath":"src/actions/action-group.yml","isSource":true,"original":{"value":"{size-px.s}","key":"{action-group.spacing.s}"},"name":"ActionGroupSpacingS","attributes":{"category":"action-group","type":"spacing","item":"s"},"path":["action-group","spacing","s"]}}},
57
57
  button,
58
58
  "image-button": {"brightness":{"hover":{"key":"{image-button.brightness.hover}","value":"62.5%","filePath":"src/actions/image-button.yml","isSource":true,"original":{"value":"62.5%","key":"{image-button.brightness.hover}"},"name":"ImageButtonBrightnessHover","attributes":{"category":"image-button","type":"brightness","item":"hover"},"path":["image-button","brightness","hover"]},"pressed":{"key":"{image-button.brightness.pressed}","value":"50%","filePath":"src/actions/image-button.yml","isSource":true,"original":{"value":"50%","key":"{image-button.brightness.pressed}"},"name":"ImageButtonBrightnessPressed","attributes":{"category":"image-button","type":"brightness","item":"pressed"},"path":["image-button","brightness","pressed"]}},"hover-icon-color":{"key":"{image-button.hover-icon-color}","value":"rgb(255 255 255 / 100%)","filePath":"src/actions/image-button.yml","isSource":true,"original":{"value":"{light-static-plain-content-color}","key":"{image-button.hover-icon-color}"},"name":"ImageButtonHoverIconColor","attributes":{"category":"image-button","type":"hover-icon-color"},"path":["image-button","hover-icon-color"]}},
@@ -303,5 +303,5 @@ const lightTokens = {
303
303
  "image-cropper": {"spacing":{"key":"{image-cropper.spacing}","value":"16px","filePath":"src/upload/image-cropper.yml","isSource":true,"original":{"value":"{size-px.m}","key":"{image-cropper.spacing}"},"name":"ImageCropperSpacing","attributes":{"category":"image-cropper","type":"spacing"},"path":["image-cropper","spacing"]},"border-color":{"key":"{image-cropper.border-color}","value":"#5E6C7A","filePath":"src/upload/image-cropper.yml","isSource":true,"original":{"value":"{neutral-outline-border-color}","key":"{image-cropper.border-color}"},"name":"ImageCropperBorderColor","attributes":{"category":"image-cropper","type":"border-color"},"path":["image-cropper","border-color"]},"border-style":{"key":"{image-cropper.border-style}","value":"solid","filePath":"src/upload/image-cropper.yml","isSource":true,"original":{"value":"{border-style.default}","key":"{image-cropper.border-style}"},"name":"ImageCropperBorderStyle","attributes":{"category":"image-cropper","type":"border-style"},"path":["image-cropper","border-style"]},"border-width":{"key":"{image-cropper.border-width}","value":"1px","filePath":"src/upload/image-cropper.yml","isSource":true,"original":{"value":"{border-width.100}","key":"{image-cropper.border-width}"},"name":"ImageCropperBorderWidth","attributes":{"category":"image-cropper","type":"border-width"},"path":["image-cropper","border-width"]},"corner-radius":{"key":"{image-cropper.corner-radius}","value":"8px","filePath":"src/upload/image-cropper.yml","isSource":true,"original":{"value":"{corner-radius.m}","key":"{image-cropper.corner-radius}"},"name":"ImageCropperCornerRadius","attributes":{"category":"image-cropper","type":"corner-radius"},"path":["image-cropper","corner-radius"]},"grid-width":{"key":"{image-cropper.grid-width}","value":"0.5px","filePath":"src/upload/image-cropper.yml","isSource":true,"original":{"value":"0.5px","key":"{image-cropper.grid-width}"},"name":"ImageCropperGridWidth","attributes":{"category":"image-cropper","type":"grid-width"},"path":["image-cropper","grid-width"]},"grid-color":{"key":"{image-cropper.grid-color}","value":"rgb(255 255 255 / 50%)","filePath":"src/upload/image-cropper.yml","isSource":true,"original":{"value":"{light-static.color.400}","key":"{image-cropper.grid-color}"},"name":"ImageCropperGridColor","attributes":{"category":"image-cropper","type":"grid-color"},"path":["image-cropper","grid-color"]},"mask-border-color":{"key":"{image-cropper.mask-border-color}","value":"rgb(255 255 255 / 100%)","filePath":"src/upload/image-cropper.yml","isSource":true,"original":{"value":"{light-static.color.800}","key":"{image-cropper.mask-border-color}"},"name":"ImageCropperMaskBorderColor","attributes":{"category":"image-cropper","type":"mask-border-color"},"path":["image-cropper","mask-border-color"]},"mask-color":{"key":"{image-cropper.mask-color}","value":"rgb(0 0 0 / 75%)","filePath":"src/upload/image-cropper.yml","isSource":true,"original":{"value":"{dark-static.color.600}","key":"{image-cropper.mask-color}"},"name":"ImageCropperMaskColor","attributes":{"category":"image-cropper","type":"mask-color"},"path":["image-cropper","mask-color"]}},
304
304
  };
305
305
 
306
- export { accordion, alert, align, area, avatar, axis, badge, blur, breadcrumb, button, calendar, chat, choice, color, danger, dark, decorative, lightTokens as default, focus, heading, icon, image, info, initials, kbd, label, legend, light, line, link, list, markdown, menu, message, modal, neutral, notification, overlay, popover, primary, rating, section, separator, shadow, slider, success, table, tabs, text, tooltip, transition, unavailable, warning };
306
+ export { accordion, alert, align, area, avatar, axis, badge, blur, breadcrumb, button, calendar, chat, choice, color, danger, dark, decorative, tokens as default, focus, heading, icon, image, info, initials, kbd, label, legend, light, line, link, list, markdown, menu, message, modal, neutral, notification, overlay, popover, primary, rating, section, separator, shadow, slider, success, table, tabs, text, tooltip, transition, unavailable, warning };
307
307
  //# sourceMappingURL=all-light.json.mjs.map
package/dist/types/components/Icon/Icon.d.ts.map CHANGED
@@ -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,0EAoCf,CAAC;AAEH,eAAe,IAAI,CAAC"}
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"}
package/dist/types/components/LoadingSpinner/LoadingSpinner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,KAAK,UAAU,EAAgB,MAAM,mBAAmB,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CAChC;AAED,wBAAwB;AACxB,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAUlD,CAAC;AAEF,eAAe,cAAc,CAAC"}
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.841",
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.841",
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.841",
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.841",
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.840",
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": "97d32b6de28e2f13547510980c7eba2eaa621e75"
198
+ "gitHead": "690c93e986ac5a3e59c5810a7d57f35a536406c5"
199
199
  }