@mittwald/flow-react-components 0.2.0-alpha.35 → 0.2.0-alpha.38
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 +14 -0
- package/dist/assets/doc-properties.json +10769 -10769
- package/dist/js/components/Button/Button.mjs.map +1 -1
- package/dist/js/components/Label/Label.mjs +9 -7
- package/dist/js/components/Label/Label.mjs.map +1 -1
- package/dist/types/components/Button/Button.d.ts +1 -1
- package/dist/types/components/Button/Button.d.ts.map +1 -1
- package/dist/types/components/Label/Label.d.ts.map +1 -1
- package/dist/types/components/Label/stories/Default.stories.d.ts +1 -0
- package/dist/types/components/Label/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/NumberField/stories/Default.stories.d.ts +1 -0
- package/dist/types/components/NumberField/stories/Default.stories.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -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;\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 };\n\n const StateIconComponent = isSucceeded\n ? IconSucceeded\n : isFailed\n ? IconFailed\n : isPending\n ? LoadingSpinner\n : undefined;\n\n const stateIcon = StateIconComponent && (\n <StateIconComponent size={size} className={styles.stateIcon} />\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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"}
|
|
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 };\n\n const StateIconComponent = isSucceeded\n ? IconSucceeded\n : isFailed\n ? IconFailed\n : isPending\n ? LoadingSpinner\n : undefined;\n\n const stateIcon = StateIconComponent && (\n <StateIconComponent size={size} className={styles.stateIcon} />\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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"}
|
|
@@ -6,13 +6,11 @@ import styles from './Label.module.scss.mjs';
|
|
|
6
6
|
import * as Aria from 'react-aria-components';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import '../../lib/propsContext/propsContext.mjs';
|
|
9
|
-
import {
|
|
10
|
-
import '@react-aria/utils';
|
|
11
|
-
import 'remeda';
|
|
12
|
-
import 'dot-prop';
|
|
9
|
+
import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
|
|
13
10
|
import { useLocalizedStringFormatter } from 'react-aria';
|
|
14
11
|
import locales from '../../_virtual/_.locale.json@3b9d9e153ad753f427f375d1275fbcad.mjs';
|
|
15
12
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
13
|
+
import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
|
|
16
14
|
|
|
17
15
|
const Label = flowComponent(
|
|
18
16
|
"Label",
|
|
@@ -29,10 +27,14 @@ const Label = flowComponent(
|
|
|
29
27
|
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
30
28
|
const rootClassName = unstyled ? className : clsx(styles.label, isDisabled && styles.disabled, className);
|
|
31
29
|
const optionalMarker = " " + stringFormatter.format("label.optional");
|
|
32
|
-
|
|
30
|
+
const propsContext = {
|
|
31
|
+
ContextualHelpTrigger: { tunnelId: "contextualHelp" }
|
|
32
|
+
};
|
|
33
|
+
return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(Aria.Label, { ...rest, className: rootClassName, ref, children: [
|
|
33
34
|
children,
|
|
34
|
-
optional && optionalMarker
|
|
35
|
-
|
|
35
|
+
optional && optionalMarker,
|
|
36
|
+
/* @__PURE__ */ jsx(TunnelExit, { id: "contextualHelp" })
|
|
37
|
+
] }) }) });
|
|
36
38
|
}
|
|
37
39
|
);
|
|
38
40
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.mjs","sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"Label.mjs","sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface LabelProps\n extends PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n FlowComponentProps {\n /** Whether the label should show an \"optional\" indicator. */\n optional?: boolean;\n /** Whether the label should be displayed as disabled. */\n isDisabled?: boolean;\n /* @internal */\n unstyled?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Label = flowComponent<\"Label\", HTMLLabelElement>(\n \"Label\",\n (props) => {\n const {\n children,\n className,\n optional,\n isDisabled,\n ref,\n unstyled = false,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const rootClassName = unstyled\n ? className\n : clsx(styles.label, isDisabled && styles.disabled, className);\n\n const optionalMarker = \" \" + stringFormatter.format(\"label.optional\");\n\n const propsContext: PropsContext = {\n ContextualHelpTrigger: { tunnelId: \"contextualHelp\" },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <TunnelProvider>\n <Aria.Label {...rest} className={rootClassName} ref={ref}>\n {children}\n {optional && optionalMarker}\n <TunnelExit id=\"contextualHelp\" />\n </Aria.Label>\n </TunnelProvider>\n </PropsContextProvider>\n );\n },\n);\n\nexport default Label;\n"],"names":[],"mappings":";;;;;;;;;;;;AA2BO,MAAM,KAAQ,GAAA,aAAA;AAAA,EACnB,OAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,IAAM,MAAA,aAAA,GAAgB,WAClB,SACA,GAAA,IAAA,CAAK,OAAO,KAAO,EAAA,UAAA,IAAc,MAAO,CAAA,QAAA,EAAU,SAAS,CAAA;AAE/D,IAAA,MAAM,cAAiB,GAAA,GAAA,GAAM,eAAgB,CAAA,MAAA,CAAO,gBAAgB,CAAA;AAEpE,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,qBAAA,EAAuB,EAAE,QAAA,EAAU,gBAAiB;AAAA,KACtD;AAEA,IAAA,uBACG,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,8BAAC,cACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,IAAK,CAAA,KAAA,EAAL,EAAY,GAAG,IAAM,EAAA,SAAA,EAAW,eAAe,GAC7C,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,QAAY,IAAA,cAAA;AAAA,sBACb,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,gBAAiB,EAAA;AAAA,KAAA,EAClC,GACF,CACF,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
@@ -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,CAAC;
|
|
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,+EAwGlB,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/Label/Label.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;AAK9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/Label/Label.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;AAK9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,MAAM,WAAW,UACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,EAC1D,kBAAkB;IACpB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,6EAqCjB,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Label/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,UAAU,CAAC;AAW7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAI5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAAoC,CAAC;AAE5D,eAAO,MAAM,kBAAkB,EAAE,KAkBhC,CAAC"}
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Label/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,UAAU,CAAC;AAW7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAI5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAAoC,CAAC;AAE5D,eAAO,MAAM,kBAAkB,EAAE,KAkBhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAmBxC,CAAC"}
|
|
@@ -10,4 +10,5 @@ export declare const WithFieldDescription: Story;
|
|
|
10
10
|
export declare const WithDefaultValue: Story;
|
|
11
11
|
export declare const WithFieldError: Story;
|
|
12
12
|
export declare const WithUnit: Story;
|
|
13
|
+
export declare const WithContextualHelp: Story;
|
|
13
14
|
//# sourceMappingURL=Default.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/NumberField/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/NumberField/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAavC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAQlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAAsC,CAAC;AAE9D,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAchC,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.38",
|
|
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.38",
|
|
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.38",
|
|
94
94
|
"@mittwald/react-use-promise": "^2.6.0",
|
|
95
95
|
"@mittwald/typescript-config": "",
|
|
96
96
|
"@nx/storybook": "^20.4.4",
|
|
@@ -168,5 +168,5 @@
|
|
|
168
168
|
"optional": true
|
|
169
169
|
}
|
|
170
170
|
},
|
|
171
|
-
"gitHead": "
|
|
171
|
+
"gitHead": "9f621a6efcb53110d29c8375a57247182abc7c28"
|
|
172
172
|
}
|