@mittwald/flow-react-components 1.2.0-next.2 → 1.2.0-next.4
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/MIGRATION.md +67 -8
- 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/Heading/Heading.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs +2 -1
- package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs.map +1 -1
- package/dist/types/components/SegmentedControl/components/Segment/Segment.d.ts +2 -1
- package/dist/types/components/SegmentedControl/components/Segment/Segment.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n
|
|
1
|
+
{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n vertical-align: bottom;\n display: inline-flex;\n margin-inline-start: var(--heading--icon-to-text-spacing);\n min-height: var(--heading-line-height);\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n flex-wrap: wrap;\n\n &:empty {\n display: none;\n }\n }\n\n &:where(h1),\n &:where(.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(h2),\n &:where(.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(h3),\n &:where(.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(h4),\n &:where(.h4),\n &:where(h5),\n &:where(.h5),\n &:where(h6),\n &:where(.h6) {\n --font-size: var(--font-size-heading--xs);\n }\n\n @mixin size($size) {\n &.size-#{$size} {\n --font-size: var(--font-size-heading--#{$size});\n }\n }\n\n @include size(\"xs\");\n @include size(\"s\");\n @include size(\"m\");\n @include size(\"l\");\n @include size(\"xl\");\n @include size(\"xxl\");\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n}\n\n@media (max-width: 768px) {\n .heading {\n &:where(h1),\n &.size-xl {\n --font-size: var(--font-size-heading--l);\n }\n\n &.size-l {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(h2),\n &.size-m {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(h3),\n &.size-s {\n --font-size: var(--font-size-heading--xs);\n }\n }\n}\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs
CHANGED
|
@@ -8,7 +8,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
8
8
|
import * as Aria from "react-aria-components";
|
|
9
9
|
//#region src/components/SegmentedControl/components/Segment/Segment.tsx
|
|
10
10
|
/**
|
|
11
|
-
* @deprecated Use `Tab` inside `Tabs`, or `
|
|
11
|
+
* @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —
|
|
12
|
+
* `RadioButton` takes exactly this component's props.
|
|
12
13
|
* @flr-generate all
|
|
13
14
|
*/
|
|
14
15
|
var Segment = flowComponent("Segment", (props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Segment.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @deprecated Use `Tab` inside `Tabs`, or `
|
|
1
|
+
{"version":3,"file":"Segment.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —\n * `RadioButton` takes exactly this component's props.\n * @flr-generate all\n */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n // No deprecation warning here — a Segment only renders inside a\n // SegmentedControl, which already warns.\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.segment, className);\n\n return (\n <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n {children}\n <IconCheck className={styles.checkmark} />\n </Aria.Radio>\n );\n});\n\nexport default Segment;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,UAAU,cAAc,YAAY,UAAU;CAGzD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,qBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EAArD,UAAA,CACG,UACD,oBAAC,WAAD,EAAW,WAAW,uBAAO,UAAY,CAAA,CAC/B;;AAEhB,CAAC"}
|
|
@@ -4,7 +4,8 @@ import * as Aria from "react-aria-components";
|
|
|
4
4
|
export interface SegmentProps extends PropsWithChildren<Omit<Aria.RadioProps, "children">>, FlowComponentProps<HTMLLabelElement> {
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
|
-
* @deprecated Use `Tab` inside `Tabs`, or `
|
|
7
|
+
* @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —
|
|
8
|
+
* `RadioButton` takes exactly this component's props.
|
|
8
9
|
* @flr-generate all
|
|
9
10
|
*/
|
|
10
11
|
export declare const Segment: import('react').FunctionComponent<SegmentProps & import('react').RefAttributes<HTMLLabelElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,YACf,SACE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,EACpD,kBAAkB,CAAC,gBAAgB,CAAC;CAAG;AAE3C
|
|
1
|
+
{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,YACf,SACE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,EACpD,kBAAkB,CAAC,gBAAgB,CAAC;CAAG;AAE3C;;;;GAIG;AACH,eAAO,MAAM,OAAO,mGAalB,CAAC;AAEH,eAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.2.0-next.
|
|
3
|
+
"version": "1.2.0-next.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -78,9 +78,9 @@
|
|
|
78
78
|
"@internationalized/string-compiler": "^3.4.1",
|
|
79
79
|
"@lezer/common": "^1.5.2",
|
|
80
80
|
"@lezer/highlight": "^1.2.3",
|
|
81
|
-
"@mittwald/flow-icons": "1.2.0-next.
|
|
81
|
+
"@mittwald/flow-icons": "1.2.0-next.4",
|
|
82
82
|
"@mittwald/password-tools-js": "3.0.0-alpha.31",
|
|
83
|
-
"@mittwald/react-tunnel": "1.2.0-next.
|
|
83
|
+
"@mittwald/react-tunnel": "1.2.0-next.4",
|
|
84
84
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
85
85
|
"@react-aria/form": "^3.2.1",
|
|
86
86
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -134,12 +134,12 @@
|
|
|
134
134
|
"@internationalized/date": "^3.12.3",
|
|
135
135
|
"@lezer/generator": "^1.8.0",
|
|
136
136
|
"@lezer/lr": "^1.4.10",
|
|
137
|
-
"@mittwald/flow-core": "1.2.0-next.
|
|
138
|
-
"@mittwald/flow-design-tokens": "1.2.0-next.
|
|
139
|
-
"@mittwald/flow-icons-base": "1.2.0-next.
|
|
137
|
+
"@mittwald/flow-core": "1.2.0-next.4",
|
|
138
|
+
"@mittwald/flow-design-tokens": "1.2.0-next.4",
|
|
139
|
+
"@mittwald/flow-icons-base": "1.2.0-next.4",
|
|
140
140
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
141
141
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
142
|
-
"@mittwald/typescript-config": "1.2.0-next.
|
|
142
|
+
"@mittwald/typescript-config": "1.2.0-next.4",
|
|
143
143
|
"@nx/storybook": "^22.7.6",
|
|
144
144
|
"@storybook/addon-a11y": "^10.5.10",
|
|
145
145
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
},
|
|
191
191
|
"peerDependencies": {
|
|
192
192
|
"@internationalized/date": "^3.12.2",
|
|
193
|
-
"@mittwald/flow-icons-pro": "1.2.0-next.
|
|
193
|
+
"@mittwald/flow-icons-pro": "1.2.0-next.4",
|
|
194
194
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
195
195
|
"next": "^16.2.3",
|
|
196
196
|
"react": "^19.2.0",
|
|
@@ -211,5 +211,5 @@
|
|
|
211
211
|
"optional": true
|
|
212
212
|
}
|
|
213
213
|
},
|
|
214
|
-
"gitHead": "
|
|
214
|
+
"gitHead": "ae783a0ea7de8ed256736f8e414c1e4b8ffbea21"
|
|
215
215
|
}
|