@mittwald/flow-react-components 0.2.0-alpha.70 → 0.2.0-alpha.72
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 +12 -0
- package/dist/assets/doc-properties.json +10904 -10874
- package/dist/css/all.css +1 -1
- package/dist/js/components/AlertIcon/AlertIcon.mjs +3 -5
- package/dist/js/components/AlertIcon/AlertIcon.mjs.map +1 -1
- package/dist/js/components/Button/Button.mjs +8 -1
- package/dist/js/components/Button/Button.mjs.map +1 -1
- package/dist/js/components/Button/Button.module.scss.mjs +4 -4
- package/dist/js/components/Icon/Icon.mjs +7 -1
- package/dist/js/components/Icon/Icon.mjs.map +1 -1
- package/dist/js/components/Icon/Icon.module.scss.mjs +10 -2
- package/dist/js/components/Icon/Icon.module.scss.mjs.map +1 -1
- package/dist/types/components/AlertIcon/AlertIcon.d.ts.map +1 -1
- package/dist/types/components/Button/Button.d.ts.map +1 -1
- package/dist/types/components/Icon/Icon.d.ts +2 -1
- package/dist/types/components/Icon/Icon.d.ts.map +1 -1
- package/package.json +4 -4
- package/dist/js/components/AlertIcon/AlertIcon.module.scss.mjs +0 -17
- package/dist/js/components/AlertIcon/AlertIcon.module.scss.mjs.map +0 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
5
5
|
import '@tabler/icons-react';
|
|
6
|
-
import
|
|
6
|
+
import 'clsx';
|
|
7
7
|
import '../../lib/propsContext/propsContext.mjs';
|
|
8
8
|
import { ClearPropsContext } from '../../lib/propsContext/ClearPropsContext.mjs';
|
|
9
9
|
import '@react-aria/utils';
|
|
@@ -18,7 +18,6 @@ import { IconSuccess } from '../Icon/components/icons/IconSuccess.mjs';
|
|
|
18
18
|
import { IconWarning } from '../Icon/components/icons/IconWarning.mjs';
|
|
19
19
|
import locales from '../../_virtual/_.locale.json@24b745a6ce9353be513d1f98e927d8d3.mjs';
|
|
20
20
|
import { useLocalizedStringFormatter } from 'react-aria';
|
|
21
|
-
import styles from './AlertIcon.module.scss.mjs';
|
|
22
21
|
|
|
23
22
|
const icons = {
|
|
24
23
|
danger: IconDanger,
|
|
@@ -27,12 +26,11 @@ const icons = {
|
|
|
27
26
|
warning: IconWarning
|
|
28
27
|
};
|
|
29
28
|
const AlertIcon = (props) => {
|
|
30
|
-
const { status = "info",
|
|
31
|
-
const rootClassName = clsx(styles.alertIcon, styles[status], className);
|
|
29
|
+
const { status = "info", ...rest } = props;
|
|
32
30
|
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
33
31
|
const Icon = icons[status];
|
|
34
32
|
const iconProps = {
|
|
35
|
-
|
|
33
|
+
status,
|
|
36
34
|
"aria-label": stringFormatter.format(`alertIcon.${status}`),
|
|
37
35
|
...rest
|
|
38
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertIcon.mjs","sources":["../../../../src/components/AlertIcon/AlertIcon.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport
|
|
1
|
+
{"version":3,"file":"AlertIcon.mjs","sources":["../../../../src/components/AlertIcon/AlertIcon.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport {\n IconDanger,\n IconInfo,\n IconSuccess,\n IconWarning,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { PropsWithStatus, Status } from \"@/lib/types/props\";\nimport type { IconProps } from \"@/components/Icon\";\nimport { ClearPropsContext } from \"@/lib/propsContext\";\n\nexport interface AlertIconProps extends PropsWithStatus, IconProps {}\n\nconst icons: Record<Status, ComponentType> = {\n danger: IconDanger,\n info: IconInfo,\n success: IconSuccess,\n warning: IconWarning,\n};\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const AlertIcon: FC<AlertIconProps> = (props) => {\n const { status = \"info\", ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const Icon = icons[status];\n\n const iconProps: IconProps = {\n status,\n \"aria-label\": stringFormatter.format(`alertIcon.${status}`),\n ...rest,\n };\n\n return (\n <ClearPropsContext>\n <Icon {...iconProps} />\n </ClearPropsContext>\n );\n};\n\nexport default AlertIcon;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,MAAM,KAAuC,GAAA;AAAA,EAC3C,MAAQ,EAAA,UAAA;AAAA,EACR,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,WAAA;AAAA,EACT,OAAS,EAAA;AACX,CAAA;AAMa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,EAAE,MAAA,GAAS,MAAQ,EAAA,GAAG,MAAS,GAAA,KAAA;AAErC,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAM,MAAA,IAAA,GAAO,MAAM,MAAM,CAAA;AAEzB,EAAA,MAAM,SAAuB,GAAA;AAAA,IAC3B,MAAA;AAAA,IACA,YAAc,EAAA,eAAA,CAAgB,MAAO,CAAA,CAAA,UAAA,EAAa,MAAM,CAAE,CAAA,CAAA;AAAA,IAC1D,GAAG;AAAA,GACL;AAEA,EAAA,2BACG,iBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAM,EAAA,EAAA,GAAG,WAAW,CACvB,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -90,7 +90,14 @@ const Button = flowComponent(
|
|
|
90
90
|
}
|
|
91
91
|
};
|
|
92
92
|
const StateIconComponent = isSucceeded ? IconSucceeded : isFailed ? IconFailed : isPending ? LoadingSpinner : void 0;
|
|
93
|
-
const stateIcon = StateIconComponent && /* @__PURE__ */ jsx(
|
|
93
|
+
const stateIcon = StateIconComponent && /* @__PURE__ */ jsx(
|
|
94
|
+
StateIconComponent,
|
|
95
|
+
{
|
|
96
|
+
size,
|
|
97
|
+
className: styles.stateIcon,
|
|
98
|
+
status: isFailed ? "danger" : isSucceeded ? "success" : void 0
|
|
99
|
+
}
|
|
100
|
+
);
|
|
94
101
|
const isStringContent = typeof children === "string";
|
|
95
102
|
return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsxs(
|
|
96
103
|
Aria.Button,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { ClearPropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\n\nexport interface ButtonProps\n extends PropsWithChildren<Aria.ButtonProps>,\n FlowComponentProps {\n /** Slot for button placement in action groups. */\n slot?: string;\n /** The color of the button. @default \"primary\" */\n color?: \"primary\" | \"accent\" | \"secondary\" | \"danger\" | \"dark\" | \"light\";\n /** The visual variant of the button. @default \"solid\" */\n variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n /** The size of the button. @default \"m\" */\n size?: \"m\" | \"s\";\n /** Disables button but keeps it focusable. */\n \"aria-disabled\"?: boolean;\n /** Whether the button is in a pending state. */\n isPending?: boolean;\n /** Whether the button is in a succeeded state. */\n isSucceeded?: boolean;\n /** Whether the button is in a failed state. */\n isFailed?: boolean;\n /** @internal */\n unstyled?: boolean;\n /** @internal */\n ariaSlot?: string | null;\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n if (\n props.isPending ||\n props.isSucceeded ||\n props.isFailed ||\n props[\"aria-disabled\"]\n ) {\n props = { ...props };\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n props.onKeyDown = undefined;\n props.onKeyUp = undefined;\n }\n\n return props;\n};\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Button = flowComponent<\"Button\", HTMLButtonElement>(\n \"Button\",\n (props) => {\n props = disablePendingProps(props);\n\n const {\n color = \"primary\",\n variant = \"solid\",\n children,\n className,\n size = \"m\",\n isPending,\n isSucceeded,\n isFailed,\n \"aria-disabled\": ariaDisabled,\n ref,\n slot: ignoredSlotProp,\n ariaSlot: slot,\n unstyled,\n ...restProps\n } = props;\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.button,\n isPending && styles.isPending,\n isSucceeded && styles.isSucceeded,\n isFailed && styles.isFailed,\n styles[`size-${size}`],\n styles[color],\n styles[variant],\n className,\n /**\n * Workaround warning: The Aria.Button does not support\n * \"aria-disabled\" by now, so this Button will be visually disabled\n * via CSS.\n */\n ariaDisabled && styles.ariaDisabled,\n );\n\n useAriaAnnounceActionState(\n isPending\n ? \"isPending\"\n : isSucceeded\n ? \"isSucceeded\"\n : isFailed\n ? \"isFailed\"\n : \"isIdle\",\n );\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n \"aria-hidden\": true,\n size,\n },\n Text: {\n className: styles.text,\n },\n Avatar: {\n className: styles.avatar,\n },\n CounterBadge: {\n className: styles.counterBadge,\n },\n Image: {\n className: styles.image,\n },\n };\n\n const StateIconComponent = isSucceeded\n ? IconSucceeded\n : isFailed\n ? IconFailed\n : isPending\n ? LoadingSpinner\n : undefined;\n\n const stateIcon = StateIconComponent && (\n <StateIconComponent
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { ClearPropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\n\nexport interface ButtonProps\n extends PropsWithChildren<Aria.ButtonProps>,\n FlowComponentProps {\n /** Slot for button placement in action groups. */\n slot?: string;\n /** The color of the button. @default \"primary\" */\n color?: \"primary\" | \"accent\" | \"secondary\" | \"danger\" | \"dark\" | \"light\";\n /** The visual variant of the button. @default \"solid\" */\n variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n /** The size of the button. @default \"m\" */\n size?: \"m\" | \"s\";\n /** Disables button but keeps it focusable. */\n \"aria-disabled\"?: boolean;\n /** Whether the button is in a pending state. */\n isPending?: boolean;\n /** Whether the button is in a succeeded state. */\n isSucceeded?: boolean;\n /** Whether the button is in a failed state. */\n isFailed?: boolean;\n /** @internal */\n unstyled?: boolean;\n /** @internal */\n ariaSlot?: string | null;\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n if (\n props.isPending ||\n props.isSucceeded ||\n props.isFailed ||\n props[\"aria-disabled\"]\n ) {\n props = { ...props };\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n props.onKeyDown = undefined;\n props.onKeyUp = undefined;\n }\n\n return props;\n};\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Button = flowComponent<\"Button\", HTMLButtonElement>(\n \"Button\",\n (props) => {\n props = disablePendingProps(props);\n\n const {\n color = \"primary\",\n variant = \"solid\",\n children,\n className,\n size = \"m\",\n isPending,\n isSucceeded,\n isFailed,\n \"aria-disabled\": ariaDisabled,\n ref,\n slot: ignoredSlotProp,\n ariaSlot: slot,\n unstyled,\n ...restProps\n } = props;\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.button,\n isPending && styles.isPending,\n isSucceeded && styles.isSucceeded,\n isFailed && styles.isFailed,\n styles[`size-${size}`],\n styles[color],\n styles[variant],\n className,\n /**\n * Workaround warning: The Aria.Button does not support\n * \"aria-disabled\" by now, so this Button will be visually disabled\n * via CSS.\n */\n ariaDisabled && styles.ariaDisabled,\n );\n\n useAriaAnnounceActionState(\n isPending\n ? \"isPending\"\n : isSucceeded\n ? \"isSucceeded\"\n : isFailed\n ? \"isFailed\"\n : \"isIdle\",\n );\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n \"aria-hidden\": true,\n size,\n },\n Text: {\n className: styles.text,\n },\n Avatar: {\n className: styles.avatar,\n },\n CounterBadge: {\n className: styles.counterBadge,\n },\n Image: {\n className: styles.image,\n },\n };\n\n const StateIconComponent = isSucceeded\n ? IconSucceeded\n : isFailed\n ? IconFailed\n : isPending\n ? LoadingSpinner\n : undefined;\n\n const stateIcon = StateIconComponent && (\n <StateIconComponent\n size={size}\n className={styles.stateIcon}\n status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n />\n );\n\n const isStringContent = typeof children === \"string\";\n\n return (\n <ClearPropsContext>\n <Aria.Button\n className={rootClassName}\n ref={ref}\n slot={slot}\n {...restProps}\n >\n <PropsContextProvider props={propsContext}>\n <Wrap if={!unstyled}>\n <span className={styles.content}>\n <Wrap if={isStringContent}>\n <Text className={styles.text}>{children}</Text>\n </Wrap>\n </span>\n </Wrap>\n </PropsContextProvider>\n {stateIcon}\n </Aria.Button>\n </ClearPropsContext>\n );\n },\n);\n\nexport default Button;\n"],"names":[],"mappings":"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"}
|
|
@@ -7,9 +7,9 @@ const stateIcon = "flow--button--state-icon";
|
|
|
7
7
|
const icon = "flow--button--icon";
|
|
8
8
|
const text = "flow--button--text";
|
|
9
9
|
const counterBadge = "flow--button--counter-badge";
|
|
10
|
-
const isSucceeded = "flow--button--is-succeeded";
|
|
11
|
-
const isFailed = "flow--button--is-failed";
|
|
12
10
|
const isPending = "flow--button--is-pending";
|
|
11
|
+
const isFailed = "flow--button--is-failed";
|
|
12
|
+
const isSucceeded = "flow--button--is-succeeded";
|
|
13
13
|
const plain = "flow--button--plain";
|
|
14
14
|
const image = "flow--button--image";
|
|
15
15
|
const primary = "flow--button--primary";
|
|
@@ -30,9 +30,9 @@ const styles = {
|
|
|
30
30
|
icon: icon,
|
|
31
31
|
text: text,
|
|
32
32
|
counterBadge: counterBadge,
|
|
33
|
-
isSucceeded: isSucceeded,
|
|
34
|
-
isFailed: isFailed,
|
|
35
33
|
isPending: isPending,
|
|
34
|
+
isFailed: isFailed,
|
|
35
|
+
isSucceeded: isSucceeded,
|
|
36
36
|
plain: plain,
|
|
37
37
|
"size-s": "flow--button--size-s",
|
|
38
38
|
image: image,
|
|
@@ -18,6 +18,7 @@ const Icon = flowComponent("Icon", (props) => {
|
|
|
18
18
|
"aria-label": ariaLabel,
|
|
19
19
|
children,
|
|
20
20
|
size = "m",
|
|
21
|
+
status,
|
|
21
22
|
ref: ignoredRef,
|
|
22
23
|
...svgAttributes
|
|
23
24
|
} = props;
|
|
@@ -27,7 +28,12 @@ const Icon = flowComponent("Icon", (props) => {
|
|
|
27
28
|
role: "img",
|
|
28
29
|
"aria-hidden": !ariaLabel,
|
|
29
30
|
"aria-label": ariaLabel,
|
|
30
|
-
className: clsx(
|
|
31
|
+
className: clsx(
|
|
32
|
+
styles.icon,
|
|
33
|
+
className,
|
|
34
|
+
styles[`size-${size}`],
|
|
35
|
+
status && styles[status]
|
|
36
|
+
)
|
|
31
37
|
};
|
|
32
38
|
const iconElement = React.Children.toArray(children)[0];
|
|
33
39
|
if (!React.isValidElement(iconElement)) {
|
|
@@ -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 { ClearPropsContext } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nexport interface IconProps\n extends PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n FlowComponentProps {\n /** The size of the icon. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n const {\n className,\n \"aria-label\": ariaLabel,\n children,\n size = \"m\",\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(styles.icon
|
|
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 { ClearPropsContext } from \"@/lib/propsContext\";\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 PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n FlowComponentProps,\n PropsWithStatus {\n /** The size of the icon. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\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 (\n <ClearPropsContext>\n {cloneElement(iconElement, iconProps)}\n </ClearPropsContext>\n );\n});\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;;;;;;;;AAwBO,MAAM,IAAO,GAAA,aAAA,CAAc,MAAQ,EAAA,CAAC,KAAU,KAAA;AACnD,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,QAAA;AAAA,IACA,IAAO,GAAA,GAAA;AAAA,IACP,MAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,IACL,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,SAA+B,GAAA;AAAA,IACnC,GAAG,aAAA;AAAA,IACH,SAAW,EAAA,OAAA;AAAA,IACX,IAAM,EAAA,KAAA;AAAA,IACN,eAAe,CAAC,SAAA;AAAA,IAChB,YAAc,EAAA,SAAA;AAAA,IACd,SAAW,EAAA,IAAA;AAAA,MACT,MAAO,CAAA,IAAA;AAAA,MACP,SAAA;AAAA,MACA,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,MACrB,MAAA,IAAU,OAAO,MAAM;AAAA;AACzB,GACF;AAEA,EAAA,MAAM,cAAc,KAAM,CAAA,QAAA,CAAS,OAAQ,CAAA,QAAQ,EAAE,CAAC,CAAA;AAEtD,EAAA,IAAI,CAAC,KAAA,CAAM,cAAe,CAAA,WAAW,CAAG,EAAA;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAwE,qEAAA,EAAA,MAAA;AAAA,QACtE;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA;AAGF,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACE,QAAa,EAAA,YAAA,CAAA,WAAA,EAAa,SAAS,CACtC,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
const icon = "flow--icon";
|
|
4
|
+
const danger = "flow--icon--danger";
|
|
5
|
+
const success = "flow--icon--success";
|
|
6
|
+
const warning = "flow--icon--warning";
|
|
7
|
+
const info = "flow--icon--info";
|
|
4
8
|
const styles = {
|
|
5
9
|
icon: icon,
|
|
6
10
|
"size-m": "flow--icon--size-m",
|
|
7
11
|
"size-s": "flow--icon--size-s",
|
|
8
|
-
"size-l": "flow--icon--size-l"
|
|
12
|
+
"size-l": "flow--icon--size-l",
|
|
13
|
+
danger: danger,
|
|
14
|
+
success: success,
|
|
15
|
+
warning: warning,
|
|
16
|
+
info: info
|
|
9
17
|
};
|
|
10
18
|
|
|
11
|
-
export { styles as default, icon };
|
|
19
|
+
export { danger, styles as default, icon, info, success, warning };
|
|
12
20
|
//# sourceMappingURL=Icon.module.scss.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Icon.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/AlertIcon/AlertIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AlertIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/AlertIcon/AlertIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EAAE,eAAe,EAAU,MAAM,mBAAmB,CAAC;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,MAAM,WAAW,cAAe,SAAQ,eAAe,EAAE,SAAS;CAAG;AASrE;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAkBxC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAO9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAK/E,MAAM,WAAW,WACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EACzC,kBAAkB;IACpB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACzE,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAsBD;;;GAGG;AACH,eAAO,MAAM,MAAM,+
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAO9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAK/E,MAAM,WAAW,WACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EACzC,kBAAkB;IACpB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACzE,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAsBD;;;GAGG;AACH,eAAO,MAAM,MAAM,+EA+GlB,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { PropsWithChildren, SVGAttributes, default as React } from 'react';
|
|
2
2
|
import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
3
|
+
import { PropsWithStatus } from '../../lib/types/props';
|
|
3
4
|
type SvgAttributeProps = SVGAttributes<SVGSVGElement>;
|
|
4
|
-
export interface IconProps extends PropsWithChildren<Omit<SvgAttributeProps, "name">>, FlowComponentProps {
|
|
5
|
+
export interface IconProps extends PropsWithChildren<Omit<SvgAttributeProps, "name">>, FlowComponentProps, PropsWithStatus {
|
|
5
6
|
/** The size of the icon. @default "m" */
|
|
6
7
|
size?: "s" | "m" | "l";
|
|
7
8
|
}
|
|
@@ -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;AAI1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,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;AAI1B,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,SAAQ,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,EACxD,kBAAkB,EAClB,eAAe;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,0EAwCf,CAAC;AAEH,eAAe,IAAI,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.72",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"dependencies": {
|
|
53
53
|
"@chakra-ui/live-region": "^2.1.0",
|
|
54
54
|
"@internationalized/string-compiler": "^3.2.6",
|
|
55
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
55
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.72",
|
|
56
56
|
"@mittwald/react-use-promise": "^2.6.0",
|
|
57
57
|
"@react-aria/form": "^3.0.12",
|
|
58
58
|
"@react-aria/utils": "^3.27.0",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"devDependencies": {
|
|
91
91
|
"@faker-js/faker": "^9.5.0",
|
|
92
92
|
"@internationalized/date": "^3.7.0",
|
|
93
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
93
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.72",
|
|
94
94
|
"@mittwald/react-use-promise": "^2.6.0",
|
|
95
95
|
"@mittwald/typescript-config": "",
|
|
96
96
|
"@nx/storybook": "^20.4.5",
|
|
@@ -168,5 +168,5 @@
|
|
|
168
168
|
"optional": true
|
|
169
169
|
}
|
|
170
170
|
},
|
|
171
|
-
"gitHead": "
|
|
171
|
+
"gitHead": "04387c8e7dea3de3341c52da2b0f61a4bd689b6f"
|
|
172
172
|
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
/* */
|
|
3
|
-
const info = "flow--alert-icon--info";
|
|
4
|
-
const alertIcon = "flow--alert-icon";
|
|
5
|
-
const warning = "flow--alert-icon--warning";
|
|
6
|
-
const danger = "flow--alert-icon--danger";
|
|
7
|
-
const success = "flow--alert-icon--success";
|
|
8
|
-
const styles = {
|
|
9
|
-
info: info,
|
|
10
|
-
alertIcon: alertIcon,
|
|
11
|
-
warning: warning,
|
|
12
|
-
danger: danger,
|
|
13
|
-
success: success
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export { alertIcon, danger, styles as default, info, success, warning };
|
|
17
|
-
//# sourceMappingURL=AlertIcon.module.scss.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AlertIcon.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|