@mittwald/flow-react-components 0.2.0-alpha.1045 → 0.2.0-alpha.1046
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/AGENTS.md +1 -1
- package/CHANGELOG.md +4 -0
- package/MIGRATION.md +45 -0
- package/dist/assets/doc-properties.json +36089 -36089
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/ActionGroup/lib/getActionGroupSlot.mjs +1 -1
- package/dist/js/packages/components/src/components/ActionGroup/lib/getActionGroupSlot.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Button/Button.mjs +5 -1
- package/dist/js/packages/components/src/components/Button/Button.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Button/Button.module.mjs +3 -3
- package/dist/js/packages/components/src/components/Button/Button.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Chat/Chat.mjs +1 -1
- package/dist/js/packages/components/src/components/Chat/Chat.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Chat/Chat.module.mjs +3 -3
- package/dist/js/packages/components/src/components/Chat/Chat.module.mjs.map +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/SubmitButton/SubmitButton.mjs +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/SubmitButton/SubmitButton.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json/all-dark.mjs +1 -1
- package/dist/js/packages/design-tokens/dist/json/all-dark.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json/all-light.mjs +1 -1
- package/dist/js/packages/design-tokens/dist/json/all-light.mjs.map +1 -1
- package/dist/types/components/ActionGroup/lib/getActionGroupSlot.d.ts.map +1 -1
- package/dist/types/components/Button/Button.browser.test.d.ts +2 -0
- package/dist/types/components/Button/Button.browser.test.d.ts.map +1 -0
- 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/Button/stories/lib.d.ts.map +1 -1
- package/dist/types/components/Chat/Chat.d.ts.map +1 -1
- package/dist/types/lib/theming/hooks/useDesignTokens.d.ts +9 -9
- package/package.json +9 -9
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
//#region src/components/ActionGroup/lib/getActionGroupSlot.tsx
|
|
4
4
|
var getActionGroupSlot = (props) => {
|
|
5
5
|
const { slot: slotFromProps, ...buttonProps } = props;
|
|
6
|
-
const guessedSlot = buttonProps.color === void 0 || buttonProps.color === "primary" || buttonProps.color === "danger" || buttonProps.color === "accent" ? "primary" : "abort";
|
|
6
|
+
const guessedSlot = buttonProps.color === void 0 || buttonProps.color === "primary" || buttonProps.color === "danger" || buttonProps.color === "success" || buttonProps.color === "accent" ? "primary" : "abort";
|
|
7
7
|
return slotFromProps ?? guessedSlot;
|
|
8
8
|
};
|
|
9
9
|
//#endregion
|
package/dist/js/packages/components/src/components/ActionGroup/lib/getActionGroupSlot.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getActionGroupSlot.mjs","names":[],"sources":["../../../../../../../../src/components/ActionGroup/lib/getActionGroupSlot.tsx"],"sourcesContent":["import type { ButtonProps } from \"@/components/Button\";\n\nexport const getActionGroupSlot = (props: ButtonProps): string => {\n const { slot: slotFromProps, ...buttonProps } = props;\n\n const guessedSlot =\n buttonProps.color === undefined ||\n buttonProps.color === \"primary\" ||\n buttonProps.color === \"danger\" ||\n buttonProps.color === \"accent\"\n ? \"primary\"\n : \"abort\";\n\n return slotFromProps ?? guessedSlot;\n};\n"],"mappings":";;;AAEA,IAAa,sBAAsB,UAA+B;CAChE,MAAM,EAAE,MAAM,eAAe,GAAG,gBAAgB;CAEhD,MAAM,cACJ,YAAY,UAAU,KAAA,KACtB,YAAY,UAAU,aACtB,YAAY,UAAU,YACtB,YAAY,UAAU,WAClB,YACA;CAEN,OAAO,iBAAiB;AAC1B"}
|
|
1
|
+
{"version":3,"file":"getActionGroupSlot.mjs","names":[],"sources":["../../../../../../../../src/components/ActionGroup/lib/getActionGroupSlot.tsx"],"sourcesContent":["import type { ButtonProps } from \"@/components/Button\";\n\nexport const getActionGroupSlot = (props: ButtonProps): string => {\n const { slot: slotFromProps, ...buttonProps } = props;\n\n const guessedSlot =\n buttonProps.color === undefined ||\n buttonProps.color === \"primary\" ||\n buttonProps.color === \"danger\" ||\n buttonProps.color === \"success\" ||\n buttonProps.color === \"accent\"\n ? \"primary\"\n : \"abort\";\n\n return slotFromProps ?? guessedSlot;\n};\n"],"mappings":";;;AAEA,IAAa,sBAAsB,UAA+B;CAChE,MAAM,EAAE,MAAM,eAAe,GAAG,gBAAgB;CAEhD,MAAM,cACJ,YAAY,UAAU,KAAA,KACtB,YAAY,UAAU,aACtB,YAAY,UAAU,YACtB,YAAY,UAAU,aACtB,YAAY,UAAU,WAClB,YACA;CAEN,OAAO,iBAAiB;AAC1B"}
|
|
@@ -4,6 +4,7 @@ import { PropsContextProvider } from "../../lib/propsContext/components/PropsCon
|
|
|
4
4
|
import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
|
|
5
5
|
import Button_module_default from "./Button.module.mjs";
|
|
6
6
|
import { extractTextFromFirstChild } from "../../lib/react/remote.mjs";
|
|
7
|
+
import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
|
|
7
8
|
import { IconFailed } from "../Icon/components/icons/IconFailed.mjs";
|
|
8
9
|
import { IconSucceeded } from "../Icon/components/icons/IconSucceeded.mjs";
|
|
9
10
|
import { Wrap } from "../Wrap/Wrap.mjs";
|
|
@@ -39,7 +40,10 @@ var disablePendingProps = (props) => {
|
|
|
39
40
|
/** @flr-generate all */
|
|
40
41
|
var Button = flowComponent("Button", (props) => {
|
|
41
42
|
props = disablePendingProps(props);
|
|
42
|
-
const
|
|
43
|
+
const warnDeprecation = useWarnDeprecation();
|
|
44
|
+
const { color: colorFromProps = "primary", variant = "solid", children, className, size = "m", isPending, isSucceeded, isFailed, "aria-disabled": ariaDisabled, ref, slot: ignoredSlotProp, ariaSlot: slot, unstyled, isReadOnly, elementType, ...restProps } = props;
|
|
45
|
+
if (colorFromProps === "accent") warnDeprecation("The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.");
|
|
46
|
+
const color = colorFromProps === "accent" ? "success" : colorFromProps;
|
|
43
47
|
const rootClassName = unstyled ? className : clsx(
|
|
44
48
|
Button_module_default.button,
|
|
45
49
|
isPending && Button_module_default.isPending,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } 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 { 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\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\n\nexport interface ButtonProps\n extends\n PropsWithChildren<Aria.ButtonProps>,\n FlowComponentProps<HTMLButtonElement> {\n /** Slot for button placement in action groups. */\n slot?: string;\n /** The color of the button. @default \"primary\" */\n color
|
|
1
|
+
{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } 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 { 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\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface ButtonProps\n extends\n PropsWithChildren<Aria.ButtonProps>,\n FlowComponentProps<HTMLButtonElement> {\n /** Slot for button placement in action groups. */\n slot?: string;\n /** The color of the button. @default \"primary\" */\n color?:\n | \"primary\"\n | \"success\"\n | \"secondary\"\n | \"danger\"\n | AlphaColor\n | \"accent\";\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 /** Whether the button is in a read only state. */\n isReadOnly?: boolean;\n /** @internal */\n unstyled?: boolean;\n /** @internal */\n ariaSlot?: string | null;\n /** @internal */\n elementType?: \"button\" | \"span\";\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n if (\n props.isPending ||\n props.isSucceeded ||\n props.isFailed ||\n props[\"aria-disabled\"] ||\n props.isReadOnly\n ) {\n props = { ...props };\n\n const mutedActionHandler = (e: unknown) => {\n if (e && typeof e === \"object\") {\n // stopPropagation is the default behavior in React Aria\n const isReactAriaEvent =\n \"continuePropagation\" in e &&\n typeof e.continuePropagation === \"function\";\n\n if (\n !isReactAriaEvent &&\n \"stopPropagation\" in e &&\n typeof e.stopPropagation === \"function\"\n ) {\n e.stopPropagation();\n }\n if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n e.preventDefault();\n }\n }\n\n return false;\n };\n\n props.onClick = mutedActionHandler;\n props.onPress = mutedActionHandler;\n props.onPressStart = mutedActionHandler;\n props.onPressEnd = mutedActionHandler;\n props.onPressChange = mutedActionHandler;\n props.onPressUp = mutedActionHandler;\n props.onKeyDown = mutedActionHandler;\n props.onKeyUp = mutedActionHandler;\n }\n\n return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n props = disablePendingProps(props);\n\n const warnDeprecation = useWarnDeprecation();\n\n const {\n color: colorFromProps = \"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 isReadOnly,\n elementType,\n ...restProps\n } = props;\n\n if (colorFromProps === \"accent\") {\n warnDeprecation(\n \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n );\n }\n\n const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\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 size === \"s\" && styles[\"size-s\"],\n styles[color],\n styles[variant],\n /**\n * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n * by now, so this Button will be visually disabled via CSS.\n */\n ariaDisabled && styles.ariaDisabled,\n className,\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 stateIcon = isSucceeded ? (\n <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n ) : isFailed ? (\n <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n ) : isPending ? (\n <LoadingSpinner size={size} className={styles.stateIcon} />\n ) : undefined;\n\n const isStringContent = extractTextFromFirstChild(children) !== undefined;\n\n const content = (\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 </>\n );\n\n if (elementType === \"span\") {\n const spanProps = filterDOMProps(restProps, { global: true });\n\n return (\n <span\n {...spanProps}\n data-disabled={restProps.isDisabled || undefined}\n className={\n typeof rootClassName === \"string\" ? rootClassName : undefined\n }\n >\n {content}\n </span>\n );\n }\n\n return (\n <Aria.Button\n className={rootClassName}\n ref={ref}\n slot={slot}\n {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n {...restProps}\n >\n {content}\n </Aria.Button>\n );\n});\n\nexport default Button;\n"],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ var plain = "flow--button--plain";
|
|
|
15
15
|
var primary = "flow--button--primary";
|
|
16
16
|
var solid = "flow--button--solid";
|
|
17
17
|
var ariaDisabled = "flow--button--aria-disabled";
|
|
18
|
-
var
|
|
18
|
+
var success = "flow--button--success";
|
|
19
19
|
var danger = "flow--button--danger";
|
|
20
20
|
var secondary = "flow--button--secondary";
|
|
21
21
|
var dark = "flow--button--dark";
|
|
@@ -39,7 +39,7 @@ var Button_module_default = {
|
|
|
39
39
|
primary,
|
|
40
40
|
solid,
|
|
41
41
|
ariaDisabled,
|
|
42
|
-
|
|
42
|
+
success,
|
|
43
43
|
danger,
|
|
44
44
|
secondary,
|
|
45
45
|
dark,
|
|
@@ -51,6 +51,6 @@ var Button_module_default = {
|
|
|
51
51
|
image
|
|
52
52
|
};
|
|
53
53
|
//#endregion
|
|
54
|
-
export {
|
|
54
|
+
export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, soft, solid, stateIcon, success, text };
|
|
55
55
|
|
|
56
56
|
//# sourceMappingURL=Button.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n position: relative;\n font-family: Inter, sans-serif;\n font-size: var(--font-size-text--m);\n font-weight: bold;\n line-height: var(--line-height);\n border: none;\n border-radius: var(--button--corner-radius);\n padding-block: var(--button--padding-y);\n padding-inline: var(--button--padding-x);\n transition-property: color, background-color;\n transition-duration: var(--transition--duration--default);\n max-width: 100%;\n display: grid;\n align-items: center;\n grid-template-areas: \"content\";\n width: fit-content;\n\n &:where(.outline) {\n border-width: var(--button--border-width);\n border-style: var(--button--border-style);\n padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n padding-inline: calc(\n var(--button--padding-x) - var(--button--border-width)\n );\n }\n\n @include focus.focus;\n\n @extend .primary;\n @extend .solid;\n\n /* Elements */\n .content {\n display: flex;\n column-gap: var(--button--spacing);\n align-items: center;\n justify-content: center;\n }\n\n .content,\n .stateIcon {\n grid-area: content;\n }\n\n .stateIcon {\n justify-self: center;\n }\n\n &:where(:has(.icon):not(:has(.text))) {\n padding: var(--button--padding-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-icon-only) - var(--button--border-width)\n );\n }\n }\n\n &:where(:has(.text) .icon) {\n margin-inline-start: var(--button--spacing);\n }\n\n .counterBadge {\n position: absolute;\n top: calc(var(--size-px--xxs) * -1);\n inset-inline-end: calc(var(--size-px--xxs) * -1);\n }\n\n /* States */\n\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n .content {\n opacity: 0;\n }\n\n &.plain {\n .content:has(.text) {\n opacity: 1;\n }\n }\n }\n\n &.isPending {\n .stateIcon {\n color: var(--button--pending-icon-color);\n }\n }\n\n /* Size */\n\n &:where(.size-s) {\n font-size: var(--button--font-size-s);\n line-height: var(--button--line-height-s);\n padding-block: var(--button--padding-s-y);\n padding-inline: var(--button--padding-s-x);\n column-gap: var(--button--spacing-s);\n border-radius: var(--button--corner-radius-s);\n\n &:where(.outline) {\n padding-block: calc(\n var(--button--padding-s-y) - var(--button--border-width)\n );\n padding-inline: calc(\n var(--button--padding-s-x) - var(--button--border-width)\n );\n }\n\n &:where(:has(.icon):not(:has(.text))) {\n padding: var(--button--padding-s-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-s-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .content {\n column-gap: var(--button--spacing-s);\n }\n }\n\n /* Variants */\n\n @mixin variant($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--default\n );\n color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n &:hover:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--hover\n );\n }\n\n &[data-pressed]:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--pressed\n );\n }\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--disabled\n );\n color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n }\n }\n }\n\n @include variant(primary, solid);\n @include variant(
|
|
1
|
+
{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n position: relative;\n font-family: Inter, sans-serif;\n font-size: var(--font-size-text--m);\n font-weight: bold;\n line-height: var(--line-height);\n border: none;\n border-radius: var(--button--corner-radius);\n padding-block: var(--button--padding-y);\n padding-inline: var(--button--padding-x);\n transition-property: color, background-color;\n transition-duration: var(--transition--duration--default);\n max-width: 100%;\n display: grid;\n align-items: center;\n grid-template-areas: \"content\";\n width: fit-content;\n\n &:where(.outline) {\n border-width: var(--button--border-width);\n border-style: var(--button--border-style);\n padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n padding-inline: calc(\n var(--button--padding-x) - var(--button--border-width)\n );\n }\n\n @include focus.focus;\n\n @extend .primary;\n @extend .solid;\n\n /* Elements */\n .content {\n display: flex;\n column-gap: var(--button--spacing);\n align-items: center;\n justify-content: center;\n }\n\n .content,\n .stateIcon {\n grid-area: content;\n }\n\n .stateIcon {\n justify-self: center;\n }\n\n &:where(:has(.icon):not(:has(.text))) {\n padding: var(--button--padding-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-icon-only) - var(--button--border-width)\n );\n }\n }\n\n &:where(:has(.text) .icon) {\n margin-inline-start: var(--button--spacing);\n }\n\n .counterBadge {\n position: absolute;\n top: calc(var(--size-px--xxs) * -1);\n inset-inline-end: calc(var(--size-px--xxs) * -1);\n }\n\n /* States */\n\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n .content {\n opacity: 0;\n }\n\n &.plain {\n .content:has(.text) {\n opacity: 1;\n }\n }\n }\n\n &.isPending {\n .stateIcon {\n color: var(--button--pending-icon-color);\n }\n }\n\n /* Size */\n\n &:where(.size-s) {\n font-size: var(--button--font-size-s);\n line-height: var(--button--line-height-s);\n padding-block: var(--button--padding-s-y);\n padding-inline: var(--button--padding-s-x);\n column-gap: var(--button--spacing-s);\n border-radius: var(--button--corner-radius-s);\n\n &:where(.outline) {\n padding-block: calc(\n var(--button--padding-s-y) - var(--button--border-width)\n );\n padding-inline: calc(\n var(--button--padding-s-x) - var(--button--border-width)\n );\n }\n\n &:where(:has(.icon):not(:has(.text))) {\n padding: var(--button--padding-s-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-s-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .content {\n column-gap: var(--button--spacing-s);\n }\n }\n\n /* Variants */\n\n @mixin variant($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--default\n );\n color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n &:hover:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--hover\n );\n }\n\n &[data-pressed]:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--pressed\n );\n }\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--disabled\n );\n color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n }\n }\n }\n\n @include variant(primary, solid);\n @include variant(success, solid);\n @include variant(danger, solid);\n @include variant(secondary, solid);\n @include variant(dark, solid);\n @include variant(light, solid);\n @include variant(dark-static, solid);\n @include variant(light-static, solid);\n @include variant(primary, plain);\n @include variant(success, plain);\n @include variant(danger, plain);\n @include variant(secondary, plain);\n @include variant(dark, plain);\n @include variant(light, plain);\n @include variant(dark-static, plain);\n @include variant(light-static, plain);\n @include variant(primary, soft);\n @include variant(success, soft);\n @include variant(danger, soft);\n @include variant(secondary, soft);\n @include variant(dark, soft);\n @include variant(light, soft);\n @include variant(dark-static, soft);\n @include variant(light-static, soft);\n @include variant(primary, outline);\n @include variant(success, outline);\n @include variant(danger, outline);\n @include variant(secondary, outline);\n @include variant(dark, outline);\n @include variant(light, outline);\n @include variant(dark-static, outline);\n @include variant(light-static, outline);\n\n /* Outline */\n\n @mixin outline($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n &.outline {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--default\n );\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--disabled\n );\n }\n }\n }\n }\n\n @include outline(primary, outline);\n @include outline(success, outline);\n @include outline(danger, outline);\n @include outline(secondary, outline);\n @include outline(dark, outline);\n @include outline(light, outline);\n @include outline(dark-static, outline);\n @include outline(light-static, outline);\n @include avatarButton.avatarButton();\n\n &:has(.image) {\n padding: 0;\n background: none;\n height: fit-content;\n\n &:hover:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--hover);\n filter: brightness(var(--image-button--brightness--hover));\n }\n\n &[data-pressed]:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--pressed);\n filter: brightness(var(--image-button--brightness--pressed));\n }\n\n .image {\n width: 100%;\n }\n }\n}\n"],"mappings":""}
|
|
@@ -25,7 +25,7 @@ var Chat = flowComponent("Chat", (props) => {
|
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
Button: { className: dynamic((props) => {
|
|
28
|
-
return props.color === "accent" ? Chat_module_default.
|
|
28
|
+
return props.color === "success" || props.color === "accent" ? Chat_module_default.successButton : Chat_module_default.button;
|
|
29
29
|
}) }
|
|
30
30
|
};
|
|
31
31
|
return /* @__PURE__ */ jsx(PropsContextProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n /** The height of the chat. */\n height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat: FC<ChatProps> = flowComponent(\n \"Chat\",\n (props) => {\n const { height, className, children } = props;\n\n const rootClassName = clsx(styles.chat, className);\n\n const propsContext: PropsContext = {\n MessageThread: {\n tunnel: {\n id: \"messageThread\",\n component: \"Chat\",\n },\n },\n FileCardList: {\n className: styles.fileCardList,\n tunnel: {\n id: \"fileCardList\",\n component: \"Chat\",\n },\n },\n Button: {\n className: dynamic((props) => {\n return props.color === \"accent\"
|
|
1
|
+
{"version":3,"file":"Chat.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n /** The height of the chat. */\n height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat: FC<ChatProps> = flowComponent(\n \"Chat\",\n (props) => {\n const { height, className, children } = props;\n\n const rootClassName = clsx(styles.chat, className);\n\n const propsContext: PropsContext = {\n MessageThread: {\n tunnel: {\n id: \"messageThread\",\n component: \"Chat\",\n },\n },\n FileCardList: {\n className: styles.fileCardList,\n tunnel: {\n id: \"fileCardList\",\n component: \"Chat\",\n },\n },\n Button: {\n className: dynamic((props) => {\n return props.color === \"success\" || props.color === \"accent\"\n ? styles.successButton\n : styles.button;\n }),\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div style={{ height }} className={rootClassName}>\n <div className={styles.messageThreadContainer}>\n <UiComponentTunnelExit id=\"messageThread\" component=\"Chat\" />\n </div>\n <div className={styles.controls}>{children}</div>\n <UiComponentTunnelExit id=\"fileCardList\" component=\"Chat\" />\n </div>\n </PropsContextProvider>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Chat;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,OAAsB,cACjC,SACC,UAAU;CACT,MAAM,EAAE,QAAQ,WAAW,aAAa;CAExC,MAAM,gBAAgB,KAAK,oBAAO,MAAM,SAAS;CAEjD,MAAM,eAA6B;EACjC,eAAe,EACb,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,cAAc;GACZ,WAAW,oBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ,EACN,WAAW,SAAS,UAAU;GAC5B,OAAO,MAAM,UAAU,aAAa,MAAM,UAAU,WAChD,oBAAO,gBACP,oBAAO;EACb,CAAC,EACH;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,OAAO,EAAE,OAAO;GAAG,WAAW;GAAnC,UAAA;IACE,oBAAC,OAAD;KAAK,WAAW,oBAAO;KACrB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAgB,WAAU;KAAQ,CAAA;IACzD,CAAA;IACL,oBAAC,OAAD;KAAK,WAAW,oBAAO;KAAW;IAAc,CAAA;IAChD,oBAAC,uBAAD;KAAuB,IAAG;KAAe,WAAU;IAAQ,CAAA;GACxD;;CACe,CAAA;AAE1B,GACA,EACE,MAAM,SACR,CACF"}
|
|
@@ -5,17 +5,17 @@ var chat = "flow--chat";
|
|
|
5
5
|
var messageThreadContainer = "flow--chat--message-thread-container";
|
|
6
6
|
var fileCardList = "flow--chat--file-card-list";
|
|
7
7
|
var controls = "flow--chat--controls";
|
|
8
|
-
var
|
|
8
|
+
var successButton = "flow--chat--success-button";
|
|
9
9
|
var button = "flow--chat--button";
|
|
10
10
|
var Chat_module_default = {
|
|
11
11
|
chat,
|
|
12
12
|
messageThreadContainer,
|
|
13
13
|
fileCardList,
|
|
14
14
|
controls,
|
|
15
|
-
|
|
15
|
+
successButton,
|
|
16
16
|
button
|
|
17
17
|
};
|
|
18
18
|
//#endregion
|
|
19
|
-
export {
|
|
19
|
+
export { button, chat, controls, Chat_module_default as default, fileCardList, messageThreadContainer, successButton };
|
|
20
20
|
|
|
21
21
|
//# sourceMappingURL=Chat.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.module.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.chat {\n display: flex;\n flex-direction: column;\n width: 100%;\n\n .messageThreadContainer {\n @include scrollbar.scrollbar;\n\n overflow: auto;\n padding-bottom: var(--chat--spacing);\n padding-inline-end: var(--size-px--m);\n margin-inline-end: calc(var(--size-px--m) * -1);\n flex-grow: 1;\n display: flex;\n flex-direction: column-reverse;\n }\n\n .fileCardList {\n margin-top: var(--chat--spacing);\n }\n\n .controls:not(:has(form)),\n .controls form {\n display: flex;\n align-items: flex-start;\n gap: var(--chat--spacing);\n flex-wrap: wrap;\n padding-top: var(--chat--spacing);\n\n > :first-child {\n order: 0;\n width: 100%;\n }\n\n .
|
|
1
|
+
{"version":3,"file":"Chat.module.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.chat {\n display: flex;\n flex-direction: column;\n width: 100%;\n\n .messageThreadContainer {\n @include scrollbar.scrollbar;\n\n overflow: auto;\n padding-bottom: var(--chat--spacing);\n padding-inline-end: var(--size-px--m);\n margin-inline-end: calc(var(--size-px--m) * -1);\n flex-grow: 1;\n display: flex;\n flex-direction: column-reverse;\n }\n\n .fileCardList {\n margin-top: var(--chat--spacing);\n }\n\n .controls:not(:has(form)),\n .controls form {\n display: flex;\n align-items: flex-start;\n gap: var(--chat--spacing);\n flex-wrap: wrap;\n padding-top: var(--chat--spacing);\n\n > :first-child {\n order: 0;\n width: 100%;\n }\n\n .successButton,\n .button {\n order: 1;\n }\n\n .successButton {\n margin-inline-start: auto;\n }\n }\n}\n\n@media (max-width: 550px) {\n .successButton,\n .button {\n flex-grow: 1;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubmitButton.mjs","names":[],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import type { ActionProps } from \"@/components/Action\";\nimport { type ButtonProps } from \"@/components/Button\";\nimport FormAction from \"@/integrations/react-hook-form/components/FormAction\";\nimport ButtonView from \"@/views/ButtonView\";\nimport type { FC } from \"react\";\n\ntype SupportedActionProps = Pick<ActionProps, \"showFeedback\">;\n\nexport type SubmitButtonProps = ButtonProps & SupportedActionProps;\n\nexport const SubmitButton: FC<SubmitButtonProps> = (props) => {\n const { showFeedback, ...buttonProps } = props;\n return (\n <FormAction submit showFeedback={showFeedback}>\n <ButtonView color=\"
|
|
1
|
+
{"version":3,"file":"SubmitButton.mjs","names":[],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import type { ActionProps } from \"@/components/Action\";\nimport { type ButtonProps } from \"@/components/Button\";\nimport FormAction from \"@/integrations/react-hook-form/components/FormAction\";\nimport ButtonView from \"@/views/ButtonView\";\nimport type { FC } from \"react\";\n\ntype SupportedActionProps = Pick<ActionProps, \"showFeedback\">;\n\nexport type SubmitButtonProps = ButtonProps & SupportedActionProps;\n\nexport const SubmitButton: FC<SubmitButtonProps> = (props) => {\n const { showFeedback, ...buttonProps } = props;\n return (\n <FormAction submit showFeedback={showFeedback}>\n <ButtonView color=\"success\" {...buttonProps} />\n </FormAction>\n );\n};\n\nexport default SubmitButton;\n"],"mappings":";;;;;;AAUA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,cAAc,GAAG,gBAAgB;CACzC,OACE,oBAAC,YAAD;EAAY,QAAA;EAAqB;EAC/B,UAAA,oBAAC,YAAD;GAAY,OAAM;GAAU,GAAI;EAAc,CAAA;CACpC,CAAA;AAEhB"}
|